/* Matches XnanBot/UI/DesignSystem.swift: system canvas, secondary surfaces,
   monochrome controls, 20 pt bubbles, 28 pt composer, and 44 pt touch targets. */
:root {
  color-scheme: light;
  --bg: #fff;
  --surface: #f2f2f7;
  --surface-hover: #e9e9ef;
  --ink: #171717;
  --muted: #6e6e73;
  --line: #00000014;
  --focus: #00000040;
  --action: #000;
  --on-action: #fff;
  --disabled: #d8d8de;
  --disabled-ink: #76767d;
  --header: #ffffffed;
  --ripple: #94949c30;
  --ripple-shine: #ffffffb3;
  --lime: #c9f56b;
  --spring: cubic-bezier(.22, 1, .36, 1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000;
  --surface: #1c1c1e;
  --surface-hover: #2c2c2e;
  --ink: #f5f5f7;
  --muted: #a1a1a6;
  --line: #ffffff1f;
  --focus: #ffffff59;
  --action: #fff;
  --on-action: #000;
  --disabled: #363638;
  --disabled-ink: #8e8e93;
  --header: #000000ed;
  --ripple: #b4b4bc29;
  --ripple-shine: #ffffff05;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100svh; display: flex; flex-direction: column; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button, textarea { font: inherit; }
button { color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
button:disabled { cursor: default; }
::selection { background: var(--lime); color: #172019; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 14px; background: var(--action); color: var(--on-action); z-index: 100; }
.skip-link:focus { top: 10px; }

.header { height: 104px; padding: 0 4.3%; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 20; flex-shrink: 0; }
.wordmark { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 650; letter-spacing: -.7px; min-height: 44px; }
.wordmark img { width: 36px; height: 36px; }
.header-actions { display: flex; gap: 8px; align-items: center; }
.app-link { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; background: var(--surface); border-radius: 24px; font-size: 12px; font-weight: 500; margin-right: 8px; }
.app-link svg { width: 16px; height: 16px; }
.app-link:hover { background: var(--surface-hover); }
.text-button { font-size: 12px; min-height: 44px; padding: 0 8px; }
.text-button span { margin-left: 5px; color: var(--muted); }
.appearance-button, .motion-button { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.appearance-button:hover, .motion-button:hover, .new-chat:hover { background: var(--surface); }
.appearance-button svg { width: 19px; height: 19px; }
.motion-button { gap: 4px; }
.motion-button span { width: 2px; height: 12px; background: var(--muted); border-radius: 2px; }
.motion-button[aria-pressed="true"] span:first-child { transform: translateX(2px) rotate(-30deg); height: 9px; }
.motion-button[aria-pressed="true"] span:last-child { transform: translateX(-2px) translateY(6px) rotate(30deg); height: 9px; }
.island-position { position: absolute; left: 50%; top: 27px; transform: translateX(-50%); }
.island { background: #111; color: #fff; border: 1px solid #ffffff14; border-radius: 36px; width: 194px; height: 50px; padding: 6px 16px 6px 9px; display: flex; align-items: center; gap: 6px; box-shadow: 0 6px 16px #0000000a; transition: width .65s var(--spring), height .65s var(--spring), box-shadow .4s; overflow: hidden; text-align: left; }
.island:hover, .island:focus-visible, .island.greeting { width: 238px; height: 66px; box-shadow: 0 8px 24px #00000018; }
.island-avatar { width: 38px; height: 38px; flex-shrink: 0; transition: transform .6s var(--spring); }
.island:hover .island-avatar, .island.greeting .island-avatar { transform: rotate(-12deg) scale(1.15); }
.island-copy { display: flex; flex-direction: column; font-size: 12px; white-space: nowrap; flex: 1; }
.island-sub { font-size: 10px; color: #ababaf; max-height: 0; opacity: 0; transition: all .5s var(--spring); }
.island:hover .island-sub, .island:focus-visible .island-sub, .island.greeting .island-sub { max-height: 20px; opacity: 1; margin-top: 5px; }
.island-wave { display: flex; align-items: center; gap: 3px; height: 20px; margin-left: 7px; }
.island-wave i { width: 2px; border-radius: 2px; background: var(--lime); height: 5px; animation: wave 2s ease-in-out infinite; }
.island-wave i:nth-child(2) { height: 13px; animation-delay: -.5s; }
.island-wave i:nth-child(3) { height: 9px; animation-delay: -1s; }
.island-wave i:nth-child(4) { height: 4px; animation-delay: -1.5s; }
.island.thinking { width: 230px; }
.island.thinking .island-wave i { animation-duration: .65s; }
.new-chat { display: flex; align-items: center; gap: 7px; border-radius: 22px; padding: 0 12px; font-size: 12px; min-height: 44px; }
.new-chat svg { width: 18px; height: 18px; }

.main { width: 100%; max-width: 1000px; margin: 0 auto; flex: 1; padding: 16px 24px 32px; }
.welcome { max-height: 510px; opacity: 1; transition: max-height .8s var(--spring), opacity .35s, transform .8s var(--spring); transform-origin: top center; }
.scene { height: 288px; position: relative; max-width: 720px; margin: 0 auto; isolation: isolate; }
.scene-eyebrow { position: absolute; top: 13px; width: 100%; text-align: center; font-size: 9px; letter-spacing: 2.5px; color: var(--muted); font-weight: 500; }
.water { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 600px; height: 166px; pointer-events: none; }
.water-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #c9f56b12, transparent 66%); }
.water-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid var(--ripple); border-radius: 50%; box-shadow: 0 2px 2px var(--ripple-shine), inset 0 -2px 2px var(--ripple-shine); }
.ring-one { width: 220px; height: 58px; }
.ring-two { width: 360px; height: 97px; opacity: .75; }
.ring-three { width: 510px; height: 140px; opacity: .5; }
.water canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mascot-shadow { position: absolute; width: 95px; height: 15px; border-radius: 50%; background: #657d3042; filter: blur(8px); top: 77px; left: 50%; transform: translateX(-50%); animation: shadow-breathe 4.8s ease-in-out infinite; }
.mascot-position { position: absolute; left: 50%; top: 38px; width: 190px; height: 190px; margin-left: -95px; transition: transform .5s var(--spring); z-index: 2; }
.mascot { padding: 0; width: 100%; height: 100%; animation: float 4.8s ease-in-out infinite; border-radius: 45%; position: relative; }
.mascot-art { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 0 #91bb4430); transition: filter .3s; }
.mascot-body { stroke: none; }
.mascot-face { transform-origin: center; transition: transform .25s; }
.mascot:hover .mascot-art { filter: drop-shadow(0 10px 0 #91bb4440); }
.eye-n { transform-box: fill-box; transform-origin: center; animation: blink 7s infinite; }
.mascot.poked { animation: poke .75s var(--spring); }
.hello-note { position: absolute; left: calc(50% + 116px); top: 75px; font-size: 12px; color: var(--muted); transform: rotate(8deg); }
.hello-note span { display: block; white-space: nowrap; }
.hello-note svg { height: 37px; width: 49px; stroke: var(--muted); stroke-width: 1; position: absolute; left: -22px; top: 20px; opacity: .6; }
.scene-spark { position: absolute; color: var(--muted); font-size: 22px; font-weight: 300; animation: twinkle 5s ease-in-out infinite; }
.spark-one { left: calc(50% - 156px); top: 100px; font-size: 17px; }
.spark-two { left: calc(50% + 130px); top: 184px; font-size: 20px; animation-delay: -2s; }
.scene-caption { position: absolute; bottom: 3px; text-align: center; width: 100%; font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.hero-copy { text-align: center; margin-top: 26px; }
.hero-copy h1 { font-size: 44px; line-height: 1.4; letter-spacing: -1.8px; font-weight: 650; margin: 0; }
.highlight { position: relative; display: inline-block; z-index: 0; }
.highlight svg { position: absolute; bottom: 0; left: -3%; width: 106%; height: 9px; stroke: var(--lime); stroke-width: 7px; z-index: -1; }
.period { margin-left: -5px; }
.hero-copy p { font-size: 14px; color: var(--muted); margin: 16px 0 0; line-height: 1.8; }

.composer-section { max-width: 720px; margin: 34px auto 0; position: relative; }
.composer { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: end; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 6px; transition: border-color .2s; }
.composer:focus-within { border-color: var(--focus); }
.composer textarea { border: 0; outline: 0; resize: none; background: transparent; width: 100%; min-height: 44px; max-height: 150px; font-size: 16px; line-height: 24px; color: var(--ink); padding: 10px 4px; display: block; }
.composer textarea::placeholder { color: var(--muted); }
.attach-button, .send-button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.attach-button:hover { background: var(--surface-hover); }
.attach-button svg { width: 23px; height: 23px; }
.send-button { background: var(--action); color: var(--on-action); transition: opacity .2s, transform .3s var(--spring); }
.send-button:hover:not(:disabled) { opacity: .8; transform: translateY(-1px); }
.send-button:disabled { background: var(--disabled); color: var(--disabled-ink); }
.send-button svg { height: 22px; width: 22px; stroke-width: 2; }
.send-button.is-stop svg { display: none; }
.send-button.is-stop:after { content: ""; width: 12px; height: 12px; background: currentColor; border-radius: 2px; }
.suggestions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.suggestion { display: flex; align-items: center; text-align: left; gap: 10px; border-radius: 20px; padding: 16px 14px; min-width: 0; background: var(--surface); transition: background .2s, transform .3s var(--spring); }
.suggestion:hover { background: var(--surface-hover); transform: translateY(-2px); }
.suggestion-icon { display: grid; place-items: center; width: 30px; height: 34px; flex-shrink: 0; }
.suggestion-icon svg { height: 21px; width: 21px; }
.suggestion>span:nth-child(2) { display: flex; flex-direction: column; gap: 6px; }
.suggestion strong { font-size: 13px; font-weight: 550; white-space: nowrap; }
.suggestion small { font-size: 11px; color: var(--muted); line-height: 1.5; }
.suggestion .suggestion-arrow { margin-left: auto; width: 12px; height: 12px; stroke: var(--muted); }
.composer-note { text-align: center; color: var(--muted); font-size: 11px; margin: 20px 0 0; display: flex; justify-content: center; align-items: center; gap: 6px; }
.tiny-spark { font-size: 12px; }
.footer { padding: 24px 4.3%; display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); gap: 16px; flex-shrink: 0; }
.footer-presence { display: flex; align-items: center; gap: 8px; }
.footer a { display: flex; align-items: center; min-height: 44px; gap: 8px; }
.status-dot { display: inline-block; height: 5px; width: 5px; border-radius: 50%; background: #86a94a; flex-shrink: 0; }
.demo-label { font-size: 10px; }
.input-error { color: #d03830; font-size: 12px; margin: 10px 8px; line-height: 1.5; }
.attachment { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; border-radius: 18px; padding: 0 4px 0 14px; background: var(--bg); width: max-content; max-width: 100%; font-size: 12px; margin: 4px; }
.attachment>svg { height: 16px; width: 16px; }
.attachment>span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment button { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; }
.attachment button svg { width: 14px; height: 14px; }

.conversation { max-width: 720px; margin: 24px auto 0; animation: arrive .6s var(--spring); }
.chat-heading { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 8px 0 24px; border-bottom: 1px solid var(--line); }
.chat-heading-note { margin-left: auto; font-size: 11px; }
.messages { padding: 28px 0 8px; display: flex; flex-direction: column; gap: 24px; }
.message { display: flex; flex-direction: column; align-items: flex-start; animation: arrive .4s var(--spring); font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.message.user { align-items: flex-end; }
.message-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; margin: 0 4px 7px; }
.message-label img { width: 24px; height: 24px; }
.message-content { white-space: pre-wrap; max-width: 90%; padding: 14px 16px; border-radius: 20px; }
.message.user .message-content { background: #000; color: #fff; border: 1px solid #ffffff20; }
.message.assistant .message-content { background: var(--surface); }
.message.assistant .message-content:empty { display: none; }
.message-file { font-size: 11px; margin-top: 6px; color: var(--muted); }
.typing-dots { display: flex; gap: 5px; padding: 20px; border-radius: 20px; background: var(--surface); }
.typing-dots i { height: 5px; width: 5px; background: var(--muted); border-radius: 50%; animation: wave 1s infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
.chat-mode .welcome { max-height: 0; opacity: 0; transform: translateY(-70px) scale(.8); overflow: hidden; pointer-events: none; }
.chat-mode .suggestions { display: none; }
.chat-mode .header { position: sticky; top: 0; background: var(--header); backdrop-filter: blur(16px); }
.chat-mode .main { display: flex; flex-direction: column; min-height: calc(100svh - 196px); }
.chat-mode .conversation { width: 100%; flex: 1; }
.chat-mode .composer-section { width: 100%; position: sticky; bottom: 0; padding: 16px 0 max(16px,env(safe-area-inset-bottom)); margin-top: 16px; background: linear-gradient(transparent,var(--bg) 16px); z-index: 10; }
.chat-mode .composer-note { margin-top: 12px; }

.about-dialog { border: 1px solid var(--line); border-radius: 36px; background: var(--bg); padding: 36px; max-width: 440px; width: calc(100% - 36px); color: var(--ink); box-shadow: 0 25px 100px #00000026; }
.about-dialog::backdrop { background: #00000050; backdrop-filter: blur(7px); }
.about-dialog>img { display: block; margin-bottom: 16px; }
.dialog-close { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); }
.dialog-close svg { height: 18px; width: 18px; }
.dialog-eyebrow { font-size: 10px; letter-spacing: 2px; color: var(--muted); }
.about-dialog h2 { font-size: 32px; letter-spacing: -1px; line-height: 1.5; font-weight: 600; margin: 15px 0; }
.about-dialog p { font-size: 14px; color: var(--muted); line-height: 1.9; }
.about-details { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.about-details>span { font-size: 12px; }
.about-details p { font-size: 12px; }
.dialog-cta { border-radius: 28px; background: var(--action); color: var(--on-action); display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 20px; font-size: 14px; margin-top: 24px; min-height: 52px; }

@keyframes float { 0%,100%{transform:translateY(0) rotate(-3deg) scale(1.01,.99)} 50%{transform:translateY(-13px) rotate(4deg) scale(.99,1.01)} }
@keyframes shadow-breathe { 0%,100%{opacity:.6;transform:translateX(-50%) scale(1.1)} 50%{opacity:.3;transform:translateX(-50%) scale(.8)} }
@keyframes wave { 0%,100%{transform:scaleY(.7);opacity:.6} 50%{transform:scaleY(1.25);opacity:1} }
@keyframes blink { 0%,42%,46%,100%{transform:scaleY(1)} 44%{transform:scaleY(.15)} }
@keyframes twinkle { 0%,100%{opacity:.4;transform:rotate(0deg) scale(.9)} 50%{opacity:.8;transform:rotate(30deg) scale(1.1)} }
@keyframes poke { 0%{transform:translateY(0) scale(1,1)} 20%{transform:translateY(10px) scale(1.15,.85)} 50%{transform:translateY(-30px) rotate(12deg) scale(.92,1.08)} 75%{transform:translateY(3px) rotate(-7deg)} 100%{transform:translateY(0) scale(1)} }
@keyframes arrive { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
body.motion-paused *, body.motion-paused *:before, body.motion-paused *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media(prefers-reduced-motion:reduce) { body:not(.motion-enabled) *, body:not(.motion-enabled) *:before, body:not(.motion-enabled) *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media(min-height:950px) and (min-width:761px) { .main{padding-top:36px}.scene{height:310px}.mascot-position{top:54px}.hello-note{top:92px}.scene-eyebrow{top:23px}.hero-copy{margin-top:28px}.composer-section{margin-top:38px} }
@media(max-width:1100px) { .header{padding:0 28px}.about-button{display:none}.footer{padding-left:28px;padding-right:28px} }
@media(max-width:760px) {
  .header{height:140px;align-items:flex-start;padding:18px 20px 0}
  .wordmark{font-size:19px;gap:6px}.wordmark img{width:32px;height:32px}
  .header-actions{gap:0}.app-link{padding:0 12px;margin-right:4px}.app-link svg{display:none}
  .island-position{top:84px}.island{height:44px;width:184px}.island-avatar{height:32px;width:32px}
  .island:hover,.island:focus-visible,.island.greeting{height:56px;width:224px}
  .main{padding:12px 20px 24px}.scene{height:250px}.scene-eyebrow{top:14px;font-size:8px;letter-spacing:2px}
  .mascot-position{top:42px;width:165px;height:165px;margin-left:-82.5px}
  .water{width:100%;max-width:560px;bottom:16px;height:135px}.ring-one{width:35%;height:32%}.ring-two{width:58%;height:59%}.ring-three{width:85%;height:82%}.mascot-shadow{top:62px;width:75px}
  .hello-note{left:calc(50% + 82px);top:79px;font-size:10px}.hello-note svg{width:38px;height:30px;left:-13px;top:16px}
  .spark-one{left:calc(50% - 117px);top:105px;font-size:14px}.spark-two{left:calc(50% + 104px);top:174px;font-size:16px}
  .scene-caption{font-size:9px;bottom:0}.hero-copy{margin-top:23px}.hero-copy h1{font-size:34px;letter-spacing:-1.3px}.hero-copy p{font-size:12px;margin-top:12px}
  .composer-section{margin-top:28px}.suggestions{gap:8px;margin-top:16px}.suggestion{padding:14px 10px;gap:6px}.suggestion .suggestion-arrow{display:none}.suggestion strong{font-size:12px}.suggestion small{font-size:10px}
  .footer{font-size:10px;flex-wrap:wrap;padding:12px 20px 20px;gap:4px 16px}.footer-presence{flex:1}.demo-label{order:3;width:100%;font-size:9px}
  .chat-mode .header{height:140px}.chat-mode .main{min-height:calc(100svh - 140px);padding-top:0;padding-bottom:0}.chat-mode .app-link{display:none}.chat-mode .new-chat{padding:0 12px}.chat-mode .conversation{margin-top:12px}.chat-mode .footer{display:none}
  .chat-heading{padding:8px 0 18px}.chat-heading-note{font-size:10px}.message{font-size:15px}.message-content{max-width:94%}
}
@media(max-width:520px) {
  .header{padding-left:16px;padding-right:12px}.wordmark{font-size:18px}.app-link{font-size:11px;gap:5px;padding:0 10px}
  .hero-copy h1{font-size:clamp(24px,7.69vw,30px)}.hero-copy p{font-size:11px;line-height:1.9}.highlight svg{height:7px}
  .suggestion{flex-direction:column;align-items:flex-start;padding:14px 12px;border-radius:20px;gap:8px}.suggestion-icon{height:24px;width:24px}.suggestion-icon svg{height:20px;width:20px}.suggestion strong{font-size:11px}.suggestion small{font-size:9px}.suggestion>span:nth-child(2){gap:5px}
  .composer-note{font-size:10px;margin-top:18px}.about-dialog{padding:28px}.about-dialog h2{font-size:29px}
}
@media(max-width:360px) { .wordmark{font-size:16px;gap:4px}.wordmark img{width:28px;height:28px}.app-link{font-size:10px;padding:0 8px}.hello-note{left:calc(50% + 68px);font-size:8px}.suggestion{padding-left:9px;padding-right:9px}.suggestion strong{font-size:10px}.footer-presence{font-size:9px}.main{padding-left:16px;padding-right:16px} }

/* Workspace controls use the same grouped surfaces and generous hit targets as iOS. */
.panel-dialog { width:min(520px,calc(100vw - 32px)); max-height:85svh; padding:24px; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:28px; box-shadow:0 20px 90px #0003; }
dialog::backdrop { background:#0005; backdrop-filter:blur(6px); }
.panel-title { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px; }
.panel-title h2 {font-size:23px;letter-spacing:-.6px;margin:0;}
.panel-title button {width:44px;height:44px;border-radius:50%;background:var(--surface);}
.panel-dialog input:not([type=checkbox]), .panel-dialog textarea, .panel-dialog select {display:block;width:100%;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;padding:13px;margin:8px 0 18px;min-height:44px;}
.panel-dialog label {display:block;font-size:14px;line-height:1.6;}
.panel-dialog textarea {resize:vertical;}
.panel-dialog h3 {font-size:16px;margin-top:26px;}
.muted {font-size:13px;color:var(--muted);line-height:1.7;}
.primary {background:var(--action);color:var(--on-action);padding:12px 20px;min-height:46px;border-radius:24px;font-weight:550;}
.panel-dialog .primary {width:100%;margin:12px 0;}
.primary:disabled {opacity:.45;}
.list-action,.danger {min-height:44px;padding:10px 4px;font-size:14px;}
.danger {color:#cf3446;}
.bot-row {display:flex;gap:14px;width:100%;text-align:left;border-radius:18px;padding:15px 12px;align-items:center;margin:5px 0;}
.bot-row:hover,.bot-row[aria-current=true] {background:var(--surface);}
.bot-row img {width:42px;height:42px;}
.bot-row span {min-width:0;}
.bot-row strong,.bot-row small {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bot-row strong {font-size:15px;margin-bottom:5px;}
.bot-row small {font-size:12px;color:var(--muted);}
#bot-list {max-height:48svh;overflow:auto;margin:12px 0;}
.chat-tools {display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 20px;color:var(--muted);font-size:12px;}
.chat-tools button,.chat-tools select {min-height:44px;padding:8px 12px;background:var(--surface);border:0;border-radius:14px;color:var(--ink);font:inherit;}
.chat-tools label {margin-right:auto;}
.chat-tools select {max-width:200px;}
.recovery {display:flex;gap:12px;}
.recovery:has(#recover-button[hidden]) {display:none;}
.recovery button {font-size:13px;min-height:44px;text-decoration:underline;}
.message-state {display:block;color:var(--muted);font-size:12px;margin:10px 0;}
.login-code {font-size:34px;font-weight:650;letter-spacing:6px;text-align:center;padding:25px 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.check-label {display:flex!important;align-items:center;gap:10px;min-height:44px;}
.check-label input {width:18px;height:18px;accent-color:var(--action);}
.device-row {display:flex;gap:15px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:10px 0;font-size:13px;}
.connection-card {padding:16px;background:var(--surface);border-radius:18px;margin:12px 0;}
.connection-card strong,.connection-card small {display:block;margin-bottom:6px;}
.connection-card small {color:var(--muted);}
.approval-card {border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:20px;margin:18px 0;}
.approval-card h3 {font-size:16px;}.approval-card p{font-size:13px;color:var(--muted);}
.approval-card pre {white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;font-size:12px;line-height:1.6;background:var(--bg);padding:16px;border-radius:12px;}
.approval-card button {min-height:44px;margin-right:14px;}
#sync-label {font-size:11px;min-height:44px;color:var(--muted);}
#workspace-button {display:flex;align-items:center;gap:5px;}
.header {gap:12px;}.header .wordmark {margin-right:auto;white-space:nowrap;}
.header-actions {flex-shrink:0;}
@media(min-width:961px){.island-position{position:static;transform:none;flex:0 0 238px;display:flex;justify-content:center;}}
@media(min-width:761px) and (max-width:960px){.header,.chat-mode .header{height:160px;align-items:flex-start;padding-top:18px;}.island-position{top:84px;}}
@media(max-width:1100px){.header .app-link{display:none;}.header{padding-inline:24px;}.island-position{left:48%;}.about-button{display:none;}}
@media(max-width:760px){#workspace-button span{display:none;}.header{padding-inline:16px;gap:8px;}.header .wordmark{font-size:18px;}.header .wordmark img{width:28px;height:28px;}.header-actions{gap:2px;}.header-actions .motion-button{display:none;}.header-actions .new-chat{padding:0 8px;}.header-actions .new-chat span{display:none;}#account-button{font-size:11px;padding:0 5px;}.chat-heading{flex-wrap:wrap;}.footer{flex-wrap:wrap;justify-content:center;gap:8px 16px;}.chat-tools{gap:6px;}}

.dialog-error{color:var(--text);background:#ffb4a422;padding:12px;border-radius:12px;line-height:1.6}.composer-note .text-button{font:inherit;color:var(--text);background:none;border:0;text-decoration:underline;white-space:nowrap;cursor:pointer}