/* ============================================================================
   jp-telehealth-v2.css — v1.7.44 "Telehealth, branded both sides"
   ----------------------------------------------------------------------------
   One design system, two voices:
     · DESKTOP (Clinic Portal host) — calm clinical navy: deep gradient stage,
       discreet starfield, labeled controls, header strip with session context.
     · MOBILE (≤768px, host AND Passport guest) — the Night Flight feel:
       richer starfield, glassy chrome, PiP self-view docked top-right,
       tap-to-hide controls, icon-only End.
   Consumed by: JetPatient_ClinicPortal_v2.html (host) and
   JetPatient_Passport_Mobile.html (guest overlay, .jp-guest).
   ============================================================================ */

/* ── The stage ──────────────────────────────────────────────────────────── */
.insession-video-area {
  background:
    radial-gradient(120% 90% at 50% 110%, #0E3C8C 0%, #0A2D6E 38%, #04102A 78%) !important;
}
/* starfield — pure CSS, no asset */
.insession-video-area::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 32%, rgba(127,231,226,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 76%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 12%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 48%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 82%, rgba(127,231,226,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 26%, rgba(255,255,255,.6) 50%, transparent 51%);
}
/* wordmark watermark — broadcast-bug style */
.insession-video-area::after {
  content: "JetPatient"; position: absolute; left: 18px; bottom: 14px;
  font-weight: 800; font-size: 15px; letter-spacing: .04em;
  color: rgba(255,255,255,.10); pointer-events: none; z-index: 1;
}

/* ── In-call header strip (injected by setupTeleChrome) ─────────────────── */
.jp-tele-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px);
  background: linear-gradient(180deg, rgba(4,16,42,.85), rgba(4,16,42,0));
  pointer-events: none;
}
.jp-tele-head .tl-mark {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  background: #0A2D6E; display: grid; place-items: center;
  color: #00C9C0; font-weight: 900; font-size: 16px;
  border: 1px solid rgba(0,201,192,.45);
}
.jp-tele-head .tl-who { min-width: 0; }
.jp-tele-head .tl-who b { display: block; color: #fff; font-size: 13.5px;
  font-weight: 800; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-tele-head .tl-who i { display: block; font-style: normal; color: rgba(255,255,255,.62);
  font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-tele-head .tl-secure {
  margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #7FE7E2;
  background: rgba(0,201,192,.12); border: 1px solid rgba(0,201,192,.4);
  padding: 4px 10px; border-radius: 999px;
}

/* timer pill: top-right, REC made explicit */
.insession-timer-overlay {
  left: auto !important; right: 14px !important; transform: none !important;
  background: rgba(4,16,42,.78) !important; border: 1px solid rgba(255,255,255,.14);
  z-index: 6;
}
.insession-timer-overlay::after {
  content: "REC"; font-size: 9px; font-weight: 800; letter-spacing: .1em;
  color: #FF7A7A; margin-left: 2px;
}

/* ── Remote feed: brand the avatar ──────────────────────────────────────── */
#insession-patient-avatar, .insession-patient-avatar {
  background: linear-gradient(135deg, #00C9C0 0%, #0A2D6E 90%) !important;
  box-shadow: 0 0 0 4px rgba(0,201,192,.18), 0 18px 50px rgba(0,0,0,.45);
}
.insession-patient-sub { color: rgba(255,255,255,.62) !important; }

/* ── Self view ──────────────────────────────────────────────────────────── */
.insession-self-feed {
  background: linear-gradient(160deg, #0A2D6E, #081B40) !important;
  border: 1.5px solid rgba(0,201,192,.45) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  overflow: hidden;
}
.insession-self-feed .jp-self-mutechip {
  position: absolute; left: 6px; bottom: 6px; width: 20px; height: 20px;
  border-radius: 50%; background: #DC2626; display: none;
  place-items: center; color: #fff; font-size: 10px; z-index: 2;
}
.jp-tele-selfmuted .insession-self-feed .jp-self-mutechip { display: grid; }

/* ── Controls: the universal grammar, branded ───────────────────────────── */
.insession-controls {
  background: rgba(4,16,42,.94) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.08);
  height: 84px !important; gap: 18px !important;
}
.insession-ctrl {
  position: relative;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.insession-ctrl:hover { background: rgba(255,255,255,.18) !important; }
.insession-ctrl.ctrl-notes { background: rgba(0,201,192,.16) !important;
  border-color: rgba(0,201,192,.45) !important; color: #7FE7E2; }
.insession-ctrl.ctrl-end { background: #DC2626 !important; border: none !important; }
.insession-ctrl.ctrl-end:hover { background: #B91C1C !important; }
/* muted / camera-off — red fill + diagonal slash (Zoom/Meet grammar) */
.insession-ctrl.active-ctrl { background: #DC2626 !important; border-color: #DC2626 !important; }
.insession-ctrl.active-ctrl::after {
  content: ""; position: absolute; left: 10px; right: 10px; top: 50%;
  height: 2.5px; background: #fff; border-radius: 2px;
  transform: rotate(-45deg); box-shadow: 0 0 0 1.5px rgba(220,38,38,.9);
}
/* share active = teal (not red) */
.insession-ctrl.ctrl-share.active-ctrl { background: #00A89F !important; border-color: #00A89F !important; }
.insession-ctrl.ctrl-share.active-ctrl::after { display: none; }
/* desktop labels under buttons (Meet convention) */
@media (min-width: 769px) {
  .insession-ctrl[data-label]::before {
    content: attr(data-label); position: absolute; top: calc(100% + 5px); left: 50%;
    transform: translateX(-50%); font-size: 10px; font-weight: 700;
    letter-spacing: .04em; color: rgba(255,255,255,.6); white-space: nowrap;
  }
  .insession-controls { height: 92px !important; align-items: flex-start !important;
    padding-top: 14px; }
}

/* ── Prejoin modal: the boarding gate ───────────────────────────────────── */
#modal-tele-prejoin .modal-header, .jp-prejoin-head {
  background: linear-gradient(135deg, #04102A, #0A2D6E);
  color: #fff; border-radius: 12px 12px 0 0;
}
#modal-tele-prejoin .modal-header h3, .jp-prejoin-head h3 { color: #fff !important; }
.jp-prejoin-brandrow { display: flex; align-items: center; gap: 8px; }
.jp-prejoin-brandrow .tl-mark { width: 24px; height: 24px; border-radius: 7px;
  background: rgba(255,255,255,.1); display: grid; place-items: center;
  color: #00C9C0; font-weight: 900; font-size: 14px; border: 1px solid rgba(0,201,192,.45); }
.prejoin-video-frame, #prejoin-video-wrap {
  border: 1.5px solid rgba(0,201,192,.55) !important; border-radius: 14px !important;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 120%, #0A2D6E 0%, #04102A 75%) !important;
}
#prejoin-cam-placeholder { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; color: rgba(255,255,255,.65) !important;
  font-size: 13px; }
#prejoin-cam-placeholder svg { opacity: .7; }
#prejoin-agenda { font-family: inherit !important; }
.jp-prejoin-toggles { display: flex; gap: 10px; margin: 10px 0 2px; }
.jp-prejoin-toggle { flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 7px; min-height: 42px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid #D7DEEA; background: #fff; color: #0A2D6E;
  font-weight: 700; font-size: 12.5px; transition: all .15s; }
.jp-prejoin-toggle[aria-pressed="false"] { background: #FEE2E2; border-color: #FCA5A5;
  color: #B91C1C; text-decoration: line-through; }

/* ── End-of-call + summary modals ───────────────────────────────────────── */
.jp-tele-modal-scrim { position: fixed; inset: 0; z-index: 10001;
  background: rgba(2,8,24,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.jp-tele-modal-scrim[hidden] { display: none; }
.jp-tele-modal { width: 100%; max-width: 400px; border-radius: 18px; overflow: hidden;
  background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.jp-tele-modal .tm-head { background: linear-gradient(135deg, #04102A, #0A2D6E);
  padding: 16px 20px; display: flex; align-items: center; gap: 10px; }
.jp-tele-modal .tm-head .tl-mark { width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255,255,255,.1); display: grid; place-items: center;
  color: #00C9C0; font-weight: 900; font-size: 14px; border: 1px solid rgba(0,201,192,.45); flex: 0 0 auto; }
.jp-tele-modal .tm-head b { color: #fff; font-size: 15px; }
.jp-tele-modal .tm-body { padding: 18px 20px; color: #33415C; font-size: 13.5px; line-height: 1.55; }
.jp-tele-modal .tm-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 12px 0 2px; }
.jp-tele-modal .tm-stat { background: #F2F6FC; border-radius: 10px; padding: 10px 8px; text-align: center; }
.jp-tele-modal .tm-stat b { display: block; color: #0A2D6E; font-size: 15px; }
.jp-tele-modal .tm-stat span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #5A6B8C; }
.jp-tele-modal .tm-actions { display: flex; gap: 10px; padding: 0 20px 18px; }
.jp-tele-modal .tm-btn { flex: 1; min-height: 46px; border-radius: 12px; border: none;
  cursor: pointer; font-weight: 800; font-size: 14px; font-family: inherit; }
.jp-tele-modal .tm-btn.danger { background: #DC2626; color: #fff; }
.jp-tele-modal .tm-btn.primary { background: linear-gradient(135deg, #00C9C0, #00A89F); color: #04102A; }
.jp-tele-modal .tm-btn.ghost { background: #fff; border: 1.5px solid #D7DEEA; color: #0A2D6E; }

/* ── MOBILE (≤768px): Night Flight in-call ──────────────────────────────── */
@media (max-width: 768px) {
  .insession-video-area::before { opacity: .6; }
  /* self view docks top-right as portrait PiP, below the header */
  .insession-self-feed {
    top: calc(58px + env(safe-area-inset-top)) !important;
    right: 12px !important; bottom: auto !important;
    width: 92px !important; height: 124px !important; border-radius: 14px !important;
  }
  .insession-controls {
    height: auto !important; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important;
    gap: 14px !important;
    transition: transform .25s ease, opacity .25s ease;
  }
  .insession-ctrl { width: 54px !important; height: 54px !important; }
  /* End: icon-only red circle (the label lives in the confirm) */
  .insession-ctrl.ctrl-end { width: 60px !important; height: 60px !important; font-size: 20px; }
  .insession-ctrl.ctrl-end .jp-end-label { display: none; }
  /* tap-to-hide chrome (header + controls); watermark + timer persist */
  .jp-tele-zen .insession-controls { transform: translateY(110%); opacity: 0; pointer-events: none; }
  .jp-tele-zen .jp-tele-head { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  .jp-tele-head { padding-top: calc(10px + env(safe-area-inset-top)); }
  /* notes panel becomes a bottom sheet */
  .insession-notes-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto !important; max-height: 62dvh; border-radius: 18px 18px 0 0;
    border-left: none !important; border-top: 1px solid rgba(255,255,255,.14); z-index: 7; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
  .insession-controls { transition: none; }
  .insession-rec-dot { animation: none; }
}

/* ── GUEST mode (Patient Passport) ──────────────────────────────────────── */
.jp-guest .jp-tele-head .tl-secure { background: rgba(0,201,192,.12); }
.jp-guest-wait { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; z-index: 3; text-align: center;
  padding: 0 30px; }
.jp-guest-wait .gw-ava { width: 92px; height: 92px; border-radius: 50%;
  background: linear-gradient(135deg, #00C9C0, #0A2D6E); display: grid; place-items: center;
  color: #fff; font-size: 30px; font-weight: 800;
  box-shadow: 0 0 0 4px rgba(0,201,192,.18), 0 18px 50px rgba(0,0,0,.45); }
.jp-guest-wait .gw-ring { position: absolute; width: 116px; height: 116px; border-radius: 50%;
  border: 2px solid rgba(0,201,192,.35); border-top-color: #00C9C0;
  animation: jpgw-spin 1.6s linear infinite; }
@keyframes jpgw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .jp-guest-wait .gw-ring { animation: none; } }
.jp-guest-wait b { color: #fff; font-size: 17px; }
.jp-guest-wait i { font-style: normal; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.5; }

/* ── Passport "Video visits" section ────────────────────────────────────── */
#pp-tele { margin: 18px 16px 6px; }
#pp-tele .ppt-cap { font-size: 11px; font-weight: 800; letter-spacing: .12em;
  color: #7FE7E2; margin-bottom: 8px; }
.ppt-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px; padding: 14px; margin-bottom: 10px; position: relative; }
.ppt-card.is-live { border-color: rgba(0,201,192,.6);
  box-shadow: 0 0 24px rgba(0,201,192,.18); }
.ppt-row { display: flex; align-items: center; gap: 11px; }
.ppt-ava { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, #00C9C0, #0A2D6E); display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 15px; }
.ppt-main { flex: 1; min-width: 0; }
.ppt-main b { display: block; color: #fff; font-size: 14px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ppt-main i { display: block; font-style: normal; color: rgba(255,255,255,.6);
  font-size: 11.5px; }
.ppt-live-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10px;
  font-weight: 800; letter-spacing: .08em; color: #FF9D9D; margin-bottom: 6px; }
.ppt-live-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444; animation: pulseLive 1.4s infinite; }
.ppt-join { display: block; margin-top: 11px; text-align: center; min-height: 46px;
  line-height: 46px; border-radius: 12px; border: none; width: 100%; cursor: pointer;
  font-weight: 800; font-size: 14.5px; font-family: inherit;
  background: linear-gradient(135deg, #00C9C0, #00A89F);
  color: #04102A !important; -webkit-text-fill-color: #04102A !important; }
.ppt-meta-chip { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 3px 9px; }
.ppt-past { display: flex; align-items: center; gap: 10px; padding: 10px 2px;
  border-top: 1px solid rgba(255,255,255,.08); }
.ppt-past:first-of-type { border-top: none; }
.ppt-past .pp-when { font-size: 11px; color: rgba(255,255,255,.5); flex: 0 0 64px; }
.ppt-past .pp-what { flex: 1; min-width: 0; color: rgba(255,255,255,.82); font-size: 12.5px; }
.ppt-past .pp-len { font-size: 11px; color: rgba(255,255,255,.5); }
.ppt-past .pp-rec { font-size: 10.5px; font-weight: 800; color: #7FE7E2;
  border: 1px solid rgba(0,201,192,.4); border-radius: 999px; padding: 2px 8px; }

/* ── GUEST base layout (the Passport has no portal inline styles —
      the guest overlay must be fully self-contained) ─────────────────────── */
.jp-guest.insession-overlay { position: fixed; inset: 0; background: #04102A;
  z-index: 9999; display: flex; flex-direction: column; }
.jp-guest.insession-overlay.hidden { display: none; }
.jp-guest .insession-layout { display: flex; flex: 1; min-height: 0; }
.jp-guest .insession-video-area { flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.jp-guest .insession-patient-feed { display: flex; flex-direction: column;
  align-items: center; gap: 12px; z-index: 2; }
.jp-guest .insession-patient-avatar { width: 100px; height: 100px; border-radius: 50%;
  display: grid; place-items: center; font-size: 32px; font-weight: 800; color: #fff; }
.jp-guest .insession-patient-name { color: #fff; font-size: 18px; font-weight: 700; }
.jp-guest .insession-patient-sub { font-size: 13px; }
.jp-guest .insession-self-feed { position: absolute; display: flex; align-items: center;
  justify-content: center; top: calc(58px + env(safe-area-inset-top));
  right: 12px; width: 92px; height: 124px; border-radius: 14px; z-index: 4; }
.jp-guest .insession-timer-overlay { position: absolute; top: 14px; display: flex;
  align-items: center; gap: 7px; padding: 5px 14px; border-radius: 20px; color: #fff;
  font-size: 13px; font-weight: 700; z-index: 6; }
.jp-guest .insession-rec-dot { width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444; animation: jpgw-pulse 1.4s infinite; }
@keyframes jpgw-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.jp-guest .insession-controls { display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; }
.jp-guest .insession-ctrl { border: none; border-radius: 50%; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; width: 54px; height: 54px;
  font-family: inherit; }
.jp-guest .insession-ctrl.ctrl-end { width: auto; height: 56px; border-radius: 30px;
  padding: 0 20px; gap: 8px; font-weight: 800; font-size: 14px; }
.jp-guest .insession-ctrl.ctrl-end .jp-end-label { display: inline; }
.jp-guest .jp-guest-wait { background: radial-gradient(120% 90% at 50% 110%,
  rgba(14,60,140,.55) 0%, rgba(4,16,42,.2) 70%); }

/* ── v1.7.46 · telehealth keeps its promises ────────────────────────────── */
.jp-prejoin-pickers { display: flex; gap: 10px; margin: 0 0 12px; }
.jp-prejoin-pickers label { flex: 1; font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: #5A6B8C; }
.jp-prejoin-pickers select { display: block; width: 100%; margin-top: 4px;
  min-height: 40px; border-radius: 10px; border: 1.5px solid #D7DEEA;
  background: #fff; color: #0A2D6E; font-family: inherit; font-size: 13px;
  font-weight: 600; padding: 0 10px; }
.jp-tele-head .tl-net { margin-left: auto; flex: 0 0 auto; font-size: 10.5px;
  font-weight: 800; letter-spacing: .04em; color: #7FE7E2; }
.jp-tele-head .tl-net.warn { color: #FFC56E; }
.jp-tele-head .tl-net + .tl-secure { margin-left: 10px; }
/* timer pill: REC no longer crowds the clock */
.insession-timer-overlay { padding-right: 16px !important; gap: 8px !important; }
.insession-timer-overlay::after { margin-left: 4px; }