:root{
  --bg:#0b141a; --panel:#111b21; --panel-2:#202c33; --line:#2a3942;
  --txt:#e9edef; --muted:#8696a0; --me:#005c4b; --them:#202c33;
  --accent:#00a884; --accent-ink:#04201a; --danger:#f15c6d;
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
  --sal:env(safe-area-inset-left); --sar:env(safe-area-inset-right);
  --app-height:100dvh;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--txt);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;
}
/* Only when the chat is active: fully pin the page so ONLY #messages scrolls
   (prevents the layout from sliding under the on-screen keyboard). The gate is
   left scrollable so its button is always reachable with the keyboard open. */
body.chat-mode{position:fixed;inset:0;width:100%;overflow:hidden}
[hidden]{display:none !important}
.muted{color:var(--muted)}
button{font-family:inherit}

/* ---------- Token gate ---------- */
.gate{min-height:var(--app-height);display:grid;place-items:center;
  padding:calc(24px + var(--sat)) calc(20px + var(--sar)) calc(24px + var(--sab)) calc(20px + var(--sal))}
.gate-card{width:min(460px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:30px 24px;display:flex;flex-direction:column;gap:14px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.4)}
.gate-logo{width:54px;height:54px;border-radius:50%;margin:0 auto 4px;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);font-size:22px}
.gate-card h1{margin:0;font-size:24px}
.gate-card .muted{margin:0 0 4px;font-size:14px}
.gate textarea{width:100%;resize:none;background:var(--bg);color:var(--txt);
  border:1px solid var(--line);border-radius:12px;padding:14px;
  font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;min-height:96px}
.gate textarea:focus{outline:none;border-color:var(--accent)}
.gate button{background:var(--accent);color:var(--accent-ink);border:0;border-radius:12px;
  padding:15px;font-weight:700;font-size:16px;cursor:pointer;min-height:50px}
.gate button:active{transform:scale(.99)}
.gate button:disabled{opacity:.6}
.gate-msg{margin:0;min-height:18px;color:var(--danger);font-size:13px}

/* ---------- App shell ---------- */
.app{display:grid;grid-template-columns:300px 1fr;height:var(--app-height);overflow:hidden}

.sidebar{background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
  padding-top:var(--sat);padding-left:var(--sal)}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 12px 14px 16px;border-bottom:1px solid var(--line);min-height:60px}
.brand{font-weight:700;letter-spacing:.4px;display:flex;align-items:center;gap:8px;font-size:15px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.conv-list{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch}
.conv-item{padding:11px 12px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;gap:3px;
  transition:background .12s}
.conv-item:hover{background:var(--panel-2)}
.conv-item.active{background:var(--panel-2)}
.conv-item .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.conv-item .s{font-size:12px;color:var(--muted)}
.logout{margin:8px;margin-bottom:calc(8px + var(--sab));padding:12px;background:transparent;color:var(--muted);
  border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:14px}
.logout:active{background:var(--panel-2)}

.chat{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);position:relative}

.chat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;
  padding-top:calc(10px + var(--sat));padding-right:calc(14px + var(--sar));
  background:var(--panel);border-bottom:1px solid var(--line);min-height:60px;flex:none}
.head-meta{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.chat-head h2{margin:0;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-text{font-size:12px;color:var(--muted)}
.status-text.working{color:var(--accent)}

.messages{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:16px;padding-left:calc(16px + var(--sal));padding-right:calc(16px + var(--sar));
  display:flex;flex-direction:column;gap:6px;min-height:0;
  background-image:radial-gradient(rgba(255,255,255,.018) 1px,transparent 0);background-size:22px 22px}

.empty{margin:auto;text-align:center;color:var(--muted);max-width:280px;padding:20px}
.empty-icon{font-size:34px;color:var(--accent);margin-bottom:10px}
.empty p{font-size:14px;line-height:1.5}

.bubble{max-width:85%;padding:8px 11px 6px;border-radius:12px;white-space:pre-wrap;
  word-wrap:break-word;overflow-wrap:anywhere;position:relative;animation:pop .14s ease-out;
  font-size:15px;line-height:1.42}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.bubble.me{align-self:flex-end;background:var(--me);border-bottom-right-radius:4px}
.bubble.them{align-self:flex-start;background:var(--them);border-bottom-left-radius:4px}
.bubble .meta{display:block;font-size:10.5px;color:rgba(233,237,239,.5);margin-top:3px;text-align:right}
.bubble .att{font-size:12.5px;color:var(--muted);margin-top:5px;border-top:1px solid rgba(255,255,255,.08);padding-top:5px}
.bubble.them.streaming::after{content:"▍";color:var(--accent);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* typing indicator */
.typing{align-self:flex-start;background:var(--them);border-radius:12px;border-bottom-left-radius:4px;
  padding:12px 14px;display:flex;gap:4px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:bounce 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

/* ---------- Composer ---------- */
.composer{background:var(--panel);border-top:1px solid var(--line);flex:none;
  padding:8px 10px;padding-bottom:calc(8px + var(--sab));
  padding-left:calc(10px + var(--sal));padding-right:calc(10px + var(--sar))}
.composer-row{display:flex;align-items:flex-end;gap:6px}
.composer textarea{flex:1;min-width:0;resize:none;max-height:140px;background:var(--panel-2);
  color:var(--txt);border:0;border-radius:22px;padding:11px 16px;
  font-size:16px;line-height:1.4} /* 16px stops iOS auto-zoom */
.composer textarea:focus{outline:none}
.attach-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.attach-chips:empty{display:none}
.chip{background:var(--panel-2);border:1px solid var(--line);border-radius:16px;
  padding:6px 10px;font-size:12.5px;display:flex;gap:8px;align-items:center;max-width:100%}
.chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.chip.uploading{opacity:.6}
.chip button{background:none;border:0;color:var(--danger);cursor:pointer;font-size:15px;padding:0;line-height:1}

.btn-icon{background:transparent;border:0;color:var(--muted);cursor:pointer;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none}
.btn-icon:active{background:var(--panel-2)}
.btn-send{background:var(--accent);color:var(--accent-ink);border:0;width:46px;height:46px;
  border-radius:50%;cursor:pointer;flex:none;display:grid;place-items:center}
.btn-send:active{transform:scale(.94)}

/* ---------- Jump-to-latest button ---------- */
.jump{position:absolute;right:calc(14px + var(--sar));bottom:calc(82px + var(--sab));z-index:6;
  width:42px;height:42px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);
  color:var(--txt);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.45);cursor:pointer;
  opacity:0;transform:translateY(10px) scale(.9);transition:opacity .16s,transform .16s;pointer-events:none}
.jump.show{opacity:1;transform:none;pointer-events:auto}
.jump .badge{position:absolute;top:-6px;right:-6px;background:var(--accent);color:var(--accent-ink);
  border-radius:11px;font-size:11px;min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;
  font-weight:700;line-height:1}

/* ---------- Drawer / backdrop ---------- */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:15;border:0;
  opacity:0;transition:opacity .2s;animation:fade .2s ease forwards}
@keyframes fade{to{opacity:1}}

.only-mobile{display:none}

@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;bottom:0;left:0;width:84%;max-width:330px;z-index:20;
    transform:translateX(-105%);transition:transform .22s ease;
    box-shadow:4px 0 30px rgba(0,0,0,.5);padding-bottom:0}
  .sidebar.open{transform:none}
  .only-mobile{display:grid}
  .bubble{max-width:88%}
}

/* Pointer-fine devices: hide hover bg flashes on tap */
@media (hover:none){.conv-item:hover{background:transparent}.conv-item.active:hover{background:var(--panel-2)}}