/* VEIL's control layer: real refraction, with the original canvas left intact. */
#messages { scroll-behavior: auto; }
:root {
  --lg-blur: 2.5;
  --lg-refraction: 64;
  --lg-bezel: 24;
  --lg-aberration: 1.2;
  --lg-saturate: 1.35;
  --lg-highlight: 1.35;
  --lg-accent: #ff742b;
  --lg-switch-on: #ff742b;
  --ui-label: #49392f;
  --ui-muted: #796356;
  --ui-inset: rgba(112, 70, 43, .065);
  --ui-line: rgba(112, 70, 43, .12);
}
html[data-theme="dark"] {
  --ui-label: #f7eae0;
  --ui-muted: #c8b5a6;
  --ui-inset: rgba(255, 234, 213, .075);
  --ui-line: rgba(255, 234, 213, .13);
}

/* Backdrop roots here would prevent the engine from seeing the canvas. */
.app { isolation: auto; }
.topbar, .composer-wrap, .hero, .start-button { animation: none; filter: none; }
.hero, .hero.is-away { opacity: 1; transition: visibility 0s; }
html body [data-lg] {
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: none;
  color: var(--ui-label);
}
.topbar { padding: 24px 36px; }
.brand { min-height: 44px; }
.top-actions { gap: 12px; }
.status-pill { color: var(--ui-muted); margin-right: 6px; font-size: 10px; }
.utility-actions {
  --r: 28px;
  display: flex;
  gap: 2px;
  padding: 5px;
  align-items: center;
}
html body .utility-actions :is(.icon-button, .soft-button) {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ui-label);
}
.utility-actions .soft-button span { display: none; }
html body .utility-actions button:hover { background: var(--ui-inset); transform: none; }
html body .utility-actions button:active { background: var(--ui-line); }
html body .download-button {
  --r: 27px;
  height: 54px;
  padding: 0 20px;
  font-weight: 550;
  color: var(--orange-dark);
}
html[data-theme="dark"] body .download-button { color: #ffb280; }
.start-button { --r: 32px; }
.start-button > .lg-content { display: flex; align-items: center; gap: 28px; }
.composer-wrap { bottom: 12px; }
html body .composer {
  --r: 32px;
  border-radius: 32px;
  min-height: 66px;
  padding: 8px;
  box-shadow: 0 14px 42px -18px rgba(97, 50, 26, .35), 0 2px 6px rgba(97, 50, 26, .04);
}
.composer > .lg-content { display: flex; align-items: flex-end; gap: 6px; width: 100%; min-width: 0; }
html body .composer:focus-within { box-shadow: 0 0 0 2px rgba(255, 106, 26, .24), 0 16px 44px -16px rgba(97, 50, 26, .28); }
.composer textarea { color: var(--ui-label); font-size: 15px; line-height: 24px; }
.composer textarea::placeholder { color: var(--ui-muted); opacity: .85; }
html body .attach-button { color: var(--ui-muted); background: transparent; }
html body .send-button { background: linear-gradient(145deg, #ff9553, #f56620); color: white; }
html body .send-button:disabled { background: var(--ui-inset); color: var(--ui-muted); opacity: 1; box-shadow: none; }
.composer-meta { display: none; }
.composer-state, .reasoning-label { color: var(--ui-muted); opacity: 1; }
.composer-tools { gap: 14px; }
.reasoning-control { min-height: 32px; gap: 6px; }
.reasoning-label { font-size: 11px; }
html body .response-mode-control { min-height: 32px; background: var(--ui-inset); border: 1px solid var(--ui-line); color: var(--ui-label); }
.response-mode-control select { color: var(--ui-label); font-size: 11px; width: 84px; max-width: none; }
.response-mode-control select option { background: var(--warm-white); color: var(--ink); }
.quick-prompts { justify-content: flex-start; gap: 8px; margin: 0 6px 14px; }
html body .prompt-chip { background: rgba(255, 250, 246, .5); color: var(--ui-label); border: 1px solid rgba(255,255,255,.65); backdrop-filter: none; -webkit-backdrop-filter: none; height: 36px; font-size: 11px; }
html[data-theme="dark"] body .prompt-chip { background: rgba(30,23,20,.55); border-color: var(--ui-line); }
.conversation { bottom: 208px; }
.conversation-fade { mask-image: none; -webkit-mask-image: none; }
/* A separate feathered veil softens the clipping edge without masking the
   ancestor of glass surfaces (which would break their backdrop sampling). */
.conversation::after {
  content: '';
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(249,235,226,.97), rgba(249,235,226,.7) 22%, rgba(249,235,226,.22) 62%, transparent);
}
html[data-theme="dark"] .conversation::after {
  background: linear-gradient(to bottom, rgba(29,27,33,.97), rgba(29,27,33,.7) 22%, rgba(29,27,33,.22) 62%, transparent);
}
.messages { padding-top: 16px; padding-bottom: 28px; }
.message-content { color: var(--ui-label); }
/* Context remains a quiet readout, not a competing glass control. */
html body .context-dock {
  left: max(18px, env(safe-area-inset-left));
  right: auto;
  bottom: max(16px, env(safe-area-inset-bottom));
  background: rgba(255,250,246,.55);
  border: 1px solid var(--ui-line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ui-muted);
  animation: none;
}
html[data-theme="dark"] body .context-dock { background: rgba(28,22,18,.6); }
.context-copy small { color: var(--ui-muted); }
html body .drawer, html body .command-palette { opacity: 1; transition: visibility .18s; transform: none; }
html body .drawer { --r: 30px; border-radius: 30px; display: flex; flex-direction: column; }
.drawer-header, .drawer-tabs { flex-shrink: 0; }
.drawer-content { flex: 1; min-height: 0; height: auto; overflow-y: auto; margin-bottom: 16px; border-radius: 0 0 20px 20px; }
html body .drawer > .lg__tint, html body .command-palette > .lg__tint { background: rgba(255,249,244,.9); }
html[data-theme="dark"] body .drawer > .lg__tint, html[data-theme="dark"] body .command-palette > .lg__tint { background: rgba(33,27,24,.92); }
html body .command-palette { --r: 28px; transform: translateX(-50%); }
.drawer-header { padding: 26px 26px 20px; }
.drawer-tabs { border: 1px solid var(--ui-line); background: var(--ui-inset); }
.drawer-tab { color: var(--ui-muted); }
.drawer-tab.is-active { color: var(--ui-label); }
.drawer :is(.icon-button, .soft-button) { backdrop-filter: none; -webkit-backdrop-filter: none; }
.setting-label, .setting-description, .settings-note { color: var(--ui-muted); }
html body :is(button,a,select,textarea,input):focus-visible { outline: 2px solid #e96d2a; outline-offset: 4px; }
html body textarea:focus-visible { outline: none; }
@media (max-width: 900px) {
  .topbar { padding: 18px 22px; }
  .status-pill { display: none; }
}
@media (max-width: 680px) {
  .topbar { flex-wrap: nowrap; gap: 10px; padding: 12px; }
  .brand-word { display: none; }
  .brand { gap: 0; flex: 0 0 36px; }
  .top-actions { width: auto; flex-wrap: nowrap; gap: 8px; justify-content: flex-end; }
  .top-actions .download-actions { margin: 0; flex: 0 0 auto; }
  #historyButton { display: inline-flex; }
  .utility-actions { padding: 3px; gap: 0; margin-left: 0; --r: 25px; }
  html body .utility-actions :is(.icon-button,.soft-button) { display: inline-flex; width: 42px; height: 44px; min-width: 42px; }
  html body .download-button { width: 46px; height: 50px; padding: 0; justify-content: center; }
  .download-button span { display: none; }
  .composer-wrap { left: 12px; right: 12px; width: auto; bottom: max(8px, env(safe-area-inset-bottom)); }
  html body .composer { min-height: 62px; padding: 6px; }
  .composer textarea { font-size: 16px; }
  .composer-meta { padding: 8px 4px 0; justify-content: flex-end; }
  .composer-state { display: none; }
  .composer-tools { justify-content: flex-end; gap: 12px; }
  .reasoning-control { min-height: 36px; }
  .conversation { top: 92px; bottom: 190px; }
  .quick-prompts { overflow-x: auto; justify-content: flex-start; margin: 0 0 12px; scrollbar-width: none; }
  .prompt-chip { padding: 0 12px; }
  html body .context-dock { left: max(14px, env(safe-area-inset-left)); right: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
  html body .drawer { inset: 8px; width: auto; }
  .drawer-header { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html body [data-lg] { scale: 1 !important; }
}
body.reduce-motion [data-lg] { scale: 1 !important; }
/* Full-material edition: content and controls share the same glass language. */
html body .hero[data-lg] {
  --r: 38px;
  border-radius: 38px;
  padding: 30px 32px;
  width: min(620px, 47vw);
  box-shadow: 0 24px 60px -24px rgba(85,44,25,.26);
}
html body :is(.hero,.message)[data-lg] > .lg__tint { background: rgba(255,250,245,.33); }
html[data-theme="dark"] body :is(.hero,.message)[data-lg] > .lg__tint { background: rgba(28,24,23,.45); }
.hero h1 { font-size: clamp(40px, 4.3vw, 66px); }
.hero-question { font-size: 22px; }
html body .hero .start-button {
  margin-top: 26px;
  border: 1px solid rgba(255,255,255,.75);
  background: linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,226,200,.2));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), 0 8px 20px -10px rgba(85,44,25,.25);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ui-label);
}
.conversation { opacity: 1; visibility: hidden; transition: none; }
.conversation.is-active { visibility: visible; }
html body .message[data-lg] {
  --r: 30px;
  border-radius: 30px;
  max-width: 100%;
  padding: 22px 24px 18px;
  animation: none;
  filter: none;
  opacity: 1;
  box-shadow: 0 14px 34px -20px rgba(88,45,22,.35);
}
html body .message.user[data-lg] { --r: 26px; border-radius: 26px; max-width: 82%; padding: 15px 20px 12px; }
html body .message.user .message-body { padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--ui-label); }
.message-role { margin-bottom: 12px; }
html body .message.user .message-role { color: var(--ui-muted); font-size: 8px; }
html body .message-body { color: var(--ui-label); }
html body .message-actions { opacity: 1; transform: none; margin-top: 16px; flex-wrap: wrap; }
html body .message-action { color: var(--ui-muted); background: rgba(255,255,255,.14); border: 1px solid var(--ui-line); min-height: 30px; }
html body .message-action:hover { background: rgba(255,255,255,.35); color: var(--ui-label); }
html body .message .code-block {
  background: linear-gradient(135deg,rgba(255,255,255,.4),rgba(255,233,211,.13));
  color: #493329;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 0 -1px 2px rgba(113,59,25,.09), 0 10px 22px -18px rgba(50,30,20,.4);
  border-radius: 20px;
}
html body .code-toolbar { background: rgba(255,255,255,.17); border-bottom: 1px solid var(--ui-line); }
html body .code-block :is(pre,code) { color: var(--ui-label); text-shadow: none; }
html body :is(.code-language,.code-filename,.code-tool) { color: var(--ui-muted); }
html body .code-tool { border: 1px solid var(--ui-line); background: rgba(255,255,255,.18); border-radius: 12px; }
html body .markdown-table-wrap {
  background: linear-gradient(130deg,rgba(255,255,255,.36),rgba(255,250,242,.08));
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 8px 20px -16px rgba(70,35,15,.25);
}
html body .markdown-table th { background: rgba(255,255,255,.25); backdrop-filter: none; -webkit-backdrop-filter: none; }
html body .markdown-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.1); }
html body .veil-activity {
  isolation: auto;
  background: linear-gradient(120deg,rgba(255,255,255,.42),rgba(255,234,218,.12));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7);
}
.activity-title, .activity-step-title { color: var(--ui-label); }
.activity-kicker, .activity-elapsed { color: var(--ui-muted); }
html body .prompt-chip[data-lg] { --r: 20px; border-radius: 20px; height: 38px; font-weight: 550; overflow: visible; }
.quick-prompts { overflow: visible; min-height: 38px; }
.quick-prompts.is-away { opacity: 1; visibility: hidden; min-height: 0; }
html body .composer-tools[data-lg] { --r: 24px; border-radius: 24px; padding: 5px 12px; min-height: 44px; gap: 14px; }
html body .response-mode-control { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.45); box-shadow: inset 0 1px 1px rgba(255,255,255,.45); }
html body .reasoning-track { background: rgba(94,70,55,.13); box-shadow: inset 0 1px 3px rgba(50,30,20,.2), 0 1px 0 rgba(255,255,255,.7); }
html body .reasoning-track::after { background: linear-gradient(135deg,white,rgba(255,255,255,.35)); box-shadow: inset 0 1px 0 white, 0 1px 4px rgba(50,30,20,.25); }
html body .context-dock[data-lg] { --r: 24px; border-radius: 24px; padding: 9px 14px; }
.memory-glimpse { animation: none; opacity: 1; filter: none; transition: visibility 0s; }
.memory-glimpse.is-away { opacity: 1; }
html body .recent-memory[data-lg] { --r: 20px; padding: 14px; border-radius: 20px; }
html body .attachment-chip[data-lg] { --r: 18px; border-radius: 18px; animation: none; }
html body .toast[data-lg] { --r: 24px; border-radius: 24px; animation: none; }
html body .drawer > .lg__tint, html body .command-palette > .lg__tint { background: rgba(255,249,243,.64); }
html body :is(.settings-group,.history-item,.drawer-tabs,.command-input) {
  background: linear-gradient(130deg,rgba(255,255,255,.38),rgba(255,246,236,.1));
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.8), inset 0 -1px 2px rgba(110,55,20,.05), 0 8px 18px -16px rgba(70,35,20,.3);
}
html body :is(.drawer-tab.is-active,.drawer .icon-button,.drawer .soft-button,.background-action,.danger-button,.command-item:hover,.api-status-grid>div) {
  background: linear-gradient(140deg,rgba(255,255,255,.42),rgba(255,255,255,.12));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.75), inset 0 0 0 1px rgba(255,255,255,.3), 0 4px 10px -6px rgba(70,35,20,.2);
}
.toggle-copy small, .settings-group>p, .api-status-source { color: var(--ui-muted); }
.glass-native-switch, .glass-native-range { display: none; }
.veil-glass-slider { margin: 6px 0 2px; }
.veil-glass-slider .lg-slider__track { background: rgba(120,80,50,.1); box-shadow: inset 0 1px 3px rgba(60,30,20,.15),0 1px 0 rgba(255,255,255,.65); }
.veil-glass-slider .lg-knob { width: 36px; }
html body .utility-actions :is(.icon-button,.soft-button) { background: linear-gradient(140deg,rgba(255,255,255,.3),rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.veil-glass-switch { width: 56px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.veil-glass-switch .lg-switch__track { border-radius: inherit; background: rgba(90,60,40,.1); box-shadow: inset 0 1px 3px rgba(60,30,20,.15), 0 1px 0 rgba(255,255,255,.7); }
.veil-glass-switch .lg-knob { width: 30px; }
.veil-glass-switch .lg-knob__solid { background: linear-gradient(130deg,#fff,rgba(255,255,255,.55)); }
.background-range input[type="range"]::-webkit-slider-thumb { background: linear-gradient(130deg,white,rgba(255,248,239,.6)); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 2px 8px rgba(70,35,20,.2),inset 0 1px 0 white; }
html[data-theme="dark"] body :is(.hero .start-button,.message .code-block,.markdown-table-wrap,.veil-activity,.settings-group,.history-item,.drawer-tabs,.command-input) {
  background: linear-gradient(130deg,rgba(234,223,215,.12),rgba(38,29,24,.16));
  border-color: rgba(255,255,255,.22);
  color: var(--ui-label);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.28), 0 8px 20px -15px rgba(0,0,0,.4);
}
html[data-theme="dark"] body :is(.drawer-tab.is-active,.drawer .icon-button,.drawer .soft-button,.background-action,.danger-button,.command-item:hover,.api-status-grid>div) {
  background: linear-gradient(130deg,rgba(255,255,255,.15),rgba(255,255,255,.03));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.12);
}
html[data-theme="dark"] body .drawer > .lg__tint, html[data-theme="dark"] body .command-palette > .lg__tint { background: rgba(31,26,24,.66); }
@media (max-width: 680px) {
  html body .hero[data-lg] { width: auto; left: 18px; right: 18px; padding: 26px 22px; --r: 30px; border-radius: 30px; }
  .hero h1 { font-size: clamp(32px,9vw,48px); }
  .hero-question { font-size: 17px; }
  html body .hero .start-button { width: 100%; font-size: 10px; }
  html body .message[data-lg] { --r: 24px; border-radius: 24px; padding: 18px 16px 14px; }
  html body .message.user[data-lg] { padding: 14px 16px; }
  html body .composer-tools[data-lg] { padding: 3px 8px; gap: 10px; min-height: 42px; }
  .composer-meta { padding: 8px 0 0; }
  .quick-prompts { overflow-x: auto; padding: 4px 0; min-height: 46px; }
  .quick-prompts.is-away { padding: 0; min-height: 0; }
}
@media (max-height: 720px) and (max-width: 680px) {
  html body .hero[data-lg] { top: 38%; padding: 20px; }
  .hero-question { margin-top: 10px; }
  html body .hero .start-button { margin-top: 16px; }
}
@media (prefers-reduced-transparency: reduce) {
  html body [data-lg] > .lg__tint { background: #fff8f3; }
  html[data-theme="dark"] body [data-lg] > .lg__tint { background: #25201d; }
  [data-lg] > .lg__refract { display: none; }
}