:root {
  color-scheme: dark;
  --bg: #0b0d10;
  --panel: #101318;
  --panel-2: #151920;
  --panel-3: #1b2028;
  --border: #272d37;
  --border-soft: #1d222a;
  --text: #f0f2f5;
  --muted: #929ba8;
  --muted-2: #697382;
  --accent: #e8f2ed;
  --accent-ink: #101613;
  --green: #6ed39a;
  --amber: #e6b965;
  --red: #ee7e7e;
  --blue: #8bb9ff;
  --sidebar: 300px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.mobile-only { display: none; }

.auth-screen { min-height: 100%; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 50% 30%, #17201b 0, #0b0d10 44%); }
.auth-card { width: min(430px, 100%); padding: 36px; border: 1px solid var(--border); border-radius: 20px; background: rgba(16, 19, 24, .94); box-shadow: 0 24px 80px #0008; text-align: center; }
.auth-card h1 { margin: 14px 0 10px; font-size: 28px; letter-spacing: -.03em; }
.auth-card p { margin: 0; color: var(--muted); line-height: 1.75; }
.auth-card code { padding: 2px 7px; border-radius: 6px; background: #242a32; color: var(--green); }
.security-note { margin: 22px 0; padding: 12px; border-radius: 10px; color: #aab3bf; background: #14191f; font-size: 13px; }
.eyebrow { color: var(--muted-2); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.eyebrow.warning { color: var(--amber); }

.brand-mark { position: relative; width: 31px; height: 31px; border-radius: 9px; background: linear-gradient(145deg, #f4f7f5, #abb8b1); box-shadow: inset 0 0 0 1px #fff7; transform: rotate(-4deg); }
.brand-mark::before, .brand-mark::after, .brand-mark span { content: ""; position: absolute; height: 3px; border-radius: 3px; background: #1c2721; left: 7px; }
.brand-mark::before { width: 16px; top: 9px; transform: rotate(18deg); }
.brand-mark::after { width: 13px; top: 15px; left: 10px; transform: rotate(-18deg); }
.brand-mark span { width: 7px; top: 21px; left: 8px; }
.brand-mark.large { width: 48px; height: 48px; margin: 0 auto; border-radius: 14px; transform: scale(1.25) rotate(-4deg); }

.app-shell { height: 100%; display: grid; grid-template-columns: var(--sidebar) 1fr; }
.sidebar { position: relative; z-index: 20; min-width: 0; display: flex; flex-direction: column; background: #0d1014; border-right: 1px solid var(--border-soft); }
.sidebar-head { height: 65px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
.brand-row { display: flex; align-items: center; gap: 11px; }
.brand-row strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.brand-row small { display: block; color: var(--muted-2); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; margin-top: 1px; }
.new-thread-button { margin: 2px 12px 13px; height: 42px; border: 1px solid #303742; border-radius: 10px; background: #171b21; text-align: left; padding: 0 14px; cursor: pointer; transition: .15s ease; }
.new-thread-button:hover { background: #1d2229; border-color: #3a4350; }
.new-thread-button span { margin-right: 8px; color: var(--green); font-size: 18px; }
.search-box { display: flex; align-items: center; gap: 8px; margin: 0 12px 12px; padding: 0 11px; height: 36px; border: 1px solid transparent; border-radius: 9px; background: #14181e; color: var(--muted-2); }
.search-box:focus-within { border-color: #3a4552; }
.search-box input { min-width: 0; width: 100%; color: var(--text); border: 0; outline: 0; background: transparent; font-size: 13px; }
.section-label { display: flex; justify-content: space-between; align-items: center; padding: 4px 17px 7px; color: var(--muted-2); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.section-label button { border: 0; background: none; color: var(--muted-2); cursor: pointer; font-size: 15px; }
.project-list { max-height: 205px; margin: 0 7px 12px; overflow-y: auto; scrollbar-width: thin; }
.project-row { display: flex; width: 100%; gap: 9px; align-items: center; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.project-row:hover { background: #14181e; }
.project-row.active { border-color: #2a4b3d; background: #14231d; }
.project-row > span:last-child { min-width: 0; }
.project-row strong, .project-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-row strong { font-size: 12px; font-weight: 590; }
.project-row small { margin-top: 2px; color: var(--muted-2); font-size: 9px; }
.project-icon { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 6px; background: #1a2027; color: var(--green); font-size: 11px; }
.thread-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 7px 12px; scrollbar-width: thin; }
.thread-row { display: block; width: 100%; padding: 10px 11px; margin: 2px 0; border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; }
.thread-row:hover { background: #14181e; }
.thread-row.active { background: #1a1f26; border-color: #29303a; }
.thread-row.unavailable { border-color: #4b3528; background: #1a1411; }
.thread-row-title { display: flex; gap: 7px; align-items: center; min-width: 0; }
.thread-row-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 590; }
.thread-badge { flex: 0 0 auto; padding: 2px 5px; border: 1px solid #684631; border-radius: 10px; color: #e5a875; font-size: 9px; }
.thread-row-title i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--green); }
.thread-row p { margin: 5px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-2); font-size: 11px; }
.thread-row time { display: block; margin-top: 6px; color: #515b69; font-size: 10px; }
.sidebar-foot { min-height: 56px; padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border-soft); font-size: 11px; }
.device-line { display: flex; gap: 7px; align-items: center; color: var(--muted); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px #e6b96518; }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 3px #6ed39a18; }
.status-dot.offline { background: var(--red); box-shadow: 0 0 0 3px #ee7e7e18; }
.text-button { border: 0; background: none; color: var(--muted-2); cursor: pointer; font-size: 11px; }

.main-pane { min-width: 0; position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; background: linear-gradient(180deg, #0e1115, #0b0d10 28%); }
.topbar { height: 65px; display: flex; align-items: center; gap: 12px; padding: 0 22px; border-bottom: 1px solid var(--border-soft); background: #0e1115e8; backdrop-filter: blur(16px); }
.thread-heading { min-width: 0; flex: 1; }
.thread-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 620; font-size: 14px; }
.thread-path { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-2); font-size: 10px; }
.top-actions { display: flex; gap: 8px; }
.compact-select { max-width: 150px; height: 32px; padding: 0 28px 0 9px; border: 1px solid var(--border); border-radius: 8px; background: #15191f; color: #bac2cc; font-size: 11px; outline: 0; }
.offline-banner { position: absolute; top: 65px; left: 0; right: 0; z-index: 10; padding: 7px 12px; background: #51351dee; color: #f5c98b; text-align: center; font-size: 11px; }
.empty-state { place-self: center; max-width: 520px; padding: 36px; text-align: center; }
.empty-glyph { display: inline-grid; place-items: center; width: 60px; height: 60px; border: 1px solid #303842; border-radius: 18px; background: #151a20; color: var(--green); font: 700 22px ui-monospace, monospace; box-shadow: 0 18px 50px #0008; }
.empty-state h2 { margin: 20px 0 8px; font-size: 22px; letter-spacing: -.025em; }
.empty-state p { margin: 0 auto 22px; color: var(--muted); line-height: 1.65; font-size: 13px; }

.conversation { min-height: 0; overflow-y: auto; padding: 28px max(22px, calc((100% - 860px) / 2)) 150px; scroll-behavior: smooth; scrollbar-width: thin; }
.message { margin: 0 0 22px; }
.message.user { display: flex; justify-content: flex-end; }
.message.user .message-body { max-width: min(76%, 680px); padding: 11px 14px; border: 1px solid #303741; border-radius: 15px 15px 4px 15px; background: #20252d; }
.message.agent .message-body { max-width: 850px; color: #e5e8ec; line-height: 1.68; font-size: 14px; }
.message.commentary .message-body { color: #aeb7c2; font-size: 13px; border-left: 2px solid #35404c; padding-left: 12px; }
.text-block { white-space: pre-wrap; overflow-wrap: anywhere; }
.text-block + .code-block, .code-block + .text-block { margin-top: 12px; }
.code-block { margin: 10px 0; border: 1px solid #29313b; border-radius: 10px; overflow: hidden; background: #090b0e; }
.code-label { padding: 6px 10px; background: #15191f; color: var(--muted-2); font: 10px ui-monospace, monospace; }
.code-block pre { margin: 0; padding: 13px; overflow-x: auto; color: #d8dedb; font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }
.tool-card { margin: 12px 0 18px; border: 1px solid #252c35; border-radius: 10px; background: #10141a; overflow: hidden; }
.tool-head { display: flex; align-items: center; gap: 8px; padding: 9px 11px; color: #abb5c1; font-size: 11px; }
.tool-head span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.tool-card details { border-top: 1px solid #20262e; }
.tool-card summary { padding: 8px 11px; color: var(--muted-2); cursor: pointer; font-size: 11px; }
.tool-card pre { max-height: 260px; margin: 0; padding: 11px; overflow: auto; background: #090b0e; color: #aeb8c4; white-space: pre-wrap; font: 11px/1.5 ui-monospace, monospace; }
.unreadable-card { border-color: #5a3e2d; }
.unreadable-card .tool-head span { background: var(--amber); }
.unreadable-card p { margin: 0; padding: 13px; border-top: 1px solid #34271f; color: #c7b8ab; font-size: 12px; line-height: 1.6; }
.activity-bar { position: absolute; bottom: 116px; left: 50%; z-index: 3; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; padding: 7px 12px; border: 1px solid var(--border); border-radius: 20px; background: #15191fee; color: var(--muted); font-size: 11px; box-shadow: 0 8px 30px #0007; }
.thinking-dots { display: flex; gap: 3px; }
.thinking-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--green); animation: pulse 1.2s infinite; }
.thinking-dots i:nth-child(2) { animation-delay: .15s; }.thinking-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }

.composer { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); width: min(820px, calc(100% - 36px)); transform: translateX(-50%); padding: 11px 12px 9px; border: 1px solid #333b46; border-radius: 15px; background: #171b21f5; box-shadow: 0 18px 60px #000a; backdrop-filter: blur(18px); }
.composer textarea { display: block; width: 100%; max-height: 180px; resize: none; border: 0; outline: 0; padding: 2px 3px 8px; background: transparent; color: var(--text); line-height: 1.5; }
.composer textarea::placeholder { color: #697382; }
.composer-foot { display: flex; align-items: center; justify-content: space-between; min-height: 31px; }
.composer-foot > span { padding-left: 3px; color: #596371; font-size: 10px; }
.composer-actions { display: flex; gap: 7px; }
.round-button { width: 31px; height: 31px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-weight: 700; }
.round-button.send { background: var(--accent); color: var(--accent-ink); font-size: 18px; }
.round-button.send:disabled { opacity: .35; cursor: default; }
.round-button.stop { background: #3a2527; color: #f1a7a7; font-size: 10px; }

.button { min-height: 38px; padding: 0 16px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; font-weight: 600; font-size: 12px; }
.button.primary { background: var(--accent); color: var(--accent-ink); }
.button.secondary { background: #1b2027; border-color: #303741; color: #c1c8d0; }
.button.danger { background: #3e2427; color: #f3a8a8; }
.button.wide { width: 100%; }
.icon-button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 20px; }

.modal { width: min(460px, calc(100% - 28px)); padding: 0; border: 1px solid #343c47; border-radius: 16px; background: #13171c; color: var(--text); box-shadow: 0 30px 100px #000c; }
.modal::backdrop { background: #0009; backdrop-filter: blur(4px); }
.modal form { padding: 20px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.modal-head h3 { margin: 5px 0 0; font-size: 18px; }
.modal label { display: block; margin: 14px 0; color: var(--muted); font-size: 11px; }
.modal label select, .modal label input { width: 100%; height: 40px; margin-top: 7px; padding: 0 10px; border: 1px solid #303741; border-radius: 8px; background: #0e1115; color: var(--text); outline: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.approval-body { max-height: 52vh; overflow: auto; color: #bbc3cd; font-size: 12px; line-height: 1.55; }
.approval-body pre { max-height: 240px; overflow: auto; padding: 12px; border: 1px solid #29313a; border-radius: 9px; background: #090b0e; color: #d4dadd; white-space: pre-wrap; word-break: break-word; }
.approval-body .reason { margin: 0 0 12px; }
.question { padding: 12px 0; border-top: 1px solid var(--border-soft); }
.question:first-child { border-top: 0; }
.question strong { display: block; color: var(--text); margin-bottom: 8px; }
.question-option { display: flex !important; gap: 9px; align-items: flex-start; margin: 8px 0 !important; color: #b6bec8 !important; }
.question-option input { width: auto !important; height: auto !important; margin: 3px 0 0 !important; }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 100; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 9px 14px; border: 1px solid #39424d; border-radius: 9px; background: #1b2027; box-shadow: 0 12px 40px #000b; color: #dbe0e5; font-size: 12px; }
.sidebar-scrim { display: none; }
.install-app-button { width: 100%; margin: 8px 0 2px; padding: 9px 10px; border: 1px solid #2d7d66; border-radius: 9px; background: #13362e; color: #89e8c8; cursor: pointer; font: inherit; }
.install-app-button:hover { background: #18483c; }
.desktop-follow-banner { border-color: #2d7d66; background: #10231f; }

@media (max-width: 760px) {
  :root { --sidebar: min(86vw, 330px); }
  .mobile-only { display: grid; place-items: center; }
  .app-shell { display: block; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); transform: translateX(-101%); transition: transform .22s ease; box-shadow: 22px 0 60px #000b; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 15; background: #0008; }
  .sidebar.open + .sidebar-scrim { display: block; }
  .main-pane { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
  .topbar { height: 58px; padding: 0 11px; gap: 8px; }
  .thread-title { font-size: 13px; }
  .thread-path { max-width: 50vw; }
  .top-actions { gap: 4px; }
  .compact-select { max-width: 92px; height: 30px; padding: 0 18px 0 6px; font-size: 10px; }
  #modelSelect { max-width: 104px; }
  #effortSelect { display: block; max-width: 76px; }
  .conversation { padding: 22px 15px 150px; }
  .message { margin-bottom: 19px; }
  .message.user .message-body { max-width: 88%; }
  .message.agent .message-body { font-size: 14px; }
  .composer { bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100% - 20px); }
  .composer-foot > span { display: none; }
  .composer-foot { justify-content: flex-end; }
  .activity-bar { bottom: 107px; }
  .offline-banner { top: 58px; }
  .stacked-mobile { display: grid; grid-template-columns: 1fr 1fr; }
  .stacked-mobile .button { width: 100%; }
  .auth-card { padding: 28px 22px; }
}