/* ================================================================
   SESSION COCKPIT — Immersive Training Environment
   Magna Historia — The most serious consciousness training platform
   ================================================================
   Material: Brushed steel / aerospace instrument panel
   Layout: Three-panel cockpit (left syllabus, center session, right telemetry)
   iPhone-first responsive design
   ================================================================ */

/* ── CSS Custom Properties ─────────────────────────────── */
:root {
  --ck-metal-base: #0b0b14;
  --ck-metal-light: #12121f;
  --ck-metal-highlight: rgba(255,255,255,0.025);
  --ck-metal-edge: rgba(255,255,255,0.04);
  --ck-metal-shadow: rgba(0,0,0,0.4);
  --ck-gold: #b88f3c;
  --ck-gold-dim: rgba(184,143,60,0.4);
  --ck-gold-glow: rgba(184,143,60,0.15);
  --ck-gold-line: rgba(184,143,60,0.12);
  --ck-text: #e8dcc8;
  --ck-text-dim: #8a9ab5;
  --ck-text-muted: rgba(255,255,255,0.25);
  --ck-green: #22c55e;
  --ck-red: #ef4444;
  --ck-bg-deep: #050510;
  --ck-panel-left: 280px;
  --ck-panel-right: 260px;
  --ck-topbar: 56px;
  --ck-bottombar: 52px;
  --ck-radius: 0;
  --ck-safe-top: env(safe-area-inset-top, 0px);
  --ck-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Brushed Metal Material ────────────────────────────── */
.ck-metal {
  background:
    /* Brush stroke micro-texture (horizontal) */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.006) 2px,
      rgba(255,255,255,0.006) 3px
    ),
    /* Metallic sheen — angled highlight */
    linear-gradient(
      160deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.012) 35%,
      rgba(255,255,255,0.025) 50%,
      rgba(255,255,255,0.012) 65%,
      rgba(255,255,255,0) 100%
    ),
    /* Base color */
    var(--ck-metal-base);
  box-shadow:
    inset 0 1px 0 var(--ck-metal-edge),
    inset 0 -1px 0 var(--ck-metal-shadow);
}

/* ── Overlay (Full-screen cockpit) ─────────────────────── */
.session-cockpit {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--ck-bg-deep);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  overflow: hidden;
  /* iOS: use dynamic viewport height */
  height: 100dvh;
  height: 100vh; /* fallback */
}
.session-cockpit.active {
  opacity: 1;
  pointer-events: all;
}

/* ── Top Bar ───────────────────────────────────────────── */
.ck-topbar {
  height: var(--ck-topbar);
  padding: 0 20px;
  padding-top: var(--ck-safe-top);
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.session-cockpit.active .ck-topbar {
  transform: translateY(0);
  transition-delay: 0.25s;
}

/* Gold power line at bottom of top bar */
.ck-topbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--ck-gold-line) 15%,
    rgba(184,143,60,0.3) 50%,
    var(--ck-gold-line) 85%,
    transparent 100%
  );
  box-shadow: 0 0 8px var(--ck-gold-glow);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.session-cockpit.active .ck-topbar::after {
  opacity: 1;
  transition-delay: 0.7s;
}

