/* The agent screen (/): three columns over the whole window. Uses the tokens from app.css. */

.agent-shell { height: 100vh; overflow: hidden; }
/* Column widths: --a-left and --a-pane are what the person dragged (set on <html> by App.razor's script); the limits
   are here, so a smaller window still fits: the menu 200–420 px, the conversation at least 360 px, the pane at least 380. */
.agent {
    display: flex; height: 100vh; --ease: cubic-bezier(.22, .8, .24, 1);
    --left-w: clamp(200px, var(--a-left, 264px), 420px);
    /* Not dragged: about half of what the menu leaves, so a narrower menu gives the pane more room too. */
    --pane: clamp(380px, var(--a-pane, min(calc((100vw - var(--left-w)) * .55), 1100px)), calc(100vw - var(--left-w) - 360px));
}
.agent > .a-left { width: var(--left-w); flex: none; }
.agent > .a-chat, .agent > .a-tool { flex: 1; }
html.a-left-hidden .agent { --left-w: 0px; }
html.a-left-hidden .agent > .a-left { display: none; }
/* The pane over the whole width: the conversation shrinks to nothing as the pane grows (so it slides), and comes back. */
html.a-pane-max .agent.pane-open { --pane: calc(100vw - var(--left-w)); }
html.a-pane-max .agent.pane-open > .a-chat { overflow: hidden; }
.a-max-off, html.a-pane-max .a-max-on { display: none; }
html.a-pane-max .a-max-off { display: contents; }
.a-max-on { display: contents; }

/* Drag handles: an 8 px grip on the line between two columns, a line in the accent colour on hover and while dragging. */
.a-split { flex: none; width: 0; position: relative; z-index: 6; }
.a-split::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; cursor: col-resize; touch-action: none; }
.a-split::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--accent); opacity: 0;
    transition: opacity .15s; pointer-events: none;
}
.a-split:hover::after, .a-split.dragging::after { opacity: 1; }
/* The pane's handle sits inside its (clipped) wrapper, on its left edge. */
.a-split.pane { position: absolute; left: 0; top: 0; bottom: 0; }
.a-split.pane::before { left: 0; width: 7px; }
.a-split.pane::after { left: 0; }
/* The menu hidden: a tab on the window's edge to drag it out again, or click. */
html.a-left-hidden .a-split.left::before { left: 0; width: 14px; }
html.a-left-hidden .a-split.left::after {
    opacity: 1; top: 50%; bottom: auto; height: 56px; margin-top: -28px; left: 3px; width: 5px; border-radius: 3px; background: var(--line-strong);
}
html.a-left-hidden .a-split.left:hover::after { background: var(--accent); }
/* While dragging: no animation (the columns follow the mouse), no text selection, the resize cursor everywhere. */
html.a-resizing, html.a-resizing * { cursor: col-resize !important; user-select: none !important; }
html.a-resizing .a-pane-wrap, html.a-resizing .a-pane { transition: none !important; }
.spinner.sm { width: 12px; height: 12px; border-width: 2px; }

/* ---- left ---- */
.a-left { background: var(--side-bg); color: var(--side-text); display: flex; flex-direction: column; padding: 16px 10px 12px; min-height: 0; }
.a-left .brand { padding: 2px 8px 14px; }
.a-new { justify-content: center; margin: 0 4px 14px; height: 36px; }
.a-sec { display: flex; flex-direction: column; gap: 1px; margin-bottom: 14px; min-height: 0; }
.a-sec.grow { flex: 1; }
/* The conversations take the room there is, and never less than about five of them: on a low window the skills give up
   their room first, and scroll. */
.a-tools { flex-shrink: 0; }
.a-history { flex: 1 0 200px; }
.a-side-skills { flex: 0 3 auto; min-height: 68px; overflow: hidden; }
.a-side-skills .a-sec-list { min-height: 0; flex: 0 1 auto; }
/* A section's heading folds it (App.razor: a class on <html> per section, remembered in this browser); a folded section
   is its heading only, and the others take its room. Without the conversations, skills and bots may grow. */
