/* ===========================================================
   Urealm — شاشة المحادثة.

   عمودان على الواسع: التاريخ ثم الخيط. وعمودٌ واحد على الضيّق —
   التاريخ صفيحةٌ تُستدعى لا عمودٌ يقتطع نصف الشاشة.
   =========================================================== */

.chat-page {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--sp-5);
  inline-size: 100%;
  max-inline-size: 1100px;
  block-size: 100%;
  min-block-size: 0;
  overflow: hidden;
}

@media (max-width: 900px) {
  .chat-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--sp-3);
  }
  .chat-page__history { max-block-size: 124px; }
  .chat-page__history-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .chat-history { flex: 0 0 min(260px, 76vw); }
  .chat-page__history .chat-page__new { display: none; }
  .chat-page__history-list { scrollbar-width: none; }
  .chat-page__history-list::-webkit-scrollbar { display: none; }
}

.chat-page__main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-inline-size: 0;
  min-block-size: 0;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 78% 0%, rgb(255 255 255 / 3%), transparent 34%),
    var(--bg-deep);
  box-shadow: var(--shadow-1);
}

.chat-page__head { display: flex; align-items: flex-start; gap: var(--sp-3); }

.chat-page__identity { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-inline-size: 0; }

.chat-page__orb {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 34px;
  block-size: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg-surface-2);
  color: var(--fg-soft);
}

.chat-page__title { font-family: var(--font-display); font-size: var(--t-lg); font-weight: var(--w-medium); }
.chat-page__lede { font-size: var(--t-sm); color: var(--fg-mute); }

.chat-page__new {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--tap);
  block-size: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg-surface-2);
  color: var(--fg-soft);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.chat-page__new:hover { border-color: var(--line-strong); color: var(--fg); transform: rotate(4deg); }
.chat-page__new--mobile { display: none; }

@media (max-width: 900px) { .chat-page__new--mobile { display: inline-flex; } }

.chat-page__scroll { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; }
.chat-page__thread { display: flex; flex-direction: column; gap: var(--sp-5); min-block-size: 100%; padding-block-end: var(--sp-6); }
.chat-page__composer { position: sticky; inset-block-end: 0; padding-block-start: var(--sp-2); background: linear-gradient(to top, var(--bg-deep) 68%, transparent); }

.chat-page__empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-2);
  min-block-size: 100%;
  padding: var(--sp-8);
  color: var(--fg-mute);
  font-size: var(--t-sm);
  text-align: center;
}

/* ----------------------- التاريخ ----------------------- */

.chat-page__history {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-inline-size: 0;
  min-block-size: 0;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-1);
}
.chat-page__history-head { display: flex; align-items: center; gap: var(--sp-2); }

.chat-page__history-label {
  flex: 1;
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.chat-page__history-list { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.chat-page__empty-history { padding: var(--sp-4) 0; font-size: var(--t-xs); color: var(--fg-faint); }

.chat-history {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border-radius: var(--r-md);
  transition: background-color var(--dur-1) var(--ease);
}

.chat-history:hover { background: var(--hover); }

.chat-history__open {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--sp-2) var(--sp-3);
  text-align: start;
}

.chat-history__title {
  font-size: var(--t-sm);
  color: var(--fg-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-history__time { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--fg-faint); }

.chat-history__delete {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  margin-inline-end: var(--sp-1);
  border-radius: var(--r-sm);
  color: var(--fg-faint);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.chat-history:hover .chat-history__delete,
.chat-history__delete:focus-visible { opacity: 1; }
.chat-history__delete:hover { color: var(--danger); }

/* ----------------------- الرسائل ----------------------- */

.chat-message { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }

.chat-message__meta {
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.chat-message__text {
  font-size: var(--t-base);
  line-height: var(--lh-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-message--user .chat-message__text {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  align-self: flex-start;
  max-inline-size: 90%;
}

.chat-message--assistant .chat-message__text { color: var(--fg-soft); }

.chat-message__note {
  font-size: var(--t-xs);
  color: var(--fg-mute);
  padding-inline-start: var(--sp-3);
  border-inline-start: 2px solid var(--line);
}

.chat-message__phase { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--t-xs); color: var(--fg-mute); }

.chat-message__pulse {
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--r-full);
  background: currentColor;
  animation: pulse 1.2s var(--ease-in-out) infinite;
}

@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ----------------------- النشاط والخيارات ----------------------- */

.chat-activity {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
}

.chat-activity--compact { padding: var(--sp-1) var(--sp-2); }

.chat-activity__step {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--fg-mute);
}

.chat-choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.chat-choice {
  min-block-size: var(--tap);
  padding-inline: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg-surface-2);
  color: var(--fg-soft);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.chat-choice:hover { border-color: var(--fg-faint); color: var(--fg); }


/* ===========================================================
   المحرّر ومنتقي النموذج.

   كانت قواعدهما تعيش في `home.css` لأنّ المحرّر ظهر أوّل ما ظهر في
   الرئيسيّة. ثمّ أُعيدت كتابة `home.css` فذهبت معها — وبقي المحرّر
   يُبَثّ في صفحة المحادثة **بلا نمطٍ واحد**: حقلٌ عارٍ بلا حدٍّ ولا
   أرضٍ ولا حشو.

   ومكانها هنا لا هناك: المحرّر مكوّنٌ لصفحة المحادثة، ووضعُ أنماطِ
   مكوّنٍ في ملفّ الشاشة التي استُعمل فيها أوّلًا هو ما جعل حذفَ تلك
   الشاشة يحذفه.
   =========================================================== */

/* ---------- الأقسام ---------- */

.composer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--bg-surface);
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease),
              border-radius 600ms var(--ease-in-out);
}