/* Top bar — exit button */
.ck-exit {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--ck-text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.ck-exit:hover {
  border-color: var(--ck-gold-dim);
  color: var(--ck-text);
  background: rgba(184,143,60,0.06);
}
.ck-exit svg { width: 16px; height: 16px; }

/* Top bar — protocol info */
.ck-protocol {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.ck-protocol-id {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: var(--ck-text-muted);
  text-transform: uppercase;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-protocol-pos {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: var(--ck-text);
  letter-spacing: 0.03em;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Top bar — agent status */
.ck-agent-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ck-agent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: all 0.3s;
}
.ck-agent-dot.connected {
  background: var(--ck-green);
  box-shadow: 0 0 6px rgba(34,197,94,0.4);
}
.ck-agent-dot.speaking {
  background: var(--ck-gold);
  box-shadow: 0 0 10px var(--ck-gold-glow);
  animation: ck-speak-pulse 0.8s ease-in-out infinite;
}
@keyframes ck-speak-pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}
.ck-agent-dot.connecting {
  background: #f59e0b;
  animation: ck-connect-blink 0.6s ease-in-out infinite;
}
@keyframes ck-connect-blink {
  0%,100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.ck-agent-name {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--ck-text-dim);
  text-transform: uppercase;
}
.ck-agent-mode {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  color: var(--ck-text-muted);
}

/* Top bar — timer */
.ck-timer {
  text-align: right;
  flex-shrink: 0;
}
.ck-timer-value {
  font-family: 'Space Mono', monospace;
  font-size: 0.95rem;
  color: var(--ck-text);
  letter-spacing: 0.05em;
  display: block;
}
.ck-timer-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.45rem;
  letter-spacing: 0.15em;
  color: var(--ck-text-muted);
  text-transform: uppercase;
}

/* Top bar — mute button */
.ck-mute {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  color: var(--ck-text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.ck-mute:hover { border-color: rgba(255,255,255,0.12); color: var(--ck-text); }
.ck-mute svg { width: 16px; height: 16px; }

/* ── Main Body (three-panel grid) ──────────────────────── */
.ck-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* ── Left Panel — Syllabus ─────────────────────────────── */
.ck-panel-left {
  width: var(--ck-panel-left);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 5;
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
  border-right: 1px solid var(--ck-gold-line);
}
.session-cockpit.active .ck-panel-left {
  transform: translateX(0);
  transition-delay: 0.15s;
}

/* Gold power line on right edge */
.ck-panel-left::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(184,143,60,0.15) 20%,
    rgba(184,143,60,0.25) 50%,
    rgba(184,143,60,0.15) 80%,
    transparent 100%
  );
}

/* Panel header */
.ck-panel-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  flex-shrink: 0;
}
.ck-panel-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--ck-gold-dim);
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
.ck-panel-progress {
  height: 2px;
  background: rgba(255,255,255,0.04);
  border-radius: 1px;
  overflow: hidden;
  margin-bottom: 4px;
}
.ck-panel-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ck-gold), #d4af37);
  border-radius: 1px;
  transition: width 0.8s ease;
}
.ck-panel-progress-text {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem;
  color: var(--ck-text-muted);
  letter-spacing: 0.05em;
}

/* Panel scroll area */
.ck-panel-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
}
/* Custom scrollbar */
.ck-panel-scroll::-webkit-scrollbar { width: 3px; }
.ck-panel-scroll::-webkit-scrollbar-track { background: transparent; }
.ck-panel-scroll::-webkit-scrollbar-thumb {
  background: rgba(184,143,60,0.2);
  border-radius: 2px;
}
.ck-panel-scroll::-webkit-scrollbar-thumb:hover { background: rgba(184,143,60,0.4); }

/* Week accordion */
.ck-week {
  border-bottom: 1px solid rgba(255,255,255,0.02);
}
.ck-week-header {
  padding: 10px 18px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  transition: background 0.2s;
  user-select: none;
  -webkit-user-select: none;
}
.ck-week-header:hover { background: rgba(255,255,255,0.015); }
.ck-week-header:active { background: rgba(255,255,255,0.025); }

.ck-week-arrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  color: var(--ck-text-muted);
  flex-shrink: 0;
  width: 12px;
  transition: transform 0.2s;
  margin-top: 2px;
}
.ck-week.expanded .ck-week-arrow { transform: rotate(90deg); }