.a-fold {
    display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer;
    color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit;
}
.a-fold:hover { color: #cfdcdf; }
.a-fold-chev { color: #6f858b; transform: rotate(90deg); transition: transform .15s; }
html.a-folded-tools .a-tools > :not(.a-sec-head), html.a-folded-history .a-history > :not(.a-sec-head),
html.a-folded-history .a-find, html.a-folded-skills .a-side-skills > :not(.a-sec-head),
html.a-folded-bots .a-side-bots > :not(.a-sec-head) { display: none; }
html.a-folded-tools .a-tools .a-fold-chev, html.a-folded-history .a-history .a-fold-chev,
html.a-folded-skills .a-side-skills .a-fold-chev, html.a-folded-bots .a-side-bots .a-fold-chev { transform: none; }
html.a-folded-history .a-history, html.a-folded-skills .a-side-skills, html.a-folded-bots .a-side-bots { flex: none; min-height: 0; margin-bottom: 6px; }
html.a-folded-history:not(.a-folded-skills) .a-side-skills, html.a-folded-history:not(.a-folded-bots) .a-side-bots { flex: 1 1 auto; }
html.a-folded-history .a-side-skills .a-sec-list, html.a-folded-history .a-side-bots .a-sec-list { max-height: none; }
/* The inbox among the tools: amber with how many wait when something does (and on the heading while folded). */
.a-item.a-inbox { color: #fde3b0; }
.a-item.a-inbox svg { color: #fbbf24; opacity: 1; }
.a-item.a-inbox:hover { background: rgba(245, 158, 11, .14); color: #fff; }
.a-wait {
    flex: none; margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; text-align: center; font-size: 11px; font-weight: 600;
    letter-spacing: 0; background: rgba(245, 158, 11, .2); border: 1px solid rgba(245, 158, 11, .38); color: #fcd34d;
    font-variant-numeric: tabular-nums; text-decoration: none !important;
}
.a-tools-wait { display: none; }
html.a-folded-tools .a-tools-wait { display: inline-block; }
/* The conversations by when (I dag, I går, …), the time at the right: faint, and gone for the bin on hover. */
.a-when-head { font-size: 10.5px; color: #6f858b; padding: 8px 8px 3px; }
.a-when-head:first-child { padding-top: 0; }
.a-when { flex: none; margin-left: auto; font-size: 11px; color: #6f858b; font-variant-numeric: tabular-nums; }
.a-saved:hover .a-when, .a-saved.confirming .a-when { visibility: hidden; }
/* The conversations: their heading stays, the list scrolls under it (as Skills'). */
.a-sec-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; overscroll-behavior: contain; }
.a-sec-head { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6f858b; padding: 4px 8px 6px; display: flex; align-items: center; gap: 6px; }
.a-sec-head .badge { margin-left: auto; }
.a-count { margin-left: auto; font-size: 10.5px; letter-spacing: 0; color: #8aa0a5; background: rgba(255, 255, 255, .07); border-radius: 999px; padding: 1px 7px; }
/* Saved stays small however many there are (about six rows, then it scrolls); conversations get the rest. */
.a-sec-list {
    display: flex; flex-direction: column; gap: 1px; max-height: min(196px, 26vh); overflow-y: auto; overscroll-behavior: contain;
}
.a-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; color: var(--side-text); background: none; border: 0;
    font: 13px var(--sans); text-align: left; cursor: pointer; text-decoration: none !important; width: 100%; min-width: 0;
}
.a-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.a-item.on { background: var(--side-active); color: #fff; }
.a-item-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-item .dot { flex: none; }
.a-saved { position: relative; }
.a-saved .a-item { padding-right: 8px; }
.a-saved:hover .a-item { padding-right: 54px; }
.a-del {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px;
    border: 0; border-radius: 5px; background: none; color: #8aa0a5; cursor: pointer; opacity: 0; transition: opacity .15s, background-color .15s, color .15s;
}
.a-saved:hover .a-del, .a-del:focus-visible { opacity: 1; }
.a-del:hover { background: rgba(239, 68, 68, .18); color: #fca5a5; }
@media (hover: none) { .a-del { opacity: .6; } }
/* Naming a conversation: the pencil beside the bin, and the field that takes the row's place (or the title's). */
.a-ren {
    position: absolute; right: 28px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px;
    border: 0; border-radius: 5px; background: none; color: #8aa0a5; cursor: pointer; opacity: 0; transition: opacity .15s, background-color .15s, color .15s;
}
.a-saved:hover .a-ren, .a-ren:focus-visible { opacity: 1; }
.a-ren:hover { background: rgba(255, 255, 255, .1); color: #fff; }
@media (hover: none) { .a-ren { opacity: .6; } }
.a-rename {
    width: 100%; min-width: 0; height: 29px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--accent, #2dd4bf);
    background: rgba(255, 255, 255, .06); color: #fff; font: 13px var(--sans); outline: none;
}
.a-rename.top { width: min(520px, 50%); height: 32px; background: var(--bg); color: var(--text); font-weight: 600; font-size: 14px; }
.a-title-edit {
    display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; margin-left: -8px; border: 0; border-radius: 7px;
    background: none; color: inherit; font: inherit; font-weight: 600; cursor: text;
}
.a-title-edit:hover { background: var(--hover, rgba(127, 127, 127, .1)); }
.a-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-title-pen { flex: none; opacity: 0; color: var(--text-2); transition: opacity .15s; }
.a-title-edit:hover .a-title-pen, .a-title-edit:focus-visible .a-title-pen { opacity: 1; }
/* Deleting a conversation: the bin opens into yes / no (and pops back when left alone). */
.a-saved.confirming .a-item { padding-right: 60px; }
.a-confirm {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; overflow: hidden;
    width: 48px; animation: a-confirm-open .18s ease-out;
}
.a-confirm button {
    display: grid; place-items: center; width: 23px; height: 22px; flex: none; border: 0; border-radius: 5px; cursor: pointer;
    background: rgba(255, 255, 255, .08); color: #d5e1e3; transition: background-color .15s, color .15s;
}
.a-confirm-yes:hover { background: rgba(239, 68, 68, .3); color: #fecaca; }
.a-confirm-no:hover { background: rgba(255, 255, 255, .16); color: #fff; }
@keyframes a-confirm-open { from { width: 22px; opacity: .4; } to { width: 48px; opacity: 1; } }
.a-del.back { animation: a-del-back .22s ease-out; }
@keyframes a-del-back { from { opacity: 1; transform: translateY(-50%) scale(.5); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
/* Searching the conversations: a field under the heading, and where in what was said a hit is. */
.a-sec-icon {
    display: grid; place-items: center; width: 22px; height: 22px; flex: none; border: 0; border-radius: 5px; background: none; cursor: pointer;
    color: #6f858b; transition: background-color .15s, color .15s;
}
.a-sec-icon:hover { background: rgba(255, 255, 255, .08); color: #fff; }
/* The search field grows out of the magnifier, leftwards over the heading, and folds back into it. */
.a-find-head { position: relative; min-height: 32px; }
.a-find {
    position: absolute; right: 4px; top: 3px; height: 24px; width: 22px; display: flex; align-items: center; border-radius: 7px;
    background: transparent; overflow: hidden; transition: width .2s ease, background-color .2s ease;
}
.a-find.open { width: calc(100% - 8px); background: color-mix(in srgb, #fff 9%, var(--side-bg)); }
.a-find input {
    flex: 1; min-width: 0; width: 0; height: 100%; padding: 0 0 0 9px; border: 0; outline: none; background: none; color: #fff;
    font: 13px var(--sans); text-transform: none; letter-spacing: 0; opacity: 0; transition: opacity .15s ease;
}
.a-find:not(.open) input { padding: 0; }
.a-find.open input { opacity: 1; transition-delay: .08s; }
.a-find input::placeholder { color: #6f858b; }
.a-find input:hover, .a-find input:focus { border: 0; box-shadow: none; }   /* not the app's field look: the box is the field */
.a-snip { display: block; font-size: 11.5px; color: #7f9599; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.a-empty { font-size: 12.5px; color: #5f7479; padding: 2px 8px; }
.a-foot { border-top: 1px solid rgba(255, 255, 255, .07); padding: 12px 6px 0; display: flex; flex-direction: column; gap: 10px; }
.a-office { justify-content: center; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #e3ecee; }
.a-office:hover { background: rgba(255, 255, 255, .12); }
.theme-switch.light { margin-top: 0; }
.a-back { justify-content: center; margin: 0 4px 6px; background: rgba(34, 166, 195, .14); border-color: rgba(34, 166, 195, .35); color: #9be3f2; }
.a-back:hover { background: rgba(34, 166, 195, .24); }

/* ---- middle ---- */
.a-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; background: var(--bg); }
/* A tool in the middle (the price lookup): its page scrolls under the top bar, as the back office's pages do. */
.a-tool { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.a-tool-body { flex: 1; min-height: 0; overflow: auto; padding: 20px 28px 64px; }
.a-tool-body > * { max-width: 2400px; }   /* the tools use the width there is: a narrower menu gives the grids more room */
.a-tools .a-item svg { flex: none; opacity: .8; }
.a-top { height: 52px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.a-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-job {
    display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); max-width: 46%; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis; text-decoration: none !important;
}
.a-msgs { flex: 1; overflow-y: auto; min-height: 0; }
.a-msgs-inner { max-width: 860px; margin: 0 auto; padding: 24px 24px 32px; display: flex; flex-direction: column; gap: 18px; }

.a-msg { display: flex; gap: 12px; }
.a-msg.user { justify-content: flex-end; }
.a-bubble { background: var(--accent); color: #fff; padding: 10px 14px; border-radius: 14px 14px 4px 14px; max-width: 80%; white-space: pre-wrap; overflow-wrap: anywhere; }
.a-upload { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .85; margin-top: 4px; }
.a-avatar { width: 28px; height: 28px; flex: none; margin-top: 2px; }
.vgai-logo { display: block; flex: none; }
/* The eye sweeps along the front while VGAI works. */
.vgai-logo.scan .vgai-eye { animation: vgai-scan 1.5s ease-in-out infinite alternate; }
@keyframes vgai-scan { from { transform: translateX(-15px); } to { transform: translateX(15px); } }
.a-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* VGAI at work: what it does now (shimmering, with a clock), and its steps rolling up under it. */
.a-think { display: flex; flex-direction: column; gap: 6px; padding-top: 3px; min-height: 28px; }
.a-think-head { display: flex; align-items: center; gap: 8px; height: 24px; font-weight: 500; }
.a-think-clock { font: 12px var(--sans); color: var(--text-3); font-variant-numeric: tabular-nums; }
.a-think-head .btn { opacity: .55; transition: opacity .2s; }
.a-working:hover .a-think-head .btn, .a-think-head .btn:focus-visible { opacity: 1; }
/* The steps: at most four rows show; the older ones roll out at the top under a fade. A new row grows in at the bottom,
   so the ones above glide up instead of jumping. */
.a-reel {
    display: flex; flex-direction: column; justify-content: flex-end; max-height: 92px; overflow: hidden;
    border-left: 2px solid var(--line); padding-left: 12px; margin-left: 1px;
}
.a-reel.many { mask-image: linear-gradient(to bottom, transparent 0, #000 34px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px); }
.a-reel-step {
    flex: none; display: flex; align-items: center; gap: 8px; height: 23px; font-size: 13px; color: var(--text-3); white-space: nowrap; min-width: 0;
    animation: a-reel-in .45s var(--ease) both;
}
.a-reel-step.now { color: var(--text); }
.a-reel-step.err { color: var(--red); }
.a-reel-mark { width: 14px; flex: none; display: inline-flex; justify-content: center; }
.a-reel-step.done .a-reel-mark { color: var(--green); }
.a-reel-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.a-reel-note { flex: none; font-size: 12px; color: var(--text-3); }
.a-reel-note::before { content: "· "; }
.a-reel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.4s infinite; color: var(--accent); }
@keyframes a-reel-in { from { height: 0; opacity: 0; transform: translateY(10px); } to { height: 23px; opacity: 1; transform: none; } }
/* Text that's in progress: a light sweeping over it. */
.a-shimmer {
    background: linear-gradient(90deg, var(--text-3) 0%, var(--text-3) 35%, var(--text) 50%, var(--text-3) 65%, var(--text-3) 100%);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: a-shimmer 2.2s linear infinite;
}
@keyframes a-shimmer { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* What VGAI did, folded above its answer. */
.a-trace { font-size: 12.5px; color: var(--text-3); }
.a-trace > summary {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; cursor: pointer; user-select: none; list-style: none;
    border-radius: 6px; padding: 0 6px; margin-left: -6px; transition: background-color .15s, color .15s;
}
.a-trace > summary::-webkit-details-marker { display: none; }
.a-trace > summary:hover { background: var(--gray-soft); color: var(--text-2); }
.a-trace > summary svg:first-child { color: var(--green); }
.a-trace > summary svg:last-child { transition: transform .2s var(--ease); }
.a-trace[open] > summary svg:last-child { transform: rotate(90deg); }
.a-trace-steps { border-left: 2px solid var(--line); margin: 6px 0 4px 7px; padding: 2px 0 2px 14px; display: flex; flex-direction: column; gap: 8px; animation: a-rise .25s var(--ease) both; }
.a-trace-step { position: relative; }
.a-trace-step::before {
    content: ""; position: absolute; left: -19px; top: 6px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--green);
}
.a-trace-step.err::before { border-color: var(--red); }
.a-trace-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; color: var(--text-2); }
.a-trace-head b { font-weight: 600; color: var(--text); }
.a-trace-head svg { align-self: center; margin-right: -3px; color: var(--text-3); }
.a-trace-title { overflow-wrap: anywhere; }
.a-trace-err { color: var(--red); margin-top: 2px; }
.a-trace-sql > summary { cursor: pointer; user-select: none; width: fit-content; margin-top: 2px; }
.a-trace-sql > summary:hover { color: var(--text-2); }
.a-trace-sql pre {
    white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
    padding: 8px 10px; margin: 6px 0 0; font: 12px/1.5 var(--mono); color: var(--text-2);
}
.a-trace-foot { font-size: 12px; }
.a-trace-rules { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.a-trace-rules svg { flex: none; color: var(--accent); }
.sk-applies { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.sk-applies svg { flex: none; color: var(--accent); }
.sk-when { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.sk-when label { display: flex; flex-direction: column; gap: 4px; font-weight: 400; }
@media (max-width: 760px) { .sk-when { grid-template-columns: minmax(0, 1fr); } }
.a-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-2); padding: 0 0 0 40px; }
.a-note p { margin: 0; }
.a-note svg { color: var(--green); margin-top: 3px; }

.md { line-height: 1.6; overflow-wrap: anywhere; }
.md p { margin: 0 0 8px; }
.md p:last-child { margin-bottom: 0; }
.md ul, .md ol { margin: 4px 0 8px; padding-left: 22px; }
.md li { margin: 2px 0; }
.md code { background: var(--gray-soft); padding: 1px 5px; border-radius: 4px; }
.md pre { background: var(--surface-2); border: 1px solid var(--line); padding: 10px; border-radius: 8px; overflow-x: auto; }
.md table { border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.md th, .md td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }
.md th { background: var(--surface-2); }

.a-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; background: var(--yellow-soft); color: var(--yellow); border-radius: 8px; padding: 8px 10px; }
.a-attachments { display: flex; flex-wrap: wrap; gap: 8px; }
.a-result {
    display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-strong);
    background: var(--surface); color: var(--text); font: 500 13px var(--sans); cursor: pointer; text-decoration: none !important; max-width: 100%;
}
.a-result span:not(.faint) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-result:hover { border-color: var(--accent); }
.a-result.on { border-color: var(--accent); background: var(--accent-soft); }
.a-result.file, .a-result.file svg { color: var(--green); }

.a-card { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); }
.a-card.question { border-left: 3px solid var(--yellow); }
.a-card.approval { border-left: 3px solid var(--accent); }
.a-card.done, .a-card.declined { border-left-color: var(--line-strong); }
.a-card.failed { border-left-color: var(--red); }
.a-card-head { display: flex; align-items: center; gap: 8px; }
.a-card-title { font-weight: 600; }
.a-card-what { font-size: 13px; color: var(--text-2); }
.a-card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 2px; }
.a-outcome { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--green); flex-wrap: wrap; }
.a-outcome.failed { color: var(--red); }
.a-outcome.declined { color: var(--text-2); }

.a-sql { font-size: 12px; color: var(--text-3); }
.a-sql summary { cursor: pointer; user-select: none; }
.a-sql pre {
    white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
    padding: 8px 10px; margin: 6px 0; font: 12px/1.5 var(--mono); color: var(--text-2);
}
.a-call { margin-top: 8px; }
.a-call-head { display: flex; gap: 10px; align-items: center; }

.a-composer { flex: none; padding: 10px 24px 18px; max-width: 908px; width: 100%; margin: 0 auto; }
.a-input {
    display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px;
    box-shadow: var(--shadow-lg); transition: border-color .15s, box-shadow .2s;
}
.a-input:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line-strong)); }
.a-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-lg); }
.a-input.off { opacity: .7; }
/* The text field is the card itself: none of the app's text-field border, background or focus ring. */
.a-composer .a-input textarea, .a-composer .a-input textarea:hover, .a-composer .a-input textarea:focus {
    border: 0; outline: 0; box-shadow: none; background: transparent; resize: none; width: 100%;
    min-height: 26px; max-height: 220px; padding: 14px 18px 4px; color: var(--text); font: 15px/1.55 var(--sans);
}
.a-composer .a-input textarea::placeholder { color: var(--text-3); }
.a-input-bar { display: flex; align-items: center; gap: 10px; padding: 6px 8px 8px 10px; }
.a-attach {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px;
    border-radius: 999px; color: var(--text-2); font: 500 12.5px var(--sans); cursor: pointer; transition: background-color .15s, color .15s;
}
.a-attach:hover { background: var(--surface-2); color: var(--accent); }
.a-hint { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.a-hint kbd {
    font: 600 10.5px var(--sans); color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line);
    border-bottom-width: 2px; border-radius: 5px; padding: 0 5px;
}
.a-send {
    flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
    transition: transform .15s, background-color .15s, box-shadow .15s, opacity .15s;
}
.a-send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent); }
.a-send:active:not(:disabled) { transform: scale(.94); }
.a-send:disabled { background: var(--line-strong); color: var(--surface); box-shadow: none; cursor: default; }
.a-send .spinner { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
.a-attach input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* The microphone (voice.js sets data-state: rec while recording, with the time in data-time; busy while the text is written). */
.a-mic {
    position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; display: inline-flex; align-items: center;
    justify-content: center; background: transparent; color: var(--text-2); cursor: pointer; transition: background-color .15s, color .15s;
}
.a-mic:hover { background: var(--surface-2); color: var(--accent); }
.a-mic[data-state=rec] { background: var(--red); color: #fff; animation: a-mic-pulse 1.4s ease-in-out infinite; }
.a-mic[data-state=rec]::after {
    content: attr(data-time); position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%);
    font: 600 11.5px var(--mono); color: var(--red); white-space: nowrap;
}
.a-mic[data-state=busy] { color: var(--accent); cursor: progress; }
.a-mic[data-state=busy] svg { animation: a-mic-busy 1s ease-in-out infinite; }
@keyframes a-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 45%, transparent); }
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--red) 0%, transparent); }
}
@keyframes a-mic-busy { 50% { opacity: .35; } }
.dictate-msg {
    position: fixed; z-index: 1000; width: 320px; transform: translateY(-100%); padding: 8px 12px; border-radius: 8px;
    background: var(--text); color: var(--surface); font: 12.5px/1.45 var(--sans); box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    opacity: 0; pointer-events: none; transition: opacity .15s;
}
.dictate-msg.on { opacity: 1; }
.a-attached { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.a-attached .x { border: 0; background: none; cursor: pointer; color: inherit; font-size: 14px; padding: 0 0 0 4px; }
.a-thumb { position: relative; display: block; height: 56px; border-radius: 8px; border: 1px solid var(--line-strong); overflow: hidden; background: var(--surface-2); }
.a-thumb img { display: block; height: 100%; max-width: 160px; object-fit: cover; }
.a-thumb .x {
    position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; padding: 0; border-radius: 50%; display: grid; place-items: center;
    background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; line-height: 1;
}
.a-thumb .x:hover { background: var(--red); }
.a-images { display: flex; flex-wrap: wrap; gap: 6px; }
.a-images:not(.alone) { margin-bottom: 8px; }
.a-images a { display: block; border-radius: 8px; overflow: hidden; background: var(--surface); }
.a-images img { display: block; max-height: 180px; max-width: 100%; object-fit: contain; }
.a-error { color: var(--red); font-size: 12.5px; margin-bottom: 6px; }
.a-drop {
    display: none; position: absolute; inset: 0; z-index: 20; background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 2px dashed var(--accent); border-radius: 12px; place-items: center; font-weight: 600; color: var(--accent);
    pointer-events: none;
}
body.dragging .a-drop { display: grid; }

.a-start { padding: 36px 0 8px; display: flex; flex-direction: column; gap: 22px; }
.a-start h1 { font-size: 26px; }
.a-start .sub { color: var(--text-2); margin-top: -14px; }
/* "Spørg om siden": questions to start with, about the page the person came from. */
.a-ask-ideas { display: flex; flex-wrap: wrap; gap: 8px; }
.a-start-sec { display: flex; flex-direction: column; gap: 8px; }
.a-start-sec h3 { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; font-weight: 600; }
.a-suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.a-chip { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: 999px; padding: 7px 12px; font: 13px var(--sans); cursor: pointer; text-align: left; }
.a-chip:hover { border-color: var(--accent); color: var(--accent); }
.a-chip.fill { border-style: dashed; }
/* Tilpas on the start screen: each group a box to drag skills into; where a skill would land is marked (skills.js). */
.sk-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, background-color .15s; }
.sk-group.over { border-color: var(--accent); background: var(--accent-soft); }
.sk-group-items { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 34px; }
.sk-drag { display: inline-flex; align-items: center; gap: 6px; cursor: grab; user-select: none; }
.sk-drag.dragging { opacity: .4; }
.sk-drag.over { box-shadow: -3px 0 0 var(--accent); }
.sk-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; border-radius: 50%; background: none; color: var(--text-3); cursor: pointer; padding: 0; }
.sk-x:hover { background: var(--red-soft); color: var(--red); }
.sk-add { width: 260px; max-width: 100%; }
.sk-add > input { height: 34px; border-radius: 999px; border: 1px dashed var(--line-strong); padding: 0 14px; font: 13px var(--sans); }
.sk-add > input:focus { border-style: solid; }
.sk-add .picker-pop { min-width: 320px; }
.a-start-edit { gap: 12px; }

/* ---- right: the result pane ---- */
/* The wrapper animates its width (the conversation narrows smoothly); the pane inside keeps its full width and slides. */
.a-pane-wrap { flex: none; width: 0; overflow: hidden; position: relative; transition: width .42s var(--ease); }
.a-pane-wrap.open { width: var(--pane); }
.a-pane {
    width: var(--pane); height: 100%; display: flex; flex-direction: column; min-height: 0; background: var(--surface);
    border-left: 1px solid var(--line); box-shadow: -12px 0 32px -24px rgba(16, 24, 40, .35);
    transform: translateX(32px); opacity: 0; transition: transform .42s var(--ease), opacity .3s ease;
}
.a-pane-wrap.open .a-pane { transform: none; opacity: 1; }
/* A new result: the table fades up, the header stays put. */
.a-pane .a-grid, .a-pane .a-notes { animation: a-rise .35s var(--ease) both; }
.a-pane-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); min-height: 52px; }
.a-pane-head .grow { min-width: 0; }
.a-pane-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-notes { flex: none; margin: 0; padding: 8px 14px 8px 30px; font-size: 12.5px; color: var(--text-2); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.a-pane-tools { flex: none; display: flex; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.a-pane-tools input {
    flex: 1; min-width: 0; height: 30px; border: 1px solid var(--line-strong); border-radius: 7px; padding: 0 10px; background: var(--surface);
    color: var(--text); font: 13px var(--sans);
}
/* Table / chart switch, and the chart itself. */
.a-pane-tools { align-items: center; }
.a-seg { flex: none; display: inline-flex; border: 1px solid var(--line-strong); border-radius: 7px; padding: 2px; gap: 2px; background: var(--surface-2); }
.a-seg button {
    display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border: 0; border-radius: 5px; background: none;
    color: var(--text-2); font: 500 12.5px var(--sans); cursor: pointer;
}
.a-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.a-chart-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.a-chart { flex: 1; overflow: auto; min-height: 0; padding: 16px 18px; animation: a-rise .35s var(--ease) both; }
.ch { --c0: var(--accent); --c1: var(--violet); --c2: #f79009; --c3: var(--green); --c4: var(--blue); --c5: var(--red); --c6: #dd2590; --c7: var(--text-3); }
.ch .s0 { --c: var(--c0); } .ch .s1 { --c: var(--c1); } .ch .s2 { --c: var(--c2); } .ch .s3 { --c: var(--c3); }
.ch .s4 { --c: var(--c4); } .ch .s5 { --c: var(--c5); } .ch .s6 { --c: var(--c6); } .ch .s7 { --c: var(--c7); }
.ch-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-2); margin-bottom: 12px; }
.ch-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ch-sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.ch-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-zero { stroke: var(--line-strong); stroke-width: 1.2; }
.ch-tick { fill: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.ch-ylabel { fill: var(--text-2); font-size: 11px; font-weight: 600; }
.ch-val { fill: var(--text-2); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.ch-col { fill: var(--c); opacity: .88; transition: opacity .12s; }
.ch-col:hover { opacity: 1; }
.ch-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-dot { fill: var(--surface); stroke: var(--c); stroke-width: 1.8; pointer-events: none; }
.ch-hit { fill: var(--accent); opacity: 0; }
.ch-hit:hover { opacity: .07; }
.ch-hbars { display: flex; flex-direction: column; gap: 4px; }
.ch-hrow { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; padding: 3px 0; }
.ch-hlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.ch-htrack { position: relative; display: flex; flex-direction: column; gap: 2px; }
.ch-hlane { height: 16px; }
.ch-hrow:has(.ch-hlane + .ch-hlane) .ch-hlane { height: 10px; }
.ch-hbar { height: 100%; min-width: 2px; border-radius: 3px; background: var(--c); opacity: .88; transition: opacity .12s; }
.ch-hbar:hover { opacity: 1; }
.ch-hzero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--line-strong); }
.ch-hval { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 12px; min-width: 56px; }
.ch-hrow:has(.ch-hlane + .ch-hlane) .ch-hval { font-size: 10.5px; line-height: 12px; }
.a-result.chart svg { color: var(--violet); }
.a-earlier { flex: none; max-height: 30%; overflow-y: auto; border-top: 1px solid var(--line); padding: 8px; }
.a-earlier .a-item { color: var(--text); }
.a-earlier .a-item:hover, .a-earlier .a-item.on { background: var(--accent-soft); color: var(--text); }
.a-earlier .a-sec-head { color: var(--text-3); }

/* ---- the agent's browser, live (BrowserView.razor): the page as a picture the person can click and type in ---- */
.br-pane { background: var(--surface-2); }
.br-head-ico { color: var(--accent); }
.br-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.br-address { flex: 1; min-width: 0; display: flex; }
.br-address input {
    flex: 1; min-width: 0; height: 26px; border: 1px solid var(--line-strong); border-radius: 7px; padding: 0 10px; background: var(--surface-2);
    color: var(--text-2); font: 12.5px var(--mono);
}
.br-address input:focus { background: var(--surface); color: var(--text); outline: none; border-color: var(--accent); }
.br-doing { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px;
    font-weight: 500; background: var(--accent-soft); color: var(--accent); max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-hint { flex: none; font-size: 12px; }
.br-note { flex: none; padding: 7px 14px; font-size: 12.5px; color: var(--text-2); background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.br-note.br-ask { display: flex; align-items: center; gap: 8px; }
.br-note.bad { background: var(--surface); color: var(--red); }
.br-screen-wrap { flex: 1; min-height: 0; overflow: auto; padding: 14px; display: flex; align-items: flex-start; justify-content: center; }
.br-screen {
    position: relative; width: 100%; max-width: 1280px; aspect-ratio: 1280 / 800; border-radius: 8px; overflow: hidden; cursor: pointer;
    background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 10px 30px -18px rgba(16, 24, 40, .45); outline: none;
    transition: box-shadow .2s ease;
}
.br-screen:focus { box-shadow: 0 0 0 2px var(--accent), 0 10px 30px -18px rgba(16, 24, 40, .45); }
.br-screen.acting { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-soft); }
.br-screen.clicked { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-soft); }
.br-screen img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
/* The browser's own screen through VNC (noVNC draws a canvas in it, scaled to fit). */
.br-vnc {
    position: relative; width: 100%; min-width: 0; max-width: 1280px; aspect-ratio: 1280 / 900; overflow: hidden; border-radius: 8px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px -18px rgba(16, 24, 40, .45);
}
.br-vnc:not([data-on])::after { content: "Forbinder til browseren …"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--text-3); }
.br-vnc:focus-within { box-shadow: 0 0 0 2px var(--accent), 0 10px 30px -18px rgba(16, 24, 40, .45); }
.br-vnc.acting { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-soft); }
.br-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-closed { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px; text-align: center; color: var(--text-2); }
.br-closed .small { max-width: 360px; }

/* A laptop: the result pane slides over the conversation instead of squeezing it. */
@media (max-width: 1280px) {
    .agent { --left-w: clamp(200px, var(--a-left, 240px), 360px); --pane: clamp(380px, var(--a-pane, 720px), 92vw); }
    .a-pane-wrap, .a-pane-wrap.open { position: fixed; right: 0; top: 0; bottom: 0; width: var(--pane); z-index: 30; pointer-events: none; }
    .a-pane-wrap.open { pointer-events: auto; }
    .a-pane { transform: translateX(100%); opacity: 1; box-shadow: var(--shadow-lg); }
}

/* The menu button and the shade: only on a phone (below). */
.a-menu-btn { display: none; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: -8px;
    border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; }
.a-menu-btn:hover { background: var(--surface-2); }
.nav-shade { display: none; }

/* A phone: the conversation or the tool fills the screen; the menu is a drawer from the left (the button in the top
   bar), the result pane covers the conversation when open. */
@media (max-width: 760px) {
    .a-split, .a-max { display: none; }
    .agent { --left-w: 0px; --pane: 100vw; }
    .agent > .a-left, html.a-left-hidden .agent > .a-left {
        display: flex; position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); overflow-y: auto;
        transform: translateX(-100%); transition: transform .25s var(--ease); box-shadow: var(--shadow-lg);
    }
    html.nav-open .agent > .a-left { transform: none; }
    .a-menu-btn { display: inline-flex; }
    .nav-shade { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .25s; }
    html.nav-open .nav-shade { opacity: 1; pointer-events: auto; }
    .a-top { padding: 0 12px; gap: 8px; }
    .a-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .a-job { display: none; }
    .a-tool-body { padding: 14px 12px 48px; }
    .a-msgs-inner, .a-composer { padding-left: 16px; padding-right: 16px; }
    .a-hint, .a-attach span, .a-top .ask-page span { display: none; }
    .a-top { height: 46px; }
    .a-start { padding-top: 12px; gap: 18px; }
    .a-start h1 { font-size: 22px; }
    .a-start .sub { margin-top: -10px; font-size: 13.5px; }
    /* A skill on a phone: its command on a line, what it does under it (a long command doesn't break mid-word). */
    .a-suggest .a-chip.skill { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 1px; width: 100%; border-radius: 12px; padding: 7px 12px; }
    .a-suggest .a-chip.skill > svg { grid-row: span 2; align-self: center; }
    .a-chip-cmd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* 16px: smaller, and a phone zooms in on the field when it's tapped. Two lines tall, so the placeholder shows. */
    .a-composer { padding-top: 8px; padding-bottom: 10px; }
    .a-composer .a-input textarea, .a-composer .a-input textarea:hover, .a-composer .a-input textarea:focus { font-size: 16px; min-height: 64px; padding: 10px 14px 2px; }
    /* In the drawer everything scrolls with it, at its own height; the conversations keep a box of their own. */
    .agent > .a-left > * { flex-shrink: 0; }
    .a-history { flex: none; }
    .a-history .a-sec-scroll { max-height: 40vh; }
    .a-side-skills { overflow: visible; }
}

