/* coach-call.css
   KeepCalm Calm Coaches: live call overlay (assets/js/kc-coach-call.js).
   The overlay is a self-contained dark "cinema" surface in BOTH site themes
   (light and batman). Text over solid panels (captions, crisis box, gate)
   contrast-checks 4.5:1+ against those fills. Text that floats OVER the coach
   portrait/video (status, the AI chip, and the top help links) cannot rely on
   the image, so each such element sits on its own opaque dark pill
   (rgba(6,9,8,0.92)) that guarantees 4.5:1+ over ANY portrait luminance; the
   coach name rides the strongly-opaque top of the scrim. This replaces the
   earlier check that measured only against solid #0e1311 (which ignored the
   bright photo pixels beneath the semi-transparent scrim).
   Reference ratios over the dark pill / scrim:
     #f2efe7 on #0e1311  ~13.9:1   (body text)
     #b9e7d1 on #0e1311  ~13.8:1   (links, focus ring)
     #cfe7da on #0e1311  ~11.6:1   (status)
     #ffffff on #b3352c   ~6.0:1   (end call button)
     #10140f on #8fd0b4   ~9.9:1   (primary gate button)
   Shape system: 7px radius for tags/labels, pills and circles only on buttons. */

.kcc-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #0e1311;
  color: #f2efe7;
  font-family: inherit;
  overflow: hidden;
}
.kcc-overlay, .kcc-overlay * { box-sizing: border-box; }
/* The hidden attribute must always win, even where a class sets display
   (grid/flex). Without this the gate scrim dimmed every call. */
.kcc-overlay [hidden] { display: none !important; }
.kcc-overlay a { color: #b9e7d1; text-decoration: underline; text-underline-offset: 2px; }
.kcc-overlay a:hover { color: #d9f3e6; }
.kcc-overlay :focus-visible {
  outline: 3px solid #b9e7d1;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- stage: the coach video tile, framed like a real call ------------- */
/* On phones (portrait) the frame is full-bleed, exactly like FaceTime.
   On desktop / landscape it becomes a centered portrait tile with a subtle
   device-style bezel, so the head-and-shoulders portrait is never smeared
   across a wide window (which is what cropped the face before). */
.kcc-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 80% at 50% 20%, #18231e, #0e1311 72%);
}
.kcc-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0e1311;
}
@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  .kcc-frame {
    /* height-driven 3:4 portrait tile; the 122vw term keeps its width
       (height * 3/4) on screen on squarish windows */
    height: min(86vh, 122vw, 780px);
    aspect-ratio: 3 / 4;
    width: auto;
    border-radius: 24px;
    border: 1px solid rgba(242, 239, 231, 0.18);
    box-shadow: 0 0 0 7px rgba(16, 22, 19, 0.9), 0 30px 90px rgba(0, 0, 0, 0.6);
  }
}
.kcc-face,
.kcc-simli {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* face-safe crop: keep the head in view, never cut at the forehead */
  object-position: 50% 18%;
}

/* ---- top bar: identity, AI disclosure, status, crisis links ----------- */
/* Scoped to the overlay: the coaches page header also uses .kcc-top, and
   its border-bottom leaked onto this bar as a line across the call. */
.kcc-overlay .kcc-top {
  border: 0;
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 44px;
  /* Extended/darkened so the bar stays legible over a bright portrait; the
     transparent stop still lands before the element edge so no seam shows.
     The per-element pills below guarantee 4.5:1 regardless of the photo. */
  background: linear-gradient(rgba(8, 12, 10, 0.92), rgba(8, 12, 10, 0.55) 55%, rgba(8, 12, 10, 0) 92%);
}
.kcc-name { font-size: 1.3rem; font-weight: 650; letter-spacing: 0.01em; }
.kcc-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
/* status, help and the AI chip sit on solid dark pills so their small text
   clears 4.5:1 over ANY portrait, not only where the scrim is still dark
   (verified worst case, translucent pill over pure white: 12.5:1 or better). */
.kcc-ai {
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 3px 8px;
  border: 1px solid rgba(242, 239, 231, 0.5);
  border-radius: 7px;
  background: rgba(6, 9, 8, 0.92);
  color: #ece9dd;
  white-space: nowrap;
}
/* honest label: the face is an animated portrait, not a live camera feed.
   Same dark pill as the AI chip so its small text clears 4.5:1 over any frame. */
