:root {
  --gai-ink: #17213a;
  --gai-muted: #68758a;
  --gai-subtle: #8c97aa;
  --gai-line: #dfe5ef;
  --gai-line-strong: #cdd5e3;
  --gai-paper: #ffffff;
  --gai-panel: rgba(255, 255, 255, .94);
  --gai-soft: #f4f7fb;
  --gai-soft-strong: #edf1f7;
  --gai-purple: #e30613;
  --gai-purple-rgb: 227, 6, 19;
  --gai-purple-dark: #b9000b;
  --gai-teal: #177d76;
  --gai-teal-rgb: 23, 125, 118;
  --gai-warn: #a85d00;
  --gai-shadow: 0 16px 44px rgba(23, 33, 58, .08);
  --gai-shadow-soft: 0 7px 20px rgba(23, 33, 58, .07);
  color-scheme: light;
}

html[data-theme="dark"] {
  --gai-ink: #edf3fa;
  --gai-muted: #a9b5c5;
  --gai-subtle: #7f8da1;
  --gai-line: #344153;
  --gai-line-strong: #445269;
  --gai-paper: #141d29;
  --gai-panel: rgba(20, 29, 41, .96);
  --gai-soft: #0b111a;
  --gai-soft-strong: #1a2533;
  --gai-purple: #ff4654;
  --gai-purple-rgb: 255, 70, 84;
  --gai-purple-dark: #ff6773;
  --gai-teal: #59d9cf;
  --gai-teal-rgb: 89, 217, 207;
  --gai-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  --gai-shadow-soft: 0 8px 24px rgba(0, 0, 0, .24);
  color-scheme: dark;
}

html[data-theme="ai"] {
  --gai-ink: #17213a;
  --gai-muted: #69758a;
  --gai-subtle: #8c94a7;
  --gai-line: #dedff0;
  --gai-line-strong: #cbc9e8;
  --gai-paper: #ffffff;
  --gai-panel: rgba(255, 255, 255, .95);
  --gai-soft: #f6f5fc;
  --gai-soft-strong: #efedfa;
  --gai-purple: #6557e8;
  --gai-purple-rgb: 101, 87, 232;
  --gai-purple-dark: #5043cc;
  --gai-teal: #008e9d;
  --gai-teal-rgb: 0, 142, 157;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--gai-soft); }
body.gai-page {
  min-height: 100vh;
  margin: 0;
  color: var(--gai-ink);
  background:
    radial-gradient(circle at 48% -18%, rgba(var(--gai-purple-rgb), .13) 0, transparent 38rem),
    radial-gradient(circle at 96% 18%, rgba(var(--gai-teal-rgb), .07) 0, transparent 30rem),
    var(--gai-soft);
  font: 15px/1.45 Inter, Aptos, "Segoe UI", system-ui, sans-serif;
}
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a { min-block-size: 44px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid rgba(var(--gai-purple-rgb), .55); outline-offset: 3px; }

