/* Independently authored geometry, calibrated to the user's 2026-10-29
   Codex screenshot. Keep the desktop shell separate from chat content. */
:root {
  --bg: #fff;
  --chrome: #f7f7f7;
  --text: #373530;
  --secondary: #54534e;
  --muted: #9d9c99;
  --sidebar: #fcfcfc;
  --subtle: #f2f2f1;
  --border: #eeeeec;
  --selected: #f1f1f1;
  --hover: #f0f0ef;
  --rail-width: 52px;
  --sidebar-width: 238px;
  --titlebar-height: 44px;
  --thread-width: 1040px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { color: var(--text); background: var(--chrome); font-size: 14px; line-height: 1.55; }
button { cursor: default; }
.icon-button { border-radius: 7px; }
.app { display: grid; grid-template-columns: var(--rail-width) minmax(0,1fr); grid-template-rows: var(--titlebar-height) minmax(0,1fr); height: 100dvh; min-height: 0; padding: 0 4px 4px 0; background: var(--chrome); }
.topbar.window-bar { grid-column: 1 / -1; grid-row: 1; width: 100%; height: var(--titlebar-height); display: grid; grid-template-columns: calc(var(--rail-width) + var(--sidebar-width)) minmax(0,1fr) auto; align-items: center; gap: 0; margin: 0; padding: 0; }
.titlebar-navigation { display: flex; align-items: center; gap: 12px; padding: 0 9px; min-width: 0; }
.traffic-lights { width: 47px; flex: 0 0 47px; display: flex; gap: 6px; padding: 0 2px; }
.traffic-lights i { width: 9px; height: 9px; border-width: .5px; }
.titlebar-navigation .icon-button { height: 24px; width: 22px; padding: 3px; color: #969692; }
.titlebar-navigation .icon-button svg { width: 17px; height: 17px; stroke-width: 1.6; }
.titlebar-navigation .icon-button:disabled { opacity: .45; }
.topbar-left { display: flex; align-items: center; min-width: 0; height: 17px; gap: 17px; padding: 0 15px; border-left: 1px solid #e7e7e5; }
.titlebar-folder { color: var(--text); flex: 0 0 auto; }
.titlebar-folder svg { width: 16px; height: 16px; stroke-width: 1.6; }
.header-title { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--text); max-width: none; min-width: 0; }
.header-project { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 11px; padding: 0 7px 0 12px; }
.topbar-actions .icon-button { height: 25px; width: 25px; padding: 4px; color: #969692; }
.topbar-actions svg { width: 17px; height: 17px; stroke-width: 1.6; }
.toolbar-divider { height: 16px; background: #e7e7e5; margin: 0 1px; }
.app.sidebar-collapsed .topbar { grid-template-columns: 170px minmax(0,1fr) auto; }
.app-rail { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: center; min-height: 0; padding: 8px 0 5px; }
.rail-top, .rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rail-button { width: 36px; height: 36px; padding: 9px; border-radius: 10px; color: #9a9a96; display: grid; place-items: center; }
.rail-button svg { width: 19px; height: 19px; stroke-width: 1.7; }
.rail-button.is-active { background: #ececeb; color: var(--text); }
.rail-button.is-active svg { width: 21px; height: 21px; }
.rail-divider { height: 1px; width: 24px; background: #e4e4e2; margin: 0 0 1px; }
.rail-bottom { gap: 15px; }
.rail-profile { padding: 0; border-radius: 50%; }
.avatar { width: 24px; height: 24px; background: #8c9999; color: #fff; font-size: 9px; font-weight: 400; }
.usage-ring { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; border: 1.5px solid #d8d8d5; border-right-color: #737570; border-bottom-color: #737570; transform: rotate(-20deg); }
.usage-ring>span { width: 8px; height: 8px; border-radius: 1px; background: #c9cbc8; transform: rotate(65deg); }
.content-shell { grid-column: 2; grid-row: 2; display: flex; min-height: 0; min-width: 0; overflow: hidden; background: var(--bg); border: 1px solid #ebebe9; border-radius: 16px; box-shadow: 0 3px 20px #00000003; }
.sidebar { padding: 0; width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); min-height: 0; border-right: 1px solid var(--border); background: var(--sidebar); color: var(--secondary); transition: margin .18s ease; }
.sidebar-heading { height: 53px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px 0 16px; flex-shrink: 0; }
.product-switch { margin: 0; padding: 2px 0; gap: 9px; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -.25px; }
.product-switch .small-icon svg { width: 11px; height: 11px; stroke-width: 1.5; }
.sidebar-heading-actions { display: flex; gap: 12px; }
.sidebar-heading-actions .icon-button { width: 22px; height: 28px; padding: 3px; color: var(--muted); }
.sidebar-heading-actions svg { width: 16px; height: 16px; stroke-width: 1.65; }
.main-nav { display: grid; gap: 0; padding: 0 8px 7px; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.nav-item { height: 32px; padding: 0 9px; gap: 10px; border-radius: 8px; font-size: 14px; color: var(--secondary); }
.nav-item svg { width: 16px; height: 16px; stroke-width: 1.7; }
.nav-item kbd { font-size: 10px; }
.dot-mark { display: block; width: 13px; height: 13px; border: 4px solid #bcc2d3; border-radius: 50%; margin: 0 2px; }
.sidebar-scroll { margin: 0; padding: 8px 8px 20px; scrollbar-width: thin; }
.section-heading { height: 22px; padding: 0 9px; margin: 0; }
.section-heading, .section-heading>button:first-child { font-size: 11px; color: var(--muted); }
.section-heading:not(:hover)>span, .section-heading:not(:hover)>.mini-button { opacity: 0; }
.projects-heading, .recents-heading { margin-top: 5px; }
.projects-heading { height: 18px; }
.project-row { height: 34px; padding: 0 9px; border-radius: 8px; font-size: 14px; gap: 9px; color: var(--secondary); }
.project-row svg { width: 17px; height: 17px; stroke-width: 1.7; }
.project-chevron { opacity: 0; }
.project-row:hover .project-chevron, .project-row:focus-visible .project-chevron { opacity: 1; }
.project-group { margin-bottom: 8px; }
.project-threads { border-left: 0; margin: 0; padding: 0; }
.thread-list { margin-bottom: 9px; }
.thread-row, .project-threads .thread-row { height: 31px; border-radius: 10px; padding: 0 13px 0 32px; gap: 7px; }
.thread-row>button:first-child, .project-threads .thread-row>button:first-child { font-size: 14px; color: var(--secondary); font-weight: 400; }
.thread-row.active { background: var(--selected); }
.thread-row.active>button:first-child { color: var(--secondary); }
.thread-time { display: none; }
.thread-more { right: 6px; }
.project-more { display: block; height: 31px; width: 100%; padding: 0 13px 0 32px; text-align: left; color: var(--muted); font-size: 14px; border-radius: 8px; }
.mobile-sidebar-bottom { display: none; }
.workspace { min-height: 0; background: var(--bg); }
.work-area { min-height: 0; }
.statusbar, .composer-meta, .assistant-label, .streaming-cursor { display: none; }
.chat-stage, .chat-stage.is-empty { justify-content: flex-start; padding: 0; min-height: 0; }
.empty-state { flex: 1; min-height: 120px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 24px 28px; }
.chat-stage:not(.is-empty) .empty-state { display: none; }
.welcome { width: 100%; margin: 0; }
.hero-mark, .hero-mark svg { width: 40px; height: 40px; color: var(--muted); }
.hero-mark { margin: auto; }
.welcome h1 { font-size: 26px; line-height: 1.4; letter-spacing: -.6px; font-weight: 500; margin: 17px 0 0; }
.suggestions { width: min(650px,100%); margin-top: 28px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.suggestions button { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; height: 92px; padding: 12px; border-radius: 12px; border-color: var(--border); font-size: 12px; line-height: 18px; color: var(--secondary); gap: 10px; }
.suggestions button:hover { background: var(--sidebar); border-color: #dededb; }
.suggestions button>span:last-child { margin-left: 0; opacity: 1; transform: none; display: inline; }
.suggestions button>span:first-child svg { width: 16px; height: 16px; }
.composer-area, .is-empty .composer-area { width: min(var(--thread-width),calc(100% - 32px)); margin: 0; padding: 0 0 15px; flex-shrink: 0; }
.project-context { display: none; }
.composer { padding: 13px 8px 8px; border: 1px solid #ededeb; border-radius: 22px; background: var(--bg); box-shadow: 0 2px 5px #00000003,0 3px 25px #00000003; }
.composer:focus-within { border: 1px solid #e5e5e2; box-shadow: 0 2px 5px #00000003,0 3px 25px #00000003; }
.composer textarea { min-height: 42px; max-height: 220px; padding: 0 3px; line-height: 22px; font-size: 14px; font-weight: 400; letter-spacing: 0; }
.composer textarea::placeholder { color: #cecdcc; opacity: 1; }
.composer-toolbar { height: 28px; margin-top: 7px; gap: 6px; }
.composer-left, .composer-right { display: flex; align-items: center; gap: 5px; }
.composer-left { flex-shrink: 1; }
.composer-right { flex-shrink: 0; }
.composer .icon-button { width: 28px; height: 28px; padding: 4px; }
.composer .icon-button svg { width: 18px; height: 18px; stroke-width: 1.65; }
.permission-trigger { display: flex; align-items: center; gap: 6px; white-space: nowrap; height: 28px; padding: 4px 6px; border-radius: 7px; color: var(--secondary); font-size: 13px; }
.permission-trigger svg { width: 15px; height: 15px; }
.permission-trigger>span:last-child { display: none; }
.permission-trigger.full-access { color: #f45a1d; }
.model-controls { display: flex; align-items: center; min-width: 0; margin-right: 4px; }
.model-trigger, .effort-trigger { display: flex; align-items: center; height: 28px; font-size: 13px; line-height: 18px; gap: 4px; border-radius: 7px; white-space: nowrap; }
.model-trigger { padding: 4px 1px 4px 7px; color: var(--text); font-weight: 400; }
.effort-trigger { padding: 4px 5px 4px 3px; color: #3021f0; }
.effort-trigger svg { width: 10px; height: 10px; color: var(--muted); }
.send-button { height: 28px; width: 28px; margin-left: 4px; padding: 5px; color: var(--bg); background: var(--text); border-radius: 50%; }
.send-button:hover { background: var(--text); }
.send-button:disabled { background: #ededeb; color: #b3b3b0; }
.send-button svg { height: 18px; width: 18px; stroke-width: 1.7; }
.send-button.is-generating svg { height: 11px; width: 11px; fill: currentColor; stroke: none; }
.send-button.is-generating { padding: 0; }
.attachment-list { padding: 0 3px; }
.attachment-chip { font-size: 12px; margin-bottom: 10px; padding: 8px; border-radius: 8px; }
.conversation-scroll { scrollbar-gutter: auto; scroll-behavior: auto; }
.messages { max-width: var(--thread-width); width: calc(100% - 32px); margin: 0 auto; padding: 37px 0 24px; }
.message { font-size: 14px; line-height: 23px; font-weight: 400; letter-spacing: 0; margin-bottom: 28px; }
.message-user { border: 0; background: #f5f5f4; border-radius: 18px; padding: 10px 16px; max-width: 85%; width: fit-content; margin-left: auto; margin-bottom: 48px; }
.message-assistant { padding: 0; }
.message-content { white-space: normal; overflow-wrap: anywhere; }
.message:last-child { margin-bottom: 0; }
.message-content p { margin: 0 0 12px; }
.message-content p:has(+ ul), .message-content p:has(+ ol) { margin-bottom: 4px; }
.message-content p:last-child, .message-content ul:last-child, .message-content ol:last-child { margin-bottom: 0; }
.message-content ul, .message-content ol { padding-left: 27px; margin: 0 0 6px; }
.message-content li { padding-left: 1px; margin: 1px 0; }
.message-content li::marker { color: var(--text); }
.message-content strong { font-weight: 600; }
.message-content h3 { font-size: 14px; line-height: 23px; font-weight: 600; margin: 22px 0 10px; }
.message-content code { font: 12.5px/1.6 ui-monospace,"SFMono-Regular",Menlo,monospace; padding: 2px 6px; border-radius: 6px; background: #efefed; }
.message-content pre { border: 1px solid var(--border); border-radius: 10px; padding: 15px 17px; overflow-x: auto; margin: 16px 0; background: var(--subtle); }
.message-content pre code { padding: 0; background: none; }
.turn-activity, .thought-duration { margin: 0 0 17px; padding-bottom: 6px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 14px; line-height: 22px; font-variant-numeric: tabular-nums; }
.turn-activity>button { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; line-height: 22px; padding: 0; }
.turn-activity>button:hover { color: var(--secondary); background: none; }
.turn-activity svg { width: 12px; height: 12px; transition: transform .15s; }
.turn-activity>button[aria-expanded="true"] svg { transform: rotate(90deg); }
.activity-detail { color: var(--muted); font-size: 12px; line-height: 20px; padding: 12px 0 2px; }
.thinking-indicator { display: block; padding: 5px 0 0; font-size: 14px; line-height: 23px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.message-tools { display: flex; align-items: center; gap: 4px; margin-top: 13px; }
.message-tools .icon-button { width: 24px; height: 24px; padding: 4px; color: var(--muted); }
.message-tools svg { width: 15px; height: 15px; stroke-width: 1.6; }
.message-feedback-group { display: flex; align-items: center; gap: 0; }
.message-feedback-group .icon-button { width: 19px; padding: 3px; }
.message-feedback-group svg { width: 13px; height: 13px; }
.message-tools>time { color: var(--muted); font-size: 12px; margin-left: 5px; font-variant-numeric: tabular-nums; }
.thread-spinner { width: 10px; height: 10px; border: 1px solid #d9d9d7; border-top-color: var(--muted); border-right-color: var(--muted); border-radius: 50%; animation: spinner-rotate 1s linear infinite; flex-shrink: 0; }
@keyframes spinner-rotate { to { transform: rotate(360deg); } }
.popover { border-radius: 12px; box-shadow: 0 0 0 .5px var(--border),0 8px 20px -4px #0002; }
.popover-title { font-size: 12px; }
.menu-item { font-size: 14px; min-height: 32px; border-radius: 7px; }
.menu-copy small { font-size: 12px; }
.menu-footnote { font-size: 11px; }
.effort-menu { width: 290px; padding: 16px; }
.effort-heading { display: flex; align-items: center; justify-content: space-between; color: var(--text); font-size: 14px; }
.effort-heading output { color: #3021f0; }
.effort-menu input { width: 100%; accent-color: #3021f0; margin: 14px 0 7px; height: 16px; }
.effort-stops { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.effort-model { margin-top: 15px; color: var(--muted); font-size: 13px; }
.queued-messages { margin: 0 10px 9px; }
.queued-message { display: flex; align-items: center; gap: 8px; min-height: 37px; padding: 3px 7px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.queued-message>svg { width: 14px; height: 14px; }
.queued-message>span { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.queued-message .icon-button { width: 25px; height: 25px; }
.queued-message .icon-button svg { width: 14px; height: 14px; }
.separate-stop svg { width: 11px!important; height: 11px!important; fill: currentColor; stroke: none; }
.message-user .message-delivery { display: block; margin-top: 6px; padding: 0; color: var(--muted); font-size: 11px; }
.streaming-character { animation: reveal-character .12s ease-out both; }
@keyframes reveal-character { from { opacity: .15; } to { opacity: 1; } }
[data-theme="dark"] { --bg: #191919; --chrome: #202020; --sidebar: #202020; --text: #e8e8e4; --secondary: #bebeb9; --muted: #8c8c87; --subtle: #292929; --border: #ffffff12; --selected: #ffffff0d; --hover: #ffffff0d; --inverse: #181818; }
[data-theme="dark"] .content-shell, [data-theme="dark"] .topbar-left { border-color: #ffffff12; }
[data-theme="dark"] .rail-button.is-active { background: #ffffff0c; }
[data-theme="dark"] .rail-divider, [data-theme="dark"] .toolbar-divider { background: #ffffff15; }
[data-theme="dark"] .composer { background: #292929; border-color: #ffffff14; box-shadow: 0 3px 25px #0000000a; }
[data-theme="dark"] .composer:focus-within { border-color: #ffffff24; }
[data-theme="dark"] .composer textarea::placeholder { color: #777772; }
[data-theme="dark"] .send-button, [data-theme="dark"] .send-button:hover { color: #181818; background: #e8e8e4; }
[data-theme="dark"] .send-button:disabled { background: #3b3b3b; color: #777; }
[data-theme="dark"] .message-user { background: #292929; }
[data-theme="dark"] .message-content code { background: #303030; }
[data-theme="dark"] .popover { background: #2b2b2b; box-shadow: 0 0 0 .5px #ffffff10,0 8px 20px -4px #0005; }
[data-theme="dark"] .permission-trigger.full-access { color: #ff7847; }
[data-theme="dark"] .effort-trigger { color: #a395ff; }
@media (max-width:1100px) {
  .detail-panel { position: absolute; top: 0; bottom: 0; right: 0; width: min(350px,100%); z-index: 12; box-shadow: -5px 0 20px #0001; }
  .chat-stage:has(+ .detail-panel:not([hidden])) .suggestions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .app { grid-template-columns: minmax(0,1fr); padding: 0; }
  .app-rail { display: none; }
  .content-shell { grid-column: 1; border: 0; border-radius: 0; }
  .topbar.window-bar, .app.sidebar-collapsed .topbar { grid-template-columns: 42px minmax(0,1fr) auto; }
  .titlebar-navigation { padding: 0 8px; }
  .titlebar-navigation .traffic-lights, #nav-back, #nav-forward { display: none; }
  .topbar-left { border: 0; gap: 9px; padding: 0 5px; }
  .topbar .titlebar-folder { display: none; }
  .header-title { font-size: 14px; max-width: none; }
  .topbar-actions { padding: 0 7px; gap: 4px; }
  .topbar-actions .toolbar-divider { display: none; }
  .sidebar, .sidebar-collapsed .sidebar { position: fixed; top: var(--titlebar-height); left: 0; bottom: 0; width: 260px; margin: 0; transform: translateX(-100%); z-index: 20; transition: transform .18s ease; border-radius: 0 12px 12px 0; }
  .mobile-sidebar-open .sidebar { transform: translateX(0); }
  .mobile-sidebar-open .sidebar-scrim { position: fixed; inset: var(--titlebar-height) 0 0; background: #0003; z-index: 19; display: block; }
  .sidebar-heading { height: 58px; }
  .mobile-sidebar-bottom { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px max(12px,env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
  .mobile-profile { display: flex; align-items: center; gap: 10px; padding: 0; font-size: 13px; }
  .nav-item { height: 37px; }
  .thread-row { height: 35px; }
  .empty-state { padding: 16px 20px 25px; }
  .composer-area, .is-empty .composer-area, .messages { width: calc(100% - 24px); }
  .composer-area, .is-empty .composer-area { padding-bottom: max(12px,env(safe-area-inset-bottom)); }
  .suggestions { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 360px; margin-top: 24px; }
  .suggestions button { height: 78px; font-size: 12px; line-height: 17px; padding: 11px 12px; }
  .suggestions br { display: none; }
  .welcome h1, .chat-stage:has(+ .detail-panel:not([hidden])) .welcome h1 { font-size: 24px; }
  .composer { border-radius: 20px; padding: 12px 7px 7px; }
  .composer textarea { font-size: 16px; }
  .composer-toolbar { gap: 0; }
  .composer-left, .composer-right { gap: 1px; }
  .permission-trigger { padding: 4px; }
  .permission-trigger>span:not(:first-child) { display: none; }
  .model-trigger, .effort-trigger { font-size: 12px; }
  .model-trigger { padding-left: 3px; }
  .model-controls { margin-right: 0; }
  .message-user { max-width: 92%; margin-bottom: 36px; }
  .messages { padding-top: 25px; }
}
@media (max-height:620px) {
  .rail-top { gap: 5px; }
  .rail-bottom { gap: 8px; }
  .empty-state { padding-top: 12px; padding-bottom: 18px; }
  .hero-mark, .hero-mark svg { width: 32px; height: 32px; }
  .welcome h1 { margin-top: 13px; font-size: 24px; }
  .suggestions { margin-top: 18px; }
  .suggestions button { height: 78px; }
}
@media (max-height:480px) {
  .rail-button { height: 30px; width: 32px; padding: 7px; }
  .rail-top, .rail-bottom { gap: 3px; }
  .empty-state .suggestions { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .thread-spinner, .streaming-character { animation: none; }
  .sidebar, .turn-activity svg { transition: none; }
}