/* Champion Sim — Phone app, call screen, captions and transcript panel (v2).
   Loaded after champion-sim.css; rules here win over the base sheet. */

/* ── Recents ───────────────────────────────────────────────────────── */

/* The voicemail row is a real button (focusable, announced as one). */
.champion-phone-app__recent--vm {
  width: 100%;
  background: #fff; border: 0; border-bottom: 1px solid var(--champion-divider);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.champion-phone-app__recent--vm:hover { background: #f9fafb; }
.champion-phone-app__recent-text { flex: 1; min-width: 0; }
.champion-phone-app__recent-text > span { display: block; }
.champion-phone-app__recent--vm .champion-phone-app__recent-name { color: var(--color-champion); }
.champion-phone-app__recent-play { margin-left: auto; color: var(--color-champion); font-size: 16px; }

/* A finished call someone spoke on can be read again from its row. Only
   below 880 px, where no side panel holds the call log (see the media
   rules further down). */
.champion-phone-app__row-log-btn {
  margin-left: auto; flex-shrink: 0;
  padding: 4px 10px;
  background: transparent; border: 1px solid currentColor; border-radius: 999px;
  color: var(--color-champion);
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.champion-phone-app__row-log-btn:hover { background: rgba(13, 148, 136, 0.1); }

/* ── Call screen ───────────────────────────────────────────────────── */

/* A size container, so the call screen can compact itself on short phones
   (a 640 px-tall window renders it ~416 px tall). The Phone view rather
   than the call screen: a container query can't restyle the container, and
   the call screen's own padding and gaps are what it needs to give back.
   The call screen fills the view, so the heights are the same. */
[data-champion-app-view="phone"] { container-type: size; }

.champion-phone-app__call-screen {
  /* The bottom padding keeps the controls clear of the home indicator. */
  padding: 24px 16px 30px;
  gap: 12px;
}
/* Gives way before the controls do; clipped rather than drawn over them. */
.champion-phone-app__caller-block--centered { min-height: 0; overflow: hidden; }
.champion-phone-app__call-bottom { flex: 0 1 auto; width: 100%; gap: 14px; }
.champion-phone-app__call-btn,
.champion-phone-app__call-actions { flex-shrink: 0; }

/* Reply choices scroll inside their own box; a visible scrollbar and a
   fade on the bottom edge (set by phone.js while more options sit below
   the fold) keep a clipped list from reading as a single forced answer. */
.champion-phone-app__smalltalk {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}
.champion-phone-app__smalltalk-btn { flex-shrink: 0; font-family: inherit; }
/* Dimmed, not erased: the choice peeking out at the bottom stays readable
   enough to say "there's another answer below". */
.champion-phone-app__smalltalk--more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), rgba(0, 0, 0, 0.35));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), rgba(0, 0, 0, 0.35));
}

@container (max-height: 560px) {
  .champion-phone-app__caller-block--centered .champion-phone-app__caller-avatar {
    width: 64px; height: 64px; font-size: 22px; margin-bottom: 10px;
  }
  .champion-phone-app__caller-block--centered .champion-phone-app__caller-name { font-size: 21px; }
  .champion-phone-app__smalltalk { gap: 6px; }
  .champion-phone-app__smalltalk-btn { padding: 8px 12px; font-size: 13px; border-radius: 18px; }
  .champion-phone-app__call-btn:not(.champion-phone-app__call-btn--secondary) {
    width: 52px; height: 52px; font-size: 20px;
  }
}
@container (max-height: 440px) {
  /* With choices up, name and status carry the call on one centered line;
     the choices need the room — the scenarios' three two-line replies (04,
     06) fit beside the captions on a 360x640 phone; longer sets scroll
     under the fade. */
  .champion-phone-app__call-screen:has([data-call-choices]) .champion-phone-app__caller-block--centered .champion-phone-app__caller-avatar { display: none; }
  .champion-phone-app__call-screen:has([data-call-choices]) .champion-phone-app__caller-text {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 10px;
  }
  .champion-phone-app__call-screen:has([data-call-choices]) .champion-phone-app__caller-block--centered .champion-phone-app__caller-name,
  .champion-phone-app__call-screen:has([data-call-choices]) .champion-phone-app__caller-block--centered .champion-phone-app__caller-status {
    text-align: center; line-height: 1.25; margin-top: 0;
  }
  /* Spacing, not the conversation, gives the choices their room: the
     controls end right above the home indicator's strip. */
  .champion-phone-app__call-screen { padding: 8px 14px var(--champion-home-indicator-height); gap: 6px; }
  .champion-phone-app__call-bottom { gap: 6px; }
  .champion-phone-app__smalltalk { margin-bottom: 0; gap: 5px; }
  .champion-phone-app__smalltalk-btn { padding: 7px 12px; line-height: 1.3; }
  .champion-phone-app__call-btn:not(.champion-phone-app__call-btn--secondary) {
    width: 46px; height: 46px; font-size: 18px;
  }
}

