:root{
  --bg:#0b1020;--panel:#121a35;--edge:#263254;--me:#243046;
  --accent:#22c55e;--text:#e5e7eb;--muted:#9ba4b4
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Arial,sans-serif}
.wrap{max-width:980px;margin:auto;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto}
header{padding:14px 16px;border-bottom:1px solid var(--edge);display:flex;align-items:center;gap:10px}
header .dot{width:10px;height:10px;border-radius:9999px;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.spacer{flex:1}
.badge{border:1px solid var(--edge);background:#0e1834;border-radius:9999px;padding:6px 10px;font-size:.9rem}
#chat{padding:16px;display:flex;flex-direction:column;gap:10px;overflow:auto;max-height:calc(100dvh - 150px)}
.msg{max-width:82%;border:1px solid var(--edge);border-radius:14px;padding:10px 12px;line-height:1.35;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.ai{align-self:flex-start;background:var(--panel)}
.me{align-self:flex-end;background:var(--me)}
.time{font-size:.75rem;color:var(--muted);margin-top:6px}
.imgBubble{padding:6px}
.imgBubble img{max-width:320px;border-radius:10px;display:block}
footer{position:sticky;bottom:0;left:0;right:0;border-top:1px solid var(--edge);background:#0f1731cc;backdrop-filter:blur(8px)}
.bar{max-width:980px;margin:auto;padding:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{border:1px solid var(--edge);background:#1b2547;color:#e2e8f0;border-radius:10px;padding:9px 14px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.btn.primary{background:var(--accent);color:#08210f;border-color:#1aa751;font-weight:700}
.btn.big{padding:12px 18px;font-size:1.05rem;border-radius:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
label.btn.disabled{opacity:.45;pointer-events:none}
.ghost{background:#1e293b}
.box{flex:1 1 260px;display:flex;align-items:center;gap:8px;background:#121a35;border:1px solid var(--edge);border-radius:12px;padding:8px 10px;min-width:180px}
.box input{flex:1;border:0;outline:0;background:transparent;color:var(--text);font:inherit}
.box input:disabled{opacity:.6}
.typing{display:inline-flex;gap:6px}
.typing .d{width:6px;height:6px;border-radius:999px;background:#93c5fd;animation:b 1.2s infinite}
.typing .d:nth-child(2){animation-delay:.2s}
.typing .d:nth-child(3){animation-delay:.4s}
@keyframes b{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
.cam{position:fixed;inset:0;display:none;place-items:center;background:#0009;backdrop-filter:blur(6px);z-index:50}
.camBox{width:min(92vw,720px);background:#0f172a;border:1px solid var(--edge);border-radius:16px;padding:12px}
.camHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
video{width:100%;max-height:70vh;background:#000;border-radius:10px}
.camActions{margin-top:10px;display:flex;gap:8px;justify-content:flex-end}
.pick{display:flex;gap:10px;margin-top:10px}
.hint{color:var(--muted);font-size:.9rem;margin-top:6px}
@media (max-width:900px){.wrap{max-width:100%}.imgBubble img{max-width:70vw}}
@media (max-width:640px){.msg{max-width:92%}.imgBubble img{max-width:72vw}.btn{padding:8px 12px}.box{flex:1 1 200px}}
@media (max-width:420px){.bar{gap:6px}.btn{padding:7px 10px;font-size:.95rem}.box{flex:1 1 160px}}