.ck-week-info { flex: 1; min-width: 0; }
.ck-week-num {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  color: var(--ck-text-muted);
  text-transform: uppercase;
  display: block;
}
.ck-week-title {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  color: var(--ck-text);
  letter-spacing: 0.02em;
  display: block;
  line-height: 1.3;
}
.ck-week-subtitle {
  font-size: 0.7rem;
  color: var(--ck-text-dim);
  display: block;
  margin-top: 2px;
  line-height: 1.3;
}
.ck-week-lock {
  font-size: 0.65rem;
  color: var(--ck-text-muted);
  flex-shrink: 0;
  margin-top: 3px;
}
.ck-week.locked .ck-week-title { color: var(--ck-text-muted); }
.ck-week.locked .ck-week-subtitle { color: rgba(255,255,255,0.12); }

/* Session list inside a week */
.ck-week-sessions {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.ck-week.expanded .ck-week-sessions {
  max-height: 600px;
}

.ck-session-row {
  padding: 7px 18px 7px 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  transition: background 0.15s;
  position: relative;
}
.ck-session-row.clickable { cursor: pointer; }
.ck-session-row.clickable:hover { background: rgba(255,255,255,0.015); }

/* Active session highlight */
.ck-session-row.active {
  background: rgba(184,143,60,0.04);
}
.ck-session-row.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ck-gold);
  box-shadow: 0 0 8px var(--ck-gold-glow);
}

/* Session state indicators */
.ck-session-state {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
}
.ck-session-state.complete { color: var(--ck-green); }
.ck-session-state.current { color: var(--ck-gold); }
.ck-session-state.current .ck-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ck-gold);
  animation: ck-session-pulse 2s ease-in-out infinite;
}
@keyframes ck-session-pulse {
  0%,100% { box-shadow: 0 0 2px var(--ck-gold-glow); }
  50% { box-shadow: 0 0 10px rgba(184,143,60,0.5); }
}
.ck-session-state.pending { color: rgba(255,255,255,0.12); }
.ck-session-state.locked { color: rgba(255,255,255,0.06); }

.ck-session-name {
  flex: 1;
  font-size: 0.72rem;
  color: var(--ck-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.ck-session-row.active .ck-session-name { color: var(--ck-text); }
.ck-session-row.locked .ck-session-name { color: rgba(255,255,255,0.12); }

.ck-session-dur {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  color: var(--ck-text-muted);
  flex-shrink: 0;
}

/* ── Right Panel — Telemetry ───────────────────────────── */
.ck-panel-right {
  width: var(--ck-panel-right);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 5;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
  border-left: 1px solid var(--ck-gold-line);
}
.session-cockpit.active .ck-panel-right {
  transform: translateX(0);
  transition-delay: 0.2s;
}

/* Gold power line on left edge */
.ck-panel-right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(184,143,60,0.15) 20%,
    rgba(184,143,60,0.25) 50%,
    rgba(184,143,60,0.15) 80%,
    transparent 100%
  );
  z-index: 1;
}

/* ── Progress Ring (SVG) ───────────────────────────────── */
.ck-progress-ring-wrap {
  text-align: center;
  padding: 20px 0 16px;
}
.ck-progress-ring {
  width: 110px;
  height: 110px;
  transform: rotate(-90deg);
}
.ck-progress-ring-track {
  fill: none;
  stroke: rgba(255,255,255,0.04);
  stroke-width: 4;
}
.ck-progress-ring-fill {
  fill: none;
  stroke: var(--ck-gold);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.22,1,0.36,1);
  filter: drop-shadow(0 0 4px var(--ck-gold-glow));
}
.ck-progress-pct {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  color: var(--ck-text);
  display: block;
  margin-top: -68px;
  position: relative;
}
.ck-progress-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.45rem;
  letter-spacing: 0.15em;
  color: var(--ck-text-muted);
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

/* ── Stats Grid ────────────────────────────────────────── */
.ck-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0 18px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  overflow: hidden;
}
.ck-stat {
  padding: 10px 12px;
  text-align: center;
  background: var(--ck-metal-base);
}
.ck-stat-value {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--ck-text);
  display: block;
  line-height: 1.2;
}
.ck-stat-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.42rem;
  letter-spacing: 0.12em;
  color: var(--ck-text-muted);
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

