/* The chart builder and "Create with AI", in the new style: warm solid surfaces, thin borders, rounded shapes, serif titles, mono labels, purple accent. */
html.proto-v2 body .chartb-overlay{ background:var(--bg); }
html.proto-v2 body .chartb-topbar{ padding:14px 22px; background:var(--surface); border:1px solid var(--border); border-radius:16px; }
html.proto-v2 body .chartb-title{ font-family:var(--font-serif); font-variation-settings:'opsz' 28,'SOFT' 100,'WONK' 0; font-optical-sizing:none; font-weight:450; font-size:24px; letter-spacing:-.01em; color:var(--text); }
html.proto-v2 body .chartb-sidebar{ background:var(--surface); border-right:1px solid var(--border); }
html.proto-v2 body .chartb-section{ border-color:var(--border); }
html.proto-v2 body .chartb-section-head{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); }
html.proto-v2 body .chartb-field-label{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--text-dim); }
html.proto-v2 body .chartb-dropdown-btn{ border-radius:10px; background:var(--v2-input-bg); border:1px solid var(--v2-line-strong); color:var(--text); }
html.proto-v2 body .chartb-dropdown-btn:hover{ border-color:var(--v2-ink); }
html.proto-v2 body .chartb-canvas{ background:var(--surface-2); }
html.proto-v2 body .chartb-canvas-head{ border-bottom:1px solid var(--border); background:transparent; }
html.proto-v2 body .chartb-preview-label{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); }
html.proto-v2 body .chartb-preview-card{ border-radius:16px; }
html.proto-v2 body .chartb-preview-move-handle, html.proto-v2 body .chartb-preview-resize-handle{ background:var(--surface); border:1px solid var(--border); color:var(--text-muted); box-shadow:none; }
html.proto-v2 body .chartb-ai-row{ display:flex; align-items:center; gap:10px; margin:14px; padding:12px 14px; border:1px solid var(--lime); border-radius:14px; background:var(--lime-wash); color:var(--lime-text); font-weight:600; font-size:13.5px; cursor:pointer; }
html.proto-v2 body .chartb-ai-row:hover{ background:var(--lime); color:#fff; }
html.proto-v2 body .chartb-ai-row svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---- Create with AI window ---- */
.cwai-overlay{ position:fixed; inset:0; z-index:9800; display:none; place-items:center; padding:20px; background:rgba(20,14,40,.5); }
.cwai-overlay.open{ display:grid; }
.cwai-window{ display:grid; grid-template-columns:minmax(0,1fr) 360px; width:min(1080px,100%); height:min(720px,100%); overflow:hidden; border:1px solid var(--border); border-radius:22px; background:var(--surface); color:var(--text); }
.cwai-chat{ display:flex; flex-direction:column; min-width:0; min-height:0; border-right:1px solid var(--border); }
.cwai-head{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); }
.cwai-head-text{ display:flex; flex-direction:column; gap:2px; flex:1; }
.cwai-head-text b{ font-family:var(--font-serif); font-variation-settings:'opsz' 28,'SOFT' 100,'WONK' 0; font-optical-sizing:none; font-weight:450; font-size:19px; letter-spacing:-.01em; }
.cwai-head-text small{ font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); }
.cwai-close{ display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:9px; background:transparent; color:var(--text-dim); cursor:pointer; }
.cwai-close:hover{ background:var(--surface-2); color:var(--text); }
.cwai-close svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.cwai-messages{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:22px; }
.cwai-msg{ display:flex; max-width:86%; }
.cwai-msg.me{ align-self:flex-end; }
.cwai-bubble{ padding:11px 15px; border-radius:16px; font-size:14px; line-height:1.55; }
.cwai-msg.me .cwai-bubble{ background:var(--lime-wash); border-bottom-right-radius:6px; }
.cwai-msg.ai .cwai-bubble{ background:var(--surface-2); border-bottom-left-radius:6px; }
.cwai-examples{ display:flex; flex-wrap:wrap; gap:8px; padding:0 22px 12px; }
.cwai-examples button{ padding:8px 13px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-muted); font:inherit; font-size:12.5px; cursor:pointer; }
.cwai-examples button:hover{ border-color:var(--v2-ink); color:var(--text); }
.cwai-input{ display:flex; align-items:center; gap:10px; margin:0 18px 18px; padding:8px 8px 8px 16px; border:1px solid var(--v2-line-strong); border-radius:16px; background:var(--v2-input-bg); }
.cwai-input:focus-within{ border-color:var(--v2-ink); }
.cwai-input input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:14px; }
.cwai-send{ display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:50%; background:var(--v2-ink); color:var(--v2-on-ink); cursor:pointer; }
.cwai-send svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cwai-side{ display:flex; flex-direction:column; min-height:0; background:var(--surface-2); }
.cwai-side-head{ padding:18px 20px 12px; border-bottom:1px solid var(--border); }
.cwai-side-head b{ display:block; font-family:var(--font-serif); font-variation-settings:'opsz' 28,'SOFT' 100,'WONK' 0; font-optical-sizing:none; font-weight:450; font-size:20px; letter-spacing:-.01em; }
.cwai-side-head small{ font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); }
.cwai-overview{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:16px 18px; }
.cwai-empty{ display:flex; flex-direction:column; gap:6px; padding:18px; border:1px dashed var(--v2-line-strong); border-radius:14px; color:var(--text-muted); font-size:13px; line-height:1.5; }
.cwai-empty b{ color:var(--text); font-size:14px; }
.cwai-card{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.cwai-card-icon{ display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:10px; background:var(--lime-wash); color:var(--lime-text); font-weight:700; }
.cwai-card-icon svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cwai-card-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.cwai-card-text b{ font-size:14px; font-weight:600; }
.cwai-card-text small{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }
.cwai-card-x{ display:grid; place-items:center; width:26px; height:26px; border:0; border-radius:8px; background:transparent; color:var(--text-dim); cursor:pointer; }
.cwai-card-x:hover{ background:var(--surface-2); color:var(--text); }
.cwai-card-x svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.cwai-side-foot{ display:flex; gap:10px; padding:14px 18px 18px; border-top:1px solid var(--border); }
.cwai-side-foot .btn-primary-lime{ flex:1; padding:11px 14px; cursor:pointer; }
.cwai-side-foot .btn-primary-lime:disabled{ opacity:.45; cursor:default; }
.cwai-side-foot .btn-outline{ padding:11px 16px; cursor:pointer; }
@media (max-width:820px){ .cwai-window{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 260px; } .cwai-chat{ border-right:0; border-bottom:1px solid var(--border); } }

/* "Create with AI" in the chart builder: a card with a short line about what it does */
html.proto-v2 body .chartb-ai-row.chartb-ai-card{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; cursor:pointer; padding:14px 16px; }
.cb-ai-top{ display:flex; align-items:center; gap:8px; font-family:var(--font-serif); font-variation-settings:'opsz' 28,'SOFT' 100,'WONK' 0; font-size:17px; font-weight:450; color:var(--text); }
.cb-ai-text{ font-size:13px; line-height:1.45; font-weight:400; color:var(--text-muted); }
.cb-ai-go{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-size:13px; font-weight:600; color:var(--lime-text); }
.cb-ai-go svg{ width:14px; height:14px; }
html.proto-v2 body .chartb-ai-row.chartb-ai-card:hover{ background:var(--lime-wash); color:var(--text); border-color:var(--lime); } html.proto-v2 body .chartb-ai-row.chartb-ai-card:hover .cb-ai-text{ color:var(--text-muted); } html.proto-v2 body .chartb-ai-row.chartb-ai-card:hover .cb-ai-go{ color:var(--lime-text); }

/* Create with AI window: the right side is a picture of the dashboard being built */
.cwai-window{ grid-template-columns:minmax(0,1fr) minmax(380px,46%); }
.cwai-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cwai-tile{ display:flex; flex-direction:column; gap:8px; min-width:0; padding:12px 12px 10px; border:1px solid var(--border); border-radius:14px; background:var(--surface); } .cwai-tile.wide{ grid-column:1 / -1; }
.cwai-tile.is-new{ animation:cwaiIn .45s cubic-bezier(.2,.8,.3,1); } @keyframes cwaiIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }
.cwai-tile-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:6px; } .cwai-tile-title{ display:flex; flex-direction:column; gap:2px; min-width:0; } .cwai-tile-title b{ font-size:13px; font-weight:600; } .cwai-tile-title small{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }
.cwai-viz{ height:58px; } .cwai-viz svg{ display:block; width:100%; height:100%; overflow:visible; } .cwai-tile.wide .cwai-viz{ height:74px; }
.cwai-viz.is-stat{ position:relative; height:64px; } .cwai-stat{ position:absolute; left:0; top:0; font-family:var(--font-serif); font-variation-settings:'opsz' 36,'SOFT' 100,'WONK' 0; font-size:26px; letter-spacing:-.01em; } .cwai-viz.is-stat svg{ position:absolute; left:0; right:0; bottom:0; height:30px; opacity:.55; }
.cwai-tile.ghost{ height:96px; border-style:dashed; background:transparent; } .cwai-grid.is-ghost{ margin-top:4px; opacity:.6; }
.mv-line{ fill:none; stroke:var(--lime); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; } .mv-ghost{ fill:none; stroke:var(--text-dim); stroke-width:1.4; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; opacity:.6; }
.mv-fill{ fill:var(--lime-wash); stroke:none; } .mv-bar{ fill:var(--lime); } .mv-track{ fill:var(--surface-2); } .mv-cell{ fill:var(--surface-2); } .mv-track-s{ fill:none; stroke:var(--surface-2); stroke-width:8; stroke-linecap:round; } .mv-dot{ fill:var(--lime); }
.mv-seg{ fill:none; stroke-width:9; } .mv-seg.s0{ stroke:#5150f6; } .mv-seg.s1{ stroke:#7978f8; } .mv-seg.s2{ stroke:#a5a4fa; } .mv-seg.s3{ stroke:#d4d4fd; }
.mv-line.gauge{ stroke-width:8; }