/* ── Coding Practice feature ────────────────────────────────────────
   Styles for: coding-practice-gallery.html and coding-practice-session.html.
   The mode-picker.html "Coding Practice" card modifier (.mp-card--coding)
   now lives entirely in mode-picker.css, alongside the other mode cards —
   removed from here to avoid two files defining conflicting styles for the
   same class (this file loads after mode-picker.css on that page, so a
   leftover rule here would silently win the cascade). */

/* ── Shared page shell (gallery + session) ──────────────────────── */
/* ── Shared page shell (gallery + session) ──────────────────────── */
.cp-gallery-wrap{max-width:1240px;margin:0 auto;padding:40px 24px 80px}
.cp-back-btn{
  display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;
  background:var(--surface);border:1.5px solid var(--border);color:var(--text);
  font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.08);transition:all .2s cubic-bezier(.4,0,.2,1);
  margin-bottom:24px;
}
.cp-back-btn:hover{
  border-color:var(--accent);color:var(--accent);background:var(--surface2);
  transform:translateX(-3px);box-shadow:0 4px 16px rgba(99,102,241,.2);
}
.cp-back-btn svg{transition:transform .2s ease}
.cp-back-btn:hover svg{transform:translateX(-3px)}
.cp-gallery-badge{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;
  background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.28);color:var(--accent);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;
}
.cp-hdr{text-align:center;margin-bottom:44px}
.cp-hdr h1{
  font-family:'Space Grotesk',sans-serif;font-size:2.35rem;font-weight:800;color:var(--text);
  margin:0 0 10px;letter-spacing:-.02em;
}
.cp-hdr p{color:var(--muted);font-size:15px;max-width:600px;margin:0 auto}