.gai-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.gai-skip { position: fixed; z-index: 50; top: 8px; left: 12px; padding: 10px 14px; border-radius: 10px; color: #fff; background: var(--gai-ink); transform: translateY(-140%); }
.gai-skip:focus { transform: none; }

.gai-topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 10px 22px;
  border-bottom: 1px solid rgba(var(--gai-purple-rgb), .11);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 1px 0 rgba(23, 33, 58, .02);
  backdrop-filter: blur(20px) saturate(150%);
}
.gai-brand { min-height: 50px; display: flex; gap: 12px; align-items: center; color: var(--gai-ink); text-decoration: none; }
.gai-brand > img { width: 116px; height: 47px; display: block; object-fit: cover; object-position: center; border: 1px solid rgba(255, 255, 255, .72); border-radius: 12px; background: #fff; box-shadow: var(--gai-shadow-soft); }
.gai-brand > span { display: grid; line-height: 1.18; }
.gai-brand strong { font-size: 13px; letter-spacing: -.01em; }
.gai-brand small { margin-top: 2px; color: var(--gai-muted); font-size: 10px; }
.gai-title span, .gai-panel-head > div > span, .gai-chat-title > div > span { color: var(--gai-muted); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.gai-title h1 { margin: 1px 0; overflow: hidden; font-size: clamp(17px, 2vw, 22px); letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.gai-actions { display: flex; align-items: center; gap: 10px; }
.gai-status, .gai-private { min-height: 30px; display: inline-flex; gap: 7px; align-items: center; padding: 5px 11px; border: 1px solid rgba(var(--gai-teal-rgb), .25); border-radius: 999px; color: var(--gai-teal); background: rgba(var(--gai-teal-rgb), .08); font-size: 11px; font-weight: 780; white-space: nowrap; }
.gai-status > span[aria-hidden] { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(var(--gai-teal-rgb), .12); }
.gai-private svg { width: 14px; height: 14px; }
.gai-signin { min-height: 42px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; padding: 0 14px; border-radius: 12px; color: #fff; background: var(--gai-ink); font-size: 12px; font-weight: 760; text-decoration: none; box-shadow: 0 7px 18px rgba(23, 33, 58, .15); transition: transform .18s ease, box-shadow .18s ease; }
.gai-signin:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(23, 33, 58, .2); }
.gai-signin svg { width: 16px; height: 16px; }
.gai-question-shortcut { border: 1px solid rgba(255, 255, 255, .25); background: linear-gradient(135deg, #e63846, #b71123); box-shadow: 0 8px 20px rgba(216, 35, 54, .24); }
.gai-question-shortcut:hover { box-shadow: 0 11px 26px rgba(216, 35, 54, .3); }

.gai-notice { min-height: 46px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 22px; border-bottom: 1px solid var(--gai-line); color: #754900; background: #fff9ef; }
.gai-notice[data-kind="ready"] { color: #126c65; background: #effbf8; }
.gai-notice[data-kind="signin"] { color: #4f43ae; background: #f2f0ff; }
.gai-notice span:last-child { color: var(--gai-muted); font-size: 12px; }
.gai-pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent); }

.gai-notebook-bar { min-height: 82px; display: grid; grid-template-columns: 48px minmax(240px, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 22px; border-bottom: 1px solid var(--gai-line); background: color-mix(in srgb, var(--gai-paper) 92%, transparent); box-shadow: 0 8px 28px rgba(23, 33, 58, .035); }
.gai-notebook-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #e30613, #b9000b); font-size: 23px; box-shadow: 0 9px 22px rgba(var(--gai-purple-rgb), .2); }
.gai-notebook-mark[data-accent="amber"] { background: linear-gradient(145deg, #d98600, #a85d00); }
.gai-notebook-mark[data-accent="emerald"] { background: linear-gradient(145deg, #168b72, #0b6553); }
.gai-notebook-mark[data-accent="blue"] { background: linear-gradient(145deg, #2878ca, #18549a); }
.gai-notebook-mark[data-accent="violet"] { background: linear-gradient(145deg, #745bd8, #4f3bad); }
.gai-notebook-mark[data-accent="slate"] { background: linear-gradient(145deg, #64748b, #374151); }
.gai-notebook-identity { min-width: 0; display: grid; grid-template-columns: auto minmax(180px, 330px); gap: 2px 9px; align-items: center; }
.gai-notebook-identity label { color: var(--gai-muted); font-size: 9px; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.gai-notebook-identity select { min-height: 38px; padding: 0 34px 0 10px; border: 1px solid var(--gai-line); border-radius: 11px; outline: 0; color: var(--gai-ink); background: var(--gai-soft); font-weight: 760; }
.gai-notebook-identity p { grid-column: 1 / -1; overflow: hidden; margin: 1px 0 0; color: var(--gai-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.gai-notebook-state { min-height: 28px; display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid rgba(var(--gai-teal-rgb), .22); border-radius: 999px; color: var(--gai-teal); background: rgba(var(--gai-teal-rgb), .07); font-size: 9px; font-weight: 820; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.gai-notebook-actions { display: flex; gap: 6px; align-items: center; }
.gai-notebook-actions button { min-height: 40px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--gai-line); border-radius: 11px; color: var(--gai-ink); background: var(--gai-paper); font-size: 10px; font-weight: 790; }
.gai-notebook-actions button:hover { border-color: rgba(var(--gai-purple-rgb), .35); color: var(--gai-purple); background: rgba(var(--gai-purple-rgb), .05); }
.gai-notebook-actions .gai-notebook-save { border-color: rgba(var(--gai-purple-rgb), .26); color: #fff; background: var(--gai-purple); }
.gai-notebook-actions .gai-notebook-save:not(:disabled):hover { color: #fff; background: var(--gai-purple-dark); }

.gai-workbench { min-height: calc(100vh - 204px); display: grid; grid-template-columns: minmax(260px, 294px) minmax(420px, 1fr) minmax(300px, 348px); gap: 14px; padding: 14px; overflow-x: clip; }
.gai-panel { min-width: 0; max-width: 100%; height: calc(100vh - 232px); min-height: 610px; overflow: hidden; border: 1px solid rgba(var(--gai-section-rgb, var(--gai-purple-rgb)), .2); border-radius: 20px; background: var(--gai-panel); box-shadow: var(--gai-shadow); backdrop-filter: blur(15px); }
.gai-sources { --gai-section: #2563c7; --gai-section-rgb: 37, 99, 199; --gai-section-step: "1"; }
.gai-chat { --gai-section: #d82336; --gai-section-rgb: 216, 35, 54; --gai-section-step: "2"; }
.gai-studio { --gai-section: #11815e; --gai-section-rgb: 17, 129, 94; --gai-section-step: "3"; }
.gai-panel-head { min-height: 72px; display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid rgba(var(--gai-section-rgb, var(--gai-purple-rgb)), .16); background: linear-gradient(100deg, rgba(var(--gai-section-rgb, var(--gai-purple-rgb)), .12), rgba(var(--gai-section-rgb, var(--gai-purple-rgb)), .035) 68%, transparent); box-shadow: inset 0 4px 0 var(--gai-section, var(--gai-purple)); }
.gai-sources > .gai-panel-head > div > span, .gai-chat > .gai-panel-head .gai-chat-title > div > span, .gai-studio > .gai-panel-head > div > span { display: inline-flex; gap: 6px; align-items: center; color: var(--gai-section, var(--gai-purple)); }
.gai-sources > .gai-panel-head > div > span::before, .gai-chat > .gai-panel-head .gai-chat-title > div > span::before, .gai-studio > .gai-panel-head > div > span::before { width: 19px; height: 19px; display: inline-grid; place-items: center; border-radius: 6px; color: #fff; background: var(--gai-section, var(--gai-purple)); content: var(--gai-section-step); font-size: 9px; letter-spacing: 0; box-shadow: 0 4px 10px rgba(var(--gai-section-rgb, var(--gai-purple-rgb)), .2); }
.gai-panel-head h2 { margin: 1px 0; font-size: 17px; letter-spacing: -.02em; }
.gai-panel-head p { margin: 2px 0 0; color: var(--gai-muted); font-size: 11px; }
.gai-heading-count { display: inline-grid; min-width: 24px; min-height: 24px; place-items: center; margin-left: 4px; padding: 0 7px; border-radius: 999px; color: var(--gai-section, var(--gai-purple)); background: rgba(var(--gai-section-rgb, var(--gai-purple-rgb)), .11); font-size: 10px; vertical-align: 2px; }
.gai-icon { width: 44px; height: 44px; display: grid; flex: 0 0 auto; place-items: center; border: 0; border-radius: 12px; color: var(--gai-muted); background: transparent; transition: color .16s ease, background .16s ease; }
.gai-icon:hover { color: var(--gai-purple); background: rgba(var(--gai-purple-rgb), .09); }
.gai-panel > .gai-panel-head .gai-icon { color: var(--gai-section, var(--gai-purple)); background: rgba(var(--gai-section-rgb, var(--gai-purple-rgb)), .08); }
.gai-panel > .gai-panel-head .gai-icon:hover { background: rgba(var(--gai-section-rgb, var(--gai-purple-rgb)), .16); }

.gai-sources { display: flex; flex-direction: column; }
.gai-source-controls { padding: 12px 12px 8px; border-bottom: 1px solid var(--gai-line); }
.gai-search { min-height: 44px; display: flex; gap: 9px; align-items: center; padding: 0 11px; border: 1px solid var(--gai-line); border-radius: 12px; color: var(--gai-subtle); background: var(--gai-soft); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.gai-search:focus-within { border-color: rgba(var(--gai-purple-rgb), .6); background: var(--gai-paper); box-shadow: 0 0 0 3px rgba(var(--gai-purple-rgb), .1); }
.gai-search svg { width: 17px; height: 17px; flex: 0 0 auto; }
.gai-search input { width: 100%; min-height: 40px; border: 0; outline: 0; color: var(--gai-ink); background: transparent; }
.gai-search input::placeholder { color: var(--gai-subtle); }
.gai-sources .gai-search:focus-within { border-color: rgba(var(--gai-section-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--gai-section-rgb), .11); }
.gai-source-toolbar { min-height: 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px; align-items: center; padding-top: 7px; }
.gai-source-toolbar > span { color: var(--gai-muted); font-size: 10px; font-weight: 760; }
.gai-source-toolbar button, .gai-context-bar button { min-height: 34px; display: inline-flex; gap: 4px; align-items: center; padding: 0 7px; border: 0; border-radius: 9px; color: var(--gai-purple); background: transparent; font-size: 10px; font-weight: 780; }
.gai-source-toolbar button:hover, .gai-context-bar button:hover { background: rgba(var(--gai-purple-rgb), .08); }
.gai-sources .gai-source-toolbar button { color: var(--gai-section); }
.gai-sources .gai-source-toolbar button:hover { background: rgba(var(--gai-section-rgb), .09); }
.gai-source-toolbar button svg { width: 14px; height: 14px; }
.gai-source-list { flex: 1 1 auto; overflow: auto; padding: 8px; scrollbar-color: rgba(var(--gai-section-rgb, var(--gai-purple-rgb)), .42) transparent; scrollbar-width: thin; overscroll-behavior: contain; }
.gai-source { position: relative; width: 100%; min-height: 70px; display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) 20px; gap: 9px; align-items: center; margin-bottom: 4px; padding: 9px 9px 9px 10px; border: 1px solid transparent; border-radius: 14px; color: var(--gai-ink); background: transparent; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }
.gai-source:hover { border-color: var(--gai-line); background: var(--gai-soft); transform: translateY(-1px); }
.gai-source.is-selected { border-color: rgba(var(--gai-purple-rgb), .3); background: linear-gradient(100deg, rgba(var(--gai-purple-rgb), .1), rgba(var(--gai-purple-rgb), .045)); box-shadow: inset 3px 0 0 var(--gai-purple); }
.gai-sources .gai-source.is-selected { border-color: rgba(var(--gai-section-rgb), .34); background: linear-gradient(100deg, rgba(var(--gai-section-rgb), .12), rgba(var(--gai-section-rgb), .045)); box-shadow: inset 3px 0 0 var(--gai-section); }
.gai-source.is-disabled { cursor: not-allowed; opacity: .58; }
.gai-source input[type="checkbox"] { width: 20px; height: 20px; display: grid; appearance: none; place-content: center; margin: 0; border: 1.5px solid var(--gai-line-strong); border-radius: 6px; background: var(--gai-paper); cursor: pointer; }
.gai-source input[type="checkbox"]::before { width: 10px; height: 6px; content: ""; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); transition: transform .12s ease; }
.gai-source input[type="checkbox"]:checked { border-color: var(--gai-purple); background: var(--gai-purple); }
.gai-sources .gai-source input[type="checkbox"]:checked { border-color: var(--gai-section); background: var(--gai-section); }
.gai-source input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
.gai-source input[type="checkbox"]:disabled { cursor: not-allowed; }
.gai-source-glyph { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--gai-purple); background: rgba(var(--gai-purple-rgb), .1); font-size: 13px; font-weight: 850; letter-spacing: -.03em; }
.gai-source-glyph[data-kind="image"] { color: #b4521a; background: #fff0e5; }
.gai-source-glyph[data-kind="audio"] { color: #047f75; background: #e6f8f5; }
.gai-source-glyph[data-kind="template"] { color: #5360c7; background: #eceeff; }
.gai-source-glyph[data-kind="text"] { color: #276bb0; background: #eaf4ff; }
.gai-source-copy { min-width: 0; display: grid; gap: 3px; }
.gai-source-title-row { min-width: 0; display: flex; gap: 6px; align-items: center; }
.gai-source-title-row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.gai-source-copy small { overflow: hidden; color: var(--gai-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.gai-source-state { max-width: 84px; overflow: hidden; padding: 2px 6px; border: 1px solid var(--gai-line); border-radius: 999px; color: var(--gai-muted); background: var(--gai-paper); font-size: 8px; font-weight: 820; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.gai-source-check { color: var(--gai-purple); opacity: 0; transform: scale(.7); transition: opacity .16s ease, transform .16s ease; }
.gai-sources .gai-source-check { color: var(--gai-section); }
.gai-source-check::before { content: "✓"; font-size: 16px; font-weight: 850; }
.gai-source.is-selected .gai-source-check { opacity: 1; transform: scale(1); }
.gai-source-foot { min-height: 64px; display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 12px 14px; border-top: 1px solid var(--gai-line); color: var(--gai-muted); background: rgba(var(--gai-purple-rgb), .025); font-size: 10px; }
.gai-source-foot svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--gai-teal); }
.gai-empty { min-height: 100px; display: flex; flex-direction: column; gap: 5px; justify-content: center; padding: 20px; color: var(--gai-muted); text-align: center; }
.gai-empty strong { color: var(--gai-ink); }

.gai-chat { display: grid; grid-template-rows: auto auto minmax(250px, 1fr) auto; }
.gai-chat-head { align-items: flex-start; }
.gai-chat-title { min-width: 0; display: flex; gap: 10px; align-items: center; }
.gai-chat-title > div { min-width: 0; }
.gai-assistant-mark { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, var(--gai-purple), var(--gai-teal)); box-shadow: 0 8px 20px rgba(var(--gai-purple-rgb), .25); }
.gai-assistant-mark svg { width: 20px; height: 20px; }
.gai-conversation-toolbar { min-height: 56px; display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--gai-line); border-bottom: 1px solid var(--gai-line); background: rgba(var(--gai-purple-rgb), .025); }
.gai-conversation-toolbar > label { min-width: 0; display: grid; grid-template-columns: auto minmax(140px, 270px); gap: 8px; align-items: center; color: var(--gai-muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.gai-conversation-toolbar select { min-height: 36px; min-width: 0; padding: 0 9px; border: 1px solid var(--gai-line); border-radius: 10px; color: var(--gai-ink); background: var(--gai-paper); font: inherit; letter-spacing: 0; text-transform: none; }
.gai-conversation-toolbar > div { display: flex; gap: 5px; align-items: center; }
.gai-conversation-toolbar button, .gai-conversation-toolbar a { min-height: 36px; display: inline-flex; gap: 5px; align-items: center; justify-content: center; padding: 0 9px; border: 1px solid var(--gai-line); border-radius: 10px; color: var(--gai-ink); background: var(--gai-paper); font-size: 9px; font-weight: 780; text-decoration: none; }
.gai-conversation-toolbar button:disabled, .gai-conversation-toolbar a[aria-disabled="true"] { opacity: .48; cursor: not-allowed; }
.gai-conversation-toolbar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gai-conversation-toolbar b { min-width: 17px; display: inline-grid; place-items: center; margin-left: 2px; padding: 1px 4px; border-radius: 999px; color: var(--gai-purple); background: rgba(var(--gai-purple-rgb), .1); font-size: 8px; }
.gai-conversation { min-height: 0; overflow: auto; padding: clamp(18px, 3vw, 36px); scrollbar-color: rgba(var(--gai-section-rgb, var(--gai-purple-rgb)), .42) transparent; scrollbar-width: thin; overscroll-behavior: contain; }
.gai-message-list { max-width: 820px; display: grid; gap: 13px; margin: 0 auto; }
.gai-message-list[hidden] { display: none; }
.gai-message { max-width: min(88%, 720px); display: grid; gap: 7px; padding: 13px 15px; border: 1px solid var(--gai-line); border-radius: 18px 18px 18px 6px; background: var(--gai-paper); box-shadow: 0 5px 16px rgba(23, 33, 58, .04); }
.gai-message[data-role="USER"] { justify-self: end; border-color: rgba(var(--gai-purple-rgb), .18); border-radius: 18px 18px 6px 18px; background: linear-gradient(145deg, rgba(var(--gai-purple-rgb), .095), rgba(var(--gai-purple-rgb), .045)); }
.gai-message[data-status="FAILED"] { border-color: rgba(185, 40, 53, .25); }
.gai-message-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; color: var(--gai-muted); font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.gai-message-head span:last-child { font-weight: 700; }
.gai-message-body { margin: 0; overflow-wrap: anywhere; color: var(--gai-ink); font: inherit; font-size: 11px; line-height: 1.58; white-space: pre-wrap; }
.gai-message-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.gai-message-meta span { max-width: 210px; overflow: hidden; padding: 3px 7px; border-radius: 999px; color: var(--gai-muted); background: var(--gai-soft); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.gai-welcome { position: relative; max-width: 800px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: center; margin: auto; overflow: hidden; padding: 24px; border: 1px solid rgba(var(--gai-purple-rgb), .15); border-radius: 22px; background: radial-gradient(circle at 92% 0, rgba(var(--gai-teal-rgb), .1), transparent 13rem), linear-gradient(135deg, var(--gai-paper), rgba(var(--gai-purple-rgb), .035)); box-shadow: var(--gai-shadow-soft); }
.gai-welcome::after { position: absolute; top: -45px; right: -38px; width: 140px; height: 140px; content: ""; border: 1px solid rgba(var(--gai-purple-rgb), .1); border-radius: 50%; }
.gai-welcome-visual { position: relative; width: 104px; height: 104px; display: grid; place-items: center; border: 1px solid rgba(var(--gai-purple-rgb), .15); border-radius: 28px; background: linear-gradient(145deg, rgba(var(--gai-purple-rgb), .11), rgba(var(--gai-teal-rgb), .1)); transform: rotate(-3deg); }
.gai-welcome-visual::before, .gai-welcome-visual::after { position: absolute; content: ""; border: 1px solid rgba(var(--gai-purple-rgb), .17); border-radius: 50%; }
.gai-welcome-visual::before { width: 72px; height: 72px; }
.gai-welcome-visual::after { width: 88px; height: 40px; transform: rotate(35deg); }
.gai-welcome-visual > span { z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(145deg, var(--gai-purple), var(--gai-teal)); box-shadow: 0 10px 25px rgba(var(--gai-purple-rgb), .28); }
.gai-welcome-visual svg { width: 25px; height: 25px; }
.gai-kicker { color: var(--gai-purple); font-size: 10px; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.gai-welcome h3 { margin: 4px 0 6px; font-size: clamp(18px, 2vw, 22px); letter-spacing: -.025em; }
.gai-welcome p { max-width: 620px; margin: 0; color: var(--gai-muted); font-size: 13px; }
.gai-trust-row { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; }
.gai-trust-row span { display: inline-flex; gap: 6px; align-items: center; color: var(--gai-muted); font-size: 9px; font-weight: 740; }
.gai-trust-row i { width: 6px; height: 6px; border-radius: 50%; background: var(--gai-teal); box-shadow: 0 0 0 3px rgba(var(--gai-teal-rgb), .1); }
.gai-suggestion-grid { max-width: 800px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px auto 0; }
.gai-suggestion-grid button { min-height: 66px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--gai-line); border-radius: 15px; color: var(--gai-ink); background: var(--gai-paper); text-align: left; box-shadow: 0 4px 12px rgba(23, 33, 58, .035); transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.gai-suggestion-grid button:hover { border-color: rgba(var(--gai-purple-rgb), .42); transform: translateY(-2px); box-shadow: var(--gai-shadow-soft); }
.gai-suggestion-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--gai-purple); background: rgba(var(--gai-purple-rgb), .09); }
.gai-suggestion-icon svg { width: 18px; height: 18px; }
.gai-suggestion-grid button > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.gai-suggestion-grid strong { font-size: 11px; }
.gai-suggestion-grid small { overflow: hidden; color: var(--gai-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.gai-arrow { width: 15px; height: 15px; color: var(--gai-subtle); }

.gai-composer { min-height: 0; padding: 12px 15px 15px; border-top: 1px solid var(--gai-line); background: var(--gai-paper); box-shadow: 0 -8px 28px rgba(23, 33, 58, .035); scrollbar-color: rgba(var(--gai-section-rgb, var(--gai-purple-rgb)), .42) transparent; scrollbar-width: thin; overscroll-behavior: contain; }
.gai-context-bar { min-height: 44px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; margin-bottom: 8px; padding: 7px 8px; border: 1px solid var(--gai-line); border-radius: 12px; background: var(--gai-soft); }
.gai-context-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--gai-purple); background: rgba(var(--gai-purple-rgb), .09); }
.gai-context-icon svg { width: 16px; height: 16px; }
.gai-context-bar > div { min-width: 0; display: grid; }
.gai-context-bar strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.gai-context-bar span:not(.gai-context-icon) { overflow: hidden; color: var(--gai-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.gai-context-chips { display: flex; gap: 5px; overflow-x: auto; margin: -2px 0 8px; padding: 2px 1px; scrollbar-width: none; }
.gai-context-chips:empty { display: none; }
.gai-context-chip { min-height: 26px; display: inline-flex; flex: 0 0 auto; gap: 5px; align-items: center; max-width: 190px; padding: 3px 8px; border: 1px solid rgba(var(--gai-purple-rgb), .2); border-radius: 999px; color: var(--gai-purple-dark); background: rgba(var(--gai-purple-rgb), .07); font-size: 9px; font-weight: 750; }
.gai-context-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gai-context-chip::before { width: 5px; height: 5px; flex: 0 0 auto; content: ""; border-radius: 50%; background: currentColor; }
.gai-composer-options, .gai-media-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.gai-media-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gai-composer label:not(.gai-sr) { display: grid; gap: 4px; color: var(--gai-muted); font-size: 10px; font-weight: 720; }
.gai-composer select, .gai-composer input:not([type="checkbox"]) { width: 100%; min-height: 38px; padding: 0 9px; border: 1px solid var(--gai-line); border-radius: 10px; outline: 0; color: var(--gai-ink); background: var(--gai-soft); }
.gai-field-help { margin: 0 0 8px; color: var(--gai-muted); font-size: 10px; }
.gai-prompt-shell { position: relative; }
.gai-prompt-spark { position: absolute; z-index: 1; top: 11px; left: 11px; color: var(--gai-purple); pointer-events: none; }
.gai-prompt-spark svg { width: 18px; height: 18px; }
.gai-composer textarea { width: 100%; min-height: 78px; display: block; padding: 11px 13px 11px 40px; border: 1px solid var(--gai-line-strong); border-radius: 13px; outline: 0; color: var(--gai-ink); background: var(--gai-paper); resize: vertical; }
.gai-composer textarea:focus, .gai-composer select:focus, .gai-composer input:focus { border-color: var(--gai-purple); box-shadow: 0 0 0 3px rgba(var(--gai-purple-rgb), .1); }
.gai-transcript { display: flex !important; grid-template-columns: auto 1fr; gap: 8px; align-items: flex-start; margin-top: 9px; padding: 9px; border: 1px solid #d9c977; border-radius: 10px; color: #654e00 !important; background: #fff9df; }
.gai-transcript[hidden] { display: none !important; }
.gai-transcript input { margin-top: 3px; accent-color: var(--gai-purple); }
.gai-feedback { margin: 9px 0 0; padding: 9px 11px; border-radius: 10px; color: var(--gai-muted); background: var(--gai-soft); font-size: 11px; }
.gai-feedback[data-kind="error"] { color: #a52525; background: #fff0f0; }
.gai-feedback[data-kind="success"] { color: #126c65; background: #eefbf8; }
.gai-feedback[data-kind="pending"] { color: #4f43ae; background: #f2f0ff; }
.gai-composer-row { min-height: 48px; display: flex; gap: 10px; align-items: center; justify-content: space-between; padding-top: 8px; color: var(--gai-muted); font-size: 10px; }
.gai-composer-row > span { display: inline-flex; gap: 6px; align-items: center; }
.gai-composer-row > span svg { width: 14px; height: 14px; color: var(--gai-teal); }
.gai-composer-row > div { display: flex; gap: 8px; }
.gai-voice, .gai-generate { min-height: 42px; display: inline-flex; gap: 7px; align-items: center; justify-content: center; padding: 0 13px; border: 0; border-radius: 11px; font-size: 11px; font-weight: 780; }
.gai-voice { color: var(--gai-muted); background: var(--gai-soft); }
.gai-generate { color: #fff; background: linear-gradient(135deg, var(--gai-purple), var(--gai-purple-dark)); box-shadow: 0 8px 20px rgba(var(--gai-purple-rgb), .22); }
.gai-voice svg, .gai-generate svg { width: 16px; height: 16px; }

.gai-studio { display: flex; flex-direction: column; overflow-y: auto; scrollbar-color: rgba(var(--gai-section-rgb, var(--gai-teal-rgb)), .42) transparent; scrollbar-width: thin; overscroll-behavior: contain; }
.gai-studio > .gai-panel-head { position: sticky; z-index: 3; top: 0; flex: 0 0 auto; background-color: var(--gai-panel); backdrop-filter: blur(18px); }
.gai-source-list::-webkit-scrollbar, .gai-conversation::-webkit-scrollbar, .gai-composer::-webkit-scrollbar, .gai-studio::-webkit-scrollbar { width: 8px; height: 8px; }
.gai-source-list::-webkit-scrollbar-thumb, .gai-conversation::-webkit-scrollbar-thumb, .gai-composer::-webkit-scrollbar-thumb, .gai-studio::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(var(--gai-section-rgb, var(--gai-purple-rgb)), .42); background-clip: padding-box; }
.gai-metric-row { display: grid; grid-template-columns: 1fr 1fr; margin: 13px; overflow: hidden; border: 1px solid var(--gai-line); border-radius: 14px; background: var(--gai-soft); }
.gai-metric-row > div { display: flex; flex-direction: column; padding: 11px; text-align: center; }
.gai-metric-row > div + div { border-left: 1px solid var(--gai-line); }
.gai-metric-row strong { font-size: 21px; letter-spacing: -.03em; }
.gai-metric-row span { color: var(--gai-muted); font-size: 9px; font-weight: 720; text-transform: uppercase; }
.gai-toolbox { display: grid; gap: 8px; padding: 0 13px; }
.gai-toolbox .gai-tool-card { --gai-tool-accent: #d82336; --gai-tool-rgb: 216, 35, 54; position: relative; min-height: 76px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; gap: 11px; align-items: center; overflow: hidden; padding: 11px 11px 11px 14px; border: 1px solid var(--gai-line); border-radius: 14px; color: var(--gai-ink); background: linear-gradient(105deg, rgba(var(--gai-tool-rgb), .065), var(--gai-paper) 42%); text-align: left; text-decoration: none; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.gai-toolbox .gai-tool-card::before { position: absolute; inset: 10px auto 10px 0; width: 4px; border-radius: 0 999px 999px 0; background: var(--gai-tool-accent); content: ""; }
.gai-toolbox .gai-tool-card:hover { border-color: rgba(var(--gai-tool-rgb), .4); transform: translateY(-1px); box-shadow: var(--gai-shadow-soft); }
.gai-toolbox .gai-tool-question { --gai-tool-accent: #d82336; --gai-tool-rgb: 216, 35, 54; }
.gai-toolbox .gai-tool-planner { --gai-tool-accent: #2563c7; --gai-tool-rgb: 37, 99, 199; }
.gai-toolbox .gai-tool-material { --gai-tool-accent: #c77812; --gai-tool-rgb: 199, 120, 18; }
.gai-toolbox .gai-tool-notebook { --gai-tool-accent: #6656c9; --gai-tool-rgb: 102, 86, 201; }
.gai-tool-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--gai-tool-accent); background: rgba(var(--gai-tool-rgb), .11); }
.gai-tool-icon svg { width: 19px; height: 19px; }
.gai-tool-copy { min-width: 0; display: grid; gap: 4px; }
.gai-toolbox strong { font-size: 12px; line-height: 1.25; }
.gai-toolbox small { color: var(--gai-muted); font-size: 9px; line-height: 1.35; }
.gai-tool-card:hover .gai-arrow { color: var(--gai-tool-accent); transform: translateX(2px); }
.gai-workflow, .gai-artifacts, .gai-artifact-versions, .gai-jobs { padding: 14px; border-top: 1px solid var(--gai-line); }
.gai-workflow { margin-top: 13px; }
.gai-workflow h3, .gai-artifacts h3, .gai-artifact-versions h3, .gai-jobs h3 { margin: 0 0 10px; font-size: 12px; }
.gai-workflow ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.gai-workflow li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; min-height: 52px; color: var(--gai-muted); font-size: 9px; }
.gai-workflow li:not(:last-child)::after { position: absolute; top: 27px; bottom: 3px; left: 13px; width: 1px; content: ""; background: var(--gai-line-strong); }
.gai-workflow li::before { z-index: 1; grid-row: span 2; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(var(--gai-purple-rgb), .18); border-radius: 9px; color: var(--gai-purple); background: var(--gai-paper); content: counter(step); counter-increment: step; font-size: 10px; font-weight: 850; }
.gai-workflow strong { color: var(--gai-ink); font-size: 10px; }
.gai-jobs { margin-top: auto; }
.gai-job { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 9px 0; border-top: 1px solid var(--gai-line); font-size: 10px; }
.gai-job strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gai-job span { padding: 2px 6px; border-radius: 999px; color: var(--gai-teal); background: rgba(var(--gai-teal-rgb), .08); font-size: 8px; font-weight: 780; }
.gai-artifact { display: grid; gap: 7px; padding: 9px 0; border-top: 1px solid var(--gai-line); }
.gai-artifact > div:first-child { display: flex; gap: 8px; justify-content: space-between; font-size: 10px; }
.gai-artifact span { color: var(--gai-muted); }
.gai-use-source { min-height: 34px; padding: 0 10px; border: 1px solid rgba(var(--gai-purple-rgb), .25); border-radius: 9px; color: var(--gai-purple); background: rgba(var(--gai-purple-rgb), .06); font-size: 9px; font-weight: 800; }
.gai-version-receipt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; padding: 8px 0; border-top: 1px solid var(--gai-line); }
.gai-version-receipt strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.gai-version-receipt span { color: var(--gai-muted); font-size: 8px; }
.gai-version-receipt code { grid-row: 1 / 3; grid-column: 2; align-self: center; max-width: 68px; overflow: hidden; color: var(--gai-purple); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.gai-review-actions { display: flex; gap: 6px; }
.gai-review-actions button { min-height: 34px; padding: 0 9px; border: 1px solid var(--gai-line); border-radius: 9px; color: var(--gai-ink); background: var(--gai-soft); font-size: 9px; font-weight: 750; }

.gai-memory { margin-top: 13px; padding: 13px; border-top: 1px solid var(--gai-line); }
.gai-memory h3 { margin: 0 0 5px; font-size: 13px; }
.gai-memory-copy, .gai-memory-feedback { margin: 0 0 9px; color: var(--gai-muted); font-size: 11px; }
.gai-memory-toggle { display: flex; gap: 7px; align-items: flex-start; margin: 7px 0; color: var(--gai-ink); font-size: 11px; font-weight: 700; }
.gai-memory-toggle input { margin-top: 2px; accent-color: var(--gai-purple); }
.gai-memory-budget { display: grid; gap: 3px; margin: 10px 0; padding: 9px; border: 1px solid var(--gai-line); border-radius: 10px; color: var(--gai-muted); background: var(--gai-soft); font-size: 10px; }
.gai-memory-budget strong { color: var(--gai-ink); font-size: 11px; }
.gai-memory-form { display: grid; gap: 7px; }
.gai-memory-form input, .gai-memory-form textarea { width: 100%; padding: 8px 9px; border: 1px solid var(--gai-line); border-radius: 9px; color: var(--gai-ink); background: var(--gai-soft); resize: vertical; }
.gai-memory-form button, .gai-memory-actions button { min-height: 34px; padding: 0 9px; border: 1px solid var(--gai-line); border-radius: 9px; color: var(--gai-ink); background: var(--gai-soft); font-size: 10px; font-weight: 750; }
.gai-memory-list { display: grid; gap: 7px; margin-top: 9px; }
.gai-memory-item { padding: 9px; border: 1px solid var(--gai-line); border-radius: 10px; background: var(--gai-soft); }
.gai-memory-item p { margin: 4px 0; overflow-wrap: anywhere; color: var(--gai-muted); font-size: 10px; white-space: pre-wrap; }
.gai-memory-actions { display: flex; gap: 6px; }

.gai-dialog { width: min(520px, calc(100% - 28px)); padding: 0; border: 1px solid var(--gai-line); border-radius: 20px; color: var(--gai-ink); background: var(--gai-paper); box-shadow: 0 24px 80px rgba(23, 33, 58, .32); }
.gai-dialog::backdrop { background: rgba(23, 33, 58, .5); backdrop-filter: blur(4px); }
.gai-dialog > div { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--gai-line); }
.gai-dialog h2 { margin: 0; font-size: 17px; }
.gai-dialog p, .gai-dialog ul { margin: 16px; }
.gai-dialog li { margin: 8px 0; color: var(--gai-muted); }
.gai-notebook-dialog { width: min(650px, calc(100% - 28px)); }
.gai-notebook-dialog form { display: block; }
.gai-dialog-head { min-height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--gai-line); }
.gai-dialog-head > div { display: grid; gap: 2px; }
.gai-dialog-head > div > span { color: var(--gai-purple); font-size: 9px; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.gai-notebook-dialog-copy { margin: 14px 16px 4px !important; color: var(--gai-muted); font-size: 11px; }
.gai-notebook-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; padding: 14px 16px; }
.gai-notebook-fields label { display: grid; gap: 5px; color: var(--gai-muted); font-size: 10px; font-weight: 760; }
.gai-notebook-fields .gai-field-wide { grid-column: 1 / -1; }
.gai-notebook-fields input:not([type="checkbox"]), .gai-notebook-fields select, .gai-notebook-fields textarea { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid var(--gai-line); border-radius: 10px; outline: 0; color: var(--gai-ink); background: var(--gai-soft); resize: vertical; }
.gai-notebook-fields input:focus, .gai-notebook-fields select:focus, .gai-notebook-fields textarea:focus { border-color: var(--gai-purple); box-shadow: 0 0 0 3px rgba(var(--gai-purple-rgb), .1); }
.gai-notebook-fields .gai-check-field { min-height: 38px; display: flex; flex-direction: row; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--gai-line); border-radius: 10px; color: var(--gai-ink); background: var(--gai-soft); }
.gai-check-field input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--gai-purple); }
.gai-notebook-dialog > form > .gai-feedback { margin: 0 16px 12px; }
.gai-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 13px 16px; border-top: 1px solid var(--gai-line); }
.gai-dialog-actions button { min-height: 42px; padding: 0 15px; border: 1px solid var(--gai-line); border-radius: 11px; color: var(--gai-ink); background: var(--gai-soft); font-size: 11px; font-weight: 780; }
.gai-dialog-actions .gai-generate { border: 0; color: #fff; background: linear-gradient(135deg, var(--gai-purple), var(--gai-purple-dark)); }
.gai-conversation-dialog { inline-size: min(560px, calc(100vw - 28px)); }
.gai-notes-dialog { inline-size: min(820px, calc(100vw - 28px)); }
.gai-notes-dialog > .gai-dialog-head { display: flex; margin: 0; }
.gai-notes-layout { display: grid !important; grid-template-columns: 220px minmax(0, 1fr); align-items: stretch !important; padding: 0 !important; border: 0 !important; }
.gai-notes-layout > aside { display: grid; grid-template-rows: auto minmax(180px, 1fr); gap: 9px; padding: 13px; border-right: 1px solid var(--gai-line); background: var(--gai-soft); }
.gai-notes-layout > aside > button { min-height: 40px; border: 1px solid rgba(var(--gai-purple-rgb), .2); border-radius: 11px; color: var(--gai-purple); background: var(--gai-paper); font-size: 10px; font-weight: 800; }
.gai-notes-layout [data-note-list] { display: grid; align-content: start; gap: 6px; overflow: auto; }
.gai-note-list-item { display: grid; gap: 3px; min-height: 48px; padding: 8px 9px; border: 1px solid var(--gai-line); border-radius: 10px; color: var(--gai-ink); background: var(--gai-paper); text-align: left; }
.gai-note-list-item.is-active { border-color: var(--gai-purple); box-shadow: 0 0 0 2px rgba(var(--gai-purple-rgb), .08); }
.gai-note-list-item strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.gai-note-list-item span { color: var(--gai-muted); font-size: 8px; }
.gai-notes-layout > form { display: grid; gap: 11px; padding: 14px; }
.gai-notes-layout > form > label:not(.gai-check-field) { display: grid; gap: 5px; color: var(--gai-muted); font-size: 10px; font-weight: 760; }
.gai-notes-layout input:not([type="checkbox"]), .gai-notes-layout textarea { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid var(--gai-line); border-radius: 10px; outline: 0; color: var(--gai-ink); background: var(--gai-soft); resize: vertical; }
.gai-notes-layout textarea:focus, .gai-notes-layout input:focus { border-color: var(--gai-purple); box-shadow: 0 0 0 3px rgba(var(--gai-purple-rgb), .1); }
.gai-notes-layout .gai-check-field { display: flex; gap: 8px; align-items: center; color: var(--gai-ink); font-size: 10px; }
.gai-notes-layout .gai-field-help, .gai-notes-layout .gai-feedback { margin: 0; }
.gai-notes-layout .gai-dialog-actions { margin: auto -14px -14px; }

html[data-theme="dark"] body.gai-page { background: radial-gradient(circle at 48% -18%, rgba(var(--gai-purple-rgb), .11) 0, transparent 38rem), radial-gradient(circle at 96% 18%, rgba(var(--gai-teal-rgb), .06) 0, transparent 30rem), var(--gai-soft); }
html[data-theme="dark"] .gai-topbar { background: rgba(11, 17, 26, .84); }
html[data-theme="dark"] .gai-notice { color: #ffd48c; background: #291e10; }
html[data-theme="dark"] .gai-notice[data-kind="ready"] { color: #7ce2d8; background: #102a28; }
html[data-theme="dark"] .gai-notice[data-kind="signin"], html[data-theme="dark"] .gai-feedback[data-kind="pending"] { color: #c9baff; background: #251b37; }
html[data-theme="dark"] .gai-source-glyph[data-kind="image"] { color: #ffad7a; background: #3b241a; }
html[data-theme="dark"] .gai-source-glyph[data-kind="audio"] { color: #7ce2d8; background: #16302f; }
html[data-theme="dark"] .gai-source-glyph[data-kind="template"] { color: #bfc4ff; background: #272b4d; }
html[data-theme="dark"] .gai-source-glyph[data-kind="text"] { color: #86c8ff; background: #172c40; }
html[data-theme="dark"] .gai-transcript { color: #ffe49a !important; background: #302710; }
html[data-theme="dark"] .gai-feedback[data-kind="error"] { color: #ff9ca6; background: #361a20; }
html[data-theme="dark"] .gai-feedback[data-kind="success"] { color: #7ce2d8; background: #102a28; }
html[data-theme="ai"] body.gai-page { background: radial-gradient(circle at 48% -18%, rgba(var(--gai-purple-rgb), .15) 0, transparent 38rem), radial-gradient(circle at 96% 18%, rgba(var(--gai-teal-rgb), .08) 0, transparent 30rem), var(--gai-soft); }

/* Desktop app shell: the document stays fixed while each purposeful work area scrolls. */
@media (min-width: 1181px) and (min-height: 680px) {
  html { height: 100%; overflow: hidden; }
  body.gai-page { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .gai-workbench { height: calc(100vh - 204px); height: calc(100dvh - 204px); min-height: 0; overflow: hidden; }
  .gai-panel { height: 100%; min-height: 0; }
  .gai-chat { grid-template-rows: auto auto minmax(48px, 1fr) minmax(0, auto); }
  .gai-chat .gai-composer { max-height: min(40dvh, 380px); overflow-y: auto; }
}

@media (max-width: 1180px) {
  .gai-notebook-bar { grid-template-columns: 48px minmax(220px, 1fr) auto; }
  .gai-notebook-state { display: none; }
  .gai-workbench { grid-template-columns: minmax(250px, 290px) minmax(0, 1fr); }
  .gai-studio { grid-column: 1 / -1; height: auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
  .gai-studio > .gai-panel-head { position: static; }
  .gai-studio > .gai-panel-head, .gai-studio > .gai-memory { grid-column: 1 / -1; }
  .gai-studio > .gai-metric-row { align-self: start; }
  .gai-studio > .gai-toolbox { align-self: start; padding-top: 13px; }
  .gai-studio > .gai-workflow { margin-top: 0; border-left: 1px solid var(--gai-line); }
  .gai-studio > .gai-artifacts, .gai-studio > .gai-artifact-versions, .gai-studio > .gai-jobs { margin-top: 0; }
  .gai-topbar { grid-template-columns: 250px minmax(0, 1fr) auto; }
  .gai-composer-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .gai-topbar { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 12px; }
  .gai-brand > img { width: 102px; height: 42px; }
  .gai-title, .gai-status { display: none; }
  .gai-notice { grid-template-columns: auto minmax(0, 1fr); padding: 8px 13px; }
  .gai-notice span:last-child { grid-column: 2; }
  .gai-notebook-bar { grid-template-columns: 42px minmax(0, 1fr); gap: 9px; padding: 9px 12px; }
  .gai-notebook-mark { width: 42px; height: 42px; border-radius: 13px; }
  .gai-notebook-actions { grid-column: 1 / -1; }
  .gai-notebook-actions button { flex: 1; }
  .gai-notebook-identity { grid-template-columns: auto minmax(0, 1fr); }
  .gai-workbench { display: flex; flex-direction: column; padding: 8px; }
  .gai-panel { width: 100%; height: auto; min-height: 0; }
  .gai-sources { max-height: none; order: 1; }
  .gai-chat { min-height: 720px; order: 2; }
  .gai-studio { order: 3; display: block; }
  .gai-sources, .gai-chat, .gai-studio { scroll-margin-top: 12px; }
  .gai-source-list { min-height: 220px; max-height: 340px; }
  .gai-suggestion-grid, .gai-toolbox, .gai-composer-options, .gai-media-options { grid-template-columns: 1fr; }
  .gai-welcome { grid-template-columns: 76px minmax(0, 1fr); gap: 15px; padding: 18px; }
  .gai-welcome-visual { width: 72px; height: 72px; border-radius: 20px; }
  .gai-welcome-visual::before { width: 52px; height: 52px; }
  .gai-welcome-visual::after { width: 62px; height: 30px; }
  .gai-welcome-visual > span { width: 38px; height: 38px; border-radius: 12px; }
  .gai-trust-row { display: none; }
  .gai-conversation-toolbar { align-items: stretch; flex-direction: column; }
  .gai-conversation-toolbar > label { grid-template-columns: auto minmax(0, 1fr); }
  .gai-conversation-toolbar > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gai-conversation-toolbar button, .gai-conversation-toolbar a { padding: 0 6px; }
  .gai-message { max-width: 94%; }
  .gai-notes-layout { grid-template-columns: 1fr; }
  .gai-notes-layout > aside { grid-template-rows: auto auto; border-right: 0; border-bottom: 1px solid var(--gai-line); }
  .gai-notes-layout [data-note-list] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 126px; }
  .gai-composer-row { align-items: flex-start; flex-direction: column; }
  .gai-composer-row > div { width: 100%; }
  .gai-composer-row button { flex: 1; }
  .gai-studio > .gai-workflow { border-left: 0; }
}

@media (max-width: 500px) {
  .gai-brand > span, .gai-private { display: none; }
  .gai-signin span { display: none; }
  .gai-signin { width: 44px; padding: 0; }
  .gai-panel-head { padding: 12px; }
  .gai-conversation { padding: 14px; }
  .gai-welcome { display: block; }
  .gai-welcome-visual { width: 58px; height: 58px; float: left; margin: 0 13px 7px 0; }
  .gai-welcome-visual::before, .gai-welcome-visual::after { display: none; }
  .gai-welcome h3 { font-size: 17px; }
  .gai-suggestion-grid { grid-template-columns: 1fr; }
  .gai-context-bar { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .gai-source-toolbar { grid-template-columns: 1fr auto; }
  .gai-source-toolbar button[data-source-clear] { display: none; }
  .gai-notebook-fields { grid-template-columns: 1fr; }
  .gai-notebook-fields .gai-field-wide { grid-column: auto; }
  .gai-notebook-actions button span { display: none; }
  .gai-conversation-toolbar button span, .gai-conversation-toolbar a span { display: none; }
  .gai-conversation-toolbar b { display: none; }
  .gai-notes-layout [data-note-list] { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .gai-panel, .gai-source, .gai-welcome, .gai-suggestion-grid button, .gai-toolbox .gai-tool-card { border: 1px solid CanvasText; } .gai-source.is-selected { border-width: 3px; } }

/* Governed notebook uploads */
.gai-upload { border-block: 1px solid var(--gai-line); padding: 14px 12px; background: linear-gradient(145deg, rgba(var(--gai-purple-rgb), .035), transparent); display: grid; gap: 10px; }
.gai-upload[hidden] { display: none; }
.gai-upload-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gai-upload-head > div { display: grid; gap: 2px; }
.gai-upload-head span { font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--gai-muted); }
.gai-upload-head h3 { margin: 0; font-size: 13px; color: var(--gai-ink); }
.gai-upload-drop { position: relative; display: flex; align-items: center; gap: 10px; min-height: 74px; border: 1.5px dashed var(--gai-line-strong); border-radius: 16px; padding: 12px; background: rgba(var(--gai-purple-rgb), .035); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.gai-upload-drop:hover, .gai-upload-drop:focus-within, .gai-upload-drop.is-dragging { border-color: var(--gai-purple); background: rgba(var(--gai-purple-rgb), .075); transform: translateY(-1px); }
.gai-upload-drop input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.gai-upload-glyph { display: grid; place-items: center; flex: 0 0 38px; block-size: 38px; border-radius: 12px; color: var(--gai-purple); background: var(--gai-paper); box-shadow: var(--gai-shadow-soft); }
.gai-upload-glyph svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gai-upload-drop > span:last-child { display: grid; gap: 3px; min-inline-size: 0; }
.gai-upload-drop strong { font-size: 11px; color: var(--gai-ink); }
.gai-upload-drop small { font-size: 9px; line-height: 1.35; color: var(--gai-muted); }
.gai-upload-selection { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--gai-paper); border: 1px solid var(--gai-line); font-size: 9px; color: var(--gai-muted); }
.gai-upload-selection[hidden] { display: none; }
.gai-upload-selection button { min-block-size: 34px; border: 0; border-radius: 10px; padding: 0 10px; background: var(--gai-purple); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.gai-upload-selection button:disabled { opacity: .52; cursor: wait; }
.gai-upload-feedback { margin: 0; font-size: 9px; }
.gai-upload-history { display: grid; gap: 6px; max-block-size: 132px; overflow: auto; }
.gai-upload-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 7px 8px; border-radius: 10px; background: var(--gai-paper); border: 1px solid var(--gai-line); }
.gai-upload-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--gai-ink); }
.gai-upload-item span { font-size: 8px; color: var(--gai-muted); }
.gai-upload-item a { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--gai-purple); font-size: 9px; font-weight: 800; text-decoration: none; }
.gai-upload-state { display: inline-flex; align-items: center; gap: 4px; }
.gai-upload-state::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: #ca8a04; }
.gai-upload-state[data-state="READY"]::before { background: var(--gai-teal); }
.gai-policy-dialog { inline-size: min(620px, calc(100vw - 28px)); }
.gai-policy-dialog form { display: grid; gap: 16px; }
.gai-sources .gai-upload { background: linear-gradient(145deg, rgba(var(--gai-section-rgb), .09), rgba(var(--gai-section-rgb), .025)); }
.gai-sources .gai-upload-drop { background: rgba(var(--gai-section-rgb), .055); }
.gai-sources .gai-upload-drop:hover, .gai-sources .gai-upload-drop:focus-within, .gai-sources .gai-upload-drop.is-dragging { border-color: var(--gai-section); background: rgba(var(--gai-section-rgb), .11); }
.gai-sources .gai-upload-glyph, .gai-sources .gai-upload-item a { color: var(--gai-section); }
.gai-sources .gai-upload-selection button { background: var(--gai-section); }

@media (max-width: 760px) {
  .gai-upload { padding: 12px 10px; }
  .gai-upload-selection { align-items: stretch; flex-direction: column; }
  .gai-upload-selection button { inline-size: 100%; }
}