/* Embedded variants of UI/frosted-eye, UI/frosted-sync and UI/recording-timer. */
.news-area { position:relative; flex:0 0 auto; min-width:0; }
.news-tools {
  --button-bg:rgb(12 13 16 / .58);
  --button-sheen:rgb(255 255 255 / .15);
  --button-border:rgb(255 255 255 / .32);
  --inner-ring:rgb(255 255 255 / .1);
  --control-shadow:rgb(0 0 0 / .4);
  --control-icon:#f7f6f3;
  position:absolute; bottom:calc(100% + var(--tools-lift,24px)); left:0; z-index:4;
  display:flex; align-items:center; gap:16px;
}
:root[data-theme=light] .news-tools {
  --button-bg:rgb(255 255 255 / .48);
  --button-sheen:rgb(255 255 255 / .85);
  --button-border:rgb(20 21 25 / .2);
  --inner-ring:rgb(255 255 255 / .72);
  --control-shadow:rgb(55 55 65 / .18);
  --control-icon:#111216;
}
.frosted-control {
  position:relative; isolation:isolate; display:grid; place-items:center;
  width:44px; height:44px; flex:0 0 44px; padding:0; border-radius:50%;
  border:1px solid var(--button-border); color:var(--control-icon);
  background:radial-gradient(circle at 30% 20%,var(--button-sheen),transparent 43%),
    linear-gradient(145deg,var(--button-sheen),transparent 38%),var(--button-bg);
  box-shadow:0 7px 18px -5px var(--control-shadow),inset 0 1px 0 var(--inner-ring);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  backdrop-filter:blur(24px) saturate(145%);
  transition:transform .3s var(--ease),box-shadow .3s ease;
}
.frosted-control::after {
  content:''; position:absolute; inset:3px; border:1px solid var(--inner-ring);
  border-radius:inherit; pointer-events:none;
}
.frosted-control:hover { transform:scale(1.035); box-shadow:0 9px 22px -5px var(--control-shadow); }
.frosted-control:active { transform:scale(.96); }
.frosted-control:focus-visible { outline:2px solid var(--control-icon); outline-offset:4px; }
.frosted-control svg { position:relative; width:58%; height:58%; }
.eye-button__icon { fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.eye-button__eye circle { fill:currentColor; stroke:none; }
.eye-button__slash { transform-origin:center; transition:opacity .25s ease,transform .3s var(--ease); }
.eye-button.is-shown .eye-button__slash { opacity:0; transform:scale(.82); }
.sync-button__icon { fill:currentColor; stroke:none; transform-origin:center; }
.sync-button__icon.is-rotating { animation:sync-turn .65s cubic-bezier(.32,.06,.2,1) both; }
@keyframes sync-turn { to { transform:rotate(360deg); } }
.news-status-row { display:flex; align-items:center; gap:12px; min-width:0; }
.news-status-row .ticker { flex:0 0 50%; min-width:0; }
.recording-timer {
  --digit-w:9px; --digit-h:calc(var(--digit-w) * 1.68);
  --digit-gap:2px; --unit-gap:3px; --separator-w:2px; --rec-size:12px;
  --font-mono:var(--mono); --lamp:#ff3b2a; --lamp-ghost:rgb(255 59 42 / .08);
  --lamp-glow:rgb(255 55 39 / .38); --lamp-halo:rgb(255 48 31 / .1);
  --rec:#ff3b2a; --rec-ring:rgb(255 59 42 / .42);
  display:flex; align-items:center; gap:8px; height:24px; min-width:0;
}
:root[data-theme=light] .recording-timer {
  --lamp:#111110; --lamp-ghost:rgb(17 17 16 / .07);
  --lamp-glow:transparent; --lamp-halo:transparent;
  --rec:#d92f24; --rec-ring:rgb(217 47 36 / .4);
}

.recording-timer .rec {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 0.8vw, 10px);
}

.recording-timer .rec__ring {
  position: relative;
  display: grid;
  width: var(--rec-size);
  aspect-ratio: 1;
  border: 1px solid var(--rec-ring);
  border-radius: 50%;
  place-items: center;
}

