/* Syren's quiet, image-free companion and conversation composition. */
.syren-redesign {
  --champagne: #dcc29a;
  --rose: #c7a38e;
  --hairline: rgba(220, 194, 154, .2);
  background: #080607;
}
.syren-redesign[data-scene=cash], .syren-redesign[data-scene=custom] {
  --scene-rgb: 126, 30, 43;
  --scene-hue: 0deg;
  --rose: #c7a38e;
  --text-muted: #b7a8a0;
}
.syren-redesign .syren-frame {
  background: linear-gradient(180deg, #090708 0%, #110a0b 55%, #080607 100%);
  box-shadow: 0 0 0 1px rgba(220, 194, 154, .13), 0 22px 72px #0008;
}
.syren-redesign .syren-frame::before,
.syren-redesign[data-ambient-scene] .syren-session::before { background: none !important; opacity: 0 !important; }
.syren-redesign .syren-frame::after,
.syren-redesign[data-ambient-scene] .syren-session::after {
  background: radial-gradient(ellipse 82% 36% at 50% 35%, rgba(126, 20, 31, .22), transparent 78%),
    radial-gradient(ellipse 75% 28% at 50% 97%, rgba(220, 194, 154, .06), transparent 90%);
  opacity: 1;
}
.syren-redesign .syren-wordmark { color: #e5c996; text-shadow: 0 1px 1px #5c321b, 0 0 25px #d1a76524; }
.syren-redesign .syren-brand-note { color: #bfaa90; letter-spacing: .11em; line-height: 1.45; }

/* CSS light, with no network image and no rectangular image box. */
.syren-redesign .syren-orb {
  --orb-rgb: 168, 28, 41;
  --orb-core-rgb: 255, 206, 167;
  position: relative;
  display: block;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  appearance: none;
  isolation: isolate;
  animation: syren-calm-breathe 5.8s ease-in-out infinite;
  transform-origin: center;
}
.syren-redesign .syren-orb[data-persona=cash] {
  --orb-rgb: 32, 49, 112;
  --orb-core-rgb: 168, 188, 244;
}
.syren-redesign .syren-orb[data-persona=custom][data-gender=male] { --orb-rgb: 37, 58, 118; --orb-core-rgb: 164, 198, 239; }
.syren-redesign .syren-orb[data-persona=custom][data-gender=neutral] { --orb-rgb: 129, 67, 101; --orb-core-rgb: 232, 191, 187; }
.syren-redesign .syren-orb-glow,
.syren-redesign .syren-orb-core,
.syren-redesign .syren-orb-sheen { position: absolute; display: block; border-radius: 50%; pointer-events: none; }
.syren-redesign .syren-orb-glow {
  inset: -18%;
  background: radial-gradient(circle, rgba(var(--orb-rgb), .37) 0%, rgba(var(--orb-rgb), .12) 48%, transparent 71%);
  filter: blur(13px);
}
.syren-redesign .syren-orb-core {
  inset: 2%;
  background:
    radial-gradient(circle at 31% 24%, rgba(var(--orb-core-rgb), .68), transparent 31%),
    radial-gradient(circle at 70% 75%, rgba(var(--orb-rgb), .96), transparent 49%),
    radial-gradient(circle at 42% 56%, rgba(var(--orb-rgb), .6), #090810 75%);
  box-shadow: inset -14px -20px 36px #030306b8, inset 9px 12px 25px rgba(var(--orb-core-rgb), .12),
    0 0 27px rgba(var(--orb-rgb), .4), 0 0 65px rgba(var(--orb-rgb), .2);
}
.syren-redesign .syren-orb-sheen {
  inset: 9%;
  background: conic-gradient(from 208deg at 49% 49%, transparent 0deg,
    rgba(var(--orb-core-rgb), .12) 75deg, transparent 146deg,
    rgba(var(--orb-core-rgb), .27) 218deg, transparent 305deg);
  filter: blur(8px);
  opacity: .75;
  animation: syren-calm-turn 18s linear infinite;
}
.syren-redesign .syren-orb[data-state=speaking] { animation: syren-calm-speak 1.35s ease-in-out infinite; }
.syren-redesign .syren-orb[data-state=speaking] .syren-orb-glow { opacity: 1; filter: blur(18px); }
.syren-redesign .syren-orb[data-state=listening] .syren-orb-glow { opacity: calc(.65 + var(--signal-level, 0) * .35); }
.syren-redesign .syren-orb[data-persona=cash][data-emotion=excited] .syren-orb-core,
.syren-redesign .syren-orb[data-persona=cash][data-emotion=intimate] .syren-orb-core {
  box-shadow: inset -14px -20px 36px #030306b8, 0 0 30px rgba(39, 49, 123, .55), 0 0 48px #9a233430;
}
@keyframes syren-calm-breathe { 50% { transform: scale(1.035); } }
@keyframes syren-calm-speak { 50% { transform: scale(calc(1.055 + var(--signal-level, 0) * .065)); } }
@keyframes syren-calm-turn { to { transform: rotate(360deg); } }

/* A single centered companion column, with the action always in document flow. */
.syren-redesign .syren-choice {
  height: auto !important;
  min-height: 100dvh;
  overflow: visible !important;
  gap: clamp(6px, 1.2dvh, 13px);
  padding-top: max(14px, env(safe-area-inset-top));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.syren-choice-heading { display: flex; justify-content: space-between; gap: 10px; flex: none; }
.syren-redesign .syren-choice-heading .syren-wordmark { font-size: clamp(31px, 7vw, 38px); }
.syren-redesign .syren-choice-intro { margin: 0; flex: none; }
.syren-redesign .syren-choice-intro h1 { margin: 0; font: 400 clamp(30px, 8vw, 39px)/1.08 Cormorant, Georgia, serif; color: #efddc6; }
.syren-redesign .syren-choice-card {
  flex: 1 0 auto !important;
  min-height: 0;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, .9dvh, 10px);
  padding: 0;
  text-align: center;
  touch-action: pan-y;
}
.syren-redesign .syren-orb-stage { height: clamp(124px, 22dvh, 200px); min-height: 0; margin: 0; animation: none; }
.syren-redesign .syren-choice .syren-orb { width: clamp(120px, 21dvh, 195px); height: clamp(120px, 21dvh, 195px); }
.syren-redesign .syren-choice-card h2 { font-size: clamp(39px, 11vw, 53px); line-height: 1; }
.syren-redesign .syren-choice-traits { color: #c6a77d; font-size: 10px; letter-spacing: .18em; }
.syren-redesign .syren-choice-card > p:not(.syren-choice-teaser):not(.syren-help):not(.syren-sound-hint) { max-width: 31ch; font-size: 16px; line-height: 1.3; margin: 0; }
.syren-redesign .syren-voice-preview { min-height: 44px; font-size: 16px !important; background: #180e10; border-color: #b99a713d; backdrop-filter: none; }
.syren-redesign .syren-choice-teaser { font-size: 16px; margin: 0 !important; }
.syren-redesign .syren-choice-actions { width: 100%; max-width: none; }
.syren-redesign .syren-choice-actions .syren-button { width: 100%; justify-content: center; min-height: 50px; background: linear-gradient(120deg, #511019, #7f1a27 54%, #390c14); border-color: #bd886955; }
.syren-redesign .syren-choice-actions .syren-detail-icon { display: none; }
.syren-choice-footer { display: grid; gap: 2px; flex: none; }
.syren-redesign .syren-dots { display: flex; justify-content: center; gap: 9px; padding: 0; }
.syren-redesign .syren-dot, .syren-redesign .syren-dot[aria-current=true] { display: block; width: 6px; height: 6px; min-width: 6px; min-height: 6px; padding: 0; border-radius: 50%; background: #bfa98f70; opacity: 1; }
.syren-redesign .syren-dot[aria-current=true] { background: #e4c79a; box-shadow: 0 0 8px #e4c79a66; }
.syren-redesign .syren-dot::after { display: none; }
.syren-redesign .syren-bottom-nav { padding: 3px 0 0; margin-top: 4px; background: none; }
.syren-redesign .syren-bottom-nav button { min-height: 40px; }

/* Unframed idle space; four aligned controls and a quiet sound hint. */
.syren-redesign .syren-session { height: 100dvh; min-height: 0; overflow: hidden; gap: clamp(4px, .8dvh, 9px); }
.syren-redesign .syren-session-orb { flex: 1 1 auto; min-height: 150px; height: auto; padding: 0; }
.syren-redesign .syren-session-orb .syren-orb { width: clamp(150px, 28dvh, 250px); height: clamp(150px, 28dvh, 250px); }
.syren-redesign .syren-state-label { min-height: 27px; font-size: clamp(20px, 5vw, 25px); text-align: center; }
.syren-redesign .syren-transcript { flex: 0 1 auto; min-height: 56px; max-height: 23dvh; margin: 2px 0; border: 0; border-top: 1px solid #c5a37535; border-bottom: 1px solid #c5a37535; }
.syren-redesign .syren-intensity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; flex: none; min-height: 48px; padding: 5px; border-radius: 13px; background: #0f0b0c; border-color: #b795693b; backdrop-filter: none; }
.syren-redesign .syren-intensity:has(button:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.syren-redesign .syren-intensity button { min-width: 0; min-height: 38px; padding: 5px 2px; font-size: clamp(13px, 3.6vw, 16px); white-space: nowrap; }
.syren-redesign .syren-intensity button[aria-pressed=true] { color: #f6dfc2; background: #671722; border-color: #bd8a685c; box-shadow: none; }
.syren-redesign .syren-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 5px; flex: none; margin: 2px 0 0; padding: 0; }
.syren-redesign .syren-control { min-width: 0; min-height: 70px; padding: 0; font-size: 13px; line-height: 1.15; white-space: nowrap; color: #d9c8b3; }
.syren-redesign .syren-control-icon, .syren-redesign .syren-control-end .syren-control-icon { display: grid; place-items: center; width: 52px; height: 52px; min-width: 52px; min-height: 52px; margin: 0 auto 5px; border: 1px solid #c8aa7e55; border-radius: 50%; background: #171011; color: #e0cba8; box-shadow: none; }
.syren-redesign .syren-control-end .syren-control-icon { background: linear-gradient(145deg, #741722, #400e15); border-color: #b66368a3; color: #fff1eb; }
.syren-redesign .syren-control-icon svg, .syren-redesign .syren-control-end .syren-control-icon svg { width: 25px; height: 25px; }
.syren-redesign .syren-sound-hint { margin: 0; color: #c4a986; font: 11px/1.2 -apple-system, BlinkMacSystemFont, sans-serif; text-align: center; }
.syren-redesign .syren-typed-form { margin: 0; }
@media (max-height: 700px) {
  .syren-redesign .syren-choice { gap: 4px; }
  .syren-redesign .syren-choice-card { gap: 4px; }
  .syren-redesign .syren-orb-stage { height: 126px; }
  .syren-redesign .syren-choice .syren-orb { width: 120px; height: 120px; }
  .syren-redesign .syren-session-orb { min-height: 115px; }
  .syren-redesign .syren-session-orb .syren-orb { width: 142px; height: 142px; }
  .syren-redesign .syren-control-icon, .syren-redesign .syren-control-end .syren-control-icon { width: 46px; height: 46px; min-width: 46px; min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .syren-redesign .syren-orb, .syren-redesign .syren-orb-sheen { animation: none !important; transform: none !important; }
  .syren-redesign .syren-orb-glow { filter: blur(13px) !important; }
}
.syren-redesign[data-ambient-scene=velvet] .syren-session::after { background: radial-gradient(ellipse 82% 40% at 50% 35%, #751a2a55, transparent 76%), #090708; }
.syren-redesign[data-ambient-scene=midnight] .syren-session::after { background: radial-gradient(ellipse 78% 34% at 50% 25%, #b9986926, transparent 82%), #070708; }
.syren-redesign[data-ambient-scene=candlelight] .syren-session::after { background: radial-gradient(ellipse 73% 42% at 50% 31%, #ba79463d, transparent 78%), #0b0807; }
.syren-ambient-option[data-scene=classic] .syren-ambient-swatch { background: linear-gradient(100deg, #080607, #541019, #090708); }
.syren-ambient-option[data-scene=velvet] .syren-ambient-swatch { background: linear-gradient(100deg, #080607, #7a1c2a, #0c090a); }
.syren-ambient-option[data-scene=midnight] .syren-ambient-swatch { background: linear-gradient(100deg, #050506, #231b15, #090809); }
.syren-ambient-option[data-scene=candlelight] .syren-ambient-swatch { background: linear-gradient(100deg, #0d0907, #8b5830, #090707); }