.kcc-facenote {
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(6, 9, 8, 0.92);
  color: #c9d2c8;
  white-space: nowrap;
}
.kcc-status {
  font-size: 0.85rem;
  color: #cfe7da;
  background: rgba(6, 9, 8, 0.92);
  padding: 3px 9px 3px 8px;
  border-radius: 7px;
}
.kcc-status::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #8fd0b4;
  margin-right: 6px;
  vertical-align: 1px;
}
.kcc-help { text-align: right; font-size: 0.85rem; line-height: 1.7; flex-shrink: 0; }
.kcc-help a {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-bottom: 5px;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(6, 9, 8, 0.92);
}
.kcc-help a:last-child { margin-bottom: 0; }

/* reduced-motion speech level indicator (replaces the animated face) */
.kcc-meter { display: inline-flex; gap: 4px; align-items: center; }
.kcc-meter i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(242, 239, 231, 0.28);
}
.kcc-meter i.on { background: #8fd0b4; }

/* ---- crisis banner (role=alert, shown on crisis replies) -------------- */
.kcc-crisisbox {
  position: absolute;
  top: calc(86px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: min(560px, calc(100% - 28px));
  background: #1c2a24;
  border: 2px solid #8fd0b4;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
}
.kcc-crisisbox strong { display: block; margin-bottom: 4px; }

/* ---- user PIP (camera in video mode, audio viz in voice mode) --------- */
.kcc-pip {
  position: absolute;
  z-index: 4;
  width: 128px;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: #1a201d;
  border: 1px solid rgba(242, 239, 231, 0.32);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
  touch-action: none;
  cursor: grab;
}
.kcc-pip:active { cursor: grabbing; }
.kcc-pipvideo, .kcc-pipviz {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.kcc-pipvideo { transform: scaleX(-1); } /* mirror, like every call app */
.kcc-pipoff {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 0.78rem;
  color: #c9d2c8;
  text-align: center;
  padding: 8px;
}

/* ---- bottom: captions + controls -------------------------------------- */
.kcc-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(rgba(8, 12, 10, 0), rgba(8, 12, 10, 0.85));
}
.kcc-caps {
  width: min(720px, 100%);
  max-height: 138px;
  overflow-y: auto;
  background: rgba(10, 14, 12, 0.74);
  border: 1px solid rgba(242, 239, 231, 0.16);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.kcc-cap { margin: 0 0 6px; }
.kcc-cap:last-child { margin-bottom: 0; }
.kcc-cap__who { font-weight: 650; margin-right: 6px; color: #cfe7da; }
.kcc-cap--you .kcc-cap__who { color: #f2efe7; }
.kcc-cap--note { color: #c9d2c8; font-style: italic; }

.kcc-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; row-gap: 10px; }
.kcc-btn {
  width: 54px; height: 54px;
  border-radius: 50%;
  /* Solid dark fill (not a light translucent one) so the white glyph keeps
     >=3:1 non-text contrast and the light border keeps the button shape
     visible over ANY portrait frame, bright or dark, not only where the
     bottom scrim is opaque. Pressed state inverts to solid light below. */
  border: 1px solid rgba(242, 239, 231, 0.55);
  background: rgba(12, 17, 14, 0.66);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.kcc-btn:hover { background: rgba(12, 17, 14, 0.85); border-color: rgba(242, 239, 231, 0.8); }
.kcc-btn svg { width: 24px; height: 24px; display: block; }
.kcc-btn[aria-pressed="true"] { background: #f2efe7; border-color: #f2efe7; color: #10140f; }
.kcc-btn .kcc-slash { display: none; }
.kcc-btn[aria-pressed="true"] .kcc-slash { display: block; }
.kcc-btn--end { background: #b3352c; border-color: #b3352c; }
.kcc-btn--end:hover { background: #992d25; border-color: #992d25; }

/* Type instead: a text path so the call works with no working microphone,
   with a speech disability, or in a space where talking aloud is not possible. */
.kcc-typebar {
  width: min(720px, 100%);
  display: flex;
  gap: 10px;
  align-items: center;
}
.kcc-typein {
  flex: 1;
  min-width: 0;
  padding: 12px 15px;
  border-radius: 999px;
  border: 1px solid rgba(242, 239, 231, 0.28);
  background: #14201a;
  color: #f2efe7;
  font: inherit;
  font-size: 0.95rem;
}
.kcc-typein::placeholder { color: #c9d2c8; }
.kcc-typesend {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: #8fd0b4;
  color: #10140f;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.kcc-typesend:hover { background: #b9e7d1; }
.kcc-typesend svg { width: 22px; height: 22px; fill: currentColor; display: block; }

/* ---- gate panel: permissions or service failure ------------------------ */
.kcc-gate {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(8, 12, 10, 0.72);
  padding: 20px;
}
.kcc-gate__card {
  width: min(430px, 100%);
  background: #1e2522;
  border: 1px solid rgba(242, 239, 231, 0.22);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
.kcc-gate__card h2 { margin: 0 0 8px; font-size: 1.1rem; }
.kcc-gate__card p { margin: 0 0 16px; font-size: 0.95rem; line-height: 1.55; color: #e4e0d4; }
.kcc-gate__row { display: flex; gap: 10px; flex-wrap: wrap; }
.kcc-gbtn {
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.kcc-gbtn--primary { background: #8fd0b4; color: #10140f; }
.kcc-gbtn--primary:hover { background: #b9e7d1; }
.kcc-gbtn--ghost { background: transparent; color: #f2efe7; border-color: rgba(242, 239, 231, 0.45); }
.kcc-gbtn--ghost:hover { background: rgba(242, 239, 231, 0.12); }

/* ---- screen reader live region ----------------------------------------- */
.kcc-srlive {
  position: fixed;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- small screens ------------------------------------------------------ */
@media (max-width: 600px) {
  .kcc-name { font-size: 1.05rem; }
  .kcc-help { font-size: 0.8rem; }
  .kcc-pip { width: 96px; }
  .kcc-caps { max-height: 108px; font-size: 0.9rem; }
  .kcc-btn { width: 50px; height: 50px; }
}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .kcc-overlay *, .kcc-overlay { animation: none !important; transition: none !important; }
}

/* ---- coach memory menu (kc-coaches.js, shared by ALL coach versions) -----
   Like the call overlay, a self-contained OPAQUE dark surface so contrast is
   identical in both site themes (light and batman); no theme tokens needed.
   Measured ratios (WCAG, opaque fills, both themes):
     #f2efe7 on #101613  15.9:1   (labels, button text)
     #10140f on #8fd0b4  10.5:1   (state pill On: dark ink hard-set on light fill)
     #f2efe7 on #2a332e  11.3:1   (state pill Off)
     #ffb0a6 on #101613  10.5:1   (Delete all)
     #c9d6cd on #101613  12.2:1   (fine print)
     #b9e7d1 on #101613  13.4:1   (status line)
   Focus = two-color ring (#0e1311 inner + #b9e7d1 outer), visible on light
   AND dark page backgrounds. Sits below the call overlay (z 100000). */
.kcc-mem {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 99000;
  font-family: inherit;
}
.kcc-mem, .kcc-mem * { box-sizing: border-box; }
.kcc-mem [hidden] { display: none !important; }
.kcc-mem__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid #33413a;
  border-radius: 999px; /* pill: it is a button */
  background: #101613 !important;
  color: #f2efe7 !important;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.kcc-mem__btn:hover { background: #1a231e !important; }
.kcc-mem__btn svg { width: 15px; height: 15px; fill: currentColor; }
.kcc-mem__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: min(340px, calc(100vw - 28px));
  padding: 14px;
  border: 1px solid #33413a;
  border-radius: 14px;
  background: #101613 !important;
  color: #f2efe7 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.kcc-mem__title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: #f2efe7 !important;
}
.kcc-mem__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid #33413a;
  border-radius: 10px;
  background: #101613 !important;
  color: #f2efe7 !important;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.kcc-mem__row:hover { background: #1a231e !important; }
.kcc-mem__row:disabled { opacity: 0.6; cursor: default; }
.kcc-mem__row--danger { color: #ffb0a6 !important; }
.kcc-mem__pill {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: #2a332e !important;
  color: #f2efe7 !important; /* hard-set: never inherit onto a fill */
  font-size: 12px;
  font-weight: 800;
}
.kcc-mem__pill.is-on {
  background: #8fd0b4 !important;
  color: #10140f !important; /* dark ink hard-set on the light fill */
}
.kcc-mem__status {
  margin: 2px 0 0;
  min-height: 1.2em;
  font-size: 12.5px;
  font-weight: 600;
  color: #b9e7d1 !important;
}
.kcc-mem__status:empty { margin: 0; min-height: 0; }
.kcc-mem__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #c9d6cd !important;
}
.kcc-mem__btn:focus-visible,
.kcc-mem__row:focus-visible {
  outline: 3px solid #b9e7d1;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #0e1311; /* inner dark ring keeps focus visible on light pages */
}
@media (prefers-reduced-motion: reduce) {
  .kcc-mem, .kcc-mem * { animation: none !important; transition: none !important; }
}

/* ---- 13+ age gate (window.KCAgeGate in assets/js/kc-coaches.js) --------
   Shown once before the first coach chat or live call. Like the call
   overlay above, the dialog is a self-contained dark card with hard-set
   colors, so it is IDENTICAL (and passes contrast) in both site themes.
   Measured ratios on the #1e2522 card:
     #f2efe7 text            13.61:1   (heading, label, ghost button)
     #e4e0d4 body copy       11.85:1
     #b9e7d1 links + focus   11.48:1
     #ffb3ab error text       9.15:1
     #07110c ink on #8fd0b4  10.83:1   (primary button, ink hard-set)
     #07110c ink on #b9e7d1  14.08:1   (primary hover)
     #f2efe7 on #14201a      14.61:1   (date input)
   Non-text: ghost border 3.91:1, input border 3.45:1 (>= 3:1). */
.kcc-age {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 12, 10, 0.72);
}
.kcc-age__card {
  width: min(430px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #1e2522;
  color: #f2efe7;
  border: 1px solid rgba(242, 239, 231, 0.22);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  font-size: 0.95rem;
  line-height: 1.55;
}
.kcc-age__card h2 { margin: 0 0 8px; font-size: 1.15rem; color: #f2efe7; }
.kcc-age__card h2:focus { outline: none; }
.kcc-age__card p { margin: 0 0 14px; color: #e4e0d4; }
.kcc-age__form label {
  display: block;
  margin: 0 0 6px;
  font-weight: 650;
  color: #f2efe7;
}
.kcc-age__form input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(242, 239, 231, 0.4);
  background: #14201a;
  color: #f2efe7;
  font: inherit;
  color-scheme: dark; /* keeps the native date-picker glyphs visible */
}
.kcc-age__err {
  margin: 8px 0 0 !important;
  color: #ffb3ab !important;
  font-weight: 600;
}
.kcc-age__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.kcc-age__btn {
  border-radius: 999px;
  padding: 10px 20px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  cursor: pointer;
  border: 1px solid transparent;
}
.kcc-age__btn--primary {
  background: #8fd0b4;
  color: #07110c !important; /* dark ink hard-set on the light fill */
}
.kcc-age__btn--primary:hover { background: #b9e7d1; color: #07110c !important; }
.kcc-age__btn--ghost {
  background: transparent;
  color: #f2efe7 !important;
  border-color: rgba(242, 239, 231, 0.45);
}
.kcc-age__btn--ghost:hover { background: rgba(242, 239, 231, 0.12); }
.kcc-age__card a { color: #b9e7d1 !important; text-decoration: underline; }
.kcc-age__help {
  margin: 14px 0 0 !important;
  padding-top: 12px;
  border-top: 1px solid rgba(242, 239, 231, 0.18);
  font-size: 0.88rem;
}
.kcc-age__links {
  margin: 0 0 4px;
  padding: 0 0 0 20px;
}
.kcc-age__links li { margin: 0 0 8px; }
.kcc-age__card :focus-visible {
  outline: 3px solid #b9e7d1;
  outline-offset: 2px;
}