/**
 * LET'S BOX widgets — Corner Radio (bottom-left) + The Cornerman (bottom-right).
 * Loaded AFTER shared/tokens.css + shared/brand.css + app.css; everything
 * re-themes through the --lb-* custom properties.
 * Motion law: nothing moves at idle — transitions/animation fire only on
 * user interaction or active playback, and prefers-reduced-motion kills both.
 */

#lbx-radio,
#lbx-cman {
  font-family: var(--lb-font-body);
}

#lbx-radio *,
#lbx-cman * {
  box-sizing: border-box;
}

/* Widget dock sits above the fixed tab bar; on tab-less routes
   (landing/onboarding) app.js sets body.no-tabs and the dock drops. */
:root {
  --lbx-dock: calc(var(--lb-tabs-h) + var(--lb-safe-bottom) + 0.875rem);
}

body.no-tabs {
  --lbx-dock: calc(var(--lb-safe-bottom) + 0.875rem);
}

/* ════════════════════════════════════════════════════════════════
   CORNER RADIO — FAB bottom-left, slide-up station panel.
   ════════════════════════════════════════════════════════════════ */

#lbx-radio-fab {
  position: fixed;
  left: 0.875rem;
  bottom: var(--lbx-dock);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  /* No capsule chrome — the ring silhouette IS the frame. Icon-only. */
  border: 0;
  background: transparent;
  color: var(--lb-ink-on-canvas);
  cursor: pointer;
  /* Accent, not centerpiece — dims at idle, wakes on hover/focus/open/play. */
  opacity: 0.32;
  transition: opacity 350ms var(--lb-ease),
    transform var(--lb-duration) var(--lb-ease);
}

#lbx-radio-fab:hover,
#lbx-radio-fab:focus-visible,
#lbx-radio-fab.playing,
#lbx-radio.is-awake #lbx-radio-fab {
  opacity: 1;
}

#lbx-radio-fab:hover {
  transform: translateY(-2px);
}

/* Touch devices can't hover — keep a readable floor so it's never a ghost. */
@media (hover: none) {
  #lbx-radio-fab {
    opacity: 0.55;
  }
}

/* The boxing ring — 3/4 perspective: raised apron, canvas mat with a soft
   sheen, four posts + turnbuckle caps, three front ropes with one red top
   rope. Icon-only (no label). All colours come from the --lb-* brand tokens
   (the --lb-gold token is the brand NAVY); the mat sheen is white-alpha.
   Under-ring light + top rope glow are STATES that fade in only while playing. */
.lbx-rf-mark {
  width: 2.9rem;
  height: 2.75rem;
  display: inline-flex;
  flex: none;
}
.lbx-ring {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lbx-ring__apron {
  fill: var(--lb-gold); /* navy skirt */
}
.lbx-ring__mat-hi {
  stop-color: #eef3fa; /* lit canvas — light on both themes */
}
.lbx-ring__mat-lo {
  stop-color: #c8d5ea;
}
.lbx-ring__trim {
  stroke: var(--lb-accent); /* red canvas-edge trim */
  stroke-width: 1.4;
  stroke-linecap: round;
}
.lbx-ring__posts path {
  stroke: var(--lb-gold-dark); /* pressed navy posts */
  stroke-width: 1.9;
  stroke-linecap: round;
}
.lbx-ring__posts--back path {
  stroke: var(--lb-gold);
  stroke-width: 1.5;
  stroke-opacity: 0.7;
}
.lbx-ring__ropes path {
  stroke: var(--lb-gold); /* navy ropes */
  stroke-width: 1.25;
  stroke-linecap: round;
}
.lbx-ring__ropes .lbx-ring__rope--top {
  stroke: var(--lb-accent); /* single red top rope — the only accent line */
  stroke-width: 1.5;
}
.lbx-ring__side path {
  stroke: var(--lb-gold);
  stroke-width: 1;
  stroke-opacity: 0.38; /* faint depth lines */
  stroke-linecap: round;
}
.lbx-ring__caps circle {
  fill: var(--lb-accent); /* red turnbuckles */
}
.lbx-ring__shadow {
  fill: rgba(10, 27, 51, 0.16); /* brand navy ink, low alpha — soft floor shadow */
}
/* Under-ring spotlight — a STATE that fades in while playing, no idle loop. */
.lbx-ring__glow {
  fill: var(--lb-accent);
  opacity: 0;
  transition: opacity 300ms var(--lb-ease);
}
#lbx-radio-fab.playing .lbx-ring__glow {
  opacity: 0.5;
}
#lbx-radio-fab.playing .lbx-ring__rope--top {
  filter: drop-shadow(0 0 2px var(--lb-accent));
}

