:root {
    --ink: #102a43;
    --muted: #627d98;
    --line: #d9e2ec;
    --surface: #ffffff;
    --canvas: #f5f8fb;
    --navy: #071a2f;
    --navy-soft: #102f4f;
    --blue: #0e7490;
    --blue-bright: #0891b2;
    --aqua: #2dd4bf;
    --sand: #f3d9a6;
    --danger: #c2415b;
    --success: #15806d;
    --shadow: 0 18px 50px rgba(21, 54, 79, .09);
    --radius: 18px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--canvas);
    font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 760; letter-spacing: -.025em; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(145deg, var(--aqua), var(--blue-bright)); color: #06233c; box-shadow: inset 0 1px rgba(255,255,255,.55); font-weight: 900; }
.brand-copy small { display: block; margin-top: -2px; color: #8eb2c7; font-size: 10px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; transform: translateY(-150%); padding: 10px 14px; border-radius: 10px; background: white; }
.skip-link:focus { transform: none; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 268px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 17px; display: flex; flex-direction: column; color: #d9e8f0; background: linear-gradient(175deg, #06182c 0%, #0b2943 70%, #0e465b 120%); overflow-y: auto; z-index: 40; }
.sidebar .brand { padding: 2px 10px 24px; color: white; }
.sidebar-label { margin: 13px 11px 8px; color: #7da4ba; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.nav-list { display: grid; gap: 4px; }
.nav-link { min-height: 44px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; border-radius: 12px; color: #bad2df; font-size: 14px; font-weight: 600; transition: .18s ease; }
.nav-link:hover { color: white; background: rgba(255,255,255,.07); }
.nav-link.active { color: white; background: rgba(45, 212, 191, .14); box-shadow: inset 3px 0 var(--aqua); }
.nav-icon { width: 22px; height: 22px; display: grid; place-items: center; color: #77d8d0; font-size: 13px; border: 1px solid rgba(126,231,218,.23); border-radius: 7px; }
.sidebar-footer { margin-top: auto; padding-top: 22px; }
.credit-mini { padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.055); }
.credit-mini-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.credit-mini strong { color: white; }
.progress { height: 6px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.progress > span { display: block; height: 100%; width: var(--progress, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--aqua), #67e8f9); }

.app-main { min-width: 0; }
.topbar { height: 74px; padding: 0 clamp(20px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #e5ebf1; background: rgba(255,255,255,.86); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 30; }
.topbar-title { min-width: 0; }
.topbar-title strong { display: block; font-size: 15px; }
.topbar-title span { display: block; color: var(--muted); font-size: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.credit-pill { padding: 8px 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #b8e6df; border-radius: 999px; background: #edfcf8; color: #0b6f61; font-size: 12px; font-weight: 750; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #cfe0ea; border-radius: 12px; background: #eff7fa; color: var(--navy-soft); font-weight: 800; }
.menu-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 11px; background: white; cursor: pointer; }
.content { width: min(1440px, 100%); padding: 38px clamp(20px, 4vw, 48px) 60px; margin: 0 auto; }

.eyebrow { margin: 0 0 9px; color: var(--blue); font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.page-heading { margin-bottom: 30px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.page-heading h1 { margin: 0; color: #0b2942; font-size: clamp(27px, 3vw, 39px); line-height: 1.08; letter-spacing: -.04em; }
.page-heading p:not(.eyebrow) { max-width: 680px; margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.button { min-height: 42px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--blue), var(--blue-bright)); color: white; font-weight: 750; font-size: 13px; cursor: pointer; box-shadow: 0 8px 22px rgba(8,145,178,.16); }
.button:hover { filter: brightness(1.04); transform: translateY(-1px); }
.button.secondary { border: 1px solid var(--line); background: white; color: var(--ink); box-shadow: none; }
.button.danger { background: var(--danger); }
.button.small { min-height: 36px; padding: 8px 12px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric-card { min-height: 142px; padding: 20px; border: 1px solid #e0e8ef; border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 25px rgba(21,54,79,.04); }
.metric-card.accent { color: white; background: linear-gradient(140deg, #0b3752, #087b8e); border: 0; }
.metric-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.metric-card.accent .metric-label { color: #b5e7e4; }
.metric-value { margin: 16px 0 5px; font-size: 29px; line-height: 1; font-weight: 800; letter-spacing: -.035em; }
.metric-detail { color: var(--muted); font-size: 12px; }
.metric-card.accent .metric-detail { color: #d5f3f0; }

.dashboard-grid { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: 18px; }
.stack { display: grid; align-content: start; gap: 18px; }
.card { border: 1px solid #e0e8ef; border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 25px rgba(21,54,79,.04); overflow: hidden; }
.card-head { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #edf1f5; }
.card-head h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.text-link { color: var(--blue); font-size: 12px; font-weight: 750; }
.item-list { display: grid; }
.list-item { padding: 15px 20px; display: flex; align-items: center; gap: 13px; border-top: 1px solid #edf1f5; }
.list-item:first-child { border-top: 0; }
.item-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: #eef8f8; color: #08726f; font-weight: 800; }
.item-copy { min-width: 0; flex: 1; }
.item-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.item-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.empty { padding: 34px 24px; text-align: center; }
.empty-icon { width: 52px; height: 52px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 16px; background: #edf8f8; color: var(--blue); font-size: 20px; }
.empty h3 { margin: 0 0 7px; font-size: 14px; }
.empty p { max-width: 390px; margin: 0 auto 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.quick-grid { padding: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick-link { padding: 14px; min-height: 86px; border: 1px solid #e0e8ef; border-radius: 14px; background: #fbfdfe; }
.quick-link:hover { border-color: #9edbd6; background: #f2fbfa; }
.quick-link strong { display: block; font-size: 12px; }
.quick-link span { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }

.placeholder-stage { min-height: 480px; display: grid; place-items: center; border: 1px solid #dbe6ed; border-radius: 24px; background: radial-gradient(circle at 50% 0, rgba(45,212,191,.12), transparent 35%), white; box-shadow: var(--shadow); }
.placeholder-inner { max-width: 580px; padding: 52px 28px; text-align: center; }
.phase-badge { display: inline-flex; padding: 7px 11px; border-radius: 999px; background: #edf9f7; color: #087167; font-size: 11px; font-weight: 800; }
.placeholder-inner h2 { margin: 20px 0 10px; font-size: 25px; letter-spacing: -.03em; }
.placeholder-inner p { margin: 0 0 22px; color: var(--muted); line-height: 1.7; }

.admin-shell .sidebar { background: linear-gradient(175deg, #111827 0%, #17243a 100%); }
.admin-shell .brand-mark { background: linear-gradient(145deg, var(--sand), #f0b86d); color: #422d13; }
.admin-shell .nav-link.active { background: rgba(243,217,166,.12); box-shadow: inset 3px 0 var(--sand); }
.admin-shell .nav-icon { color: var(--sand); border-color: rgba(243,217,166,.2); }
.admin-banner { margin-bottom: 22px; padding: 14px 17px; display: flex; align-items: center; gap: 11px; border: 1px solid #f0dfbd; border-radius: 14px; background: #fffaf0; color: #6d5027; font-size: 12px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22a47b; box-shadow: 0 0 0 4px #dff7ef; }

.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.form-card { padding: 24px; }
.form-card h2 { margin: 0; font-size: 17px; }
.form-card > p { margin: 8px 0 22px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.field { margin-top: 17px; }
.field:first-of-type { margin-top: 0; }
.field label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 750; }
.input { width: 100%; min-height: 45px; padding: 10px 12px; border: 1px solid #cdd9e3; border-radius: 11px; background: white; color: var(--ink); outline: none; }
.input:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(8,145,178,.1); }
textarea.input { min-height: 110px; resize: vertical; }
.field-error { margin: 6px 0 0; color: var(--danger); font-size: 11px; }
.form-actions { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.success-note { color: var(--success); font-size: 12px; }
.alert { margin-bottom: 18px; padding: 13px 15px; border: 1px solid #bee6dc; border-radius: 12px; background: #ecfaf6; color: #126b5d; font-size: 12px; }
.alert.error { border-color: #f1c4ce; background: #fff2f5; color: #a8324c; }
.data-card { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 800px; }
.data-table th { padding: 12px 18px; color: var(--muted); background: #f8fafc; font-size: 10px; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.data-table td { padding: 15px 18px; border-top: 1px solid #e8eef3; font-size: 12px; vertical-align: middle; }
.data-table strong { display: block; font-size: 13px; }
.data-table small { display: block; margin-top: 3px; color: var(--muted); }
.table-actions { display: flex; justify-content: flex-end; gap: 7px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; background: #edf2f6; color: #526b7e; font-size: 10px; font-weight: 800; }
.badge.success { background: #e6f8f2; color: #0d7561; }
.badge.warning { background: #fff5dd; color: #8a641d; }
.badge.danger { background: #ffebef; color: #ad3851; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.checkbox-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.check-tile { padding: 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #dce6ed; border-radius: 11px; background: #fbfdfe; color: var(--muted); font-size: 12px; }
.check-tile input { accent-color: var(--blue); }
.secret-note { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #f3f7fa; color: var(--muted); font-size: 11px; line-height: 1.5; }
.section-divider { margin: 25px 0 5px; padding-top: 22px; border-top: 1px solid #e6edf2; }
.section-divider h3 { margin: 0; font-size: 14px; }
.section-divider p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.pagination { padding: 15px 18px; display: flex; justify-content: space-between; border-top: 1px solid #e8eef3; color: var(--muted); font-size: 11px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.chat-content { width: 100%; max-width: none; height: calc(100vh - 74px); padding: 0; overflow: hidden; }
.chat-shell { height: 100%; display: grid; grid-template-columns: 278px minmax(0, 1fr); background: white; }
.conversation-panel { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid #dde7ed; background: #f7fafc; }
.conversation-panel-head { padding: 22px 18px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.conversation-panel-head .eyebrow { margin-bottom: 3px; font-size: 9px; }
.conversation-panel-head h1 { margin: 0; font-size: 20px; letter-spacing: -.035em; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #cbdbe4; border-radius: 11px; background: white; color: var(--blue); font-size: 20px; cursor: pointer; }
.conversation-search { margin: 0 14px 13px; position: relative; }
.conversation-search input { width: 100%; height: 39px; padding: 8px 38px 8px 11px; border: 1px solid #d6e2e9; border-radius: 10px; background: white; color: var(--ink); outline: none; font-size: 12px; }
.conversation-search input:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(8,145,178,.08); }
.conversation-search button { position: absolute; right: 5px; top: 4px; width: 31px; height: 31px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.conversation-list { min-height: 0; padding: 0 9px 18px; overflow-y: auto; }
.conversation-row { position: relative; margin-top: 3px; display: flex; align-items: center; border-radius: 11px; color: #375269; }
.conversation-row:hover, .conversation-row.active { background: #e9f4f5; color: #0b4f5e; }
.conversation-row > a { min-width: 0; flex: 1; padding: 11px 8px 11px 11px; }
.conversation-row strong, .conversation-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row strong { font-size: 12px; }
.conversation-row span { margin-top: 4px; color: #78909f; font-size: 9px; }
.conversation-menu { position: relative; margin-right: 5px; }
.conversation-menu summary { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); cursor: pointer; font-size: 10px; list-style: none; }
.conversation-menu summary::-webkit-details-marker { display: none; }
.conversation-menu[open] summary { background: white; }
.conversation-popover { position: absolute; z-index: 12; top: 32px; right: 0; width: 220px; padding: 12px; border: 1px solid #dce6ec; border-radius: 12px; background: white; box-shadow: 0 16px 45px rgba(9,37,58,.16); }
.conversation-popover label { display: block; margin-bottom: 5px; font-size: 10px; font-weight: 750; }
.conversation-popover input { width: 100%; height: 35px; padding: 7px 9px; border: 1px solid #cedce5; border-radius: 8px; font-size: 11px; }
.conversation-popover button { width: 100%; margin-top: 7px; padding: 7px; border: 0; border-radius: 8px; background: #eaf7f6; color: #08726f; cursor: pointer; font-size: 10px; font-weight: 750; }
.conversation-popover .danger-text { background: #fff0f3; color: var(--danger); }
.conversation-empty { padding: 40px 20px; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.55; }
.conversation-empty span { width: 38px; height: 38px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 12px; background: #e7f4f4; color: var(--blue); }

.chat-workspace { min-width: 0; position: relative; display: flex; flex-direction: column; background: #fff; overflow: hidden; }
.conversation-mobile-toggle { display: none; }
.chat-alert { position: absolute; z-index: 8; top: 14px; left: 50%; width: min(620px, calc(100% - 36px)); padding: 11px 14px; transform: translateX(-50%); border: 1px solid; border-radius: 11px; box-shadow: 0 10px 30px rgba(10,36,56,.09); font-size: 11px; }
.chat-alert.success { border-color: #b8e4da; background: #effbf8; color: #0e705f; }
.chat-alert.error { border-color: #efc0c9; background: #fff3f5; color: #a9324b; }
.chat-welcome { width: min(760px, calc(100% - 44px)); margin: auto; padding: 50px 0; text-align: center; }
.welcome-orb { width: 64px; height: 64px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 21px; background: linear-gradient(145deg, #0b3652, #0895a7); color: #c7fff8; box-shadow: 0 18px 45px rgba(8,116,144,.22); font-size: 22px; font-weight: 900; }
.chat-welcome h2 { margin: 0; color: #0a2942; font-size: clamp(29px, 4vw, 43px); letter-spacing: -.05em; }
.chat-welcome > p:not(.eyebrow) { max-width: 610px; margin: 13px auto 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.welcome-models { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.welcome-models button { width: 100%; min-height: 112px; padding: 17px; border: 1px solid #dce7ed; border-radius: 15px; background: #fbfdfe; color: var(--ink); text-align: left; cursor: pointer; }
.welcome-models button:hover { border-color: #8ed4cf; background: #f1faf9; transform: translateY(-2px); }
.welcome-models strong, .welcome-models span { display: block; }
.welcome-models strong { font-size: 13px; }
.welcome-models span { margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.chat-header { min-height: 69px; padding: 14px clamp(18px, 4vw, 42px); display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #e7edf1; }
.chat-header h2 { max-width: 700px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.chat-header div > span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.model-chip { padding: 6px 9px; border: 1px solid #bee3df; border-radius: 999px; background: #edf9f7; color: #0b7166; font-size: 10px; font-weight: 800; }
.message-stream { min-height: 0; flex: 1; padding: 25px clamp(18px, 6vw, 84px) 18px; overflow-y: auto; scroll-behavior: smooth; }
.message { width: min(900px, 100%); margin: 0 auto 28px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
.message.user { width: min(760px, 92%); margin-right: 0; grid-template-columns: minmax(0, 1fr) 34px; }
.message.user .message-avatar { grid-column: 2; grid-row: 1; background: #eef4f7; color: #2c526a; }
.message.user .message-body { grid-column: 1; grid-row: 1; padding: 13px 16px; border-radius: 17px 5px 17px 17px; background: #eef5f7; }
.message-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #0d7890, #23b5ad); color: white; font-size: 11px; font-weight: 850; }
.message-body { min-width: 0; }
.message-author { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.message-author strong { font-size: 11px; }
.message-author time { color: #8ca0ad; font-size: 9px; }
.markdown-body { color: #203d50; font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; }
.markdown-body > *:first-child { margin-top: 0; }
.markdown-body > *:last-child { margin-bottom: 0; }
.markdown-body p, .markdown-body ul, .markdown-body ol { margin: 0 0 13px; }
.markdown-body pre { position: relative; margin: 15px 0; padding: 17px; overflow-x: auto; border-radius: 13px; background: #071a2f; color: #d8edf4; font: 11px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.markdown-body code:not(pre code) { padding: 2px 5px; border-radius: 5px; background: #edf3f6; color: #0b6072; font: .9em ui-monospace, monospace; }
.markdown-body blockquote { margin: 14px 0; padding-left: 15px; border-left: 3px solid #55bdb4; color: #5c7484; }
.markdown-body a { color: var(--blue); text-decoration: underline; }
.message-meta { margin-top: 11px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: #8095a3; font-size: 9px; }
.message-meta button { padding: 0; border: 0; background: transparent; color: var(--blue); cursor: pointer; font-size: 9px; font-weight: 750; }
.message-meta form { display: inline; }
.message-error { padding: 12px 14px; border: 1px solid #efc8d0; border-radius: 11px; background: #fff4f6; color: #a73b51; font-size: 11px; line-height: 1.55; }
.conversation-starter { height: 100%; display: grid; place-content: center; justify-items: center; color: var(--muted); text-align: center; }
.conversation-starter > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: #edf8f7; color: var(--blue); }
.conversation-starter h3 { margin: 14px 0 6px; color: var(--ink); font-size: 16px; }
.conversation-starter p { max-width: 420px; margin: 0; font-size: 11px; line-height: 1.55; }
.chat-composer { width: min(900px, calc(100% - 36px)); margin: 0 auto 20px; padding: 9px 12px 10px; border: 1px solid #cbdce5; border-radius: 17px; background: white; box-shadow: 0 14px 45px rgba(17,54,78,.11); }
.chat-composer:focus-within { border-color: #72c9c2; box-shadow: 0 14px 45px rgba(17,54,78,.11), 0 0 0 3px rgba(45,212,191,.09); }
.composer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.composer-row select { max-width: 220px; padding: 5px 8px; border: 0; border-radius: 8px; background: #edf7f7; color: #0c6670; outline: none; font-size: 10px; font-weight: 800; }
.composer-credit { color: #78909f; font-size: 9px; }
.chat-composer textarea { width: 100%; max-height: 180px; min-height: 46px; margin-top: 6px; padding: 8px 2px; border: 0; resize: none; outline: none; color: var(--ink); font-size: 13px; line-height: 1.55; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.composer-actions > span { color: #91a1ac; font-size: 8px; }
.send-button { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 11px; background: linear-gradient(145deg, #0e7490, #0797a8); color: white; cursor: pointer; font-size: 18px; font-weight: 800; }
.chat-composer.is-loading .send-button { animation: send-pulse 1s ease-in-out infinite alternate; pointer-events: none; }
@keyframes send-pulse { to { opacity: .55; transform: scale(.92); } }
.usage-row { padding: 15px 19px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid #edf1f5; }
.usage-row:first-of-type { border-top: 0; }
.usage-row strong, .usage-row span { display: block; }
.usage-row strong { font-size: 12px; }
.usage-row span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.usage-row b { color: #345469; font-size: 11px; white-space: nowrap; }
.usage-row b.positive { color: var(--success); }
.usage-row b.negative { color: var(--danger); }

.image-heading { margin-bottom: 22px; }
.image-studio { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 22px; align-items: start; }
.image-generator { position: sticky; top: 96px; }
.image-generator .card-head > div span { display: block; margin-top: 3px; }
.image-form { padding: 20px; }
.image-form .field { margin-top: 15px; }
.image-form .field:first-child { margin-top: 0; }
.field-hint { margin-top: 6px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.choice-field { margin: 18px 0 0; padding: 0; border: 0; }
.choice-field legend { margin-bottom: 8px; font-size: 12px; font-weight: 750; }
.ratio-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ratio-grid label { min-height: 67px; padding: 8px 4px 6px; display: grid; place-items: center; align-content: space-between; border: 1px solid #d9e4ea; border-radius: 10px; background: #fbfdfe; cursor: pointer; }
.ratio-grid input { position: absolute; opacity: 0; pointer-events: none; }
.ratio-grid label:has(input:checked) { border-color: #52bdb5; background: #effaf8; box-shadow: 0 0 0 2px rgba(45,212,191,.1); }
.ratio-grid b { color: #587184; font-size: 8px; }
.ratio-shape { display: block; border: 1.5px solid #65a9ac; border-radius: 2px; background: #dff3f1; }
.ratio-1-1 { width: 24px; height: 24px; }.ratio-4-5 { width: 20px; height: 25px; }.ratio-5-4 { width: 27px; height: 22px; }.ratio-9-16 { width: 15px; height: 27px; }.ratio-16-9 { width: 29px; height: 17px; }
.image-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.image-option-grid .input { min-height: 41px; padding-inline: 8px; font-size: 10px; }
.generation-cost { margin: 18px 0 12px; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; border-radius: 11px; background: #f0f7f8; color: #537080; font-size: 10px; }
.generation-cost strong { color: #0c6270; font-size: 12px; }
.image-generate-button { width: 100%; }
.image-history { min-width: 0; }
.image-history-head { min-height: 54px; margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.image-history-head .eyebrow { margin-bottom: 3px; font-size: 9px; }
.image-history-head h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.media-search { display: flex; gap: 6px; }
.media-search input { width: min(230px, 35vw); min-height: 38px; padding: 8px 10px; border: 1px solid #d4e0e7; border-radius: 10px; outline: none; font-size: 10px; }
.media-search button { padding: 8px 11px; border: 1px solid #d4e0e7; border-radius: 10px; background: white; color: var(--blue); cursor: pointer; font-size: 10px; font-weight: 750; }
.image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.image-card { min-width: 0; overflow: hidden; border: 1px solid #dce6ec; border-radius: 16px; background: white; box-shadow: 0 8px 24px rgba(16,54,78,.05); }
.image-preview { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #edf5f7, #e2eff1); }
.image-preview img { width: 100%; height: 100%; object-fit: cover; }
.ratio-box-4-5, .ratio-box-9-16 { aspect-ratio: 4 / 5; }.ratio-box-5-4, .ratio-box-16-9 { aspect-ratio: 5 / 4; }
.image-state { width: 100%; height: 100%; padding: 22px; display: grid; place-content: center; justify-items: center; text-align: center; }
.image-state > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.7); color: var(--blue); font-weight: 900; }
.image-state.processing > span { animation: image-spin 2s linear infinite; }
.image-state strong { margin-top: 11px; color: #31556a; font-size: 11px; }
.image-state small { max-width: 190px; margin-top: 5px; color: #78909f; font-size: 8px; line-height: 1.45; }
.image-state.failed { background: #fff2f4; }.image-state.failed > span { color: var(--danger); }.image-state.failed strong { color: #9e364b; }
@keyframes image-spin { to { transform: rotate(360deg); } }
.image-card-body { padding: 13px; }
.image-card-body > p { height: 37px; margin: 0; overflow: hidden; color: #2b485b; font-size: 10px; line-height: 1.55; }
.image-card-meta { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 4px 7px; color: #8195a3; font-size: 8px; }
.image-card-actions { margin-top: 11px; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; border-top: 1px solid #edf1f4; }
.image-card-actions a { color: var(--blue); font-size: 9px; font-weight: 750; }
.image-card-actions span { margin-left: auto; color: #748b99; font-size: 8px; }
.image-empty { grid-column: 1 / -1; min-height: 390px; display: grid; place-content: center; justify-items: center; border: 1px dashed #cedee6; border-radius: 18px; background: #fbfdfe; text-align: center; }
.image-empty > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: #eaf7f6; color: var(--blue); font-size: 19px; }
.image-empty h3 { margin: 14px 0 6px; font-size: 14px; }.image-empty p { margin: 0; color: var(--muted); font-size: 10px; }

.drive-toolbar { margin-bottom: 18px; padding: 18px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, .7fr); align-items: center; gap: 24px; }
.upload-form { display: flex; align-items: center; gap: 12px; }.upload-drop { min-height: 76px; padding: 12px 16px; flex: 1; display: grid; grid-template-columns: 38px 1fr; align-items: center; column-gap: 11px; border: 1px dashed #b9d3dc; border-radius: 13px; background: #f8fcfd; cursor: pointer; }.upload-drop input { position: absolute; opacity: 0; pointer-events: none; }.upload-drop > span { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #e2f5f3; color: var(--blue); font-size: 20px; }.upload-drop strong { align-self: end; font-size: 11px; }.upload-drop small { align-self: start; color: var(--muted); font-size: 8px; }
.storage-meter strong, .storage-meter span { display: block; }.storage-meter strong { font-size: 11px; }.storage-meter span { margin-top: 3px; color: var(--muted); font-size: 9px; }.storage-meter .progress { height: 7px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: #e4edf1; }.storage-meter .progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #2dd4bf, #0e7490); }
.drive-filters { margin-bottom: 15px; display: flex; justify-content: flex-end; gap: 8px; }.drive-filters input, .drive-filters select { min-height: 38px; padding: 8px 11px; border: 1px solid #d4e0e7; border-radius: 10px; background: white; outline: none; font-size: 10px; }.drive-filters input { width: min(260px, 40vw); }
.file-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }.file-card { min-width: 0; overflow: hidden; }.file-thumb { height: 125px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #eaf5f6, #d9eaee); }.file-thumb img { width: 100%; height: 100%; object-fit: cover; }.file-thumb span { width: 54px; height: 62px; display: grid; place-items: center; border-radius: 6px 13px 6px 6px; background: white; color: #147388; box-shadow: 0 8px 22px rgba(12,72,91,.13); font-size: 10px; font-weight: 850; }.file-thumb.pdfs { background: #fff1ef; }.file-thumb.spreadsheets { background: #edf8f0; }.file-copy { padding: 12px 13px 7px; }.file-copy strong, .file-copy span, .file-copy time { display: block; }.file-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.file-copy span, .file-copy time { margin-top: 4px; color: var(--muted); font-size: 8px; }.file-actions { padding: 7px 13px 12px; display: flex; align-items: center; gap: 10px; font-size: 9px; }.file-actions a, .file-actions summary { color: var(--blue); font-weight: 750; cursor: pointer; }.file-actions details { position: relative; margin-left: auto; }.file-actions details > div { position: absolute; z-index: 5; right: 0; width: 205px; padding: 10px; border: 1px solid #dbe5ea; border-radius: 10px; background: white; box-shadow: 0 12px 35px rgba(10,35,52,.16); }.file-actions details input { width: 100%; padding: 6px; border: 1px solid #d7e1e7; border-radius: 6px; font-size: 9px; }.file-actions details button { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--blue); cursor: pointer; font-size: 9px; font-weight: 750; }.drive-empty { grid-column: 1 / -1; min-height: 330px; display: grid; place-content: center; justify-items: center; border: 1px dashed #cadce4; border-radius: 17px; background: #fbfdfe; text-align: center; }.drive-empty > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: #e9f7f6; color: var(--blue); font-weight: 850; }.drive-empty h2 { margin: 13px 0 5px; font-size: 16px; }.drive-empty p { margin: 0; color: var(--muted); font-size: 10px; }
.project-layout { display: grid; grid-template-columns: minmax(280px, 350px) minmax(0, 1fr); gap: 20px; align-items: start; }.project-create { position: sticky; top: 94px; }.project-create form, .project-section form { padding: 17px; }.project-create .field + .field, .project-section .field + .field { margin-top: 12px; }.project-create .button { width: 100%; margin-top: 14px; }.project-catalog > .media-search { margin-bottom: 14px; justify-content: flex-end; }.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }.project-card { min-height: 155px; padding: 17px; display: grid; grid-template-columns: 42px 1fr auto; align-items: start; gap: 12px; color: inherit; }.project-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #dff4f2; color: var(--blue); font-weight: 900; }.project-card h2 { margin: 2px 0 7px; font-size: 14px; }.project-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }.project-card small { display: block; margin-top: 15px; color: #8296a3; font-size: 8px; }.project-card > b { color: var(--blue); }
.project-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }.project-section { overflow: hidden; }.project-section > form { padding-top: 4px; }.project-conversations, .attached-list { padding: 0 17px 17px; }.project-conversations a, .attached-list > div { margin-top: 8px; padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 9px; background: #f5f9fa; color: inherit; }.project-conversations strong, .project-conversations span, .attached-list strong, .attached-list small { display: block; }.project-conversations strong, .attached-list strong { font-size: 10px; }.project-conversations span, .attached-list small { margin-top: 3px; color: var(--muted); font-size: 8px; }.project-file-picker { max-height: 210px; margin-bottom: 10px; overflow: auto; border: 1px solid #e0e8ec; border-radius: 10px; }.project-file-picker label { padding: 9px 10px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #edf2f4; cursor: pointer; }.project-file-picker label:last-child { border: 0; }.project-file-picker strong, .project-file-picker small { display: block; font-size: 9px; }.project-file-picker small { margin-top: 2px; color: var(--muted); font-size: 8px; }.attached-list button { border: 0; background: none; color: var(--danger); cursor: pointer; font-size: 8px; font-weight: 750; }.muted { color: var(--muted); font-size: 9px; }.url-fields { display: grid; grid-template-columns: .65fr 1.35fr; gap: 8px; }.project-danger { grid-column: 1 / -1; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }.project-danger h2 { margin: 0; font-size: 13px; }.project-danger p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }.project-danger form { padding: 0; }

.catalog-filters { margin-bottom: 17px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.catalog-filters > input, .catalog-filters select { min-height: 39px; padding: 8px 11px; border: 1px solid #d4e0e7; border-radius: 10px; background: white; font-size: 10px; }
.catalog-filters > input { width: min(280px, 38vw); }.catalog-filters label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
.agent-grid, .prompt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.agent-card { min-height: 285px; padding: 18px; display: flex; flex-direction: column; }.agent-card-top, .prompt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agent-orb { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg, #d8f4f0, #cbe9ef); color: var(--blue); font-size: 15px; font-weight: 900; }
.favorite-button { padding: 5px; border: 0; background: none; color: #bdc9cf; cursor: pointer; font-size: 18px; }.favorite-button.active { color: #e4a824; }
.agent-card h2, .prompt-card h2 { margin: 16px 0 7px; font-size: 15px; }.agent-card > p, .prompt-card > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.agent-meta { margin: 14px 0; display: flex; flex-wrap: wrap; gap: 5px; }.agent-meta span, .prompt-vars span { padding: 4px 7px; border-radius: 99px; background: #eef5f7; color: #527080; font-size: 8px; }.agent-card > form:last-child { margin-top: auto; }.agent-card > form:last-child .button { width: 100%; }
.prompt-card { min-width: 0; padding: 17px; }.prompt-card h2 { margin-top: 13px; }.prompt-vars { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 5px; }.prompt-body { max-height: 105px; margin-top: 13px; padding: 11px; overflow: hidden; border-radius: 9px; background: #f5f9fa; color: #496575; font: 9px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }.prompt-actions { margin-top: 13px; display: flex; justify-content: flex-end; gap: 7px; }.prompt-actions form { display: inline-flex; }
.admin-prompt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; align-items: start; }.category-admin { padding-bottom: 13px; }.category-admin > form { margin: 10px 13px 0; padding: 10px; display: grid; gap: 7px; border: 1px solid #e3eaee; border-radius: 10px; }.category-admin label { color: var(--muted); font-size: 9px; }

.guest-body { color: #d9ebf4; background: #06182c; }
.guest-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .75fr); }
.guest-story { position: relative; padding: clamp(34px, 6vw, 82px); display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(circle at 15% 15%, rgba(8,145,178,.3), transparent 35%), radial-gradient(circle at 80% 80%, rgba(45,212,191,.14), transparent 35%); }
.guest-story::after { content: ""; position: absolute; width: 460px; height: 460px; right: -180px; bottom: -230px; border: 1px solid rgba(103,232,249,.2); border-radius: 50%; box-shadow: 0 0 0 58px rgba(103,232,249,.035), 0 0 0 116px rgba(103,232,249,.025); }
.guest-story .brand { position: relative; z-index: 1; color: white; }
.story-copy { position: relative; z-index: 1; max-width: 700px; margin: auto 0; }
.story-copy .eyebrow { color: #6ee7dd; }
.story-copy h1 { max-width: 650px; margin: 0; color: white; font-size: clamp(38px, 5.2vw, 72px); line-height: .99; letter-spacing: -.055em; }
.story-copy > p { max-width: 570px; margin: 24px 0 0; color: #a9c7d7; font-size: 16px; line-height: 1.75; }
.trust-row { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; }
.trust-chip { padding: 8px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #cce1eb; background: rgba(255,255,255,.04); font-size: 11px; }
.guest-panel { padding: 30px clamp(24px, 6vw, 72px); display: grid; place-items: center; background: #f8fbfd; color: var(--ink); }
.auth-box { width: min(420px, 100%); }
.auth-box h1 { margin: 0; color: #0b2942; font-size: 30px; letter-spacing: -.04em; }
.auth-intro { margin: 10px 0 27px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.auth-box .field { margin-top: 16px; }
.auth-row { margin: 16px 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 12px; }
.check { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.check input { accent-color: var(--blue); }
.auth-box .button { width: 100%; }
.auth-switch { margin-top: 22px; color: var(--muted); text-align: center; font-size: 12px; }
.auth-switch a, .inline-link { color: var(--blue); font-weight: 750; }
.session-status { margin-bottom: 18px; padding: 11px 13px; border-radius: 10px; background: #e9f9f5; color: var(--success); font-size: 12px; }

.landing { min-height: 100vh; color: white; background: radial-gradient(circle at 15% 10%, rgba(14,116,144,.45), transparent 33%), linear-gradient(155deg, #06182c, #0b2943 72%, #0c5364); }
.landing-nav { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.landing-actions { display: flex; gap: 10px; }
.landing .button.secondary { color: white; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
.hero { width: min(1180px, calc(100% - 40px)); min-height: calc(100vh - 92px); margin: 0 auto; padding: 8vh 0 90px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .8fr); align-items: center; gap: 70px; }
.hero h1 { margin: 0; max-width: 760px; font-size: clamp(45px, 6vw, 79px); line-height: .98; letter-spacing: -.06em; }
.hero-copy > p { max-width: 640px; margin: 24px 0 30px; color: #b7d0dd; font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.hero-panel { padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 25px; background: rgba(255,255,255,.07); box-shadow: 0 35px 90px rgba(0,0,0,.22); backdrop-filter: blur(18px); }
.model-row { margin-top: 10px; padding: 14px; display: flex; align-items: center; gap: 12px; border-radius: 15px; background: rgba(255,255,255,.07); }
.model-row:first-child { margin-top: 0; }
.model-dot { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #06233c; background: var(--aqua); font-size: 12px; font-weight: 900; }
.model-row:nth-child(2) .model-dot { background: var(--sand); }
.model-row:nth-child(3) .model-dot { background: #9ad0f5; }
.model-copy strong { display: block; font-size: 13px; }
.model-copy span { display: block; margin-top: 3px; color: #9fbccc; font-size: 11px; }
.gateway-flow { margin: 16px 0 0; padding: 15px; border-radius: 15px; background: #071a2f; color: #9fc5d6; font: 11px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }

.research-workspace { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.research-sidebar { position: sticky; top: 88px; padding: 18px; }
.research-search { margin: 15px 0; }
.research-search input { min-width: 0; width: 100%; }
.research-history-list { display: grid; gap: 7px; max-height: calc(100vh - 280px); overflow: auto; }
.research-history-item { display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: start; gap: 11px; padding: 12px; border: 1px solid transparent; border-radius: 12px; color: var(--ink); }
.research-history-item:hover, .research-history-item.active { border-color: #cddfe8; background: #f4f9fb; }
.research-history-item strong, .research-history-item small { display: block; }
.research-history-item strong { font-size: 12px; line-height: 1.45; }
.research-history-item small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.research-status { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #94a3b8; }
.research-status.completed { background: var(--success); }.research-status.failed { background: var(--danger); }.research-status.queued, .research-status.processing { background: #d69b33; box-shadow: 0 0 0 4px rgba(214,155,51,.12); }
.research-main { display: grid; gap: 18px; min-width: 0; }
.research-compose { min-height: 590px; padding: clamp(24px, 5vw, 60px); }
.research-hero { max-width: 690px; margin: 12px auto 34px; text-align: center; }
.research-hero h2 { margin: 7px 0 10px; font-size: clamp(25px, 4vw, 38px); letter-spacing: -.04em; }
.research-hero > p:last-child { color: var(--muted); line-height: 1.65; }
.research-spark { width: 50px; height: 50px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 16px; color: #064e59; background: linear-gradient(145deg, #bdf5e8, #8adbd4); font-size: 23px; }
.research-form { max-width: 820px; margin: auto; }
.research-form textarea { resize: vertical; }
.research-form-footer { display: grid; grid-template-columns: minmax(190px, 1fr) auto auto; gap: 14px; align-items: end; }
.research-model-field { margin: 0; }.research-credit { padding: 0 6px 9px; }.research-credit span, .research-credit strong { display: block; }.research-credit span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }.research-credit strong { margin-top: 3px; font-size: 16px; }
.research-result { padding: clamp(22px, 4vw, 44px); }
.research-result-header { display: flex; justify-content: space-between; align-items: start; gap: 22px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.research-result-header h2 { margin: 13px 0 8px; font-size: clamp(24px, 3.5vw, 37px); letter-spacing: -.04em; }
.research-result-header p { max-width: 850px; color: var(--muted); line-height: 1.65; }
.research-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
.research-progress { min-height: 330px; display: flex; align-items: center; justify-content: center; gap: 18px; text-align: left; }
.research-progress h3 { margin: 0 0 5px; }.research-progress p { max-width: 520px; color: var(--muted); }.research-spinner { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: #e8f8f4; color: var(--teal); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.07); opacity: .65; } }
.research-answer { max-width: 900px; padding: 30px 0 10px; font-size: 14px; line-height: 1.8; }
.research-result-meta { margin-top: 25px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.research-sources { padding: 22px; }.source-list { display: grid; gap: 9px; }.source-list > a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); }.source-list > a:hover { border-color: #9fc7d2; background: #f7fbfc; }.source-list strong, .source-list small { display: block; }.source-list small { margin-top: 3px; color: var(--muted); }.source-list p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }.source-order { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: #e8f5f5; color: var(--teal); font-size: 11px; font-weight: 800; }

.analytics-filters { margin-bottom: 18px; padding: 16px; display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }.analytics-filters .field { min-width: 150px; margin: 0; flex: 1; }.analytics-filters .button { min-height: 42px; }.analytics-metrics { margin-bottom: 18px; }.analytics-grid { margin-bottom: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }.analytics-grid .card { padding: 20px; }.table-scroll { overflow-x: auto; }.danger-card .metric-value { color: var(--danger); }.api-filters .field:last-of-type { min-width: 190px; }

@media (max-width: 1100px) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .guest-shell { grid-template-columns: 1fr 460px; }
    .guest-story { padding: 42px; }
    .story-copy h1 { font-size: 48px; }
    .chat-shell { grid-template-columns: 238px minmax(0, 1fr); }
    .image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .file-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .agent-grid, .prompt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analytics-grid { grid-template-columns: 1fr 1fr; }.analytics-grid .card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: min(290px, 87vw); transition: transform .2s ease; box-shadow: 25px 0 70px rgba(3,18,33,.3); }
    .sidebar.open { transform: none; }
    .menu-toggle { display: grid; place-items: center; }
    .topbar { height: 66px; padding: 0 18px; }
    .topbar-title span { display: none; }
    .content { padding-top: 28px; }
    .page-heading { align-items: start; flex-direction: column; }
    .settings-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: auto; }
    .checkbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guest-shell { grid-template-columns: 1fr; }
    .guest-story { min-height: 380px; }
    .story-copy { margin-top: 70px; }
    .story-copy h1 { font-size: clamp(37px, 10vw, 54px); }
    .guest-panel { padding: 54px 24px; }
    .hero { grid-template-columns: 1fr; padding-top: 55px; gap: 48px; }
    .chat-content { height: calc(100vh - 66px); padding: 0; }
    .chat-shell { grid-template-columns: 1fr; }
    .conversation-panel { position: fixed; z-index: 45; top: 66px; bottom: 0; left: 0; width: min(310px, 88vw); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 20px 0 60px rgba(4,25,39,.2); }
    .conversation-panel.open { transform: none; }
    .conversation-mobile-toggle { position: absolute; z-index: 9; top: 14px; left: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #d5e1e8; border-radius: 10px; background: white; color: var(--blue); cursor: pointer; }
    .chat-welcome { padding-top: 80px; }
    .chat-header { padding-left: 62px; }
    .message-stream { padding-inline: 15px; }
    .message.user { width: 94%; }
    .image-studio { grid-template-columns: 1fr; }
    .image-generator { position: static; }
    .drive-toolbar, .project-layout, .project-detail-grid { grid-template-columns: 1fr; }
    .admin-prompt-layout { grid-template-columns: 1fr; }
    .project-create { position: static; }
    .file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .research-workspace { grid-template-columns: 1fr; }.research-sidebar { position: static; }.research-history-list { max-height: 270px; }.analytics-grid { grid-template-columns: 1fr; }.analytics-grid .card:last-child { grid-column: auto; }
}

@media (max-width: 540px) {
    .metric-grid { grid-template-columns: 1fr; }
    .metric-card { min-height: 125px; }
    .credit-pill { display: none; }
    .quick-grid { grid-template-columns: 1fr; }
    .checkbox-grid { grid-template-columns: 1fr; }
    .image-history-head { align-items: stretch; flex-direction: column; }
    .media-search input { width: 100%; min-width: 0; flex: 1; }
    .image-grid { grid-template-columns: 1fr; }
    .image-option-grid { grid-template-columns: 1fr; }
    .upload-form, .drive-filters, .project-danger { align-items: stretch; flex-direction: column; }
    .drive-filters input { width: 100%; }
    .file-grid, .project-grid { grid-template-columns: 1fr; }
    .url-fields { grid-template-columns: 1fr; }
    .agent-grid, .prompt-grid { grid-template-columns: 1fr; }
    .catalog-filters { align-items: stretch; flex-direction: column; }.catalog-filters > input { width: 100%; }
    .guest-story { min-height: 330px; padding: 28px 24px; }
    .story-copy { margin-top: 48px; }
    .story-copy > p, .trust-row { display: none; }
    .landing-nav .brand-copy small { display: none; }
    .landing-actions .secondary { display: none; }
    .hero { width: min(100% - 32px, 1180px); }
    .hero h1 { font-size: 44px; }
    .hero-panel { padding: 12px; }
    .welcome-models { grid-template-columns: 1fr; }
    .chat-welcome { width: calc(100% - 30px); }
    .chat-header { padding-inline: 14px; }
    .chat-header div > span, .composer-credit, .composer-actions > span { display: none; }
    .chat-composer { width: calc(100% - 20px); margin-bottom: 10px; }
    .message { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; }
    .message-avatar { width: 30px; height: 30px; }
    .research-compose { padding: 22px 17px; }.research-form-footer { grid-template-columns: 1fr; }.research-credit { padding: 0; }.research-result-header { flex-direction: column; }.analytics-filters { align-items: stretch; flex-direction: column; }.analytics-filters .field { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}