/* ===========================================================================
   دفتر — a document office, not a developer console.

   Palette is drawn from Iranian official stationery rather than the usual
   cream-and-terracotta: blue-black document ink on faintly green security
   paper, with the violet of an official seal reserved for actions.
   =========================================================================== */

@font-face {
  font-family: 'Estedad'; src: url('/fonts/Estedad-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Estedad'; src: url('/fonts/Estedad-Medium.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Estedad'; src: url('/fonts/Estedad-SemiBold.ttf') format('truetype');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Estedad'; src: url('/fonts/Estedad-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
/* B Titr is THE Iranian document headline face. Used only for the wordmark
   and the seal — loud enough that restraint is the whole point. */
@font-face {
  font-family: 'BTitr'; src: url('/fonts/BTitr-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

:root {
  --ink:        #16253A;
  --ink-soft:   #3A4A5E;
  --muted:      #66756B;
  --paper:      #F6F8F6;
  --tint:       #E8EEEA;
  --tint-deep:  #DBE5DD;
  --rule:       #CBD6CE;
  --seal:       #7A2E4E;
  --seal-soft:  #9B4268;
  --seal-wash:  #F3E7ED;
  --warn:       #8A5A1B;
  --warn-wash:  #FBF1E1;

  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(22,37,58,.06), 0 6px 20px rgba(22,37,58,.06);

  /* Generous by default: the reader is not 25. */
  --fs-body:    17px;
  --fs-msg:     17.5px;
  --lh-msg:     1.95;

  --sidebar-w:  268px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #E8EDE9;
    --ink-soft:  #B9C4BD;
    --muted:     #8B9990;
    --paper:     #121A17;
    --tint:      #1B2521;
    --tint-deep: #24302B;
    --rule:      #2E3A34;
    --seal:      #D98BAE;
    --seal-soft: #E7A9C4;
    --seal-wash: #2A1C23;
    --warn:      #E0B571;
    --warn-wash: #2A2214;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }

/* The `hidden` attribute only sets `display: none` at user-agent priority, so
   any later `display` rule silently defeats it. `.login` and `.app` both set
   display, which left the sign-in screen and the app rendering on top of each
   other. Make hidden authoritative. */
[hidden] { display: none !important; }

html, body {
  height: 100%; margin: 0;
  font-family: 'Estedad', system-ui, sans-serif;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
body { overflow: hidden; }

button, input, textarea, select { font: inherit; color: inherit; }
svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2.5px solid var(--seal); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------- the seal -------------------------------- */
/* Signature motif: an official stamp. Appears as the mark, and again on every
   document the assistant produces. */
.seal {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border: 2.5px solid var(--seal);
  border-radius: 50%;
  color: var(--seal);
  font-family: 'BTitr', serif;
  font-size: 15px; line-height: 1;
  transform: rotate(-7deg);
  opacity: .92;
}
.seal-lg { width: 72px; height: 72px; font-size: 20px; border-width: 3px; margin-inline: auto; }

/* -------------------------------- buttons -------------------------------- */
.btn {
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: .62em 1.05em; font-weight: 600; cursor: pointer;
  background: transparent; transition: background .15s, border-color .15s, opacity .15s;
}
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { background: var(--seal); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--seal-soft); }
@media (prefers-color-scheme: dark) { .btn-primary { color: #16110F; } }
.btn-quiet { border-color: var(--rule); color: var(--ink-soft); }
.btn-quiet:hover { background: var(--tint); }
.btn-block { display: block; width: 100%; }

.icon-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-soft); cursor: pointer;
}
.icon-btn:hover { background: var(--tint); color: var(--ink); }

.linkish {
  border: none; background: none; padding: 0;
  color: var(--muted); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; font-size: .88em;
}
.linkish:hover { color: var(--seal); }

/* --------------------------------- login --------------------------------- */
.login { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--paper); }
.login-card {
  width: min(370px, 100%);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 34px 30px 30px;
}
.login-title { font-family: 'BTitr', serif; font-size: 30px; margin: 16px 0 2px; text-align: center; letter-spacing: .01em; }
.login-sub { margin: 0 0 26px; text-align: center; color: var(--muted); font-size: .93em; }
.field { display: block; margin-bottom: 15px; }
.field span { display: block; font-size: .87em; color: var(--muted); margin-bottom: 6px; }
.field input {
  width: 100%; padding: .72em .85em;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--paper);
}
.field input:focus { border-color: var(--seal); outline: none; }
.login-error {
  background: var(--seal-wash); color: var(--seal);
  border-radius: var(--radius-sm); padding: .65em .85em; margin: 0 0 14px; font-size: .9em;
}

/* ---------------------------------- shell -------------------------------- */
.app { display: flex; height: 100%; }

.sidebar {
  width: var(--sidebar-w); flex: none;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 14px;
  background: var(--tint);
  border-inline-start: 1px solid var(--rule); /* RTL: sits on the right */
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand-text h1 { font-family: 'BTitr', serif; font-size: 21px; margin: 0; line-height: 1.3; }
.brand-text p { margin: 0; font-size: .78em; color: var(--muted); }

.chat-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-inline: -6px; padding-inline: 6px; }
.chat-item {
  display: block; width: 100%; text-align: start;
  border: none; background: none; cursor: pointer;
  padding: .62em .7em; border-radius: var(--radius-sm);
  color: var(--ink-soft); font-size: .93em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item:hover { background: var(--tint-deep); color: var(--ink); }
.chat-item[aria-current="true"] { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.chat-item .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--seal); margin-inline-start: 6px; vertical-align: middle; }

.sidebar-foot { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--rule); padding-top: 12px; }
.who { display: flex; justify-content: space-between; align-items: center; font-size: .85em; color: var(--muted); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.topbar-title { font-size: 1.02em; font-weight: 600; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-state { font-size: .82em; color: var(--muted); }
#menu-btn { display: none; }

/* --------------------------------- thread -------------------------------- */
.thread { flex: 1; overflow-y: auto; padding: 26px 20px 8px; scroll-behavior: smooth; }
.thread-inner, .msg, .doc-card, .notice, .ask { max-width: 720px; margin-inline: auto; }

.msg { margin-bottom: 22px; line-height: var(--lh-msg); font-size: var(--fs-msg); }
.msg p { margin: 0 0 .85em; }
.msg p:last-child { margin-bottom: 0; }
.msg pre {
  background: var(--tint); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: .8em 1em; overflow-x: auto; direction: ltr; text-align: left;
  font-family: ui-monospace, monospace; font-size: .85em; line-height: 1.6;
}
.msg code { font-family: ui-monospace, monospace; font-size: .88em; background: var(--tint); padding: .12em .35em; border-radius: 4px; }
.msg pre code { background: none; padding: 0; }

/* The user's own message sits inside the same 720px reading column as
   everything else, aligned to the inline-end edge (the left, in RTL — the
   mirrored convention Persian messaging apps use). Putting the auto margin on
   the bubble itself cancelled the column centring and let it hug the viewport
   edge on wide screens. */
.row-user { max-width: 720px; margin-inline: auto; display: flex; justify-content: flex-end; margin-bottom: 22px; }
.msg-user {
  background: var(--ink); color: var(--paper);
  padding: .85em 1.15em; border-radius: var(--radius);
  border-end-end-radius: 5px;
  width: fit-content; max-width: min(560px, 85%);
  margin: 0; line-height: var(--lh-msg); font-size: var(--fs-msg);
}
@media (prefers-color-scheme: dark) { .msg-user { color: var(--paper); background: var(--tint-deep); } }

.msg-assistant { color: var(--ink); }

.notice {
  font-size: .88em; padding: .6em .9em; border-radius: var(--radius-sm);
  margin-bottom: 18px; border: 1px solid transparent;
}
.notice-warn { background: var(--warn-wash); color: var(--warn); border-color: currentColor; }
.notice-info { background: var(--tint); color: var(--muted); }

/* activity line — quiet, one row, no spinner theatre */
.activity { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .88em; margin-bottom: 18px; max-width: 720px; margin-inline: auto; }
.activity .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--seal); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* ------------------------- signature: document card ---------------------- */
/* Every file the assistant produces arrives stamped, like a notarised page. */
.doc-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 13px 15px; margin-bottom: 14px;
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
/* the ruled edge of a document */
.doc-card::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 4px; background: repeating-linear-gradient(
    to bottom, var(--seal) 0 6px, transparent 6px 12px);
  opacity: .5;
}
.doc-seal {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--seal); color: var(--seal);
  font-size: .62em; font-weight: 700; letter-spacing: .04em;
  transform: rotate(-11deg); opacity: .9;
}
.doc-meta { flex: 1; min-width: 0; }
.doc-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-sub { font-size: .82em; color: var(--muted); margin-top: 2px; }

/* ---------------------------- permission card ---------------------------- */
.ask {
  border: 1px solid var(--seal); border-radius: var(--radius);
  background: var(--seal-wash); padding: 15px 17px; margin-bottom: 18px;
}
.ask h4 { margin: 0 0 6px; font-size: 1em; }
.ask .what {
  font-family: ui-monospace, monospace; font-size: .82em; direction: ltr; text-align: left;
  background: var(--paper); border-radius: var(--radius-sm); padding: .55em .7em;
  margin: 8px 0 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all;
  border: 1px solid var(--rule);
}
.ask-row { display: flex; gap: 9px; }

/* -------------------------------- composer ------------------------------- */
.composer-wrap { border-top: 1px solid var(--rule); background: var(--paper); padding: 12px 20px 14px; }
.controls { display: flex; gap: 9px; max-width: 720px; margin: 0 auto 10px; flex-wrap: wrap; }
.ctl { display: flex; align-items: center; gap: 6px; font-size: .84em; color: var(--muted); }
.ctl-label { white-space: nowrap; }
.ctl select {
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  /* The chevron is drawn at the physical left, which is inline-END in RTL —
     so the clearance for it must be padding-inline-end, not a physical value. */
  padding-block: .34em; padding-inline-start: .6em; padding-inline-end: 1.7em;
  background: var(--paper); color: var(--ink);
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' fill='none' stroke='%2366756B' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: left .45em center; background-size: 12px;
}
.ctl select:hover { border-color: var(--seal); }

.composer {
  display: flex; align-items: flex-end; gap: 8px;
  max-width: 720px; margin: 0 auto;
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 6px; background: var(--paper);
  transition: border-color .15s;
}
.composer:focus-within { border-color: var(--seal); }
.composer textarea {
  flex: 1; border: none; background: none; resize: none;
  padding: .55em .35em; max-height: 190px; line-height: 1.75;
}
.composer textarea:focus { outline: none; }
.btn-send { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; flex: none; background: var(--seal); color: #fff; border-radius: var(--radius-sm); }
.btn-send:hover:not(:disabled) { background: var(--seal-soft); }
@media (prefers-color-scheme: dark) { .btn-send { color: #16110F; } }
.btn-stop { border-color: var(--rule); color: var(--seal); flex: none; }

.hint { max-width: 720px; margin: 7px auto 0; font-size: .78em; color: var(--muted); min-height: 1.1em; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 720px; margin: 0 auto 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tint); border: 1px solid var(--rule); border-radius: 999px;
  padding: .25em .75em; font-size: .82em;
}
.chip button { border: none; background: none; cursor: pointer; color: var(--muted); padding: 0; line-height: 1; }
.chip button:hover { color: var(--seal); }

/* --------------------------------- dialog -------------------------------- */
.dialog { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0; width: min(560px, 92vw); max-height: 78vh; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.dialog::backdrop { background: rgba(22,37,58,.45); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--rule); margin: 0; }
.dialog-head h3 { margin: 0; font-size: 1.02em; }
.dialog-body { padding: 12px 18px 18px; overflow-y: auto; }

.empty { text-align: center; color: var(--muted); padding: 46px 20px; }
.empty .seal { margin-inline: auto; margin-bottom: 16px; }
.empty h3 { font-family: 'BTitr', serif; font-weight: 400; font-size: 1.3em; margin: 0 0 8px; color: var(--ink); }
.empty p { margin: 0; font-size: .93em; line-height: 1.9; }

.scrim { display: none; position: fixed; inset: 0; background: rgba(22,37,58,.4); border: none; z-index: 5; }

/* -------------------------------- responsive ----------------------------- */
@media (max-width: 780px) {
  /* The drawer is pinned to the inline-end edge, which in RTL is the RIGHT.
     translateX is not direction-aware — positive X is always rightwards — so
     hiding it off-screen is +100% regardless of direction. An earlier RTL
     override used -100%, which slid it back INTO view. */
  .sidebar {
    position: fixed; inset-block: 0; z-index: 6;
    /* inset-inline-START is the RIGHT edge in RTL — the same side the sidebar
       occupies in the desktop layout, so the drawer slides in from where the
       user already expects it. (inset-inline-END resolves to the left here,
       which pinned it to the wrong side entirely.) */
    inset-inline-start: 0;
    transform: translateX(100%); transition: transform .22s ease;
    box-shadow: var(--shadow);
  }
  .sidebar.open { transform: translateX(0); }
  .scrim[data-open] { display: block; }
  #menu-btn { display: grid; }
  .thread { padding-inline: 15px; }
  .composer-wrap { padding-inline: 15px; }
  :root { --fs-msg: 17px; }
}

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