:root{--bg:#07101d;--panel:#0f1b2d;--panel2:#132238;--line:#24354e;--text:#eef5ff;--muted:#91a4bf;--accent:#68d391;--accent2:#7dd3fc;--danger:#fda4af}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#07101d,#0a1424);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif;min-height:100vh}.shell{max-width:1150px;margin:auto;padding:18px}.top{display:flex;align-items:center;gap:12px;margin-bottom:14px}.logo{width:46px;height:46px}.brand{font-weight:800;font-size:24px}.sub,.muted,.note{color:var(--muted)}.status{margin-left:auto;padding:7px 11px;border:1px solid var(--line);border-radius:999px;font-size:13px}.status.good{color:var(--accent)}.status.bad{color:var(--danger)}.tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:10px}.tab,.btn,select,input,textarea{font:inherit}.tab,.btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:10px;padding:10px 13px;cursor:pointer}.tab.active,.btn.primary{background:linear-gradient(135deg,#166534,#0f766e);border-color:#2aa477}.card{background:rgba(15,27,45,.92);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 20px 60px #0004}.messages{height:min(58vh,620px);overflow:auto;padding:8px;display:flex;flex-direction:column;gap:10px}.bubble{max-width:86%;padding:12px 14px;border-radius:15px;white-space:pre-wrap;line-height:1.45}.bubble.user{align-self:flex-end;background:#173d36}.bubble.assistant{align-self:flex-start;background:#17263d}.composer{display:grid;grid-template-columns:auto 1fr auto;gap:8px;margin-top:10px}.composer textarea,textarea,input,select{width:100%;background:#0a1525;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:11px;outline:none}.composer textarea{min-height:60px;resize:vertical}.stack{display:flex;flex-direction:column;gap:10px}.row{display:flex;gap:8px;align-items:center}.between{justify-content:space-between}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.task,.item{border:1px solid var(--line);border-radius:12px;padding:12px;margin:8px 0;background:#0b1728}.task h4{margin:0 0 5px}.small{font-size:12px}.note{font-size:13px;border-left:3px solid var(--accent2);padding:8px 10px;background:#0a1525;border-radius:5px}.mic.recording{background:#7f1d1d;animation:pulse 1s infinite}@keyframes pulse{50%{transform:scale(1.05)}}hr{border:0;border-top:1px solid var(--line);width:100%}h2{margin-top:0}@media(max-width:720px){.shell{padding:10px}.grid2{grid-template-columns:1fr}.bubble{max-width:94%}.tabs{position:sticky;top:0;background:var(--bg);z-index:3;padding-top:6px}.composer{grid-template-columns:auto 1fr}.composer #send{grid-column:2}.card{padding:13px}.brand{font-size:21px}}
.btn:disabled{opacity:.55;cursor:wait}.btn.small{padding:6px 10px;font-size:13px}.btn.danger{border-color:#9f1239;background:#3b0d18;color:#fecdd3}.wrap{flex-wrap:wrap}.clamp{max-height:9em;overflow:hidden;white-space:pre-wrap;margin:6px 0}
.bubble.pending{opacity:.7;font-style:italic}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#132238;border:1px solid var(--line);color:var(--text);padding:12px 16px;border-radius:12px;box-shadow:0 10px 30px #0008;z-index:50;max-width:92vw}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:16px;width:min(900px,94vw);max-height:86vh;padding:16px}dialog::backdrop{background:#000a}dialog pre{white-space:pre-wrap;word-break:break-word;max-height:70vh;overflow:auto;font-size:13px;background:#0a1525;padding:12px;border-radius:10px}
progress{width:100%;height:14px;accent-color:var(--accent)}
.shell{padding-top:calc(18px + env(safe-area-inset-top))}
.check{display:flex;gap:8px;align-items:center;color:var(--text)}.check input{width:auto}
.releases{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}.btn.good{border-color:#2aa477;color:#bbf7d0}
.grid-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.thumb{margin:0;background:#0a1525;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:12px}
.thumb img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.thumb figcaption{padding:6px 8px}

#chatView:not([hidden]){display:flex;flex-direction:column;height:calc(100dvh - 96px);min-height:280px;padding:8px 12px 12px;gap:0}
#chatView .messages{flex:1;height:auto;min-height:0;margin:0;padding:6px 2px 10px}
#chatView .composer{display:block;margin:0}
#chatView .composer textarea{min-height:46px;max-height:140px;resize:none;border-radius:22px;padding:12px 16px;line-height:1.4}

/* phone full-width chat */
@media(max-width:900px){
.shell:has(#chatView:not([hidden])){padding-left:4px;padding-right:4px}
#chatView:not([hidden]){width:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent;padding:0 2px calc(6px + env(safe-area-inset-bottom))}
#chatView .messages{padding:2px 0 8px}
#chatView .bubble{max-width:100%}
#chatView .composer{width:100%}
#chatView .composer textarea{width:100%;max-width:none}
}
#chatView .chat-head{flex:0 0 auto;align-items:center;margin:0 2px 4px}#chatView .chat-head h2{margin:0;font-size:18px;line-height:1.2}

#chatView .grok-film,#grokFilm,label[for="grokFilm"],#grokFilmState,#grokFilmProgress{display:none !important}

#chatView .composer{display:flex;align-items:flex-end;gap:8px;width:100%}
#chatView .attach-plus{flex:0 0 auto;width:46px;height:46px;border-radius:50%;padding:0;font-size:28px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center}
#chatView .composer textarea{flex:1;min-width:0;width:auto}
#chatView #grokAttachState{flex:0 0 auto;margin:6px 2px 0}

#chatView .thread-bar{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;padding:0 2px 6px}
#chatView .thread-chip{display:inline-flex;gap:4px;align-items:center;flex:0 0 auto}
#chatView .thread-chip.active .btn:not(.danger){border-color:#2aa477}

nav.tabs{display:none !important}