/* Moonlit shore. This layer owns appearance only; audio and session logic stay separate. */
:root {
  --bg: #192438;
  --panel: #233149;
  --line: #c5d4ef1b;
  --text: #edeef4;
  --muted: #a7b2c8;
  --accent: #d3bbc8;
  --teal: #b0ccc9;
  --rose: #dca9b8;
}

body {
  background: #192438;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, #172438d9, #29354cc7 58%, #242d43bc),
    url('/static/images/moonlit-shore.webp') center 60% / cover;
}
.app-shell { position: relative; }
.sidebar {
  background: linear-gradient(160deg, #203047ee, #19263bef);
  border-right-color: #c7d9f019;
  box-shadow: 12px 0 60px #0b142510;
}
.brand-mark { color: #ecdfcc; text-shadow: 0 0 24px #dacbbc38; }
.brand small, .nav-caption { color: #a7b6cc; }
nav a { color: #aab5ca; transition: background .2s, color .2s; }
nav a:hover { background: #dce7ff07; color: #edf0f6; }
nav a.active {
  color: #ecdfde;
  background: linear-gradient(110deg, #cbb6c726, #cbb6c708);
  border-color: #dac8d220;
  box-shadow: inset 2px 0 #dac8ce88;
}
.sidebar-bottom { color: #a2b1c7; }
.topbar { background: #1a263b50; border-color: #d8e3f315; }
.top-status { color: #a7b8cb; }
.top-status .live-dot { box-shadow: 0 0 9px #a9c6c733; }
.page-heading { margin-bottom: 30px; }
.eyebrow { color: #c6b9cf; }
.chapter-number { color: #a6afc4; }
h1 { color: #f0ebee; }
label { color: #ccd3e1; }
input, textarea, select { background: #18263b9c; border-color: #cbd8ee26; }
input::placeholder, textarea::placeholder { color: #95a2bb; }
select option { background: #24334a; color: #eef0f5; }
button, .button { transition: background .2s, border-color .2s, color .2s; }
.primary {
  background: linear-gradient(110deg, #d2bdcb, #bfc8dc);
  color: #283146;
  box-shadow: 0 4px 20px #11192b1c;
}
.primary:hover:not(:disabled) { background: linear-gradient(110deg, #e3ceda, #d0d9e9); color: #202b40; }
.soft-card, .chapter-card, .reading-paper, .call-list-panel, .raw-panel {
  background: linear-gradient(130deg, #35425a88, #26364bc7);
  border-color: #d6e1f321;
  box-shadow: 0 12px 40px #10192b12;
}
.soft-card { border-radius: 18px; }
.hero-art { border-radius: 22px; box-shadow: 0 18px 50px #0d162d38; }
.hero-art.has-art .art-caption { background: #1a263777; backdrop-filter: blur(8px); }
.art-caption p { color: #d1c7d7; }
.companion-mini .avatar { border: 1px solid #decfde33; box-shadow: 0 0 0 5px #bdc8e209; }
.small-note { color: #d3c5d5; }
.small-note p { color: #c3c9db; }
.pill { background: #c0cde40a; color: #c1d2de; border-color: #c9dbea29; border-radius: 20px; }
.notice { background: #b8c9e00a; color: #bac5d9; border-left-color: #c6b9d0; }
.built-in-persona { background: linear-gradient(130deg, #a195b726, #25394ce0); }
.connection-services>button[aria-pressed=true] { background: linear-gradient(120deg, #b2a4bd29, #2d3c52); }
#raw-output, dialog pre { background: #18253ce8; color: #d6dfef; }
dialog { background: #24334a; }
.empty { color: #b4bfd2; }
.empty small { color: #98a9c2; }
.asset-preview { background: #2b3b52; }
.chapter-card.current { border-color: #d6c1d05e; background: linear-gradient(120deg, #b4a4bc24, #263c53b8); }
.chapter-card .number { color: #bbadc8; }
#mini-call { background: #22314bf2; box-shadow: 0 -8px 30px #13223b40; }
#toast { background: #35435c; }

/* The room stays spacious. The artwork is behind every control and subtitle. */
.call-page { padding: 22px 28px; }
.call-room {
  position: relative;
  isolation: isolate;
  --disc-size: clamp(128px, 16.5dvh, 184px);
  --label-size: clamp(92px, 12dvh, 134px);
  padding: 20px 30px;
  border: 1px solid #d7e4fa28;
  border-radius: 26px;
  background: #263952;
  box-shadow: 0 20px 55px #0a17292e, inset 0 0 0 1px #c7d4e506;
}
.call-room>.art-image { opacity: .87; object-position: var(--x, 50%) var(--y, 50%); z-index: -3; }
.room-glow {
  z-index: -2;
  background: linear-gradient(180deg, #18273e22, #1b2b4269 36%, #192a41c7 72%, #17263df0),
    linear-gradient(90deg, #1b2c434d, transparent 65%);
}
.call-room::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, #b8bce112, transparent 52%);
}
.call-top { position: relative; color: #c4cddd; font-size: 11px; gap: 18px; }
.call-top .pill { color: #e3dadb; border-color: #d5d7e330; background: #26364b54; font-size: 9px; }
#call-clock { font-variant-numeric: tabular-nums; letter-spacing: 2px; }
.night-caption { margin-left: auto; color: #c4cbe0; font-family: 'Yu Mincho', 'SimSun', serif; letter-spacing: 2px; font-size: 11px; }
.call-top>a { margin-left: 10px; font-size: 10px; }
.call-presence { padding: 22px 0 0; }
.call-presence h1 { font-size: 27px; letter-spacing: 6px; margin: 16px 0 9px; text-shadow: 0 2px 20px #18223988; }
.call-state { color: #ddd6e3; }
.call-presence #statusdetail { color: #bfcbdf; font-size: 11px; margin: 10px auto 6px; }

/* Rotate the wrapper, preserving the existing image cropping and zoom transform. */
.record-player { width: var(--disc-size); height: var(--disc-size); position: relative; margin: 0 auto; }
.record-player::before, .record-player::after {
  content: '';
  position: absolute;
  inset: -12px;
  border: 1px solid #d4d9f22a;
  border-radius: 50%;
  pointer-events: none;
}
.record-player::after { inset: -24px; border-color: #c9d5ef0e; }
.record-halo {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, #cab6df16 20%, #adb9db12 52%, transparent 71%);
  opacity: .55;
  animation: moon-breathe 9s ease-in-out infinite;
  animation-play-state: paused;
  pointer-events: none;
}
.record-disc {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid #c3c4dd40;
  background: repeating-radial-gradient(circle, transparent 0 3px, #bdcae51b 3.5px 4px, transparent 4.5px 7px),
    conic-gradient(from 24deg, #26364c, #46516a 16%, #203147 27%, #28374f 51%, #5a6176 64%, #25354b 76%, #26364c);
  box-shadow: 0 10px 35px #0b152966, inset 0 0 0 5px #172a4140;
  animation: moon-record 90s linear infinite;
  animation-play-state: paused;
}
.record-disc .call-avatar {
  width: var(--label-size);
  height: var(--label-size);
  margin: 0;
  border: 2px solid #c6bcce6b;
  box-shadow: 0 0 0 5px #17273d7a, 0 0 0 6px #c1c2d826;
  background: #34415a;
  font-size: 52px;
}
.record-disc .call-avatar[data-state=playing] { box-shadow: 0 0 0 5px #17273d7a, 0 0 0 6px #d5c9e35e; }
body[data-playing=true][data-page=call][data-motion=gentle] .record-disc,
body[data-playing=true][data-page=call][data-motion=gentle] .record-halo { animation-play-state: running; }
.voice-bars { opacity: .72; gap: 4px; height: 18px; }
.voice-bars i { width: 2px; height: 4px; background: #d5cada; }
body[data-playing=true][data-motion=gentle] .voice-bars i { animation: moon-voice 2.1s ease-in-out infinite; }
.subtitle-area { padding: 18px 24px; min-height: 120px; max-width: 790px; }
.subtitle-area>p { font-size: 22px; line-height: 1.8; color: #f0eaf0; text-shadow: 0 2px 20px #13243c80; }
.subtitle-area>small { color: #b5bfd3; font-size: 10px; letter-spacing: .5px; }
.call-bottom { position: relative; max-width: 820px; }
.call-microphone { background: #25364c73; border-color: #c4d4e52c; padding: 6px 14px; }
.call-microphone button { background: #d7e0f00a; border-color: #d1ddee2e; }
.call-microphone span { color: #bdcfd5; }
.voice-transcript { color: #b2bfd4; font-size: 10px; margin: 8px auto 15px; }
.call-actions { gap: 18px; margin-bottom: 16px; }
.call-actions button, .call-actions .button { color: #c3cbdd; font-size: 10px; gap: 10px; }
.call-actions b { width: 45px; height: 45px; background: #bdcde80c; border-color: #c7d9f126; transition: background .25s, border-color .25s; }
.call-actions button:hover:not(:disabled) b, .call-actions .button:hover b { background: #c5d8f322; border-color: #d5e4f449; }
.call-actions .end-call b { background: #bb7c9330; color: #efbdce; border-color: #d99db046; }
#sayform { background: #1a2b426b; border-color: #c4d4e52b; border-radius: 16px; padding: 7px; }
#say { padding-left: 14px; color: #e1e7f2; }
#send { border-radius: 11px; }
.input-note { color: #a3b2cb; }

/* Four dim motes, no canvas, particles library, mouse tracking, or animation timers. */
.night-sparks { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.night-sparks i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #d5dbea;
  opacity: .2; box-shadow: 0 0 8px #e3d5df55; animation: moon-mote 24s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.night-sparks i:nth-child(1) { left: 12%; top: 33%; animation-delay: -8s; }
.night-sparks i:nth-child(2) { left: 82%; top: 20%; animation-delay: -15s; width: 2px; height: 2px; }
.night-sparks i:nth-child(3) { left: 21%; top: 62%; animation-delay: -3s; width: 2px; height: 2px; }
.night-sparks i:nth-child(4) { left: 89%; top: 53%; animation-delay: -19s; }
body[data-page=call][data-playing=true][data-motion=gentle] .night-sparks i { animation-play-state: running; }
body[data-motion=still] .record-disc, body[data-motion=still] .record-halo,
body[data-motion=still] .night-sparks i, body[data-motion=still] .voice-bars i { animation-play-state: paused !important; }
body[data-motion=still] .record-halo { opacity: .55; }
@keyframes moon-record { to { transform: rotate(360deg); } }
@keyframes moon-breathe { 50% { opacity: .85; transform: scale(1.07); } }
@keyframes moon-voice { 50% { transform: scaleY(3); } }
@keyframes moon-mote { to { transform: translate(9px, -24px); opacity: .38; } }

@media (min-width: 1550px) and (min-height: 1000px) {
  .call-room { --disc-size: 206px; --label-size: 150px; }
  .call-presence { padding-top: 40px; }
}
@media (min-width: 851px) and (max-height: 820px) {
  .call-page { padding: 12px 20px; }
  .call-room { --disc-size: clamp(96px, 14dvh, 124px); --label-size: clamp(70px, 10dvh, 90px); padding: 12px 22px; }
  .call-presence { padding-top: 10px; }
  .record-player::before { inset: -8px; }
  .record-player::after { inset: -17px; }
  .call-presence h1 { font-size: 23px; margin: 11px 0 5px; }
  .call-presence #statusdetail { margin: 5px auto 3px; }
  .voice-bars { height: 14px; }
  .subtitle-area { padding: 8px 16px; min-height: 78px; }
  .subtitle-area>p { font-size: 19px; line-height: 1.65; margin-bottom: 6px; }
  .call-microphone { padding: 5px 10px; margin-top: 0; }
  .voice-transcript { margin: 4px auto 8px; }
  .call-actions { gap: 12px; margin-bottom: 8px; }
  .call-actions b { width: 37px; height: 37px; }
  .call-actions button, .call-actions .button { gap: 7px; }
  #sayform { padding: 5px; }
}
@media (max-width: 1000px) { .night-caption { display: none; } .call-top>a { margin-left: auto; } }
@media (max-width: 850px) {
  .call-page { padding: 16px; }
  .call-room { --disc-size: 148px; --label-size: 106px; padding: 20px 18px; border-radius: 21px; }
  .call-presence { padding-top: 30px; }
  .call-presence h1 { font-size: 25px; }
  .subtitle-area { padding: 22px 10px; min-height: 140px; }
  .subtitle-area>p { font-size: 20px; }
  .call-actions { gap: 12px; }
  .call-actions b { width: 39px; height: 39px; }
}
@media (max-width: 540px) {
  .call-page { padding: 10px; }
  .call-room { padding: 16px 12px; }
  .call-top { gap: 10px; }
  .call-top .pill { font-size: 8px; padding: 5px 7px; letter-spacing: .5px; }
  .call-top>a { font-size: 9px; }
  .call-actions { gap: 14px 5px; }
  .call-actions button, .call-actions .button { min-width: 55px; }
  .subtitle-area>p { font-size: 18px; }
  #say { font-size: 11px; padding-left: 5px; }
  #send { font-size: 11px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .record-disc, .record-halo, .night-sparks i, .voice-bars i { animation: none !important; }
}