:root {
  --edge-gap: 32px;
  --ink: #263449;
  --muted: #718096;
  --panel: rgba(255, 255, 255, 0.45);
  --panel-border: rgba(255, 255, 255, 0.68);
  --input: rgba(255, 255, 255, 0.5);
  --bubble-ai: rgba(255, 255, 255, 0.56);
  --accent-gradient: linear-gradient(135deg, #617FD2 0%, #9B73C5 100%);
  --bubble-user: var(--accent-gradient);
  --accent: #7A8CCE;
  
  --shadow: 0 25px 60px rgba(84, 103, 143, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --soft-shadow: 0 15px 35px rgba(87, 104, 143, 0.1);
  --cursor: #7A8CCE;
  
  color-scheme: light;
}

body.dark-mode {
  --ink: #f5f2ff;
  --muted: #aeb8ca;
  --panel: linear-gradient(145deg, rgba(26, 33, 51, .82), rgba(13, 17, 29, .91));
  --panel-border: rgba(187, 202, 234, .16);
  --input: rgba(14, 18, 30, .88);
  --bubble-ai: rgba(54, 64, 87, .48);
  --accent-gradient: linear-gradient(135deg, #617FD2 0%, #9B73C5 100%);
  --bubble-user: var(--accent-gradient);
  --accent: #7A8CCE;
  --shadow: 0 35px 85px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .09);
  --soft-shadow: 0 18px 44px rgba(0, 0, 0, .38);
  --cursor: #7A8CCE;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; overflow: hidden; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-family: "Montserrat", sans-serif;
  background: linear-gradient(125deg, #dbeafd 0%, #f4efff 43%, #f9e8ed 100%);
  transition: background 0.5s ease, color 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  html, body, button, a, textarea { cursor: none; }
}

body.theme-transition,
body.theme-transition *,
body.theme-transition *::before,
body.theme-transition *::after {
  transition: background .55s ease, background-color .55s ease, color .4s ease,
    border-color .55s ease, box-shadow .55s ease, fill .4s ease, stroke .4s ease !important;
}

body.dark-mode { background: radial-gradient(circle at 16% 14%, rgba(58, 89, 137, .2), transparent 33%), radial-gradient(circle at 84% 84%, rgba(74, 92, 132, .13), transparent 31%), linear-gradient(130deg, #090d16 0%, #101725 52%, #111720 100%); }

button, textarea { font: inherit; }

::selection { color: #fff; background: rgba(122, 140, 206, .78); text-shadow: 0 1px 5px rgba(47, 59, 112, .26); }
::-moz-selection { color: #fff; background: rgba(122, 140, 206, .78); text-shadow: 0 1px 5px rgba(47, 59, 112, .26); }
.dark-mode ::selection, .dark-mode ::-moz-selection { color: #fff; background: rgba(122, 140, 206, .7); }
body.selection-pulse .chat-window { animation: selection-glass-pulse .52s ease-out both; }

[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 160;
  left: 50%;
  bottom: calc(100% + 9px);
  width: max-content;
  max-width: 210px;
  padding: 7px 9px;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--panel-border) 80%, white);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 90%, white);
  box-shadow: 0 9px 22px rgba(51, 63, 113, .16), inset 0 1px 0 rgba(255,255,255,.52);
  backdrop-filter: blur(12px) saturate(145%);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px) scale(.96);
  transition: opacity .18s ease, transform .22s cubic-bezier(.16,1,.3,1);
}
[data-tooltip]::before {
  content: "";
  position: absolute;
  z-index: 161;
  left: 50%;
  bottom: calc(100% + 4px);
  width: 7px;
  height: 7px;
  border-right: 1px solid color-mix(in srgb, var(--panel-border) 80%, white);
  border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 80%, white);
  background: color-mix(in srgb, var(--panel) 90%, white);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) rotate(45deg) scale(.8);
  transition: opacity .18s ease, transform .22s cubic-bezier(.16,1,.3,1);
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after,
[data-tooltip]:hover::before, [data-tooltip]:focus-visible::before { opacity: 1; }
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { transform: translate(-50%, 0) scale(1); }
[data-tooltip]:hover::before, [data-tooltip]:focus-visible::before { transform: translateX(-50%) rotate(45deg) scale(1); }
.dark-mode [data-tooltip]::after, .dark-mode [data-tooltip]::before { border-color: rgba(197, 201, 255, .24); background: rgba(26, 30, 68, .94); box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.09); }

.aurora {
  position: fixed;
  border-radius: 50%;
  filter: blur(3px);
  opacity: 0.55;
  pointer-events: none;
  animation: drift 16s ease-in-out infinite alternate;
}

.aurora-one { width: 42vw; height: 42vw; left: -14vw; top: -15vw; background: radial-gradient(circle, rgba(108, 193, 222, 0.5), transparent 68%); }
.aurora-two { width: 44vw; height: 44vw; right: -16vw; bottom: -23vw; background: radial-gradient(circle, rgba(219, 142, 192, 0.37), transparent 68%); animation-delay: -6s; }
.dark-mode .aurora-one { background: radial-gradient(circle, rgba(72, 118, 180, .2), transparent 68%); opacity: .48; }
.dark-mode .aurora-two { background: radial-gradient(circle, rgba(93, 111, 154, .16), transparent 68%); opacity: .42; }

.noise { position: fixed; inset: 0; opacity: 0.035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.dark-mode .noise { opacity: .065; }
.cursor-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient(290px circle at var(--ambient-x, -400px) var(--ambient-y, -400px), rgba(117, 145, 235, .18), transparent 72%); transition: opacity .5s ease; }
body.cursor-active .cursor-ambient { opacity: 1; }
.dark-mode .cursor-ambient { background: radial-gradient(330px circle at var(--ambient-x, -400px) var(--ambient-y, -400px), rgba(122, 140, 206, .24), transparent 72%); }
.cursor-motes { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.cursor-mote { position: absolute; left: calc(var(--mote-x) * 100vw); top: calc(var(--mote-y) * 100vh); width: 11px; height: 11px; display: block; border: 1px solid rgba(104, 124, 203, .28); border-radius: 3px; background: linear-gradient(135deg, rgba(255,255,255,.4), rgba(143,165,233,.1)); box-shadow: 0 8px 22px rgba(94, 109, 172, .1), inset 0 1px 0 rgba(255,255,255,.52); transform: translate3d(-50%, -50%, 0) rotate(45deg); transition: transform .28s cubic-bezier(.16,1,.3,1), border-color .28s ease, background .28s ease; }
.cursor-mote:nth-child(2n) { width: 7px; height: 7px; }.cursor-mote:nth-child(3n) { width: 15px; height: 15px; opacity: .65; }
.dark-mode .cursor-mote { border-color: rgba(196, 188, 255, .3); background: linear-gradient(135deg, rgba(190,185,255,.2), rgba(78,108,198,.06)); box-shadow: 0 8px 24px rgba(42, 32, 121, .22), inset 0 1px 0 rgba(238,235,255,.13); }

.onboarding { position: fixed; z-index: 220; inset: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 16% 20%, rgba(147, 188, 250, .28), transparent 34%), radial-gradient(circle at 82% 78%, rgba(213, 165, 235, .25), transparent 36%), rgba(241, 244, 255, .62); backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%); animation: onboarding-fade-in .55s ease both; }
.onboarding[hidden] { display: none; }
.onboarding.is-leaving { pointer-events: none; animation: onboarding-fade-out .36s ease both; }
.onboarding-backdrop { position: absolute; inset: 0; pointer-events: none; }
.onboarding-card { position: relative; z-index: 1; width: min(600px, calc((100svh - 48px) * 4 / 3), calc(100vw - 48px)); aspect-ratio: 4 / 3; display: flex; flex-direction: column; padding: clamp(25px, 3.2vw, 36px); color: #26344d; border: 1px solid rgba(255,255,255,.92); border-radius: 34px; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(246,247,255,.76)); box-shadow: 0 34px 90px rgba(61, 75, 136, .22), 0 1px 0 rgba(255,255,255,.94) inset; overflow: hidden; isolation: isolate; }
.onboarding-card::before { content: ""; position: absolute; z-index: -1; width: 310px; height: 310px; top: -188px; right: -104px; border-radius: 50%; background: radial-gradient(circle at 35% 38%, rgba(130, 160, 238, .42), rgba(170, 126, 214, .12) 50%, transparent 70%); filter: blur(2px); }
.onboarding-card::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .34; background-image: linear-gradient(rgba(118,133,199,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(118,133,199,.07) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(135deg, transparent 6%, #000 40%, transparent 86%); }
.onboarding-progress { position: relative; z-index: 1; align-self: flex-end; display: flex; gap: 7px; padding: 5px 0; }
.onboarding-progress i { width: 7px; height: 7px; border-radius: 20px; background: #d7ddec; transition: width .36s cubic-bezier(.16,1,.3,1), background .3s ease; }
.onboarding-progress i.is-active { width: 24px; background: linear-gradient(90deg, #6485d5, #a77ec9); }
.onboarding-step { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 8px 22px 12px; animation: onboarding-step-in .42s cubic-bezier(.16,1,.3,1) both; }
.onboarding-step[hidden] { display: none; }
.onboarding-mark, .onboarding-mark.is-message, .onboarding-mark.is-photo, .onboarding-mark.is-heart { width: 58px; height: 58px; min-width: 58px; flex: 0 0 58px; display: grid; place-items: center; align-self: flex-start; margin-bottom: 17px; overflow: hidden; color: #6f7fd0; border: 1px solid rgba(137,151,213,.17); border-radius: 18px; background: linear-gradient(145deg, rgba(222,235,255,.95), rgba(237,218,249,.82)); box-shadow: 0 13px 24px rgba(86, 100, 170, .13), 0 1px 0 rgba(255,255,255,.92) inset; }
.onboarding-mark svg { width: 27px; height: 27px; flex: 0 0 27px; }
.onboarding-kicker { margin: 0 0 11px; color: #7384cc; font-size: 9px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.onboarding h1, .onboarding h2 { max-width: 405px; margin: 0; font-size: clamp(26px, 3.25vw, 36px); line-height: 1.12; letter-spacing: -.055em; font-weight: 700; }
.onboarding-step > p:last-child { max-width: 390px; margin: 16px 0 0; color: #72809a; font-size: 12px; line-height: 1.72; }
.onboarding-controls { position: relative; z-index: 1; margin: 0 22px; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onboarding-controls button { min-width: 94px; min-height: 42px; padding: 0 16px; border: 1px solid rgba(111,129,202,.2); border-radius: 14px; font-size: 11px; font-weight: 700; transition: transform .2s ease, opacity .2s ease, background .2s ease, box-shadow .2s ease; }
.onboarding-back { justify-self: start; color: #6f7d97; background: rgba(255,255,255,.55); }
.onboarding-back:disabled { opacity: .5; }
.onboarding-next { justify-self: end; color: #fff; background: linear-gradient(135deg, #617fd2, #9b73c5); box-shadow: 0 11px 21px rgba(91, 95, 181, .28); }
.onboarding-controls button:not(:disabled):hover { transform: translateY(-2px); }
.onboarding-next:hover { box-shadow: 0 15px 28px rgba(91, 95, 181, .36); }
.onboarding-credit { position: relative; z-index: 1; margin: 12px 0 0; color: #8a96ad; font-size: 8px; font-weight: 600; letter-spacing: .035em; text-align: center; }
.onboarding-credit strong { color: #7486d0; }
.dark-mode .onboarding { background: rgba(4, 7, 23, .7); }
.dark-mode .onboarding-card { color: #f3f2ff; border-color: rgba(190, 198, 255, .2); background: linear-gradient(145deg, rgba(37, 42, 86, .96), rgba(14, 17, 46, .97)); box-shadow: 0 32px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1); }
.dark-mode .onboarding-step > p:last-child, .dark-mode .onboarding-credit { color: #b1b7d2; }
.dark-mode .onboarding-mark { border-color: rgba(204, 210, 255, .18); background: linear-gradient(135deg, rgba(68,91,160,.65), rgba(108,65,130,.56)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }

.screen-shell {
  position: relative;
  z-index: 1;
  width: min(94vw, calc(100svh * 16 / 9), 1360px);
  aspect-ratio: 16 / 9;
  min-height: 0;
  padding: var(--edge-gap) clamp(24px, 4.1vw, 65px);
  display: flex;
  flex-direction: column;
}

.topbar { width: calc(100vw - (var(--edge-gap) * 2)); position: relative; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; min-height: 38px; margin-bottom: clamp(14px, 1.5vw, 20px); }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: var(--accent); border: 1px solid var(--panel-border); border-radius: 13px; background: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 8px 18px rgba(77, 92, 151, .1); }
.brand-mark svg { width: 20px; height: 20px; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font-size: 15px; line-height: 1; letter-spacing: -.05em; font-weight: 700; }
.brand-copy small { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }


.presence { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; }
.presence i { width: 7px; height: 7px; background: #80caa4; border-radius: 50%; box-shadow: 0 0 0 4px rgba(128, 202, 164, 0.14); animation: breathe 2.8s ease-in-out infinite; }
.header-actions { display: flex; gap: 9px; align-items: center; }
.voice-settings { position: relative; }
.voice-popover { position: absolute; z-index: 20; top: 48px; right: 0; width: 164px; padding: 10px; color: var(--ink); border: 1px solid var(--panel-border); border-radius: 14px; background: var(--panel); box-shadow: var(--soft-shadow); backdrop-filter: blur(18px) saturate(145%); -webkit-backdrop-filter: blur(18px) saturate(145%); opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .18s ease, transform .18s ease; }
.voice-popover.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.voice-popover[hidden] { display: none; }
.voice-label { display: block; padding: 2px 5px 7px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.voice-option { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 8px; color: var(--muted); border: 1px solid transparent; border-radius: 9px; background: transparent; font-size: 11px; font-weight: 600; text-align: left; transition: color .18s ease, background .18s ease, border-color .18s ease; }
.voice-option small { display: block; margin-top: 2px; color: inherit; font-size: 8px; font-weight: 600; letter-spacing: .02em; opacity: .72; }
.voice-option:hover, .voice-option:focus-visible { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 25%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); outline: 0; }
.voice-radio { width: 11px; height: 11px; flex: 0 0 11px; border: 1px solid color-mix(in srgb, var(--muted) 60%, transparent); border-radius: 50%; transition: background .18s ease, box-shadow .18s ease, border-color .18s ease; }
.voice-option[aria-pressed="true"] { color: var(--ink); }
.voice-option[aria-pressed="true"] .voice-radio { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--panel) 90%, white), 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }


.icon-button, .clear-button { border: 1px solid var(--panel-border); color: var(--muted); background: rgba(255,255,255,0.17); height: 38px; border-radius: 12px; display: grid; place-items: center; transition: 0.25s ease; }

.icon-button { width: 39px; padding: 0; }
.icon-button svg { width: 18px; height: 18px; }
.moon-icon { display: none; }
.dark-mode .sun-icon { display: none; }
.dark-mode .moon-icon { display: block; }
.clear-button { grid-auto-flow: column; gap: 7px; padding: 0 13px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; }
.clear-button svg { width: 15px; height: 15px; }
.icon-button:hover, .clear-button:hover { transform: translateY(-2px); color: var(--ink); background: var(--panel); box-shadow: 0 8px 19px rgba(75, 90, 132, 0.12); }
.clear-button:disabled { opacity: .38; pointer-events: none; box-shadow: none; }
.dark-mode .icon-button, .dark-mode .clear-button { color: #c8cbec; border-color: rgba(178, 188, 255, .18); background: rgba(31, 36, 79, .58); box-shadow: inset 0 1px 0 rgba(236, 230, 255, .07); }
.dark-mode .icon-button:hover, .dark-mode .clear-button:hover { color: #fff; border-color: rgba(203, 191, 255, .48); background: rgba(70, 59, 132, .52); box-shadow: 0 12px 26px rgba(0,0,0,.3), inset 0 1px 0 rgba(236, 230, 255, .13); }
.dark-mode .voice-popover { border-color: rgba(184, 194, 255, .22); background: linear-gradient(145deg, rgba(37, 41, 84, .95), rgba(15, 18, 48, .96)); box-shadow: 0 18px 42px rgba(0,0,0,.38), inset 0 1px 0 rgba(236,230,255,.08); }
.dark-mode .brand-mark { border-color: rgba(184, 194, 255, .2); background: linear-gradient(145deg, rgba(62, 69, 132, .58), rgba(28, 28, 67, .55)); box-shadow: inset 0 1px 0 rgba(236,230,255,.12), 0 10px 24px rgba(0,0,0,.22); }

.chat-window, .composer { width: min(100%, 740px, calc((100svh - 224px) * 4 / 3)); margin-inline: auto; }
.chat-window { aspect-ratio: 4 / 3; position: relative; overflow: hidden; isolation: isolate; border: 1px solid color-mix(in srgb, var(--panel-border) 76%, white); border-radius: clamp(24px, 2.5vw, 35px); background: linear-gradient(145deg, rgba(255,255,255,.51), rgba(238,235,255,.22) 48%, rgba(221,226,255,.14)), var(--panel); box-shadow: 0 36px 86px rgba(66, 79, 139, .18), 0 12px 30px rgba(118, 100, 177, .07), inset 0 1px 0 rgba(255,255,255,.86), inset 0 -1px 0 rgba(111, 129, 191, .07); backdrop-filter: blur(31px) saturate(165%); -webkit-backdrop-filter: blur(31px) saturate(165%); transition: border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.16,1,.3,1); }
.chat-window.has-messages { border-color: color-mix(in srgb, var(--panel-border) 62%, var(--accent)); box-shadow: 0 39px 92px rgba(66, 79, 139, .2), 0 13px 34px rgba(118, 100, 177, .08), inset 0 1px 0 rgba(255,255,255,.82); }


.chat-window::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(90% 68% at 0% 0%, rgba(255,255,255,.42), transparent 48%), radial-gradient(70% 65% at 100% 100%, rgba(183,157,241,.2), transparent 59%), linear-gradient(120deg, rgba(255,255,255,.17), transparent 32%, transparent 68%, rgba(189,203,255,.12)); }
.chat-window::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; background: linear-gradient(180deg, rgba(255,255,255,.36), transparent 14%, transparent 84%, rgba(104,124,182,.22)); }
.chat-window.is-scrolling[data-scroll-direction="down"]::after { animation: scroll-sheen-down .52s cubic-bezier(.16,1,.3,1) both; }
.chat-window.is-scrolling[data-scroll-direction="up"]::after { animation: scroll-sheen-up .52s cubic-bezier(.16,1,.3,1) both; }
.dark-mode .chat-window { border-color: rgba(177, 197, 231, .19); background: linear-gradient(145deg, rgba(64, 82, 115, .2), rgba(21, 27, 43, .14) 52%, rgba(27, 35, 54, .16)), var(--panel); box-shadow: 0 42px 98px rgba(0,0,0,.61), 0 14px 36px rgba(29, 48, 83, .13), inset 0 1px 0 rgba(236,242,255,.1); }
.dark-mode .chat-window.has-messages { border-color: rgba(189, 207, 241, .28); box-shadow: 0 44px 104px rgba(0,0,0,.64), 0 14px 40px rgba(29, 48, 83, .16), inset 0 1px 0 rgba(236,242,255,.12); }
.dark-mode .chat-window::before { background: radial-gradient(86% 68% at 0% 0%, rgba(97,128,182,.16), transparent 49%), radial-gradient(70% 70% at 100% 100%, rgba(94,112,151,.09), transparent 61%), linear-gradient(118deg, rgba(171,193,235,.08), transparent 27%, transparent 72%, rgba(128,151,195,.08)); }
.dark-mode .chat-scroll::-webkit-scrollbar-thumb { background: var(--accent-gradient); }
.chat-scroll { height: 100%; position: relative; overflow-y: hidden; overscroll-behavior: contain; padding: clamp(25px, 4vw, 45px); border-radius: inherit; clip-path: inset(0 round clamp(24px, 2.5vw, 35px)); scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(104, 124, 182, 0.48) transparent; }
.chat-window.has-messages .chat-scroll { overflow-y: auto; }
.chat-scroll::-webkit-scrollbar { width: 10px; }
.chat-scroll::-webkit-scrollbar-track { background: rgba(122, 137, 193, .06); margin: 26px 4px; border-radius: 30px; }
.chat-scroll::-webkit-scrollbar-thumb { background: var(--accent-gradient); border: 3px solid transparent; border-top-width: 20px; border-bottom-width: 20px; background-clip: padding-box; border-radius: 30px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }

.welcome { position: relative; isolation: isolate; min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(28px, 4vw, 48px); text-align: left; animation: welcome-arrival .82s cubic-bezier(.16,1,.3,1) both; }
.welcome.is-hidden { display: none; }
.welcome::before { content: ""; position: absolute; z-index: -2; width: 350px; height: 350px; top: -160px; right: -130px; border: 1px solid rgba(137,153,214,.15); border-radius: 50%; background: radial-gradient(circle at 38% 59%, rgba(171,198,250,.42), rgba(224,198,246,.16) 38%, transparent 69%); box-shadow: 0 0 0 52px rgba(255,255,255,.035), 0 0 0 104px rgba(255,255,255,.018); transform-origin: center; animation: welcome-bloom 8s ease-in-out infinite; }
.welcome::after { content: ""; position: absolute; z-index: -1; width: 62%; height: 1px; left: clamp(28px, 4vw, 48px); bottom: 36%; background: linear-gradient(90deg, rgba(115,132,200,.27), transparent); }
.welcome-main { display: grid; grid-template-columns: 89px minmax(0, 1fr); align-items: start; gap: clamp(20px, 3vw, 34px); max-width: 530px; margin-top: clamp(2px, 2vh, 15px); }
.welcome-orb { width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; gap: 5px; position: relative; border: 1px solid rgba(255,255,255,.86); border-radius: 26px; background: linear-gradient(135deg, rgba(217,239,255,.98), rgba(242,220,253,.92)); box-shadow: 0 18px 38px rgba(102,119,177,.19), inset 0 1px 1px white; transform: rotate(-6deg); animation: welcome-orb-float 4.8s ease-in-out infinite; }
.welcome-orb::before { content: ""; position: absolute; inset: -11px; border: 1px solid rgba(129,148,215,.2); border-radius: 31px; transform: rotate(12deg); animation: welcome-orb-ring 4.8s ease-in-out infinite; }
.welcome-orb::after { content: ""; position: absolute; top: 9px; left: 13px; width: 35px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.38); filter: blur(3px); transform: rotate(-25deg); }
.welcome-orb span { position: relative; z-index: 1; display: block; width: 6px; border-radius: 8px; background: var(--accent-gradient); box-shadow: 0 2px 5px rgba(122,140,206,.2); animation: wave 1.15s ease-in-out infinite; }
.welcome-orb span:nth-child(1) { height: 15px; animation-delay: -.24s; }.welcome-orb span:nth-child(2) { height: 26px; }.welcome-orb span:nth-child(3) { height: 17px; animation-delay: -.48s; }
.welcome-intro { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 4px 0 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .18em; font-size: 9px; font-weight: 700; animation: welcome-content-in .6s .12s cubic-bezier(.16,1,.3,1) both; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .55; }.eyebrow::after { content: none; }
.welcome h1 { max-width: 425px; margin: 0; font-size: clamp(28px, 2.45vw, 39px); line-height: 1.16; letter-spacing: -.06em; font-weight: 650; text-wrap: balance; animation: welcome-content-in .64s .19s cubic-bezier(.16,1,.3,1) both; }
.welcome-copy { max-width: 390px; margin: 15px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; animation: welcome-content-in .64s .28s cubic-bezier(.16,1,.3,1) both; }
.welcome-start { position: relative; display: grid; grid-template-columns: 126px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 24px; padding: 16px 17px; border: 1px solid rgba(255,255,255,.58); border-radius: 20px; background: linear-gradient(125deg, rgba(255,255,255,.48), rgba(255,255,255,.17)); box-shadow: 0 15px 31px rgba(78,91,153,.1), inset 0 1px 0 rgba(255,255,255,.74); backdrop-filter: blur(12px) saturate(145%); -webkit-backdrop-filter: blur(12px) saturate(145%); animation: welcome-content-in .68s .4s cubic-bezier(.16,1,.3,1) both; }
.welcome-start::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; border-radius: 20px 0 0 20px; background: linear-gradient(180deg, #7d94d9, #bf8ec6); opacity: .8; }
.welcome-start-heading { padding-left: 4px; }.welcome-start-heading span, .welcome-start-heading small { display: block; }.welcome-start-heading span { color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: -.025em; }.welcome-start-heading small { margin-top: 5px; color: var(--muted); font-size: 8px; font-weight: 500; line-height: 1.45; }
.suggestions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.suggestions button { min-height: 55px; position: relative; padding: 9px 9px 8px 25px; overflow: hidden; color: var(--muted); border: 1px solid rgba(126,145,196,.19); border-radius: 13px; background: rgba(255,255,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.62); font-size: 9px; font-weight: 600; line-height: 1.35; text-align: left; transition: transform .32s cubic-bezier(.16,1,.3,1), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.suggestions button::before { position: absolute; top: 9px; left: 9px; color: var(--accent); font-size: 7px; font-weight: 700; opacity: .7; }.suggestions button:nth-child(1)::before { content: "01"; }.suggestions button:nth-child(2)::before { content: "02"; }.suggestions button:nth-child(3)::before { content: "03"; }
.suggestions button:hover { z-index: 1; transform: translateY(-4px); color: var(--ink); border-color: rgba(126,145,196,.48); background: rgba(255,255,255,.84); box-shadow: 0 13px 23px rgba(94,107,154,.16), inset 0 1px 0 white; }
.welcome-whisper { margin: 13px 0 0; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .045em; opacity: .72; animation: welcome-content-in .64s .5s cubic-bezier(.16,1,.3,1) both; }
.welcome-whisper::before { content: "— "; color: var(--accent); }
.dark-mode .welcome::before { border-color: rgba(177,187,255,.15); background: radial-gradient(circle at 38% 59%, rgba(99,126,235,.33), rgba(155,81,195,.14) 41%, transparent 69%); box-shadow: 0 0 0 52px rgba(124,119,255,.025), 0 0 0 104px rgba(124,119,255,.018); }
.dark-mode .welcome::after { background: linear-gradient(90deg, rgba(190,180,255,.28), transparent); }
.dark-mode .welcome-orb { border-color: rgba(221,225,255,.2); background: linear-gradient(135deg, rgba(68,105,170,.85), rgba(121,72,145,.8)); box-shadow: 0 20px 42px rgba(11,9,49,.37), inset 0 1px 0 rgba(255,255,255,.12); }.dark-mode .welcome-orb::before { border-color: rgba(193,201,255,.24); }
.dark-mode .welcome-start { border-color: rgba(180,190,255,.18); background: linear-gradient(125deg, rgba(65,72,134,.4), rgba(32,33,79,.28)); box-shadow: 0 17px 35px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08); }
.dark-mode .suggestions button { color: #c7c9ed; border-color: rgba(184,193,255,.18); background: rgba(78,83,146,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }.dark-mode .suggestions button:hover { color: #fff; background: rgba(137,121,216,.35); border-color: rgba(205,194,255,.46); box-shadow: 0 13px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.1); }

/* Minimal welcome state */

.welcome { align-items: center; justify-content: center; padding: 28px 24px; text-align: center; }
.welcome::before { width: min(420px, 82%); height: auto; aspect-ratio: 1; top: 50%; right: auto; left: 50%; border: 0; background: radial-gradient(circle, rgba(187,200,252,.19), rgba(233,217,250,.08) 43%, transparent 70%); box-shadow: none; transform: translate(-50%, -50%); animation: none; }

.welcome::after { display: none; }

.welcome-orb { width: 68px; height: 68px; margin: 0 0 20px; border-radius: 23px; background: linear-gradient(135deg, rgba(213,233,255,.94), rgba(237,216,249,.86)); box-shadow: 0 14px 28px rgba(102,119,177,.16), inset 0 1px 0 rgba(255,255,255,.9); animation: welcome-orb-float 5s ease-in-out infinite; }


.welcome-orb::before, .welcome-orb::after { display: none; }

.eyebrow { justify-content: center; margin: 0 0 10px; font-size: 9px; letter-spacing: .16em; }.eyebrow::before, .eyebrow::after { display: none; }
.welcome h1 { max-width: 430px; font-size: clamp(28px, 2.35vw, 38px); line-height: 1.22; letter-spacing: -.05em; font-weight: 700; }
.welcome-copy { max-width: 440px; margin: 15px auto 22px; font-size: 12px; line-height: 1.72; }
.suggestions { width: min(100%, 470px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.suggestions button { min-height: 48px; grid-column: span 2; padding: 9px 11px; border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.46), rgba(255,255,255,.2)); font-size: 11px; line-height: 1.3; text-align: center; }
.suggestions button:nth-child(4) { grid-column: 2 / span 2; }.suggestions button:nth-child(5) { grid-column: 4 / span 2; }


.suggestions button::before { content: none !important; }



.screen-shell[aria-hidden="true"] { visibility: hidden; }
.welcome, .welcome-orb, .eyebrow, .welcome h1, .welcome-copy, .suggestions { animation: none; }
.screen-shell.is-revealing .brand { animation: app-bloom-in .5s .06s cubic-bezier(.16,1,.3,1) both; }
.screen-shell.is-revealing .voice-settings { animation: app-bloom-in .45s .16s cubic-bezier(.16,1,.3,1) both; }
.screen-shell.is-revealing .clear-button { animation: app-bloom-in .45s .23s cubic-bezier(.16,1,.3,1) both; }
.screen-shell.is-revealing .chat-window { animation: app-chat-in .72s .31s cubic-bezier(.16,1,.3,1) both; }
.screen-shell.is-revealing .composer { animation: app-bloom-in .55s .54s cubic-bezier(.16,1,.3,1) both; }
.screen-shell.is-revealing .privacy-note { animation: app-bloom-in .46s .61s cubic-bezier(.16,1,.3,1) both; }
.screen-shell.is-revealing .developer-credit { animation: app-bloom-in .56s .68s cubic-bezier(.16,1,.3,1) both; }
.welcome.is-warm-welcome { animation: welcome-warm-in .82s cubic-bezier(.16,1,.3,1) both; }
.welcome.is-warm-welcome::before { display: block; animation: welcome-warm-glow 1.15s cubic-bezier(.16,1,.3,1) both; }
.welcome.is-warm-welcome .welcome-orb { animation: welcome-warm-orb .76s .04s cubic-bezier(.16,1,.3,1) both; }
.welcome.is-warm-welcome .eyebrow { animation: welcome-warm-reveal .58s .16s cubic-bezier(.16,1,.3,1) both; }
.welcome.is-warm-welcome h1 { animation: welcome-warm-reveal .64s .24s cubic-bezier(.16,1,.3,1) both; }
.welcome.is-warm-welcome .welcome-copy { animation: welcome-warm-reveal .6s .34s cubic-bezier(.16,1,.3,1) both; }
.welcome.is-warm-welcome .suggestions { animation: none; }
.welcome.is-warm-welcome:not(.is-clear-return) .suggestions { animation: suggestions-stage-in .38s .58s cubic-bezier(.16,1,.3,1) both; }
.welcome.is-warm-welcome .suggestions button { animation: suggestion-chip-in .42s cubic-bezier(.16,1,.3,1) both; }
.welcome.is-warm-welcome .suggestions button:nth-child(1) { animation-delay: .72s; }
.welcome.is-warm-welcome .suggestions button:nth-child(2) { animation-delay: .8s; }
.welcome.is-warm-welcome .suggestions button:nth-child(3) { animation-delay: .88s; }
.welcome.is-warm-welcome .suggestions button:nth-child(4) { animation-delay: .96s; }
.welcome.is-warm-welcome .suggestions button:nth-child(5) { animation-delay: 1.04s; }
.welcome.is-warm-welcome.is-clear-return .suggestions { animation: none; }
.welcome.is-warm-welcome.is-clear-return .suggestions button:nth-child(1) { animation-delay: .48s; }
.welcome.is-warm-welcome.is-clear-return .suggestions button:nth-child(2) { animation-delay: .58s; }
.welcome.is-warm-welcome.is-clear-return .suggestions button:nth-child(3) { animation-delay: .68s; }
.welcome.is-warm-welcome.is-clear-return .suggestions button:nth-child(4) { animation-delay: .78s; }
.welcome.is-warm-welcome.is-clear-return .suggestions button:nth-child(5) { animation-delay: .88s; }

.messages { display: flex; min-height: 100%; flex-direction: column; justify-content: flex-end; gap: 15px; padding: 2px 1px 4px; }
.message-row { display: flex; width: 100%; animation: ai-message-in .58s cubic-bezier(.16,1,.3,1) both; }
.message-row.user { justify-content: flex-end; }
.message-row.user { animation-name: user-message-in; }
.bubble { max-width: 77%; padding: 15px 18px; border-radius: 21px; font-size: 14px; line-height: 1.65; letter-spacing: -0.012em; transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, border-color .32s ease; }
.message-row:not(.typing) .bubble:hover { transform: translateY(-2px); }
.ai .bubble { position: relative; padding: 16px 59px 16px 19px; color: var(--ink); border: 1px solid rgba(255,255,255,.62); background: linear-gradient(135deg, rgba(255,255,255,.73), rgba(249,248,255,.42)), var(--bubble-ai); border-bottom-left-radius: 7px; box-shadow: 0 11px 27px rgba(67,80,123,.1), inset 0 1px 0 rgba(255,255,255,.76); backdrop-filter: blur(17px) saturate(135%); -webkit-backdrop-filter: blur(17px) saturate(135%); }



.read-aloud-button { position: absolute; top: 7px; right: 7px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--panel) 75%, transparent); box-shadow: 0 7px 16px rgba(76, 88, 142, .11); opacity: 0; pointer-events: none; transform: scale(.9); transition: opacity .18s ease-out, transform .18s ease-out, background .18s ease, color .18s ease, box-shadow .18s ease; }
.read-aloud-button svg { width: 19px; height: 19px; }
.ai .bubble:hover .read-aloud-button, .ai .bubble:focus-within .read-aloud-button, .read-aloud-button.is-playing, .read-aloud-button.is-loading { opacity: 1; pointer-events: auto; transform: scale(1); }
.read-aloud-button:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); box-shadow: 0 9px 20px rgba(76, 88, 142, .18); }
.read-aloud-button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 72%, white); outline-offset: 2px; }
.read-aloud-button.is-playing { color: var(--ink); background: color-mix(in srgb, var(--accent) 25%, var(--panel)); animation: voice-pulse 1.45s ease-in-out infinite; }
.read-aloud-button.is-loading { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.read-aloud-spinner { width: 16px; height: 16px; border: 2px solid color-mix(in srgb, currentColor 22%, transparent); border-top-color: currentColor; border-radius: 50%; animation: read-aloud-spin .72s linear infinite; }

.user .bubble { color: #fff; border: 1px solid rgba(255,255,255,.25); background: var(--accent-gradient); border-bottom-right-radius: 7px; box-shadow: 0 14px 29px rgba(71,85,146,.28), inset 0 1px 0 rgba(255,255,255,.22); }
.message-row.user:not(.typing) .bubble:hover { box-shadow: 0 18px 34px rgba(94,98,168,.34), inset 0 1px 0 rgba(255,255,255,.28); }
.dark-mode .ai .bubble { border-color: rgba(185,194,255,.2); background: linear-gradient(135deg, rgba(68,74,127,.74), rgba(47,50,96,.45)), var(--bubble-ai); box-shadow: 0 15px 31px rgba(0,0,0,.25), inset 0 1px 0 rgba(235,230,255,.1); }

.dark-mode .user .bubble { box-shadow: 0 16px 34px rgba(36,35,112,.43), inset 0 1px 0 rgba(255,255,255,.16); }
.typing .bubble { padding: 16px 19px; display: flex; align-items: center; gap: 5px; min-width: 74px; }
.typing i { width: 5px; height: 5px; display: block; background: var(--accent); border-radius: 50%; box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 30%, transparent); opacity: .32; transform: translateY(2px) scale(.76); animation: typing-dot 1.28s cubic-bezier(.45,0,.2,1) infinite; }.typing i:nth-child(2) { animation-delay: .14s; }.typing i:nth-child(3) { animation-delay: .28s; }


.composer { min-height: 62px; margin-top: 14px; position: relative; border: 1px solid color-mix(in srgb, var(--panel-border) 72%, white); background: linear-gradient(135deg, rgba(255,255,255,.43), rgba(247,244,255,.2)), var(--input); box-shadow: 0 17px 37px rgba(87,104,143,.13), inset 0 1px 0 rgba(255,255,255,.7); backdrop-filter: blur(24px) saturate(155%); -webkit-backdrop-filter: blur(24px) saturate(155%); border-radius: 21px; display: flex; align-items: center; padding: 7px 9px 7px 21px; transition: border-color .32s ease, box-shadow .32s ease, transform .32s cubic-bezier(.16,1,.3,1), background .32s ease; }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 64%, white); background: linear-gradient(135deg, rgba(255,255,255,.58), rgba(243,240,255,.32)), var(--input); box-shadow: 0 20px 43px rgba(88,102,170,.19), 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent), inset 0 1px 0 rgba(255,255,255,.78); transform: translateY(-2px); }
.dark-mode .composer { border-color: rgba(177,197,231,.19); background: linear-gradient(135deg, rgba(32,43,65,.72), rgba(15,20,32,.62)), var(--input); box-shadow: 0 21px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(236,242,255,.08); }
.dark-mode .composer:focus-within { border-color: rgba(188,208,242,.54); background: linear-gradient(135deg, rgba(42,58,86,.78), rgba(18,25,39,.72)), var(--input); box-shadow: 0 22px 52px rgba(24,42,75,.34), 0 0 0 4px rgba(136,163,207,.09), inset 0 1px 0 rgba(236,242,255,.12); }
#message-input { min-width: 0; resize: none; max-height: 82px; flex: 1; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 14px; font-weight: 500; line-height: 1.5; text-align: left; padding: 10px 5px 9px 13px; caret-color: var(--accent); }
#message-input::placeholder { color: var(--muted); opacity: 0.78; text-align: left; }
.attach-button { width: 38px; height: 42px; flex: 0 0 38px; display: grid; place-items: center; padding: 0; color: var(--muted); border: 0; border-radius: 12px; background: transparent; transition: color .2s ease, background .2s ease, transform .2s ease; }
.attach-button svg { width: 19px; height: 19px; }

.attach-button:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); transform: translateY(-1px); }






.attach-button:focus-visible, .image-preview button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 72%, white); outline-offset: 2px; }
.attach-button.is-loading svg { animation: attach-spin .8s linear infinite; }
.image-preview { position: absolute; z-index: 4; left: 0; bottom: calc(100% + 12px); width: 96px; height: 96px; display: grid; place-items: center; padding: 5px; color: var(--ink); border: 1px solid var(--panel-border); border-radius: 20px; background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow: 0 16px 34px rgba(56, 65, 115, .16); backdrop-filter: blur(16px); animation: attachment-in .28s cubic-bezier(.16,1,.3,1) both; }
.image-preview[hidden] { display: none; }
.image-preview img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 15px; }
.image-preview span { display: none; }
.image-preview button { position: absolute; top: -7px; right: -7px; z-index: 1; width: 25px; height: 25px; display: grid; place-items: center; padding: 0; color: #fff; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: var(--accent-gradient); box-shadow: 0 6px 13px rgba(65, 73, 138, .28); font-size: 18px; line-height: 1; transition: transform .2s ease, filter .2s ease; }
.image-preview button:hover { transform: scale(1.08); filter: brightness(1.08); }
.user .bubble.has-image { width: min(77%, 330px); min-width: 190px; padding: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.42); border-bottom-right-radius: 19px; background: linear-gradient(145deg, rgba(102, 124, 210, .96), rgba(164, 126, 198, .93)); box-shadow: 0 17px 34px rgba(92, 92, 168, .24), inset 0 1px 0 rgba(255,255,255,.2); }
.message-image-frame { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.42); border-radius: 14px; background: rgba(255,255,255,.18); box-shadow: 0 9px 19px rgba(45, 48, 111, .18), inset 0 1px 0 rgba(255,255,255,.36); }
.message-image-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(130deg, rgba(255,255,255,.2), transparent 28%, transparent 72%, rgba(36, 26, 95, .12)); }
.message-image { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; transition: transform .55s cubic-bezier(.16,1,.3,1), filter .35s ease; }
.user .bubble.has-image:hover .message-image { filter: saturate(1.06) contrast(1.02); transform: scale(1.025); }
.message-text { margin: 9px 7px 4px; color: #fff; font-size: 13px; font-weight: 500; line-height: 1.45; letter-spacing: -.01em; text-align: left; }
.dark-mode .user .bubble.has-image { border-color: rgba(215, 215, 255, .22); background: linear-gradient(145deg, rgba(56, 95, 177, .98), rgba(122, 80, 169, .96)); box-shadow: 0 18px 34px rgba(15, 12, 55, .38), inset 0 1px 0 rgba(255,255,255,.12); }
.dark-mode .image-preview { border-color: rgba(171, 183, 255, .21); background: rgba(22, 26, 62, .9); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.send-button { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid rgba(255,255,255,.2); border-radius: 15px; display: grid; place-items: center; color: white; background: var(--accent-gradient); box-shadow: 0 10px 21px rgba(71,85,146,.35), inset 0 1px 0 rgba(255,255,255,.28); transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .24s ease, box-shadow .3s ease, filter .3s ease; }
.send-button svg { width: 18px; height: 18px; margin-left: 1px; }
.send-button:disabled { opacity: .42; box-shadow: none; }.send-button:not(:disabled):hover { transform: translateY(-3px) rotate(-5deg) scale(1.03); box-shadow: 0 16px 28px rgba(105,114,186,.47), inset 0 1px 0 rgba(255,255,255,.35); filter: saturate(1.08); }.send-button:not(:disabled):active { transform: translateY(0) scale(.93); }
.dark-mode .send-button { background: var(--accent-gradient); box-shadow: 0 10px 24px rgba(46, 57, 105, .42); }
.privacy-note { text-align: center; color: var(--muted); margin: 8px 0 0; font-size: 10px; font-weight: 500; letter-spacing: 0.04em; opacity: .78; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.developer-credit { --profile-card-pad: 22px; position: absolute; right: calc(var(--edge-gap) - (100vw - 100%) / 2); bottom: var(--edge-gap); width: 66px; height: 66px; overflow: hidden; color: var(--muted); border: 1px solid var(--panel-border); border-radius: 21px; background: rgba(255, 255, 255, .18); box-shadow: var(--soft-shadow); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); outline: 0; transform-origin: right bottom; transition: width .55s cubic-bezier(.16,1,.3,1), height .55s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1), background .35s ease, box-shadow .35s ease; }
.developer-credit:hover, .developer-credit:focus, .developer-credit:focus-within { width: 340px; height: 222px; transform: translateY(-9px); background: linear-gradient(145deg, rgba(255,255,255,.66), rgba(232,226,255,.36)); box-shadow: 0 24px 52px rgba(65, 78, 130, .24), inset 0 1px 0 rgba(255,255,255,.72); }
.profile-halo { position: absolute; width: 210px; height: 210px; top: -105px; right: -78px; border-radius: 50%; background: radial-gradient(circle, rgba(177, 148, 251, .3), transparent 66%); opacity: 0; transform: scale(.7); transition: opacity .55s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.developer-credit:hover .profile-halo, .developer-credit:focus .profile-halo, .developer-credit:focus-within .profile-halo { opacity: 1; transform: scale(1); }
.developer-credit img { position: absolute; z-index: 1; top: 8px; left: 8px; width: 48px; height: 48px; object-fit: cover; object-position: 50% 28%; border: 1px solid rgba(255,255,255,.72); border-radius: 15px; box-shadow: 0 5px 14px rgba(42, 48, 85, .2); transition: width .45s cubic-bezier(.16,1,.3,1), height .45s cubic-bezier(.16,1,.3,1), top .45s cubic-bezier(.16,1,.3,1), left .45s cubic-bezier(.16,1,.3,1), border-radius .45s ease; }
.developer-credit:hover img, .developer-credit:focus img, .developer-credit:focus-within img { top: var(--profile-card-pad); left: var(--profile-card-pad); width: 76px; height: 76px; border-radius: 22px; }
.developer-profile { position: absolute; z-index: 1; top: var(--profile-card-pad); left: calc(var(--profile-card-pad) + 94px); right: var(--profile-card-pad); opacity: 0; visibility: hidden; transform: translate3d(16px, 0, 0); transition: opacity .28s ease .1s, transform .48s cubic-bezier(.16,1,.3,1) .1s, visibility 0s linear .5s; }
.developer-credit:hover .developer-profile, .developer-credit:focus .developer-profile, .developer-credit:focus-within .developer-profile { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); transition-delay: .2s, .2s, 0s; }
.developer-profile > span { display: block; margin-bottom: 3px; color: var(--accent); font-size: 7px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.developer-profile .project-credit { margin-top: 5px; color: var(--muted); font-size: 8px; font-weight: 600; letter-spacing: .045em; text-transform: none; }
.developer-profile strong { display: block; color: var(--ink); font-size: 17px; line-height: 1.1; letter-spacing: -.04em; font-weight: 700; }
.developer-profile p { margin: 8px 0 0; max-width: 205px; font-size: 10px; line-height: 1.55; white-space: normal; }
.developer-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 11px; }
.developer-tags span { padding: 4px 6px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 7px; font-weight: 700; letter-spacing: .025em; }
.developer-profile nav { display: flex; gap: 7px; margin-top: 12px; }
.developer-profile a { width: 27px; height: 27px; display: grid; place-items: center; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 9px; background: rgba(255,255,255,.18); text-decoration: none; transition: transform .2s ease, color .2s ease, background .2s ease, border-color .2s ease; }
.developer-profile a svg { width: 14px; height: 14px; }
.developer-profile a:hover { transform: translateY(-2px); color: var(--ink); border-color: var(--accent); background: rgba(255,255,255,.56); }
.dark-mode .developer-credit { background: rgba(12, 16, 41, .62); border-color: rgba(181, 191, 255, .22); }
.dark-mode .developer-credit:hover, .dark-mode .developer-credit:focus, .dark-mode .developer-credit:focus-within { background: linear-gradient(145deg, rgba(34, 39, 84, .94), rgba(17, 15, 49, .95)); box-shadow: 0 28px 62px rgba(0,0,0,.52), inset 0 1px 0 rgba(224,218,255,.13); }
.dark-mode .profile-halo { background: radial-gradient(circle, rgba(130, 91, 255, .38), transparent 66%); }
.dark-mode .developer-profile a { background: rgba(255,255,255,.06); }
.dark-mode .developer-profile a:hover { color: #fff; background: rgba(181, 168, 255, .18); }

.message-row.is-clearing { pointer-events: none; will-change: opacity; animation: message-fade .42s ease var(--clear-delay) forwards !important; }

.cursor-dot, .cursor-ring { position: fixed; z-index: 230; pointer-events: none; top: 0; left: 0; border-radius: 50%; mix-blend-mode: normal; transition: width .2s, height .2s, border-color .2s, background .2s, opacity .2s; }
.cursor-dot { z-index: 231; width: 6px; height: 6px; background: color-mix(in srgb, var(--cursor) 85%, white); box-shadow: 0 0 8px color-mix(in srgb, var(--cursor) 44%, transparent); transform: translate(-50%, -50%); }.cursor-ring { z-index: 230; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.58); background: rgba(182, 196, 255, .13); box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 5px 16px rgba(82, 91, 157, .12); backdrop-filter: blur(9px) saturate(150%); -webkit-backdrop-filter: blur(9px) saturate(150%); transform: translate(-50%, -50%); opacity: .8; }
body.cursor-hover .cursor-dot { width: 8px; height: 8px; } body.cursor-hover .cursor-ring { width: 40px; height: 40px; opacity: .62; }
body.cursor-click .cursor-dot { animation: none; }
body.cursor-click .cursor-ring { animation: cursor-click-ring .5s ease-in-out both; }
body.cursor-click.cursor-hover .cursor-ring { animation-name: cursor-click-hover-ring; }

@keyframes drift { to { transform: translate(6vw, 4vh) scale(1.1); } }
@keyframes breathe { 50% { box-shadow: 0 0 0 7px rgba(128, 202, 164, 0.04); transform: scale(.9); } }
@keyframes wave { 50% { transform: scaleY(.55); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes welcome-arrival { from { opacity: 0; transform: translateY(20px) scale(.97); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes welcome-orb-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-7px) rotate(-2deg); } }
@keyframes app-bloom-in { from { opacity: 0; transform: translateY(13px) scale(.94); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes app-chat-in { from { opacity: 0; transform: translateY(20px) scale(.965); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes welcome-warm-in { from { opacity: .55; transform: scale(.982); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes welcome-warm-glow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 55% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 100% { opacity: .72; transform: translate(-50%, -50%) scale(1); } }
@keyframes welcome-warm-orb { 0% { opacity: 0; transform: translateY(16px) scale(.7) rotate(-16deg); filter: blur(4px); } 70% { opacity: 1; transform: translateY(-3px) scale(1.04) rotate(-3deg); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(-6deg); } }
@keyframes welcome-warm-reveal { from { opacity: 0; transform: translateY(15px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes suggestion-chip-in { 0% { opacity: 0; transform: translateY(16px) scale(.8); filter: blur(5px); } 68% { opacity: 1; transform: translateY(-3px) scale(1.045); filter: blur(0); } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes suggestions-stage-in { from { opacity: 0; transform: translateY(10px) scale(.96); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes welcome-orb-ring { 0%, 100% { opacity: .72; transform: rotate(12deg) scale(1); } 50% { opacity: .35; transform: rotate(22deg) scale(1.08); } }
@keyframes welcome-bloom { 0%, 100% { opacity: .7; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes welcome-content-in { from { opacity: 0; transform: translateY(13px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ai-message-in { from { opacity: 0; transform: translate3d(-20px, 13px, 0) scale(.955); filter: blur(5px); } 60% { opacity: 1; } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes user-message-in { from { opacity: 0; transform: translate3d(20px, 13px, 0) scale(.955); filter: blur(5px); } 60% { opacity: 1; } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes typing-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(2px) scale(.76); } 30% { opacity: 1; transform: translateY(-4px) scale(1.08); } 43% { opacity: .7; transform: translateY(-1px) scale(.94); } }
@keyframes message-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes scroll-sheen-down { 0% { opacity: 0; transform: translateY(-18px); } 40% { opacity: .72; } 100% { opacity: 0; transform: translateY(17px); } }
@keyframes scroll-sheen-up { 0% { opacity: 0; transform: translateY(18px); } 40% { opacity: .72; } 100% { opacity: 0; transform: translateY(-17px); } }
@keyframes voice-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent), 0 9px 20px rgba(76, 88, 142, .19); } }
@keyframes read-aloud-spin { to { transform: rotate(360deg); } }
@keyframes attach-spin { to { transform: rotate(360deg); } }
@keyframes attachment-in { from { opacity: 0; transform: translateY(7px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes onboarding-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes onboarding-fade-out { to { opacity: 0; backdrop-filter: blur(0); } }
@keyframes onboarding-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes selection-glass-pulse { 45% { border-color: color-mix(in srgb, var(--accent) 46%, var(--panel-border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent), var(--shadow); } }
@keyframes cursor-click-ring { 0%, 100% { width: 30px; height: 30px; } 50% { width: 19px; height: 19px; opacity: .94; } }
@keyframes cursor-click-hover-ring { 0%, 100% { width: 40px; height: 40px; } 50% { width: 19px; height: 19px; opacity: .94; } }

@media (max-aspect-ratio: 5/4), (max-width: 700px) {
  html, body { overflow-y: auto; }
  .screen-shell { width: min(100%, 640px); min-height: 100svh; height: auto; aspect-ratio: auto; padding: 21px 18px 18px; }
  .topbar { width: 100%; left: auto; transform: none; margin-bottom: 22px; }.chat-window { aspect-ratio: auto; flex: 1; min-height: 390px; }.chat-scroll { padding: 24px 20px; }.composer { margin-top: 13px; }.cursor-dot, .cursor-ring, .cursor-ambient { display: none; }
  .developer-credit { position: relative; right: auto; bottom: auto; align-self: center; width: min(100%, 340px); height: 222px; margin-top: 14px; }
  .developer-credit img { top: 21px; left: 21px; width: 68px; height: 68px; border-radius: 22px; }
  .developer-credit .profile-halo, .developer-credit .developer-profile { opacity: 1; visibility: visible; transform: none; }
}

@media (min-width: 701px) and (max-width: 1180px) {
  .developer-credit { position: relative; right: auto; bottom: auto; align-self: center; width: min(100%, 340px); height: 222px; margin-top: 14px; }
  .developer-credit img { top: 21px; left: 21px; width: 68px; height: 68px; border-radius: 22px; }
  .developer-credit .profile-halo, .developer-credit .developer-profile { opacity: 1; visibility: visible; transform: none; }
}

@media (max-width: 700px), (hover: none), (pointer: coarse) {
  .voice-settings, .read-aloud-button { display: none !important; }
}

@media (max-aspect-ratio: 5/4), (max-width: 700px) {
  html, body { overflow-y: auto; }
  .screen-shell { width: min(100%, 640px); min-height: 100svh; height: auto; aspect-ratio: auto; padding: 21px 18px 18px; }
  .topbar { width: 100%; left: auto; transform: none; margin-bottom: 22px; }.chat-window { aspect-ratio: auto; flex: 1; min-height: 390px; }.chat-scroll { padding: 24px 20px; }.composer { margin-top: 13px; }.cursor-dot, .cursor-ring, .cursor-ambient { display: none; }
  .developer-credit { position: relative; right: auto; bottom: auto; align-self: center; width: min(100%, 340px); height: 222px; margin-top: 14px; }
  .developer-credit img { top: 21px; left: 21px; width: 68px; height: 68px; border-radius: 22px; }
  .developer-credit .profile-halo, .developer-credit .developer-profile { opacity: 1; visibility: visible; transform: none; }
}


@media (min-width: 701px) and (max-width: 1180px) {
  .developer-credit { position: relative; right: auto; bottom: auto; align-self: center; width: min(100%, 340px); height: 222px; margin-top: 14px; }
  .developer-credit img { top: 21px; left: 21px; width: 68px; height: 68px; border-radius: 22px; }
  .developer-credit .profile-halo, .developer-credit .developer-profile { opacity: 1; visibility: visible; transform: none; }
}

@media (max-width: 1180px) {
  .developer-credit img { top: var(--profile-card-pad); left: var(--profile-card-pad); width: 76px; height: 76px; }
  .developer-profile { top: var(--profile-card-pad); left: calc(var(--profile-card-pad) + 94px); right: var(--profile-card-pad); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }