/* Agent Console — AGENTCONSOLE-20260828
   Zelfstandige opmaak: geen aannames over de omringende site, zodat dezelfde
   console op slimflow.online én op ai.itlive.nl kan draaien. */

.cns{
  --cns-bg:#0F1424; --cns-bg2:#141B2F; --cns-fg:#E8ECF4; --cns-dim:#94A3B8;
  --cns-line:rgba(148,163,184,.16);
  display:flex; flex-direction:column;
  background:var(--cns-bg); color:var(--cns-fg);
  border:1px solid var(--cns-line); border-radius:14px; overflow:hidden;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px; line-height:1.65;
  box-shadow:0 18px 48px rgba(0,0,0,.35);
  max-width:100%;
}
.cns-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--cns-bg2);border-bottom:1px solid var(--cns-line)}
.cns-dot{width:10px;height:10px;border-radius:50%}
.cns-dot.r{background:#F43F5E}.cns-dot.y{background:var(--cns-accent2)}.cns-dot.g{background:var(--cns-accent)}
.cns-title{margin-left:10px;color:var(--cns-dim);font-size:12px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cns-status{flex:0 0 auto;font-size:11px;color:var(--cns-accent2);white-space:nowrap}

.cns-body{padding:16px 18px;min-height:300px;max-height:60vh;overflow-y:auto;overflow-x:hidden}
.cns-line{min-height:1.65em;white-space:pre-wrap;word-break:break-word}
.cns-prompt{color:var(--cns-accent);font-weight:700;margin-right:7px}
.cns-muted{color:var(--cns-dim)}
.cns-ok{color:#67E8F9}
.cns-fout{color:#FCA5A5}

/* Toolregel: laat zien WAT er draaide en hoe lang. Dat is het verschil met een
   gewone chat — je ziet dat er echt iets is opgezocht, niet alleen gepraat. */
.cns-tool{display:flex;align-items:center;gap:8px;margin:6px 0;padding:6px 10px;border-radius:8px;
  background:rgba(148,163,184,.07);border:1px solid var(--cns-line);font-size:12px;color:var(--cns-dim)}
.cns-tool b{color:var(--cns-fg);font-weight:600}
.cns-tool .cns-ms{margin-left:auto;opacity:.7;font-variant-numeric:tabular-nums}
.cns-tool.is-bezig{border-color:var(--cns-accent)}
.cns-tool.is-ok{border-color:rgba(34,211,238,.45)}
.cns-tool.is-fout{border-color:rgba(248,113,113,.45);color:#FCA5A5}
.cns-tool .cns-spin{width:9px;height:9px;border-radius:50%;background:var(--cns-accent2);animation:cnsBlip 1s ease-in-out infinite}
@keyframes cnsBlip{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.cns-tool .cns-spin{animation:none}}

.cns-foot{padding:12px 14px;border-top:1px solid var(--cns-line);background:rgba(20,27,47,.6)}
.cns-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.cns-chip{font:inherit;font-size:11.5px;line-height:1.35;text-align:left;padding:6px 12px;border-radius:99px;
  background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.28);color:#A5B4FC;cursor:pointer;transition:background .18s,color .18s}
.cns-chip:hover{background:rgba(99,102,241,.24);color:var(--cns-fg)}
.cns-input-wrap{display:flex;align-items:center;gap:8px;background:rgba(10,14,26,.65);
  border:1px solid rgba(99,102,241,.28);border-radius:10px;padding:8px 12px}
.cns-input-wrap:focus-within{border-color:var(--cns-accent);box-shadow:0 0 0 3px rgba(99,102,241,.16)}
.cns-input-wrap .cns-prompt{margin:0}
.cns-input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--cns-fg);font:inherit;padding:4px 0}
.cns-input::placeholder{color:#64748B}
.cns-input:disabled{opacity:.5}
.cns-send{flex:0 0 30px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:8px;cursor:pointer;font-size:16px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--cns-accent),var(--cns-accent2))}
.cns-send:disabled{opacity:.45;cursor:default}
.cns-cta{display:inline-block;margin-top:8px;padding:6px 14px;border-radius:8px;font-size:12px;text-decoration:none;
  background:rgba(34,211,238,.14);border:1px solid rgba(34,211,238,.4);color:#67E8F9}

@media (max-width:600px){
  .cns{font-size:12.5px}
  .cns-body{padding:13px 14px;min-height:260px}
  .cns-chip{font-size:10.5px;padding:5px 10px}
}