@media (prefers-reduced-motion: reduce) {
  #lbx-radio-fab,
  .lbx-ring__glow {
    transition: none;
  }
}

#lbx-radio-panel {
  position: fixed;
  left: 0.75rem;
  bottom: calc(var(--lbx-dock) + 3.5rem);
  z-index: 130;
  width: min(20rem, calc(100vw - 1.5rem));
  padding: var(--lb-space-4);
  background: var(--lb-surface-raised);
  border: 1px solid var(--lb-border-strong);
  border-top: 3px solid var(--lb-accent);
  border-radius: var(--lb-radius-lg);
  box-shadow: var(--lb-shadow-lg);
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity var(--lb-duration) var(--lb-ease),
    transform var(--lb-duration) var(--lb-ease);
}

#lbx-radio-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lbx-rp-title {
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-lg);
  letter-spacing: var(--lb-tracking-display);
  text-transform: uppercase;
  color: var(--lb-ink-on-canvas);
}

.lbx-rp-sub {
  font-size: max(var(--lb-text-xs), 11px);
  color: var(--lb-chalk-muted);
  margin-top: 2px;
}

.lbx-rp-stations {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: var(--lb-space-3);
}

.lbx-rp-stations button {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-sm);
  background: transparent;
  color: var(--lb-ink-on-canvas);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--lb-duration) var(--lb-ease),
    border-color var(--lb-duration) var(--lb-ease);
}

.lbx-rp-stations button:hover {
  background: var(--lb-accent-soft);
  border-color: var(--lb-accent);
}

.lbx-rp-stations button.on {
  background: var(--lb-gold-soft);
  border-color: var(--lb-gold);
}

.lbx-rp-stations strong {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lbx-rp-stations span {
  font-size: max(var(--lb-text-xs), 11px);
  color: var(--lb-chalk-muted);
}

.lbx-rp-vol {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--lb-space-3);
  color: var(--lb-chalk-faint);
}

.lbx-rp-vol svg {
  width: 0.875rem;
  height: 0.875rem;
  flex: 0 0 auto;
}

.lbx-rp-vol input[type='range'] {
  flex: 1;
  accent-color: var(--lb-accent);
}

.lbx-rp-fine {
  font-size: max(var(--lb-text-xs), 11px);
  color: var(--lb-chalk-faint);
  margin-top: var(--lb-space-2);
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════
   THE CORNERMAN — gold corner-bell FAB bottom-right, slide-up thread.
   ════════════════════════════════════════════════════════════════ */

#lbx-cman-fab {
  position: fixed;
  right: 0.875rem;
  bottom: var(--lbx-dock);
  z-index: 120;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.25rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--lb-gold);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: none;
  transition: transform var(--lb-duration) var(--lb-ease),
    color var(--lb-duration) var(--lb-ease),
    bottom var(--lb-duration) var(--lb-ease);
}

#lbx-cman-fab:hover {
  transform: translateY(-2px);
  background: transparent;
  color: var(--lb-gold-dark);
}

#lbx-cman-fab.hide {
  opacity: 0;
  pointer-events: none;
}

#lbx-cman-fab svg {
  width: 1.625rem;
  height: 1.625rem;
  display: block;
}