/* ---- motion ---- */
@keyframes a-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes a-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.a-msg, .a-note, .a-start-sec { animation: a-rise .32s var(--ease) both; }
.a-msg.user .a-bubble { transform-origin: bottom right; animation: a-pop .25s var(--ease) both; }
.a-card { animation: a-rise .38s var(--ease) both; animation-delay: .06s; transition: border-color .2s, box-shadow .2s; }
.a-card:hover { box-shadow: var(--shadow-lg); }
.a-result, .a-chip, .a-item, .btn { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; }
.a-result:hover, .a-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.a-result:active, .a-chip:active, .btn:active { transform: translateY(0) scale(.98); }
.dg-t tbody tr td { transition: background-color .12s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; }
    .vgai-logo.scan .vgai-eye, .a-shimmer { animation: none !important; }
    .a-shimmer { color: var(--text); background: none; }
}

.a-note.bad { color: var(--red); }
.a-note.bad svg { color: var(--red); }

/* ---- skills: the / and @ menus over the chat box, a skill's fields in it, its chip in a message, the Skills page ---- */
.a-composer { position: relative; }
.a-pop {
    position: absolute; left: 24px; right: 24px; bottom: calc(100% - 8px); z-index: 30; max-height: min(420px, 55vh); display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.a-pop-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text-2); font-weight: 600; }
