/* Pixel, SoudCoh's AI: the orb, the panel (a bottom sheet on phones) and the conversation. Classes start with ai-.
   Colours come from the app's tokens, so the classic theme (light or dark) looks like the rest of the app;
   the futuristic theme gets deep-space glass with thin blue light. Motion is gentle and stops entirely for
   people who ask for reduced motion. */

.ai-ui {
  --ai-glass: var(--float, rgba(255, 255, 255, .94));
  --ai-glass-2: var(--panel-2, #F3F7FE);
  --ai-line: var(--line, #D3E0F3);
  --ai-ink: var(--ink, #00163D);
  --ai-muted: var(--muted, #45597A);
  --ai-faint: var(--faint, #6B7A93);
  --ai-blue: #006DFF;
  --ai-accent-text: var(--accent-text, #0058d6);
  --ai-soft: var(--accent-soft, rgba(0, 109, 255, .10));
  --ai-edge: var(--accent-line, rgba(0, 109, 255, .35));
  --ai-field: var(--panel, #FFFFFF);
  --ai-chip: var(--panel, #FFFFFF);
  --ai-shadow: 0 28px 80px rgba(0, 22, 61, .20), 0 2px 8px rgba(0, 22, 61, .06);
  --ai-scrim: var(--scrim, rgba(0, 22, 61, .32));
  --ai-ok: var(--ok, #138a4b);
  --ai-ok-soft: rgba(19, 138, 75, .12);
  --ai-danger: var(--danger, #d23a3a);
  --ai-danger-soft: var(--danger-soft, #FDECEC);
  --ai-sheen: rgba(0, 109, 255, .11); /* the soft blue light behind the header */
  --ai-rim: .45; /* how bright the thin light along the panel's top edge is */
  --ai-orb-glow: rgba(0, 109, 255, .55);
  color: var(--ai-ink);
  font-family: "SC Inter", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="future"]) .ai-ui {
    --ai-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .02);
    --ai-ok-soft: rgba(62, 207, 142, .14);
    --ai-sheen: rgba(0, 109, 255, .16);
    --ai-rim: .6;
  }
}
/* Futuristic: deep navy/black glass, blue light, thin glowing edges. */
html[data-theme="future"] .ai-ui {
  --ai-glass: linear-gradient(180deg, rgba(8, 18, 42, .88), rgba(2, 6, 17, .93) 42%);
  --ai-glass-2: rgba(120, 170, 255, .08);
  --ai-line: rgba(120, 170, 255, .16);
  --ai-ink: #EEF4FF;
  --ai-muted: #A6B6D2;
  --ai-faint: #7084A6;
  --ai-accent-text: #8AB8FF;
  --ai-soft: rgba(0, 109, 255, .17);
  --ai-edge: rgba(92, 157, 255, .42);
  --ai-field: rgba(3, 9, 24, .72);
  --ai-chip: rgba(22, 40, 78, .42);
  --ai-shadow: 0 40px 110px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 109, 255, .05), 0 0 80px rgba(0, 109, 255, .13);
  --ai-scrim: rgba(0, 3, 12, .62);
  --ai-ok: #3ddc84;
  --ai-ok-soft: rgba(61, 220, 132, .12);
  --ai-danger: #ff6b6b;
  --ai-danger-soft: rgba(210, 58, 58, .15);
  --ai-sheen: rgba(0, 109, 255, .26);
  --ai-rim: 1;
  --ai-orb-glow: rgba(0, 109, 255, .7);
}
.ai-ui [hidden] { display: none !important; }
.ai-ui button { font: inherit; color: inherit; }
.ai-i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ai-ui .stop { color: var(--ai-blue); }
html[data-theme="future"] .ai-ui .stop { text-shadow: 0 0 12px rgba(0, 109, 255, .8); }
.ai-ui :focus-visible { outline: 2px solid var(--ai-blue); outline-offset: 2px; }
html[data-theme="future"] .ai-ui :focus-visible { outline-color: #5C9DFF; box-shadow: 0 0 0 4px rgba(0, 109, 255, .25); }

/* The SoudCoh blue sphere: the orb behind Pixel and the push-to-talk light. */
.ai-orb, .ai-live-orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .95) 0 5%, rgba(196, 222, 255, .55) 13%, transparent 33%),
    radial-gradient(circle at 62% 78%, rgba(138, 184, 255, .55), transparent 42%),
    radial-gradient(circle at 50% 55%, #2f8bff 0%, #006DFF 42%, #0047c2 72%, #00163D 100%);
}

/* ---------- the orb ---------- */
.ai-orb {
  position: fixed; z-index: 50; right: var(--ai-orb-right, 24px); bottom: var(--ai-orb-bottom, 24px);
  width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  display: grid; place-items: center; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(138, 184, 255, .5), inset 0 -8px 16px rgba(0, 22, 61, .5), 0 10px 28px rgba(0, 109, 255, .42), 0 0 24px var(--ai-orb-glow);
  transition: transform .22s cubic-bezier(.2, .9, .3, 1), opacity .2s ease, visibility 0s;
  -webkit-tap-highlight-color: transparent;
}
.ai-orb::before { /* the breathing glow */
  content: ""; position: absolute; z-index: -1; inset: -16px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--ai-orb-glow) 0%, rgba(0, 109, 255, .16) 46%, transparent 70%);
  animation: ai-breathe 5s ease-in-out infinite;
}
.ai-orb::after { /* a thin ring of light */
  content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(138, 184, 255, .55); opacity: .75;
}
.ai-orb .ai-i { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .75)); }
.ai-orb-core { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 120%, rgba(92, 157, 255, .55), transparent 60%); pointer-events: none; }
/* A small live Pixel stands in the orb. */
.ai-orb-pixel { position: absolute; inset: 4px 5px 2px; pointer-events: none; overflow: visible; border-radius: 50%; }
.ai-orb-pixel canvas { filter: drop-shadow(0 2px 4px rgba(0, 22, 61, .5)); }
/* Without a canvas (very old browsers) the slots show Pixel as a block of purple. */
.ai-orb-pixel.is-static, .ai-mark.is-static, .ai-hello-pixel.is-static { background: radial-gradient(circle at 50% 40%, #A78BFA, #7C4DFF 60%, #3F1DB4); border-radius: 30%; }
.ai-orb:hover { transform: scale(1.06); }
.ai-orb:active { transform: scale(.95); }
.ai-orb:focus-visible { outline: 3px solid #8AB8FF; outline-offset: 5px; }
@keyframes ai-breathe { 0%, 100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
.ai-ui.is-open .ai-orb { opacity: 0; transform: scale(.6); visibility: hidden; pointer-events: none; transition: transform .2s ease, opacity .2s ease, visibility 0s .2s; }
@media (max-width: 899px) {
  /* Above the tab bar, and above the picked TV's quick bar or the selection bar when they're up. */
  .ai-orb { width: 54px; height: 54px; right: var(--ai-orb-right, 16px); bottom: var(--ai-orb-bottom, calc(var(--tabbar, 68px) + env(safe-area-inset-bottom) + 12px)); }
  body.qb-on .ai-orb { bottom: var(--ai-orb-bottom, calc(var(--tabbar, 68px) + env(safe-area-inset-bottom) + 84px)); }
  body:has(.actionbar) .ai-orb { bottom: var(--ai-orb-bottom, calc(var(--tabbar, 68px) + env(safe-area-inset-bottom) + 94px)); }
}
@media (min-width: 900px) { body:has(.actionbar) .ai-orb { bottom: var(--ai-orb-bottom, 104px); } }

/* ---------- the panel ---------- */
.ai-scrim { position: fixed; inset: 0; z-index: 54; background: var(--ai-scrim); animation: ai-fade .22s ease; touch-action: none; }
@keyframes ai-fade { from { opacity: 0; } }
.ai-panel {
  position: fixed; z-index: 55; top: 16px; right: 16px; bottom: 16px; width: min(400px, calc(100vw - 32px));
  display: flex; flex-direction: column; overflow: hidden; outline: none;
  color: var(--ai-ink); background: var(--ai-glass);
  -webkit-backdrop-filter: saturate(160%) blur(26px); backdrop-filter: saturate(160%) blur(26px);
  border: 1px solid var(--ai-line); border-radius: 24px; box-shadow: var(--ai-shadow);
  animation: ai-in-side .3s cubic-bezier(.2, .9, .3, 1);
}
.ai-panel::before { /* the blue light behind the header */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 190px; pointer-events: none;
  background: radial-gradient(110% 100% at 88% -24%, var(--ai-sheen), transparent 70%);
}
.ai-panel::after { /* a thin rim of light along the top edge */
  content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1px; pointer-events: none; opacity: var(--ai-rim);
  background: linear-gradient(90deg, transparent, rgba(92, 157, 255, .85) 30%, rgba(138, 184, 255, .95) 62%, transparent);
}
.ai-panel > * { position: relative; }
.ai-panel.is-closing { animation: ai-out-side .2s ease forwards; pointer-events: none; }
@keyframes ai-in-side { from { opacity: 0; transform: translateX(28px) scale(.985); } }
@keyframes ai-out-side { to { opacity: 0; transform: translateX(28px) scale(.985); } }
@media (min-width: 640px) and (max-width: 899px) {
  .ai-panel { top: calc(env(safe-area-inset-top) + 12px); bottom: calc(var(--tabbar, 68px) + env(safe-area-inset-bottom) + 12px); }
}
@media (min-width: 900px) { .ai-panel { top: 20px; right: 20px; bottom: 20px; } }

/* Phones: a bottom sheet with a grab handle, up to 85% of the screen (lower when lowered, above the keyboard). */
@media (max-width: 639px) {
  .ai-panel {
    top: auto; left: 0; right: 0; bottom: var(--ai-kb, 0px); width: auto;
    height: 85vh; height: min(85dvh, calc(100dvh - var(--ai-kb, 0px) - env(safe-area-inset-top) - 10px));
    border-radius: 26px 26px 0 0; border-bottom: 0;
    animation: ai-in-sheet .34s cubic-bezier(.2, .9, .3, 1);
    transition: height .28s cubic-bezier(.2, .9, .3, 1);
  }
  .ai-panel.is-compact { height: min(46dvh, 420px); }
  .ai-panel.is-closing { animation: ai-out-sheet .22s ease forwards; }
  @keyframes ai-in-sheet { from { transform: translateY(100%); } }
  @keyframes ai-out-sheet { to { transform: translateY(100%); } }
}
.ai-grab { display: none; }
@media (max-width: 639px) {
  .ai-grab {
    display: block; position: absolute; z-index: 3; top: 0; left: 50%; transform: translateX(-50%);
    width: 132px; height: 30px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none;
  }
  .ai-grab span { display: block; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--ai-faint); opacity: .55; }
  .ai-head { padding-top: 20px; touch-action: none; }
}

/* ---------- header ---------- */
.ai-head { display: flex; align-items: center; gap: 4px; padding: 14px 8px 4px 18px; }
.ai-mark { position: relative; width: 38px; height: 38px; flex: none; margin: -4px 6px -4px -4px; }
.ai-titles { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; overflow: hidden; }
.ai-head h2 { margin: 0; font: 800 20px/1.1 var(--display, "SC Inter", sans-serif); font-variation-settings: "opsz" 32; letter-spacing: -.035em; white-space: nowrap; }
.ai-badge {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; height: 22px; padding: 0 9px 0 7px; border-radius: 99px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--ai-accent-text); background: var(--ai-soft); border: 1px solid var(--ai-edge);
  transition: background .25s, color .25s, box-shadow .25s;
}
.ai-badge span { overflow: hidden; text-overflow: ellipsis; }
.ai-badge .ai-i { width: 12px; height: 12px; }
.ai-badge.is-live:not(.is-thinking) { box-shadow: 0 0 12px rgba(0, 109, 255, .3); }

.ai-badge.is-thinking { color: #fff; border-color: transparent; background: linear-gradient(90deg, #0058d6, #006DFF 55%, #5C9DFF); box-shadow: 0 0 14px rgba(0, 109, 255, .45); }
.ai-icon-btn {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
  background: transparent; color: var(--ai-muted); cursor: pointer; transition: background .15s, color .15s;
}
.ai-icon-btn:hover { background: var(--ai-glass-2); color: var(--ai-ink); }
.ai-icon-btn:disabled { opacity: .35; pointer-events: none; }

.ai-bar { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 12px 10px 12px; border-bottom: 1px solid var(--ai-line); }
/* How hard Pixel thinks: Auto, Fast, Smart, Genius, Ultra. */
.ai-tier-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 10px 0 11px; border-radius: 12px; border: 1px solid transparent;
  background: none; color: var(--ai-ink); font-size: 14px; font-weight: 650; cursor: pointer; transition: background .15s, border-color .15s;
}
.ai-tier-btn .ai-i { width: 18px; height: 18px; color: var(--ai-accent-text); }
.ai-tier-btn .ai-chev { width: 15px; height: 15px; color: var(--ai-faint); transition: transform .2s; }
.ai-tier-btn:hover { background: var(--ai-glass-2); }
.ai-tier-btn[aria-expanded="true"] { background: var(--ai-glass-2); border-color: var(--ai-line); }
.ai-tier-btn[aria-expanded="true"] .ai-chev { transform: rotate(180deg); }
.ai-tier-btn:disabled { opacity: .4; pointer-events: none; }
.ai-tier-menu {
  position: absolute; z-index: 6; top: calc(100% - 4px); left: 10px; width: min(330px, calc(100% - 20px)); padding: 6px; border-radius: 18px;
  background: var(--ai-field); border: 1px solid var(--ai-edge); box-shadow: 0 20px 60px rgba(0, 22, 61, .28), 0 0 0 1px rgba(0, 0, 0, .03);
  animation: ai-menu .16s ease-out;
}
html[data-theme="future"] .ai-tier-menu { background: rgba(5, 11, 26, .96); box-shadow: 0 24px 70px rgba(0, 0, 0, .7), 0 0 40px rgba(0, 109, 255, .16); }
@keyframes ai-menu { from { opacity: 0; transform: translateY(-4px); } }
.ai-tier-item {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 8px; width: 100%; min-height: 48px; padding: 9px 12px 9px 8px;
  border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer;
}
.ai-tier-item:hover, .ai-tier-item:focus-visible { background: var(--ai-glass-2); }
.ai-tier-item[aria-checked="true"] { background: var(--ai-soft); }
.ai-tier-item:disabled { opacity: .45; cursor: default; }
.ai-tier-tick { display: grid; place-items: center; height: 22px; color: var(--ai-blue); }
.ai-tier-tick .ai-i { width: 16px; height: 16px; stroke-width: 2.6; }
.ai-tier-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ai-tier-text b { font-size: 14.5px; font-weight: 700; }
.ai-tier-text span { font-size: 12.8px; line-height: 1.38; color: var(--ai-muted); }
.ai-tier-text small { font-size: 11.5px; color: var(--ai-faint); letter-spacing: .02em; }
.ai-talk-btn {
  margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 13px; border-radius: 99px;
  border: 1px solid var(--ai-line); background: var(--ai-chip); color: var(--ai-ink); font-size: 14px; font-weight: 650; cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s, color .2s;
}
.ai-talk-btn .ai-i { width: 18px; height: 18px; color: var(--ai-accent-text); }
.ai-talk-btn:hover { border-color: var(--ai-edge); }
.ai-talk-btn:disabled { opacity: .4; pointer-events: none; }
html[data-theme="future"] .ai-talk-btn { border-color: var(--ai-edge); background: linear-gradient(90deg, rgba(0, 109, 255, .22), rgba(124, 77, 255, .16)); box-shadow: 0 0 18px rgba(0, 109, 255, .16); }
html[data-theme="future"] .ai-talk-btn:hover { box-shadow: 0 0 0 3px var(--ai-soft), 0 0 24px rgba(0, 109, 255, .3); }

/* ---------- the conversation ---------- */
.ai-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 16px 12px; scrollbar-width: thin; scrollbar-color: var(--ai-line) transparent; }
.ai-log { display: flex; flex-direction: column; gap: 16px; }
.ai-msg { animation: ai-rise .24s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes ai-rise { from { opacity: 0; transform: translateY(8px); } }
.ai-user { display: flex; justify-content: flex-end; padding-left: 36px; }
.ai-bubble {
  max-width: 100%; padding: 10px 15px; border-radius: 20px 20px 6px 20px; color: #fff; font-size: 15px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: linear-gradient(135deg, #2a86ff, #006DFF 55%, #0058d6);
  box-shadow: 0 6px 18px rgba(0, 109, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ai-bot { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 11px; align-items: start; }
.ai-avatar { width: 24px; height: 24px; margin-top: 1px; display: block; filter: drop-shadow(0 0 6px rgba(124, 77, 255, .45)); }
.ai-avatar svg { display: block; width: 100%; height: 100%; }
.ai-content, .ai-parts { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ai-content:has(.ai-tail:empty) { gap: 0; }
.ai-tail { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ai-tail:empty { display: none; }
.ai-text { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; color: var(--ai-ink); }
.ai-text > * { margin: 0; }
.ai-text > * + * { margin-top: .6em; }
.ai-text ul, .ai-text ol { padding-left: 1.3em; }
.ai-text li + li { margin-top: .25em; }
.ai-text li::marker { color: var(--ai-accent-text); font-weight: 700; }
.ai-text b { font-weight: 700; }
html[data-theme="future"] .ai-text b { color: #fff; }
.ai-text code { font: 600 .86em/1.4 ui-monospace, "SF Mono", Menlo, monospace; padding: 1px 6px; border-radius: 6px; background: var(--ai-glass-2); border: 1px solid var(--ai-line); }
.ai-url { color: var(--ai-muted); font-size: .9em; overflow-wrap: anywhere; }
.ai-caret {
  display: inline-block; width: .5em; height: 1.05em; margin-left: 2px; vertical-align: -.17em; border-radius: 2px;
  background: var(--ai-blue); box-shadow: 0 0 10px rgba(0, 109, 255, .8); animation: ai-blink 1s steps(1) infinite;
}
@keyframes ai-blink { 50% { opacity: 0; } }
.ai-thinking { display: inline-flex; align-items: center; gap: 5px; height: 24px; color: var(--ai-muted); font-size: 13.5px; font-weight: 500; }
.ai-thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--ai-blue); box-shadow: 0 0 8px rgba(0, 109, 255, .7); animation: ai-dot 1.2s ease-in-out infinite; }
.ai-thinking i:nth-child(2) { animation-delay: .15s; }
.ai-thinking i:nth-child(3) { animation-delay: .3s; margin-right: 6px; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* The steps it took: a spinner while working, then ✓ or ✕ with what happened. */
.ai-step {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; column-gap: 10px; padding: 9px 12px 9px 10px;
  border-radius: 14px; border: 1px solid var(--ai-line); background: var(--ai-chip); font-size: 13.5px;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.ai-step-ico { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; }
.ai-step-ico .ai-i { width: 13px; height: 13px; stroke-width: 3; }
.ai-step-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.ai-step-label { font-weight: 650; line-height: 20px; color: var(--ai-ink); }
.ai-step-sum { color: var(--ai-muted); font-size: 12.8px; line-height: 1.42; overflow-wrap: anywhere; }
.ai-step.is-run { border-color: var(--ai-edge); box-shadow: 0 0 0 3px var(--ai-soft); }
.ai-step.is-run .ai-step-ico::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--ai-soft); border-top-color: var(--ai-blue);
  animation: ai-spin .75s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-step.is-ok .ai-step-ico { background: var(--ai-ok-soft); color: var(--ai-ok); animation: ai-pop .3s cubic-bezier(.2, .9, .3, 1.4); }
.ai-step.is-fail { border-color: rgba(210, 58, 58, .38); }
.ai-step.is-fail .ai-step-ico { background: var(--ai-danger-soft); color: var(--ai-danger); animation: ai-pop .3s cubic-bezier(.2, .9, .3, 1.4); }
.ai-step.is-fail .ai-step-sum { color: var(--ai-ink); opacity: .85; }
.ai-step.is-stopped .ai-step-ico { background: var(--ai-glass-2); color: var(--ai-faint); }
.ai-step.is-stopped .ai-step-label { color: var(--ai-muted); }
@keyframes ai-pop { from { transform: scale(.4); opacity: 0; } }

.ai-undo, .ai-retry, .ai-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 13px; border-radius: 13px; cursor: pointer;
  font-size: 14px; font-weight: 700; border: 1px solid var(--ai-edge); background: var(--ai-soft); color: var(--ai-accent-text);
  transition: background .15s, box-shadow .15s, transform .1s;
}
.ai-undo .ai-i, .ai-retry .ai-i, .ai-btn .ai-i { width: 17px; height: 17px; }
.ai-undo:hover, .ai-retry:hover, .ai-btn:hover { box-shadow: 0 0 0 3px var(--ai-soft), 0 0 18px rgba(0, 109, 255, .2); }
.ai-undo:active, .ai-retry:active, .ai-btn:active { transform: scale(.97); }
.ai-undo:disabled, .ai-btn:disabled { cursor: default; box-shadow: none; }
.ai-undo.is-done { border-color: transparent; background: var(--ai-ok-soft); color: var(--ai-ok); }
.ai-error { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding: 10px 10px 10px 12px; border-radius: 14px; background: var(--ai-danger-soft); border: 1px solid rgba(210, 58, 58, .3); font-size: 14px; line-height: 1.45; }
.ai-error > .ai-i { width: 18px; height: 18px; margin-top: 1px; color: var(--ai-danger); }
.ai-error-text { flex: 1; min-width: 160px; color: var(--ai-ink); }
.ai-retry { min-height: 40px; margin-left: auto; border-color: rgba(210, 58, 58, .35); background: transparent; color: var(--ai-danger); }
.ai-meta { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ai-faint); }
/* Who answered: "Smart · Sonnet 5.5", and a quiet word when Pixel handed over to a bigger level. */
.ai-model { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; font-size: 11.5px; letter-spacing: .02em; }
.ai-model-name::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--ai-blue); box-shadow: 0 0 6px rgba(0, 109, 255, .8); vertical-align: middle; }
.ai-model-route { font-weight: 500; color: var(--ai-faint); }
.ai-model-route::before { content: "· "; }
.ai-model-wrap { display: flex; flex-direction: column; gap: 3px; }
.ai-note { font-weight: 500; font-size: 12px; line-height: 1.4; max-width: 46ch; }

/* ---------- welcome ---------- */
.ai-hello { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 2px 4px; }
.ai-hello-pixel { position: relative; display: block; width: 96px; height: 96px; margin: -6px 0 8px -12px; }
.ai-hello h3 { margin: 0; font: 800 30px/1.02 var(--display, "SC Inter", sans-serif); font-variation-settings: "opsz" 32; letter-spacing: -.04em; word-spacing: .05em; }
.ai-hello p { margin: 10px 0 0; color: var(--ai-muted); font-size: 15px; line-height: 1.5; max-width: 34ch; }
.ai-starters { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 22px; }
.ai-starters-title { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ai-accent-text); margin-bottom: 2px; }
.ai-starter {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px 8px 9px; border-radius: 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--ai-line); background: var(--ai-chip); color: var(--ai-ink); font-size: 15px; font-weight: 600;
  transition: border-color .15s, box-shadow .15s, transform .1s, background .15s;
}
.ai-starter-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--ai-soft); color: var(--ai-accent-text); }
.ai-starter-ico .ai-i { width: 18px; height: 18px; }
.ai-starter-text { flex: 1; min-width: 0; }
.ai-starter .ai-go { width: 18px; height: 18px; color: var(--ai-faint); transition: transform .15s, color .15s; }
.ai-starter:hover { border-color: var(--ai-edge); box-shadow: 0 0 0 3px var(--ai-soft); }
.ai-starter:hover .ai-go { color: var(--ai-accent-text); transform: translateX(2px); }
.ai-starter:active { transform: scale(.985); }
html[data-theme="future"] .ai-starter:hover { box-shadow: 0 0 0 3px var(--ai-soft), 0 0 24px rgba(0, 109, 255, .18); }