#lbx-cman-panel {
  position: fixed;
  right: 0.75rem;
  bottom: calc(var(--lbx-dock) - 0.125rem);
  z-index: 130;
  width: min(22.5rem, calc(100vw - 1.5rem));
  height: min(30rem, calc(100dvh - var(--lb-header-h) - var(--lbx-dock) - 2rem));
  display: flex;
  flex-direction: column;
  background: var(--lb-surface-raised);
  border: 1px solid var(--lb-border-strong);
  border-radius: var(--lb-radius-lg);
  box-shadow: var(--lb-shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition: opacity var(--lb-duration) var(--lb-ease),
    transform var(--lb-duration) var(--lb-ease);
}

#lbx-cman-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lbx-cp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-2);
  padding: var(--lb-space-3) var(--lb-space-4);
  background: var(--lb-header-bg);
  border-bottom: 3px solid var(--lb-gold);
}

.lbx-cp-id {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.lbx-cp-mark {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--lb-gold);
  color: var(--lb-ink-on-gold);
  display: grid;
  place-items: center;
  border: 2px solid var(--lb-gold-dark);
}

.lbx-cp-mark svg {
  width: 1.25rem;
  height: 1.25rem;
}

.lbx-cp-name {
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-base);
  letter-spacing: var(--lb-tracking-display);
  text-transform: uppercase;
  color: var(--lb-header-ink);
  line-height: 1.1;
}

.lbx-cp-role {
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lb-header-gold);
}

.lbx-cp-close {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--lb-radius-sm);
  background: transparent;
  color: var(--lb-header-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--lb-duration) var(--lb-ease);
}

.lbx-cp-close:hover {
  background: rgba(196, 30, 36, 0.25);
}

.lbx-cp-close svg {
  width: 1rem;
  height: 1rem;
}

.lbx-cp-stream {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--lb-space-3);
  background: var(--lb-surface);
}

.lbx-cp-msg {
  display: flex;
}

.lbx-cp-msg-bot { justify-content: flex-start; }
.lbx-cp-msg-me { justify-content: flex-end; }

.lbx-cp-bubble {
  max-width: 85%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--lb-radius-md);
  font-size: var(--lb-text-sm);
  line-height: 1.45;
  color: var(--lb-ink-on-canvas);
}

.lbx-cp-msg-bot .lbx-cp-bubble {
  background: var(--lb-surface-raised);
  border: 1px solid var(--lb-line);
  border-left: 3px solid var(--lb-gold);
}

.lbx-cp-msg-me .lbx-cp-bubble {
  background: var(--lb-chalk);
  color: var(--lb-canvas);
}

/* Typing indicator: static fading dots — visible only while a reply
   is pending (user-initiated), removed as soon as it lands. */
.lbx-cp-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.lbx-cp-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lb-chalk-faint);
}

.lbx-cp-dots i:nth-child(1) { opacity: 0.9; }
.lbx-cp-dots i:nth-child(2) { opacity: 0.6; }
.lbx-cp-dots i:nth-child(3) { opacity: 0.35; }

.lbx-cp-quick {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  padding: 0.5rem var(--lb-space-3);
  border-top: 1px solid var(--lb-line);
  background: var(--lb-surface);
}

.lbx-cp-quick.used {
  display: none;
}

.lbx-cp-quick button {
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--lb-border-strong);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-surface-raised);
  color: var(--lb-chalk-muted);
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--lb-duration) var(--lb-ease),
    color var(--lb-duration) var(--lb-ease);
}

.lbx-cp-quick button:hover {
  border-color: var(--lb-accent);
  color: var(--lb-link);
}

.lbx-cp-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding: var(--lb-space-2) var(--lb-space-3) var(--lb-space-3);
  border-top: 1px solid var(--lb-line);
  background: var(--lb-surface-raised);
}

.lbx-cp-form textarea {
  flex: 1;
  min-height: 2.5rem;
  max-height: 7.5rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--lb-border);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-surface-raised);
  color: var(--lb-ink-on-canvas);
  font-family: var(--lb-font-body);
  font-size: var(--lb-text-sm);
  line-height: 1.4;
  resize: none;
  transition: border-color var(--lb-duration) var(--lb-ease);
}

