/* CK Labs Lab V3 — work panel (editor + results) */

.v3-work{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);min-width:0}

.v3-work-h{padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex:none}
.v3-work-tabs{display:flex;gap:4px;background:var(--surface);padding:3px;border-radius:8px}
.v3-work-tab{background:transparent;border:none;color:var(--muted);padding:5px 11px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;letter-spacing:-.01em;min-height:28px}
.v3-work-tab.active{background:var(--surface3);color:var(--text)}
.v3-work-meta{margin-left:auto;display:flex;gap:12px;align-items:center;font-size:11px;color:var(--muted)}

/* Editor */
.v3-editor-wrap{flex:0 0 42%;overflow:hidden;display:flex;flex-direction:column;border-bottom:1px solid var(--border);background:var(--surface)}
.v3-editor-area{flex:1;position:relative;overflow:hidden;min-height:140px}
.v3-editor-textarea{
  width:100%;height:100%;
  background:transparent;color:var(--text);
  border:0 solid transparent;resize:none;
  box-sizing:border-box;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:13px;line-height:1.7;
  letter-spacing:0;
  padding:16px 20px;
  margin:0;
  white-space:pre-wrap;word-wrap:break-word;word-break:normal;
  overflow:auto;
  tab-size:2;-moz-tab-size:2;
  caret-color:var(--accent);
}
.v3-editor-textarea:focus{outline:none}
.v3-editor-textarea::placeholder{color:var(--muted2)}

/* Editor bar: 2-layer structure (actions row + mode-meta row).
 * Desktop collapses to a single row visually since v3-bar-meta is empty. */
.v3-editor-bar{background:rgba(255,255,255,0.02);border-top:1px solid var(--border);padding:8px 16px;display:flex;flex-direction:column;gap:6px;flex:none}
.v3-bar-row{display:flex;align-items:center;gap:10px;width:100%}
.v3-bar-meta{display:none} /* desktop: meta row hidden, mobile mode switch lives in topbar/elsewhere */
/* Mode switcher chips (Console / Résultat) — desktop-hidden, shown on mobile */
.v3-mode-switch{display:none}
.v3-btn-run{background:var(--accent2);color:#042418;border:none;padding:7px 16px;border-radius:6px;font-weight:800;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:32px}
.v3-btn-run:hover{filter:brightness(1.08)}
.v3-btn-hint{background:transparent;border:1px solid var(--border2);color:var(--muted);padding:6px 12px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;min-height:32px}
.v3-btn-hint:hover{color:var(--text);border-color:var(--accent)}
.v3-live-tag{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.v3-live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent2);animation:v3pulse 2s infinite}
@keyframes v3pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* Schéma / Brief panels (hidden by default) */
.v3-work-panel{display:none;flex:1;overflow:auto;padding:18px;background:var(--surface);color:var(--muted);font-size:12.5px;line-height:1.6}
.v3-work-panel.active{display:block}