/* ---------- not switched on yet ---------- */
.ai-setup { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 2px; }
.ai-setup-ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; margin-bottom: 16px; color: var(--ai-accent-text); background: var(--ai-soft); border: 1px solid var(--ai-edge); box-shadow: 0 0 26px rgba(0, 109, 255, .18); }
.ai-setup-ico .ai-i { width: 24px; height: 24px; }
.ai-setup h3 { margin: 0; font: 800 24px/1.08 var(--display, "SC Inter", sans-serif); font-variation-settings: "opsz" 32; letter-spacing: -.02em; word-spacing: .04em; }
.ai-setup p { margin: 10px 0 0; color: var(--ai-muted); font-size: 15px; line-height: 1.5; }
.ai-setup-steps { margin: 18px 0 18px; padding: 0; list-style: none; counter-reset: ai-step; display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; line-height: 1.5; }
.ai-setup-steps li { position: relative; padding-left: 36px; counter-increment: ai-step; }
.ai-setup-steps li::before {
  content: counter(ai-step); position: absolute; left: 0; top: -1px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%;
  font-size: 12.5px; font-weight: 800; color: #fff; background: var(--ai-blue); box-shadow: 0 0 12px rgba(0, 109, 255, .45);
}
.ai-cmd { display: flex; align-items: center; gap: 4px; margin-top: 8px; padding: 2px 2px 2px 12px; border-radius: 12px; background: var(--ai-field); border: 1px solid var(--ai-line); }
.ai-cmd code { flex: 1; min-width: 0; font: 600 12.5px/1.4 ui-monospace, "SF Mono", Menlo, monospace; overflow-wrap: anywhere; user-select: all; }
.ai-setup-member { padding: 12px 14px; border-radius: 14px; background: var(--ai-glass-2); border: 1px solid var(--ai-line); color: var(--ai-ink) !important; }

