:root { --bg:#181818; --surface:#202122; --surface-2:#1c1d1f; --surface-3:#2b2c2e; --line:#303235; --text:#eeeeee; --muted:#929292; --green:#62e4b2; --blue:#82b7ff; --yellow:#ffd078; --red:#ff8e9b; --sidebar-width:252px; --inspector-width:286px; --splitter-width:20px; --conversation-width:960px; --conversation-gutter:clamp(24px,3vw,68px); }
* { box-sizing:border-box; }
.hidden { display:none !important; }
html,body { width:100%; height:100%; overflow:hidden; }
body { margin:0; color:var(--text); background:var(--bg); font:14px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { scrollbar-width:thin; scrollbar-color:rgba(141,154,170,.42) transparent; }
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:rgba(141,154,170,.34); border:2px solid transparent; background-clip:padding-box; border-radius:999px; }
*::-webkit-scrollbar-thumb:hover { background:rgba(141,154,170,.58); border:1px solid transparent; background-clip:padding-box; }
button,input,textarea,select { font:inherit; } button { cursor:pointer; }
body.is-resizing { cursor:col-resize; user-select:none; }
.app { width:100%; height:var(--app-height,100dvh); min-height:0; display:grid; grid-template-columns:var(--sidebar-width) var(--splitter-width) minmax(360px,1fr) var(--splitter-width) var(--inspector-width); overflow:hidden; transition:grid-template-columns .18s ease; }
body.is-resizing .app { transition:none; }
.app.sidebar-hidden { grid-template-columns:0 0 minmax(360px,1fr) var(--splitter-width) var(--inspector-width); }.app.right-hidden { grid-template-columns:var(--sidebar-width) var(--splitter-width) minmax(360px,1fr) 0 0; }.app.sidebar-hidden.right-hidden { grid-template-columns:0 0 minmax(360px,1fr) 0 0; }
.sidebar,.inspector { background:#1c1d1f; border-color:var(--line); }
.sidebar { min-width:0; min-height:0; border-right:1px solid var(--line); padding:15px 11px; display:flex; flex-direction:column; overflow:auto; }.app.sidebar-hidden .sidebar { opacity:0; pointer-events:none; padding-inline:0; border:0; }
.resize-handle { position:relative; z-index:3; background:transparent; cursor:ew-resize; touch-action:none; transition:background .15s ease; }.resize-handle::before { content:""; position:absolute; top:0; bottom:0; left:9px; width:2px; background:rgba(141,154,170,.17); border-radius:4px; }.resize-handle::after { content:""; position:absolute; inset:0; background:transparent; border-radius:4px; }.resize-handle:hover::after,.resize-handle.dragging::after { background:rgba(130,183,255,.22); }.resize-handle:hover::before,.resize-handle.dragging::before { background:var(--blue); }.app.sidebar-hidden .left-resize,.app.right-hidden .right-resize { visibility:hidden; pointer-events:none; }
.pane-toggle,.pane-reveal { width:25px; height:25px; display:inline-grid; place-items:center; flex:0 0 25px; color:var(--muted); background:transparent; border:0; border-radius:7px; font-size:18px; line-height:1; }.pane-toggle:hover,.pane-reveal:hover { color:var(--text); background:var(--surface-3); }.pane-reveal { display:none; font-size:15px; }.app.sidebar-hidden #showSidebarBtn,.app.right-hidden #showInspectorBtn { display:inline-grid; }.app.sidebar-hidden #hideSidebarBtn,.app.right-hidden #hideInspectorBtn { display:none; }
.brand { display:flex; align-items:center; gap:9px; padding:4px 7px 18px; font-weight:750; font-size:16px; }.brand > span:nth-child(2) { flex:1; min-width:0; }.brand small { color:var(--muted); font-size:11px; font-weight:500; }
.mark { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; color:#06120e; background:var(--green); font-weight:900; }
.new-task { width:100%; color:var(--text); background:transparent; border:0; border-radius:9px; padding:10px 12px; font-weight:500; text-align:left; }.new-task:hover { background:var(--surface-3); }
.nav-label { color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; padding:22px 10px 8px; }.row-label { display:flex; align-items:center; justify-content:space-between; gap:8px; }.link-btn { color:var(--blue); background:transparent; border:0; padding:0; font-size:11px; }.link-btn:hover:not(:disabled) { color:var(--text); }.link-btn:disabled { opacity:.45; cursor:wait; }
.session { width:100%; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:9px; padding:10px; text-align:left; display:grid; gap:4px; }.session:hover { color:var(--text); background:var(--surface-2); }.session.active { color:var(--text); background:var(--surface-3); border-color:var(--line); }.session strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }.session span { font-size:11px; color:var(--muted); }
.project-list,.session-list,.device-list { display:grid; gap:4px; }.project-list,.session-list { max-height:none; overflow:visible; padding-right:0; }.project { width:100%; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:9px; padding:9px 10px; text-align:left; display:grid; gap:2px; }.project:hover { color:var(--text); background:var(--surface-2); }.project.active { color:var(--text); background:var(--surface-3); border-color:var(--line); }.project strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }.project span,.project small { color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.more-sessions { color:var(--blue); background:transparent; border:0; border-radius:7px; padding:7px 9px; text-align:left; font-size:11px; }.more-sessions:hover { background:var(--surface-2); }.device-session.selected { border-color:rgba(98,228,178,.28); }.device-session .online { font-size:11px; }
.sidebar-footer { margin-top:auto; border-top:1px solid var(--line); padding:15px 9px 2px; color:var(--muted); font-size:12px; }.online { display:flex; align-items:center; gap:8px; }.dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(98,228,178,.1); }.dot.offline { background:var(--red); box-shadow:0 0 0 4px rgba(255,142,155,.1); }
.main { min-width:0; min-height:0; height:100%; display:flex; flex-direction:column; }.topbar { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 17px; border-bottom:1px solid var(--line); background:rgba(11,16,22,.82); }.topbar-leading,.crumbs { display:flex; align-items:center; gap:10px; min-width:0; }.crumbs strong { font-size:14px; }.crumbs span { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.repo-icon { width:20px; height:20px; border:1px solid #516176; border-radius:5px; display:grid; place-items:center; color:var(--blue); font-size:11px; }.top-actions { display:flex; align-items:center; gap:7px; }.device-picker { display:flex; align-items:center; gap:7px; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:5px 8px 5px 10px; font-size:11px; }.device-picker span { white-space:nowrap; }.device-picker select { max-width:155px; color:var(--text); background:transparent; border:0; outline:0; font-size:12px; font-weight:650; cursor:pointer; }.device-picker option { color:#111923; background:#eef3f8; }
.status-pill { display:inline-flex; align-items:center; gap:7px; color:var(--green); background:rgba(98,228,178,.08); border:1px solid rgba(98,228,178,.22); border-radius:999px; padding:5px 10px; font-size:11px; white-space:nowrap; }.status-pill.waiting { color:var(--yellow); background:rgba(255,208,120,.08); border-color:rgba(255,208,120,.24); }.status-pill.done,.status-pill.synced { color:var(--blue); background:rgba(130,183,255,.08); border-color:rgba(130,183,255,.24); }.status-pill.offline,.status-pill.failed { color:var(--red); background:rgba(255,142,155,.08); border-color:rgba(255,142,155,.24); }
.conversation { width:100%; max-width:none; margin:0; padding:22px var(--conversation-gutter) 28px; display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }.messages { display:flex; width:calc(100% + var(--conversation-gutter)); flex:1 1 auto; min-height:0; flex-direction:column; gap:15px; overflow:auto; padding:4px calc(var(--conversation-gutter) + 3px) 10px 3px; }.timeline-controls { width:min(var(--conversation-width),100%); max-width:var(--conversation-width); margin-inline:auto; position:sticky; top:0; z-index:2; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:11px; padding:7px 2px 6px; background:linear-gradient(var(--bg) 68%,rgba(11,16,22,0)); }.timeline-controls > div { display:flex; gap:7px; }.timeline-btn { color:var(--blue); background:var(--surface-2); border:1px solid var(--line); border-radius:7px; padding:5px 8px; font-size:11px; }.timeline-btn:hover { color:var(--text); border-color:#4d6680; }.timeline-btn.primary { color:#07130f; background:var(--green); border-color:var(--green); font-weight:700; }.turn { width:min(var(--conversation-width),100%); max-width:var(--conversation-width); margin:0 auto; display:flex; flex-direction:column; gap:15px; }.turn + .turn { padding-top:13px; border-top:1px solid rgba(141,154,170,.09); }.message { width:100%; max-width:none; margin-inline:0; display:flex; gap:11px; align-items:flex-start; }.avatar { width:27px; height:27px; flex:0 0 27px; border-radius:9px; display:grid; place-items:center; font-size:11px; font-weight:800; }.avatar.codex { color:#06130e; background:var(--green); }.avatar.you { color:#07111c; background:var(--blue); }.message-body { min-width:0; flex:1; }.message:not(.you) .message-body { max-width:1100px; }.message-head { display:flex; align-items:baseline; gap:9px; margin:2px 0 5px; }.message-head strong { font-size:13px; }.message-head time { color:var(--muted); font-size:11px; }.bubble { max-width:100%; color:#dce5ef; background:transparent; border:0; border-radius:0; padding:3px 0; white-space:pre-wrap; }.bubble.markdown { white-space:normal; line-height:1.65; }.bubble.markdown p { margin:0 0 12px; }.bubble.markdown p:last-child { margin-bottom:0; }.bubble.markdown h1,.bubble.markdown h2,.bubble.markdown h3,.bubble.markdown h4 { margin:0 0 10px; line-height:1.35; }.bubble.markdown ul,.bubble.markdown ol { margin:0 0 12px; padding-left:24px; }.bubble.markdown li { padding:2px 0; }.bubble.markdown pre { margin:10px 0; padding:11px 13px; overflow:auto; color:#c8d6e5; background:#0a0f15; border:1px solid var(--line); border-radius:8px; font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }.bubble.markdown code { padding:1px 4px; color:#dbe9ff; background:rgba(130,183,255,.13); border-radius:4px; font:12px ui-monospace,SFMono-Regular,Consolas,monospace; }.bubble.markdown pre code { padding:0; background:transparent; }.bubble.markdown a { color:var(--blue); text-decoration:none; }.bubble.markdown a:hover { text-decoration:underline; }.md-gap { height:4px; }.message.you { justify-content:flex-end; }.message.you .message-body { flex:0 1 min(88%,900px); }.message.you .message-head { justify-content:flex-end; }.message.you .bubble { border-radius:12px 4px 12px 12px; background:#19304a; border:1px solid #2e5277; padding:11px 13px; }.system-row { width:100%; max-width:none; margin-inline:0; display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; padding:2px 0 2px 38px; }.system-row::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--blue); }
.tool-card,.file-card,.plan-card { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface-2); }.tool-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 11px; color:var(--muted); background:rgba(23,34,47,.7); font-size:12px; }.tool-head strong { color:var(--text); font-weight:650; }.tool-card pre { margin:0; padding:12px; color:#c8d6e5; background:#0a0f15; font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; }.file-card,.plan-card { padding:11px 13px; }.file-card strong,.plan-card strong { display:block; margin-bottom:7px; }.file-entry { padding:5px 0; border-top:1px solid var(--line); font:12px ui-monospace,SFMono-Regular,Consolas,monospace; }.file-entry b { color:var(--green); font-weight:600; }.plan-card ol { margin:0; padding-left:20px; color:var(--muted); }.plan-card li { padding:3px 0; }.plan-card li.inProgress { color:var(--text); }.plan-card li.completed::marker { color:var(--green); }
.approval { border:1px solid rgba(255,208,120,.5); border-radius:10px; background:rgba(255,208,120,.07); padding:13px; }.approval strong { display:block; color:var(--yellow); margin-bottom:4px; }.approval p { margin:0 0 11px; color:#eadfc9; font-size:13px; }.approval code { display:block; margin:7px 0 11px; padding:8px; overflow:auto; color:#f4dfad; background:#17140d; border-radius:7px; font:12px ui-monospace,SFMono-Regular,Consolas,monospace; }
.action-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }.btn { color:var(--text); background:#1a2633; border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:12px; }.btn:hover:not(:disabled) { border-color:#4d6680; background:#203143; }.btn:disabled { opacity:.45; cursor:not-allowed; }.btn.primary { color:#06130e; background:var(--green); border-color:var(--green); font-weight:750; }.btn.warn { color:#171007; background:var(--yellow); border-color:var(--yellow); font-weight:750; }.btn.danger { color:#19070a; background:var(--red); border-color:var(--red); font-weight:750; }.composer { width:min(var(--conversation-width),100%); max-width:var(--conversation-width); margin-inline:auto; position:sticky; bottom:0; display:flex; gap:9px; padding:14px 0 0; background:linear-gradient(transparent,var(--bg) 18%); }.composer textarea { flex:1; min-width:0; resize:none; color:var(--text); background:var(--surface); border:1px solid #33465a; border-radius:10px; outline:none; padding:12px 13px; }.composer textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(130,183,255,.11); }.composer .btn { padding-inline:17px; }.connection-note,.muted { color:var(--muted); font-size:11px; }
.inspector { min-width:0; min-height:0; border-left:1px solid var(--line); padding:17px 14px; overflow:auto; }.app.right-hidden .inspector { opacity:0; pointer-events:none; padding-inline:0; border:0; }.inspector-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }.inspector h2 { margin:0 0 12px; font-size:13px; }.inspector-section { border-bottom:1px solid var(--line); padding:4px 7px 17px; margin-bottom:17px; }.inspector-section:last-child { border-bottom:0; }.inspector-section.collapsed { padding-bottom:8px; }.inspector-section.collapsed .kv { display:none; }.kv { display:grid; gap:10px; }.kv-row { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; }.kv-row strong { color:var(--text); text-align:right; font-weight:600; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.plan-list { display:grid; gap:4px; }.plan-row { color:var(--muted); font-size:12px; padding:4px 0; }.plan-row.inProgress { color:var(--text); }.plan-row.completed { color:var(--green); }.check { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12px; padding:6px 0; }.check i { width:15px; height:15px; display:grid; place-items:center; border-radius:50%; background:rgba(98,228,178,.14); color:var(--green); font-style:normal; font-size:10px; }.check.pending i { color:var(--yellow); background:rgba(255,208,120,.14); }.prototype-note { color:var(--muted); font-size:11px; margin:0; }
.modal { position:fixed; inset:0; z-index:5; display:grid; place-items:center; padding:18px; background:rgba(4,7,11,.72); }.modal.hidden { display:none; }.modal-card { width:min(520px,100%); border:1px solid var(--line); border-radius:14px; padding:18px; background:var(--surface); box-shadow:0 24px 90px rgba(0,0,0,.48); }.modal-head { display:flex; align-items:center; justify-content:space-between; }.modal-head h2 { margin:0 0 16px; font-size:16px; }.icon-btn { color:var(--muted); background:transparent; border:0; font-size:23px; }.field-label { display:grid; gap:7px; color:var(--muted); font-size:12px; margin-top:12px; }.field-label textarea,.field-label select { color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:10px; outline:0; }.field-label textarea:focus,.field-label select:focus { border-color:var(--blue); }.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:17px; }.modal-error { color:var(--red); font-size:12px; min-height:18px; margin-top:8px; }
@media (max-width:980px) { .app { grid-template-columns:var(--sidebar-width) var(--splitter-width) minmax(0,1fr); }.app.sidebar-hidden,.app.sidebar-hidden.right-hidden { grid-template-columns:0 0 minmax(0,1fr); }.app.right-hidden { grid-template-columns:var(--sidebar-width) var(--splitter-width) minmax(0,1fr); }.right-resize,.inspector { display:none; }.top-toggle,#showInspectorBtn { display:none !important; } }
@media (max-width:650px) { :root { --conversation-gutter:13px; }.app { display:block; }.sidebar,.resize-handle { display:none; }.topbar { padding:0 13px; }.conversation { padding:16px var(--conversation-gutter) 24px; }.crumbs span { display:none; }.device-picker span { display:none; }.device-picker select { max-width:115px; } }
/* A turn contains a user bubble, earlier messages, and the final answer. */
.crumbs strong { white-space:nowrap; }
.messages { overflow-x:hidden; overflow-anchor:none; }
.turn,.turn-history,.turn-result { min-width:0; }
.markdown { overflow-wrap:anywhere; }
.message.assistant { display:block; }
.message.assistant .bubble { width:100%; padding:0; }
.message.you .bubble { max-width:80%; border:0; border-radius:20px; background:#2c2e31; padding:14px 18px; }
.turn { gap:22px; }
.turn + .turn { padding-top:32px; border-top:0; }
.turn-result { display:block; width:100%; }
.turn-live { color:var(--muted); font-size:12px; }
.turn-history { width:100%; color:var(--muted); }
.turn-history > summary { list-style:none; display:flex; align-items:center; gap:8px; padding:5px 0 9px; border-bottom:1px solid rgba(141,154,170,.16); cursor:pointer; font-size:13px; }
.turn-history > summary::-webkit-details-marker { display:none; }
.turn-history-duration { margin-left:auto; font-size:12px; }
.turn-timing { padding:8px 0 10px; border-bottom:1px solid var(--line); margin:0 0 14px; color:var(--muted); }
.turn-timing .turn-history-duration { font-size:13px; }
.disclosure-arrow { font-size:18px; line-height:1; }
.turn-history[open] > summary .disclosure-arrow { transform:rotate(90deg); }
.turn-history-body { display:flex; flex-direction:column; gap:18px; padding:16px 0 4px; }
.process-note { color:var(--text); font-size:14px; line-height:1.7; }
.markdown p { margin:0 0 12px; }
.markdown p:last-child { margin-bottom:0; }
.markdown ul,.markdown ol { padding-left:24px; margin:0 0 12px; }
.markdown code { background:rgba(141,154,170,.15); border-radius:4px; padding:1px 4px; font:12px ui-monospace,Consolas,monospace; }
.markdown a { color:var(--blue); text-decoration:none; }
.markdown a:hover { text-decoration:underline; }
.process-group,.process-item { width:100%; color:var(--muted); border:0; }
.process-group > summary,.process-item > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; min-height:30px; padding:3px 0; user-select:none; }
.process-group > summary::-webkit-details-marker,.process-item > summary::-webkit-details-marker { display:none; }
.process-group > summary::after,.process-item > summary::after { content:'›'; font-size:17px; line-height:1; flex:0 0 auto; }
.process-group[open] > summary::after,.process-item[open] > summary::after { transform:rotate(90deg); }
.process-group > summary:hover,.process-item > summary:hover { color:var(--text); }
.process-icon,.process-item-icon { width:18px; flex:0 0 18px; text-align:center; font-size:15px; }
.process-group-body { padding:3px 0 4px; max-height:330px; overflow:auto; overscroll-behavior:contain; }
.process-live-items { display:flex; flex-direction:column; gap:2px; }
.image-file-link { display:inline-flex; align-items:center; gap:4px; }
.process-image-group > .process-group-body { max-height:none; overflow:visible; }
.process-image-group .message-images { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr)); gap:10px; justify-content:start; }
.process-image-group .message-images a { display:flex; align-items:center; justify-content:center; height:140px; min-width:0; }
.process-image-group .message-image { max-height:140px; max-width:100%; }
.process-item > summary { font-size:13px; }
.process-item > summary > span:nth-child(2) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.process-item-detail { padding:5px 0 10px 26px; font-size:12px; }
.process-item-detail p { margin:0; }
.process-item-detail pre { margin:0 0 10px; padding:10px 12px; max-height:260px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; color:#c8d6e5; background:#10151b; border:1px solid rgba(141,154,170,.18); border-radius:8px; font:12px/1.6 ui-monospace,Consolas,monospace; }
.process-detail-label { margin:0 0 5px; color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.process-notice { display:flex; align-items:center; gap:8px; min-height:30px; color:var(--muted); }
.process-notice > span { width:18px; text-align:center; }
.history-divider { width:min(var(--conversation-width),100%); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:12px; }
.history-divider > div { display:flex; align-items:center; gap:7px; }
.messages,.sidebar,.inspector { overscroll-behavior:contain; }
@media (max-width:650px) { .message.you .bubble { max-width:92%; }.history-divider { align-items:flex-start; }.history-divider > div { flex-wrap:wrap; justify-content:flex-end; }.turn-history-duration { font-size:10px; } }
/* Keep message input and its controls together, clear of the scrolling view. */
.composer { flex:0 0 auto; position:relative; display:flex; flex-direction:column; gap:0; margin-top:18px; padding:14px 16px; border:1px solid #404040; border-radius:24px; background:#303030; }
.composer:focus-within { border-color:#667280; }
.composer.drag-over { border-color:var(--green); background:#223a32; }
.composer textarea { width:100%; flex:none; min-height:56px; max-height:200px; border:0; border-radius:0; padding:3px 5px 10px; background:transparent; box-shadow:none; font-size:14px; line-height:1.6; }
.composer textarea:focus { border:0; box-shadow:none; }
.composer-toolbar { display:flex; align-items:center; gap:8px; min-width:0; }
.composer [hidden] { display:none !important; }
.composer-control { position:relative; min-width:0; }
.permission-trigger,.model-trigger,.model-name,.settings-reset,.model-back { display:flex; align-items:center; justify-content:center; gap:8px; border:0; font-size:13px; color:#c1c1c1; background:transparent; border-radius:18px; padding:5px 9px; }
.permission-trigger { color:#ff9951; padding-left:0; }
.permission-trigger > span:first-child { font-size:18px; }
.control-chevron { color:#999; font-size:14px; }
.permission-trigger .control-chevron { color:inherit; }
.model-trigger { background:#454545; min-width:145px; justify-content:space-between; padding:5px 13px; }
.permission-trigger:hover,.model-name:hover,.settings-reset:hover,.model-back:hover { background:#3c3c3c; }
.model-trigger:hover { background:#505050; }
.composer-control button:disabled { opacity:.5; cursor:default; }
.composer-control button:focus-visible { outline:2px solid #80adff; outline-offset:3px; }
.composer-activity { color:#999; font-size:19px; line-height:1; }
.composer-popover { position:absolute; bottom:calc(100% + 14px); z-index:12; border:1px solid #4b4b4b; border-radius:18px; background:#303030; box-shadow:0 12px 30px #0004; }
.model-popover { width:320px; right:0; padding:16px 15px 12px; }
#strengthPanel { position:relative; padding-top:1px; }
.fast-toggle { position:absolute; top:-7px; left:-5px; padding:5px!important; width:30px; height:30px; color:#aaa; border-radius:7px!important; }
.fast-toggle:hover { background:#454545; }
.fast-toggle[aria-pressed="true"] { color:#76aaff; background:#354761; }
.fast-mode-hint { display:none; position:absolute; bottom:calc(100% + 10px); left:-9px; max-width:270px; padding:8px 10px; border:1px solid #555; border-radius:9px; background:#292929; color:var(--text); font-size:12px; line-height:1.5; z-index:15; }
#strengthPanel:has(.fast-toggle:hover) .fast-mode-hint,#strengthPanel:has(.fast-toggle:focus-visible) .fast-mode-hint { display:block; }
.fast-indicator { color:#76aaff; font-size:12px; }
.fast-native-note { display:block; margin-top:11px; color:var(--muted); text-align:center; font-size:11px; }
#modelTriggerLabel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.settings-reset { position:absolute; top:-8px; right:-6px; width:30px; height:30px; font-size:23px; padding:0; }
.strength-title { display:block; text-align:center; font-size:17px; line-height:1.4; color:#438aff; font-weight:600; }
.model-name { margin:0 auto 16px; padding:0 5px; border-radius:5px; }
.model-name span:first-child { max-width:235px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.effort-slider { height:32px; position:relative; border-radius:20px; background:#484848; }
.effort-slider input { position:absolute; margin:0; inset:0; width:100%; height:32px; appearance:none; border:0; border-radius:20px; background:linear-gradient(to right,#367efa 0 var(--effort-fill),transparent var(--effort-fill) 100%); cursor:pointer; }
.effort-slider input::-webkit-slider-thumb { appearance:none; width:34px; height:34px; border:1px solid #ddd; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0002; }
.effort-slider input::-moz-range-thumb { width:32px; height:32px; border:1px solid #ddd; border-radius:50%; background:#fff; }
.effort-slider input:focus-visible { outline:2px solid #9ac1ff; outline-offset:4px; }
.effort-dots { position:absolute; inset:0 16px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; z-index:1; }
.effort-dots i { width:5px; height:5px; border-radius:50%; background:#b8b8b880; }
.effort-slider:has(input:disabled) { opacity:.5; }
.model-options { max-height:290px; overflow:auto; margin-top:7px; }
.model-options button,.permission-menu button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; border:0; border-radius:9px; padding:9px 10px; color:#e6e6e6; background:transparent; text-align:left; font-size:13px; }
.model-options button[aria-checked="true"],.permission-menu button[aria-checked="true"] { background:#414141; }
.model-options button:hover,.permission-menu button:hover { background:#494949; }
.model-back { justify-content:flex-start; padding:2px 8px 7px; font-size:12px; }
.permission-menu { left:-8px; width:290px; padding:6px; }
.permission-menu button { display:grid; gap:3px; }
.permission-menu small { color:#a7a7a7; font-size:11px; }
.project-directory { color:var(--muted); font-size:11px; line-height:1.6; overflow-wrap:anywhere; margin:-7px 0 16px; }
.composer-toolbar select { min-width:0; max-width:160px; color:#c6ccd3; border:0; border-radius:7px; background:transparent; padding:6px 3px; cursor:pointer; font-size:12px; text-overflow:ellipsis; }
.composer-toolbar select option { background:#25282c; color:#e6ebef; }
.composer-toolbar .permission-select { color:#f5a45e; max-width:120px; }
.composer-toolbar select:disabled { opacity:.55; cursor:default; }
.composer-spacer { flex:1; }
.attach-btn,.send-btn,.stop-task { flex:0 0 auto; display:grid; place-items:center; border:0; cursor:pointer; }
.attach-btn { color:var(--text); background:transparent; font-size:24px; width:28px; height:28px; border-radius:50%; }
.attach-btn:hover { background:rgba(255,255,255,.07); }
.send-btn { width:32px; height:32px; border-radius:50%; color:#151719; background:#eef1f3; font-size:22px; }
.send-btn:disabled { opacity:.35; cursor:default; }
.stop-task { width:28px; height:28px; border-radius:50%; color:#151719; background:#eef1f3; font-size:11px; }
.stop-task:disabled { display:none; }
.sidebar-footer .online { font-size:11px; }
.sidebar-footer .online #syncBtn { margin-left:auto; }
.sidebar-footer .connection-note { display:block; padding:9px 0 0; font-size:10px; line-height:1.5; }
.compose-error:empty,.attachment-tray:empty { display:none; }
.compose-error { color:var(--red); font-size:12px; padding:8px 5px 2px; }
.attachment-tray { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:3px 3px 12px; }
.attachment-preview { position:relative; width:92px; height:84px; }
.attachment-preview img { width:100%; height:100%; object-fit:cover; border:1px solid #4c525a; border-radius:10px; }
.attachment-preview button { position:absolute; right:-5px; top:-5px; width:21px; height:21px; border:0; border-radius:50%; color:#fff; background:#49505a; cursor:pointer; }
.message-images { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.message-image { display:block; max-width:100%; max-height:340px; width:auto; object-fit:contain; border:1px solid rgba(141,154,170,.24); border-radius:12px; }
.message.you .message-image { max-width:180px; max-height:150px; }
.message-image-link { display:inline-block; max-width:100%; vertical-align:top; }
.project-choices { display:grid; gap:5px; max-height:50vh; overflow:auto; margin-top:15px; }
.project-choice { display:flex; gap:12px; padding:10px 6px; border-radius:8px; cursor:pointer; align-items:center; }
.project-choice:hover { background:var(--surface-2); }
.project-choice input { width:17px; height:17px; accent-color:var(--green); }
.project-choice span { min-width:0; display:grid; gap:4px; }
.project-choice strong { font-size:13px; }
.project-choice small { color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.new-task-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.new-task-options .field-label:first-child { grid-column:1/-1; }
.turn-live { display:flex; align-items:center; gap:8px; padding:3px 0; }
.turn-live span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.activity-dot { flex:0 0 6px; width:6px; height:6px; background:var(--blue); border-radius:50%; }
.turn-live.is-reconnecting { color:#bbb; }
.status-icon { flex:0 0 18px; text-align:center; font-size:20px; }
.runtime-detail { margin:3px 0 10px 24px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; line-height:1.5; }
.turn-alert { display:grid; gap:5px; padding:12px 14px; color:var(--red); border:1px solid rgba(255,142,155,.25); border-radius:9px; background:rgba(255,142,155,.06); font-size:13px; overflow-wrap:anywhere; }
@media(max-width:650px) { .composer { padding:10px; }.composer-toolbar { gap:3px; }.composer-toolbar select { max-width:110px; font-size:11px; }.composer-toolbar .permission-select { max-width:88px; }.composer-toolbar #effortSelect { max-width:72px; } }
.phone-connect { display:block; margin-top:10px; padding:5px 0; }
.field-label input { width:100%; min-width:0; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:10px; outline:0; }
.field-label input:focus { border-color:var(--blue); }
.phone-code { padding:20px 0 6px; color:var(--text); font-size:32px; font-variant-numeric:tabular-nums; letter-spacing:4px; text-align:center; }
.access-card { width:min(620px,100%); }
.access-address { display:flex; gap:8px; align-items:center; }
.access-address .btn { flex-shrink:0; white-space:nowrap; }
.browser-devices { border-top:1px solid var(--line); margin-top:20px; padding-top:15px; }
.access-section-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.access-section-head h3 { margin:0; font-size:14px; }
.browser-device { padding:10px 0 15px; border-bottom:1px solid var(--line); }
.browser-device .field-label { margin-top:0; }
.browser-device-meta { font-size:12px; line-height:1.6; }
.browser-device-actions { display:flex; justify-content:flex-end; gap:8px; }
.browser-devices > .danger { margin-top:16px; }
.access-card .btn.danger { color:var(--red); background:transparent; border-color:rgba(255,142,155,.35); }
.pairing-submit { width:100%; margin-top:18px; }
#pairingCodeInput { font-size:22px; letter-spacing:3px; text-align:center; }
.modal { z-index:30; }
.modal-card { max-height:calc(var(--app-height,100dvh) - 36px); overflow:auto; }
.pairing-gate { z-index:40; background:var(--bg); }
.mobile-nav-backdrop { display:none; }
@media(max-width:650px) {
  .app { transition:none; }
  .topbar { padding-top:env(safe-area-inset-top); min-height:54px; gap:4px; }
  .topbar-leading { flex:1; gap:5px; }
  .crumbs { flex:1; }
  .crumbs strong,.device-picker { display:none; }
  .crumbs #sessionTitle { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
  .app #showSidebarBtn { display:inline-grid; width:40px; height:44px; flex-basis:40px; }
  .top-actions { flex:0 0 auto; gap:5px; }
  .status-pill { padding:5px 8px; }
  .sidebar { position:fixed; z-index:10; inset:0 auto 0 0; width:min(320px,88vw); height:var(--app-height,100dvh); padding-top:max(15px,env(safe-area-inset-top)); padding-bottom:max(15px,env(safe-area-inset-bottom)); }
  .app.mobile-nav-open .sidebar { display:flex; opacity:1; pointer-events:auto; padding-inline:11px; border-right:1px solid var(--line); }
  .app.mobile-nav-open #hideSidebarBtn { display:inline-grid; width:40px; height:40px; }
  .mobile-nav-backdrop { display:block; position:fixed; z-index:9; inset:0; border:0; background:rgba(0,0,0,.55); }
  .conversation { padding:12px var(--conversation-gutter) max(10px,env(safe-area-inset-bottom)); }
  #promptInput { font-size:16px; }
  .composer-toolbar { gap:2px; }
  .composer-activity { display:none; }
  .composer-control { min-width:0; }
  .permission-trigger { max-width:112px; padding-inline:4px; font-size:11px; gap:3px; }
  #permissionLabel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .model-trigger { max-width:min(138px,34vw); padding-inline:5px; font-size:11px; gap:3px; }
  #modelTriggerLabel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .model-popover { width:min(320px,calc(100vw - 38px)); }
  .attach-btn,.send-btn { flex-shrink:0; }
  .modal { padding:13px; }
}

.question-card { margin:18px 0; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.question-status { color:var(--muted); font-size:13px; margin-bottom:12px; }
.question-card fieldset { border:0; padding:0; margin:0 0 16px; min-width:0; }
.question-card legend { padding:0; margin-bottom:12px; line-height:1.6; }
.question-options { display:grid; gap:8px; }
.question-option { text-align:left; padding:12px; color:inherit; background:transparent; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.question-option.selected { border-color:var(--blue); background:color-mix(in srgb,var(--blue) 12%,transparent); }
.question-option small { display:block; margin-top:4px; color:var(--muted); }
.question-free-text { width:100%; box-sizing:border-box; margin-top:10px; padding:10px; font:inherit; color:inherit; border:1px solid var(--line); border-radius:10px; background:transparent; }
.question-answer p { margin:0 0 8px; }
.question-answer strong { font-weight:500; }
.question-note { display:block; color:var(--muted); margin-top:10px; }
.question-error { color:var(--red); margin-top:10px; }
.connection-banner{padding:8px 16px;background:var(--surface);color:var(--red);font-size:13px;flex:none;border-bottom:1px solid var(--line)}
.send-status{font-size:12px;color:var(--muted);padding:0 16px}.send-status:not(:empty){padding-top:5px;padding-bottom:5px}
.send-status-actions{display:flex;gap:12px;flex-wrap:wrap;padding:0 16px 8px}.send-status-actions.hidden{display:none}