.lbx-cp-form textarea::placeholder {
  color: var(--lb-chalk-faint);
}

.lbx-cp-form textarea:focus {
  outline: none;
  border-color: var(--lb-accent);
}

.lbx-cp-send {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid var(--lb-accent-dark);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-accent);
  color: var(--lb-ink-on-accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--lb-duration) var(--lb-ease);
}

.lbx-cp-send:hover {
  background: var(--lb-accent-dark);
}

.lbx-cp-send svg {
  width: 1.125rem;
  height: 1.125rem;
}

.lbx-cp-fine {
  padding: 0 var(--lb-space-3) var(--lb-space-2);
  background: var(--lb-surface-raised);
  font-size: max(var(--lb-text-xs), 11px);
  color: var(--lb-chalk-faint);
}

/* ── Reduced motion: even state transitions hold still ───────── */

@media (prefers-reduced-motion: reduce) {
  #lbx-radio-panel,
  #lbx-cman-panel,
  #lbx-radio-fab,
  #lbx-cman-fab,
  #lbx-radio-fab.playing .lbx-ring__glow {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   CORNER AI — the unified in-app assistant. A modest glass pill in the
   header actions opens a dark glass bottom-sheet chat. One voice; the
   sub-agents live invisibly behind the system prompt. No idle motion.
   ════════════════════════════════════════════════════════════════ */

.corner-ai-launch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem 0.3rem 0.5rem;
  border: 1px solid var(--lb-glass-border);
  border-radius: var(--lb-radius-pill);
  background: var(--lb-surface);
  backdrop-filter: blur(var(--lb-glass-blur));
  -webkit-backdrop-filter: blur(var(--lb-glass-blur));
  color: var(--lb-header-ink);
  cursor: pointer;
  transition: border-color var(--lb-duration) var(--lb-ease),
    color var(--lb-duration) var(--lb-ease);
}
.corner-ai-launch:hover {
  border-color: var(--lb-gold);
  color: var(--lb-gold-ink);
}
.corner-ai-launch__glyph {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--lb-gold-ink);
  display: inline-flex;
}
.corner-ai-launch__glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}
.corner-ai-launch__label {
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.corner-ai-root {
  position: fixed;
  inset: 0;
  z-index: 190;
  pointer-events: none;
}
.corner-ai-root.open {
  pointer-events: auto;
}
.corner-ai__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 10, 0.6);
  opacity: 0;
  transition: opacity var(--lb-duration) var(--lb-ease);
}
.corner-ai-root.open .corner-ai__backdrop {
  opacity: 1;
}
.corner-ai {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: min(28rem, 100%);
  height: min(34rem, calc(100dvh - var(--lb-header-h) - 2rem));
  display: flex;
  flex-direction: column;
  padding: var(--lb-space-3) 0 0;
  background: var(--lb-surface-raised);
  backdrop-filter: blur(calc(var(--lb-glass-blur) + 4px));
  -webkit-backdrop-filter: blur(calc(var(--lb-glass-blur) + 4px));
  border: 1px solid var(--lb-glass-border);
  border-bottom: 0;
  border-top: 3px solid var(--lb-gold);
  border-radius: var(--lb-radius-lg) var(--lb-radius-lg) 0 0;
  box-shadow: 0 -16px 44px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transition: transform 260ms var(--lb-ease);
}
.corner-ai-root.open .corner-ai {
  transform: translate(-50%, 0);
}

.corner-ai__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 var(--lb-space-4) var(--lb-space-3);
  border-bottom: 1px solid var(--lb-line);
}
.corner-ai__mark {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lb-gold);
  color: var(--lb-ink-on-gold);
  border: 2px solid var(--lb-gold-dark);
}
.corner-ai__mark svg {
  width: 1.25rem;
  height: 1.25rem;
}
.corner-ai__id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.corner-ai__name {
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-md);
  letter-spacing: var(--lb-tracking-display);
  text-transform: uppercase;
  color: var(--lb-chalk);
  line-height: 1.1;
}
.corner-ai__role {
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lb-gold-ink);
}
.corner-ai__close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--lb-radius-sm);
  background: transparent;
  color: var(--lb-chalk-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--lb-duration) var(--lb-ease),
    color var(--lb-duration) var(--lb-ease);
}
.corner-ai__close:hover {
  background: var(--lb-accent-soft);
  color: var(--lb-chalk);
}
.corner-ai__close svg {
  width: 1rem;
  height: 1rem;
}