.a-pop-head .faint { font-weight: 400; }
.a-pop-x { border: 0; background: none; color: var(--text-3); cursor: pointer; width: 24px; height: 24px; border-radius: 6px; display: inline-grid; place-items: center; }
.a-pop-x:hover { background: var(--surface-2); color: var(--text); }
.a-pop-list { overflow-y: auto; padding: 4px; }
.a-pop-empty { padding: 12px 14px; font-size: 12.5px; color: var(--text-2); }
/* One row per skill in fixed columns (the command, then its title over one line of what it does); the highlighted one in
   full beside the list (.a-pop-detail), which goes when the chat box is narrow. */
.a-pop-item {
    display: grid; grid-template-columns: 172px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; text-align: left;
    border: 0; background: none; border-radius: 9px; padding: 6px 10px; cursor: pointer; color: var(--text); font: 13px var(--sans);
}
.a-pop-item.on { background: var(--accent-soft); }
.a-pop-cmd, .a-skill-cmd { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px var(--mono); color: var(--accent); white-space: nowrap; min-width: 0; }
.a-pop-cmd-name { overflow: hidden; text-overflow: ellipsis; }
.a-pop-main { display: flex; flex-direction: column; min-width: 0; }
.a-pop-title { font-weight: 600; display: inline-flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.a-pop-sub { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-pop-group { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); padding: 8px 10px 3px; }
.a-pop-group:first-child { padding-top: 4px; }
.a-pop-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; min-height: 0; flex: 1; }
.a-pop-body .a-pop-list { min-height: 0; }
.a-pop-detail { border-left: 1px solid var(--line); background: var(--surface-2); padding: 12px 14px; overflow-y: auto; min-height: 0; }
.a-pop-about:not([data-show]) { display: none; }
.a-pop-about { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.a-pop-about-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.a-pop-about-title { font-weight: 600; font-size: 14px; }
.a-pop-about-desc { color: var(--text-2); line-height: 1.45; }
.a-pop-about-sec { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin-top: 6px; }
.a-pop-inputs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.a-pop-inputs li { display: flex; justify-content: space-between; gap: 8px; }
.a-pop-inputs li .faint { text-align: right; }
.a-pop-example { font: 12px var(--mono); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px; overflow-wrap: anywhere; }
.a-pop-about-foot { margin-top: 6px; font-size: 11.5px; color: var(--text-3); }
.a-composer { container-type: inline-size; }
.a-pop-body { overflow: hidden; }
@container (max-width: 720px) {
    .a-pop-body { grid-template-columns: minmax(0, 1fr); }
    .a-pop-detail { display: none; }
    .a-pop-item { grid-template-columns: 150px minmax(0, 1fr); }
}
.a-pop.mention .a-pop-item { grid-template-columns: minmax(150px, auto) minmax(0, 1fr); }
.a-pop-tags { display: flex; align-items: center; gap: 4px; color: var(--text-3); }
.a-pop-param {
    font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); white-space: nowrap;
}
.a-pop-param.opt { border-style: dashed; color: var(--text-3); }
.a-pop-tool { font-size: 11px; color: var(--text-3); white-space: nowrap; margin-left: 4px; }