/* Results */
.v3-result{flex:1;overflow:hidden;display:flex;flex-direction:column;background:var(--surface);min-height:120px;border-top:1px solid var(--border2)}
.v3-result.error{border-top:2px solid var(--danger)}
.v3-result-h{padding:10px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);flex:none;background:var(--surface);position:sticky;top:0;z-index:3;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.v3-result-h .v3-count{color:var(--accent2);font-weight:800;text-transform:none;font-size:11px;letter-spacing:0}
.v3-result-body{flex:1;overflow:auto;padding:8px 14px 14px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.v3-result table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
.v3-result th{text-align:left;padding:9px 12px;background:var(--surface2);border-bottom:1px solid var(--border2);color:var(--accent);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0}
.v3-result td{padding:8px 12px;border-bottom:1px solid var(--border);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:12px}
.v3-result tr:hover td{background:rgba(124,108,255,0.05)}

.v3-result-empty{padding:40px 20px;text-align:center;color:var(--muted2);font-size:12px}
.v3-result-error{padding:16px 18px;color:var(--danger);font-family:'JetBrains Mono',monospace;font-size:12px;white-space:pre-wrap}

/* Validate bar */
.v3-validate-bar{padding:14px 20px;background:var(--surface);border-top:1px solid var(--border2);display:flex;align-items:center;gap:14px;flex:none}
.v3-val-msg{flex:1;font-size:12px;color:var(--muted)}
.v3-val-msg strong{color:var(--accent2)}
.v3-btn-validate{background:var(--accent);color:#fff;border:none;padding:9px 20px;border-radius:8px;font-weight:800;font-size:13px;cursor:pointer;letter-spacing:-.01em;min-height:38px}
.v3-btn-validate:hover{filter:brightness(1.1)}
.v3-btn-validate[disabled]{opacity:.5;cursor:not-allowed}

/* SQL help button */
.v3-btn-sql-help{background:transparent;border:1px solid var(--border2);color:var(--muted);padding:6px 12px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;min-height:32px}
.v3-btn-sql-help:hover{color:var(--text);border-color:var(--accent)}

/* SQL help overlay */
.v3-sql-help-overlay{position:absolute;bottom:calc(100% + 6px);left:0;right:0;z-index:200;background:#0F1419;border:1px solid var(--border2);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.6);overflow:hidden}
.v3-sql-help-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2)}
.v3-sql-help-close{background:transparent;border:none;color:var(--muted);font-size:16px;cursor:pointer;line-height:1;padding:0 2px}
.v3-sql-help-close:hover{color:var(--text)}
.v3-sql-help-snippets{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px}
.v3-snippet{background:var(--surface2);border:1px solid var(--border2);color:var(--accent);padding:5px 10px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:11px;cursor:pointer;white-space:nowrap}
.v3-snippet:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Make editor-wrap position:relative so overlay anchors correctly */
.v3-editor-wrap{position:relative}

/* ── Mobile SQL token bar (tap-insert keywords) ──────────────── */
.v3-tokenbar{display:none}
@media (max-width:900px){
  .v3-tokenbar{
    display:flex;gap:6px;
    padding:6px 8px;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    background:var(--surface2);
    border-bottom:1px solid var(--border);
    flex:none;
    scrollbar-width:none;
  }
  .v3-tokenbar::-webkit-scrollbar{display:none}
  .v3-token{
    flex:none;
    background:var(--surface3);
    border:1px solid var(--border2);
    color:var(--accent);
    font-family:'JetBrains Mono',monospace;
    font-size:12px;font-weight:700;
    padding:7px 11px;
    border-radius:6px;
    cursor:pointer;
    white-space:nowrap;
    line-height:1;
    min-height:32px;
    transition:background .12s,border-color .12s;
  }
  .v3-token:active,.v3-token.is-pressed{background:var(--accent);color:#fff;border-color:var(--accent)}
  .v3-token-op{color:var(--accent2);min-width:36px;text-align:center;padding:7px 8px}
}

/* ── Syntax-highlight overlay ───────────────────────────────── */
/* The highlight div sits BEHIND the transparent textarea */
.v3-editor-highlight{
  position:absolute;top:0;left:0;right:0;bottom:0;
  width:100%;height:100%;
  border:0 solid transparent;
  box-sizing:border-box;
  padding:16px 20px;
  margin:0;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:13px;line-height:1.7;
  letter-spacing:0;
  white-space:pre-wrap;word-wrap:break-word;word-break:normal;
  overflow:hidden;pointer-events:none;z-index:1;
  color:var(--text);
  tab-size:2;-moz-tab-size:2;
}
/* Textarea must be transparent and sit on z-index:2 above highlight layer */
.v3-editor-textarea{
  position:relative;z-index:2;
  background:transparent !important;
  color:transparent;
  caret-color:var(--accent);
}

/* Token colours — CK Labs dark palette */
:root{
  --hl-kw:      #cba6f7;
  --hl-fn:      #89b4fa;
  --hl-str:     #a6e3a1;
  --hl-num:     #fab387;
  --hl-comment: #6c7086;
  --hl-table:   #f4a261;
  --hl-op:      #94e2d5;
  --hl-star:    #f4a261;
}
.hl-kw     { color:var(--hl-kw) }
.hl-fn     { color:var(--hl-fn) }
.hl-str    { color:var(--hl-str) }
.hl-num    { color:var(--hl-num) }
.hl-comment{ color:var(--hl-comment);font-style:italic }
.hl-table  { color:var(--hl-table);  text-decoration:underline;text-decoration-color:rgba(244,162,97,.3) }
.hl-op     { color:var(--hl-op) }
.hl-star   { color:var(--hl-star);   font-weight:700 }

/* ── Autocomplete dropdown ──────────────────────────────────── */
.v3-ac-dropdown{
  position:absolute;
  background:#0F1829;border:1px solid var(--accent);
  border-radius:8px;max-height:200px;overflow-y:auto;
  z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.6);
  min-width:200px;display:none;
}
.v3-ac-dropdown.open{ display:block }
.v3-ac-item{
  padding:6px 12px;font-size:12px;
  font-family:'JetBrains Mono',monospace;
  cursor:pointer;display:flex;align-items:center;gap:8px;
  color:var(--text);
}
.v3-ac-item:hover,.v3-ac-item.selected{ background:rgba(59,130,246,.15);color:#fff }
.v3-ac-tag{
  font-size:9px;padding:1px 5px;border-radius:3px;
  font-weight:700;text-transform:uppercase;letter-spacing:.5px;flex:none;
}
.v3-ac-tag-kw  { background:rgba(203,166,247,.2);color:var(--hl-kw) }
.v3-ac-tag-fn  { background:rgba(137,180,250,.2);color:var(--hl-fn) }
.v3-ac-tag-tbl { background:rgba(244,162,97,.2); color:var(--hl-table) }
.v3-ac-tag-col { background:rgba(166,227,161,.2);color:var(--hl-str) }

/* ── Inline schema widget (above editor) ────────────────────── */
.v3-inline-schema{
  border-bottom:1px solid var(--border);
  background:#090e1c;
}
.v3-inline-schema-toggle{
  width:100%;background:transparent;border:none;
  padding:8px 16px;text-align:left;cursor:pointer;
  font-size:11px;font-weight:700;color:var(--muted2);
  display:flex;align-items:center;gap:8px;
  letter-spacing:.04em;
}
.v3-inline-schema-toggle:hover{ color:var(--text) }
.v3-inline-schema-count{
  margin-left:auto;font-size:10px;font-weight:400;
  background:rgba(59,130,246,.15);color:var(--accent);
  padding:1px 7px;border-radius:10px;
}
.v3-inline-schema-body{
  display:none;
  padding:8px 16px 12px;
  display:none;
  gap:12px;flex-wrap:wrap;
}
.v3-inline-schema.open .v3-inline-schema-body{ display:flex }
.v3-inline-schema-tbl{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:6px;padding:6px 10px;min-width:130px;
}
.v3-inline-schema-tname{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;
  font-weight:700;color:var(--accent);margin-bottom:4px;
}
.v3-inline-schema-cols{
  display:flex;flex-wrap:wrap;gap:4px;
}
.v3-inline-schema-cols code{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--muted);background:rgba(255,255,255,.05);
  padding:1px 5px;border-radius:3px;
}

/* Schema panel styles */
.v3-schema-intro{font-size:11px;color:var(--muted2);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.v3-schema-table{margin-bottom:8px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.v3-schema-table-header{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--surface2);cursor:pointer;user-select:none;font-size:12.5px;font-weight:700}
.v3-schema-table-header:hover{background:rgba(59,130,246,.1)}
.v3-schema-arrow{font-size:9px;color:var(--muted);transition:transform .2s;display:inline-block}
.v3-schema-table.open .v3-schema-arrow{transform:rotate(90deg)}
.v3-schema-count{margin-left:auto;font-size:10px;font-weight:400;color:var(--muted2)}
.v3-schema-body{display:none;background:var(--surface);border-top:1px solid var(--border)}
.v3-schema-table.open .v3-schema-body{display:block}
.v3-schema-cols{list-style:none;margin:0;padding:8px 12px 10px 12px}
.v3-schema-cols li{padding:3px 0;font-size:11.5px;color:var(--muted)}
.v3-schema-cols code{font-family:'JetBrains Mono',monospace;color:var(--text);font-size:11px}

/* Sample preview (first 5 rows) */
.v3-schema-sample{padding:4px 12px 12px;border-top:1px dashed var(--border)}
.v3-schema-sample-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);margin:8px 0 6px}
.v3-sample-wrap{overflow-x:auto;background:#0b1020;border:1px solid var(--border);border-radius:6px}
.v3-sample-tbl{width:100%;border-collapse:collapse;font-family:'JetBrains Mono',monospace;font-size:11px}
.v3-sample-tbl th{text-align:left;padding:6px 8px;background:var(--surface2);color:var(--accent);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border2);white-space:nowrap}
.v3-sample-tbl td{padding:5px 8px;color:var(--text);border-bottom:1px solid var(--border);white-space:nowrap}
.v3-sample-tbl tr:last-child td{border-bottom:none}
.v3-sample-empty{padding:8px 0;font-size:11px;color:var(--muted2);font-style:italic}