/* ═══════════════════════════════════════════════════════════════════════════
   SOLAR DUEL DOCK — Two Readings of the Sun
   ---------------------------------------------------------------------------
   A bottom-anchored "duel dock" on solar-monitor.html. One living canvas:
   LEFT  = SOFIA, the corona (radiant rays + rising light-motes, translucent).
   RIGHT = PALL, the fire (FBM flame + falling-back embers, opaque).
   CENTER seam = the limb, where fire becomes light and back.

   Self-contained, sd- prefixed. Theme-aware via --th-* with hard fallbacks.
   Canvas is painted by solar-fx.js; this file owns layout / glass / controls.
   ═══════════════════════════════════════════════════════════════════════════ */

.sd-dock,
.sd-dock * { box-sizing: border-box; }

.sd-dock {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--sd-bottom, 42px);  /* float ABOVE the in-flow .sm-mode-bar (measured by JS) */
  z-index: 60;                      /* above the SDO viz, below modals/nav drawers */
  --sd-h: 104px;                    /* expanded panel — small, hugs the bottom, never impedes the sun */
  --sd-lip: 10px;                   /* seam top inset */
  --sd-gold: var(--th-color-solar, #ffcf6a);
  --sd-ember: #ff5a1f;
  --sd-ink: #f4ecd8;
  --sd-dim: #9a8f78;
  /* Collapsed = fully hidden. The trigger lives nested INSIDE .sm-mode-bar, so
     there is no floating pill to clip. The panel only exists when open. */
  height: 0;
  overflow: hidden;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--sd-ink);
  pointer-events: none;            /* only interactive children catch events */
  transition: height .5s cubic-bezier(.16,.84,.32,1);
  will-change: height;
}
.sd-dock.is-open { height: var(--sd-h); overflow: visible; }

/* The living canvas — full dock width, behind the glass controls */
.sd-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.sd-dock.is-open .sd-canvas { opacity: 1; }

/* Glass shell over the canvas */
.sd-shell {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;     /* sofia | seam | pall */
  align-items: stretch;
  background: linear-gradient(to top, rgba(6,8,12,.82), rgba(6,8,12,.30) 60%, rgba(6,8,12,0));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-top: 1px solid rgba(255,207,106,.22);
  pointer-events: auto;
}

/* ── Collapsed lip: seam title + two breathing sigils ─────────────────────── */
/* The lip is RELOCATED by JS into .sm-mode-bar (right side) so the trigger is
   part of the same bottom bar — one cohesive control, never a floating clip. */
