/* Analyst — a dark workspace with one violet accent, built for a phone first. */
:root {
  --bg: #0a0b10; --bg2: #0e1017; --panel: #141826; --panel-2: #1a1f30;
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16);
  --ink: #f2f4f9; --ink2: #c9cfdc; --dim: #8b93a5;
  --v: #8b7bff; --v2: #6552ff; --mint: #3ddc97; --amber: #f0b866;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --r: 18px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; }
[hidden] { display: none !important; }
b { font-weight: 680; }

/* ------------------------------------------------------------------ ambient */
.mesh { position: fixed; inset: 0; z-index: -2; overflow: hidden; }
.mesh i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.mesh i:nth-child(1) { width: 460px; height: 460px; left: -140px; top: -160px; background: radial-gradient(circle, rgba(101,82,255,.55), transparent 70%); }
.mesh i:nth-child(2) { width: 420px; height: 420px; right: -160px; top: 18%; background: radial-gradient(circle, rgba(61,220,151,.20), transparent 70%); }
.mesh i:nth-child(3) { width: 520px; height: 520px; left: 10%; bottom: -260px; background: radial-gradient(circle, rgba(139,123,255,.28), transparent 70%); }
.grain { position: fixed; inset: 0; z-index: -1; opacity: .035; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------------ orb mark */
.orb { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(160deg, #232a3f, #12141d); border: 1px solid var(--line-2);
  box-shadow: 0 18px 40px -22px rgba(101,82,255,.9), inset 0 1px 0 rgba(255,255,255,.1); }
.orb span { width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #cdc6ff, var(--v) 58%, #2b2470);
  box-shadow: 0 0 24px rgba(139,123,255,.85); }
.orb.big { width: 72px; height: 72px; border-radius: 24px; }
.orb.big span { width: 26px; height: 26px; }
.ava { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font: 700 13px inherit; color: #fff; background: linear-gradient(140deg, var(--v), var(--v2));
  box-shadow: 0 6px 16px -8px rgba(101,82,255,.9); }

/* ------------------------------------------------------------------ gate */
.gate { min-height: 100dvh; display: grid; place-items: center; padding: calc(24px + var(--safe-t)) 16px calc(24px + var(--safe-b)); }
.gate-card { width: min(400px, 100%); background: rgba(20,24,38,.86); border: 1px solid var(--line);
  border-radius: 26px; padding: 28px 22px; backdrop-filter: blur(18px); box-shadow: 0 40px 90px -50px #000; }
.gate-card h1 { font-size: 27px; margin: 18px 0 4px; letter-spacing: -.025em; }
.sub { color: var(--dim); font-size: 14px; margin: 0 0 18px; }
.fld { display: block; margin-bottom: 14px; }
.fld span { display: block; font-size: 12px; color: var(--dim); margin-bottom: 6px; letter-spacing: .05em; text-transform: uppercase; }
input, textarea { width: 100%; background: rgba(0,0,0,.34); border: 1px solid var(--line); color: var(--ink);
  border-radius: 13px; padding: 13px 14px; font: inherit; outline: none; }
input:focus, textarea:focus { border-color: rgba(139,123,255,.7); box-shadow: 0 0 0 3px rgba(139,123,255,.16); }
.btn { border: 1px solid var(--line-2); background: rgba(255,255,255,.05); color: var(--ink); border-radius: 13px;
  padding: 12px 16px; font: 650 15px inherit; cursor: pointer; }
.btn.primary { width: 100%; background: linear-gradient(135deg, var(--v), var(--v2)); border-color: transparent;
  box-shadow: 0 16px 34px -18px rgba(101,82,255,1); margin-top: 6px; }
.btn:active { transform: translateY(1px); }
.msg { min-height: 20px; margin: 12px 0 0; font-size: 13.5px; color: var(--amber); }
.msg.err { color: #ff8fa3; }

/* ------------------------------------------------------------------ shell */
.app { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.top { position: sticky; top: 0; z-index: 6; padding: var(--safe-t) 12px 0; height: calc(60px + var(--safe-t));
  display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line);
  background: rgba(10,11,16,.72); backdrop-filter: blur(16px) saturate(1.2); }
.me { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.me-t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.me-t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-t span { font-size: 11px; color: var(--dim); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.045); color: var(--ink2); cursor: pointer; font-size: 15px; }
.icon:active { background: rgba(255,255,255,.1); }

.thread { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 12px 10px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.row-msg { display: flex; gap: 9px; }
.row-msg.me { justify-content: flex-end; }
.who-ava { width: 28px; height: 28px; border-radius: 9px; flex: none; margin-top: 2px; display: grid; place-items: center;
  font: 700 11px inherit; color: #dcd7ff; background: linear-gradient(150deg, #2a3048, #171b28); border: 1px solid var(--line); }
.bub { max-width: 84%; padding: 12px 14px; border-radius: 16px; overflow-wrap: anywhere; font-size: 15.3px; }
.row-msg.me .bub { background: linear-gradient(135deg, var(--v), var(--v2)); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 12px 26px -18px rgba(101,82,255,1); }
.row-msg.ai .bub { background: rgba(20,24,38,.9); border: 1px solid var(--line); border-bottom-left-radius: 5px; backdrop-filter: blur(8px); }
.bub .acts { display: flex; gap: 8px; margin-top: 8px; opacity: .55; }
.bub .acts button { background: none; border: none; color: var(--ink2); font: 600 11.5px inherit; cursor: pointer; padding: 0; }
.bub .acts button:hover { color: var(--v); }

/* markdown inside bubbles */
.bub p { margin: 0 0 9px; } .bub p:last-child { margin-bottom: 0; }
.bub h1, .bub h2, .bub h3 { margin: 12px 0 7px; font-size: 17px; letter-spacing: -.01em; }
.bub h1 { font-size: 19px; } .bub h3 { font-size: 15.5px; }
.bub ul, .bub ol { margin: 6px 0 9px; padding-left: 20px; }
.bub li { margin: 3px 0; }
.bub code { background: rgba(0,0,0,.42); border: 1px solid var(--line); padding: 1px 5px; border-radius: 6px; font-size: 13.4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bub pre { background: rgba(0,0,0,.48); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; overflow-x: auto; margin: 8px 0; }
.bub pre code { background: none; border: none; padding: 0; font-size: 13px; line-height: 1.5; }
.tbl { overflow-x: auto; margin: 9px 0; position: relative;
  mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
.bub table { width: 100%; border-collapse: collapse; font-size: 12.8px; }
.bub th, .bub td { border: 1px solid var(--line-2); padding: 5px 8px; text-align: left;
  white-space: normal; overflow-wrap: break-word; word-break: normal; vertical-align: top; }
.bub th:first-child, .bub td:first-child { min-width: 76px; white-space: nowrap; }
.bub table { table-layout: auto; }
/* a scrollbar only appears if the content genuinely cannot fit */
.tbl { mask-image: none; -webkit-mask-image: none; }
.tbl { overflow-x: auto; }
.bub th { background: rgba(139,123,255,.16); font-weight: 650; }
.bub blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--v); color: var(--ink2); }
.bub strong { color: #fff; }
.row-msg.me .bub strong { color: #fff; }

.typing { display: inline-flex; gap: 5px; align-items: center; padding: 3px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--v); animation: blink 1.15s infinite; }
.typing i:nth-child(2) { animation-delay: .16s; } .typing i:nth-child(3) { animation-delay: .32s; }
@keyframes blink { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ------------------------------------------------------------------ hero */
.hero { flex: 1; min-height: 0; overflow-y: auto; display: grid; place-items: center; text-align: center; padding: 18px 22px 6px; }
.hero h2 { font-size: 23px; margin: 16px 0 6px; letter-spacing: -.02em; }
.hero p { color: var(--dim); font-size: 14.5px; margin: 0 auto; max-width: 32ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.chips button { border: 1px solid var(--line); background: rgba(255,255,255,.045); color: var(--ink2);
  border-radius: 999px; padding: 9px 14px; font: 500 13.4px inherit; cursor: pointer; }
.chips button:active { background: rgba(139,123,255,.2); border-color: rgba(139,123,255,.6); }

/* ------------------------------------------------------------------ composer */
.composer { position: sticky; bottom: 0; z-index: 4; padding: 8px 10px calc(10px + var(--safe-b));
  background: #0a0b10; border-top: 1px solid var(--line);
  box-shadow: 0 -22px 34px -22px rgba(0,0,0,.95); }
.tier { display: flex; align-items: center; gap: 6px; margin: 0 4px 8px; }
.tier button { border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--dim);
  border-radius: 999px; padding: 5px 12px; font: 650 12px inherit; cursor: pointer; }
.tier button.on { color: #fff; border-color: rgba(139,123,255,.65); background: rgba(139,123,255,.2); }
.meter { margin-left: auto; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.row { display: flex; align-items: flex-end; gap: 7px; }
.row textarea { flex: 1; resize: none; max-height: 148px; border-radius: 20px; padding: 13px 15px; line-height: 1.45; }
.clip { width: 44px; height: 44px; flex: none; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255,255,255,.05); color: var(--ink2); display: grid; place-items: center; cursor: pointer; }
.send { width: 46px; height: 46px; flex: none; border-radius: 15px; border: none; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--v), var(--v2)); display: grid; place-items: center;
  box-shadow: 0 14px 30px -16px rgba(101,82,255,1); }
.send:disabled { opacity: .45; }
.attach-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 4px 8px; }
.att { position: relative; flex: none; width: 118px; border: 1px solid var(--line); background: var(--panel);
  border-radius: 12px; padding: 8px; font-size: 11.5px; color: var(--ink2); }
.att img { width: 100%; height: 56px; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 5px; }
.att b { display: block; font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att em { font-style: normal; color: var(--dim); font-size: 10.5px; }
.att .x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--line-2); background: #1b2030; color: var(--ink); font-size: 11px; line-height: 1; cursor: pointer; }

/* ------------------------------------------------------------------ drawer */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 20; backdrop-filter: blur(2px); }
.drawer { position: fixed; z-index: 21; top: 0; bottom: 0; left: 0; width: min(330px, 88vw);
  background: linear-gradient(180deg, #10131d, #0b0d14); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding-top: var(--safe-t); animation: slide .22s ease; }
@keyframes slide { from { transform: translateX(-16px); opacity: .5; } }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 10px; border-bottom: 1px solid var(--line); }
.search { padding: 10px 12px; }
.search input { border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.drawer-list { flex: 1; overflow-y: auto; padding: 4px 8px 8px; }
.chat-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 1px solid transparent;
  background: none; color: var(--ink2); border-radius: 12px; padding: 10px 11px; font: 14.4px inherit; cursor: pointer; }
.chat-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item em { font-size: 10.5px; color: var(--dim); font-style: normal; }
.chat-item.on { background: rgba(139,123,255,.18); border-color: rgba(139,123,255,.45); color: #fff; }
.drawer-tools { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); }
.tool { flex: 1; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink2);
  border-radius: 11px; padding: 9px; font: 600 12.5px inherit; cursor: pointer; }
.drawer-foot { border-top: 1px solid var(--line); padding: 12px; display: flex; align-items: center;
  justify-content: space-between; font-size: 12px; color: var(--dim); padding-bottom: calc(12px + var(--safe-b)); }
.link { background: none; border: none; color: var(--v); font: 650 13px inherit; cursor: pointer; }

/* ------------------------------------------------------------------ memory sheet */
.sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 30; backdrop-filter: blur(3px); }
.sheet { position: fixed; z-index: 31; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto;
  background: linear-gradient(180deg, #151a29, #0d1017); border-top: 1px solid var(--line-2);
  border-radius: 24px 24px 0 0; padding: 14px 16px calc(20px + var(--safe-b)); animation: up .24s ease; }
@keyframes up { from { transform: translateY(30px); opacity: .6; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mem-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.mem-item { display: flex; gap: 10px; align-items: flex-start; background: rgba(255,255,255,.045);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.mem-item span { flex: 1; }
.mem-item button { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 14px; }
.mem-add { display: flex; gap: 8px; }
.mem-add input { flex: 1; }
.mem-add .btn { flex: none; }

/* attachments inside the user's own bubble */
.row-msg.me .att { background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.24); }
.row-msg.me .att b { color: #fff; }
.row-msg.me .att em { color: rgba(255,255,255,.72); }

/* long inline code (formulas) must not break mid-token awkwardly */
.bub code { word-break: break-word; overflow-wrap: anywhere; }
.bub pre code { word-break: normal; }

/* copy action readable at a glance */
.bub .acts { opacity: .8; }
.bub .acts button { border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; color: var(--ink2); }
.bub .acts button:hover { border-color: rgba(139,123,255,.6); color: #fff; }

/* install help list */
.steps { margin: 4px 0 14px; padding-left: 20px; color: var(--ink2); font-size: 14.5px; line-height: 1.7; }
.steps li { margin: 4px 0; }

/* ---------------------------------------------------------------- desktop (macOS browser)
   Below 1000px the app is phone-shaped. Above it, the chat list becomes a real sidebar and
   everything is held to a readable column instead of stretching across the window. */
@media (min-width: 1000px) {
  body { display: flex; }
  .app { flex: 1 1 auto; min-width: 0; }

  /* the drawer stops being an overlay and sits permanently on the left */
  .drawer { position: relative; inset: auto; top: auto; bottom: auto; left: auto; order: -1;
    height: 100dvh; width: 296px; flex: 0 0 296px; animation: none;
    border-right: 1px solid var(--line); border-left: none; }
  .scrim { display: none !important; }
  #menuBtn, #closeDrawer { display: none; }

  /* a reading column, not a runway */
  .thread { padding: 20px 24px 12px; }
  .row-msg { width: 100%; max-width: 820px; margin: 0 auto; }
  .bub { max-width: 78%; font-size: 15.4px; }

  .composer > * { max-width: 820px; margin-left: auto; margin-right: auto; width: 100%; }
  .composer { padding: 10px 24px calc(14px + var(--safe-b)); }

  .top { padding-left: 24px; padding-right: 24px; }
  .hero { max-width: 620px; margin: 0 auto; }
  .hero h2 { font-size: 27px; }
  .chips { max-width: 560px; margin-left: auto; margin-right: auto; }

  /* sheets and dialogs read better as centred cards on a wide screen */
  .sheet { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 50%);
    width: min(560px, 92vw); border-radius: 22px; border: 1px solid var(--line-2); animation: none; }
  .gate-card { width: min(440px, 100%); }
}

/* scrollbars: thin and dark, and invisible when there is nothing to scroll */
.thread, .drawer-list, .hero, .sheet, .attach-strip { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.thread::-webkit-scrollbar, .drawer-list::-webkit-scrollbar, .sheet::-webkit-scrollbar { width: 8px; height: 8px; }
.thread::-webkit-scrollbar-track, .drawer-list::-webkit-scrollbar-track, .sheet::-webkit-scrollbar-track { background: transparent; }
.thread::-webkit-scrollbar-thumb, .drawer-list::-webkit-scrollbar-thumb, .sheet::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 8px; }
.thread:not(:has(.row-msg)) { overflow-y: hidden; }   /* an empty thread has nothing to scroll */
.hero:not(:has(.chips button)) { overflow: hidden; }