/* Agent Threads — Threadia flagship console.
   Dark, logo-led blue/green, Creato Display. Visual layer only. */

@font-face { font-family:"Creato Display"; font-weight:300; font-style:normal; font-display:swap; src:url("/static/fonts/CreatoDisplay-Light.woff2") format("woff2"); }
@font-face { font-family:"Creato Display"; font-weight:400; font-style:normal; font-display:swap; src:url("/static/fonts/CreatoDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family:"Creato Display"; font-weight:500; font-style:normal; font-display:swap; src:url("/static/fonts/CreatoDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family:"Creato Display"; font-weight:700; font-style:normal; font-display:swap; src:url("/static/fonts/CreatoDisplay-Bold.woff2") format("woff2"); }

:root {
  --bg:#0A0E16; --bg-elev:#121A28; --bg-panel:#0E1622;
  --border:#1E2C40; --border-soft:#172336;
  --text:#E9EEF6; --text-dim:#8A98AE; --text-faint:#56657C;
  --accent:#35CFC0; --accent-bright:#6FE3D6; --accent-deep:#1E8C86;
  --blue:#2E9BE0; --blue-bright:#55B4F0; --cyan:#35CFC0; --green:#3FCF8E; --red:#E5675E;
  --living:linear-gradient(90deg,#2E9BE0 0%,#35CFC0 50%,#7CE787 100%);
  --radius:14px; --shadow:0 18px 50px -20px rgba(0,0,0,.8);
  font-size:16px;
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body {
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(46,155,224,.10), transparent 60%),
    radial-gradient(760px 420px at 12% 108%, rgba(53,207,192,.06), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:"Creato Display","SF Pro Display","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:.01em;
}
button { font-family:inherit; }
.eyebrow { font-size:.66rem; text-transform:uppercase; letter-spacing:.22em; color:var(--text-faint); font-weight:600; }

@keyframes halo { 0%,100% { opacity:.38; transform:scale(.98); } 50% { opacity:.7; transform:scale(1.04); } }

/* ---------- Login ---------- */
.login-body { min-height:100vh; display:grid; place-items:center; }
.login-card {
  width:min(380px,92vw);
  background:linear-gradient(180deg,rgba(18,26,40,.7),rgba(10,14,22,.4));
  border:1px solid var(--border); border-radius:18px; padding:2.6rem 2rem;
  text-align:center; box-shadow:var(--shadow);
}
.login-emblem { position:relative; width:76px; height:76px; margin:0 auto 1.1rem; }
.login-emblem img { width:76px; height:76px; border-radius:50%; box-shadow:0 0 0 1px rgba(85,180,240,.35); }
.login-emblem::after { content:""; position:absolute; inset:-8px; border-radius:50%; background:var(--living); filter:blur(16px); opacity:.5; z-index:-1; animation:halo 4.5s ease-in-out infinite; }
.login-card h1 { margin:0 0 .2rem; font-size:1.5rem; font-weight:700; letter-spacing:.02em; }
.tagline { color:var(--text-dim); margin:0 0 1.7rem; font-size:.85rem; }
.login-card input {
  width:100%; padding:.85rem .95rem; margin-bottom:.9rem;
  background:var(--bg-elev); border:1px solid var(--border); border-radius:10px;
  color:var(--text); font-size:1rem; font-family:inherit;
}
.login-card input:focus { outline:none; border-color:var(--accent-deep); box-shadow:0 0 0 3px rgba(53,207,192,.12); }
.login-card button {
  width:100%; cursor:pointer; font-size:1rem; font-weight:600; border:none; border-radius:10px;
  padding:.85rem; background:var(--living); color:#04121f; box-shadow:0 0 18px -6px rgba(53,207,192,.7);
}
.login-card button:hover { filter:brightness(1.05); }
.error { color:var(--red); min-height:1.2em; margin:.7rem 0 0; font-size:.9rem; }

/* ---------- App layout ---------- */
.app { display:grid; grid-template-columns:264px 1fr; grid-template-rows:auto 1fr; height:100vh; }

/* Top bar */
.topbar {
  grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1.4rem; border-bottom:1px solid var(--border-soft);
  background:linear-gradient(180deg,rgba(18,26,40,.6),rgba(10,14,22,.2)); backdrop-filter:blur(6px);
}
.brand { display:flex; align-items:center; gap:.85rem; }
.emblem { position:relative; width:46px; height:46px; flex:0 0 auto; }
.emblem img { width:46px; height:46px; border-radius:50%; display:block; box-shadow:0 0 0 1px rgba(85,180,240,.35); }
.emblem::after { content:""; position:absolute; inset:-5px; border-radius:50%; background:var(--living); filter:blur(11px); opacity:.55; z-index:-1; animation:halo 4.5s ease-in-out infinite; }
.brand .name { font-size:1.02rem; font-weight:700; letter-spacing:.13em; }
.brand .sub { font-size:.72rem; color:var(--text-dim); margin-top:2px; display:flex; align-items:center; gap:.45rem; }
.status { display:inline-flex; align-items:center; gap:.35rem; color:var(--green); font-weight:600; }
.status i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.logout { cursor:pointer; background:transparent; color:var(--text-dim); border:1px solid var(--border); border-radius:9px; padding:.5rem .9rem; font-size:.85rem; }
.logout:hover { color:var(--text); background:var(--bg-elev); }
.topbar-actions { display:flex; align-items:center; gap:.6rem; }
.voice-toggle { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; background:transparent; color:var(--accent); border:1px solid var(--border); border-radius:9px; padding:.45rem .75rem; font-size:.8rem; }
.voice-toggle:hover { background:var(--bg-elev); }
.voice-toggle.muted { color:var(--text-faint); }
.voice-toggle.muted .wave { display:none; }
.voice-toggle svg { flex:0 0 auto; }

/* Mic (voice input) */
.mic { flex:0 0 auto; width:44px; height:44px; border-radius:12px; background:var(--bg-elev); border:1px solid var(--border); color:var(--text-dim); cursor:pointer; display:grid; place-items:center; }
.mic:hover { color:var(--accent); border-color:var(--accent-deep); }
.mic.recording { color:#fff; background:var(--red); border-color:var(--red); animation:micpulse 1.1s ease-in-out infinite; }
.mic.busy { opacity:.6; cursor:default; }
@keyframes micpulse { 0%,100% { box-shadow:0 0 0 0 rgba(229,103,94,.55); } 50% { box-shadow:0 0 0 8px rgba(229,103,94,0); } }

/* Sidebar */
.sidebar { border-right:1px solid var(--border-soft); padding:1.3rem 1.15rem; display:flex; flex-direction:column; gap:1.5rem; overflow-y:auto; background:linear-gradient(180deg,rgba(14,22,34,.5),transparent); }
.panel-title { display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem; }
.panel-title .tick { width:3px; height:12px; border-radius:2px; background:var(--accent); box-shadow:0 0 10px rgba(53,207,192,.5); }
.know { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.know li { font-size:.82rem; line-height:1.4; color:var(--text-dim); background:var(--bg-panel); border:1px solid var(--border-soft); border-left:2px solid var(--accent-deep); border-radius:8px; padding:.55rem .65rem; display:flex; justify-content:space-between; gap:.5rem; }
.know .del { background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:1rem; line-height:1; flex:0 0 auto; padding:0; }
.know .del:hover { color:var(--red); }
.empty { color:var(--text-faint); font-size:.8rem; font-style:italic; }
.meter { display:flex; flex-direction:column; gap:.35rem; }
.meter .cost { font-size:1.55rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.meter div { font-size:.78rem; color:var(--text-faint); }
.rail-foot { margin-top:auto; font-size:.7rem; color:var(--text-faint); }

/* Chat */
.chat { display:flex; flex-direction:column; min-width:0; }
.messages { flex:1; overflow-y:auto; padding:1.8rem clamp(1.2rem,5vw,3.4rem); display:flex; flex-direction:column; gap:1.15rem; }
.msg { max-width:680px; line-height:1.62; font-size:.95rem; white-space:pre-wrap; word-wrap:break-word; }
.msg.user { align-self:flex-end; background:linear-gradient(180deg,#14203100,#142031); border:1px solid var(--border); border-right:2px solid var(--accent-deep); padding:.8rem 1.05rem; border-radius:14px 14px 4px 14px; color:var(--text); }
.msg.agent { align-self:flex-start; color:var(--text); position:relative; padding-left:1.7rem; }
.msg.agent::before { content:""; position:absolute; left:0; top:.2rem; width:20px; height:20px; border-radius:50%; background:var(--living); box-shadow:0 0 12px rgba(53,207,192,.5); }

/* Living "working" state (the thinking bubble) */
.msg.agent.thinking { color:transparent; min-height:20px; }
.msg.agent.thinking::before { animation:pulse 1.2s ease-in-out infinite; }
.msg.agent.thinking::after {
  content:""; position:absolute; left:1.7rem; top:.5rem; width:132px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,#182437 0%,#182437 34%,#35CFC0 50%,#7CE787 60%,#182437 76%,#182437 100%);
  background-size:230% 100%; animation:flow 1.4s linear infinite;
}
@keyframes pulse { 0%,100% { opacity:.55; transform:scale(.9); } 50% { opacity:1; transform:scale(1.06); } }
@keyframes flow { 0% { background-position:120% 0; } 100% { background-position:-120% 0; } }

/* Attachment chips */
.attachments { padding:0 clamp(1.2rem,5vw,3.4rem); display:flex; flex-wrap:wrap; gap:.5rem; }
.attachments:not(:empty) { padding-top:.6rem; }
.chip { display:inline-flex; align-items:center; gap:.4rem; background:var(--bg-elev); border:1px solid var(--border); border-radius:999px; padding:.35rem .7rem; font-size:.82rem; }
.chip .chip-x { background:none; border:none; color:var(--text-dim); padding:0; font-size:1rem; line-height:1; cursor:pointer; }
.chip .chip-x:hover { color:var(--red); }

/* Approval / draft card — critical safety element */
.drafts { padding:0 clamp(1.2rem,5vw,3.4rem); display:flex; flex-direction:column; gap:.8rem; }
.drafts:not(:empty) { padding-top:.4rem; }
.draft-card { max-width:680px; border-radius:var(--radius); overflow:hidden; position:relative; background:linear-gradient(180deg,#101a2a,#0d1522); border:1px solid #26364e; box-shadow:var(--shadow),0 0 0 1px rgba(46,155,224,.06); }
.draft-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--living); box-shadow:0 0 16px rgba(53,207,192,.6); }
.draft-label { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); font-weight:700; padding:.9rem 1.1rem .35rem; }
.draft-field { font-size:.88rem; padding:.15rem 1.1rem; color:var(--text); }
.draft-field b { color:var(--text-faint); font-weight:600; }
.draft-body { margin:.7rem 1.1rem; padding:.8rem .9rem; background:#0A121D; border:1px solid var(--border-soft); border-radius:10px; font-size:.88rem; line-height:1.55; color:var(--text-dim); white-space:pre-wrap; max-height:240px; overflow-y:auto; }
.draft-actions { display:flex; gap:.7rem; padding:.2rem 1.1rem 1.1rem; }
.draft-actions button { font:inherit; font-size:.88rem; font-weight:600; border-radius:10px; padding:.62rem 1.15rem; cursor:pointer; border:1px solid transparent; }
.draft-actions .approve { background:var(--blue); color:#04121f; box-shadow:0 0 0 1px rgba(85,180,240,.4),0 8px 24px -10px rgba(46,155,224,.8); }
.draft-actions .approve:hover { background:var(--blue-bright); }
.draft-actions .approve:disabled { opacity:.6; cursor:default; }
.draft-actions .reject { background:transparent; color:var(--text-dim); border-color:var(--border); }
.draft-actions .reject:hover { color:var(--red); border-color:#3a2630; }

/* Composer */
.composer { display:flex; align-items:flex-end; gap:.7rem; padding:1rem clamp(1.2rem,5vw,3.4rem) 1.35rem; border-top:1px solid var(--border-soft); background:linear-gradient(180deg,transparent,rgba(10,14,22,.6)); }
.attach { flex:0 0 auto; width:44px; height:44px; border-radius:12px; background:var(--bg-elev); border:1px solid var(--border); color:var(--text-dim); font-size:1.25rem; cursor:pointer; display:grid; place-items:center; }
.attach:hover { color:var(--accent); border-color:var(--accent-deep); }
.field-wrap { flex:1; display:flex; align-items:center; background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; padding:.1rem .3rem .1rem .9rem; }
.field-wrap:focus-within { border-color:var(--accent-deep); box-shadow:0 0 0 3px rgba(53,207,192,.12); }
.field-wrap textarea { flex:1; background:none; border:none; outline:none; color:var(--text); font:inherit; line-height:1.4; resize:none; max-height:180px; padding:.7rem 0; }
.field-wrap textarea::placeholder { color:var(--text-faint); }
.send { flex:0 0 auto; width:44px; height:44px; border-radius:12px; border:none; cursor:pointer; background:var(--living); color:#04121f; display:grid; place-items:center; font-size:1.15rem; font-weight:700; box-shadow:0 0 18px -4px rgba(53,207,192,.7); }
.send:hover { filter:brightness(1.06); }
.send:disabled { opacity:.6; cursor:default; }

/* Mobile (phone via Tailscale) */
@media (max-width:760px) {
  .app { grid-template-columns:1fr; grid-template-rows:auto auto 1fr; }
  .sidebar { display:none; }
  .messages { padding:1rem; }
  .composer { padding:.8rem 1rem 1rem; }
}
@media (prefers-reduced-motion:reduce) {
  .emblem::after, .login-emblem::after, .msg.agent.thinking::before, .msg.agent.thinking::after, .mic.recording { animation:none; }
}