/* m190 AI — in-browser LLM chat. Self-contained dark terminal, matches the Unmask vibe. */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #05070d; --bg2: #0a0f1c; --panel: #0d1424; --ink: #cdd6e6; --dim: #6b7690;
  --grn: #35e0a1; --cyn: #38e1c2; --blu: #7aa2ff; --red: #ff4d5e; --amb: #ffb020;
  --mono: 'SFMono-Regular', ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace;
}
html, body { height: 100%; background: var(--bg); color: var(--ink); font-family: var(--mono); }
body { display: flex; flex-direction: column; overflow: hidden; }

.top { flex: 0 0 auto; padding: 12px 16px; border-bottom: 1px solid rgba(122,162,255,.14);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(8,12,24,.7); }
.top .brand { font-size: .8rem; letter-spacing: 2px; color: var(--dim); text-transform: uppercase; }
.top .brand b { color: var(--grn); }
.badge { font-size: .72rem; color: var(--cyn); border: 1px solid rgba(56,225,194,.35); border-radius: 999px;
  padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 8px var(--grn); }
.top .spacer { flex: 1; }
.back { color: var(--dim); text-decoration: none; font-size: .78rem; } .back:hover { color: var(--ink); }

.picker { display: inline-flex; border: 1px solid rgba(122,162,255,.25); border-radius: 8px; overflow: hidden; }
.picker button { font: inherit; font-size: .76rem; background: transparent; color: var(--dim); border: none;
  padding: 6px 12px; cursor: pointer; }
.picker button.on { background: rgba(122,162,255,.16); color: var(--ink); }
.picker button:disabled { opacity: .5; cursor: default; }

.wrap { flex: 1; overflow-y: auto; padding: 20px 16px 8px; }
.inner { max-width: 820px; margin: 0 auto; }

.gate, .loader { max-width: 620px; margin: 8vh auto; text-align: center; }
.gate h1, .loader h1 { color: #fff; font-size: 1.4rem; margin-bottom: 10px; }
.gate p, .loader p { color: var(--dim); font-size: .9rem; line-height: 1.6; margin-bottom: 10px; }
.gate a { color: var(--blu); }
.bar { height: 10px; background: rgba(122,162,255,.12); border-radius: 6px; overflow: hidden; margin: 14px 0 8px; }
.bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--grn), var(--cyn)); transition: width .25s ease; }
.loader .ptext { font-size: .8rem; color: var(--cyn); min-height: 1.2em; }

.msg { display: flex; gap: 10px; margin: 14px 0; }
.msg .who { flex: 0 0 auto; font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; width: 44px; padding-top: 3px; }
.msg.user .who { color: var(--blu); } .msg.ai .who { color: var(--grn); }
.msg .body { flex: 1; font-size: .92rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.msg .body pre { background: #0a0f1c; border: 1px solid rgba(122,162,255,.18); border-radius: 8px;
  padding: 10px 12px; overflow-x: auto; margin: 8px 0; white-space: pre; }
.msg .body code { background: rgba(122,162,255,.12); padding: 1px 5px; border-radius: 4px; }
.msg .body pre code { background: none; padding: 0; }
.cursor::after { content: '▋'; color: var(--grn); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { font: inherit; font-size: .78rem; background: rgba(122,162,255,.08); border: 1px solid rgba(122,162,255,.25);
  color: var(--blu); border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.chip:hover { background: rgba(122,162,255,.18); }

.composer { flex: 0 0 auto; border-top: 1px solid rgba(122,162,255,.14); padding: 12px 16px; background: rgba(8,12,24,.8); }
.composer .row { max-width: 820px; margin: 0 auto; display: flex; gap: 10px; align-items: flex-end; }
.composer textarea { flex: 1; resize: none; font: inherit; font-size: .92rem; color: var(--ink); background: var(--panel);
  border: 1px solid rgba(122,162,255,.25); border-radius: 10px; padding: 11px 12px; max-height: 160px; }
.composer textarea:focus { outline: none; border-color: var(--blu); }
.composer button { font: inherit; font-weight: 700; font-size: .9rem; padding: 11px 18px; border-radius: 10px;
  border: none; background: var(--grn); color: #04120c; cursor: pointer; }
.composer button:disabled { opacity: .45; cursor: default; }
.hint { max-width: 820px; margin: 8px auto 0; font-size: .7rem; color: var(--dim); text-align: center; }

.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(53,224,161,.3);
  border-top-color: var(--grn); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .msg .who { width: 34px; } }