.recording-timer .rec__dot {
  position: relative;
  z-index: 1;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--rec);
  box-shadow: 0 0 13px rgba(255, 54, 38, 0.55);
  animation: rec-breathe 1.8s ease-in-out infinite;
}

.recording-timer .rec__pulse {
  position: absolute;
  inset: -1px;
  border: 1px solid var(--rec);
  border-radius: inherit;
  opacity: 0;
  animation: rec-pulse 2.4s ease-out infinite;
}

.recording-timer .rec__word {
  color: var(--rec);
  font-family: var(--font-mono);
  font-size: clamp(8px, 0.68vw, 10px);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1;
}

.recording-timer .timecode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--unit-gap);
  min-width: 0;
  user-select: none;
}

.recording-timer .timecode__unit {
  display: flex;
  align-items: stretch;
  gap: var(--digit-gap);
}

.recording-timer .digit {
  position: relative;
  flex: 0 0 auto;
  width: var(--digit-w);
  height: var(--digit-h);
}

.recording-timer .segment {
  position: absolute;
  display: block;
  background: var(--lamp-ghost);
}

.recording-timer .segment.is-on {
  background: var(--lamp);
  box-shadow:
    0 0 calc(var(--digit-w) * 0.09) var(--lamp-glow),
    0 0 calc(var(--digit-w) * 0.28) var(--lamp-halo);
}

.recording-timer .segment--a {
  top: 0;
  left: 14%;
  width: 72%;
  height: 9.6%;
  clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
}

.recording-timer .segment--b {
  top: 12%;
  right: 0;
  width: 16%;
  height: 29%;
  clip-path: polygon(50% 0, 100% 8%, 100% 92%, 50% 100%, 0 92%, 0 8%);
}

.recording-timer .segment--c {
  right: 0;
  bottom: 12%;
  width: 16%;
  height: 29%;
  clip-path: polygon(50% 0, 100% 8%, 100% 92%, 50% 100%, 0 92%, 0 8%);
}

.recording-timer .segment--d {
  bottom: 0;
  left: 14%;
  width: 72%;
  height: 9.6%;
  clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
}

.recording-timer .segment--e {
  bottom: 12%;
  left: 0;
  width: 16%;
  height: 29%;
  clip-path: polygon(50% 0, 100% 8%, 100% 92%, 50% 100%, 0 92%, 0 8%);
}

.recording-timer .segment--f {
  top: 12%;
  left: 0;
  width: 16%;
  height: 29%;
  clip-path: polygon(50% 0, 100% 8%, 100% 92%, 50% 100%, 0 92%, 0 8%);
}

.recording-timer .segment--g {
  top: 45.2%;
  left: 14%;
  width: 72%;
  height: 9.6%;
  clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
}

.recording-timer .separator {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
}

.recording-timer .separator--colon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--separator-w);
  gap: calc(var(--separator-w) * 2.8);
}

.recording-timer .separator--colon::before,
.recording-timer .separator--colon::after {
  width: 100%;
  aspect-ratio: 1;
  background: var(--lamp);
  box-shadow:
    0 0 calc(var(--digit-w) * 0.09) var(--lamp-glow),
    0 0 calc(var(--digit-w) * 0.25) var(--lamp-halo);
  content: "";
}

.recording-timer .separator--prime {
  width: calc(var(--separator-w) * 0.68);
}

.recording-timer .separator--prime::before {
  position: absolute;
  top: 13%;
  left: 0;
  width: 100%;
  height: clamp(11px, calc(var(--digit-w) * 0.135), 20px);
  background: var(--lamp);
  box-shadow:
    0 0 calc(var(--digit-w) * 0.08) var(--lamp-glow),
    0 0 calc(var(--digit-w) * 0.2) var(--lamp-halo);
  content: "";
  transform: skewX(-18deg);
  transform-origin: top left;
}

@keyframes rec-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.42;
  }
}

