@layer reset, theme, layout, components, prose, responsive;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; min-height: 100%; }
  body, button, input, textarea, select { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 14px; }
  button, input, textarea, select { color: inherit; }
  button, select, summary { cursor: pointer; }
  button { border: 0; background: none; }
  input, textarea, select { font: inherit; }
  a { color: inherit; }
  button:disabled, select:disabled { cursor: default; opacity: .45; }
  [hidden] { display: none !important; }
  svg { display: block; flex-shrink: 0; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  ::selection { background: var(--selection); }
}
@layer theme {
  :root { color-scheme: dark; --bg: #343434; --side: var(--bg); --raised: #3b3b3b; --hover: #424242; --selected: #35465b; --text: #f0f2f6; --muted: #b9bec5; --subtle: #a7adb5; --line: #ffffff12; --edge: #ffffff20; --input: #3b3b3b; --bubble: #404040; --accent: #8bbbff; --accent-secondary: #94dfef; --button: #8bbbff; --button-text: #0d1928; --focus: #94dfef; --selection: #548dd466; --danger: #ff9c97; --pending: #c2a8ed; --online: #83caa5; --scrim: #000b; --shadow: 0 20px 80px #0006; --bevel-light: #ffffff16; --bevel-dark: #00000045; --scroll-track: #2e2e2e; --scroll-thumb: #787878; --scroll-thumb-hover: #999; --bevel: inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-dark); }
  :root[data-theme="light"] { color-scheme: light; --bg: #fff; --side: #f7f7f6; --raised: #fff; --hover: #ededeb; --selected: #e8e8e6; --text: #232323; --muted: #666; --subtle: #858585; --line: #0000000c; --edge: #0000001a; --input: #f5f5f4; --bubble: #f0f0ef; --button: #242424; --button-text: #fff; --focus: #6055b1; --selection: #c4bdf580; --danger: #b2312e; --pending: #7952b0; --online: #2d7c50; --scrim: #0005; --shadow: 0 18px 70px #0002; }
  @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { color-scheme: light; --bg: #fff; --side: #f7f7f6; --raised: #fff; --hover: #ededeb; --selected: #e8e8e6; --text: #232323; --muted: #666; --subtle: #858585; --line: #0000000c; --edge: #0000001a; --input: #f5f5f4; --bubble: #f0f0ef; --button: #242424; --button-text: #fff; --focus: #6055b1; --selection: #c4bdf580; --danger: #b2312e; --pending: #7952b0; --online: #2d7c50; --scrim: #0005; --shadow: 0 18px 70px #0002; } }
  body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.5; }
  :root[data-theme="light"] { --side: var(--bg); --accent: #2868aa; --accent-secondary: #177183; --button: #2868aa; --button-text: #fff; --focus: #287c92; --bevel-light: #fff; --bevel-dark: #00000024; --scroll-track: #e5e5e5; --scroll-thumb: #919191; --scroll-thumb-hover: #707070; }
  @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --side: var(--bg); --accent: #2868aa; --accent-secondary: #177183; --button: #2868aa; --button-text: #fff; --focus: #287c92; --bevel-light: #fff; --bevel-dark: #00000024; --scroll-track: #e5e5e5; --scroll-thumb: #919191; --scroll-thumb-hover: #707070; } }
}
@layer layout {
  .app-shell { overflow: hidden; }
  .workspace { --sidebar-width: 250px; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); height: 100dvh; min-height: 260px; }
  .sidebar { display: flex; flex-direction: column; background: var(--side); min-width: 0; min-height: 0; padding: 14px 10px 10px; box-shadow: var(--bevel); }
  .sidebar-top { display: flex; align-items: center; justify-content: space-between; height: 38px; padding-left: 8px; margin-bottom: 20px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; white-space: nowrap; font-size: 15px; }
  /* Original Gaia website mark, preserved as CSS rather than a new graphic. */
  .brand-mark { position: relative; display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; margin: 3px; transform: rotate(45deg); border: 1px solid #6ca8ff; border-radius: 5px; background: linear-gradient(135deg, #2e4670, #261d4a); box-shadow: 0 0 14px #5f8cff55, inset 0 0 8px #7ccfff33; }
  .brand-mark::before, .brand-mark::after, .brand-mark i { content: ''; position: absolute; background: #a7cbff; box-shadow: 0 0 6px #8ab4f8; }
  .brand-mark::before { width: 2px; height: 13px; }
  .brand-mark::after { width: 13px; height: 2px; }
  .brand-mark i { width: 5px; height: 5px; border-radius: 2px; background: #d8e7ff; }
  .primary-nav { display: grid; gap: 3px; padding-bottom: 24px; box-shadow: inset 0 -1px 0 var(--bevel-dark), 0 1px 0 var(--bevel-light); }
  /* Reserve a real rail, including when the list is short. Never fade it on idle. */
  .sidebar-content { overflow-x: auto; overflow-y: scroll; flex: 1; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
  @supports selector(::-webkit-scrollbar) { .sidebar-content { scrollbar-color: auto; } }
  .sidebar-content::-webkit-scrollbar { width: 12px; height: 12px; }
  .sidebar-content::-webkit-scrollbar-track, .sidebar-content::-webkit-scrollbar-corner { background: var(--scroll-track); box-shadow: inset 1px 1px 0 var(--bevel-dark); }
  .sidebar-content::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid var(--scroll-track); border-radius: 4px; min-height: 24px; min-width: 24px; }
  .sidebar-content::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
  .sidebar-content::-webkit-scrollbar-button { display: none; }
  .sidebar-bottom { padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--bevel-dark); box-shadow: inset 0 1px 0 var(--bevel-light); }
  .main-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; background: var(--bg); box-shadow: var(--bevel); }
  .chat-header { display: flex; align-items: center; min-height: 68px; padding: 13px 28px; gap: 12px; flex-shrink: 0; box-shadow: inset 0 -1px 0 var(--bevel-dark), 0 1px 0 var(--bevel-light); }
  .chat-heading { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
  .chat-heading h1 { font-weight: 500; font-size: 15px; margin: 0; width: max-content; white-space: nowrap; }
  .chat-heading p { color: var(--muted); font-size: 11px; margin: 2px 0 0; white-space: nowrap; }
  .chat-heading p:empty { display: none; }
  .header-actions { display: flex; gap: 8px; align-items: center; }
  .conversation-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; scroll-padding-bottom: 20px; }
  .conversation { max-width: 804px; margin: 0 auto; padding: 28px 30px 28px; min-height: 100%; position: relative; display: flex; flex-direction: column; }
  .messages { display: flex; flex-direction: column; gap: 28px; }
  .composer-dock { flex-shrink: 0; position: relative; width: 100%; max-width: 804px; padding: 0 24px max(12px, env(safe-area-inset-bottom)); margin: 0 auto; background: var(--bg); }
  .composer { background: var(--input); border: 1px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); border-radius: 26px; padding: 14px 12px 10px; position: relative; box-shadow: 0 2px 5px #00000012; }
  .composer:focus-within { border-color: color-mix(in srgb, var(--muted), transparent 45%); }
  #prompt { display: block; width: 100%; min-height: 44px; max-height: min(230px, 28dvh); background: transparent; border: 0; resize: none; outline: 0; padding: 3px 7px 10px; line-height: 1.6; font-size: 15px; overflow-y: auto; }
  #prompt::placeholder { color: var(--muted); }
  .composer-bottom { display: flex; gap: 3px; align-items: center; }
  .prompt-controls { display: flex; flex: 1; min-width: 0; align-items: center; gap: 3px; flex-wrap: wrap; }
  .composer-feedback { min-height: 24px; padding: 5px 14px 0; color: var(--muted); font-size: 11px; }
  .composer-feedback.error, .field-error, .danger-text { color: var(--danger); }
  .composer-overlay { position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--input), transparent 4%); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px; }
  .field-error:empty { display: none; }
  .composer-overlay .field-error { margin: 8px 0 0; font-size: 12px; }
  .composer-overlay #overlay-label { margin-top: 7px; font-size: 12px; color: var(--muted); }
  .composer-overlay #overlay-label:empty { display: none; }
  .composer-overlay strong { font-weight: 600; }
  .empty-chat { display: flex; flex: 1; align-items: center; justify-content: center; flex-direction: column; padding: 30px 0 12vh; gap: 13px; text-align: center; }
  .empty-symbol { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 2px; }
  .empty-symbol .brand-mark { transform: rotate(45deg) scale(1.65); }
  .empty-chat h2 { font-size: clamp(23px, 3vw, 30px); font-weight: 500; letter-spacing: -.8px; margin: 0 0 6px; }
  .project-choice { display: flex; align-items: center; gap: 8px; border: 1px solid var(--edge); border-radius: 20px; padding: 7px 11px; color: var(--muted); font-size: 12px; }
  .project-choice svg { width: 15px; height: 15px; }
  .workspace.collapsed { grid-template-columns: 64px minmax(0, 1fr); }
  .collapsed .sidebar { padding-inline: 10px; }
  .collapsed .sidebar-top { padding: 0; justify-content: center; }
  .collapsed .brand, .collapsed .sidebar-label, .collapsed .sidebar-content, .collapsed .connection-dot { display: none; }
  .collapsed .primary-nav { flex: 1; display: flex; flex-direction: column; }
  .collapsed .nav-action { justify-content: center; padding: 11px; }
}
@layer components {
  .icon-button { width: 36px; height: 36px; padding: 8px; display: inline-flex; justify-content: center; align-items: center; border-radius: 9px; flex-shrink: 0; color: var(--muted); }
  .icon-button:hover, .button:hover, .text-button:hover, .project-choice:hover { background: var(--hover); color: var(--text); }
  .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 500; }
  .primary-button { background: var(--button); color: var(--button-text); }
  .primary-button:hover { background: var(--button); color: var(--button-text); opacity: .85; }
  .outline-button { border: 1px solid var(--edge); }
  .text-button { color: var(--muted); font-size: 12px; padding: 6px 9px; border-radius: 7px; }
  .nav-action { display: flex; align-items: center; width: 100%; gap: 10px; border-radius: 8px; padding: 10px 9px; text-align: left; font-size: 13px; white-space: nowrap; }
  .nav-action:hover { background: var(--hover); }
  .nav-action kbd { margin-left: auto; font: inherit; font-size: 10px; color: var(--subtle); }
  .section-label { display: flex; align-items: center; margin: 4px 9px 8px; color: var(--muted); font-size: 11px; font-weight: 500; }
  .sidebar-section { margin-bottom: 22px; min-width: 100%; }
  .sidebar-section:not(:last-child) { padding-bottom: 12px; margin-bottom: 10px; box-shadow: inset 0 -1px 0 var(--bevel-dark), 0 1px 0 var(--bevel-light); }
  .task-row, .project-row { display: flex; align-items: center; border-radius: 8px; position: relative; width: max-content; min-width: 100%; }
  .task-row:hover, .project-row:hover { background: var(--hover); }
  .task-row.selected { background: var(--selected); }
  .task-row.selected::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--accent); }
  .task-link { flex: 1; display: flex; align-items: center; min-width: 0; padding: 8px 6px; gap: 6px; text-align: left; font-size: 13px; line-height: 19px; text-decoration: none; }
  .task-link span { white-space: nowrap; flex-shrink: 0; }
  .task-link .task-indicator { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--online); }
  .row-menu { width: 24px; height: 28px; padding: 4px; margin-right: 1px; opacity: 0; }
  .task-row:hover .row-menu, .project-row:hover .row-menu, .row-menu:focus-visible, .task-row:focus-within .row-menu, .project-row:focus-within .row-menu { opacity: 1; }
  .project-toggle { flex: 1; display: flex; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; padding: 8px 3px; text-align: left; font-size: 13px; }
  .project-toggle > svg:first-child { width: 12px; height: 12px; transition: transform .15s; }
  .project-toggle[aria-expanded="true"] > svg:first-child { transform: rotate(90deg); }
  .project-toggle > svg:nth-child(2) { width: 17px; height: 17px; color: var(--muted); }
  .project-toggle[aria-expanded="true"] > svg:nth-child(2) { color: var(--accent); }
  .project-label { white-space: nowrap; flex-shrink: 0; }
  .project-children { margin-left: 40px; border-left: 1px solid var(--edge); padding-left: 2px; }
  .empty-project { color: var(--subtle); font-size: 11px; margin: 3px 0 6px; padding: 5px 8px; }
  .host-heading { font-size: 10px; color: var(--subtle); margin: 16px 9px 5px; display: flex; align-items: center; gap: 6px; }
  .host-heading svg { width: 12px; height: 12px; }
  .offline-tag { font-size: 9px; color: var(--subtle); margin-left: auto; }
  .connection-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--subtle); margin-left: auto; }
  .connection-dot.online { background: var(--online); }
  .pending-count { border: 1px solid color-mix(in srgb, var(--pending), transparent 65%); border-radius: 15px; padding: 4px 9px; color: var(--pending); font-size: 11px; }
  .message { min-width: 0; position: relative; }
  .message-user { align-self: flex-end; max-width: 86%; background: var(--bubble); padding: 12px 18px; border-radius: 22px 22px 7px 22px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.7; box-shadow: var(--bevel); }
  .message-assistant { padding: 0 0 8px; font-size: 15px; line-height: 1.8; }
  .message-actions { display: flex; margin-top: 6px; opacity: .55; }
  .message-actions .icon-button { width: 27px; height: 27px; padding: 5px; }
  .message:hover .message-actions { opacity: 1; }
  .activity { color: var(--muted); font-size: 12px; margin: -4px 0 0; }
  .activity summary { list-style: none; display: flex; align-items: center; gap: 7px; width: fit-content; padding: 5px 0; }
  .activity summary::-webkit-details-marker { display: none; }
  .activity summary svg { width: 13px; height: 13px; }
  .activity[open] summary svg { transform: rotate(90deg); }
  .activity-content { border-left: 1px solid var(--edge); padding: 4px 0 4px 16px; margin: 8px 0; color: var(--muted); font-size: 13px; }
  .activity-entry + .activity-entry { margin-top: 16px; }
  .stream-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; padding: 18px 0 8px; }
  .stream-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text); animation: breathe 1.8s ease-in-out infinite; }
  @keyframes breathe { 50% { opacity: .25; } }
  .history-status { color: var(--muted); font-size: 12px; }
  .history-status:not(:empty) { margin-bottom: 22px; }
  .load-older { align-self: center; margin: 0 0 24px; }
  .pending-message { margin: 18px 0 0 auto; width: min(100%, 570px); border: 1px solid color-mix(in srgb, var(--pending), transparent 62%); border-radius: 18px; padding: 13px 16px; background: color-mix(in srgb, var(--pending), transparent 92%); }
  .pending-message[data-status="sending"] { border-color: color-mix(in srgb, var(--online), transparent 50%); background: color-mix(in srgb, var(--online), transparent 90%); }
  .pending-message[data-status="accepted"] { border-color: var(--edge); background: transparent; }
  .pending-message[data-status="accepted"] .pending-label { color: var(--online); }
  .pending-message > p { margin: 5px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
  .pending-label { color: var(--pending); font-size: 11px; display: flex; gap: 7px; align-items: center; }
  .pending-label.sending { color: var(--online); }
  .pending-error { color: var(--muted); font-size: 12px; margin-top: 7px; overflow-wrap: anywhere; }
  .pending-actions { display: flex; flex-wrap: wrap; gap: 2px; margin: 6px -7px -4px; }
  .attachment-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
  .attachment-list:not(:empty) { padding: 0 4px 10px; }
  .attachment-chip { display: flex; align-items: center; gap: 7px; background: var(--raised); border: 1px solid var(--edge); border-radius: 10px; padding: 6px 6px 6px 10px; max-width: 260px; font-size: 11px; }
  .attachment-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .attachment-chip small { color: var(--muted); font-size: 10px; }
  .attachment-chip .icon-button { width: 25px; height: 25px; padding: 4px; }
  .message-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
  .message-attachment { display: flex; gap: 8px; align-items: center; border: 1px solid var(--edge); padding: 8px 10px; border-radius: 10px; font-size: 12px; text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }
  .message-attachment img { max-width: 260px; max-height: 180px; border-radius: 8px; object-fit: contain; }
  .setting-select select { appearance: auto; border: 0; border-radius: 6px; padding: 5px 2px; background: transparent; color: var(--muted); max-width: 172px; font-size: 11px; }
  .setting-select select:focus, .setting-select select:hover { color: var(--text); }
  .setting-select option { background: var(--raised); color: var(--text); }
  .send-button { margin-left: 4px; background: var(--button); color: var(--button-text); border-radius: 50%; width: 33px; height: 33px; }
  .send-button:hover { background: var(--button); color: var(--button-text); opacity: .85; }
  .stop-button { color: var(--text); border: 1px solid var(--edge); border-radius: 50%; width: 33px; height: 33px; }
  .stop-button svg { width: 13px; height: 13px; fill: currentColor; }
  .jump-latest { position: absolute; right: 30px; top: -48px; border-radius: 50%; border: 1px solid var(--edge); background: var(--raised); box-shadow: 0 3px 10px #0002; color: var(--text); }
  .notice { color: var(--muted); font-size: 12px; padding: 9px 22px; background: var(--side); display: flex; align-items: center; gap: 10px; }
  .notice.error { color: var(--danger); }
  .notice .icon-button { margin-left: auto; width: 24px; height: 24px; }
  .drop-overlay { position: absolute; inset: -8px 16px 4px; border: 1px dashed var(--focus); border-radius: 28px; background: var(--input); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; z-index: 4; pointer-events: none; }
  .drop-overlay > span { color: var(--muted); font-size: 11px; }
  .gaia-dialog { width: min(540px, calc(100vw - 32px)); max-height: min(780px, calc(100dvh - 48px)); background: var(--raised); color: var(--text); border: 1px solid var(--edge); border-radius: 18px; padding: 0; box-shadow: var(--shadow); overflow: auto; }
  .gaia-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
  .dialog-heading { display: flex; justify-content: space-between; align-items: center; padding: 15px 16px 10px 22px; position: sticky; top: 0; background: var(--raised); z-index: 1; }
  .dialog-heading h2 { font-weight: 550; font-size: 16px; margin: 0; white-space: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .dialog-content { padding: 6px 22px 24px; }
  .dialog-content p { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
  .field { display: grid; gap: 7px; margin-bottom: 18px; font-size: 12px; }
  .field input, .field select, .field textarea, .search-input { width: 100%; border: 1px solid var(--edge); background: var(--bg); border-radius: 9px; padding: 10px 12px; outline-offset: 1px; font-size: 14px; }
  .field textarea { min-height: 90px; resize: vertical; }
  .field-error { font-size: 12px; margin: 6px 0; }
  .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
  .dialog-content hr { border: 0; border-top: 1px solid var(--edge); margin: 20px 0; }
  .search-dialog { width: min(640px, calc(100vw - 32px)); }
  .search-input { margin-bottom: 14px; }
  .search-results { display: grid; gap: 4px; max-height: 55dvh; overflow: auto; }
  .search-result { display: flex; gap: 12px; align-items: center; width: max-content; min-width: 100%; text-align: left; padding: 12px 9px; border-radius: 9px; }
  .search-result:hover, .search-result:focus { background: var(--hover); }
  .search-result > span { min-width: 0; }
  .search-result strong { font-weight: 500; font-size: 13px; display: block; white-space: nowrap; }
  .search-result small { display: block; font-size: 11px; color: var(--muted); }
  .context-menu { position: fixed; z-index: 30; width: 216px; padding: 5px; border: 1px solid var(--edge); background: var(--raised); border-radius: 11px; box-shadow: var(--shadow); }
  .context-menu .button { width: 100%; justify-content: flex-start; padding: 9px 10px; font-size: 12px; }
  .context-menu svg { width: 16px; height: 16px; }
  .context-menu .button:focus { background: var(--hover); outline-offset: -2px; }
  .diagnostics { font-size: 12px; color: var(--muted); }
  .diagnostics summary { padding-block: 5px; }
  .diagnostics dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; margin: 12px 0; }
  .diagnostics dt { color: var(--muted); }
  .diagnostics dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
  .usage-lines { font-size: 12px; margin: 12px 0; }
  .usage-row { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin: 10px 0; }
  .usage-row small { grid-column: 1 / -1; color: var(--muted); }
  .approval-card { margin-top: 24px; border: 1px solid var(--edge); border-radius: 14px; padding: 16px; }
  .approval-card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 550; }
  .approval-card pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; max-height: 180px; overflow: auto; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .skip-link { position: absolute; top: -60px; left: 12px; z-index: 50; padding: 10px; background: var(--raised); border: 1px solid var(--edge); border-radius: 8px; }
  .skip-link:focus { top: 12px; }
  .login-shell { display: grid; min-height: 100dvh; place-items: center; padding: 24px; }
  .login-card { width: min(100%, 380px); padding: 32px; border: 1px solid var(--edge); border-radius: 20px; background: var(--side); }
  .login-brand { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; margin-bottom: 30px; }
  .login-card h1 { font-size: 25px; font-weight: 550; letter-spacing: -.5px; margin: 0 0 8px; }
  .login-card > p { color: var(--muted); font-size: 13px; margin: 0 0 26px; }
  .login-card form { display: grid; gap: 9px; }
  .login-card label { font-size: 12px; }
  .login-card input:not([type="hidden"]) { background: var(--bg); border: 1px solid var(--edge); border-radius: 9px; padding: 12px; width: 100%; }
  .login-card button { background: var(--button); color: var(--button-text); padding: 12px; border-radius: 9px; font-weight: 550; margin-top: 12px; }
  .login-error { color: var(--danger); font-size: 12px; margin: 0; }
  .gaia-dialog, .context-menu, .attachment-chip, .message-attachment, .approval-card, .login-card, .outline-button { border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); }
  .dialog-heading { box-shadow: inset 0 -1px 0 var(--bevel-dark), 0 1px 0 var(--bevel-light); }
}
@layer prose {
  .prose { overflow-wrap: anywhere; }
  .prose > :first-child { margin-top: 0; }
  .prose > :last-child { margin-bottom: 0; }
  .prose p { margin: 0 0 16px; white-space: pre-wrap; }
  .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { font-size: 1.08em; font-weight: 600; line-height: 1.4; margin: 25px 0 12px; }
  .prose h2 { font-size: 1.25em; }
  .prose a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent), transparent 45%); text-underline-offset: 3px; }
  .prose a:hover { text-decoration-color: var(--text); }
  .native-file-chip { display: inline-flex; align-items: center; gap: 5px; vertical-align: baseline; max-width: 100%; border: 1px solid var(--edge); border-radius: 6px; background: var(--bubble); padding: 2px 6px; font-size: .85em; line-height: 1.5; text-align: left; }
  .native-file-chip > span:not(.sr-only) { overflow-wrap: anywhere; min-width: 0; }
  .native-file-chip svg { width: 13px; height: 13px; color: var(--muted); }
  .native-file-chip:hover { background: var(--hover); }
  .prose ul, .prose ol { padding-left: 25px; margin: 12px 0 18px; }
  .prose li { padding-left: 3px; margin: 6px 0; }
  .prose li .prose ul, .prose li .prose ol { margin: 6px 0; }
  .prose blockquote { border-left: 3px solid var(--edge); padding-left: 16px; margin: 18px 0; color: var(--muted); }
  .prose hr { border: 0; border-top: 1px solid var(--edge); margin: 24px 0; }
  .prose code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .85em; padding: 2px 5px; background: var(--bubble); border-radius: 4px; }
  .code-block { border: 1px solid var(--edge); background: var(--side); border-radius: 12px; overflow: hidden; margin: 16px 0; }
  .code-heading { display: flex; justify-content: space-between; align-items: center; background: var(--bubble); padding: 3px 8px 3px 14px; font-size: 11px; color: var(--muted); }
  .code-heading .icon-button { width: 28px; height: 28px; padding: 6px; }
  .code-block pre { overflow-x: auto; margin: 0; padding: 16px; line-height: 1.6; }
  .code-block pre code { background: transparent; padding: 0; border-radius: 0; overflow-wrap: normal; }
  .table-scroll { overflow: auto; border: 1px solid var(--edge); border-radius: 10px; margin: 16px 0; }
  .prose table { border-collapse: collapse; width: 100%; min-width: 260px; font-size: .87em; line-height: 1.5; }
  .prose th, .prose td { padding: 10px 13px; border-bottom: 1px solid var(--edge); text-align: left; min-width: 100px; }
  .prose th { font-weight: 550; background: var(--side); }
  .prose tr:last-child td { border-bottom: 0; }
  .code-block, .table-scroll { border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); }
  .code-heading { box-shadow: inset 0 -1px 0 var(--bevel-dark), 0 1px 0 var(--bevel-light); }
}
@layer responsive {
  #mobile-menu { display: none; }
  @media (max-width: 1100px) { .workspace { --sidebar-width: 230px; } .conversation { padding-inline: 24px; } .chat-header { padding-inline: 22px; } .setting-select select { max-width: 145px; } }
  @media (max-width: 760px) {
    .workspace, .workspace.collapsed { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 85vw); transform: translateX(-100%); z-index: 21; transition: transform .18s; padding-top: max(14px, env(safe-area-inset-top)); }
    .drawer-open .sidebar { transform: translateX(0); box-shadow: var(--bevel), var(--shadow); }
    .collapsed .brand, .collapsed .sidebar-label, .collapsed .sidebar-content { display: revert; }
    .collapsed .sidebar-content { flex: 1; }
    .collapsed .brand { display: flex; }
    .collapsed .primary-nav { display: grid; flex: none; }
    .collapsed .sidebar-top { justify-content: space-between; padding-left: 8px; }
    .collapsed .nav-action { justify-content: flex-start; }
    .collapsed .connection-dot { display: block; }
    .drawer-backdrop { position: fixed; inset: 0; z-index: 20; background: var(--scrim); }
    #mobile-menu { display: flex; }
    .chat-header { padding: max(10px, env(safe-area-inset-top)) 13px 10px; min-height: 62px; gap: 6px; }
    .chat-heading h1 { font-size: 14px; }
    .conversation { padding: 18px 18px 24px; }
    .composer-dock { padding: 0 10px max(6px, env(safe-area-inset-bottom)); }
    .composer { border-radius: 23px; padding: 11px 8px 9px; }
    #prompt { font-size: 16px; }
    .composer-feedback { font-size: 10px; padding-inline: 10px; }
    .messages { gap: 23px; }
    .message-user { max-width: 92%; font-size: 15px; padding: 10px 15px; }
    .message-assistant { font-size: 15px; }
    .row-menu { opacity: 1; width: 32px; height: 32px; }
    .task-link, .project-toggle { padding-block: 12px; }
    .empty-chat { padding-bottom: 7vh; }
    .setting-select select { max-width: 126px; font-size: 10px; }
    .effort-select select { max-width: 75px; }
    .speed-select select { max-width: 73px; }
    .composer-bottom { gap: 0; }
    .prompt-controls { gap: 0; }
    .composer-bottom > .icon-button { width: 32px; height: 32px; }
    .gaia-dialog { max-height: calc(100dvh - 24px); }
    .dialog-content { padding-inline: 18px; }
    .message-attachment img { max-width: 200px; }
    .notice { padding: 7px 15px; }
  }
  @media (max-width: 380px) { .prompt-controls { row-gap: 0; } .setting-select select { max-width: 110px; } .effort-select select { max-width: 65px; } .speed-select select { max-width: 65px; } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
}