/* ── Section Pipeline ──────────────────────────────────── */
.ck-section-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.15em;
  color: var(--ck-gold-dim);
  text-transform: uppercase;
  padding: 0 18px;
  margin-bottom: 8px;
}
.ck-pipeline {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 18px 12px;
}
.ck-pipe-step {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.04);
  position: relative;
  transition: background 0.4s;
}
.ck-pipe-step.done { background: var(--ck-green); }
.ck-pipe-step.active {
  background: var(--ck-gold);
  box-shadow: 0 0 6px var(--ck-gold-glow);
}
.ck-pipe-labels {
  display: flex;
  gap: 4px;
  padding: 0 18px 12px;
}
.ck-pipe-label {
  flex: 1;
  font-family: 'Space Mono', monospace;
  font-size: 0.42rem;
  letter-spacing: 0.05em;
  color: var(--ck-text-muted);
  text-transform: uppercase;
  text-align: center;
}
.ck-pipe-label.active { color: var(--ck-gold-dim); }
.ck-pipe-label.done { color: rgba(34,197,94,0.5); }

/* ── Environment Intel ─────────────────────────────────── */
.ck-env {
  padding: 0 18px 12px;
}
.ck-env-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
}
.ck-env-key {
  font-family: 'Space Mono', monospace;
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  color: var(--ck-text-muted);
  text-transform: uppercase;
}
.ck-env-val {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  color: var(--ck-text-dim);
  text-align: right;
}
.ck-env-val.acquiring {
  color: rgba(184,143,60,0.3);
  animation: ck-acquire 1.5s ease-in-out infinite;
}
@keyframes ck-acquire {
  0%,100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.ck-env-val .kp-quiet { color: var(--ck-green); }
.ck-env-val .kp-unsettled { color: #f59e0b; }
.ck-env-val .kp-storm { color: var(--ck-red); }

/* ── Session History ───────────────────────────────────── */
.ck-history {
  padding: 0 18px 12px;
}
.ck-history-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem;
  color: var(--ck-text-muted);
}
.ck-history-date { width: 42px; flex-shrink: 0; }
.ck-history-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ck-text-dim);
}
.ck-history-dur { flex-shrink: 0; }
.ck-history-check { color: var(--ck-green); flex-shrink: 0; }

/* ── Center — Session Area ─────────────────────────────── */
.ck-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ck-bg-deep);
  position: relative;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.session-cockpit.active .ck-center {
  opacity: 1;
  transition-delay: 0.45s;
}

/* Vignette overlay — cockpit viewport feel */
.ck-center::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(5,5,16,0.4) 100%
  );
}

.ck-center-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 32px;
  position: relative;
  z-index: 1;
  min-height: 0; /* prevent flex blowout */
}

/* Section dots (top of center) */
.ck-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-shrink: 0;
}
.ck-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  transition: all 0.3s;
}
.ck-dot.active { background: var(--ck-gold); box-shadow: 0 0 6px var(--ck-gold-glow); }
.ck-dot.done { background: var(--ck-gold-dim); }

/* Content area — where learn/breathwork/meditation/reflect renders */
.ck-content {
  width: 100%;
  max-width: 560px;
  text-align: center;
  margin: auto 0; /* vertically center in scroll area */
}

