/* ===========================================================================
   ZEX 2.0 — user-facing interface layer.
   Loaded last on purpose: it refines the existing design system (tokens,
   spacing, type scale, states) without rewriting any component contract. The
   Admin Control Center (DEV SILVER) keeps its own, separate presentation, so
   every selector here is scoped to the public site, authentication, chat and
   ZEX CODE surfaces.
   Goals: one header, chat as the visual priority, one composer, comfortable
   touch targets, natural scrolling, fewer borders, calmer shadows, clearer
   hierarchy.
   =========================================================================== */

:root {
  --zex-space-1: 4px;
  --zex-space-2: 8px;
  --zex-space-3: 12px;
  --zex-space-4: 16px;
  --zex-space-5: 24px;
  --zex-space-6: 32px;
  --zex-radius-sm: 10px;
  --zex-radius-md: 14px;
  --zex-radius-lg: 20px;
  --zex-reading: 47rem;         /* comfortable measure for long conversations */
  --zex-reading-wide: 54rem;
  --zex-focus: 0 0 0 3px rgba(var(--accent-rgb), .28);
  --zex-hairline: color-mix(in srgb, var(--border) 78%, transparent);
}

/* ---------------------------------------------------------------- baseline */

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html[dir="rtl"] body { letter-spacing: 0; }
::selection { background: rgba(var(--accent-rgb), .22); }

/* Text selection and mixed Arabic/Latin content stay readable in one flow. */
.msg-tap, .welcome p, .public-section p { text-wrap: pretty; }
.msg-tap h1, .msg-tap h2, .msg-tap h3 { text-wrap: balance; }

/* One consistent focus ring for keyboard users everywhere in the workspace. */
.chat-app :focus-visible, .auth-box :focus-visible, .public-screen :focus-visible,
.zdc :focus-visible, .modal :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--zex-radius-sm);
}

/* ------------------------------------------------------------ authentication */

#authScreen { padding: clamp(16px, 5vw, 48px); }
.auth-box { max-width: 26rem; padding: clamp(22px, 4vw, 34px); }
.auth-box h1 { font-size: clamp(1.3rem, 4vw, 1.5rem); letter-spacing: .18em; font-weight: 600; }
.auth-box .comp { letter-spacing: .28em; font-size: .62rem; }
.auth-intro { font-size: .875rem; line-height: 1.8; }
.auth-box .input { border-radius: var(--zex-radius-md); }
.auth-box .btn-block { border-radius: var(--zex-radius-md); min-height: 46px; font-weight: 600; }
.auth-switch { line-height: 1.9; }
.auth-utilities { gap: var(--zex-space-4); }

/* ------------------------------------------------------------------- chat */

/* The header keeps one brand block and one overflow control; nothing else
   competes with the conversation for attention. */
.chat-head { gap: var(--zex-space-3); }
.chat-head .brand .b-name { letter-spacing: .14em; }
.head-tools { gap: var(--zex-space-1); }

/* Chat is the visual priority: a single centred reading column that grows on
   large screens instead of stretching edge to edge. */
.msgs {
  width: 100%;
  max-width: var(--zex-reading);
  margin-inline: auto;
  padding: var(--zex-space-5) var(--zex-space-5) var(--zex-space-6);
  gap: var(--zex-space-6);
  line-height: 1.85;
  scrollbar-gutter: stable;
}
@media (min-width: 1100px) {
  .msgs { max-width: var(--zex-reading-wide); padding: var(--zex-space-6) var(--zex-space-6) 48px; }
}

.msg { font-size: .95rem; }
.msg p { margin-bottom: .7em; }
.msg h1, .msg h2, .msg h3 { margin: 1.3em 0 .6em; line-height: 1.4; }
.msg h1:first-child, .msg h2:first-child, .msg h3:first-child { margin-top: 0; }
.msg.user {
  border-radius: 1.25rem 1.25rem .35rem 1.25rem;
  padding: .7rem 1.1rem;
  font-size: .95rem;
  line-height: 1.75;
}
html[dir="rtl"] .msg.user { border-radius: 1.25rem 1.25rem 1.25rem .35rem; }
.msg.bot { gap: var(--zex-space-3); }
.bot-avatar { border-radius: var(--zex-radius-sm); flex: none; }
.msg.error .bot-body { border-inline-start-color: var(--danger); }

/* Code stays the brightest, most structured element in a reply. */
.msg .code-wrap { margin: 1rem 0; border-radius: var(--zex-radius-md); }
.msg pre { padding: 1rem 1.1rem; font-size: .8rem; line-height: 1.75; }
.code-actions { padding: .35rem .6rem; }
.copy-code-btn { min-height: 34px; border-radius: var(--zex-radius-sm); }

/* Message actions only appear when they are relevant. */
.message-toolbar { margin-top: .6rem; gap: var(--zex-space-1); }
.message-toolbar button { border-radius: var(--zex-radius-sm); }
@media (hover: hover) { .message-toolbar { opacity: 0; } .msg:hover .message-toolbar, .msg:focus-within .message-toolbar { opacity: 1; } }

/* Welcome / empty state: one clear invitation to type. */
.welcome { gap: var(--zex-space-4); padding: clamp(24px, 6vh, 56px) 0; }
.welcome h1 { font-size: clamp(1.7rem, 4.4vw, 2.4rem); letter-spacing: -.02em; line-height: 1.35; }
.welcome p { max-width: 34rem; line-height: 1.9; }
.welcome-prompts { gap: var(--zex-space-3); max-width: 40rem; }
.prompt-card { border-radius: var(--zex-radius-md); transition: border-color .15s ease, background .15s ease; }
.prompt-card:hover { border-color: var(--border2); }

