/* Kutup NQ interface. Tokens (fonts, palette, themes) come from /tokens.css. */
:root{
  --nq-bg:var(--bg); --nq-bg-secondary:var(--paper); --nq-bg-tertiary:var(--raised); --nq-surface:var(--raised);
  --nq-border:var(--line); --nq-border-hover:var(--line-2);
  --nq-text:var(--ink); --nq-text-secondary:var(--ink-2); --nq-text-muted:var(--ink-3);
  --nq-accent:var(--nq-t); --nq-accent-hover:var(--link-hover); --nq-ok:var(--ok); --nq-warn:var(--warn); --nq-error:var(--bad);
  --nq-radius:12px; --nq-radius-sm:8px; --nq-radius-xs:4px; --nq-transition:150ms ease;
  --nq-shadow-xs:0 1px 2px rgba(12,32,54,.12); --nq-shadow-sm:0 2px 6px rgba(12,32,54,.14); --nq-shadow-md:0 6px 18px rgba(12,32,54,.16); --nq-shadow-lg:0 14px 34px rgba(12,32,54,.22);
  --nq-glass-bg:color-mix(in srgb,var(--bg) 70%,transparent); --nq-ease:cubic-bezier(.16,1,.3,1);
  --nq-btn:#2E5A92; --nq-btn-ink:#fff; --nq-btn-hover:#1D4468;
  --text-2:var(--ink-2); --text-3:var(--ink-3); --font-mono:var(--f-mono);
}
:root[data-theme=dark]{--nq-btn:#9EC0EC;--nq-btn-ink:#0B1D30;--nq-btn-hover:#C3D8F3;--nq-shadow-md:0 6px 18px rgba(0,0,0,.4);--nq-shadow-lg:0 14px 34px rgba(0,0,0,.5)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--nq-btn:#9EC0EC;--nq-btn-ink:#0B1D30;--nq-btn-hover:#C3D8F3}}
body{font-family:var(--f-sans);font-size:15px;background:var(--bg);color:var(--ink)}

/* Tailwind colour utilities, re-pointed at theme tokens */
.border-border{border-color:var(--line)} .bg-canvas{background-color:var(--bg)} .bg-canvas-secondary{background-color:var(--paper)} .bg-canvas-tertiary{background-color:var(--raised)}
.bg-nq-accent{background-color:var(--nq-btn)} .hover\:bg-nq-accent-hover:hover,.hover\:bg-nq-accent\/90:hover{background-color:var(--nq-btn-hover)}
.bg-nq-accent\/10{background-color:color-mix(in srgb,var(--nq-t) 10%,transparent)} .border-nq-accent\/20{border-color:color-mix(in srgb,var(--nq-t) 24%,transparent)}
.bg-nq-error{background-color:var(--bad)} .bg-nq-ok{background-color:var(--ok)} .bg-nq-text-muted{background-color:var(--ink-3)}
.bg-nq-warn\/10{background-color:color-mix(in srgb,var(--warn) 12%,transparent)} .border-nq-warn\/20{border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.text-nq-accent{color:var(--nq-t)} .text-nq-ok{color:var(--ok)} .text-nq-text{color:var(--ink)} .text-nq-text-muted{color:var(--ink-3)} .text-nq-text-secondary{color:var(--ink-2)} .text-nq-warn{color:var(--warn)} .text-red-400{color:var(--bad)} .text-white{color:#fff}
.bg-white\/5{background-color:color-mix(in srgb,var(--ink) 6%,transparent)} .hover\:bg-white\/5:hover{background-color:color-mix(in srgb,var(--ink) 6%,transparent)} .hover\:bg-white\/10:hover{background-color:color-mix(in srgb,var(--ink) 10%,transparent)}
.hover\:border-border:hover{border-color:var(--line)} .hover\:border-border-hover:hover{border-color:var(--line-2)} .hover\:bg-canvas-tertiary:hover{background-color:var(--raised)}
.hover\:text-nq-accent:hover{color:var(--link-hover)} .hover\:text-nq-text:hover{color:var(--ink)}
.text-ink{color:var(--nq-btn-ink)} .bg-nq-surface{background-color:var(--raised)} .bg-nq-bg{background-color:var(--bg)}

/* ── sidebar ── */
.sidebar{background:var(--paper);border-right:1px solid var(--line)}
.nq-brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink)}
.nq-brand img{width:2rem;height:2rem;display:block}
.nq-brand b{font-weight:820;font-stretch:122%;font-size:1.15rem;letter-spacing:-.03em;line-height:1}
.nq-brand i{font-style:normal;font:600 .7rem var(--f-mono);color:var(--nq-t);border:1px solid color-mix(in srgb,var(--nq) 50%,transparent);border-radius:999px;padding:.12rem .5rem;margin-left:.2rem}
.new-chat{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;height:2.7rem;border-radius:999px;background:var(--nq-btn);color:var(--nq-btn-ink);font:640 .92rem var(--f-sans);font-stretch:106%;border:0;cursor:pointer;transition:background .15s,transform .15s}
.new-chat:hover{background:var(--nq-btn-hover);transform:translateY(-1px)}
.side-label{font:600 .68rem var(--f-mono);color:var(--ink-3);padding:0 .5rem;margin:.4rem 0 .5rem}
.session-entry{border:1px solid transparent}
.session-entry:hover{border-color:var(--line)}
.session-ring{flex:none;width:1.1rem;height:1.1rem;margin-top:.15rem;color:var(--nq)}
.side-foot{display:flex;align-items:center;gap:.5rem;padding:.75rem;border-top:1px solid var(--line);flex-wrap:wrap}
.side-foot a,.side-foot button{display:inline-flex;align-items:center;justify-content:center;height:2.1rem;padding:0 .8rem;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink-2);font:600 .76rem var(--f-mono);text-decoration:none;cursor:pointer}
.side-foot a:hover,.side-foot button:hover{border-color:var(--ink);color:var(--ink)}
.side-foot .back{margin-right:auto;font-family:var(--f-sans);font-size:.84rem;font-weight:600;font-stretch:104%}
.side-foot .lang a[aria-current=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.side-foot .lang{display:flex;gap:.25rem}
.side-foot .theme svg{width:1rem;height:1rem}

/* ── header ── */
.shell-header,.app-root header{background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--line)}
.header-title{display:flex;align-items:baseline;gap:.6rem}
.header-title h1{font-weight:760;font-stretch:112%;font-size:1rem;letter-spacing:-.01em}
.header-title span{font:500 .72rem var(--f-mono);color:var(--ink-3)}

