/* Echuni listener – mobile first */

body { min-height: 100vh; min-height: 100dvh; }
.shell {
  max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 16px;
}
.screen { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.foot { display: flex; justify-content: center; padding-top: 4px; }
.foot .theme-switch button { min-height: 32px; font-size: 12px; }

.h1 { font-size: 22px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.h2 { font-size: 17px; font-weight: 600; }
.small { font-size: 13px; }
.tiny { font-size: 11px; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.card { background: var(--sheen), var(--panel); border: 1px solid var(--rim); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow);
        -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.center-stack { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }

.hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 24px; }
.hero-word { font-size: 30px; }
.hero img, .live-brand img { filter: drop-shadow(0 4px 12px rgba(46, 86, 214, 0.4)); }
.chip { align-self: flex-start; }

.code-input { font-size: 24px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; min-height: 56px; }

.select-wrap { position: relative; }
.select-lg {
  min-height: 56px; font-size: 17px; font-weight: 600; padding: 0 44px 0 16px; border-radius: 14px;
  background-color: var(--panel); background-image: var(--sheen); border-color: var(--rim); box-shadow: var(--shadow); appearance: none; -webkit-appearance: none;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.select-wrap svg { position: absolute; right: 16px; top: 20px; pointer-events: none; color: var(--text-2); }
.join-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

/* Live */
.live-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.live-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.live-brand-text { display: flex; flex-direction: column; min-width: 0; }
.live-brand .wordmark { font-size: 18px; }
.live-brand .tiny { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-retry { background: var(--info-bg); color: var(--info); }

.lang-pill {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; width: 100%;
  border: 1px solid var(--rim); border-radius: 14px; background: var(--sheen), var(--panel); box-shadow: var(--shadow); cursor: pointer; text-align: left;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.lang-pill-name { flex: 1; font-size: 16px; font-weight: 600; }

.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mode {
  min-height: 84px; border-radius: 14px; border: 1px solid var(--rim); background: var(--sheen), var(--panel); box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 8px;
}
.mode[aria-checked="true"] { background: var(--grad-primary); border-color: transparent; color: var(--on-primary); box-shadow: var(--glow-primary); }
.mode-t { font-size: 14px; font-weight: 600; }
.mode-s { font-size: 11px; opacity: 0.85; }

.notice { display: flex; gap: 14px; align-items: flex-start; }
.notice > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.notice-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.notice.warn .notice-icon { background: var(--warning-bg); color: var(--warning); }
.notice.info .notice-icon { background: var(--info-bg); color: var(--info); }
.notice.neutral .notice-icon { background: var(--panel-2); color: var(--text-2); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 8px; }

.transcript { flex: 1; min-height: 140px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.transcript p { font-size: 17px; line-height: 1.55; }
.transcript.big p { font-size: 21px; }
.transcript p.old { color: var(--text-2); }

.player { display: flex; align-items: center; gap: 14px; padding: 14px; }
.play {
  flex: none; width: 56px; height: 56px; border-radius: 50%; border: 0; color: #032A28;
  background: radial-gradient(circle at 38% 32%, #E9FFFD, #6FE0D9 55%, #22A39C); box-shadow: 0 0 24px rgba(99, 214, 208, 0.5);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.play .ic-play { display: none; }
.play.stopped .ic-play { display: block; }
.play.stopped .ic-pause { display: none; }
.player-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.player-state { font-size: 13px; font-weight: 600; }
.volume { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.volume input { flex: 1; accent-color: var(--primary); min-height: 28px; }

/* Messages */
.message { padding: 24px 8px; }
.message-icon { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--panel-2); color: var(--text-2); }
.message p { max-width: 34ch; }

.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
.mode:disabled { opacity: .45; cursor: not-allowed; }

/* Captions: adjustable size, and a full-screen projector view (#untertitel) */
.textsize { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.textsize .btn { min-width: 44px; min-height: 40px; font-weight: 700; }
.transcript { --caption-scale: 1; }
.transcript p { font-size: calc(17px * var(--caption-scale)); }
.transcript.big p { font-size: calc(21px * var(--caption-scale)); }
body.beamer { background: #000; color: #FFF; }
body.beamer .foot, body.beamer .live-head, body.beamer .lang-pill, body.beamer .modes, body.beamer .player,
body.beamer .textsize, body.beamer #live-no-audio { display: none !important; }
body.beamer .shell { max-width: none; padding: 0; min-height: 0; height: 100vh; overflow: hidden; }
body.beamer .screen { max-width: none; padding: 0; gap: 0; height: 100vh; }
body.beamer .transcript { background: #000; border: 0; box-shadow: none; height: 100vh; min-height: 0; padding: 4vh 6vw;
  justify-content: flex-end; overflow: hidden; border-radius: 0; }
body.beamer .transcript p { color: #FFF; font-size: calc(5.2vh * var(--caption-scale)); line-height: 1.3; font-weight: 600; }
body.beamer .transcript p.old { color: #8A94A6; }
body.beamer .transcript p { max-width: 1400px; }
body.beamer .notice { position: fixed; top: 2vh; left: 6vw; right: 6vw; }

/* the text box stays within the screen and scrolls itself, so the newest sentence is always visible */
#screen-live .transcript { min-height: 160px; }      /* max-height is set from the free space (listener.js) */
body.beamer #screen-live .transcript { max-height: none !important; }