.sd-lip {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  height: 100%;
  flex: 0 0 auto;
  padding: 0 10px 0 12px;
  margin-left: 4px;
  pointer-events: auto;
  cursor: pointer;
  /* it's a <button> — strip native ButtonFace gray + outset bevel border */
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0;
  /* hairline divider from the instrument tabs to its left */
  border-left: 1px solid rgba(255,200,90,.16);
  border-radius: 0;
  font: inherit; color: inherit;
  transition: background .2s ease;
}
.sd-lip:hover { background: rgba(255,200,90,.07); }
.sd-lip-title {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sd-gold); font-weight: 600;
  text-shadow: 0 0 12px rgba(255,207,106,.3);
  white-space: nowrap;
}
.sd-lip-chevron {
  font-size: 11px; color: var(--sd-dim);
  transition: transform .45s ease;
}
.sd-lip.is-open .sd-lip-chevron { transform: rotate(180deg); }
.sd-lip.is-open .sd-lip-title { color: #fff; text-shadow: 0 0 14px rgba(255,207,106,.5); }
.sd-lip .sd-sigil { width: 16px; height: 16px; }

/* Tighten the header band the panel rests under (the lip is gone from here now) */
.sd-shell { padding-top: 6px; }

@media (max-width: 560px) {
  .sd-lip-title { display: none; }   /* icon-only trigger on phones */
  .sd-lip { gap: 7px; padding: 0 8px; }
  .sd-lip .sd-sigil { width: 15px; height: 15px; }
}

/* Sigils — SVG, breathe via CSS, zero GPU when docked */
.sd-sigil { width: 22px; height: 22px; flex: none; }
.sd-sigil--sofia { color: var(--sd-gold); animation: sd-breathe-light 4.2s ease-in-out infinite; }
.sd-sigil--pall  { color: var(--sd-ember); animation: sd-breathe-fire 3.1s ease-in-out infinite; }
@keyframes sd-breathe-light { 0%,100% { opacity:.55; filter:drop-shadow(0 0 3px currentColor);} 50% { opacity:1; filter:drop-shadow(0 0 10px currentColor);} }
@keyframes sd-breathe-fire  { 0%,100% { opacity:.6;  filter:drop-shadow(0 0 4px currentColor);} 45% { opacity:1; filter:drop-shadow(0 0 12px currentColor);} }
.sd-dock[data-speaker="sofia"] .sd-sigil--pall,
.sd-dock[data-speaker="pall"]  .sd-sigil--sofia { opacity:.32; animation-play-state: paused; }

/* ── The two sides (visible only when open) ──────────────────────────────── */
.sd-side {
  position: relative;
  min-width: 0;                    /* allow flex children to compress (no overflow) */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 22px 14px;
  opacity: 0; transition: opacity .5s ease .15s;
}
/* Small bottom strip — drop the long prose so the panel stays short + clear of the sun */
.sd-stance, .sd-stateread { display: none; }
.sd-dock.is-open .sd-side { opacity: 1; }
.sd-side--sofia { align-items: flex-start; text-align: left; }
.sd-side--pall  { align-items: flex-end;   text-align: right; }

.sd-name { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.sd-side--sofia .sd-name { color: var(--sd-gold); text-shadow: 0 0 18px rgba(255,217,138,.4); }
.sd-side--pall  .sd-name { color: #ff8a4d; text-shadow: 0 0 18px rgba(255,90,31,.4); }
.sd-stance { font-size: 11px; color: var(--sd-dim); margin-top: 4px; max-width: 28ch; line-height: 1.4; }
.sd-stateread {
  font-size: 11.5px; color: var(--sd-ink); opacity: .0; margin-top: 10px; min-height: 1.3em;
  max-width: 34ch; line-height: 1.45; font-variant-numeric: tabular-nums;
  transition: opacity .6s ease;
}
.sd-side.is-active .sd-stateread { opacity: .92; }

/* ── Players (reuse the cosmic-duel button vocabulary) ────────────────────── */
.sd-players { display: flex; gap: 10px; margin-top: 8px; }
.sd-side--pall .sd-players { flex-direction: row-reverse; }
.sd-play {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; min-width: 104px;
  background: rgba(20,16,10,.55);
  border: 1px solid rgba(255,207,106,.3);
  border-radius: 4px;
  color: var(--sd-ink); font: inherit; font-size: 11px; letter-spacing: .12em;
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .2s, background .2s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.sd-play:hover { border-color: var(--sd-gold); background: rgba(40,30,16,.6); }
.sd-play:active { transform: translateY(1px); }
.sd-side--pall .sd-play { border-color: rgba(255,90,31,.34); }
.sd-side--pall .sd-play:hover { border-color: var(--sd-ember); }
.sd-play-glyph { font-size: 12px; line-height: 1; }
.sd-play-lbl   { font-weight: 600; white-space: nowrap; }
.sd-play-counter { margin-left: auto; font-size: 10px; color: var(--sd-dim); font-variant-numeric: tabular-nums; }
.sd-play-prog {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  transform: scaleX(var(--pct, 0)); transform-origin: left;
  background: linear-gradient(90deg, var(--sd-gold), var(--sd-ember));
  transition: transform .15s linear;
}
.sd-play.is-generating { border-color: var(--sd-gold); }
.sd-play.is-generating .sd-play-glyph { animation: sd-spin 1s linear infinite; }
.sd-play.is-playing { border-color: var(--sd-gold); background: rgba(50,38,18,.6); }
.sd-play.is-error { border-color: #b3402a; }
@keyframes sd-spin { to { transform: rotate(360deg); } }

/* ── Seam column ──────────────────────────────────────────────────────────── */
.sd-seam {
  position: relative; width: 1px; align-self: stretch;
  margin: var(--sd-lip) 0 0;
  background: linear-gradient(to top, rgba(255,207,106,0), rgba(255,207,106,.5) 40%, rgba(255,207,106,.15));
  opacity: 0; transition: opacity .5s ease .2s;
}
.sd-dock.is-open .sd-seam { opacity: 1; }

/* ── When the panel opens, LIFT the sun so the panel never clips the disk ───
   .sm-sdo-view centers the square sun; bottom padding pushes the centering box
   up, so the sun shrinks-and-rises clear of the open strip. ─────────────────── */
.sm-sdo-view { transition: padding-bottom .5s cubic-bezier(.16,.84,.32,1); }
body.sd-dock-open .sm-sdo-view { padding-bottom: calc(var(--sd-h, 104px) + 12px); }

/* ── Deck + page-orb are both voice surfaces: hide the orb while deck is open ─ */
body.sd-dock-open .companion-orb {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .4s ease !important;
}

/* ── Reduced motion: freeze sigils + canvas handles its own freeze ────────── */
@media (prefers-reduced-motion: reduce) {
  .sd-sigil { animation: none !important; }
  .sd-dock { transition: height .2s ease; }
  .sd-canvas { transition: opacity .2s ease; }
}

/* ── Forced colors / high contrast: keep controls usable without the glow ─── */
@media (forced-colors: active) {
  .sd-shell { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sd-canvas { display: none; }
  .sd-play { border: 1px solid ButtonText; color: ButtonText; background: ButtonFace; }
}

/* ── Responsive: keep the seam VERTICAL on phones (equality), stack controls ─ */
@media (max-width: 560px) {
  .sd-dock { --sd-h: 264px; --sd-lip: 52px; }
  .sd-lip-title { font-size: 10px; letter-spacing: .26em; }
  .sd-side { padding: 0 12px 14px; }
  .sd-stance { display: none; }
  .sd-name { font-size: 12px; }
  .sd-players { flex-direction: column; gap: 7px; width: 100%; }
  .sd-side--pall .sd-players { flex-direction: column; }
  .sd-play { min-width: 0; width: 100%; justify-content: center; }
  .sd-stateread { max-width: 100%; font-size: 11px; }
}
@media (max-width: 380px) {
  .sd-dock { --sd-h: 248px; }
  .sd-name { font-size: 11px; letter-spacing: .16em; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ELEMENTAL CONTAINERS — Sofia is captured LIGHT, Pall is living FIRE.
   Cosmetic-only (no layout props touched, so mobile/state rules above still win).
   Light falls from ABOVE → Sofia is top-lit, lens-round, breathing gold.
   Heat rises from BELOW → Pall is bottom-lit, ember-edged, flickering coal.
   ═══════════════════════════════════════════════════════════════════════════ */

/* layering: bloom behind, content mid, lit rim + progress on top */
.sd-play { isolation: isolate; border-color: transparent; }
.sd-play > .sd-play-glyph,
.sd-play > .sd-play-lbl,
.sd-play > .sd-play-counter { position: relative; z-index: 1; }
.sd-play-prog { z-index: 3; }
.sd-play::before,            /* lit rim   */
.sd-play::after {            /* inner bloom / ember bed */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
}
.sd-play::before { z-index: 2; }
.sd-play::after  { z-index: 0; }
/* gradient-rim technique: paint a 1px ring by masking out the interior */
.sd-play::before {
  padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ── SOFIA · THE LIGHT ─────────────────────────────────────────────────────── */
.sd-side--sofia .sd-play {
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(62,50,26,.55) 0%, rgba(12,10,8,.74) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,246,220,.55),          /* lens catch-light on the top edge */
    inset 0 0 18px -8px rgba(255,224,170,.5),
    0 6px 22px -8px rgba(255,196,110,.42),         /* lamp throw */
    0 0 34px -8px rgba(255,196,110,.30);
}
.sd-side--sofia .sd-play::before {
  background: linear-gradient(180deg,
    rgba(255,240,205,.95) 0%, rgba(255,205,125,.30) 45%, rgba(255,205,125,.05) 100%);
}
.sd-side--sofia .sd-play::after {
  background: radial-gradient(125% 95% at 50% 0%, rgba(255,226,172,.24), transparent 70%);
  animation: sd-glow-light 5.2s ease-in-out infinite;
}
.sd-side--sofia .sd-play .sd-play-glyph {
  color: #ffe7b0; text-shadow: 0 0 10px rgba(255,205,125,.75);
}
.sd-side--sofia .sd-play:hover {
  background: linear-gradient(180deg, rgba(86,68,34,.62) 0%, rgba(16,13,9,.74) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,250,232,.7),
    inset 0 0 22px -8px rgba(255,230,180,.7),
    0 8px 26px -8px rgba(255,205,120,.6),
    0 0 46px -8px rgba(255,205,120,.45);
}
.sd-side--sofia .sd-play:hover::after { animation-duration: 2.6s; }

/* ── PALL · THE FIRE ───────────────────────────────────────────────────────── */
.sd-side--pall .sd-play {
  border-radius: 5px;
  background:
    linear-gradient(0deg, rgba(82,27,11,.62) 0%, rgba(11,8,7,.78) 100%);
  box-shadow:
    inset 0 -1px 0 rgba(255,146,66,.6),            /* glowing coal seam on the bottom edge */
    inset 0 0 18px -8px rgba(255,110,45,.5),
    0 6px 22px -8px rgba(255,82,30,.5),            /* heat throw */
    0 0 34px -8px rgba(255,70,25,.34);
}
.sd-side--pall .sd-play::before {
  background: linear-gradient(0deg,
    rgba(255,156,76,.95) 0%, rgba(255,92,40,.32) 45%, rgba(120,42,20,.10) 100%);
}
.sd-side--pall .sd-play::after {
  background: radial-gradient(135% 105% at 50% 100%, rgba(255,112,42,.32), transparent 66%);
  transform-origin: 50% 100%;
  animation: sd-flicker 2.7s ease-in-out infinite;
}
.sd-side--pall .sd-play .sd-play-glyph {
  color: #ff9a5a; text-shadow: 0 0 10px rgba(255,80,30,.8);
}
.sd-side--pall .sd-play:hover {
  background: linear-gradient(0deg, rgba(112,38,16,.66) 0%, rgba(15,10,8,.78) 100%);
  box-shadow:
    inset 0 -1px 0 rgba(255,178,96,.75),
    inset 0 0 24px -8px rgba(255,130,60,.75),
    0 8px 26px -8px rgba(255,92,34,.62),
    0 0 48px -8px rgba(255,84,28,.5);
}
.sd-side--pall .sd-play:hover::after { animation-duration: 1.5s; }

/* ── Elemental atmosphere behind each half + the limb seam ─────────────────── */
.sd-side { isolation: isolate; }
.sd-side::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .6s ease .15s;
}
.sd-dock.is-open .sd-side::before { opacity: 1; }
.sd-side--sofia::before {
  background: radial-gradient(70% 120% at 16% 100%, rgba(255,206,128,.16), transparent 62%);
  animation: sd-glow-light 6.5s ease-in-out infinite;
}
.sd-side--pall::before {
  background: radial-gradient(70% 120% at 84% 100%, rgba(255,96,36,.15), transparent 60%);
  animation: sd-flicker 3.6s ease-in-out infinite;
}
/* the limb: ember at the base climbing to gold-white light at the top */
.sd-seam {
  width: 2px;
  background: linear-gradient(to top,
    rgba(255,90,36,.0) 0%, rgba(255,110,50,.55) 18%, rgba(255,207,106,.6) 55%,
    rgba(255,247,222,.85) 78%, rgba(255,247,222,.15) 100%);
  box-shadow: 0 0 10px rgba(255,180,90,.5);
}
/* name plates breathe with their element */
.sd-side--sofia .sd-name { animation: sd-name-light 6s ease-in-out infinite; }
.sd-side--pall  .sd-name { animation: sd-name-fire 4.6s ease-in-out infinite; }

@keyframes sd-glow-light {
  0%,100% { opacity: .55; }
  50%     { opacity: 1; }
}
@keyframes sd-flicker {
  0%,100% { opacity: .6;  transform: scaleY(.97); }
  18%     { opacity: 1;   transform: scaleY(1.03); }
  34%     { opacity: .72; transform: scaleY(.99); }
  52%     { opacity: .96; transform: scaleY(1.02); }
  70%     { opacity: .66; transform: scaleY(.98); }
  86%     { opacity: .9;  transform: scaleY(1.01); }
}
@keyframes sd-name-light {
  0%,100% { text-shadow: 0 0 14px rgba(255,217,138,.35); }
  50%     { text-shadow: 0 0 20px rgba(255,232,180,.65); }
}
@keyframes sd-name-fire {
  0%,100% { text-shadow: 0 0 14px rgba(255,90,31,.4); }
  40%     { text-shadow: 0 0 22px rgba(255,128,60,.7); }
  72%     { text-shadow: 0 0 12px rgba(255,80,28,.35); }
}

/* Reduced motion: keep the elemental colour/glow, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .sd-play::after,
  .sd-side::before,
  .sd-side--sofia .sd-name,
  .sd-side--pall .sd-name { animation: none !important; }
}
/* Forced colors: strip the elemental glow so controls stay legible */
@media (forced-colors: active) {
  .sd-play::before, .sd-play::after, .sd-side::before { display: none; }
  .sd-seam { box-shadow: none; }
}