/* JO Verse AI Lab — layered on top of style.css/store.css's existing tokens
   (--bg-0/1/2, --border, --accent, --text-0/1/2, --font-display/--font-ui,
   --radius, --success, --accent-danger, --accent-rgb). No new color system,
   just a denser "developer tool" layout for this one page. */

/* #app is a fixed-height (100vh) flex column (style.css) with .topbar
   pinned at flex:0 0 auto — every other page's content lives in .store-page,
   which is the flex:1 1 auto + overflow-y:auto scroll region that makes the
   rest of the viewport scrollable. #val-shell replaces .store-page here (it
   needs a full-width hero, not .store-page's centered 1200px column), so it
   needs that same rule directly or nothing below the first screen scrolls. */
.val-shell{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;}

.val-hero{position:relative;overflow:hidden;padding:48px 32px;border-bottom:1px solid var(--border);}
.val-hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.7;}
.val-hero-inner{position:relative;z-index:1;max-width:760px;}
.val-hero-inner h1{font-family:var(--font-display);font-size:36px;margin:14px 0 8px;}
.val-hero-inner p{color:var(--text-1);font-size:15px;max-width:600px;}
.val-hero-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.val-hero-actions button{width:auto;padding:12px 22px;}

.val-body{display:grid;grid-template-columns:260px 1fr;gap:0;align-items:start;}
.val-sidebar{border-right:1px solid var(--border);padding:20px;min-height:60vh;background:var(--bg-1);}
.val-sidebar-section{margin-bottom:28px;}
.val-sidebar-head{display:flex;justify-content:space-between;align-items:center;}
.val-sidebar h3{font-family:var(--font-display);font-size:14px;margin:0 0 10px;color:var(--text-1);text-transform:uppercase;letter-spacing:.5px;}
.val-list{display:flex;flex-direction:column;gap:4px;}
.val-list-item{padding:8px 10px;border-radius:6px;font-size:13px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:6px;color:var(--text-1);}
.val-list-item:hover{background:var(--bg-2);}
.val-list-item.active{background:rgba(var(--accent-rgb),.15);color:var(--accent);}
.val-list-item .val-item-del{opacity:0;font-size:11px;color:var(--accent-danger);}
.val-list-item:hover .val-item-del{opacity:1;}
.val-list-empty{font-size:12px;color:var(--text-2);padding:6px 0;}

.val-main{padding:24px 28px;}
.val-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:20px;flex-wrap:wrap;}
.val-tab{background:none;border:none;color:var(--text-2);padding:10px 16px;font-family:var(--font-ui);font-size:13px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;}
.val-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.val-tool-body textarea, .val-tool-body input[type="text"]{
  width:100%;background:var(--bg-0);border:1px solid var(--border);color:var(--text-0);
  border-radius:6px;padding:12px;font-size:13px;font-family:var(--font-ui);box-sizing:border-box;
}
.val-tool-body label{display:block;font-size:12px;color:var(--text-2);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 6px;}

.val-editor-wrap{position:relative;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#0b0d12;}
.val-editor-wrap textarea{
  width:100%;min-height:220px;background:transparent;border:none;color:#e8e8ef;
  font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.6;padding:14px;box-sizing:border-box;resize:vertical;
}
.val-editor-wrap textarea:focus{outline:none;}
.val-code-block{
  background:#0b0d12;border:1px solid var(--border);border-radius:8px;padding:14px;
  font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.6;color:#e8e8ef;
  overflow-x:auto;white-space:pre;position:relative;
}
.val-code-actions{display:flex;gap:8px;margin-top:8px;}
.tok-keyword{color:#d4af37;font-weight:600;}
.tok-string{color:#7ee787;}
.tok-comment{color:#6b7182;font-style:italic;}
.tok-number{color:#79c0ff;}

.val-result-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-top:16px;}
.val-result-card h4{font-family:var(--font-display);margin:0 0 10px;font-size:15px;}
.val-issue-card{border:1px solid var(--border);border-left:3px solid var(--text-2);border-radius:6px;padding:12px 14px;margin-top:10px;}
.val-issue-card.severity-warning{border-left-color:#f2ce6f;}
.val-issue-card.severity-high{border-left-color:var(--accent-danger);}
.val-issue-card.severity-critical{border-left-color:var(--accent-danger);background:rgba(255,92,122,.06);}
.val-issue-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:6px;}
.val-disclaimer{font-size:11px;color:var(--text-2);margin-top:14px;padding-top:10px;border-top:1px dashed var(--border);}

.val-chat-log{display:flex;flex-direction:column;gap:14px;max-height:52vh;overflow-y:auto;padding:4px 2px;}
.val-chat-bubble{max-width:80%;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.6;}
.val-chat-bubble.user{align-self:flex-end;background:rgba(var(--accent-rgb),.15);color:var(--text-0);}
.val-chat-bubble.assistant{align-self:flex-start;background:var(--bg-2);border:1px solid var(--border);color:var(--text-0);}
.val-chat-bubble pre{margin:8px 0 0;}
.val-chat-input-row{display:flex;gap:8px;margin-top:14px;}
.val-chat-input-row textarea{min-height:52px;resize:none;}

.val-status-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-2);}
.val-typing-dots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:3px;animation:val-blink 1.2s infinite;}
.val-typing-dots span:nth-child(2){animation-delay:.2s;}
.val-typing-dots span:nth-child(3){animation-delay:.4s;}
@keyframes val-blink{0%,80%,100%{opacity:.2;}40%{opacity:1;}}

@media (max-width:860px){
  .val-body{grid-template-columns:1fr;}
  .val-sidebar{border-right:none;border-bottom:1px solid var(--border);min-height:auto;}
}

.store-theme .val-sidebar{background:rgba(255,255,255,.02);border-color:var(--sp-border);}
.store-theme .val-editor-wrap,.store-theme .val-code-block{background:#08090c;}
.store-theme .val-result-card,.store-theme .val-issue-card{background:var(--sp-card);border-color:var(--sp-border);}
.store-theme .val-chat-bubble.assistant{background:var(--sp-card);border-color:var(--sp-border);}