/* ── Captions (narrow screens: the call's lines inside the call screen) ── */

.champion-call-captions {
  /* The conversation keeps at least 40% of the screen; the choices below
     scroll when they need more. */
  flex: 1 1 0; min-height: 40%;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  font-size: 14px; line-height: 1.45; color: #e2e8f0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
.champion-call-captions p { margin: 0; }
.champion-call-captions strong { color: #cbd5e1; font-weight: 600; }

/* ── Transcript side panel: the session's call log (wide screens) ─── */

.champion-call-transcript-side__lines { gap: 0; }
.champion-call-transcript-side__call {
  display: flex; flex-direction: column; gap: 12px;
  transition: opacity 0.4s ease;
}
.champion-call-transcript-side__call + .champion-call-transcript-side__call {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}
.champion-call-transcript-side__call--ended { opacity: 0.7; }
.champion-call-transcript-side__call .champion-call-transcript-side__header {
  padding-bottom: 0; margin-bottom: 0; border-bottom: 0;
}
.champion-call-transcript-side__call .champion-call-transcript-side__avatar {
  width: 30px; height: 30px; font-size: 12px;
}
.champion-call-transcript-side__call .champion-call-transcript-side__name { font-size: 15px; }

@media (max-width: 879px) {
  /* No room beside the phone: the call screen captions the call instead. */
  .champion-call-transcript-side { display: none; }

  .champion-phone-app__call-screen--captioned .champion-phone-app__caller-block--centered {
    flex: 0 0 auto; flex-direction: row; gap: 12px;
  }
  .champion-phone-app__call-screen--captioned .champion-phone-app__caller-block--centered .champion-phone-app__caller-avatar {
    display: grid; width: 44px; height: 44px; font-size: 16px; margin-bottom: 0;
  }
  .champion-phone-app__call-screen--captioned .champion-phone-app__caller-block--centered .champion-phone-app__caller-name,
  .champion-phone-app__call-screen--captioned .champion-phone-app__caller-block--centered .champion-phone-app__caller-status {
    font-size: 20px; text-align: left;
  }
  .champion-phone-app__call-screen--captioned .champion-phone-app__caller-block--centered .champion-phone-app__caller-status {
    font-size: 12px;
  }

  /* The transcript button takes the row's free space; dial sits beside it. */
  .champion-phone-app__row-log-btn + .champion-phone-app__row-call-btn { margin-left: 0; }
}
@media (min-width: 880px) {
  .champion-call-captions { display: none; }
  /* The side panel already shows every call's lines. */
  .champion-phone-app__row-log-btn { display: none; }
}

/* ── Status-bar call pill (a call is up and Phone isn't on screen) ──── */

.champion-phone__call-pill {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: #16a34a; color: #fff;
  border: 0; border-radius: 999px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.champion-phone__call-pill:hover { background: #15803d; }
.champion-phone__call-pill--ringing { animation: champion-call-pill-pulse 1.4s ease-in-out infinite; }
@keyframes champion-call-pill-pulse {
  0%, 100% { background: #16a34a; }
  50%      { background: #22c55e; }
}
@media (prefers-reduced-motion: reduce) {
  .champion-phone__call-pill--ringing { animation: none; }
}