.a-input.skill { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); }
.a-skill { padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 8px; }
.a-skill-head { display: flex; align-items: center; gap: 8px; }
.a-skill-title { font-weight: 600; }
.a-skill-kind {
    font: 600 10.5px var(--sans); text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
}
.a-skill-desc { font-size: 12.5px; color: var(--text-2); margin-top: -4px; }
.a-skill-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.a-field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 0 1 220px; }
.a-field.wide { flex-basis: 100%; }
.a-field.grow { flex: 1 1 260px; }
.a-field-label { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.a-field-box { display: flex; align-items: center; gap: 6px; position: relative; }
.a-field-box > .picker, .a-field-box > input, .a-field-box > .a-field-in { flex: 1; min-width: 0; }
.a-field-box input { height: 34px; width: 100%; }
.a-field-box .num { text-align: right; }
.a-field-unit { color: var(--text-2); font-size: 13px; }
.a-field-box.slash { gap: 2px; }
.a-field-box.slash input { font-family: var(--mono); }
.a-field-files { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 34px; }
.a-field-files .chip { cursor: pointer; height: 28px; padding: 0 10px; font-size: 12.5px; }
.a-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; height: 34px; background: var(--surface); }
.a-seg-b { border: 0; background: none; padding: 0 12px; font: 500 13px var(--sans); color: var(--text-2); cursor: pointer; border-right: 1px solid var(--line); white-space: nowrap; }
.a-seg-b:last-child { border-right: 0; }
.a-seg-b:hover { color: var(--accent); }
.a-seg-b.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.a-skill-preview { border-top: 1px dashed var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.a-skill-table { overflow-x: auto; }
.a-skill-table table { border-collapse: collapse; font-size: 12px; width: 100%; }
.a-skill-table th { text-align: left; font-weight: 600; color: var(--text-2); padding: 3px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.a-skill-table td { padding: 3px 8px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

.a-bubble.skill { padding: 8px 10px; }
/* In the person's own message (white on the accent colour). */
.a-bubble .a-skill-cmd { color: inherit; opacity: .85; }
.a-bubble .a-skillchip-val { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .32); color: inherit; }
.a-bubble .a-skill-sent, .a-bubble .a-skill-sent summary { color: rgba(255, 255, 255, .8); }
.a-bubble .a-mention { color: inherit; background: rgba(255, 255, 255, .18); border-radius: 4px; padding: 0 3px; }
/* The chat box sits at the bottom: a field's suggestions open upwards. */
.a-composer .a-skill .picker-pop { top: auto; bottom: calc(100% + 4px); }
.a-skillchip {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: left;
}
.a-skillchip:hover .a-skill-cmd { text-decoration: underline; }
.a-skillchip-title { font-weight: 600; }
.a-skillchip-val { font-size: 12.5px; padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.a-skill-sent { margin-top: 6px; font-size: 12px; color: var(--text-2); }
.a-skill-sent summary { cursor: pointer; color: var(--text-3); }
.a-skill-sent div { white-space: pre-wrap; margin-top: 4px; }
.a-mention { color: var(--accent); font-weight: 600; }
.a-after { margin-top: 6px; }
.a-chip.skill { display: inline-flex; align-items: center; gap: 8px; }
.a-chip-cmd { font: 600 12px var(--mono); color: var(--accent); }
.a-sec-link { margin-left: auto; font-size: 10.5px; text-transform: none; letter-spacing: 0; color: inherit; }
.a-sec-link:hover { color: var(--accent); }

.a-skillcard { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.a-skillcard-row { display: flex; flex-wrap: wrap; gap: 10px; }
.a-skillcard-params { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.a-skillcard-tests { display: flex; flex-direction: column; gap: 2px; }
.a-skillcard-tests .small { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.a-skillcard-rule { white-space: pre-wrap; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.a-mailcard { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.a-mailcard .a-field-label.row { display: flex; align-items: center; gap: 6px; }
.a-mailcard-body { padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); max-height: 360px; overflow: auto; }
.a-mailcard-edit { min-height: 200px; font: 13px/1.5 var(--mono); }
.a-mailcard-files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-2); }
.a-mailcard .bad { color: var(--red); display: flex; align-items: center; gap: 6px; }

.sk-bar { gap: 10px; margin-bottom: 14px; align-items: center; }
.searchbar.sm { height: 36px; min-width: 240px; }
.searchbar.sm input, .searchbar.sm input:hover, .searchbar.sm input:focus { height: 30px; font-size: 14px; }
.sk-list { display: flex; flex-direction: column; gap: 10px; }
.sk-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.sk-card.rule { background: var(--surface-2); }
.sk-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sk-desc { color: var(--text-2); font-size: 13px; }
.sk-body { white-space: pre-wrap; font-size: 13px; }
.sk-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sk-src { display: inline-block; }
.sk-src summary { list-style: none; }
.sk-src summary::-webkit-details-marker { display: none; }
.sk-src[open] { display: block; width: 100%; order: 10; }
.sk-src pre { white-space: pre-wrap; font: 12px/1.5 var(--mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 6px; }
.sk-history { border-top: 1px dashed var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.sk-deleted { margin-top: 6px; }
.sk-deleted .row { margin-top: 4px; }
.sk-editor { margin-bottom: 16px; }
.sk-form { display: flex; flex-direction: column; gap: 12px; }
.sk-lbl { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.sk-lbl .small { font-weight: 400; }
.sk-lbl input, .sk-lbl textarea { font-weight: 400; color: var(--text); }
.sk-lbl textarea.mono { font: 12.5px/1.5 var(--mono); }
.sk-params-edit { display: flex; flex-direction: column; gap: 6px; font-weight: 400; }
.sk-param { display: grid; grid-template-columns: 120px 140px 1fr 90px 1fr 50px 34px; gap: 6px; align-items: center; }
.sk-param.head { font-size: 11px; color: var(--text-3); }
.sk-param input[type=checkbox] { justify-self: center; }
.sk-lbl .a-field-box.slash input { width: 240px; font-weight: 400; color: var(--text); }

/* A skill's kind by its icon's colour: a lyn skill (SQL, no AI) an amber bolt, an AI skill violet sparkles. Lighter tints
   on the dark left column and in the person's own (accent) bubble. */
.sk-ico-lyn { color: var(--yellow); }
.sk-ico-ai { color: var(--violet); }
.a-left .sk-ico-lyn { color: #fdb022; }
.a-left .sk-ico-ai { color: #b9a6ff; }
.a-bubble .sk-ico-lyn { color: #fec84b; }
.a-bubble .sk-ico-ai { color: #ddd6fe; }

/* Nyt i VGAI (/office/nyt): CHANGELOG.md, a version per h2. */
.release-notes { max-width: 820px; }
.release-notes h1 { display: none; }
.release-notes h2 { font-size: 17px; margin: 22px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.release-notes h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.release-notes h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin: 12px 0 4px; }
/* The version in the footers, a link to it. */
.ver { color: inherit; text-decoration: none; font-family: var(--mono); }
.ver:hover { text-decoration: underline; }

/* ---- Bots: the left column's runs, a run's first message, the save_bot card, the Bots page ---- */
.a-side-bots { flex: 0 3 auto; min-height: 68px; overflow: hidden; }
.a-side-bots .a-sec-list { min-height: 0; flex: 0 1 auto; }
.a-unread { font-weight: 600; color: #fff; }
.a-dot-off { opacity: .5; }
@media (max-width: 760px) { .a-side-bots { overflow: visible; } }
/* A run's first message is the bot's task, not the person's words now: quiet, with the bot's chip above it. */
.a-msg.user.bot .a-bubble { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.a-msg.user.bot .a-bubble .a-skillchip-val { background: var(--surface); border-color: var(--line-strong); }
.a-msg.user.bot .a-bubble .a-skill-sent, .a-msg.user.bot .a-bubble .a-skill-sent summary { color: var(--text-2); }
.a-msg.user.bot .a-bubble .sk-ico-lyn { color: var(--yellow); }
.a-msg.user.bot .a-bubble .sk-ico-ai { color: var(--violet); }
.a-botchip { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; font-size: 12px; white-space: normal; }
.a-botchip a { font-weight: 600; }
.a-botcard { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.a-botcard .a-field-label .faint { font-weight: 400; }
.a-botcard-task { min-height: 120px; font: 13px/1.5 var(--sans); }
.a-botcard .bad, .bot-editor .bad, .bot-trigger .bad { color: var(--red); display: flex; align-items: center; gap: 6px; }
.bot-trigger { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-weight: 400; }
.bot-trigger-row { gap: 8px; align-items: center; }
.bot-lbl { gap: 6px; color: var(--text-2); font-weight: 400; }
.bot-cron { height: 34px; width: 200px; font-family: var(--mono); }
.bot-trigger .a-seg-b:disabled { cursor: default; color: var(--text-3); }
.bot-trigger .a-seg-b.on:disabled { color: var(--text); }

.bot-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.bot-card.paused, .bot-card.failed { background: var(--surface-2); }
.bot-card.failed { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.bot-page { margin-bottom: 16px; }
.bot-head .bot-ico { flex: none; color: var(--violet); }
.bot-head a.sk-title { color: var(--text); }
.bot-head a.sk-title:hover { color: var(--accent); }
.bot-page-title { font-size: 16px; }
.bot-title-edit { display: inline-flex; align-items: center; gap: 8px; padding: 2px 6px; margin-left: -6px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 16px; cursor: text; }
.bot-title-edit:hover { background: var(--hover, rgba(127, 127, 127, .1)); }
.bot-title-pen { opacity: 0; color: var(--text-2); transition: opacity .15s; }
.bot-title-edit:hover .bot-title-pen, .bot-title-edit:focus-visible .bot-title-pen { opacity: 1; }
.bot-rename { width: min(420px, 60%); height: 30px; padding: 0 8px; font-weight: 600; font-size: 15px; }
.bot-task { color: var(--text-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bot-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-3); }
.bot-meta > span:not(.bot-dots) + span:not(.bot-dots)::before { content: "·"; margin-right: 12px; color: var(--line-strong); }
.bot-dots { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.bot-dot { display: block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.bot-dot.good { background: var(--green); }
.bot-dot.quiet { background: var(--line-strong); }
.bot-dot.bad { background: var(--red); }
.bot-dot.limit { background: var(--yellow); }
.bot-dot.skip { border: 1px solid var(--line-strong); background: transparent; }
.bot-dot.run { background: var(--accent); animation: bot-pulse 1.2s ease-in-out infinite; }
a.bot-dot:hover { box-shadow: 0 0 0 2px var(--accent-soft); }
@keyframes bot-pulse { 50% { opacity: .35; } }
.bot-running { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 30px; padding: 4px 10px; border-radius: 8px; background: var(--accent-soft); font-size: 13px; }
.bot-error { margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.bot-back { margin-bottom: 10px; }
.bot-empty { display: flex; align-items: flex-start; gap: 10px; }
.bot-empty svg { flex: none; color: var(--violet); }
.bot-view { display: flex; flex-direction: column; gap: 10px; }
/* A bot waiting for a super admin: the list's box at the top, and Godkend/Afvis on its page. */
.bot-approve-list, .bot-review { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; border-color: color-mix(in srgb, var(--yellow) 45%, var(--line)); }
.bot-approve-list .row, .bot-review .row { gap: 8px; }
.bot-review { margin: 12px 0 0; }
.bot-review input { width: 100%; }
.bot-view-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 13px; }
.bot-view-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.bot-view-row .md > :first-child { margin-top: 0; }
.bot-view-row .md > :last-child { margin-bottom: 0; }
.bot-memo-text { white-space: pre-wrap; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.bot-history .row { flex-wrap: wrap; }
.bot-history-changes { margin: -2px 0 4px; padding-left: 12px; border-left: 2px solid var(--line); overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .bot-view-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .bot-dots { margin-left: 0; }
    .bot-cron { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .bot-dot.run { animation: none; } }