@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #162030;
  --bg2: #1b2638;
  --panel: #212d40;
  --panel2: #283549;
  --line: #33425a;
  --tx: #eaf0f7;
  --mut: #98a8bd;
  --cy: #7cc8ff;
  --cy2: #4f9dff;
  --ink: #0b1a2b;
  --glow: 0 6px 20px #4f9dff40;
  --me: #2c4d76;
  --err: #ff8080;
  --level: 0;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(120% 70% at 50% -10%, #25395499 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 120%, #1a2b4199 0%, transparent 60%),
    var(--bg);
  color: var(--tx);
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
.screen { height: 100%; display: flex; flex-direction: column; }
[hidden] { display: none !important; }

/* ── Globe ────────────────────────────────────────────── */
.globe { display: block; flex: none; }
.globe--lock { width: min(300px, 78vw); height: min(300px, 78vw); }
.globe--mini { width: 44px; height: 44px; margin: -4px; }
.globe--big  { width: min(340px, 86vw); height: min(340px, 86vw); cursor: pointer; }

/* ── Lock ─────────────────────────────────────────────── */
.lock { align-items: center; justify-content: center; gap: 10px; padding: 24px 16px; text-align: center; }
.brand {
  margin: 0; font-size: 36px; letter-spacing: .55em; text-indent: .55em; font-weight: 200; direction: ltr;
  background: linear-gradient(180deg, #fff, #8eeaff); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fadeUp .9s ease-out both .2s;
}
.birth { animation: fadeUp .9s ease-out both .45s; }
.lock-form { animation: fadeUp .9s ease-out both .7s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }
.birth { margin: 0; color: var(--mut); font-size: 14px; }
.lock-form { display: flex; gap: 8px; width: min(320px, 100%); margin-top: 18px; }
.lock-form input {
  flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  color: var(--tx); padding: 12px 14px; font: inherit; text-align: center; outline: none;
}
.lock-form input:focus { border-color: var(--cy2); box-shadow: 0 0 0 3px #4f9dff22; }
.lock-form button { border: 0; border-radius: 14px; padding: 0 20px; background: linear-gradient(135deg, var(--cy), var(--cy2)); color: var(--ink); font-weight: 700; }
.fp {
  display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 22px; border-radius: 999px;
  border: 1px solid #7cc8ff55; background: #7cc8ff12; color: var(--cy); font-weight: 600;
  animation: fadeUp .9s ease-out both .8s;
}
.fp svg { width: 26px; height: 26px; fill: none; stroke: var(--cy); stroke-width: 1.6; stroke-linecap: round; }
.offer {
  align-self: stretch; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 16px;
  background: linear-gradient(135deg, #7cc8ff14, #a855f714); border: 1px solid #7cc8ff33; font-size: 14px;
}
.offer span { flex: 1; min-width: 160px; }
.offer button { border: 0; border-radius: 999px; padding: 7px 16px; font-weight: 600; }
.offer .yes { background: linear-gradient(135deg, var(--cy), var(--cy2)); color: var(--ink); }
.offer .no { background: none; color: var(--mut); }
.err { color: var(--err); min-height: 1.5em; margin: 0; font-size: 14px; }

/* ── Header ───────────────────────────────────────────── */
.top {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: #162030e0; backdrop-filter: blur(10px);
}
.top-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.top-txt strong { letter-spacing: .3em; font-weight: 500; direction: ltr; text-align: right; }
.top-txt span { color: var(--mut); font-size: 13px; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); display: grid; place-items: center; }
.icon-btn svg { width: 22px; height: 22px; fill: var(--mut); stroke: var(--mut); stroke-width: 0; }
.icon-btn svg .wave { fill: none; stroke-width: 1.8; stroke-linecap: round; opacity: .25; }
.icon-btn[aria-pressed="true"] svg { fill: var(--cy); stroke: var(--cy); }
.icon-btn[aria-pressed="true"] svg .wave { opacity: 1; }

/* ── Chat ─────────────────────────────────────────────── */
.chat { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
/* Scrollbar: a slim glowing light-rail that brightens while you scroll or hover */
.chat { gap: 14px; }
.chat::-webkit-scrollbar { width: 5px; }
.chat::-webkit-scrollbar-track { background: linear-gradient(180deg, transparent, #7cc8ff0d 20%, #7cc8ff0d 80%, transparent); border-radius: 3px; margin: 10px 0; }
.chat::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: linear-gradient(180deg, #7cc8ff00, #7cc8ff 30%, #4f9dff 70%, #4f9dff00);
  opacity: .5; box-shadow: 0 0 8px #7cc8ff;
}
.chat::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #7cc8ff33, #bff6ff 30%, #7cc8ff 70%, #4f9dff33); }
.chat::-webkit-scrollbar-button { display: none; height: 0; }
.msg { max-width: 86%; padding: 10px 16px; border-radius: 18px; white-space: pre-wrap; word-wrap: break-word; animation: rise .25s ease-out; }
.msg--atlas { white-space: normal; padding: 12px 18px; line-height: 1.95; }
.msg .body p { margin: 0 0 .7em; }
.msg .body p:last-child, .msg .body ul:last-child { margin-bottom: 0; }
.msg .body ul { margin: .2em 0 .7em; padding: 0 1.2em 0 0; }
.msg .body li { margin: .25em 0; }
.msg .body li::marker { color: var(--cy); }
.msg .body strong { color: #fff; font-weight: 700; }
.msg .say { margin-top: 0; }
.msg .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.msg .council {
  font-size: 11px; direction: ltr; padding: 2px 10px; border-radius: 999px;
  color: #ffd9f5; background: linear-gradient(90deg, #a855f733, #f59e0b26); border: 1px solid #f0abfc33;
}
.msg--me { align-self: flex-start; background: var(--me); border-bottom-right-radius: 6px; }
.msg--atlas { align-self: flex-end; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg--sys { align-self: center; background: none; color: var(--mut); font-size: 13px; text-align: center; padding: 4px; }
.msg--err { align-self: center; color: var(--err); font-size: 14px; background: #ff6b6b14; }
.msg .heard { display: block; color: var(--mut); font-size: 12px; margin-bottom: 2px; }
.msg .say { display: inline-flex; margin-top: 6px; border: 0; background: none; color: var(--cy); font-size: 13px; gap: 4px; align-items: center; padding: 0; opacity: .85; }
.msg a { color: var(--cy); text-decoration: none; border-bottom: 1px dashed #7cc8ff66; margin: 0 2px; direction: ltr; unicode-bidi: isolate; }
.msg .steps { display: block; margin-bottom: 6px; color: var(--mut); font-size: 12px; line-height: 1.6; }
.msg--atlas { box-shadow: 0 4px 18px #0b14222e; }
.msg--atlas::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, #7cc8ff55, transparent 40%, transparent 70%, #4f9dff33);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.msg--atlas { position: relative; }
/* Thinking indicator: glass pill, orbiting light border, morphing liquid orb, shimmering text.
   Colours follow the phase (--h1/--h2) and glide between phases. */
@property --a  { syntax: '<angle>';  inherits: false; initial-value: 0deg; }
@property --h1 { syntax: '<number>'; inherits: true;  initial-value: 268; }
@property --h2 { syntax: '<number>'; inherits: true;  initial-value: 200; }
.think {
  --h1: 268; --h2: 200;
  align-self: flex-end; position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 14px;
  max-width: 86%; padding: 12px 20px 12px 14px; border-radius: 999px;
  background: #1f2b3ee6; backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px #ffffff0d, 0 12px 40px hsla(var(--h1), 90%, 55%, .22), 0 0 60px hsla(var(--h2), 90%, 55%, .12);
  transition: --h1 1.2s ease, --h2 1.2s ease;
  animation: thinkIn .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
/* orbiting light on the border */
.think::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--a), transparent 0deg, hsl(var(--h1) 95% 70%) 70deg, hsl(var(--h2) 95% 65%) 140deg, transparent 200deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: orbit 2.4s linear infinite;
}
@keyframes orbit { to { --a: 360deg; } }
@keyframes thinkIn { from { opacity: 0; transform: translateY(10px) scale(.92); } }

/* liquid orb */
.think .blob {
  flex: none; width: 34px; height: 34px; position: relative;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  background:
    radial-gradient(circle at 30% 30%, #fff 0 8%, transparent 30%),
    conic-gradient(from var(--a), hsl(var(--h1) 95% 60%), hsl(var(--h2) 95% 60%), hsl(calc(var(--h1) + 40) 95% 65%), hsl(var(--h1) 95% 60%));
  box-shadow: 0 0 18px hsla(var(--h1), 95%, 60%, .7), inset 0 0 10px #ffffff55;
  animation: morph 3.2s ease-in-out infinite, orbit 4s linear infinite;
}
.think .blob i { position: absolute; inset: 22%; border-radius: inherit; background: #ffffff22; filter: blur(3px); animation: morph 2.1s ease-in-out infinite reverse; }
@keyframes morph {
  25% { border-radius: 58% 42% 37% 63% / 55% 38% 62% 45%; transform: rotate(20deg) scale(1.06); }
  50% { border-radius: 37% 63% 46% 54% / 64% 52% 48% 36%; transform: rotate(-10deg) scale(.94); }
  75% { border-radius: 63% 37% 58% 42% / 40% 60% 40% 60%; transform: rotate(12deg) scale(1.04); }
}

.think .tt { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.think .tx {
  font-weight: 500; font-size: 15px; letter-spacing: .01em;
  background: linear-gradient(90deg, #ffffffd9 0%, #ffffffd9 35%, #fff 45%, hsl(var(--h1) 100% 85%) 50%, #fff 55%, #ffffffd9 65%, #ffffffd9 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 2.4s linear infinite;
}
.think .tx::after { content: "…"; display: inline-block; width: 1.2em; animation: dots 1.4s steps(4, end) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes dots { from { width: 0; } to { width: 1.2em; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }
.think .sub { display: none; color: #ffffff8c; font-size: 12px; direction: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; }
.think.has-sub .sub { display: block; }
.think.pop .tt { animation: pop .4s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(5px); filter: blur(2px); } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* ── Voice stage ──────────────────────────────────────── */
.stage {
  position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: radial-gradient(circle at 50% 45%, #203651f2, #162030fa 65%);
  backdrop-filter: blur(6px);
}
.stage p { margin: 0; color: var(--mut); font-size: 17px; }
.stage-actions { display: flex; gap: 12px; }
.ghost, .solid { border-radius: 999px; padding: 9px 26px; }
.ghost { border: 1px solid var(--line); background: none; color: var(--mut); }
.solid { border: 0; background: linear-gradient(135deg, var(--cy), var(--cy2)); color: var(--ink); font-weight: 700; }
.stage:not([hidden]) { animation: fadeIn .25s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }

/* ── Composer ─────────────────────────────────────────── */
.composer {
  display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(10px + var(--safe-b));
  border-top: 1px solid var(--line); background: #162030f2;
}
.composer textarea {
  flex: 1; min-width: 0; max-height: 140px; resize: none; background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; color: var(--tx); padding: 10px 14px; font: inherit; line-height: 1.6; outline: none;
  overflow-y: auto; scrollbar-width: none;
}
.composer textarea::-webkit-scrollbar { display: none; }
.composer textarea:focus { border-color: var(--cy2); }
.mic, .send { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; }
.mic { background: linear-gradient(135deg, var(--cy), var(--cy2)); box-shadow: var(--glow); }
.mic svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.mic svg rect { fill: var(--ink); }
.send { background: var(--panel); border: 1px solid var(--line); }
.send svg { width: 20px; height: 20px; fill: var(--cy); transform: scaleX(-1); }
.send:disabled { opacity: .4; }

/* ── Header: title + project tag ──────────────────────── */
.icon-btn svg.line { fill: none; stroke: var(--tx); stroke-width: 1.8; stroke-linecap: round; }
#title {
  letter-spacing: normal; direction: auto; text-align: right; font-weight: 600; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw;
}
.top-txt { min-width: 0; }
.top-sub { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--mut); font-size: 13px; }
.top-sub #status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-tag {
  flex: none; font-size: 11px; padding: 0 8px; border-radius: 999px; line-height: 1.7;
  color: #ffe9b3; background: #f59e0b1f; border: 1px solid #f59e0b44; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Drawer (slides in from the right, RTL) ───────────── */
.drawer-wrap { position: fixed; inset: 0; z-index: 8; background: #000a; opacity: 0; transition: opacity .25s ease; }
.drawer-wrap.open { opacity: 1; }
.drawer {
  position: absolute; top: 0; bottom: 0; right: 0; width: min(330px, 86vw);
  display: flex; flex-direction: column; gap: 12px; padding: 14px 14px calc(14px + var(--safe-b));
  background: linear-gradient(180deg, #1e2a3d, #1a2535); border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px #000a; transform: translateX(100%); transition: transform .25s cubic-bezier(.2, .8, .3, 1);
}
.drawer-wrap.open .drawer { transform: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; }
.drawer-top strong { font-size: 18px; font-weight: 600; color: var(--cy); }
.drawer-actions { display: flex; gap: 8px; }
.drawer-actions .solid { flex: 1; padding: 10px 14px; }
.drawer-actions .ghost { padding: 10px 14px; color: var(--tx); }
.side-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; scrollbar-color: #7cc8ff44 transparent; }
.side-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 4px 4px; color: var(--mut); font-size: 12px; }
.side-head button { border: 0; background: none; color: var(--cy); font-size: 12px; padding: 2px 4px; }
.side-empty { display: block; color: #7f95a888; font-size: 12px; padding: 4px 10px; }
.side-chat { display: flex; align-items: center; border-radius: 12px; transition: background .15s; }
.side-chat:hover { background: #ffffff08; }
.side-chat.active { background: #7cc8ff14; box-shadow: inset -2px 0 0 var(--cy); }
.side-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; text-align: right; padding: 7px 10px; line-height: 1.5; }
.side-open .t { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.side-open small { color: var(--mut); font-size: 11px; }
.side-more { flex: none; width: 34px; height: 34px; border: 0; background: none; color: var(--mut); border-radius: 10px; font-size: 18px; opacity: .6; }
.side-more:hover { opacity: 1; background: #ffffff0d; }
.side-project { border: 1px solid transparent; border-radius: 14px; }
.side-project.open { border-color: var(--line); background: #ffffff05; }
.side-project-head { display: flex; align-items: center; gap: 4px; }
.side-project-name { flex: 1; min-width: 0; border: 0; background: none; text-align: right; padding: 8px 10px; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-project-tools { display: flex; gap: 2px; opacity: .55; transition: opacity .15s; }
.side-project.open .side-project-tools, .side-project-head:hover .side-project-tools { opacity: 1; }
.side-project-tools button { width: 30px; height: 30px; border: 0; border-radius: 9px; background: none; font-size: 14px; }
.side-project-tools button:hover { background: #ffffff10; }
.side-project-chats { display: none; padding: 0 8px 6px 0; }
.side-project.open .side-project-chats { display: block; }

/* ── Sheets (bottom dialogs) ──────────────────────────── */
.sheet-wrap {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center;
  background: #000a; backdrop-filter: blur(3px); animation: fadeIn .18s ease-out;
}
.sheet-wrap.closing { opacity: 0; transition: opacity .18s; }
.sheet {
  width: min(520px, 100%); max-height: 88vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px; padding: 20px 18px calc(18px + var(--safe-b));
  background: linear-gradient(180deg, #243248, #1e2a3c); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px #000c; animation: sheetUp .25s cubic-bezier(.2, .9, .3, 1);
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 640px) { .sheet-wrap { align-items: center; } .sheet { border-radius: 22px; border-bottom: 1px solid var(--line); } }
.sheet h3 { margin: 0; font-size: 17px; font-weight: 600; }
.sheet p { margin: 0; color: var(--mut); font-size: 14px; }
.sheet label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--mut); }
.sheet input, .sheet textarea {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--tx);
  padding: 10px 12px; font: inherit; font-size: 15px; outline: none; resize: vertical;
}
.sheet input:focus, .sheet textarea:focus { border-color: var(--cy2); box-shadow: 0 0 0 3px #4f9dff22; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sheet-actions button { padding: 9px 20px; border-radius: 999px; }
.sheet-actions button:last-child { margin-inline-start: auto; }
.danger { border: 1px solid #ff6b6b55; background: #ff6b6b14; color: var(--err); border-radius: 999px; padding: 9px 20px; }
.sheet--file { width: min(640px, 100%); }
.file-full { width: 100%; max-height: 52vh; object-fit: contain; border-radius: 14px; background: #121a26; }
.file-summary { font-size: 14px; line-height: 1.9; color: #cfe0ec; background: #ffffff06; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.file-summary p { margin: 0 0 .6em; }
.file-summary p:last-child { margin: 0; }
.file-summary ul { margin: .2em 0 .6em; padding: 0 1.2em 0 0; }

/* ── Toast ────────────────────────────────────────────── */
.toast {
  position: fixed; z-index: 30; left: 50%; bottom: calc(90px + var(--safe-b)); transform: translateX(-50%);
  padding: 9px 18px; border-radius: 999px; font-size: 14px; white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis;
  background: #2a384ef7; border: 1px solid #7cc8ff44; box-shadow: 0 10px 30px #000a, 0 0 20px #7cc8ff22;
  animation: toastIn .25s ease-out; transition: opacity .35s, transform .35s;
}
.toast.out { opacity: 0; transform: translate(-50%, 8px); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ── Attachments ──────────────────────────────────────── */
.att { margin: 2px 0 8px; border-radius: 12px; overflow: hidden; max-width: 260px; }
.att img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.att--broken { display: none; }
.attach-bar {
  display: flex; align-items: center; gap: 10px; margin: 0 12px; padding: 8px 12px;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--panel); font-size: 13px; color: var(--mut);
}
.attach-bar .att { margin: 0; width: 46px; height: 46px; flex: none; display: grid; place-items: center; background: #ffffff08; font-size: 11px; }
.attach-bar .att img { height: 100%; }
.att-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tx); }
.att-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #ffffff10; color: var(--mut); }
.clip { flex: none; width: 40px; height: 46px; border: 0; background: none; display: grid; place-items: center; }
.clip svg { width: 22px; height: 22px; fill: none; stroke: var(--mut); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.clip:hover svg { stroke: var(--cy); }

/* ── Library panel ────────────────────────────────────── */
.library {
  position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column;
  background: radial-gradient(120% 60% at 50% -10%, #25395499, transparent 60%), var(--bg);
  opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease;
}
.library.open { opacity: 1; transform: none; }
.lib-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.lib-top h2 { margin: 0; font-size: 17px; font-weight: 600; }
.lib-grid {
  flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 12px; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.lib-card {
  display: flex; flex-direction: column; gap: 4px; padding: 8px; text-align: right; border-radius: 16px;
  border: 1px solid var(--line); background: var(--panel); transition: border-color .15s, transform .15s;
}
.lib-card:hover { border-color: #7cc8ff55; transform: translateY(-2px); }
.lib-thumb {
  aspect-ratio: 1; border-radius: 11px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, #7cc8ff14, #a855f714); color: var(--cy); font-weight: 700; letter-spacing: .1em; direction: ltr;
}
.lib-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lib-card strong { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.lib-card small { color: var(--mut); font-size: 11px; padding: 0 2px; }
.lib-empty { grid-column: 1 / -1; text-align: center; color: var(--mut); margin: 40px 16px; }
.sheet, .lib-grid { scrollbar-width: thin; scrollbar-color: #7cc8ff44 transparent; }
.sheet::-webkit-scrollbar, .lib-grid::-webkit-scrollbar, .side-list::-webkit-scrollbar { width: 4px; }
.sheet::-webkit-scrollbar-thumb, .lib-grid::-webkit-scrollbar-thumb, .side-list::-webkit-scrollbar-thumb { background: #7cc8ff55; border-radius: 3px; }
.sheet::-webkit-scrollbar-track, .lib-grid::-webkit-scrollbar-track, .side-list::-webkit-scrollbar-track { background: transparent; }
.sheet::-webkit-scrollbar-button, .lib-grid::-webkit-scrollbar-button, .side-list::-webkit-scrollbar-button { display: none; height: 0; }


/* ── Refined look: line icons, calmer surfaces ────────── */
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.il { display: inline-flex; align-items: center; gap: 6px; }
.il .ic { width: 15px; height: 15px; }
.top { background: #162030e0; border-bottom-color: #2b3a50; }
.icon-btn { border-color: #33425a; background: #212d40; transition: background .15s, border-color .15s; }
.icon-btn:hover { background: #283549; border-color: #3d4f69; }
.msg { line-height: 1.85; }
.msg--me { background: var(--me); color: #f2f7fd; }
.msg--atlas { background: #1f2b3d; border-color: #33425a; }
.msg--atlas::before { background: linear-gradient(135deg, #7cc8ff40, transparent 35%, transparent 70%, #4f9dff26); }
.msg--sys { color: #8091a8; font-size: 12.5px; }
.msg .steps { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed #33425a; }
.msg .steps .step { color: var(--mut); font-size: 12px; min-width: 0; }
.msg .steps .step span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg .steps .step .ic { color: var(--cy); width: 13px; height: 13px; }
.msg .heard { display: flex; }
.msg .heard .ic { width: 13px; height: 13px; }
.msg .say { padding: 3px 10px 3px 8px; border-radius: 999px; background: #7cc8ff12; opacity: 1; font-size: 12.5px; transition: background .15s; }
.msg .say:hover { background: #7cc8ff24; }
.msg .say .ic { width: 14px; height: 14px; }
.msg .council { color: #e7dcff; background: #8b7cff1f; border-color: #8b7cff40; }
.att--doc { padding: 8px 12px; background: #ffffff0d; font-size: 13px; }
.composer { border-top-color: #2b3a50; }
.composer textarea { background: #1f2b3d; border-color: #33425a; }
.send { background: #1f2b3d; border-color: #33425a; }
.mic { box-shadow: 0 6px 18px #4f9dff4d; }

/* project tag in header */
.project-tag { display: inline-flex; align-items: center; gap: 4px; color: #ffd98a; background: #f5b5421a; border-color: #f5b54240; }
.project-tag .ic { width: 12px; height: 12px; }

/* drawer */
.drawer { background: linear-gradient(180deg, #1e2a3d, #1a2535); border-left-color: #2f3e55; }
.drawer-brand { font-size: 15px !important; letter-spacing: .32em; font-weight: 500 !important; color: var(--tx) !important; direction: ltr; }
.drawer-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.drawer-actions .ic { width: 17px; height: 17px; }
.side-head { text-transform: none; font-weight: 500; color: #8091a8; padding-top: 8px; border-top: 1px solid #2b3a50; }
.side-head:first-child { border-top: 0; padding-top: 0; }
.side-head button { display: inline-flex; align-items: center; gap: 3px; border-radius: 8px; padding: 3px 8px; }
.side-head button:hover { background: #7cc8ff14; }
.side-head button .ic { width: 13px; height: 13px; }
.side-open { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.side-open .side-ic { grid-row: span 2; width: 16px; height: 16px; color: #7f90a7; }
.side-open .t, .side-open small { grid-column: 2; }
.side-chat.active { background: #7cc8ff17; box-shadow: inset -2px 0 0 var(--cy); }
.side-chat.active .side-ic { color: var(--cy); }
.side-more { display: grid; place-items: center; }
.side-more .ic { width: 17px; height: 17px; }
.side-project-name { display: flex; align-items: center; gap: 8px; }
.side-project-name .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-project-name .side-ic { width: 17px; height: 17px; color: #f5b542; }
.side-project-name .chev { width: 14px; height: 14px; color: var(--mut); transition: transform .2s; }
.side-project.open .chev { transform: rotate(-90deg); }
.side-project.open { background: #ffffff06; border-color: #2f3e55; }
.side-project-tools button { display: grid; place-items: center; color: var(--mut); }
.side-project-tools button:hover { color: var(--tx); }
.side-project-tools .ic { width: 16px; height: 16px; }
.side-project-chats { margin-right: 14px; padding: 0 6px 6px 0; border-right: 1px solid #2f3e55; }

/* sheets, toast */
.sheet input, .sheet textarea { background: #1a2535; border-color: #3a4a63; }
.toast { border-color: #7cc8ff40; box-shadow: 0 10px 30px #0b142266; }

/* attachments */
.attach-bar { background: #1f2b3d; border-color: #33425a; }
.att-x { display: grid; place-items: center; }
.att-x .ic { width: 14px; height: 14px; }
.att-loading { display: inline-flex; align-items: center; gap: 8px; }
.att-loading::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #7cc8ff40; border-top-color: var(--cy); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* library */
.library { background: radial-gradient(120% 60% at 50% -10%, #25395499, transparent 60%), var(--bg); }
.lib-top { border-bottom-color: #2b3a50; }
.lib-card { background: #1f2b3d; border-color: #33425a; }
.lib-thumb { background: linear-gradient(135deg, #7cc8ff14, #8b7cff14); flex-direction: column; gap: 4px; }
.lib-thumb .ic { width: 34px; height: 34px; stroke-width: 1.3; }
.lib-thumb small { font-size: 10px; letter-spacing: .15em; color: var(--mut); }
.lib-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; line-height: 1.9; }
.lib-empty-ic { width: 46px; height: 46px; stroke-width: 1.2; opacity: .5; }
.msg .council { direction: rtl; }
.msg .council bdi { direction: ltr; }

/* ── Drawer footer: brief, reminders, settings ────────── */
.drawer-foot { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid #2b3a50; }
.drawer-foot button {
  display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: right;
  padding: 9px 10px; border-radius: 12px; font-size: 14px; color: #d5deea; transition: background .15s;
}
.drawer-foot button:hover { background: #ffffff0a; }
.drawer-foot .ic { width: 18px; height: 18px; color: var(--mut); }
#briefBtn .ic { color: #ffd98a; }

/* ── Reminders ────────────────────────────────────────── */
.rem-list { display: flex; flex-direction: column; gap: 8px; }
.rem-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #1a2535; border: 1px solid #33425a; }
.rem-ic { width: 20px; height: 20px; color: var(--cy); }
.rem-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.6; }
.rem-txt strong { font-weight: 500; font-size: 14px; }
.rem-txt small { color: var(--mut); font-size: 12px; }
.rem-del { flex: none; width: 34px; height: 34px; border: 0; border-radius: 10px; background: none; color: var(--mut); display: grid; place-items: center; }
.rem-del:hover { color: var(--err); background: #ff80801a; }
.rem-del .ic { width: 17px; height: 17px; }
.msg .rem-chip {
  display: flex; width: fit-content; max-width: 100%; margin-top: 10px; padding: 5px 12px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.7; color: #d9ecff; background: #7cc8ff14; border: 1px solid #7cc8ff33;
}
.msg .rem-chip .ic { color: var(--cy); width: 14px; height: 14px; }

/* ── Settings ─────────────────────────────────────────── */
.set-head { font-size: 13px !important; }
.voice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.voice {
  display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 6px; border-radius: 14px;
  background: #1a2535; border: 1px solid #33425a; transition: border-color .15s, background .15s;
}
.voice.on { border-color: var(--cy); background: #7cc8ff14; box-shadow: 0 0 0 1px #7cc8ff40 inset; }
.voice-pick { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; padding: 6px 8px; text-align: right; line-height: 1.5; }
.voice-pick strong { font-size: 14px; font-weight: 600; }
.voice-pick small { font-size: 11px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.voice-play { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #7cc8ff1f; color: var(--cy); }
.voice-play .ic { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.voice-play.busy { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px #7cc8ff22; } }
.set-toggle { display: flex !important; flex-direction: row !important; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #1a2535; border: 1px solid #33425a; cursor: pointer; }
.set-toggle > span { flex: 1; display: flex; flex-direction: column; line-height: 1.6; }
.set-toggle strong { color: var(--tx); font-weight: 500; font-size: 14px; }
.set-toggle small { color: var(--mut); font-size: 12px; }
.set-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.switch { flex: none; width: 44px; height: 26px; border-radius: 999px; background: #33425a; position: relative; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #c9d4e2; transition: transform .2s, background .2s; }
.set-toggle input:checked + .switch { background: var(--cy2); }
.set-toggle input:checked + .switch::after { transform: translateX(-18px); background: #fff; }
.set-birth { text-align: center; font-size: 12px !important; color: #7f90a7 !important; margin-top: 4px !important; }
.sheet-actions button:disabled { opacity: .6; }

/* ── Offline answer ───────────────────────────────────── */
.msg--offline { border-style: dashed !important; }
.set-offline { cursor: default; }
.set-offline .ghost { flex: none; padding: 7px 16px; border-radius: 999px; color: var(--tx); }

/* ── Message tools, memory ────────────────────────────── */
.msg .msg-tools { display: inline-flex; gap: 6px; }
.msg .msg-tools .say .ic { width: 14px; height: 14px; }
.mem-head { margin: 8px 2px 0; font-size: 12px; color: var(--mut); }
#memoryBtn .ic { color: #c4b5fd; }

/* Conversation mode: the mic glows while ATLAS keeps listening between answers. */
.mic.mic--talking { box-shadow: 0 0 0 4px rgba(239, 83, 80, .55); animation: talkPulse 1.6s ease-in-out infinite; }
@keyframes talkPulse { 50% { box-shadow: 0 0 0 9px rgba(239, 83, 80, .15); } }
@media (prefers-reduced-motion: reduce) { .mic.mic--talking { animation: none; } }