:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  color: #15181d; background: #fff; font-synthesis: none;
  --muted: #858b95; --blue: #1765c1; --line: #eceef1; --user: #e6f3ff;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible, .transcript:focus-visible { outline: 2px solid #83b8f6; outline-offset: 3px; }
[hidden] { display: none !important; }
.shell { height: 100dvh; display: grid; grid-template-columns: 284px minmax(0, 1fr); }
.sidebar { background: #f7fafb; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; padding: 26px 14px 16px; }
.brand { display: flex; gap: 11px; align-items: center; padding: 0 10px 25px; }
.brand-symbol { width: 33px; height: 33px; display: grid; place-items: center; color: #2e72c2; font-size: 28px; }
.brand strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.brand div > span { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.brand div { flex: 1; }
.connection { margin: 0 10px 25px; display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.connection i, .status-dot { width: 5px; height: 5px; border-radius: 50%; background: #bec5cf; flex-shrink: 0; }
.connection.connected i, .status-dot { background: #5b9be3; }
.connection.failed i { background: #d05a4f; }
.readonly { margin-left: auto; background: #edf3fb; border-radius: 5px; padding: 3px 7px; font-size: 10px; color: #6a88ad; }
.list-heading { display: flex; align-items: center; gap: 9px; margin: 0 10px 12px; }
.list-heading h1 { font-size: 12px; color: #727a87; margin: 0; font-weight: 500; }
.count { font-size: 11px; color: #969da7; font-variant-numeric: tabular-nums; }
.icon-button { border: 0; background: transparent; padding: 6px; border-radius: 6px; font-size: 21px; line-height: 1; }
.icon-button:hover { background: #e9edf3; }
.list-heading .icon-button { margin-left: auto; color: #788395; }
.search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e3e7ed; margin: 0 8px 17px; padding: 10px 11px; border-radius: 8px; }
.search > span { font-size: 22px; line-height: 17px; color: #8e98a7; }
.search input { border: 0; outline: none; min-width: 0; width: 100%; background: transparent; font-size: 12px; }
.search input::placeholder { color: #a0a6af; }
.tabs { display: flex; gap: 4px; margin: 0 8px 13px; border-bottom: 1px solid #e7eaf0; }
.tabs button { font-size: 11px; padding: 8px 10px 10px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); }
.tabs button[aria-pressed=true] { color: var(--blue); border-bottom-color: #528ed7; font-weight: 500; }
.thread-list { overflow: auto; flex: 1; min-height: 0; padding: 0 2px; scrollbar-width: thin; overscroll-behavior: contain; }
.project-node { margin-bottom: 12px; }
.project-toggle { width: 100%; min-height: 28px; display: flex; align-items: center; gap: 8px; padding: 4px 7px; background: transparent; border: 0; border-radius: 8px; text-align: left; color: #34383c; font-size: 13px; line-height: 20px; }
.project-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-folder { width: 14px; height: 14px; flex-shrink: 0; }
.project-chevron { width: 12px; height: 12px; color: #858b90; flex-shrink: 0; opacity: 0; }
.project-node[aria-expanded=true] > .project-toggle .project-chevron { transform: rotate(90deg); }
.project-toggle:hover, .project-node:focus-visible > .project-toggle { background: #edf0f2; }
.project-toggle:hover .project-chevron, .project-node:focus-visible > .project-toggle .project-chevron { opacity: 1; }
.project-node:focus-visible { outline: none; }
.project-node:focus-visible > .project-toggle { outline: 2px solid #83b8f6; outline-offset: -2px; }
.thread { width: 100%; min-height: 28px; text-align: left; background: transparent; border: 0; border-radius: 8px; padding: 4px 11px 4px 30px; margin: 0; display: flex; align-items: center; gap: 8px; color: #2b3034; }
.thread:hover { background: #edf0f2; }
.thread.selected { background: #eceeef; }
.thread-title { min-width: 0; flex: 1; font-size: 13px; line-height: 20px; display: block; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-running { width: 9px; height: 9px; flex-shrink: 0; border: 1.2px solid #aeb5ba; border-top-color: #535c64; border-radius: 50%; animation: run-spin 1s linear infinite; }
.project-more { display: block; min-height: 28px; padding: 4px 11px 4px 30px; margin: 0; border: 0; border-radius: 6px; background: transparent; color: #92999e; font-size: 12px; line-height: 20px; text-align: left; }
.project-more:hover { color: #4f5963; background: #edf0f2; }
@media (prefers-reduced-motion: reduce) { .thread-running { animation: none; } }
@media (pointer: coarse) { .project-chevron { opacity: 1; } }
.list-empty { font-size: 12px; color: var(--muted); padding: 18px 12px; line-height: 1.8; }
.load-more { margin: 8px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px; font-size: 12px; color: #6d7e95; }
.account-entry { display: flex; align-items: center; gap: 10px; width: 100%; flex: none; border: 0; padding: 10px; margin-top: 8px; border-radius: 10px; background: transparent; color: #293444; text-align: left; cursor: pointer; }
.account-entry:hover { background: #eceeef; }
.account-avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: #e3efff; color: #397cdb; font-size: 13px; }
.account-entry-copy { min-width: 0; flex: 1; }
.account-entry-copy strong, .account-entry-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-entry-copy strong { font-size: 12px; font-weight: 500; }
.account-entry-copy span { font-size: 11px; color: #8792a1; margin-top: 3px; }
.account-entry-arrow { color: #919aa7; font-size: 20px; }
.account-section-heading { display: flex; align-items: center; justify-content: space-between; }
.account-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.account-name { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.account-plan-badge { padding: 3px 8px; border-radius: 6px; background: #eaf3ff; color: #3373cf; font-size: 11px; }
.account-empty { font-size: 13px; color: #8290a3; margin: 4px 0; }
.account-usage { margin-top: 20px; }
.quota-group h4 { font-size: 12px; color: #8190a4; font-weight: 500; }
.quota-window + .quota-window { margin-top: 20px; }
.quota-heading, .quota-detail { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
.quota-heading { font-size: 12px; color: #3c4f68; }
.quota-heading strong { font-weight: 500; }.quota-heading span { color: #397cdb; }
.quota-window progress { appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 8px; overflow: hidden; margin: 10px 0 7px; background: #edf0f4; }
.quota-window progress::-webkit-progress-bar { background: #edf0f4; border-radius: 8px; }
.quota-window progress::-webkit-progress-value { background: #4088f4; border-radius: 8px; }
.quota-window progress::-moz-progress-bar { background: #4088f4; border-radius: 8px; }
.quota-detail { font-size: 11px; color: #8b98a9; line-height: 1.7; }
.account-source-note { font-size: 11px; line-height: 1.7; color: #8b98a9; margin: 12px 0 18px; }
.main { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #fff; }
.conversation-header { display: flex; align-items: center; gap: 20px; padding: 23px 34px 18px; border-bottom: 1px solid var(--line); }
.heading-copy { min-width: 0; flex: 1; }
.heading-copy h2 { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.refresh-button { border: 1px solid #e6e9ee; background: #fff; border-radius: 7px; padding: 8px 11px; font-size: 12px; color: #66768c; flex-shrink: 0; }
.refresh-button:hover { background: #f3f7fd; color: var(--blue); }
.back { display: none; }
.connection-details { margin: 14px 0 0; color: #8996a7; font-size: 12px; }
.connection-details summary { cursor: pointer; width: fit-content; }
.connection-details p { margin: 6px 0; line-height: 1.7; overflow-wrap: anywhere; max-width: 780px; }
.send-area { width: 100%; padding: 0 34px 8px; flex-shrink: 0; }
.composer { border: 1px solid #dbe5f2; border-radius: 18px; padding: 12px 15px 10px; max-width: 780px; margin: auto; background: #fbfdff; }
.composer:focus-within { border-color: #8bb7e9; }
.composer textarea { width: 100%; resize: none; border: 0; outline: none; background: transparent; font-size: 13px; line-height: 1.6; color: #22354b; min-height: 44px; max-height: 140px; }
.composer textarea::placeholder { color: #9aa7b7; }
.composer-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
@keyframes run-spin { to { transform: rotate(360deg); } }
.model-switch { display: inline-flex; align-items: center; gap: 5px; max-width: 270px; border: 0; border-radius: 20px; padding: 5px 9px; background: #f4f4f4; color: #353535; font-size: 11px; }
.model-switch:hover:not(:disabled), .model-switch[aria-expanded=true] { background: #eaeaea; }.model-switch:disabled { opacity: .65; }
.model-switch > svg { width: 12px; height: 12px; fill: none; stroke: #8c8c8c; stroke-width: 1; flex-shrink: 0; }
#current-model { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-popover { position: fixed; z-index: 30; width: 232px; max-width: calc(100vw - 24px); padding: 10px; border: 1px solid #e3e3e3; border-radius: 16px; background: #fff; color: #252525; box-shadow: 0 4px 12px #00000012; font-family: inherit; }
.model-popover svg { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.effort-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 36px; }
.effort-bolt { width: 14px; height: 14px; color: #858585; margin-top: 1px; flex-shrink: 0; }
.effort-copy { min-width: 0; text-align: center; }
#effort-label { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: #377cf8; }
#show-model-list { display: inline-flex; align-items: center; justify-content: center; max-width: 168px; gap: 1px; padding: 0; border: 0; background: transparent; color: #757575; font-size: 11px; line-height: 16px; }
#picker-model-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#show-model-list svg { width: 10px; height: 10px; flex-shrink: 0; color: #999; }
.reset-effort { width: 16px; height: 18px; border: 0; padding: 0; background: transparent; color: #858585; flex-shrink: 0; }
.reset-effort svg { width: 14px; height: 14px; }
.reset-effort:hover:not(:disabled), #show-model-list:hover:not(:disabled) { color: #333; }
.effort-track { height: 24px; position: relative; border-radius: 20px; background: #e9e9e9; margin-top: 8px; }
.effort-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: #377cf8; width: calc(12px + var(--effort-ratio, 0) * (100% - 24px)); }
.effort-ticks { position: absolute; inset: 0 10px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.effort-ticks span { width: 4px; height: 4px; border-radius: 50%; background: #bdbdbd; }
.effort-ticks span[data-filled=true] { background: #ffffff69; }
.effort-slider { appearance: none; -webkit-appearance: none; position: relative; display: block; width: 100%; height: 24px; margin: 0; padding: 0; background: transparent; border: 0; cursor: pointer; touch-action: pan-y; }
.effort-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #f5f5f5; background: #fff; box-shadow: 0 1px 3px #0000000c; }
.effort-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #f5f5f5; background: #fff; box-shadow: 0 1px 3px #0000000c; }
.effort-slider:focus-visible { outline: 2px solid #b8d3fe; outline-offset: 3px; border-radius: 20px; }
.model-popover[data-locked=true] .effort-track { opacity: .6; }
.model-list-panel { margin: -4px; }
.model-list-heading { display: flex; align-items: center; gap: 2px; padding: 1px 4px 4px; color: #858585; font-size: 11px; line-height: 16px; }
.model-list-heading button { width: 14px; height: 16px; border: 0; padding: 0; background: transparent; color: #929292; }
.model-list-heading svg { width: 10px; height: 10px; }
#model-options { max-height: min(360px, calc(100dvh - 180px)); overflow-y: auto; overscroll-behavior: contain; }
.model-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 0; border-radius: 7px; padding: 5px 4px; background: transparent; text-align: left; color: #252525; font-size: 12px; line-height: 16px; }
.model-option:hover:not(:disabled), .model-option:focus-visible { background: #f3f3f3; outline: none; }
.model-option small { display: block; color: #8b8b8b; font-size: 11px; line-height: 14px; }
.model-option svg { width: 14px; height: 14px; flex-shrink: 0; }
.model-option[aria-checked=false] svg { visibility: hidden; }
.model-picker-notice, .model-picker-error { margin: 8px 0 0; font-size: 11px; line-height: 1.5; }
.model-picker-notice { color: #8a8a8a; }.model-picker-error { color: #a95750; }
@media (pointer: coarse) {
  .model-option { min-height: 36px; }
  #show-model-list { min-height: 24px; }.reset-effort { width: 24px; height: 24px; }
  .model-list-heading button { width: 24px; height: 24px; }
}
.composer-actions > span { flex: 1; min-width: 0; color: #8b99aa; font-size: 10px; line-height: 1.5; }
.send-button { border: 0; border-radius: 9px; background: #216bcc; color: #fff; padding: 7px 11px; font-size: 13px; white-space: nowrap; }
.send-button:disabled { background: #e0e8f2; color: #97a8bd; opacity: 1; }
.steer-button { background: #fff; border: 1px solid #dbe4ef; border-radius: 7px; color: #6b829e; padding: 6px 9px; font-size: 11px; white-space: nowrap; }
.composer-caption { color: #a4adba; font-size: 9px; margin: 7px auto 0; text-align: center; }
.pending-messages { max-width: 780px; margin: 0 auto 8px; max-height: 90px; overflow: auto; }
.pending-message { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #7790ae; padding: 7px 11px; background: #f0f6ff; border-radius: 8px; margin: 4px 0; }
.pending-message span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-message button { border: 0; background: transparent; color: #7994b6; font-size: 10px; }
.approval-notice { max-width: 780px; margin: 0 auto 8px; padding: 8px; border-radius: 6px; background: #fff8ee; color: #9e8051; font-size: 11px; }
.error { background: #fff5f2; border: 1px solid #f4dcd5; color: #a84b3c; font-size: 12px; margin: 12px 34px 0; border-radius: 7px; padding: 12px; line-height: 1.8; }
.transcript { flex: 1; overflow: auto; min-height: 0; padding: 16px 34px 32px; scrollbar-width: thin; overflow-anchor: none; scroll-behavior: auto; }
.conversation-turn { max-width: 780px; margin: 0 auto 42px; }
.turn-time { display: block; text-align: center; font-size: 11px; color: #949494; margin: 17px 0 20px; }
.message { margin: 0 0 18px; }
.message.user { display: flex; justify-content: flex-end; margin-bottom: 32px; }
.message-body { font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; min-width: 0; }
.user .message-body { max-width: 78%; background: var(--user); border: 0; border-radius: 16px; padding: 11px 16px; color: #12273e; }
.assistant .message-body { background: transparent; padding: 0; border: 0; border-radius: 0; }
.message-body p { margin: 0 0 12px; white-space: normal; }
.user .message-body p, .message-body .markdown-raw { white-space: pre-wrap; }
.message-body p:last-child { margin-bottom: 0; }
.message-body h3 { font-size: 15px; margin: 19px 0 10px; font-weight: 600; }
.message-body h1, .message-body h2, .message-body h4, .message-body h5, .message-body h6 { line-height: 1.5; font-weight: 600; margin: 20px 0 10px; }
.message-body h1 { font-size: 22px; }.message-body h2 { font-size: 19px; }.message-body h4 { font-size: 14px; }.message-body h5, .message-body h6 { font-size: 13px; }
.message-body > :first-child { margin-top: 0; }
.message-body ul, .message-body ol { padding-left: 23px; margin: 10px 0 13px; }
.message-body li { margin: 3px 0; }
.message-body li p { margin: 5px 0; }
.message-body li > ul, .message-body li > ol { margin: 4px 0; }
.message-body .task-item { list-style: none; margin-left: -21px; }
.markdown-checkbox { margin: 0 7px 0 0; width: 13px; height: 13px; accent-color: #4088f4; vertical-align: middle; }
.message-body blockquote { margin: 14px 0; border-left: 3px solid #d7e3f3; padding: 3px 0 3px 15px; color: #6b7c91; }
.message-body blockquote > :last-child { margin-bottom: 0; }
.message-body hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.markdown-table { max-width: 100%; overflow-x: auto; margin: 14px 0; border: 1px solid #e3e8ef; border-radius: 9px; scrollbar-width: thin; overscroll-behavior-inline: contain; }
.markdown-table:focus-visible { outline: 2px solid #83b8f6; outline-offset: 3px; }
.markdown-table table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; line-height: 1.65; }
.markdown-table th, .markdown-table td { min-width: 90px; padding: 9px 12px; border-right: 1px solid #e8ecf1; border-bottom: 1px solid #e8ecf1; text-align: left; vertical-align: top; overflow-wrap: normal; }
.markdown-table th { background: #f7faff; font-weight: 600; color: #405775; }
.markdown-table tr > :last-child { border-right: 0; }.markdown-table tbody tr:last-child > td { border-bottom: 0; }
.markdown-table tbody tr:nth-child(even) { background: #fcfdff; }
.markdown-table .align-left { text-align: left; }.markdown-table .align-center { text-align: center; }.markdown-table .align-right { text-align: right; }
.markdown-image-reference { color: #8b98a9; }
.message-body .markdown-fallback { white-space: pre-wrap; overflow-wrap: anywhere; }
.message-body code { font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; background: #f0f2f5; padding: 2px 4px; border-radius: 4px; }
.message-body pre { overflow: auto; background: #f7f8fa; border: 1px solid #eceff4; border-radius: 8px; padding: 14px 16px; white-space: pre; margin: 12px 0; }
.message-body pre code { padding: 0; background: none; }
.message-body pre[data-language]::before { content: attr(data-language); display: block; font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #8b98a9; margin-bottom: 8px; }
.message-body a { color: #145db2; text-decoration: none; }
.message-body a:hover { text-decoration: underline; }
.local-reference { display: inline-flex; align-items: center; gap: 4px; color: #6681a2; vertical-align: baseline; }
.local-reference .icon { width: 12px; height: 12px; }
.image-gallery { display: grid; gap: 10px; width: min(100%, 360px); margin-top: 12px; }
.user .has-images { width: min(78%, 500px); }
.image-card { min-width: 0; border: 1px solid #dce8f5; border-radius: 12px; overflow: hidden; background: #f7faff; }
.image-open { display: block; border: 0; background: transparent; padding: 0; width: 100%; text-align: left; }
.image-open:disabled { opacity: 1; }
.image-stage { display: flex; align-items: center; justify-content: center; position: relative; height: 200px; background: #f1f6fc; }
.image-thumbnail { display: block; width: 100%; height: 100%; object-fit: contain; }
.image-placeholder { color: #8093ac; font-size: 12px; line-height: 1.8; padding: 20px; text-align: center; }
.image-caption { display: block; padding: 9px 12px; color: #58779d; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.image-retry { display: block; margin: 0 12px 10px; padding: 3px 0; background: transparent; border: 0; color: var(--blue); font-size: 11px; }
.image-dialog { width: min(1100px, calc(100vw - 24px)); max-height: 92dvh; }
.image-viewer-heading { display: flex; gap: 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.image-viewer-heading h2 { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.image-viewer-body { overflow: auto; max-height: 76dvh; min-height: 100px; display: flex; align-items: center; justify-content: center; background: #f8faff; }
.image-viewer-body img { display: block; max-width: 100%; max-height: 76dvh; object-fit: contain; }
.image-viewer-status { padding: 12px 20px; margin: 0; font-size: 11px; color: #6a7f98; line-height: 1.7; }
.progress { margin: 0 0 17px; }
.progress-summary { display: flex; align-items: center; gap: 5px; width: fit-content; padding: 4px 0 12px; color: #8f8f8f; cursor: pointer; font-size: 12px; list-style: none; }
.progress-summary::-webkit-details-marker { display: none; }
.progress-summary .icon { width: 12px; height: 12px; }
.progress[open] > .progress-summary .icon { transform: rotate(90deg); }
.progress:has(+ .final-answer) { border-bottom: 1px solid #ededed; }
.progress-body { padding: 3px 0 5px; }
.progress[open] .progress-body { padding-bottom: 14px; }
.tool-line { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.75; color: #888; margin: 10px 0 14px; overflow-wrap: anywhere; }
.tool-line .icon { margin-top: 3px; }
.icon { width: 15px; height: 15px; flex-shrink: 0; }
.history-pager, .history-start { max-width: 780px; margin: 0 auto; text-align: center; }
.history-start { font-size: 10px; color: #b0b6c0; margin-top: 9px; margin-bottom: 22px; }
.history-button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 7px; background: transparent; color: #7997bb; font-size: 11px; padding: 9px 14px; margin: 0 0 16px; }
.history-button:hover { background: #f0f6fd; color: var(--blue); }
.empty { text-align: center; margin: 65px auto; max-width: 360px; color: #929daa; font-size: 13px; }
.empty-symbol { font-size: 33px; color: #a1bcdc; }
.empty h3 { font-size: 16px; color: #647990; font-weight: 400; }
.empty p { font-size: 12px; line-height: 1.8; }
.muted { color: var(--muted); font-size: 12px; }
.bottom-marker { max-width: 780px; margin: 28px auto 0; font-size: 10px; color: #b3bac4; }
.conversation-footer { display: flex; gap: 20px; align-items: center; border-top: 1px solid #f0f2f5; padding: 12px 34px; font-size: 10px; color: #98a2b0; background: #fff; }
.read-status { display: flex; align-items: center; gap: 7px; flex: 1; }
.auto-refresh { display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.auto-refresh input { accent-color: #5890d3; width: 12px; height: 12px; }
.backend { white-space: nowrap; font-size: 9px; }
.network-pill { color: #3575bd; background: #eef5ff; border-radius: 12px; font-size: 11px; padding: 5px 9px; white-space: nowrap; }
dialog { width: min(580px, calc(100vw - 28px)); max-height: 88dvh; border: 1px solid #e6ebf2; border-radius: 24px; padding: 0; box-shadow: 0 24px 80px #213b6430; color: #15181d; }
dialog::backdrop { background: #18325145; backdrop-filter: blur(4px); }
.dialog-heading { padding: 24px; display: flex; align-items: flex-start; gap: 15px; border-bottom: 1px solid var(--line); }
.dialog-heading div { flex: 1; }.dialog-heading h2 { margin: 0; font-size: 21px; font-weight: 600; }
.dialog-heading p, .settings-help { color: #8996a7; font-size: 12px; line-height: 1.7; }
.dialog-heading p { margin: 8px 0 0; }.dialog-content { padding: 20px 24px 26px; }
.dialog-content section + section { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 14px; }
.dialog-content h3 { font-size: 15px; font-weight: 600; margin: 16px 0 10px; }
.dialog-content label { display: block; font-size: 12px; color: #586a82; margin: 14px 0; }
.dialog-content input:not([type=checkbox]), .dialog-content textarea { display: block; width: 100%; border: 1px solid #dfe6f0; background: #f8faff; border-radius: 10px; padding: 12px; color: #213751; margin-top: 8px; font-size: 14px; min-width: 0; }
.dialog-content textarea { resize: vertical; overflow-wrap: anywhere; }.dialog-content .check-label { display: flex; gap: 8px; align-items: center; }
.settings-actions { display: flex; gap: 10px; align-items: center; }.primary-button, .secondary-button { border-radius: 10px; padding: 11px 15px; border: 0; font-size: 13px; }
.primary-button { background: #2878e9; color: #fff; }.secondary-button { background: #eef3fa; color: #5b779c; }
.pair-status { background: #eff6ff; color: #4480c4; padding: 11px 13px; border-radius: 10px; font-size: 12px; }
.pair-error { color: #b35043; font-size: 12px; line-height: 1.7; }
dialog select { width: 100%; border: 1px solid var(--border); border-radius: 8px; background: white; padding: 10px; font: inherit; }
.license-notices { margin-top: 22px; color: #8a97a8; font-size: 11px; }.license-notices summary { cursor: pointer; }.license-notices pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; font-size: 10px; line-height: 1.6; }
/* Shared H5 / native-shell refinements, inspired by codex-remote's composer. */
.brand { padding-bottom: 20px; }.search input { font-size: 13px; }
.composer { border-radius: 26px; padding: 15px 17px 12px; background: #f9fbfe; box-shadow: 0 2px 7px #3465a206; }
.composer textarea { font-size: 15px; }.send-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: #2878e9; flex-shrink: 0; }.send-button span { display: none; }
.send-button svg { width: 24px; height: 24px; }.send-button [data-send-icon] { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.send-button [data-stop-icon] { fill: currentColor; }
.icon-button { min-width: 36px; min-height: 36px; }.composer-actions > span { font-size: 11px; }
@media (max-width: 850px) {
  .shell { grid-template-columns: 246px minmax(0, 1fr); }
  .sidebar { padding: 22px 9px 14px; }
  .conversation-header { padding: 20px 23px 16px; }
  .conversation-footer { padding-left: 23px; padding-right: 23px; }
  .transcript { padding: 15px 23px 28px; }
  .error { margin-left: 23px; margin-right: 23px; }
  .send-area { padding-left: 23px; padding-right: 23px; }
  .backend { display: none; }
  .user .message-body { max-width: 90%; }
}
@media (max-width: 620px) {
  .shell { display: block; }
  .sidebar { height: 100dvh; border-right: 0; padding: max(24px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); }
  .main { height: 100dvh; display: none; }
  .shell.detail-open .sidebar { display: none; }
  .shell.detail-open .main { display: flex; }
  .back { display: block; color: #66788e; }
  .conversation-header { gap: 7px; padding: max(13px, env(safe-area-inset-top)) 10px 10px; }
  .heading-copy h2 { font-size: 15px; }
  .refresh-button { padding: 7px 9px; }
  .refresh-button span { display: none; }
  .transcript { padding: 9px 18px 24px; }
  .conversation-turn { margin-bottom: 34px; }
  .turn-time { margin-top: 16px; }
  .message-body { font-size: 15px; line-height: 1.8; }
  .user .message-body { max-width: 88%; padding: 10px 14px; border-radius: 15px; }
  .message.user { margin-bottom: 26px; }
  .tool-line { font-size: 12px; }
  .conversation-footer { padding: 8px 18px max(10px, env(safe-area-inset-bottom)); gap: 10px; }
  .error { margin: 12px 18px 0; }
  .send-area { padding: 0 14px 8px; }
  .composer { padding: 12px 15px; border-radius: 24px; }
  .composer textarea { font-size: 16px; }
  .composer-actions { gap: 6px; }
  .model-switch { max-width: 240px; padding: 8px; font-size: 12px; min-height: 38px; }
  .send-button span { display: none; }
  .composer-caption { font-size: 8px; }
  .network-pill { font-size: 10px; padding: 4px 7px; }
  .icon-button { min-width: 40px; min-height: 40px; }
  .project-toggle { min-height: 40px; font-size: 14px; }
  .thread { min-height: 40px; padding-left: 30px; }.thread-title { font-size: 14px; }
  .project-more { min-height: 36px; font-size: 13px; }
  .search input { font-size: 16px; }.tabs button { padding: 12px; font-size: 13px; }.connection { font-size: 12px; }
  .dialog-content input:not([type=checkbox]), .dialog-content textarea { font-size: 16px; }
  .dialog-content { padding: 16px; }.dialog-heading { padding: 20px 16px; }
}