/* Learn section content */
.ck-learn-title {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  color: var(--ck-gold);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.ck-learn-duration {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  color: var(--ck-text-muted);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ck-learn-body {
  text-align: left;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--ck-text-dim);
}
.ck-learn-body p { margin-bottom: 16px; }
.ck-learn-body strong { color: var(--ck-text); }

/* Reflect section */
.ck-reflect-prompt {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--ck-text-dim);
  margin-bottom: 20px;
}
.ck-reflect-textarea {
  width: 100%;
  max-width: 480px;
  min-height: 100px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  color: var(--ck-text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}
.ck-reflect-textarea:focus {
  border-color: var(--ck-gold-line);
}
.ck-reflect-textarea::placeholder { color: rgba(255,255,255,0.12); }
.ck-reflect-save-note {
  font-family: 'Space Mono', monospace;
  font-size: 0.45rem;
  letter-spacing: 0.1em;
  color: var(--ck-text-muted);
  margin-top: 8px;
  text-transform: uppercase;
}

/* Breathwork / meditation container override */
.ck-content .breathwork-container,
.ck-content .meditation-container,
.ck-content .sp-breathwork-wrapper,
.ck-content .sp-meditation-wrapper {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
}

/* ── Controls (bottom of center) ───────────────────────── */
.ck-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}

.ck-ctrl-btn {
  height: 48px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--ck-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  padding: 0 20px;
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ck-ctrl-btn:hover {
  border-color: var(--ck-gold-dim);
  background: rgba(184,143,60,0.06);
}
.ck-ctrl-btn:active { transform: scale(0.96); }
.ck-ctrl-btn svg { width: 18px; height: 18px; }

.ck-ctrl-pause {
  width: 48px;
  padding: 0;
  border-radius: 50%;
}

.ck-ctrl-proceed {
  border-color: var(--ck-gold-dim);
  color: var(--ck-gold);
}
.ck-ctrl-proceed:hover {
  background: rgba(184,143,60,0.1);
  border-color: var(--ck-gold);
}

/* ── Agent Transcript Bar ──────────────────────────────── */
.ck-agent-bar {
  position: absolute;
  bottom: 70px;
  left: 24px;
  right: 24px;
  background: rgba(10,10,20,0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 4;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.ck-agent-bar.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.ck-agent-transcript {
  flex: 1;
  font-size: 0.8rem;
  color: var(--ck-text-dim);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-agent-mic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  color: var(--ck-text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ck-agent-mic svg { width: 14px; height: 14px; }

/* ── Session Complete Screen ───────────────────────────── */
.ck-complete {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  background: var(--ck-bg-deep);
}
.ck-complete.visible {
  opacity: 1;
  pointer-events: all;
}

.ck-complete-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ck-gold), transparent);
  margin-bottom: 20px;
}
.ck-complete-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--ck-gold-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ck-complete-title {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--ck-text);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.ck-complete-session {
  font-size: 0.85rem;
  color: var(--ck-text-dim);
  margin-bottom: 24px;
}

.ck-complete-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 24px;
}
.ck-complete-stat { text-align: center; }
.ck-complete-stat-val {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--ck-text);
  display: block;
}
.ck-complete-stat-lbl {
  font-family: 'Space Mono', monospace;
  font-size: 0.42rem;
  letter-spacing: 0.12em;
  color: var(--ck-text-muted);
  text-transform: uppercase;
}