/* ---------- listening / Talk mode ---------- */
.ai-live {
  display: flex; align-items: center; gap: 12px; margin: 10px 12px 0; padding: 8px 8px 8px 10px; border-radius: 20px;
  border: 1px solid var(--ai-edge); background: linear-gradient(90deg, rgba(0, 109, 255, .16), rgba(0, 109, 255, .04) 70%);
  box-shadow: 0 0 30px rgba(0, 109, 255, .12);
}
.ai-live-orb { position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 2.5px; box-shadow: 0 0 16px rgba(0, 109, 255, .55); }
.ai-live-orb i { width: 3px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .92); }
.ai-live-orb::before, .ai-live-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(92, 157, 255, .7); opacity: 0; }
.ai-live[data-phase="listening"] .ai-live-orb::before { animation: ai-ring 1.8s ease-out infinite; }
.ai-live[data-phase="listening"] .ai-live-orb::after { animation: ai-ring 1.8s ease-out .9s infinite; }
.ai-live[data-phase="listening"] .ai-live-orb i, .ai-live[data-phase="speaking"] .ai-live-orb i { animation: ai-bar .9s ease-in-out infinite; }
.ai-live-orb i:nth-child(2) { animation-delay: .15s !important; }
.ai-live-orb i:nth-child(3) { animation-delay: .3s !important; }
.ai-live-orb i:nth-child(4) { animation-delay: .45s !important; }
.ai-live[data-phase="thinking"] .ai-live-orb i { animation: ai-dot 1.2s ease-in-out infinite; height: 4px; width: 4px; }
@keyframes ai-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes ai-bar { 0%, 100% { height: 6px; } 50% { height: 18px; } }
.ai-live-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ai-live-txt b { font-size: 14px; font-weight: 700; }
.ai-live-txt span { font-size: 13px; color: var(--ai-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-live-txt span.is-heard { color: var(--ai-ink); font-style: italic; }
.ai-live-act { display: contents; }
.ai-live-btn { min-height: 44px; padding: 0 16px; border-radius: 13px; border: 1px solid var(--ai-line); background: var(--ai-field); color: var(--ai-ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.ai-live-btn:hover { border-color: var(--ai-edge); }

.ai-notice { display: flex; align-items: flex-start; gap: 10px; margin: 10px 12px 0; padding: 8px 4px 8px 12px; border-radius: 16px; background: var(--ai-glass-2); border: 1px solid var(--ai-line); font-size: 13.5px; line-height: 1.45; }
.ai-notice > .ai-i { width: 18px; height: 18px; margin-top: 11px; color: var(--ai-accent-text); }
.ai-notice.is-denied > .ai-i, .ai-notice.is-nomic > .ai-i, .ai-notice.is-network > .ai-i { color: var(--ai-danger); }
.ai-notice-text { flex: 1; min-width: 0; padding: 10px 0; }
.ai-notice .ai-icon-btn { margin: -2px 0; }

/* ---------- suggestions and the message box ---------- */
.ai-sugs {
  display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 10px 16px 2px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.ai-sugs::-webkit-scrollbar { display: none; }
/* With room (and a mouse), the suggestions wrap onto two rows instead of scrolling sideways. */
@media (min-width: 640px) {
  .ai-sugs { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .ai-sugs .ai-here { max-width: 100%; }
}
.ai-here {
  flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 200px; height: 30px; padding: 0 11px 0 8px; border-radius: 99px;
  font-size: 12.5px; font-weight: 650; color: var(--ai-accent-text); background: var(--ai-soft); white-space: nowrap;
}
.ai-here span { overflow: hidden; text-overflow: ellipsis; }
.ai-here .ai-i { width: 15px; height: 15px; }
.ai-sug {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 15px 0 12px; border-radius: 99px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--ai-line); background: var(--ai-chip); color: var(--ai-ink); font-size: 14px; font-weight: 600;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.ai-sug .ai-i { width: 16px; height: 16px; color: var(--ai-accent-text); }
.ai-sug:hover { border-color: var(--ai-edge); box-shadow: 0 0 0 3px var(--ai-soft); }
.ai-sug:active { transform: scale(.97); }

.ai-compose {
  display: flex; align-items: flex-end; gap: 6px; margin: 10px 12px 0; padding: 5px; border-radius: 24px;
  background: var(--ai-field); border: 1px solid var(--ai-line); transition: border-color .15s, box-shadow .2s;
}
.ai-compose:focus-within { border-color: var(--ai-blue); box-shadow: 0 0 0 3px var(--ai-soft), 0 0 26px rgba(0, 109, 255, .16); }
.ai-panel.is-off .ai-bar, .ai-panel.is-off .ai-compose, .ai-panel.is-off .ai-badge, .ai-panel.is-off .ai-sugs, .ai-panel.is-off .ai-clear { display: none; }
.ai-panel.is-off .ai-head { padding-bottom: 10px; border-bottom: 1px solid var(--ai-line); }
.ai-input {
  flex: 1; min-width: 0; height: 44px; min-height: 44px; max-height: 132px; margin: 0; padding: 11px 4px; border: 0; outline: none; resize: none;
  background: transparent; color: var(--ai-ink); font: inherit; font-size: 16px; line-height: 22px; /* 16 px: no zoom-in on iPhone */
}
.ai-input::placeholder { color: var(--ai-faint); }
.ai-ui .ai-input:focus-visible, html[data-theme="future"] .ai-ui .ai-input:focus-visible { outline: none; box-shadow: none; } /* the box around it lights up instead */
.ai-mic, .ai-send { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s, box-shadow .2s, transform .1s; }
.ai-mic { background: transparent; color: var(--ai-muted); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ai-mic:hover { background: var(--ai-glass-2); color: var(--ai-ink); }
.ai-mic.is-unavailable { color: var(--ai-faint); }
.ai-mic.is-on { color: #fff; background: var(--ai-blue); animation: ai-ping 1.5s ease-out infinite; }
.ai-mic:disabled, .ai-send:disabled { cursor: default; }
@keyframes ai-ping { 0% { box-shadow: 0 0 0 0 rgba(0, 109, 255, .55); } 100% { box-shadow: 0 0 0 14px rgba(0, 109, 255, 0); } }
.ai-send { color: #fff; background: var(--ai-blue); box-shadow: 0 6px 16px rgba(0, 109, 255, .35); }
.ai-send:active { transform: scale(.94); }
.ai-send:disabled { color: var(--ai-faint); background: var(--ai-glass-2); box-shadow: none; }
.ai-send.is-stop { color: var(--ai-glass-2); background: var(--ai-ink); box-shadow: none; }
html[data-theme="future"] .ai-send.is-stop { color: #001133; background: #EEF4FF; }
.ai-send .ai-i { width: 20px; height: 20px; stroke-width: 2.4; }
.ai-foot { margin: 0; padding: 8px 16px calc(env(safe-area-inset-bottom) + 12px); min-height: 12px; font-size: 11.5px; color: var(--ai-faint); text-align: center; }
.ai-ui .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 639px) { .ai-foot { padding-top: 10px; } }

@media (max-width: 639px) {
  .ai-hello { padding-top: 2px; }
  .ai-hello-pixel { width: 80px; height: 80px; margin: -6px 0 6px -10px; }
  .ai-hello h3 { font-size: 27px; }
  .ai-starters { margin-top: 18px; }
  .ai-starter { min-height: 48px; font-size: 14.5px; }
  .ai-starter-ico { width: 30px; height: 30px; border-radius: 10px; }
}
/* A lowered sheet on a phone shows the latest reply and the box, nothing else. */
@media (max-width: 639px) {
  .ai-panel.is-compact .ai-bar, .ai-panel.is-compact .ai-sugs { display: none; }
  .ai-panel.is-compact .ai-scroll { padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-ui *, .ai-ui *::before, .ai-ui *::after { animation: none !important; transition: none !important; }
  .ai-orb::before { opacity: .8; }
  .ai-step.is-run .ai-step-ico::before { border-color: var(--ai-blue); border-right-color: transparent; }
}