.composer:focus-within { border-color: var(--accent-line); background: var(--bg-surface-2); }

.composer[data-phase="thinking"],

.composer[data-phase="searching"] { animation: composerThink 2.8s var(--ease-in-out) infinite; }

@keyframes composerThink {
  0%, 100% { border-radius: var(--r-2xl); }
  48% { border-radius: var(--r-lg); }
}

.model-picker {
  inline-size: var(--tap);
  block-size: var(--tap);
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg-inset);
  color: var(--fg-soft);
  font: 650 var(--t-xs)/1 var(--font-mono);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}

.model-picker:hover,

.model-picker[aria-expanded="true"] { color: var(--fg); border-color: var(--accent-line); background: var(--bg-surface); }

.model-picker[data-model="deep"] { color: var(--accent-fg); }

.composer__input {
  inline-size: 100%;
  min-block-size: 44px;
  max-block-size: 168px;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  background: none;
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: var(--lh-snug);
  resize: none;
  outline: none;
  overflow-y: hidden;
  /* اتجاهٌ يتبع ما يُكتب لا ما تُعرض به الواجهة: سؤالٌ إنجليزيّ في
     واجهةٍ عربية يجب أن يُكتب من اليسار. */
  unicode-bidi: plaintext;
}

.composer__input.is-scrolling { overflow-y: auto; }

.composer__input::placeholder { color: var(--fg-faint); }

.composer__bar { display: flex; align-items: center; gap: var(--sp-1); }

.composer__spacer { flex: 1 1 auto; }

.composer__tool {
  display: grid;
  place-items: center;
  inline-size: var(--tap);
  block-size: var(--tap);
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--fg-mute);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.composer__tool:hover { background: var(--hover); color: var(--fg); }

/* زرّ الإرسال يخفت حتى يصير له ما يُرسل: زرٌّ نشطٌ بلا عمل يكذب. */

.composer__send {
  display: grid;
  place-items: center;
  inline-size: var(--tap);
  block-size: var(--tap);
  border: 0;
  border-radius: var(--r-full);
  background: var(--bg-surface-2);
  color: var(--fg-mute);
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease-gate);
}

.composer.is-ready .composer__send,

.composer.is-busy .composer__send { background: var(--accent); color: var(--accent-contrast); }

.composer__send:disabled { cursor: default; }

.composer__send:not(:disabled):active { transform: scale(0.92); }

:root[dir="rtl"] .composer__send svg { transform: none; }

@media (max-width: 620px) {
  .chat-page__main { padding: var(--sp-4); border-radius: var(--r-lg); }
  .chat-page__history { padding: var(--sp-3); border-radius: var(--r-lg); }
  .chat-page__empty { padding: var(--sp-5); }
}

/* ---------- المرفقات ---------- */

.composer__strip { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-inline: var(--sp-2); }

.composer__thumb {
  position: relative;
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-deep);
}

.composer__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.composer__drop {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  display: grid;
  place-items: center;
  inline-size: 16px;
  block-size: 16px;
  border: 0;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--bg-void) 78%, transparent);
  color: var(--fg);
  cursor: pointer;
}

.composer__drop:hover { background: var(--danger); color: var(--fg); }

/* ---------- الجوال ---------- */

:root[data-motion="reduced"] .composer[data-phase="thinking"],

:root[data-motion="reduced"] .composer[data-phase="searching"] { animation: none; }