/* ============================================================
   Layout — app shell (topbar + dark sidebar + content),
   page scaffolding, auth pages, stub pages.
   ============================================================ */

/* ---------- App shell ---------- */
body.app-page{overflow:hidden}
.app{display:flex;flex-direction:column;height:100vh}
.topbar{height:56px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 20px;flex:none;z-index:40}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.02em;text-decoration:none;color:var(--ink,#1f2123)}
.brand-wordmark{display:block;height:18px;width:auto}
.brand-logo{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#0e1b2c 20%,#08d2ae 130%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800}
.topbar-divider{width:1px;height:22px;background:var(--border)}
.topbar-product{font-size:13.5px;color:#4a5157;display:flex;align-items:center;gap:7px;font-weight:500}
.topbar-product .spark{color:var(--teal-ink)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.lang{font-size:13px;font-weight:600;color:var(--secondary-foreground);display:flex;gap:8px;align-items:center;height:34px;padding:0 10px;border-radius:8px}
.lang:hover{background:var(--muted);color:var(--foreground)}
.avatar-xs{width:24px;height:24px;font-size:9.5px}
.avatar-btn{border-radius:999px}
.shell{display:flex;flex:1;min-height:0}

/* ---------- Sidebar ---------- */
.sidebar{width:240px;flex:none;background:var(--sidebar);color:var(--sidebar-fg);display:flex;flex-direction:column;padding:14px 10px;gap:2px;overflow-y:auto;scrollbar-gutter:stable both-edges}
.side-label{font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--sidebar-muted);padding:14px 12px 6px}
.side-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;color:var(--sidebar-fg);font-weight:500;font-size:13.5px;width:100%;text-align:left;position:relative;text-decoration:none;opacity:.8}
.side-item:hover{background:rgba(255,255,255,.06);opacity:1}
.side-item.active{background:var(--sidebar-active);font-weight:600;opacity:1}
.side-item.active::before{content:'';position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--teal)}
.side-item svg{color:var(--sidebar-muted)}
.side-item.active svg{color:var(--teal)}
.side-sep{height:1px;background:var(--sidebar-border);margin:12px 8px}
.side-sub{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 12px;border-radius:8px;font-size:13px;color:var(--sidebar-muted);overflow:hidden;text-decoration:none}
.side-sub:hover{background:rgba(255,255,255,.06);color:var(--sidebar-fg)}
.side-sub .dot{width:5px;height:5px;border-radius:99px;background:var(--sidebar-muted);flex:none}
.side-sub span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-sub.active{color:var(--sidebar-fg);font-weight:600;background:var(--sidebar-active)}
.side-sub.active .dot{background:var(--teal)}
.side-footer{margin-top:auto;padding:12px;border-top:1px solid var(--sidebar-border);display:flex;align-items:center;gap:10px;width:100%;text-align:left}
.side-lang{color:var(--sidebar-muted);padding:14px 0 0}
.side-lang .lang-seg{display:flex;flex:1;background:rgba(255,255,255,.06);border-radius:8px;padding:3px;gap:2px}
.side-lang .lang-seg button{flex:1;height:26px;border-radius:6px;font-size:12px;font-weight:600;color:var(--sidebar-muted)}
.side-lang .lang-seg button:hover{color:var(--sidebar-fg)}
.side-lang .lang-seg button.on{background:rgba(255,255,255,.14);color:var(--sidebar-fg)}
.side-footer .sf-n{font-size:12.5px;font-weight:600;color:var(--sidebar-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-footer .sf-e{font-size:11px;color:var(--sidebar-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-footer .avatar{width:30px;height:30px;font-size:11px}

/* ---------- Main / page ---------- */
.main{flex:1;min-width:0;display:flex;min-height:0}
.content{flex:1;min-width:0;overflow-y:auto;scroll-behavior:smooth}
.page{padding:32px 24px 72px;width:100%}
.page-narrow{max-width:1032px;margin:0 auto}
.builder-band{margin:-32px -24px 20px;padding:12px 24px 14px;background:var(--surface);border-bottom:1px solid var(--border)}
.builder-band .crumbs{margin-bottom:10px}
.crumbs{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--secondary-foreground);margin-bottom:14px}
.crumbs a{color:var(--secondary-foreground);text-decoration:none;display:flex;align-items:center;gap:6px}
.crumbs a:hover{color:var(--foreground);text-decoration:underline}
.crumbs .sep{color:var(--border-strong)}
.crumbs .here{color:var(--foreground);font-weight:600}
.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.page-head-bar{margin:-32px -24px 24px;padding:12px 24px;background:var(--surface);border-bottom:1px solid var(--border);align-items:center}
.page-title{font-size:16px;font-weight:600;line-height:22px;letter-spacing:-.01em}
.page-sub{color:var(--secondary-foreground);margin-top:5px;font-size:14px;max-width:640px;line-height:1.5}
.page-meta{display:flex;align-items:center;gap:8px;row-gap:4px;margin-top:8px;font-size:12px;color:#4a5157;flex-wrap:wrap}
.page-meta .num{white-space:nowrap}
.page-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}

/* ---------- Page transitions (cross-document view transitions) ----------
   Each nav tab is a separate HTML page; without this every switch repaints
   from a blank page. The shell (topbar + sidebar) gets its own named
   transition group so it stays put, and only the content area fades. */
@view-transition{navigation:auto}
.topbar{view-transition-name:topbar}
.sidebar{view-transition-name:sidebar}
.content{view-transition-name:content}
/* Chrome regions swap instantly — a crossfade on identical pixels reads as
   flicker; showing only the new snapshot keeps them rock-steady. */
::view-transition-old(topbar),::view-transition-old(sidebar),::view-transition-old(root){animation:none;opacity:0}
::view-transition-new(topbar),::view-transition-new(sidebar),::view-transition-new(root){animation:none}
::view-transition-old(content){animation:none;opacity:0}
::view-transition-new(content){animation:vt-in .18s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}

/* Entrance fade for page content on every load. Pages block their first
   paint until the shell is mounted (link rel="expect"), and Chrome holds
   the old page's pixels until then — so navigation reads as: stable frame,
   content fades in. Works even where cross-document transitions don't. */
.page{animation:vt-in .18s cubic-bezier(.2,.7,.2,1) both}

@media(prefers-reduced-motion:reduce){
  .page{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---------- Auth pages ---------- */
body.auth-page{overflow:auto}
.auth{display:flex;min-height:100vh}
.auth-brand{width:44%;min-width:420px;background:var(--sidebar);color:var(--sidebar-fg);display:flex;flex-direction:column;padding:44px 48px;position:relative;overflow:hidden}
.auth-brand .brand{color:#fff}
.auth-brand-mid{margin:auto 0;position:relative;z-index:1;max-width:420px}
.auth-tag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.auth-h{font-size:30px;font-weight:750;letter-spacing:-.025em;line-height:1.2;color:#fff}
.auth-p{font-size:14px;color:var(--sidebar-muted);line-height:1.65;margin-top:14px}
.auth-points{margin-top:28px;display:flex;flex-direction:column;gap:13px}
.auth-point{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:#c8cacc;line-height:1.5}
.auth-point .pi{width:26px;height:26px;border-radius:8px;background:rgba(8,210,174,.12);color:var(--teal);display:flex;align-items:center;justify-content:center;flex:none}
.auth-foot{font-size:11.5px;color:var(--sidebar-muted);position:relative;z-index:1}
.auth-glow{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(8,210,174,.14),transparent 65%);bottom:-220px;right:-160px;pointer-events:none}
.auth-form-side{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--background)}
.auth-card{width:400px;max-width:100%}
.auth-card h1{font-size:22px;font-weight:700;letter-spacing:-.02em}
.auth-card .sub{font-size:13.5px;color:var(--muted-foreground);margin:7px 0 26px;line-height:1.5}
.auth-alt{font-size:13px;color:var(--muted-foreground);text-align:center;margin-top:22px}
.auth-alt a{color:var(--foreground);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:40px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:7px;color:var(--muted-foreground);display:flex;align-items:center;justify-content:center}
.pw-eye:hover{background:var(--muted);color:var(--foreground)}
.demo-hint{display:flex;gap:9px;align-items:flex-start;background:var(--teal-muted);border:1px solid var(--teal-border);border-radius:9px;padding:10px 12px;font-size:12px;color:var(--teal-deep);line-height:1.55;margin-top:18px}
.demo-hint svg{flex:none;margin-top:1px;color:var(--teal-ink)}
@media(max-width:960px){.auth-brand{display:none}}

/* ---------- Stub pages ---------- */
.stub-note{display:inline-flex;align-items:center;gap:6px;margin-left:10px;vertical-align:3px}
/* ---------- AI chat (shadcn-style) ---------- */
[data-page="chat"] .content{overflow:hidden}
[data-page="chat"] .page{height:100%;padding:0;display:flex}
.chat-wrap{display:flex;flex-direction:column;height:100%;width:100%}
.chat-scroll{flex:1;overflow-y:auto;min-height:0}
.chat-col{max-width:720px;margin:0 auto;padding:32px 24px 8px;width:100%}

/* Empty state — one centered stack: mark, greeting, composer, suggestions */
.chat-empty{display:flex;align-items:center;justify-content:center;height:100%;padding:24px}
.chat-empty-inner{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center;text-align:center}
.chat-mark{width:44px;height:44px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-xs);display:flex;align-items:center;justify-content:center;color:var(--teal-ink);margin-bottom:20px}
.chat-mark svg{width:20px;height:20px}
.chat-empty h1{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:36px}
.chat-empty .chat-sub{font-size:14px;color:var(--secondary-foreground);margin-top:10px;line-height:1.6;max-width:440px}

/* Shared input group (composer + chips + disclaimer) — lives centered in the
   empty state, moves into the bottom dock once the conversation starts */
.chat-io{width:100%;display:flex;flex-direction:column;margin-top:28px}
.chat-io .composer{order:1}
.chat-io .chat-chips{order:2;margin-top:16px}
.chat-io .chat-disclaimer{order:3}
.chat-dock{flex:none;padding:0 24px 14px}
.chat-dock-inner{max-width:720px;margin:0 auto}
.chat-dock .chat-io{margin-top:0}
.chat-dock .chat-chips{order:0;margin:0 0 12px}

/* Suggestion chips — quiet outline pills */
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chat-chip{border:1px solid var(--border);border-radius:999px;background:var(--surface);padding:8px 14px;font-size:14px;font-weight:500;color:var(--secondary-foreground);box-shadow:var(--shadow-xs);transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.chat-chip:hover{background:var(--muted);color:var(--foreground)}

/* Composer */
.composer{border:1px solid var(--input);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm);transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.composer:focus-within{border-color:var(--border-strong);box-shadow:var(--shadow-md),0 0 0 4px rgb(31 33 35 / .04)}
.composer textarea{display:block;width:100%;border:0;outline:0;resize:none;background:transparent;padding:14px 16px 4px;font-size:14px;line-height:21px;max-height:147px;color:var(--foreground);text-align:left}
.composer textarea::placeholder{color:var(--secondary-foreground)}
.composer-row{display:flex;align-items:center;padding:8px 10px 10px 16px}
.composer-hint{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--secondary-foreground)}
.composer-send{margin-left:auto;width:34px;height:34px;border-radius:999px;background:var(--primary);color:var(--primary-foreground);display:flex;align-items:center;justify-content:center;transition:background var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.composer-send:hover:not(:disabled){background:var(--primary-hover);transform:scale(1.05)}
.composer-send:disabled{opacity:.35;cursor:default}
.chat-disclaimer{font-size:12px;color:var(--secondary-foreground);text-align:center;margin-top:12px}

/* Thread */
.chat-thread{display:flex;flex-direction:column;gap:20px;padding-bottom:16px}
.msg-user{align-self:flex-end;max-width:75%;background:var(--muted);border-radius:16px;border-bottom-right-radius:6px;padding:10px 16px;font-size:14px;line-height:21px;white-space:pre-wrap}
.msg-ai{display:flex;gap:12px;align-items:flex-start}
.msg-ai .ai-av{width:28px;height:28px;flex:none;border-radius:999px;border:1px solid var(--teal-border);background:var(--teal-muted);color:var(--teal-ink);display:flex;align-items:center;justify-content:center;margin-top:4px}
.msg-ai .ai-av svg{width:13px;height:13px}
.msg-ai .ai-body{flex:1;min-width:0;font-size:14px;line-height:23px;padding-top:6px}
.ai-body p+p{margin-top:10px}
.ai-body ul{margin:10px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ai-body ul+p{margin-top:10px}
.ai-body li{display:flex;gap:10px}
.ai-body li::before{content:'';width:5px;height:5px;border-radius:99px;background:var(--border-strong);flex:none;margin-top:9px}
.msg-in{animation:vt-in .18s var(--ease-out) both}

/* Typing indicator */
.typing{display:inline-flex;gap:4px;padding:8px 0}
.typing i{width:6px;height:6px;border-radius:99px;background:var(--muted-foreground);animation:typing-dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing-dot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.kpi-band{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}