:root {
  color-scheme: light;
  --bg: #f8f8f7;
  --panel: #ffffff;
  --sidebar: #f3f3f2;
  --line: #e5e5e3;
  --line-strong: #d4d4d1;
  --text: #242321;
  --muted: #84837f;
  --muted-2: #aaa9a5;
  --blue: #267dd8;
  --blue-soft: #e7f0fd;
  --accent: #267dd8;
  --green: #0d9b61;
  --orange: #e75b06;
  --shadow: 0 12px 40px rgba(27, 27, 27, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); }
button, textarea, input, select { font: inherit; }
button { border: 0; cursor: pointer; color: inherit; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.windowbar { height: 44px; flex: 0 0 44px; background: #f4f4f3; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 0 13px; }
.windowbar-left, .windowbar-right { display: flex; align-items: center; gap: 9px; }
.window-title { color: #6e6d68; font-size: 13px; font-weight: 600; }.secure-indicator { color: #538065; font-size: 11px; }
.window-button { width: 28px; height: 28px; border-radius: 6px; background: transparent; font-size: 22px; color: #777670; line-height: 1; }
.window-button:hover, .icon-button:hover, .toolbar-icon:hover, .composer-icon:hover { background: #e8e8e6; }
.window-button.muted { color: #b8b7b3; font-size: 33px; font-weight: 200; }
.window-button.close { font-size: 25px; color: #32312e; }
.menu-label { color: #76746f; font-size: 15px; margin: 0 8px; }
.workspace-shell { flex: 1; min-height: 0; display: flex; }
.sidebar { width: 286px; flex: 0 0 286px; background: var(--sidebar); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: calc(100vh - 44px); transition: width .2s ease, flex-basis .2s ease, transform .2s ease; }
.sidebar.collapsed { width: 0; flex-basis: 0; overflow: hidden; border-right: 0; }
.brand-row { height: 75px; padding: 0 20px 0 26px; display: flex; align-items: center; justify-content: space-between; }
.brand { font-size: 23px; letter-spacing: 0; font-weight: 650; color: #4f4d49; white-space: nowrap; }
.brand-chevron { color: #999792; font-size: 23px; margin-left: 3px; }
.brand-actions { display: flex; gap: 5px; }
.icon-button, .toolbar-icon, .composer-icon { width: 31px; height: 31px; background: transparent; border-radius: 7px; color: #8c8b86; font-size: 23px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.notification i { width: 7px; height: 7px; background: #2d86db; border-radius: 999px; position: absolute; right: 4px; top: 3px; }
.primary-nav { padding: 2px 12px 15px; }
.nav-item, .project-link { width: 100%; border-radius: 7px; background: transparent; color: #565550; min-height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 13px; text-align: left; font-size: 16px; }
.nav-item:hover, .project-link:hover, .thread-item:hover { background: #e8e8e6; }
.nav-item.active { color: #35342f; }
.nav-icon { width: 22px; font-size: 23px; color: #77756f; text-align: center; }
.nav-add { margin-left: auto; color: #9b9a95; font-size: 23px; }
.sidebar-section { padding: 0 12px 16px; }
.section-label { padding: 0 14px 9px; color: #a09e98; font-size: 14px; }
.section-label-row { display: flex; align-items: center; justify-content: space-between; }.mini-icon-button { width: 24px; height: 24px; border-radius: 5px; background: transparent; color: #888681; font-size: 18px; }.mini-icon-button:hover { background: #e6e6e3; }
.muted-link { color: #686762; }
.folder-icon { color: #77756f; font-size: 20px; }
.projects-section { min-height: 160px; }
.project-list, .thread-list { display: flex; flex-direction: column; gap: 2px; }
.project-link, .thread-item { min-height: 40px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-link.selected { background: #e0eaf7; color: #245a94; }
.thread-item { padding: 0 13px; border-radius: 7px; background: transparent; color: #62615c; text-align: left; line-height: 1.25; }
.thread-item.selected { background: #e5e5e3; color: #302f2b; }
.threads-section { flex: 1; min-height: 80px; overflow: auto; }
.sidebar-footer { margin-top: auto; border-top: 1px solid var(--line); min-height: 67px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px 0 20px; }
.profile { display: flex; align-items: center; gap: 10px; color: #565550; font-size: 14px; }
.avatar { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #f0c419; color: #63530b; font-weight: 700; }
.download-button { width: 35px; height: 35px; border-radius: 999px; background: #3189dc; color: white; font-size: 21px; }
.main-area { min-width: 0; flex: 1; display: flex; flex-direction: column; background: var(--panel); }
.main-toolbar { height: 75px; display: flex; justify-content: space-between; align-items: center; padding: 0 33px; }
.toolbar-project { max-width: 260px; border: 0; outline: none; background: transparent; font-size: 15px; color: #77756f; cursor: pointer; }
.toolbar-actions { display: flex; gap: 7px; }
.toolbar-icon { color: #9a9893; }
.content-grid { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 330px; }
.conversation-column { min-width: 0; position: relative; display: flex; flex-direction: column; height: calc(100dvh - 119px); min-height: 0; overflow: hidden; }
.conversation { flex: 1; min-height: 0; overflow: auto; padding: 4vh clamp(24px, 7vw, 120px) 24px; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.welcome-mark { color: #bcbcb9; font-family: Georgia, serif; font-size: 62px; height: 80px; display: flex; align-items: center; gap: 2px; transform: translateY(6px); }
.welcome-mark span:last-child { margin-top: 24px; font-size: 47px; }
h1 { margin: 10px 0 12px; font-size: 48px; line-height: 1.12; letter-spacing: 0; font-weight: 500; }
.welcome-subtitle { margin: 0 0 36px; color: #999792; font-size: 16px; }
.starter-grid { width: min(940px, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.starter-card { min-height: 162px; padding: 25px 22px 20px; border: 1px solid #e2e2df; border-radius: 8px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.03); text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.starter-card:hover { transform: translateY(-2px); border-color: #c4d6ed; box-shadow: 0 8px 24px rgba(32, 80, 130, .08); }
.starter-card strong { font-size: 16px; line-height: 1.36; font-weight: 600; }
.starter-card > span:last-child { color: #999792; font-size: 13px; line-height: 1.3; }
.starter-icon { font-size: 27px; line-height: 1; }
.starter-icon.blue { color: #3b8ddd; }.starter-icon.indigo { color: #203bdf; }.starter-icon.green { color: #0da75c; }.starter-icon.orange { color: #ea5b0a; }
.composer-wrap { position: relative; flex: 0 0 auto; margin: 12px clamp(20px, 7vw, 120px) 0; border: 1px solid #dcdcd8; border-radius: 25px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); padding: 10px 15px 12px; }
.composer-context { color: #aaa8a2; display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 1px 10px 6px; }
.composer-wrap textarea { width: 100%; resize: none; outline: none; border: 0; background: transparent; color: var(--text); padding: 5px 10px; font-size: 18px; line-height: 1.4; min-height: 58px; }
.composer-wrap textarea::placeholder { color: #cbc9c4; }
.composer-bottom { display: flex; align-items: center; gap: 5px; }
.composer-icon { flex: 0 0 33px; font-size: 26px; }
.composer-icon.recording { color: #b83a32; background: #f8e4e2; }
.access-button, .model-button { height: 34px; border-radius: 8px; background: transparent; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; font-size: 14px; white-space: nowrap; }
.access-button { color: var(--orange); }.access-button:hover, .model-button:hover { background: #f1f1ef; }
.shield { display: inline-flex; justify-content: center; align-items: center; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 6px; font-size: 11px; font-weight: 800; }
.composer-spacer { flex: 1; }.model-button { color: #66645e; max-width: 230px; overflow: hidden; text-overflow: ellipsis; }.chevron { color: #9a9892; font-size: 17px; }
.send-button { width: 38px; height: 38px; border-radius: 999px; background: #a4a3a0; color: white; font-size: 24px; line-height: 1; }.send-button.ready { background: var(--accent); }.send-button:disabled { cursor: wait; opacity: .7; }
.composer-note { flex: 0 0 auto; margin: 8px clamp(20px, 7vw, 120px) 18px; text-align: center; color: #b2b0ab; font-size: 11px; }
.activity-feed { position: relative; flex: 0 0 auto; max-height: 134px; overflow: auto; margin: 0 clamp(20px, 7vw, 120px); padding: 11px 13px; background: #f8fbff; border: 1px solid #dceaf7; border-radius: 8px; color: #6e7e90; font-size: 12px; }
.activity-line { padding: 3px 0; }.activity-line strong { color: #4f647b; margin-right: 6px; }
.inspector { border-left: 1px solid var(--line); background: #fafaf9; min-width: 0; display: flex; flex-direction: column; }
.inspector-header { min-height: 58px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-weight: 600; }
.inspector-project { padding: 15px 17px 8px; color: #71706b; font-size: 13px; }
.file-tree { min-height: 160px; max-height: 46vh; overflow: auto; padding: 4px 11px 14px; }
.file-entry { width: 100%; padding: 8px 7px; display: flex; align-items: center; gap: 7px; background: transparent; border-radius: 6px; color: #615f5a; text-align: left; font-size: 13px; }.file-entry:hover { background: #e9eef5; color: #2b527b; }.file-entry.directory { color: #888681; font-weight: 600; }.file-indent { display: inline-block; width: 0; flex: 0 0 auto; }.file-entry.depth-1 .file-indent { width: 15px; }.file-entry.depth-2 .file-indent { width: 30px; }.file-entry.depth-3 .file-indent { width: 45px; }.file-entry.depth-4 .file-indent { width: 60px; }.file-entry.depth-5 .file-indent { width: 75px; }.file-entry.depth-6 .file-indent { width: 90px; }.file-entry.depth-7 .file-indent { width: 105px; }.file-entry.depth-8 .file-indent { width: 120px; }.file-entry.depth-9 .file-indent { width: 135px; }.file-entry.depth-10 .file-indent { width: 150px; }.file-entry.depth-11 .file-indent { width: 165px; }.file-entry.depth-12 .file-indent { width: 180px; }
.empty-panel { color: #aaa8a2; padding: 18px 7px; font-size: 13px; }.file-preview { min-height: 0; flex: 1; border-top: 1px solid var(--line); display: flex; flex-direction: column; }.preview-title { min-height: 40px; padding: 8px 12px 8px 17px; color: #77756f; font-size: 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; }.preview-title > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.preview-actions { display: flex; gap: 5px; }.preview-actions button { min-height: 27px; padding: 0 8px; border-radius: 5px; background: #ececea; font-size: 11px; }.preview-actions button:last-child { color: #b3443a; }.file-preview textarea { width: 100%; min-height: 150px; flex: 1; resize: none; border: 0; outline: none; margin: 0; padding: 14px 17px 22px; overflow: auto; color: #3d3b37; background: #fff; font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.terminal-panel { border-top: 1px solid var(--line); padding: 12px 13px; }.terminal-title { color: #77756f; font-size: 12px; font-weight: 600; margin-bottom: 8px; }.terminal-form { display: grid; grid-template-columns: minmax(0,1fr) 30px; gap: 6px; }.terminal-form input { min-width: 0; height: 32px; border: 1px solid #d9d9d6; border-radius: 6px; padding: 0 9px; background: #fff; color: #393834; outline: none; font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }.terminal-form input:focus { border-color: #80addb; box-shadow: 0 0 0 2px #dcebf9; }.terminal-form button { border-radius: 6px; background: #3b3a36; color: white; font-size: 21px; }.terminal-panel pre { min-height: 54px; max-height: 130px; overflow: auto; margin: 9px 0 0; padding: 9px; border-radius: 6px; background: #252522; color: #d7e1d1; white-space: pre-wrap; word-break: break-word; font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }
.message-list { display: flex; flex-direction: column; gap: 21px; max-width: 920px; margin: 0 auto; }.message { display: flex; gap: 12px; align-items: flex-start; }.message-avatar { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 13px; font-weight: 700; }.message.user .message-avatar { background: #f0c419; color: #63530b; }.message.assistant .message-avatar { background: #e6eef9; color: #2a6aaf; }.message-body { min-width: 0; flex: 1; }.message-role { color: #999792; font-size: 12px; margin-bottom: 4px; }.message-content { color: #34332f; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }.message-content code { background: #f0f0ee; padding: 2px 4px; border-radius: 4px; font: 13px ui-monospace, SFMono-Regular, Consolas, monospace; }.conversation.with-messages { padding-top: 25px; }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #f1f3f5; }
.login-panel { width: min(420px, 100%); padding: 36px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.login-mark { color: var(--accent); font: 700 48px/1 Georgia, serif; letter-spacing: 0; }
.login-panel h1 { margin: 15px 0 5px; font-size: 34px; letter-spacing: 0; }
.login-panel > p { margin: 0 0 24px; color: var(--muted); }
.login-panel label, .settings-section label { display: flex; flex-direction: column; gap: 7px; color: #65635d; font-size: 13px; }
.login-panel label + label { margin-top: 15px; }
.login-panel input, .settings-section input, .settings-section select { width: 100%; height: 40px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; padding: 0 11px; outline: none; color: var(--text); }
.login-panel input:focus, .settings-section input:focus, .settings-section select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.login-error { min-height: 22px; margin: 13px 0 0; color: #bf3d32; font-size: 13px; }
.primary-button, .secondary-button { min-height: 38px; padding: 0 15px; border-radius: 7px; font-size: 13px; font-weight: 650; }
.primary-button { background: var(--accent); color: #fff; }.primary-button:hover { filter: brightness(.96); }.primary-button.compact { min-height: 32px; padding: 0 11px; }
.secondary-button { background: #f2f2f0; border: 1px solid var(--line-strong); }.secondary-button:hover { background: #e9e9e6; }
.login-panel .primary-button { width: 100%; margin-top: 3px; }
.settings-dialog { width: min(760px, calc(100vw - 24px)); max-height: min(850px, calc(100vh - 24px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: #fbfbfa; box-shadow: 0 24px 80px rgba(0,0,0,.2); color: var(--text); }
.compact-dialog { width: min(620px, calc(100vw - 24px)); }
.settings-dialog::backdrop { background: rgba(35,35,32,.35); backdrop-filter: blur(2px); }
.settings-shell { display: flex; flex-direction: column; max-height: min(850px, calc(100vh - 24px)); }
.settings-header, .settings-footer { display: flex; align-items: center; gap: 15px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.settings-header { justify-content: space-between; }.settings-header strong { display: block; font-size: 18px; }.settings-header span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.settings-footer { border-top: 1px solid var(--line); border-bottom: 0; }.settings-footer .settings-status { flex: 1; }
.settings-body { overflow: auto; padding: 4px 20px 16px; }.settings-section { padding: 18px 0; border-bottom: 1px solid var(--line); }.settings-section:last-child { border-bottom: 0; }.settings-section h2 { margin: 0 0 14px; font-size: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.form-grid .wide { grid-column: 1 / -1; }
.toggle-row { flex-direction: row !important; align-items: center; gap: 9px !important; min-height: 40px; }.toggle-row input { width: 18px; height: 18px; }
.provider-key-state, .settings-status { color: var(--muted); font-size: 12px; }.provider-key-state { margin-top: -4px; }
.runtime-line { display: flex; justify-content: space-between; padding: 6px 0; color: var(--muted); font-size: 13px; }.runtime-line strong { color: var(--text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.runtime-controls { display: flex; gap: 8px; align-items: center; margin-top: 9px; }.runtime-controls select { flex: 1; min-height: 38px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; padding: 0 9px; }
.runtime-update { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 7px; background: #edf5fd; color: #4e6680; font-size: 12px; }
.danger-text-button { background: transparent; color: #b3443a; padding: 5px 0; font-size: 13px; }.danger-text-button:hover { text-decoration: underline; }
.diagnostics-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; padding: 16px 0; }.diagnostic-item { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }.diagnostic-item span, .diagnostic-item strong { display: block; }.diagnostic-item span { color: var(--muted); font-size: 11px; }.diagnostic-item strong { margin-top: 5px; overflow-wrap: anywhere; font-size: 13px; }
.compact-button { min-height: 30px; padding: 0 10px; }
.extensions-dialog { width: min(1180px, calc(100vw - 24px)); height: min(820px, calc(100vh - 24px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: #fbfbfa; box-shadow: 0 24px 80px rgba(0,0,0,.2); color: var(--text); }
.extensions-dialog::backdrop { background: rgba(35,35,32,.35); backdrop-filter: blur(2px); }
.extensions-shell { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.extension-tabs { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.extension-tab { min-width: 92px; height: 44px; background: transparent; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 650; }
.extension-tab.active { border-bottom-color: var(--accent); color: var(--text); }
.extension-view { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px minmax(0,1fr); }
.extension-list-panel { min-height: 0; display: flex; flex-direction: column; padding: 16px; border-right: 1px solid var(--line); background: #f5f5f3; }
.extension-panel-title { display: flex; align-items: center; justify-content: space-between; min-height: 38px; font-size: 14px; }
.extension-list { flex: 1; min-height: 90px; overflow: auto; margin: 8px -5px 12px; }
.extension-item { width: 100%; display: flex; align-items: flex-start; gap: 9px; padding: 10px; border-radius: 7px; background: transparent; text-align: left; }
.extension-item:hover, .extension-item.selected { background: #e8edf3; }.extension-item.selected { box-shadow: inset 3px 0 var(--accent); }
.extension-item-dot { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 5px; border-radius: 999px; background: #a7aaa5; }.extension-item-dot.enabled { background: #159264; }
.extension-item-copy { min-width: 0; flex: 1; }.extension-item-copy strong, .extension-item-copy span { display: block; }.extension-item-copy strong { font-size: 13px; }.extension-item-copy span { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; }
.install-form { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }.install-form strong { font-size: 13px; }.install-form input { width: 100%; height: 35px; border: 1px solid var(--line-strong); border-radius: 7px; padding: 0 9px; background: #fff; font-size: 12px; }
.extension-editor { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 18px 20px; }
.editor-toolbar { min-height: 48px; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }.editor-toolbar strong, .editor-toolbar span { display: block; }.editor-toolbar span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.editor-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.skill-content { width: 100%; min-height: 0; flex: 1; resize: none; border: 1px solid var(--line-strong); border-radius: 7px; outline: none; padding: 14px; background: #fff; color: #302f2b; font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }.skill-content:focus { border-color: var(--accent); }
.editor-footer { min-height: 54px; display: flex; align-items: center; gap: 12px; padding-top: 13px; }.editor-footer .settings-status { flex: 1; }
.mcp-form { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: auto; }.mcp-form label { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #65635d; font-size: 13px; }.mcp-form input, .mcp-form select { width: 100%; height: 40px; min-width: 0; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; padding: 0 11px; outline: none; color: var(--text); }.mcp-form input:focus, .mcp-form select:focus, .mcp-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }.mcp-form textarea { width: 100%; min-width: 0; resize: vertical; border: 1px solid var(--line-strong); border-radius: 7px; outline: none; padding: 9px; font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }.mcp-form .form-grid { padding: 10px 0 16px; }
.mcp-tools { margin-top: 4px; padding: 12px; border: 1px solid #dce8f3; border-radius: 7px; background: #f5f9fd; }.mcp-tool { padding: 7px 0; border-bottom: 1px solid #dfebf5; }.mcp-tool:last-child { border-bottom: 0; }.mcp-tool strong { font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }.mcp-tool span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.popover { position: fixed; z-index: 20; left: clamp(24px, calc(286px + 7vw), 430px); bottom: 180px; width: 245px; background: white; border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); padding: 7px; }.popover button { width: 100%; background: transparent; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px; border-radius: 7px; }.popover button:hover { background: #f0f3f7; }.popover strong { font-size: 13px; }.popover span { color: #999792; font-size: 12px; }.toast { position: fixed; z-index: 30; left: 50%; bottom: 28px; transform: translate(-50%, 15px); opacity: 0; pointer-events: none; transition: .2s ease; padding: 10px 14px; background: #262522; color: white; border-radius: 8px; font-size: 13px; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1600px) { .starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; } }
@media (max-width: 1050px) { .content-grid { grid-template-columns: minmax(0, 1fr); }.inspector { position: fixed; z-index: 12; top: 119px; right: 0; bottom: 0; width: min(330px, 90vw); box-shadow: -12px 0 32px rgba(0,0,0,.08); } }
@media (max-width: 720px) { .windowbar { height: 40px; flex-basis: 40px; padding: 0 7px; }.menu-label { display: none; }.windowbar-left { gap: 3px; }.sidebar { position: fixed; z-index: 15; top: 40px; bottom: 0; left: 0; box-shadow: 12px 0 32px rgba(0,0,0,.12); }.sidebar.collapsed { transform: translateX(-100%); width: 286px; }.main-toolbar { height: 62px; padding: 0 16px; }.conversation-column { min-height: calc(100vh - 102px); }.conversation { padding: 5vh 16px 205px; }.welcome-mark { font-size: 48px; height: 66px; }.welcome-subtitle { font-size: 14px; margin-bottom: 22px; }.starter-grid { grid-template-columns: 1fr; gap: 9px; }.starter-card { min-height: 92px; padding: 14px 16px; display: grid; grid-template-columns: 31px 1fr; gap: 4px 11px; }.starter-card .starter-icon { grid-row: span 2; }.starter-card > span:last-child { grid-column: 2; }.composer-wrap { position: fixed; z-index: 10; left: 12px; right: 12px; bottom: 12px; padding: 8px 10px 10px; border-radius: 20px; }.composer-wrap textarea { font-size: 16px; min-height: 60px; }.access-button { padding-left: 5px; font-size: 12px; }.model-button { max-width: 137px; font-size: 12px; padding: 0 5px; }.composer-note { display: none; }.activity-feed { position: fixed; z-index: 9; left: 12px; right: 12px; bottom: 174px; }.inspector { top: 102px; }.toolbar-actions .toolbar-icon { width: 28px; } h1 { font-size: 32px; letter-spacing: 0; } }

@media (max-width: 720px) {
  .conversation-column { height: calc(100dvh - 102px); min-height: 0; }
  .conversation { padding: 5vh 16px 18px; }
  .composer-wrap { position: relative; z-index: auto; left: auto; right: auto; bottom: auto; margin: 10px 12px 0; }
  .activity-feed { position: relative; z-index: auto; left: auto; right: auto; bottom: auto; margin: 0 12px; }
  .login-panel { padding: 28px 22px; }
  .settings-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .settings-shell { max-height: calc(100vh - 16px); }
  .settings-body, .settings-header, .settings-footer { padding-left: 16px; padding-right: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .runtime-controls { flex-wrap: wrap; }
  .runtime-controls select { flex-basis: 100%; }
  .runtime-update { align-items: flex-start; flex-direction: column; }
  .popover { left: 12px; right: 12px; bottom: 160px; width: auto; }
  .diagnostics-grid { grid-template-columns: 1fr; }
  .extensions-dialog { width: calc(100vw - 12px); height: calc(100vh - 12px); }
  .extension-view { display: flex; flex-direction: column; overflow: auto; }
  .extension-list-panel { flex: 0 0 auto; min-height: 440px; max-height: none; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .extension-editor { flex: 0 0 auto; min-height: 520px; padding: 16px; }
  .editor-toolbar { flex-direction: column; }
  .editor-actions { justify-content: flex-start; }
}