.ck-complete-bars {
  width: 100%;
  max-width: 300px;
  margin-bottom: 24px;
}
.ck-complete-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ck-complete-bar-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  color: var(--ck-text-muted);
  text-transform: uppercase;
  width: 60px;
  flex-shrink: 0;
}
.ck-complete-bar-track {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
}
.ck-complete-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1s ease;
}
.ck-complete-bar-fill.streak { background: #f59e0b; }
.ck-complete-bar-fill.progress { background: linear-gradient(90deg, var(--ck-gold), #d4af37); }
.ck-complete-bar-val {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem;
  color: var(--ck-text-dim);
  width: 40px;
  text-align: right;
  flex-shrink: 0;
}

.ck-complete-next {
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  background: rgba(255,255,255,0.015);
  margin-bottom: 24px;
  text-align: center;
  width: 100%;
  max-width: 300px;
}
.ck-complete-next-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.45rem;
  letter-spacing: 0.15em;
  color: var(--ck-text-muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.ck-complete-next-title {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: var(--ck-text);
  display: block;
}
.ck-complete-next-meta {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem;
  color: var(--ck-text-muted);
}

.ck-complete-reflect {
  width: 100%;
  max-width: 400px;
  margin-bottom: 20px;
}
.ck-complete-reflect textarea {
  width: 100%;
  min-height: 60px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  color: var(--ck-text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  resize: vertical;
  outline: none;
}
.ck-complete-reflect textarea:focus { border-color: var(--ck-gold-line); }
.ck-complete-reflect textarea::placeholder { color: rgba(255,255,255,0.1); }

.ck-complete-actions {
  display: flex;
  gap: 12px;
}
.ck-complete-btn {
  padding: 12px 28px;
  border-radius: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.ck-complete-btn.primary {
  background: rgba(184,143,60,0.1);
  border: 1px solid var(--ck-gold-dim);
  color: var(--ck-gold);
}
.ck-complete-btn.primary:hover {
  background: rgba(184,143,60,0.18);
  border-color: var(--ck-gold);
}
.ck-complete-btn.secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ck-text-dim);
}
.ck-complete-btn.secondary:hover {
  border-color: rgba(255,255,255,0.15);
  color: var(--ck-text);
}

/* ── Exit Confirmation Modal ───────────────────────────── */
.ck-exit-confirm {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,5,16,0.85);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.ck-exit-confirm.visible { opacity: 1; pointer-events: all; }
.ck-exit-confirm-box {
  text-align: center;
  max-width: 320px;
  padding: 32px 24px;
}
.ck-exit-confirm-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--ck-text);
  margin-bottom: 8px;
}
.ck-exit-confirm-text {
  font-size: 0.85rem;
  color: var(--ck-text-dim);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* ── Mobile Bottom Bar ─────────────────────────────────── */
.ck-bottombar {
  display: none; /* shown on mobile */
  height: var(--ck-bottombar);
  padding-bottom: var(--ck-safe-bottom);
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.ck-bottombar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ck-gold-line) 30%, var(--ck-gold-line) 70%, transparent);
}

.ck-bottom-btn {
  background: none;
  border: none;
  color: var(--ck-text-muted);
  cursor: pointer;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
}
.ck-bottom-btn.active { color: var(--ck-gold); }
.ck-bottom-btn svg { width: 20px; height: 20px; }
.ck-bottom-btn-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Mobile center control (play/pause) */
.ck-bottom-center {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: var(--ck-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.ck-bottom-center svg { width: 20px; height: 20px; }

/* ── Bottom Sheet (mobile/tablet panels) ──────────────── */
.ck-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 70vh;
  border-radius: 16px 16px 0 0;
  z-index: 15;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  overflow: hidden;
  display: none; /* hidden on desktop — side panels visible */
  flex-direction: column;
}
.ck-sheet.visible { transform: translateY(0); }

.ck-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
  margin: 10px auto 6px;
  flex-shrink: 0;
}
.ck-sheet-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--ck-safe-bottom);
}
.ck-sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 14;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.ck-sheet-backdrop.visible { opacity: 1; pointer-events: all; }

/* ================================================================
   ENHANCED COCKPIT — Partial-height panels, curves, power lines,
   overshoot animations, cockpit canopy feel
   ================================================================ */

/* ── Cockpit entry override — panels slide with overshoot ── */
@keyframes panelSlideFromLeft {
  0% { transform: translateX(-100%); opacity: 0; }
  70% { transform: translateX(2px); opacity: 1; }
  85% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}
@keyframes panelSlideFromRight {
  0% { transform: translateX(100%); opacity: 0; }
  70% { transform: translateX(-2px); opacity: 1; }
  85% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}
@keyframes topBarDrop {
  0% { transform: translateY(-100%); }
  70% { transform: translateY(1px); }
  85% { transform: translateY(-0.5px); }
  100% { transform: translateY(0); }
}

/* Top bar overshoot — all breakpoints */
.session-cockpit.active .ck-topbar {
  animation: topBarDrop 0.55s cubic-bezier(0.22,1,0.36,1) 0.2s both;
  transform: translateY(0);
}

