/* ==========================================================================
   Possible session player — gated shell styles.
   Part 1 is the dark player theme, ported from the generated pages
   (scripts/zoom_session_player.py) so a gated page looks identical to a legacy
   inline page. Part 2 adds the sign-in / block / request-access overlays.
   All colors come from brand.css tokens (--p-*). The gate cards lead with the
   real Possible lockup asset (/assets/brand/lockup-h96.png) — never a
   font-rendered wordmark.
   ========================================================================== */

@import url("/assets/brand.css");

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; }

body {
  background: var(--p-bg);
  color: var(--p-text);
  font-family: var(--p-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* ---------- LAYOUT ---------- */
.player-layout { display: flex; height: 100vh; width: 100%; }

.video-panel { flex: 1; display: flex; flex-direction: column; background: #000; min-width: 0; }

/* Header is a single flex row: mark, cohort chip, title (grows + ellipsis),
   then the links row pushed to the right. renderHeader() (session-auth.js)
   injects the mark/chip/links; the h1 ships in the shell. */
.video-header {
  background: var(--p-surface-raised);
  padding: 14px 20px;
  border-bottom: 1px solid var(--p-border);
  display: flex; align-items: center; gap: 14px;
}
.video-header h1 {
  font-size: 17px; font-weight: 600; color: var(--p-text-strong);
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.video-header .subtitle { font-size: 12px; color: var(--p-text-muted); margin-top: 2px; }

.vh-mark { width: 28px; height: 28px; flex-shrink: 0; display: block; }

.vh-chip {
  flex-shrink: 0;
  font-size: 12.5px; font-weight: 600; color: var(--p-text-muted);
  border: 1px solid var(--p-border-strong); border-radius: 999px;
  padding: 3px 12px; white-space: nowrap;
}

/* Plain wrapper that makes the mark/chip link to the cohort index (real
   cohorts only). No visual change beyond cursor + chip hover. */
.vh-homelink {
  display: flex; align-items: center; flex-shrink: 0;
  text-decoration: none; cursor: pointer;
}
.vh-homelink:hover .vh-chip { border-color: var(--p-blue); }

.vh-links { flex-shrink: 0; display: flex; gap: 8px; }
.vh-link {
  font-size: 13.5px; font-weight: 600; color: var(--p-link);
  text-decoration: none; white-space: nowrap;
  border: 1px solid var(--p-border-strong); border-radius: 999px;
  padding: 6px 14px; transition: background 0.15s, border-color 0.15s;
}
.vh-link:hover { background: var(--p-surface-hover); border-color: var(--p-link); }

.video-wrapper {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: #000; min-height: 0; position: relative;
}

video { width: 100%; height: 100%; object-fit: contain; }

/* Big centered play button over the black pre-play frame. Shown only before
   playback has started (paused at t=0); hides on play and never returns
   mid-session, so it can't fight the native controls. */
.big-play {
  position: absolute; top: 50%; left: 50%;
  width: 72px; height: 72px; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  background: var(--p-blue); border: none; border-radius: 50%;
  cursor: pointer; z-index: 5;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, background 0.15s;
}
.big-play:hover, .big-play:focus-visible { transform: translate(-50%, -50%) scale(1.08); background: var(--p-blue-hover); }
.big-play[hidden] { display: none; }
.big-play svg { width: 30px; height: 30px; margin-left: 5px; display: block; }

/* ---------- CHAT PANEL ---------- */
.chat-panel {
  width: 380px; min-width: 320px; max-width: 440px;
  display: flex; flex-direction: column;
  background: var(--p-surface); border-left: 1px solid var(--p-border);
}

.chat-header {
  background: var(--p-surface-raised); padding: 12px 16px; border-bottom: 1px solid var(--p-border);
  display: flex; align-items: center; justify-content: space-between;
}
.chat-header h2 { font-size: 14px; font-weight: 600; color: var(--p-text-strong); }
.chat-header .count { font-size: 11px; color: var(--p-text-muted); }

.chat-scroll { flex: 1; overflow-y: auto; padding: 8px 12px; scroll-behavior: smooth; }

/* ---------- MESSAGES ---------- */
.message-group {
  display: flex; gap: 10px; padding: 6px 8px; margin-top: 8px;
  border-radius: 6px; cursor: pointer; transition: background 0.15s;
}
.message-group:hover { background: var(--p-surface-hover); }

.message-continuation {
  display: flex; gap: 10px; padding: 2px 8px;
  border-radius: 6px; cursor: pointer; transition: background 0.15s;
}
.message-continuation:hover { background: var(--p-surface-hover); }
.message-continuation:hover .time-gutter { opacity: 1; }

/* --- Active/past states for sync (blue accent, no purple) --- */
.chat-msg.active { background: var(--p-active-bg); border-left: 3px solid var(--p-blue); padding-left: 5px; }
.chat-msg.past { opacity: 0.5; }
.chat-msg.past:hover { opacity: 1; }

.time-gutter {
  width: 36px; min-width: 36px; font-size: 10px; color: var(--p-text-faint);
  opacity: 0; transition: opacity 0.15s; text-align: center; padding-top: 4px;
}

/* --- Avatars --- */
.avatar {
  width: 36px; height: 36px; min-width: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.avatar-sm { width: 24px; height: 24px; min-width: 24px; font-size: 10px; }

.msg-content { flex: 1; min-width: 0; }
.msg-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.sender { font-weight: 600; font-size: 13px; }
.time { font-size: 10px; color: var(--p-text-faint); }

.bubble { color: var(--p-text); font-size: 13px; word-wrap: break-word; overflow-wrap: break-word; }
.bubble a { color: var(--p-link); text-decoration: none; }
.bubble a:hover { text-decoration: underline; }

/* --- Reply badge on parent messages --- */
.reply-badge { display: inline-block; font-size: 11px; color: var(--p-blue); margin-top: 3px; cursor: default; font-weight: 600; }

/* --- Threaded replies (Zoom-style) --- */
.thread-reply {
  display: flex; gap: 8px; padding: 4px 8px 4px 48px; position: relative;
  align-items: flex-start; border-radius: 6px; cursor: pointer; transition: background 0.15s;
}
.thread-reply:hover { background: var(--p-surface-hover); }
.thread-reply::before {
  content: ''; position: absolute; left: 26px; top: 0; bottom: 50%;
  width: 2px; background: var(--p-border-strong); border-radius: 1px;
}
.thread-reply::after {
  content: ''; position: absolute; left: 26px; top: 50%;
  width: 14px; height: 2px; background: var(--p-border-strong); border-radius: 1px;
}
.thread-reply .sender { font-size: 12px; }
.thread-reply .bubble { font-size: 12px; }

/* --- Reactions --- */
.reactions { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.reaction {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--p-surface-raised); border: 1px solid var(--p-border); border-radius: 6px;
  padding: 1px 6px; font-size: 12px; cursor: default;
}
.reaction:hover { background: var(--p-surface-hover); border-color: var(--p-border-strong); }

/* Scrollbar */
.chat-scroll::-webkit-scrollbar { width: 6px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
.chat-scroll::-webkit-scrollbar-thumb { background: var(--p-border); border-radius: 3px; }
.chat-scroll::-webkit-scrollbar-thumb:hover { background: var(--p-border-strong); }

/* ---------- RESIZE HANDLE ---------- */
.resize-handle { width: 4px; cursor: col-resize; background: transparent; transition: background 0.2s; flex-shrink: 0; }
.resize-handle:hover, .resize-handle.dragging { background: var(--p-grad-v); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .player-layout { flex-direction: column; }
  .chat-panel { width: 100% !important; max-width: none; height: 40vh; border-left: none; border-top: 1px solid var(--p-border); }
  .video-wrapper { min-height: 200px; }
  .resize-handle { display: none; }
  .thread-reply { padding-left: 40px; }
  .thread-reply::before { left: 20px; }
  .thread-reply::after { left: 20px; }
  /* Header wraps: title to its own row, links beneath. */
  .video-header { flex-wrap: wrap; }
  .video-header h1 { flex-basis: 100%; white-space: normal; }
  .vh-links { flex-basis: 100%; }
}

/* ==========================================================================
   Part 2 — gate overlays (sign-in, block, request-access). On-brand.
   ========================================================================== */

/* Slides button in the chat header (hidden until a slidesToken arrives). */
.slides-btn {
  font-size: 12px; font-weight: 600; color: #fff; background: var(--p-blue);
  padding: 4px 12px; border-radius: 6px; text-decoration: none; cursor: pointer;
  border: none;
}
.slides-btn:hover { background: var(--p-blue-hover); }
.slides-btn[hidden] { display: none; }

/* Full-screen overlay shell shared by sign-in and block screens. The card is
   the only child; it sits centered on the brand background. */
.gate-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--p-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
}
.gate-overlay[hidden] { display: none; }

.gate-card {
  position: relative; overflow: hidden;
  width: 100%; max-width: 480px; text-align: center;
  background: var(--p-surface); border: 1px solid var(--p-border); border-radius: var(--p-radius-lg);
  padding: 40px 40px 36px;
}
/* Gradient 3px hairline across the top of the card. */
.gate-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--p-grad);
}

/* Real Possible lockup (mark + wordmark asset) at the top of every card.
   Displays at 48px tall (40px on narrow screens so it doesn't crowd the
   mobile card); the PNG ships at 96px for retina. */
.gate-lockup { display: block; height: 48px; width: auto; margin: 0 auto; }
@media (max-width: 480px) {
  .gate-lockup { height: 40px; }
}

/* Session identity block under the lockup: uppercase cohort eyebrow + title. */
.gate-session { margin-top: 22px; }
.gate-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--p-text-muted);
}
.gate-title {
  font-size: 19px; font-weight: 600; color: var(--p-text-strong);
  line-height: 1.35; margin-top: 6px;
}

/* Card copy defaults. */
.gate-card p { margin: 0; font-size: 15px; color: var(--p-text-muted); line-height: 1.5; }
.gate-card .gate-email { color: var(--p-text-strong); font-weight: 600; }

/* Single instruction line under the session block (sign-in).
   NOTE: rules that override the `.gate-card p` reset above are prefixed with
   `.gate-card` so they win on specificity (0,2,0 vs 0,1,1). */
.gate-card .gate-instruction { margin-top: 10px; }

/* Block-screen heading (403 / share-failed / generic). */
.gate-heading {
  font-size: 19px; font-weight: 600; color: var(--p-text-strong); margin-top: 24px;
}
.gate-card .gate-heading + p { margin-top: 12px; }

/* Secondary explanatory copy — comfortably legible (muted, not faint). */
.gate-card .gate-alt {
  font-size: 14.5px; color: var(--p-text-muted); line-height: 1.5;
  max-width: 360px; margin-left: auto; margin-right: auto;
}
.gate-card p + .gate-alt { margin-top: 14px; }
.gate-card .gate-alt + .gate-alt { margin-top: 8px; }
.gate-card .gate-btn + .gate-alt { margin-top: 20px; }  /* sign-in: Google button → alt copy */

/* Plain text-link button that reveals the email-link form. */
.gate-linklike {
  display: inline-block; background: none; border: none; padding: 0;
  font-family: inherit; font-size: 14.5px; color: var(--p-link); cursor: pointer;
}
.gate-linklike:hover { text-decoration: underline; }
.gate-alt + .gate-linklike { margin-top: 16px; }

/* Contact hint — a footnote, clearly quieter than the action link above it:
   the whole line stays faint; only the email address carries link color. */
.gate-card .gate-hint { font-size: 14px; color: var(--p-text-faint); margin-top: 22px; }
.gate-hint a { color: var(--p-link); text-decoration: none; }
.gate-hint a:hover { text-decoration: underline; }

/* Buttons */
.gate-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 18px; margin: 0;
  font-size: 16px; font-weight: 600; border-radius: var(--p-radius); cursor: pointer;
  border: 1px solid transparent; font-family: inherit;
}
.gate-btn-primary { background: var(--p-blue); color: #fff; }
.gate-btn-primary:hover { background: var(--p-blue-hover); }
.gate-btn-secondary { background: transparent; color: var(--p-text); border-color: var(--p-border-strong); }
.gate-btn-secondary:hover { background: var(--p-surface-hover); }
.gate-btn:disabled { opacity: 0.55; cursor: default; }
.gate-btn .g-icon { width: 18px; height: 18px; }

/* Button spacing by context. Specificity: the two-class selectors below beat
   the generic `p + .gate-btn`, so the sign-in Google button gets 24px. */
.gate-instruction + .gate-btn { margin-top: 24px; }  /* sign-in: instruction → Google */
.gate-alt + .gate-btn { margin-top: 18px; }           /* block: copy → Request access */
p + .gate-btn { margin-top: 18px; }                    /* generic: copy → Refresh */
.gate-btn + .gate-btn { margin-top: 10px; }            /* stacked buttons */

/* Email-link form, revealed by the link button (hidden by default). */
.gate-emailform { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.gate-emailform[hidden] { display: none; }
.gate-input {
  width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
  background: var(--p-surface-input); border: 1px solid var(--p-border-strong);
  border-radius: var(--p-radius); color: var(--p-text-strong);
}
.gate-input::placeholder { color: var(--p-text-faint); }
.gate-input:focus { outline: none; border-color: var(--p-blue); }

/* Status line. Inside the email form, flex-gap handles spacing; on the block
   screen it sits directly under the buttons and needs its own top margin. */
.gate-status { font-size: 13px; color: var(--p-blue); min-height: 18px; margin-top: 0; }
.gate-status.error { color: var(--p-error); }
.gate-card > .gate-status { margin-top: 12px; }

/* Narrow screens: step the gate type back down ~1px so the bigger desktop
   scale doesn't crowd a 342px-wide card. Must stay AFTER the base rules —
   equal specificity, cascade order wins. */
@media (max-width: 480px) {
  .gate-card { padding: 36px 28px 32px; }
  .gate-eyebrow { font-size: 11px; }
  .gate-title { font-size: 17.5px; }
  .gate-card p { font-size: 14px; }
  .gate-heading { font-size: 17.5px; }
  .gate-card .gate-alt { font-size: 13.5px; }
  .gate-linklike { font-size: 13.5px; }
  .gate-card .gate-hint { font-size: 13px; }
  .gate-btn { font-size: 15px; padding: 12px 16px; }
}