@keyframes rec-pulse {
  0% {
    opacity: 0.38;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.85);
  }
}


.recording-timer .rec { gap:2px; }
.recording-timer .rec__word { font-size:5px; letter-spacing:.12em; }
.recording-timer .separator--prime::before { height:3px; }
/* Keep the OC anchored, revealing its lower artwork only while the UI is hidden. */
.character-menu-anchor {
  position:absolute; z-index:5; top:6px;
  left:max(0px,calc(50% - 326px)); width:180px; pointer-events:none;
}
.character-menu-anchor .oc-arc { width:100%; }
/* The fan doubles as a drag handle. In external-trigger mode the sector glass is a
   disabled button, so the whole component box takes the press instead; the three action
   buttons are children and keep their own clicks. */
.character-menu-anchor .oc-arc { pointer-events:auto; cursor:grab; touch-action:none; }
.character-menu-anchor.is-dragging .oc-arc { cursor:grabbing; }
.character-menu-anchor.is-dragging { user-select:none; }
/* Layer ladder: character art 2 < crop scrim 3 < news dock 4 < menu 5. The menu is
   always in front of the character, whatever frame it is showing. */
.character-art { z-index:2; }
.character-stage::after { z-index:3; transition:opacity .4s ease; }
/* The dock lifts 8px on hover; keep it above the crop scrim so the ticker never slides under that light band. */
.news-dock { z-index:4; }
.is-focus-mode .character-stage { overflow:visible; }
.is-focus-mode .character-stage::after { opacity:0; }
/* Fade wrappers instead of their children, preserving layout geometry. */
[data-focus-hide] { transition:opacity .4s ease,visibility 0s,transform .55s var(--ease); }
.is-focus-mode [data-focus-hide] {
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s ease,visibility 0s .4s,transform .55s var(--ease);
}
@media(max-width:980px) {
  .character-menu-anchor { left:6px; top:66px; width:150px; }
  .news-area { grid-column:1/-1; width:90%; max-width:700px; }
  .news-area .news-dock { width:100%; }
}
@media(max-width:520px) {
  .news-tools { gap:14px; }
  .news-status-row { gap:8px; }
  .recording-timer { --digit-w:7px; --digit-gap:1px; --unit-gap:2px; --separator-w:1.5px; gap:5px; }
}
@media(max-width:360px) {
  .recording-timer { --digit-w:6px; --unit-gap:1px; --rec-size:10px; gap:4px; }
}
@media(prefers-reduced-motion:reduce) {
  [data-focus-hide],.is-focus-mode [data-focus-hide],.frosted-control,.eye-button__slash,.character-stage::after { transition:none; }
  .sync-button__icon.is-rotating,.recording-timer .rec__dot,.recording-timer .rec__pulse { animation:none; }
}

/* Voice dialogue: the shared voice-dialogue language (feathered glass panel, Voice
   tag, bobbing triangle) sized for the strip above Breaking News. Width is measured
   from the news column's left edge to the recording timer's right edge in profile.js.
   It fades in when a talking clip starts and fades out when the clip ends or the
   triangle is clicked. */
.news-status-row { position:relative; }
/* Layer ladder inside .oc-lane: radial menu 1 < character art 2 < crop scrim 3 <
   news dock 4 < this panel 6. It rides with the dock's hover dent, but always paints
   in front of the character artwork. */