.corner-ai__stream {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--lb-space-3) var(--lb-space-4);
  background: var(--lb-surface);
}
.corner-ai__msg {
  display: flex;
}
.corner-ai__msg--bot {
  justify-content: flex-start;
}
.corner-ai__msg--me {
  justify-content: flex-end;
}
.corner-ai__bubble {
  max-width: 85%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--lb-radius-md);
  font-size: var(--lb-text-sm);
  line-height: 1.45;
}
.corner-ai__msg--bot .corner-ai__bubble {
  background: var(--lb-surface-raised);
  border: 1px solid var(--lb-line);
  border-left: 3px solid var(--lb-gold);
  color: var(--lb-ink-on-canvas);
}
.corner-ai__msg--me .corner-ai__bubble {
  background: var(--lb-chalk);
  color: var(--lb-canvas);
}
.corner-ai__dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.corner-ai__dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lb-chalk-faint);
}
.corner-ai__dots i:nth-child(1) { opacity: 0.9; }
.corner-ai__dots i:nth-child(2) { opacity: 0.6; }
.corner-ai__dots i:nth-child(3) { opacity: 0.35; }

.corner-ai__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: var(--lb-space-2) var(--lb-space-4);
  border-top: 1px solid var(--lb-line);
  background: var(--lb-surface);
}
.corner-ai__quick.used {
  display: none;
}
.corner-ai__quick button {
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--lb-border-strong);
  border-radius: var(--lb-radius-pill);
  background: var(--lb-surface-raised);
  color: var(--lb-chalk-muted);
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--lb-duration) var(--lb-ease),
    color var(--lb-duration) var(--lb-ease);
}
.corner-ai__quick button:hover {
  border-color: var(--lb-gold);
  color: var(--lb-gold-ink);
}

.corner-ai__form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding: var(--lb-space-2) var(--lb-space-4) 0;
  border-top: 1px solid var(--lb-line);
  background: var(--lb-surface-raised);
}
.corner-ai__form textarea {
  flex: 1;
  min-height: 2.5rem;
  max-height: 7.5rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--lb-border);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-surface);
  color: var(--lb-ink-on-canvas);
  font-family: var(--lb-font-body);
  font-size: var(--lb-text-sm);
  line-height: 1.4;
  resize: none;
  transition: border-color var(--lb-duration) var(--lb-ease);
}
.corner-ai__form textarea::placeholder {
  color: var(--lb-chalk-faint);
}
.corner-ai__form textarea:focus {
  outline: none;
  border-color: var(--lb-accent);
}
.corner-ai__send {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid var(--lb-accent-dark);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-accent);
  color: var(--lb-ink-on-accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--lb-duration) var(--lb-ease);
}
.corner-ai__send:hover {
  background: var(--lb-accent-dark);
}
.corner-ai__send svg {
  width: 1.1rem;
  height: 1.1rem;
}
.corner-ai__fine {
  margin: 0;
  padding: var(--lb-space-2) var(--lb-space-4) calc(var(--lb-space-3) + var(--lb-safe-bottom));
  background: var(--lb-surface-raised);
  font-size: max(var(--lb-text-xs), 11px);
  color: var(--lb-chalk-faint);
}

@media (prefers-reduced-motion: reduce) {
  .corner-ai,
  .corner-ai__backdrop {
    transition: none;
  }
}

/* Very narrow: label drops so the pill stays out of the header crush. */
@media (max-width: 360px) {
  .corner-ai-launch__label {
    display: none;
  }
}