/* CK Labs Lab V3 — Practice mode (defis + sandbox) */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#2d333f; --surface:#393f4d; --surface2:#43495a; --surface3:#525a6c;
  --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.11);
  --accent:#7c6cff; --accent2:#34d399; --gold:#f5b851; --pink:#ec4899; --teal:#06b6d4;
  --text:#f1f5f9; --muted:#94a3b8; --muted2:#5e6c84; --danger:#f87171;
}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;max-width:100vw;overscroll-behavior:none}
/* Mobile : full app-shell lock — pas de pull-down ni de rubber-band, comme l'entraînement mobile */
@media (max-width:900px){
  html,body{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
  .v3p-root{height:100%;height:100dvh}
}
button{font-family:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.v3p-root{display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* Topbar */
.v3p-top{flex:none;display:flex;align-items:center;gap:14px;padding:10px 18px;background:linear-gradient(180deg,#46506a,#393f4d);border-bottom:1px solid var(--border);min-height:54px}
.v3p-back{background:transparent;border:1px solid var(--border2);color:var(--muted);padding:5px 10px;border-radius:6px;font-size:11px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.v3p-back:hover{border-color:var(--accent);color:var(--text)}
.v3p-logo{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,#4c64e8,#3b4fc4);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff}
.v3p-brand{font-size:13px;font-weight:600}
.v3p-brand span{color:var(--muted);font-weight:500;margin-left:4px}
.v3p-tier-pills{display:flex;gap:4px;background:var(--surface);padding:3px;border-radius:8px;margin-left:6px}
.v3p-tier-pill{background:transparent;border:none;color:var(--muted);padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.02em;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.v3p-tier-pill.active{background:var(--surface3);color:var(--text)}
.v3p-tier-pill:hover:not(.active){color:var(--text)}
/* League colours — visible on hover + active state */
/* "Ma ligue" — l'utilisateur voit instantanément quelle pastille correspond à sa ligue */
.v3p-tier-pill.is-my-league{position:relative;box-shadow:0 0 0 1.5px var(--accent),0 0 12px rgba(124,108,255,0.35)}
.v3p-tier-pill.is-my-league::after{content:"★";position:absolute;top:-5px;right:-5px;background:var(--accent);color:#fff;font-size:8.5px;width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;line-height:1;box-shadow:0 0 0 1.5px var(--surface)}
.v3p-tier-pill.league-bronze{color:#cd7f32}
.v3p-tier-pill.league-bronze.active{background:rgba(205,127,50,0.18);color:#e8a85a}
.v3p-tier-pill.league-silver{color:#a8a8a8}
.v3p-tier-pill.league-silver.active{background:rgba(192,192,192,0.18);color:#dcdcdc}
.v3p-tier-pill.league-gold{color:#fbbf24}
.v3p-tier-pill.league-gold.active{background:rgba(251,191,36,0.18);color:#fcd34d}
.v3p-tier-pill.league-diamond{color:#7dd3fc}
.v3p-tier-pill.league-diamond.active{background:rgba(125,211,252,0.18);color:#a5e2fd}
/* League tag inside challenge list (small badge) */
.v3p-league-tag{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:99px;font-size:10px;font-weight:800;letter-spacing:.02em;border:1px solid currentColor}
.v3p-league-tag.bronze{color:#cd7f32;background:rgba(205,127,50,0.10)}
.v3p-league-tag.silver{color:#a8a8a8;background:rgba(192,192,192,0.10)}
.v3p-league-tag.gold{color:#fbbf24;background:rgba(251,191,36,0.10)}
.v3p-league-tag.diamond{color:#7dd3fc;background:rgba(125,211,252,0.10)}
.v3p-meta{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted)}
.v3p-meta strong{color:var(--text)}
.v3p-xp-pill{background:rgba(52,211,153,0.12);color:var(--accent2);border:1px solid rgba(52,211,153,0.3);padding:3px 9px;border-radius:99px;font-size:10px;font-weight:800}
.v3p-theory-btn{background:transparent;border:1px solid var(--border2);color:var(--muted);padding:5px 10px;border-radius:6px;font-size:11px;font-weight:700}
.v3p-theory-btn:hover{border-color:var(--accent);color:var(--text)}

/* Body */
.v3p-body{flex:1;display:grid;grid-template-columns:280px 1fr 360px;overflow:hidden;min-height:0}

/* Left rail — challenges list */
.v3p-rail{background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:8px}
.v3p-rail-h{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted2);font-weight:800;padding:0 4px;margin-bottom:4px}
.v3p-chal{background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:11px 12px;cursor:pointer;display:flex;align-items:flex-start;gap:9px;transition:border-color .15s,background .15s}
.v3p-chal:hover{border-color:var(--border2);background:var(--surface3)}
.v3p-chal.active{border-color:var(--accent);background:rgba(124,108,255,0.08)}
.v3p-chal.done{opacity:.7}
.v3p-chal-num{flex:none;width:22px;height:22px;border-radius:6px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--muted)}
.v3p-chal.done .v3p-chal-num{background:rgba(52,211,153,0.15);color:var(--accent2)}
.v3p-chal.active .v3p-chal-num{background:var(--accent);color:#fff}
.v3p-chal-body{flex:1;min-width:0}
.v3p-chal-t{font-size:12px;font-weight:700;margin-bottom:2px;letter-spacing:-.01em}
.v3p-chal-d{font-size:10.5px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v3p-chal-meta{font-size:9.5px;color:var(--muted2);font-weight:700;margin-top:5px;display:flex;gap:8px;align-items:center}
.v3p-chal-meta .gold{color:var(--gold)}

/* Centre — work area */
.v3p-work{display:flex;flex-direction:column;overflow:hidden;background:var(--bg);min-width:0}
.v3p-brief{flex:none;background:var(--surface);border-bottom:1px solid var(--border);padding:14px 18px;display:flex;align-items:flex-start;gap:14px}
.v3p-brief-icon{flex:none;width:46px;height:46px;border-radius:12px;background:rgba(124,108,255,0.12);border:1px solid rgba(124,108,255,0.3);display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1}
.v3p-brief-icon.medal-bronze{background:rgba(205,127,50,0.18);border-color:rgba(205,127,50,0.45);box-shadow:0 0 0 1px rgba(205,127,50,0.2),0 4px 14px -6px rgba(205,127,50,0.5)}
.v3p-brief-icon.medal-silver{background:rgba(192,192,192,0.18);border-color:rgba(192,192,192,0.45);box-shadow:0 0 0 1px rgba(192,192,192,0.2),0 4px 14px -6px rgba(192,192,192,0.5)}
.v3p-brief-icon.medal-gold{background:rgba(251,191,36,0.18);border-color:rgba(251,191,36,0.5);box-shadow:0 0 0 1px rgba(251,191,36,0.25),0 4px 14px -6px rgba(251,191,36,0.55)}
.v3p-brief-icon.medal-diamond{background:rgba(125,211,252,0.18);border-color:rgba(125,211,252,0.5);box-shadow:0 0 0 1px rgba(125,211,252,0.25),0 4px 14px -6px rgba(125,211,252,0.55)}
.v3p-brief-body{flex:1;min-width:0}
.v3p-brief-title{font-size:14px;font-weight:800;margin-bottom:3px;letter-spacing:-.01em}
.v3p-brief-question{font-size:13px;color:var(--text);line-height:1.5}
.v3p-brief-meta{margin-top:6px;font-size:11px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.v3p-brief-meta b{color:var(--gold)}
/* Mobile : limiter le brief-meta à l'essentiel — médaille + XP. Le domaine est secondaire et alourdit l'écran. */
@media (max-width:600px){
  .v3p-brief-meta > span:nth-child(2){display:none}
  .v3p-brief-meta{gap:10px}
}

/* Tables strip — drag source + hover preview */
.v3p-tables-strip{flex:none;background:var(--surface);border-bottom:1px solid var(--border);padding:9px 14px;display:flex;align-items:center;gap:8px;overflow-x:auto;min-height:42px}
.v3p-tables-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted2);font-weight:800;flex:none}
.v3p-tablechip{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border2);color:var(--text);padding:5px 11px;border-radius:99px;font-size:11px;font-weight:600;font-family:'JetBrains Mono',monospace;cursor:grab;user-select:none}
.v3p-tablechip:hover{border-color:var(--accent);background:rgba(124,108,255,0.08)}
.v3p-tablechip:active{cursor:grabbing}
.v3p-tablechip .v3p-tch-cols{font-size:9.5px;color:var(--muted);font-family:Inter,sans-serif;font-weight:700}

/* Editor — textarea + overlay highlight */
.v3p-editor-wrap{flex:0 0 44%;display:flex;flex-direction:column;background:var(--surface);overflow:hidden;border-bottom:1px solid var(--border);position:relative}
.v3p-editor-area{flex:1;position:relative;overflow:hidden;min-height:140px}
/* IMPORTANT: textarea + overlay must measure characters identically.
 * - Use a strict monospace stack (avoid JetBrains Mono if it's not loaded — falls back to system mono with mismatched metrics).
 * - Force overflow:scroll on BOTH so the rendered width matches even when scrollbars appear.
 * - Apply font/spacing rules to ALL children of <code> too — <span> tokens otherwise reintroduce kerning. */
.v3p-editor-overlay{position:absolute;top:0;left:0;right:0;margin:0;padding:16px 20px;font-family:ui-monospace,'SF Mono','Menlo','Consolas','Courier New',monospace;font-size:13px;line-height:1.7;tab-size:2;white-space:pre-wrap;word-break:normal;overflow-wrap:break-word;color:var(--text);pointer-events:none;will-change:transform;min-height:100%;letter-spacing:0;word-spacing:0;font-kerning:none;font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0,"clig" 0;text-rendering:geometricPrecision;overflow-y:scroll;overflow-x:hidden}
.v3p-editor-overlay code,.v3p-editor-overlay code *{font-family:inherit;font-size:inherit;line-height:inherit;letter-spacing:0;word-spacing:0;font-kerning:none;font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0,"clig" 0;text-rendering:geometricPrecision;background:transparent !important}
.v3p-editor-overlay code{display:block}
.v3p-editor-textarea{position:absolute;inset:0;width:100%;height:100%;background:transparent;color:transparent;border:0;resize:none;font-family:ui-monospace,'SF Mono','Menlo','Consolas','Courier New',monospace;font-size:13px;line-height:1.7;padding:16px 20px;tab-size:2;caret-color:var(--accent);outline:none;white-space:pre-wrap;word-break:normal;overflow-wrap:break-word;overflow-y:scroll;overflow-x:hidden;z-index:2;letter-spacing:0;word-spacing:0;font-kerning:none;font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0,"clig" 0;text-rendering:geometricPrecision}
.v3p-editor-textarea::placeholder{color:var(--muted2)}
.v3p-editor-textarea::selection{background:rgba(124,108,255,0.4);color:var(--text)}

/* SQL syntax tokens — couleur visible en commentaire (fil rouge UX) */
.v3p-tok-comment{color:#7a8aa8;font-style:italic}
.v3p-tok-keyword{color:#a594ff;font-weight:600}
.v3p-tok-string{color:#5fd1a3}
.v3p-tok-number{color:#f5b851}
.v3p-tok-fn{color:#06b6d4}
.v3p-editor-bar{flex:none;background:rgba(255,255,255,0.02);border-top:1px solid var(--border);padding:8px 14px;display:flex;flex-direction:column;gap:6px}
.v3p-editor-bar .v3p-bar-row{display:flex;align-items:center;gap:9px;width:100%}
.v3p-editor-bar .v3p-bar-primary{justify-content:flex-end}
.v3p-editor-bar .v3p-bar-primary .v3p-btn-hint{margin-right:auto}
.v3p-editor-bar .v3p-bar-meta{justify-content:space-between;border-top:1px dashed var(--border);padding-top:6px}
/* Mode switcher chips — desktop hides; mobile reveals */
.v3p-mode-switch{display:none}
/* Autocomplete popup (anchored to the editor area) */
.v3p-autoc{position:absolute;z-index:30;background:#0d1424;border:1px solid rgba(124,108,255,0.45);border-radius:8px;padding:4px;min-width:200px;max-width:280px;box-shadow:0 12px 32px rgba(0,0,0,0.55);max-height:220px;overflow-y:auto;font-family:'JetBrains Mono',ui-monospace,monospace;display:none}
.v3p-autoc.show{display:block}
.v3p-autoc-item{padding:6px 10px;border-radius:4px;font-size:12px;color:#e2e8f0;cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:center}
.v3p-autoc-item:hover,.v3p-autoc-item.active{background:rgba(124,108,255,0.18);color:#fff}
.v3p-autoc-item-kind{font-size:9.5px;color:#94a3b8;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.v3p-autoc-hint{padding:6px 10px;font-size:10.5px;color:#64748b;border-top:1px solid rgba(255,255,255,0.06);margin-top:4px;font-family:Inter,sans-serif}
/* Sandbox left rail — table list items */
.v3p-tbl-item .v3p-chal-num{background:rgba(125,211,252,0.12);color:#7dd3fc;border-color:rgba(125,211,252,0.3)}
.v3p-tbl-item:hover{border-color:rgba(125,211,252,0.4)}
.v3p-tbl-item .v3p-chal-meta span[data-action="select"]{color:var(--accent2);font-family:'JetBrains Mono',monospace;font-size:10px;padding:1px 6px;border:1px solid rgba(52,211,153,0.3);border-radius:4px;background:rgba(52,211,153,0.08)}
.v3p-tbl-item .v3p-chal-meta span[data-action="select"]:hover{background:rgba(52,211,153,0.18);border-color:rgba(52,211,153,0.5)}
/* BigQuery-style breadcrumb in sandbox */
.v3p-bq-crumb{padding:10px 12px;margin:0 0 8px;background:rgba(125,211,252,0.06);border:1px solid rgba(125,211,252,0.18);border-radius:8px;font-size:12px;color:var(--text)}
.v3p-bq-line{display:flex;align-items:center;gap:6px;line-height:1.5}
.v3p-bq-line.indent{margin-left:14px}
.v3p-bq-ico{font-size:13px}
.v3p-bq-meta{font-size:9.5px;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-left:4px}
.v3p-bq-hint{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(125,211,252,0.2);font-size:10.5px;color:var(--muted);line-height:1.45}
/* Skilly typing indicator (LLM call in flight) */
.v3p-chat-typing{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;background:rgba(124,108,255,0.08);border:1px solid rgba(124,108,255,0.25);border-radius:12px;border-top-left-radius:2px;width:fit-content;margin:6px 0}
.v3p-chat-typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#a594ff;animation:v3p-typing 1.2s infinite}
.v3p-chat-typing span:nth-child(2){animation-delay:.2s}
.v3p-chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes v3p-typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* Analyze-query mode — QCM in Skilly chat */
.v3p-aq-q{font-size:13.5px;line-height:1.5;color:var(--text);font-weight:700;margin-bottom:10px}
.v3p-aq-num{display:inline-block;font-size:10px;font-weight:800;color:var(--accent);background:rgba(124,108,255,0.15);padding:2px 8px;border-radius:99px;margin-right:8px;letter-spacing:.06em;text-transform:uppercase}
.v3p-aq-choices{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.v3p-aq-choice{font-family:inherit;font-size:12.5px;line-height:1.45;text-align:left;background:rgba(124,108,255,0.06);color:var(--text);border:1px solid rgba(124,108,255,0.25);padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s,transform .08s;font-weight:600}
.v3p-aq-choice:hover:not(:disabled){background:rgba(124,108,255,0.15);border-color:rgba(124,108,255,0.5);transform:translateX(2px)}
.v3p-aq-choice:disabled{cursor:default;opacity:.55}
.v3p-aq-choice.correct{background:rgba(52,211,153,0.18);border-color:rgba(52,211,153,0.6);color:#86efac;opacity:1;font-weight:700}
.v3p-aq-choice.correct::before{content:"✓ ";color:#34d399;font-weight:900}
.v3p-aq-choice.wrong{background:rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.5);color:#fca5a5;opacity:1}
.v3p-aq-choice.wrong::before{content:"✗ ";color:#ef4444;font-weight:900}
.v3p-btn-run{background:var(--accent2);color:#042418;border:none;padding:9px 18px;border-radius:8px;font-weight:900;font-size:13px;letter-spacing:.01em;display:inline-flex;align-items:center;gap:6px;min-height:38px;box-shadow:0 4px 12px -4px rgba(94,234,212,0.45);cursor:pointer}
.v3p-btn-run:hover{filter:brightness(1.08)}
.v3p-btn-hint{background:transparent;border:1px solid var(--border2);color:var(--muted);padding:6px 11px;border-radius:6px;font-size:11px;font-weight:700;min-height:32px}
.v3p-btn-hint:hover{color:var(--text);border-color:var(--accent)}
.v3p-live-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted);background:var(--surface2);border:1px solid var(--border2);border-radius:99px;padding:3px 4px 3px 10px}
.v3p-live-toggle .v3p-live-label{font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.v3p-live-switch{position:relative;width:34px;height:18px;background:var(--surface3);border-radius:99px;border:1px solid var(--border2);cursor:pointer;flex:none}
.v3p-live-switch::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:transform .18s,background .18s}
.v3p-live-switch.on{background:rgba(52,211,153,0.18);border-color:var(--accent2)}
.v3p-live-switch.on::after{transform:translateX(15px);background:var(--accent2)}

/* Results */
.v3p-result{flex:1;display:flex;flex-direction:column;background:var(--surface);overflow:hidden;min-height:120px}
.v3p-result-h{flex:none;padding:9px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2)}
.v3p-result-h .v3p-count{color:var(--accent2);text-transform:none;letter-spacing:0;font-size:11px}
.v3p-result-h .v3p-live-flag{margin-left:auto;display:none;background:rgba(52,211,153,0.14);color:var(--accent2);border:1px solid rgba(52,211,153,0.3);padding:2px 7px;border-radius:99px;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:none}
.v3p-result.live .v3p-live-flag{display:inline-flex;align-items:center;gap:5px}
.v3p-result.live .v3p-live-flag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent2);animation:v3pulse 1.6s infinite}
@keyframes v3pulse{0%,100%{opacity:.4}50%{opacity:1}}
/* Scroll container.
 * - overscroll-behavior:contain disables the rubber-band/momentum that detaches the sticky header.
 * - -webkit-overflow-scrolling:auto disables iOS inertia (which also detaches sticky during fling).
 * - contain:paint isolates the scroll repaints and stabilises the sticky compositing. */
.v3p-result-body{flex:1;overflow:auto;padding:0 14px;overscroll-behavior:contain;-webkit-overflow-scrolling:auto;contain:paint}
.v3p-result table{width:100%;border-collapse:collapse;font-size:12px}
/* Sticky on <th> ONLY (not thead/tr) — multiple sticky levels race and bounce.
 * transform:translateZ(0) puts the cell on its own compositing layer so the browser repaints it in sync with the scroll, killing the "flotting paste" feel. */
.v3p-result th{position:sticky;top:0;z-index:10;background:var(--surface2);text-align:left;padding:11px 11px 10px;color:var(--accent);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border2);transform:translateZ(0);will-change:transform}
.v3p-result tbody tr:first-child td{padding-top:10px}
.v3p-result tbody tr:last-child td{padding-bottom:14px}
.v3p-result td{padding:7px 11px;border-bottom:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:12px;background:var(--surface)}
.v3p-result tr:hover td{background:rgba(124,108,255,0.05)}
.v3p-result-empty{padding:30px 20px;text-align:center;color:var(--muted2);font-size:12px}
.v3p-result-error{padding:14px 16px;color:var(--danger);font-family:'JetBrains Mono',monospace;font-size:12px;white-space:pre-wrap}

/* Validate bar */
.v3p-validate{flex:none;padding:12px 18px;background:var(--surface);border-top:1px solid var(--border2);display:flex;align-items:center;gap:14px}
.v3p-val-msg{flex:1;font-size:12px;color:var(--muted)}
.v3p-val-msg.ok{color:var(--accent2)}
.v3p-val-msg.ko{color:var(--danger)}
.v3p-btn-validate{background:var(--accent);color:#fff;border:none;padding:9px 16px;border-radius:7px;font-weight:800;font-size:12px;min-height:36px}
.v3p-btn-validate:hover{filter:brightness(1.08)}

/* Right rail — Omar chat + snapshot zone */
.v3p-side{background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;min-width:0;transition:grid-column .25s ease}
/* Bouton repli (›) à droite des onglets Skilly/Snapshot */
.v3p-side-collapse{margin-left:auto;background:transparent;border:1px solid var(--border2);color:var(--muted);width:24px;height:24px;border-radius:6px;font-size:14px;font-weight:800;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;font-family:inherit;align-self:center;margin-right:8px;transition:color .15s,border-color .15s}
.v3p-side-collapse:hover{color:var(--text);border-color:var(--accent)}
@media (min-width:901px){.v3p-side-collapse{display:inline-flex}}
/* Panel replié — la grid passe à 2 colonnes (rail + work) */
.v3p-body.side-collapsed{grid-template-columns:280px 1fr 0}
.v3p-body.side-collapsed .v3p-side{display:none}
/* Bouton ré-ouvrir quand replié — pillule à droite */
.v3p-side-reopen{position:fixed;right:0;top:50%;transform:translateY(-50%);background:var(--surface);border:1px solid var(--border2);border-right:none;border-radius:8px 0 0 8px;color:var(--text);padding:14px 8px 14px 10px;font-size:11px;font-weight:800;letter-spacing:.05em;cursor:pointer;font-family:inherit;writing-mode:vertical-rl;transform-origin:center;z-index:100;box-shadow:-2px 0 8px rgba(0,0,0,0.15);transition:padding .15s,color .15s}
.v3p-side-reopen:hover{padding-right:11px;color:var(--accent)}
.v3p-side-reopen[hidden]{display:none}
@media (max-width:900px){.v3p-side-reopen{display:none !important}}

.v3p-side-tabs{flex:none;display:flex;border-bottom:1px solid var(--border)}
.v3p-side-tab{flex:1;background:transparent;border:none;color:var(--muted);padding:12px 8px;font-size:11px;font-weight:700;letter-spacing:.04em;border-bottom:2px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px}
.v3p-side-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.v3p-side-tab .badge{background:var(--surface3);color:var(--muted);font-size:9px;padding:1px 5px;border-radius:99px;font-weight:800}
.v3p-notif-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#e23b3b;color:#fff;font-size:12px;font-weight:900;line-height:1;letter-spacing:0;box-shadow:0 0 0 2px var(--surface);animation:v3pNotifPulse 1.2s ease-in-out infinite;margin-left:2px}
/* Desktop : on n'affiche jamais la notif sur l'onglet Skilly latéral
 * (le chat est déjà visible en permanence dans le panel droit). Mobile uniquement. */
@media (min-width:901px){
  .v3p-side-tab .v3p-notif-badge{display:none !important}
  .v3p-side-tab.is-pinging{animation:none !important;background:transparent !important}
}
.v3p-notif-badge[hidden]{display:none}
@keyframes v3pNotifPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 2px var(--surface),0 0 0 0 rgba(226,59,59,0.6)}50%{transform:scale(1.18);box-shadow:0 0 0 2px var(--surface),0 0 0 7px rgba(226,59,59,0)}}
.v3p-medal-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:800;letter-spacing:.02em;line-height:1.4;cursor:pointer;transition:filter .15s,transform .12s}
.v3p-medal-pill:hover{filter:brightness(1.15);transform:translateY(-1px)}
.v3p-medal-pill.bronze{background:rgba(205,127,50,0.18);color:#e8a85a;border:1px solid rgba(205,127,50,0.4)}
.v3p-medal-pill.silver{background:rgba(192,192,192,0.18);color:#dcdcdc;border:1px solid rgba(192,192,192,0.4)}
.v3p-medal-pill.gold{background:rgba(251,191,36,0.18);color:#fcd34d;border:1px solid rgba(251,191,36,0.45)}
.v3p-medal-pill.diamond{background:rgba(125,211,252,0.18);color:#a5e2fd;border:1px solid rgba(125,211,252,0.45)}

/* Skilly tab highlight when user has unread messages and isn't looking */
.v3p-side-tab.is-pinging{animation:v3pTabGlow 1.4s ease-in-out infinite;color:var(--text)}
@keyframes v3pTabGlow{0%,100%{background:rgba(226,59,59,0.0);box-shadow:inset 0 -3px 0 0 rgba(226,59,59,0)}50%{background:rgba(226,59,59,0.14);box-shadow:inset 0 -3px 0 0 rgba(226,59,59,0.85)}}
.v3p-mobile-tab.is-pinging{animation:v3pTabGlow 1.4s ease-in-out infinite}

/* Toast pointing at the Skilly chat tab */
.v3p-omar-toast{position:fixed;z-index:9000;max-width:280px;background:#11192a;color:#fff;border:1px solid rgba(226,59,59,0.55);border-radius:10px;padding:11px 14px 11px 38px;font-size:12.5px;line-height:1.45;font-weight:600;box-shadow:0 12px 30px -10px rgba(0,0,0,0.6),0 0 0 3px rgba(226,59,59,0.18);animation:v3pToastIn .25s ease-out}
.v3p-omar-toast::before{content:"💬";position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:18px;filter:drop-shadow(0 0 4px rgba(226,59,59,0.6))}
.v3p-omar-toast .v3p-omar-toast-close{position:absolute;top:4px;right:6px;background:transparent;border:none;color:rgba(255,255,255,0.55);font-size:14px;cursor:pointer;padding:2px 6px;line-height:1}
.v3p-omar-toast .v3p-omar-toast-close:hover{color:#fff}
.v3p-omar-toast .v3p-omar-toast-cta{display:inline-block;margin-top:6px;font-size:11px;font-weight:800;color:#ff8b8b;text-transform:uppercase;letter-spacing:.04em}
.v3p-omar-toast .v3p-omar-toast-arrow{position:absolute;width:14px;height:14px;background:#11192a;border:1px solid rgba(226,59,59,0.55);transform:rotate(45deg)}
.v3p-omar-toast.point-up .v3p-omar-toast-arrow{top:-8px;right:24px;border-right:none;border-bottom:none}
.v3p-omar-toast.point-down .v3p-omar-toast-arrow{bottom:-8px;left:50%;margin-left:-7px;border-left:none;border-top:none}
@keyframes v3pToastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.v3p-side-pane{display:none;flex:1;overflow:hidden;flex-direction:column;min-height:0}
.v3p-side-pane.active{display:flex}

/* Omar chat */
.v3p-chat-h{flex:none;padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px}
.v3p-chat-avatar{width:34px;height:34px;border-radius:9px;background:rgba(124,108,255,0.18);display:flex;align-items:center;justify-content:center;flex:none}
.v3p-chat-info{flex:1;min-width:0}
.v3p-chat-name{font-size:12.5px;font-weight:800;letter-spacing:-.01em}
.v3p-chat-status{font-size:10.5px;color:var(--accent2);font-weight:700}
.v3p-chat-status::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent2);margin-right:5px;vertical-align:middle}
.v3p-chat-body{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:10px}
.v3p-msg{display:flex;gap:8px;max-width:95%}
.v3p-msg.them{align-self:flex-start}
.v3p-msg.me{align-self:flex-end;flex-direction:row-reverse}
.v3p-msg-bubble{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:9px 12px;font-size:12px;line-height:1.5;color:var(--text);max-width:240px;word-wrap:break-word}
.v3p-msg.me .v3p-msg-bubble{background:rgba(124,108,255,0.16);border-color:rgba(124,108,255,0.3)}
.v3p-msg-av{width:24px;height:24px;border-radius:50%;background:rgba(124,108,255,0.2);display:flex;align-items:center;justify-content:center;flex:none;font-size:11px}
.v3p-chat-input{flex:none;padding:10px 12px;border-top:1px solid var(--border);display:flex;gap:8px}
.v3p-chat-input input{flex:1;background:var(--surface2);border:1px solid var(--border2);color:var(--text);padding:9px 12px;border-radius:99px;font-size:12px;font-family:inherit;outline:none}
.v3p-chat-input input:focus{border-color:var(--accent)}
.v3p-chat-input button{background:var(--accent);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:14px;font-weight:800;flex:none}

.v3p-llm-banner{flex:none;background:rgba(245,184,81,0.08);border-bottom:1px solid rgba(245,184,81,0.2);padding:9px 14px;font-size:11px;color:var(--gold);display:none}
.v3p-llm-banner.active{display:block}
.v3p-llm-banner b{color:#fff}

/* Snapshot zone */
.v3p-snap-h{flex:none;padding:12px 14px;border-bottom:1px solid var(--border);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--muted2)}
.v3p-snap-h .small{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}
.v3p-snap-body{flex:1;overflow-y:auto;padding:12px 12px;display:flex;flex-direction:column;gap:9px}
.v3p-snap-drop{border:2px dashed var(--border2);border-radius:11px;padding:18px 12px;text-align:center;color:var(--muted2);font-size:11.5px;line-height:1.5;background:rgba(255,255,255,0.02)}
.v3p-snap-drop.over{border-color:var(--accent);background:rgba(124,108,255,0.08);color:var(--accent)}
.v3p-snap-item{background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:10px 11px;display:flex;align-items:flex-start;gap:9px}
.v3p-snap-item-name{flex:1;min-width:0;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--accent)}
.v3p-snap-item-meta{font-size:10.5px;color:var(--muted);margin-top:2px;font-family:Inter,sans-serif;font-weight:500}
.v3p-snap-item-rm{background:transparent;border:none;color:var(--muted2);font-size:14px;cursor:pointer;padding:0 4px}
.v3p-snap-item-rm:hover{color:var(--danger)}

/* Hover tooltip (preview rows) */
.v3p-hover{position:fixed;z-index:1000;display:none;background:#0b1020;border:1px solid var(--accent);border-radius:9px;padding:9px;max-width:520px;max-height:60vh;overflow:auto;box-shadow:0 10px 32px rgba(0,0,0,.7);pointer-events:none}
.v3p-hover-h{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#93c5fd;margin-bottom:6px}
.v3p-hover table{width:100%;font-size:11.5px;border-collapse:separate;border-spacing:0}
.v3p-hover th{text-align:left;padding:5px 8px;background:var(--surface2);color:var(--accent);font-weight:700;font-size:10.5px;border-bottom:1px solid var(--border2)}
.v3p-hover td{padding:4px 8px;border-bottom:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:11.5px}

/* Mobile */
@media (max-width:1100px){
  .v3p-body{grid-template-columns:1fr;min-width:0}
  .v3p-rail,.v3p-side{display:none}
  body.v3p-show-rail .v3p-rail{display:flex;position:fixed;inset:54px 0 0 0;z-index:50;width:100%}
  body.v3p-show-side .v3p-side{display:flex;position:fixed;inset:54px 0 0 0;z-index:50;width:100%}
  .v3p-mobile-tabs{display:flex;flex:none;background:var(--surface);border-bottom:1px solid var(--border);padding:6px;gap:4px;max-width:100vw}
  .v3p-mobile-tab{flex:1;background:transparent;border:none;color:var(--muted);padding:9px;font-size:12px;font-weight:700;border-radius:6px;min-height:44px}
  .v3p-mobile-tab.active{background:var(--surface3);color:var(--text)}
  /* Ensure work area never overflows viewport horizontally */
  .v3p-work{min-width:0;max-width:100vw}
}
.v3p-mobile-tabs{display:none}

/* Smaller mobile (<600px) — pills overflow guard, sandbox tables touch-friendly */
@media (max-width:600px){
  /* League pills can overflow — allow horizontal scroll instead of wrapping mid-row */
  .v3p-tier-pills{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;max-width:100%;padding:4px;margin-left:0;scrollbar-width:none;scroll-snap-type:x proximity}
  .v3p-tier-pills::-webkit-scrollbar{display:none}
  .v3p-tier-pill{flex:none;white-space:nowrap;font-size:10.5px;padding:5px 9px;scroll-snap-align:start;min-height:32px}
  /* Top bar of practice — wrap properly on small */
  .v3p-top{flex-wrap:wrap;gap:6px;padding:8px 10px;min-height:auto;max-width:100vw}
  .v3p-brand span{display:none}
  .v3p-meta{margin-left:auto;font-size:10.5px;gap:8px;flex-wrap:wrap}
  /* Mobile bottom tabs (Code / Défis / Skilly) — horizontal snap, never truncated */
  .v3p-mobile-tabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;max-width:100vw;scroll-snap-type:x proximity}
  .v3p-mobile-tabs::-webkit-scrollbar{display:none}
  .v3p-mobile-tab{flex:1 0 auto;min-width:96px;scroll-snap-align:start}
  /* Sandbox table items larger touch targets */
  .v3p-tbl-item .v3p-chal-meta span[data-action="select"]{padding:4px 8px}
  /* Tables strip — keep horizontal scroll inside its container only */
  .v3p-tables-strip{max-width:100vw;padding:8px 12px;-webkit-overflow-scrolling:touch}
  /* Result table — ensure inner scroll, never page scroll */
  .v3p-result-body{max-width:100vw;overflow-x:auto}
  .v3p-result table{min-width:100%}
  /* Hover preview shouldn't exceed viewport */
  .v3p-hover{max-width:calc(100vw - 16px)}
  /* Brief text — allow long words/codes to break */
  .v3p-brief-question,.v3p-brief-meta{word-wrap:break-word;overflow-wrap:break-word}
  /* ── Editor — no horizontal truncation on mobile ───────────── */
  /* Parent grid cell must allow shrink so the editor matches viewport width */
  .v3p-work,.v3p-editor-wrap,.v3p-editor-area{min-width:0;max-width:100vw}
  .v3p-editor-wrap{flex:0 0 50%;padding:0;background:var(--surface)}
  /* Inner padding restored on textarea + overlay so the code never touches the edge,
   * and an internal horizontal scroll is allowed for very long unbreakable lines. */
  .v3p-editor-textarea,.v3p-editor-overlay{
    padding:14px 14px;
    /* iOS auto-zooms inputs <16px on focus — keep ≥16px to prevent it */
    font-size:16px;
    line-height:1.55;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
    overflow-x:auto;
  }
  /* Run/Hint/Live row — prevent overflow on mobile */
  .v3p-editor-bar{gap:6px;padding:8px 10px}
  .v3p-live-toggle{margin-left:0}
  /* Brief takes a bit less space on mobile */
  .v3p-brief{padding:12px 14px;gap:10px}
}

/* ── Mobile 2-mode UX (Console vs Résultat) ──────────────────────────
 * The validate bar must always be visible on small screens. We achieve this
 * by giving editor + result flexible heights and toggling priority based on
 * a body class set by shell.js.
 *
 * Default (no mode class set) behaves like before to avoid regressing
 * desktop / tablet rendering.
 */
@media (max-width:600px){
  /* Mode switch chips visible inside the editor bar on mobile only */
  .v3p-mode-switch{display:inline-flex;flex:none;background:var(--surface);border:1px solid var(--border2);border-radius:6px;padding:2px}
  .v3p-mode-switch button{background:transparent;border:none;color:var(--muted);font-size:11px;font-weight:700;padding:6px 9px;border-radius:4px;cursor:pointer;font-family:inherit;line-height:1}
  .v3p-mode-switch button.active{background:var(--surface3);color:var(--text)}

  /* Always pin validate bar at the natural size; never let it disappear */
  .v3p-validate{flex:0 0 auto;position:sticky;bottom:0;z-index:5}

  /* MODE: edit — console takes the room, result collapses to 1-line strip */
  .v3p-body.mode-edit .v3p-editor-wrap{flex:1 1 auto;min-height:0}
  .v3p-body.mode-edit .v3p-result{flex:0 0 auto;max-height:48px;overflow:hidden}
  .v3p-body.mode-edit .v3p-result .v3p-result-body{display:none}
  .v3p-body.mode-edit .v3p-result-h{cursor:pointer}

  /* MODE: result — result takes the room, console compact + scrollable.
   * editor-area defaults to min-height:140px which would push the
   * Run/Hint/Live bar OUT of the wrap. Override to 0 so the bar stays visible. */
  .v3p-body.mode-result .v3p-editor-wrap{flex:0 0 auto;max-height:170px;min-height:0;overflow:hidden;display:flex;flex-direction:column}
  .v3p-body.mode-result .v3p-editor-area{flex:1 1 0;min-height:0}
  .v3p-body.mode-result .v3p-editor-bar{flex:0 0 auto;padding:6px 8px;gap:4px}
  .v3p-body.mode-result .v3p-bar-row{gap:6px}
  .v3p-body.mode-result .v3p-bar-meta{padding-top:4px;border-top:none}
  .v3p-body.mode-result .v3p-result{flex:1 1 auto;min-height:0}
  .v3p-body.mode-result .v3p-brief{display:none}
  .v3p-body.mode-result .v3p-tables-strip{display:none}
  /* Same fix for mode-edit — editor-area shouldn't force its 140px floor when result is collapsed */
  .v3p-body.mode-edit .v3p-editor-area{min-height:0}
}

/* Extra-small phones (<420px) — final padding pass for app feel */
@media (max-width:420px){
  .v3p-top{gap:4px;padding:6px 8px}
  .v3p-tier-pill{font-size:10px;padding:4px 7px}
  .v3p-tier-pills{margin-left:0;padding:3px}
  .v3p-back{padding:4px 7px;font-size:10px}
  .v3p-theory-btn{padding:4px 7px;font-size:10px}
  .v3p-brief{padding:12px 14px;gap:10px}
  .v3p-brief-icon{width:32px;height:32px;font-size:15px}
  .v3p-brief-title{font-size:13px}
  .v3p-brief-question{font-size:12.5px}
}

/* ── Pro lock overlay (challenge cards) ──────────────────────── */
.v3p-chal.locked-pro{position:relative;opacity:.55;transition:opacity .15s}
.v3p-chal.locked-pro:hover{opacity:.78}
.v3p-chal.locked-pro .locked-pro-badge{position:absolute;top:6px;right:8px;font-size:14px;line-height:1;filter:drop-shadow(0 0 4px rgba(245,184,81,.65));pointer-events:none}
.v3p-chal.locked-pro .locked-pro-pill{display:inline-block;background:rgba(245,184,81,.16);color:#f5b851;border:1px solid rgba(245,184,81,.45);font-size:9px;font-weight:900;padding:1px 6px;border-radius:99px;letter-spacing:.06em;margin-left:6px}
body.is-pro .v3p-chal.locked-pro{opacity:1}
body.is-pro .v3p-chal.locked-pro .locked-pro-badge{display:none}
body.is-pro .v3p-chal.locked-pro .locked-pro-pill{display:none}