/* ── welcome: a sonar for questions ── */
.welcome{width:100%;max-width:46rem;margin:0 auto;text-align:center}
.sonar{width:min(14.5rem,60vw);margin:0 auto 1rem;display:block;overflow:visible}
.sonar .r{fill:none;stroke:var(--line-2);stroke-width:1.2}
.sonar .r-a{stroke:var(--nq);stroke-width:1.6}
.sonar .ping{fill:none;stroke:var(--nq);stroke-width:1.6;transform-origin:160px 160px;animation:ping 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.sonar .ping.p2{animation-delay:1.8s}
.sonar .core{fill:var(--nq-btn)}
.sonar .qm{fill:none;stroke:var(--nq-btn-ink);stroke-width:2.6;stroke-linecap:round}
.sonar .src{font:600 14px var(--f-mono);fill:var(--ink-2);paint-order:stroke;stroke:var(--bg);stroke-width:4px}
.sonar .dot{fill:var(--paper);stroke:var(--nq);stroke-width:2.4}
.sonar .dot.d1{fill:var(--nq)}
@keyframes ping{0%{transform:scale(.25);opacity:.9}100%{transform:scale(1);opacity:0}}
.welcome-title{font-weight:800!important;font-stretch:118%;letter-spacing:-.028em;line-height:1.02!important;font-size:clamp(2rem,5vw,3.1rem)!important;margin:0 0 .8rem!important}
.welcome-sub{color:var(--ink-2);font-size:1.06rem;max-width:36ch;margin:0 auto 2rem;line-height:1.5}
.nq-locale{display:none}
.suggest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;text-align:left}
@media (max-width:640px){.suggest-grid{grid-template-columns:1fr}}
.suggestion-card{position:relative;display:flex;flex-direction:column;gap:.65rem;min-height:5.6rem;padding:.95rem 1.1rem;border:1px solid var(--line)!important;border-radius:var(--nq-radius)!important;background:var(--paper)!important;cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s!important}
.suggestion-card:hover{transform:translateY(-2px);border-color:var(--nq)!important;box-shadow:var(--nq-shadow-sm)}
.suggestion-card .cat{font:600 .68rem var(--f-mono);color:var(--ink-3);display:inline-flex;align-items:center;gap:.4rem}
.suggestion-card .cat::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--cc,var(--nq))}
.suggestion-card p{font-size:.98rem!important;line-height:1.35;font-weight:520;font-stretch:104%;color:var(--ink)!important}
[data-cat=RAG]{--cc:#5C86B8}[data-cat=ML]{--cc:var(--lab)}[data-cat=DataOps]{--cc:var(--forge)}[data-cat=OT]{--cc:#3B6497}[data-cat=Ar-Ge]{--cc:var(--glacier)}[data-cat=Kontrol]{--cc:var(--flow)}[data-cat="Ağ"]{--cc:var(--asp-blue)}
.welcome-meta{max-width:52ch!important;margin:1.8rem auto 0!important;font-size:.78rem!important;line-height:1.6!important;color:var(--ink-3)!important;letter-spacing:0!important;text-transform:none!important;font-family:var(--f-sans)!important}
.welcome-link{font-size:.82rem!important}

/* ── messages ── */
.chat-container{max-width:50rem!important}
.user-bubble{background:var(--nq-btn)!important;color:var(--nq-btn-ink)!important;border:0!important;border-radius:18px 18px 4px 18px!important;padding:.75rem 1.05rem!important;max-width:88%}
.user-bubble .message-time{color:color-mix(in srgb,var(--nq-btn-ink) 70%,transparent)!important}
.user-bubble p{color:inherit!important;font-size:.98rem!important;line-height:1.5}
.avatar{flex:none;width:2rem;height:2rem;margin-top:.15rem;display:block}
.nq-assistant-bubble{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;font-size:1rem;line-height:1.68;color:var(--ink)}
.nq-assistant-bubble.is-error{border-left:3px solid var(--bad)!important;padding-left:1rem!important}
.action-btn{border-radius:999px!important;border:1px solid var(--line)!important}
.action-btn:hover,.action-btn.active{border-color:var(--nq)!important;color:var(--nq-t)!important}
.source-panel{border:1px solid var(--line)!important;border-radius:var(--nq-radius)!important;background:var(--paper)!important;box-shadow:var(--nq-shadow-xs)}
.evidence-card{border:1px solid var(--line)!important;border-left:3px solid var(--nq)!important;border-radius:8px!important;background:var(--bg)!important}
.source-label{font-family:var(--f-mono)!important;text-transform:none!important;letter-spacing:0!important;font-size:.72rem!important}
.eq-bar{background:var(--line)!important} .eq-bar-fill{border-radius:3px}
.eq-metric{background:var(--bg)!important;border:1px solid var(--line)!important}
.eq-metric-label{text-transform:none!important;letter-spacing:0!important}

/* thinking: the sonar itself, only while a request is running */
.thinking-shell{display:flex;align-items:center;gap:1rem}
.thinking-bubble{display:flex;align-items:center;gap:.9rem;background:transparent!important;border:0!important;padding:0!important}
.pulse{position:relative;width:2.4rem;height:2.4rem;flex:none}
.pulse i{position:absolute;inset:0;border-radius:50%;border:1.6px solid var(--nq);opacity:0;animation:pulseRing 2.2s cubic-bezier(.2,.6,.3,1) infinite}
.pulse i:nth-child(2){animation-delay:.73s} .pulse i:nth-child(3){animation-delay:1.46s}
.pulse b{position:absolute;inset:.85rem;border-radius:50%;background:var(--nq-btn)}
@keyframes pulseRing{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1);opacity:0}}
.thinking-text{font:500 .78rem var(--f-mono)!important;color:var(--ink-3)!important;text-transform:none!important;letter-spacing:0!important}
@media (prefers-reduced-motion:reduce){.sonar .ping,.pulse i{animation:none!important}.pulse i{opacity:.5;transform:scale(.7)}.pulse i:nth-child(n+2){display:none}}

/* ── composer ── */
.composer-dock{background:var(--bg)!important;border-top:1px solid var(--line)!important}
.composer-shell{border:1.5px solid var(--line-2)!important;border-radius:22px!important;background:var(--paper)!important;box-shadow:var(--nq-shadow-sm);transition:border-color .16s,box-shadow .16s}
.composer-shell.focused,.composer-shell:focus-within{border-color:var(--nq)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--nq) 22%,transparent)}
.query-input:focus,.query-input:focus-visible{outline:none!important;box-shadow:none!important;border:0!important}
.query-input{color:var(--ink)!important;background:transparent!important;font:500 1rem/1.5 var(--f-sans)!important}
.query-input::placeholder{color:var(--ink-3)!important}
.send-button{background:var(--nq-btn)!important;color:var(--nq-btn-ink)!important;border-radius:50%!important}
.send-button:hover:not(:disabled){background:var(--nq-btn-hover)!important}
.send-button:disabled{opacity:.4}