/* ── Desktop: full cockpit with partial-height panels ───── */
@media (min-width: 1024px) {
  /* Panel slide-in with overshoot — desktop only */
  .session-cockpit.active .ck-panel-left {
    animation: panelSlideFromLeft 0.65s cubic-bezier(0.22,1,0.36,1) 0.3s both;
    transform: translateX(0);
  }
  .session-cockpit.active .ck-panel-right {
    animation: panelSlideFromRight 0.65s cubic-bezier(0.22,1,0.36,1) 0.35s both;
    transform: translateX(0);
  }

  /* Full-height panels — cockpit frame */
  .ck-body {
    display: grid;
    grid-template-columns: var(--ck-panel-left) 1fr var(--ck-panel-right);
    grid-template-rows: 1fr;
    min-height: 0; /* prevent grid blowout */
  }
  .ck-panel-left {
    height: 100%;
    border-radius: 0 0 28px 0;
    position: relative;
    overflow: hidden;
  }
  .ck-panel-right {
    height: 100%;
    border-radius: 0 0 0 28px;
    position: relative;
    overflow: hidden;
  }
  .ck-center {
    min-height: 0; /* standard grid overflow fix */
  }

  /* Gradient fade at panel bottom */
  .ck-panel-left .ck-panel-scroll,
  .ck-panel-right .ck-panel-scroll {
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
  }
}

/* ── Gold Power Lines (SVG stroke animation) ────────────── */
.ck-power-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}
.ck-power-path {
  fill: none;
  stroke: rgba(184,143,60,0.3);
  stroke-width: 1;
  filter: drop-shadow(0 0 3px rgba(184,143,60,0.25));
  stroke-dasharray: var(--path-len);
  stroke-dashoffset: var(--path-len);
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.ck-powered .ck-power-path {
  stroke-dashoffset: 0;
}
/* Staggered delays for each path */
.ck-powered .ck-power-path:nth-child(1) { transition-delay: 0.1s; }
.ck-powered .ck-power-path:nth-child(2) { transition-delay: 0.15s; }
.ck-powered .ck-power-path:nth-child(3) { transition-delay: 0.25s; }
.ck-powered .ck-power-path:nth-child(4) { transition-delay: 0.3s; }

/* Power line junction nodes */
.ck-power-node {
  fill: rgba(184,143,60,0);
  transition: all 0.3s ease 0.6s;
}
.ck-powered .ck-power-node {
  fill: rgba(184,143,60,0.4);
  animation: powerNodePulse 0.6s ease-out 0.8s forwards;
}
@keyframes powerNodePulse {
  0% { r: 1; fill: rgba(184,143,60,0.7); }
  50% { r: 4; fill: rgba(184,143,60,0.3); }
  100% { r: 2; fill: rgba(184,143,60,0.12); }
}

/* ── Enhanced brushed metal with micro-noise ────────────── */
.ck-metal {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,0.004) 1px, rgba(255,255,255,0.004) 2px),
    linear-gradient(160deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.015) 35%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.015) 65%, rgba(255,255,255,0) 100%),
    var(--ck-metal-base);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    inset 1px 0 0 rgba(255,255,255,0.015),
    inset -1px 0 0 rgba(0,0,0,0.12);
}

/* ── Panel seams where top bar meets side panels ────────── */
.ck-topbar {
  border-bottom: 1px solid rgba(0,0,0,0.4);
}

/* ── RESPONSIVE — Tablet (768-1199px) ──────────────────── */
@media (max-width: 1199px) {
  :root {
    --ck-panel-left: 240px;
    --ck-panel-right: 220px;
  }
}