/* ── Role grid (Horizontal layout) ───────────────────────────────── */
.cp-role-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start;
}
.cp-role-card{
  position:relative;background:var(--surface);border:1.5px solid var(--border);border-radius:20px;
  padding:24px 20px;display:flex;flex-direction:column;cursor:pointer;overflow:hidden;
  transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s cubic-bezier(.4,0,.2,1),border-color .22s ease;
  backdrop-filter:blur(10px);
}
/* Top accent gradient bar */
.cp-role-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#6366f1,#8b5cf6);opacity:.85;transition:height .2s ease;
}
.cp-role-card[data-role="data-science"]::before{background:linear-gradient(90deg,#10b981,#06b6d4)}
.cp-role-card[data-role="web-dev"]::before{background:linear-gradient(90deg,#3b82f6,#6366f1)}
.cp-role-card[data-role="dsa"]::before{background:linear-gradient(90deg,#8b5cf6,#ec4899)}
.cp-role-card[data-role="patterns"]::before{background:linear-gradient(90deg,#f59e0b,#ef4444)}

.cp-role-card:not(.cp-role-card--soon):hover{
  transform:translateY(-6px);
  border-color:rgba(99,102,241,.45);
  box-shadow:0 20px 40px -15px rgba(0,0,0,.35),0 0 20px rgba(99,102,241,.14);
}
.cp-role-card[data-role="data-science"]:hover{border-color:rgba(16,185,129,.5);box-shadow:0 20px 40px -15px rgba(0,0,0,.35),0 0 22px rgba(16,185,129,.18)}
.cp-role-card[data-role="web-dev"]:hover{border-color:rgba(59,130,246,.5);box-shadow:0 20px 40px -15px rgba(0,0,0,.35),0 0 22px rgba(59,130,246,.18)}
.cp-role-card[data-role="dsa"]:hover{border-color:rgba(139,92,246,.5);box-shadow:0 20px 40px -15px rgba(0,0,0,.35),0 0 22px rgba(139,92,246,.18)}
.cp-role-card[data-role="patterns"]:hover{border-color:rgba(245,158,11,.5);box-shadow:0 20px 40px -15px rgba(0,0,0,.35),0 0 22px rgba(245,158,11,.18)}

.cp-role-card.revealed{
  border-color:var(--accent);
  box-shadow:0 16px 36px -12px rgba(99,102,241,.28);
}
.cp-role-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cp-role-icon-box{
  width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:26px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.18);
  transition:transform .2s ease;
}
.cp-role-card[data-role="data-science"] .cp-role-icon-box{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.25)}
.cp-role-card[data-role="web-dev"] .cp-role-icon-box{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.25)}
.cp-role-card[data-role="dsa"] .cp-role-icon-box{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.25)}
.cp-role-card[data-role="patterns"] .cp-role-icon-box{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.25)}
.cp-role-card:hover .cp-role-icon-box{transform:scale(1.08)}

.cp-role-tag{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 9px;
  border-radius:6px;background:var(--surface2);color:var(--muted);
}
.cp-role-name{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;color:var(--text);
  margin-bottom:6px;line-height:1.3;
}
.cp-role-desc{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:16px;min-height:38px}

.cp-role-hint{
  display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:600;
  color:var(--accent);padding-top:12px;border-top:1px dashed var(--border);margin-top:auto;
}
.cp-role-hint-arrow{transition:transform .2s ease}
.cp-role-card.revealed .cp-role-hint-arrow{transform:rotate(90deg)}

.cp-topic-list{
  display:none;flex-direction:column;gap:12px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--border);animation:cpSlideDown .22s ease forwards;
}
@keyframes cpSlideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.cp-role-card.revealed .cp-topic-list{display:flex}

.cp-topic-chip{
  display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  font-size:12px;font-weight:600;cursor:pointer;transition:all .15s ease;
}
.cp-topic-chip:hover{background:rgba(99,102,241,.15);border-color:#6366f1}
.cp-topic-chip.active{
  background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border-color:#6366f1;
  box-shadow:0 4px 12px rgba(99,102,241,.3);
}

.cp-setup-row{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.cp-setup-lbl{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;display:block}
.cp-name-input{
  width:100%;padding:9px 12px;border-radius:10px;border:1.5px solid var(--border);
  font-size:13px;background:var(--surface2);color:var(--text);transition:border-color .15s ease,box-shadow .15s ease;
}
.cp-name-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.18)}

.cp-lang-toggle{display:flex;gap:6px}
.cp-lang-btn{
  padding:6px 12px;font-size:11.5px;font-weight:700;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted);cursor:pointer;
}
.cp-lang-btn.active{background:#6366f1;color:#fff;border-color:#6366f1}

.cp-start-btn{
  width:100%;margin-top:10px;padding:11px 18px;border-radius:10px;border:none;
  background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;font-weight:700;font-size:13px;
  cursor:pointer;box-shadow:0 4px 14px rgba(79,70,229,.35);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.cp-start-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(79,70,229,.45);filter:brightness(1.08)}

@media (max-width: 1100px){
  .cp-role-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── Split-screen session page ──────────────────────────────────── */
.cp-session-wrap{display:flex;height:calc(100vh - 65px);background:var(--bg)}

/* Column 1 — mini Sam + webcam */
.cp-mini-col{
  width:150px;flex-shrink:0;background:#0f172a;display:flex;flex-direction:column;align-items:center;
  padding:16px 10px;gap:10px;color:#e2e8f0;
}
.cp-sam-photo-wrap{width:80px;height:80px;border-radius:50%;overflow:hidden;border:2px solid #6366f1;position:relative}
#cp-sam-photo{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.cp-visualizer{display:flex;align-items:flex-end;gap:2px;height:36px}
.cp-visualizer .vis-bar{width:3px;background:#6366f1;border-radius:2px;height:3px;transition:height .05s linear}
.cp-sam-badge{font-size:10.5px;color:#94a3b8}

/* Column 2 — question panel */
.cp-question-col{flex:1;padding:22px 24px;overflow-y:auto;background:var(--surface);border-right:1px solid var(--border)}
.cp-q-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cp-q-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cp-q-counter{font-size:11px;font-weight:700;color:var(--accent, #6366f1);background:rgba(99,102,241,.1);padding:2px 10px;border-radius:99px;white-space:nowrap}
.cp-scenario{font-size:14.5px;color:var(--text);margin-bottom:8px;line-height:1.5}
.cp-task{font-size:14px;color:var(--text);font-weight:600;margin-bottom:16px;line-height:1.5}
.cp-io-row{display:flex;gap:10px;margin-bottom:18px}
.cp-io-box{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px}
.cp-io-box--out{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.35)}
.cp-io-label{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
.cp-io-box pre{margin:0;font-family:'Fira Mono',monospace;font-size:12.5px;white-space:pre-wrap;word-break:break-word}

.cp-thinking{
  display:flex;align-items:center;gap:8px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;
  border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:12.5px;font-weight:600;
}
.cp-thinking-dots{display:inline-flex;gap:3px}
.cp-thinking-dots span{
  width:5px;height:5px;border-radius:50%;background:#2563eb;display:inline-block;
  animation:cp-thinking-bounce 1.2s infinite ease-in-out both;
}
.cp-thinking-dots span:nth-child(1){animation-delay:-0.24s}
.cp-thinking-dots span:nth-child(2){animation-delay:-0.12s}
@keyframes cp-thinking-bounce{
  0%, 80%, 100%{transform:scale(0.6);opacity:.5}
  40%{transform:scale(1);opacity:1}
}

.cp-hint-callout{
  background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:12px 14px;margin-bottom:16px;
}
.cp-hint-callout-title{font-size:11.5px;font-weight:700;color:#166534;margin-bottom:4px}
.cp-hint-callout-text{font-size:13px;color:#14532d;line-height:1.5}
.cp-hint-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin:10px 0 3px}
.cp-hint-label--wrong{color:#991b1b}
.cp-hint-label--fix{color:#166534}
.cp-hint-wrong{
  margin:0;padding:8px 10px;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;
  font-family:'Fira Mono',monospace;font-size:12.5px;color:#991b1b;white-space:pre-wrap;word-break:break-word;
}
.cp-hint-fix{
  margin:0;padding:8px 10px;background:#dcfce7;border:1px solid #86efac;border-radius:6px;
  font-family:'Fira Mono',monospace;font-size:12.5px;color:#166534;white-space:pre-wrap;word-break:break-word;
}
.cp-hint-ask-note{margin:10px 0 0;font-size:11.5px;color:var(--muted);font-style:italic}

/* Chat section */
.cp-chat-section{margin-top:16px;border-top:1px solid var(--border);padding-top:14px}
.cp-chat-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.cp-chat-panel{height:160px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 2px;margin-bottom:10px}
.cp-chat-bubble{max-width:85%;border-radius:14px;padding:8px 12px;font-size:12.5px;line-height:1.45}
.cp-chat-bubble.sam{align-self:flex-start;background:#eff6ff;color:#1e3a8a;border:1px solid #bfdbfe;border-bottom-left-radius:4px}
.cp-chat-bubble.user{align-self:flex-end;background:#f0fdf4;color:#14532d;border:1px solid #bbf7d0;border-bottom-right-radius:4px}
.cp-chat-bubble .cp-bubble-name{font-size:9.5px;font-weight:700;text-transform:uppercase;margin-bottom:2px}
.cp-chat-bubble.sam .cp-bubble-name{color:#2563eb}
.cp-chat-bubble.user .cp-bubble-name{color:#16a34a}

.cp-speak-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:600;font-size:13px;cursor:pointer;
}
.cp-speak-btn.recording{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
.cp-speak-btn:disabled{opacity:.6;cursor:not-allowed}

.cp-silence-bar{width:100%;height:3px;border-radius:2px;background:#fee2e2;margin-bottom:6px;overflow:hidden}
.cp-silence-bar-fill{height:100%;width:40%;background:#ef4444;border-radius:2px;animation:cp-silence-pulse 1.1s ease-in-out infinite}
@keyframes cp-silence-pulse{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(350%)}
}

/* Column 3 — editor panel */
.cp-editor-col{flex:1;display:flex;flex-direction:column;background:#0f172a;color:#e2e8f0}
.cp-editor-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #1e293b;font-size:13px;font-weight:600}
.cp-editor-hdr select{background:#1e293b;color:#e2e8f0;border:1px solid #334155;border-radius:6px;padding:4px 8px;font-size:12px}
/* Elapsed-time display — informational only, no deadline styling (no red/
   countdown treatment on purpose, this never expires or blocks anything). */
.cp-timer{background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px;padding:4px 8px;font-size:12px;font-family:'Fira Mono','Courier New',monospace;letter-spacing:.02em}
.cp-end-btn{background:#7f1d1d;color:#fecaca;border:1px solid #991b1b;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer}
.cp-end-btn:hover{background:#991b1b;color:#fff}

.cp-editor-textwrap{position:relative;flex:1;min-height:0;display:flex;overflow:hidden}

/* Line-number gutter — plain divs, one per line, kept in sync with the
   textarea's scrollTop so it never depends on the highlight overlay. */
.cp-gutter{
  flex-shrink:0;width:42px;overflow:hidden;background:#0b1222;border-right:1px solid #1e293b;
  font-family:'Fira Mono','Courier New',monospace;font-size:13px;line-height:1.7;padding:18px 8px 18px 0;
  text-align:right;color:#475569;user-select:none;
}
.cp-gutter-line{display:block}

.cp-editor-scroll{position:relative;flex:1;min-width:0}

/* Single highlight band, positioned by line-height * (lineNumber - 1) —
   no per-line DOM rebuild, so it can never desync from real textarea rows. */
.cp-highlight-band{
  position:absolute;left:0;right:0;pointer-events:none;z-index:1;
  background:rgba(239,68,68,.22);border-left:3px solid #ef4444;
}

.cp-monaco-editor {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 360px;
  background: #0f172a;
}

.cp-monaco-mistake-line {
  background: rgba(239, 68, 68, 0.22) !important;
  border-left: 3px solid #ef4444 !important;
}

.cp-monaco-correct-line {
  background: rgba(34, 197, 94, 0.22) !important;
  border-left: 3px solid #22c55e !important;
}

.cp-code-editor{
  position:relative;z-index:2;flex:1;min-height:0;width:100%;height:100%;box-sizing:border-box;
  font-family:'Fira Mono','Courier New',monospace;font-size:13px;line-height:1.7;padding:18px;
  background:transparent;color:#e2e8f0;border:none;outline:none;resize:none;white-space:pre;overflow:auto;
}

.cp-stdin-wrap{border-top:1px solid #1e293b;padding:8px 16px;background:#0b1222}
.cp-stdin-label{font-size:10.5px;color:#64748b;margin-bottom:5px;text-transform:uppercase;letter-spacing:.03em;font-weight:700}
.cp-stdin-box{
  width:100%;box-sizing:border-box;resize:vertical;min-height:32px;padding:6px 8px;border-radius:6px;
  border:1px solid #334155;background:#0f172a;color:#e2e8f0;font-family:'Fira Mono',monospace;font-size:12px;
}
.cp-stdin-box:focus{outline:none;border-color:#6366f1}

.cp-output-wrap{border-top:1px solid #1e293b;max-height:140px;overflow-y:auto;padding:10px 16px;background:#0b1222}
.cp-output-wrap pre{margin:0;font-family:'Fira Mono',monospace;font-size:12px;white-space:pre-wrap;word-break:break-word;color:#94a3b8}

.cp-editor-footer{display:flex;gap:10px;padding:12px 16px;border-top:1px solid #1e293b}
.cp-editor-footer button{
  flex:1;padding:9px;border-radius:8px;border:none;font-weight:700;font-size:13px;cursor:pointer;
}
#cp-run-btn{background:#334155;color:#e2e8f0}
#cp-run-btn:hover{background:#475569}
.cp-skip-btn{background:transparent;color:#94a3b8;border:1px solid #334155 !important}
.cp-skip-btn:hover{background:#1e293b;color:#e2e8f0}
.cp-nav-btn{background:#1e293b;color:#cbd5e1;border:1px solid #334155 !important}
.cp-nav-btn:hover:not(:disabled){background:#334155;color:#fff}
.cp-nav-btn:disabled{opacity:.35;cursor:not-allowed}
#cp-submit-btn{background:#6366f1;color:#fff}
#cp-submit-btn:hover{background:#4338ca}

.cp-end-screen{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;overflow-y:auto;text-align:center;padding:48px 20px;box-sizing:border-box}
.cp-end-screen h2{font-family:'Space Grotesk',sans-serif;color:var(--text);margin-bottom:8px;font-size:1.6rem}
.cp-end-screen p{color:var(--muted);margin-bottom:20px}
.cp-end-spinner{width:36px;height:36px;border:3.5px solid var(--border);border-top-color:var(--accent, #6366f1);border-radius:50%;animation:cp-spin 0.8s linear infinite;margin-bottom:18px}
@keyframes cp-spin{to{transform:rotate(360deg)}}

.cp-results-stats{display:flex;gap:16px;margin:8px 0 28px;flex-wrap:wrap;justify-content:center}
.cp-results-stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 22px;min-width:110px}
.cp-results-stat-num{font-family:'Space Grotesk',sans-serif;font-size:1.7rem;font-weight:700;color:var(--text)}
.cp-results-stat-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.cp-results-stat--correct .cp-results-stat-num{color:#16a34a}
.cp-results-stat--wrong .cp-results-stat-num{color:#dc2626}

.cp-results-list{width:100%;max-width:520px;text-align:left;display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.cp-results-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);font-size:13px;
}
.cp-results-item-icon{font-size:15px;flex-shrink:0}
.cp-results-item--correct{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.1)}
.cp-results-item--wrong{border-color:rgba(220,38,38,.35);background:rgba(220,38,38,.1)}
.cp-results-item--skipped{opacity:.65}
.cp-results-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cp-results-item-text{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-results-item-diff{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.cp-results-item-timing{font-size:11px;color:var(--text);flex-shrink:0;white-space:nowrap;text-align:right}
.cp-results-item-pace--fast{color:#16a34a}
.cp-results-item-pace--slow{color:#b45309}
.cp-results-item-ideal{color:var(--muted);font-weight:400}
.cp-results-item-status{font-size:11px;color:var(--muted);flex-shrink:0}

.cp-results-actions{display:flex;gap:10px}
.cp-results-actions a{text-decoration:none}

@media (max-width: 900px){
  .cp-session-wrap{
    flex-direction:column !important;
    height:auto !important;
    min-height:100vh;
  }
  .cp-mini-col{
    width:100% !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    padding:10px 14px !important;
    gap:14px !important;
    border-bottom:1px solid #1e293b;
  }
  .cp-sam-photo-wrap{
    width:52px !important;
    height:52px !important;
  }
  .cp-question-col{
    padding:18px 16px !important;
    border-right:none !important;
    border-bottom:2px solid var(--border) !important;
    max-height:380px !important;
    overflow-y:auto !important;
  }
  .cp-editor-col{
    min-height:440px !important;
    width:100% !important;
  }
  .cp-monaco-editor{
    min-height:320px !important;
  }
}

@media (max-width: 600px){
  .cp-gallery-wrap{
    padding:24px 14px 60px;
  }
  .cp-hdr h1{
    font-size:1.55rem;
  }
  .cp-role-grid{
    grid-template-columns:1fr;
  }
  .cp-editor-footer{
    flex-wrap:wrap;
    gap:8px;
    padding:10px 12px;
  }
  .cp-editor-footer button{
    flex:1 1 calc(50% - 6px);
    min-height:42px;
    font-size:12px;
  }
  .cp-io-row{
    flex-direction:column;
  }
  .cp-chat-panel{
    height:130px;
  }
  .cp-results-stats{
    gap:10px;
  }
  .cp-results-stat{
    padding:12px 16px;
    min-width:90px;
  }
  .cp-results-stat-num{
    font-size:1.4rem;
  }
}