/* Offline / broadcast / pinned bars share one calm treatment. */
#offlineBar, .broadcast, .admin-banner {
  border-radius: var(--zex-radius-sm);
  border: 1px solid var(--zex-hairline);
  font-size: .8rem;
  line-height: 1.7;
}

/* -------------------------------------------------------------- composer */

.composer {
  width: 100%;
  max-width: var(--zex-reading);
  margin-inline: auto;
  padding: var(--zex-space-2) var(--zex-space-5) 0;
}
@media (min-width: 1100px) { .composer { max-width: var(--zex-reading-wide); } }
.composer-inner {
  grid-template-columns: 42px 42px minmax(0, 1fr) 42px;
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: var(--surface);
  padding: .4rem .5rem;
  box-shadow: none;
  transition: border-color .16s ease;
}
.composer-inner:focus-within { border-color: var(--border2); box-shadow: var(--zex-focus); }
.composer textarea {
  min-height: 2.5rem;
  padding: .55rem .6rem .35rem;
  line-height: 1.65;
  font-size: 1rem;
  max-height: min(11rem, 28dvh);
  resize: none;
}
.composer-inner .icon-btn { width: 42px; height: 42px; min-height: 42px; border-radius: var(--zex-radius-sm); }
.send-btn { width: 42px; height: 42px; border-radius: var(--zex-radius-md); }
.composer-note { font-size: .68rem; letter-spacing: 0; padding-top: .5rem; }
.composer-meta { padding: 0 .35rem .45rem; }
.model-pill { border-radius: 999px; }

/* The attach/preview strip keeps the same rhythm as the composer. */
#attachPreview { max-width: var(--zex-reading); margin-inline: auto; padding: .5rem var(--zex-space-5); }

/* ------------------------------------------------------- navigation sheet */

/* The overflow sheet becomes a real menu: hairline separators, quiet group
   labels, comfortable rows, and no duplication of the primary chat action. */
.head-menu { border-radius: var(--zex-radius-lg); padding: .5rem; }
.hm-group { display: flex; flex-direction: column; }
.hm-group + .hm-group { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--zex-hairline); }
.hm-group-label {
  font-size: .62rem;
  letter-spacing: .16em;
  color: var(--dim);
  text-transform: uppercase;
  padding: .5rem .75rem .25rem;
}
.hm-item { border-radius: var(--zex-radius-sm); font-size: .82rem; min-height: 42px; }
.hm-item:hover { background: var(--card2); }
.hm-item.danger { color: var(--danger); }
.hm-status-row { padding: .4rem .6rem .6rem; border-bottom: 1px solid var(--zex-hairline); margin-bottom: .25rem; }
.chip { border-radius: 999px; }

/* --------------------------------------------------------- sidebar (nav) */

.chat-side { gap: var(--zex-space-1); }
.sess-item { border-radius: var(--zex-radius-sm); }
.sess-item.active { background: var(--card2); }
.sess-group-label { padding: 1rem .75rem .35rem; color: var(--dim); }
.sidebar-foot { margin-top: auto; }

/* ------------------------------------------------------------ loading/typing */

#typingMsg .bot-body { color: var(--muted); }
.typing i { background: var(--muted); }
.scroll-latest { border-radius: 999px; width: 40px; height: 40px; }
.skeleton, .zdc-skeleton { border-radius: var(--zex-radius-md); }

/* ------------------------------------------------------------- touch devices */

@media (hover: none), (max-width: 820px) {
  .hm-item, .btn, .icon-btn, .chip-btn, .prompt-card, .sess-item, .theme-segment button { min-height: 44px; }
  .composer-inner { border-radius: 1.4rem; padding: .45rem .5rem; }
  .composer-inner .icon-btn { width: 44px; height: 44px; }
  .send-btn { width: 44px; height: 44px; }
  .msgs { padding: var(--zex-space-4) var(--zex-space-4) var(--zex-space-5); gap: var(--zex-space-5); }
  .composer { padding: var(--zex-space-2) var(--zex-space-4) 0; }
  .command-hit, .msg.user { max-width: 92%; }
}

/* Small phones: keep the composer and one header row reachable. */
@media (max-width: 400px) {
  .chat-head { padding-inline: var(--zex-space-3); }
  .brand .b-sub { display: none; }
  .welcome h1 { font-size: 1.55rem; }
  .welcome-prompts { grid-template-columns: 1fr; }
}

/* Landscape phones and short windows: the conversation wins over decoration. */
@media (max-height: 520px) {
  .chat-head { min-height: 54px; }
  .welcome-mark, .welcome .eyebrow { display: none; }
  .composer textarea { max-height: 7rem; }
}

/* ---------------------------------------------------------------- desktop */

@media (min-width: 1024px) {
  /* Room to breathe: the sidebar is a real panel, the conversation keeps a
     measured width, and hover states add depth the mobile layout does not. */
  .chat-side { width: 17rem; }
  .chat-head { padding-inline: var(--zex-space-5); }
  .sess-item:hover { background: var(--card2); }
  .prompt-card { min-height: 5.25rem; }
}

@media (min-width: 1440px) {
  /* Large desktops use the extra space for context, not for stretched text. */
  .msgs, .composer { max-width: var(--zex-reading-wide); }
  .welcome-prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------- public site polish */

.public-button, .public-login { border-radius: 999px; }
.public-section { scroll-margin-top: 88px; }
#downloadOptions .zdc { margin-top: var(--zex-space-2); }