/* ── RESPONSIVE — Small tablet / large phone (< 1024px) ── */
@media (max-width: 1023px) {
  .ck-panel-left,
  .ck-panel-right {
    position: absolute;
    top: var(--ck-topbar);
    bottom: 0;
    width: 300px;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  }
  .ck-panel-right {
    right: 0;
    left: auto;
    transform: translateX(100%);
  }
  .session-cockpit.active .ck-panel-left { transform: translateX(-100%); }
  .session-cockpit.active .ck-panel-right { transform: translateX(100%); }
  .ck-panel-left.sheet-open { transform: translateX(0) !important; }
  .ck-panel-right.sheet-open { transform: translateX(0) !important; }

  /* Show bottom bar on tablet too — access to syllabus + telemetry sheets */
  .ck-bottombar { display: flex; }

  /* Show bottom sheets on tablet (hidden on desktop) */
  .ck-sheet { display: flex; }

  /* Pad center content above the bottom bar */
  .ck-center-scroll {
    padding-bottom: calc(24px + var(--ck-bottombar) + var(--ck-safe-bottom));
  }

  /* Controls hidden on tablet (use bottom bar) */
  .ck-controls { display: none; }
}

/* ── RESPONSIVE — iPhone / Mobile (< 768px) ───────────── */
@media (max-width: 767px) {
  :root {
    --ck-topbar: 48px;
    --ck-bottombar: 56px;
  }

  /* Hide desktop panels */
  .ck-panel-left,
  .ck-panel-right {
    display: none;
  }

  /* Show bottom bar */
  .ck-bottombar { display: flex; }

  /* Top bar compact */
  .ck-topbar { padding: 0 12px; gap: 10px; }
  .ck-protocol-id { font-size: 0.48rem; }
  .ck-protocol-pos { font-size: 0.78rem; }
  .ck-timer-value { font-size: 0.85rem; }
  .ck-agent-status { display: none; } /* agent status moves to bottom sheet */

  /* Center adjustments */
  .ck-center-scroll {
    padding: 16px 20px;
    padding-bottom: calc(16px + var(--ck-bottombar) + var(--ck-safe-bottom));
  }

  /* Learn content — Apple recommended reading size */
  .ck-learn-body {
    font-size: 1.05rem;
    line-height: 1.8;
  }

  /* Sheets use full-width bottom sheet pattern */
  .ck-sheet {
    border-radius: 14px 14px 0 0;
    max-height: 75vh;
  }

  /* Controls hidden on mobile (use bottom bar) */
  .ck-controls { display: none; }

  /* Complete screen adjustments */
  .ck-complete { padding: 24px 20px; }
  .ck-complete-stats { gap: 20px; }
  .ck-complete-stat-val { font-size: 1rem; }
}

/* ── RESPONSIVE — Small iPhone (< 390px) ───────────────── */
@media (max-width: 389px) {
  .ck-topbar { padding: 0 10px; gap: 8px; }
  .ck-protocol-pos { font-size: 0.72rem; }
  .ck-learn-body { font-size: 1rem; }
  .ck-center-scroll { padding: 12px 16px; }
}

/* ── Reduced Motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .session-cockpit,
  .session-cockpit .ck-topbar,
  .session-cockpit .ck-panel-left,
  .session-cockpit .ck-panel-right,
  .session-cockpit .ck-center,
  .ck-sheet,
  .ck-complete {
    transition-duration: 0.01s !important;
    animation: none !important;
  }
  .ck-topbar::after { transition: none !important; }
}

/* ── iOS-specific fixes ────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  .session-cockpit {
    height: -webkit-fill-available;
  }
  .ck-reflect-textarea,
  .ck-complete-reflect textarea {
    font-size: 16px; /* prevent iOS zoom on focus */
  }
}

/* ── Prevent pull-to-refresh and overscroll ─────────────── */
.session-cockpit {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.session-cockpit * {
  -webkit-touch-callout: none;
}
.session-cockpit button,
.session-cockpit a,
.session-cockpit input,
.session-cockpit textarea {
  -webkit-touch-callout: default;
  touch-action: manipulation;
}