.oc-voice {
  --voice-ink:#f3f1ea;
  --voice-tag:#8db8b2;
  position:absolute;
  left:0;
  bottom:calc(100% + 10px);
  z-index:6;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:64px;
  padding:11px 46px 12px 18px;
  border:1px solid rgb(244 242 234 / .3);
  border-radius:16px;
  background:linear-gradient(135deg,rgb(9 13 11 / .88) 0%,rgb(6 9 8 / .72) 58%,rgb(9 13 11 / .5) 100%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 24px 70px -28px rgb(0 0 0 / .52);
  -webkit-backdrop-filter:blur(13px) saturate(105%);
  backdrop-filter:blur(13px) saturate(105%);
  color:var(--voice-ink);
  opacity:0;
  visibility:hidden;
  transform:translateY(7px);
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility 0s .34s;
  pointer-events:none;
}
.oc-voice[data-open="true"] {
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility 0s;
}
.oc-voice__tag {
  position:absolute;
  top:-13px;
  left:18px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:24px;
  padding:0 10px;
  border-radius:4px;
  background:rgb(6 10 8 / .82);
  box-shadow:0 8px 20px -12px rgb(0 0 0 / .82),inset 0 1px 0 rgb(255 255 255 / .06);
  color:rgb(240 238 230 / .82);
  font:500 9px/1 var(--sans);
  letter-spacing:.09em;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.oc-voice__icon {
  display:block;
  width:13px;
  height:13px;
  fill:none;
  stroke:var(--voice-tag);
  stroke-width:1.15;
}
.oc-voice__play { fill:var(--voice-tag); stroke:none; }
.oc-voice__text {
  margin:0;
  max-width:100%;
  color:var(--voice-ink);
  font:500 13.5px/1.55 var(--sans);
  letter-spacing:.02em;
  text-wrap:pretty;
  text-shadow:0 2px 8px rgb(0 0 0 / .78);
}
/* Playback ruler: a faint track with a fill that grows over exactly the wav's length,
   so the subtitle and the recorded line visibly share one clock. */
.oc-voice__progress {
  position:absolute;
  right:16px;
  bottom:4px;
  left:16px;
  height:1.5px;
  border-radius:2px;
  background:rgb(255 255 255 / .14);
  opacity:0;
  overflow:hidden;
  pointer-events:none;
}
.oc-voice__progress::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:var(--voice-tag);
  transform:scaleX(0);
  transform-origin:left center;
}
.oc-voice__progress.is-running { opacity:.55; }
.oc-voice__progress.is-running::after {
  animation:voice-ruler var(--voice-ms,4s) linear forwards;
}
@keyframes voice-ruler {
  from { transform:scaleX(0); }
  90% { transform:scaleX(1); opacity:1; }
  to { transform:scaleX(1); opacity:0; }
}
.oc-voice__continue {
  position:absolute;
  right:16px;
  bottom:12px;
  width:17px;
  height:12px;
  padding:0;
  border:0;
  background:none;
  color:rgb(255 255 255 / .86);
  filter:drop-shadow(0 2px 4px rgb(0 0 0 / .45));
  cursor:pointer;
  animation:voice-cue 1.9s ease-in-out infinite;
}
.oc-voice__continue svg { display:block; width:100%; height:100%; fill:currentColor; }
.oc-voice__continue:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
@keyframes voice-cue {
  0%,100% { opacity:.58; transform:translateY(0); }
  50% { opacity:1; transform:translateY(3px); }
}
:root[data-theme="light"] .oc-voice {
  --voice-ink:#20282a;
  --voice-tag:#55661f;
  border-color:rgb(20 20 24 / .22);
  background:linear-gradient(135deg,rgb(255 255 255 / .9) 0%,rgb(240 243 236 / .74) 58%,rgb(255 255 255 / .52) 100%);
  box-shadow:inset 0 1px 0 #fff,0 24px 70px -28px rgb(31 38 135 / .22);
}
:root[data-theme="light"] .oc-voice__tag { background:rgb(255 255 255 / .82); color:rgb(32 40 42 / .8); }
:root[data-theme="light"] .oc-voice__progress { background:rgb(20 20 24 / .12); }
:root[data-theme="light"] .oc-voice__text { text-shadow:none; }
:root[data-theme="light"] .oc-voice__continue { color:rgb(32 40 42 / .8); filter:none; }
@media(prefers-reduced-motion:reduce) {
  .oc-voice,.oc-voice[data-open="true"] { transition:none; transform:none; }
  .oc-voice__continue { animation:none; }
  .oc-voice__progress.is-running { opacity:0; }
  .oc-voice__progress.is-running::after { animation:none; }
}