/* =====================================================================================================
   AiAskBox (Ai/AiAskBox.razor): the "ask in plain English" field. SHARED by the portal (Portfolio Ask) and
   the ERP (Roll Search Ask): moved here from the portal's portal.css on 2026-10-20, as pills.css was. Each
   app links _content/NexStack.Shared.Web/css/aibox.css BEFORE its own stylesheet.

   ONE SPOT. The colours the rules below need are the settings in :root. Each defaults to the portal's own
   variable when the page has it (so the portal looks exactly as before), else to the portal's value, so the
   ERP gets the same look without defining the portal's variables.
   ===================================================================================================== */

:root {
    --ai-1: #7b5cff;   /* violet — the AI half of the mark */
    --ai-2: #3bcbff;   /* = the portal's --brand-accent, so the mark belongs to the brand */
    --aibox-surface: var(--surface, #ffffff);
    --aibox-border: var(--border, #e2e6ee);
    --aibox-text: var(--text, #1a1c2a);
    --aibox-muted: var(--text-muted, #5b6472);
    --aibox-shadow: var(--shadow, 0 1px 3px rgba(12, 2, 36, 0.08), 0 6px 24px rgba(12, 2, 36, 0.06));
    --aibox-radius: var(--radius, 10px);
    --aibox-well: #f4f5f9;   /* the suggestions' tray */
}

/* One pill: AI mark left, question, round send button right — all INSIDE the field, so the box reads as one
   control at every width rather than an input and a button that wrap apart on a phone. The ring is a
   two-background trick (padding-box surface over a border-box gradient) so the border itself carries the
   gradient; at rest it is the plain border colour and only lights up on focus or while busy. */
.aibox {
    --ring: var(--aibox-border);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 880px;
    min-height: 3.25rem;
    padding: 0.3rem 0.35rem 0.3rem 0.95rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(var(--aibox-surface), var(--aibox-surface)) padding-box,
        linear-gradient(120deg, var(--ring), var(--ring)) border-box;
    box-shadow: var(--aibox-shadow);
    transition: box-shadow 0.18s ease;
}
.aibox:focus-within,
.aibox.is-busy {
    background:
        linear-gradient(var(--aibox-surface), var(--aibox-surface)) padding-box,
        linear-gradient(120deg, var(--ai-1), var(--ai-2)) border-box;
    box-shadow: 0 0 0 4px rgba(123, 92, 255, 0.10), var(--aibox-shadow);
}
/* THE MARK BECOMES A SPINNER WHILE BUSY (2026-10-26), beside the question where the eye is after Enter. It was a
   pulse of the mark, which reduced motion turned off, leaving nothing near the text to show the Ask was working. */
.aibox__mark { display: inline-grid; place-items: center; flex: 0 0 auto; }
.aibox__mark > * { grid-area: 1 / 1; }
.aibox__glyph { display: inline-flex; }
.aibox__mark-spinner {
    box-sizing: border-box;
    width: 22px;   /* the mark's own size (AiMark Size="22") */
    height: 22px;
    border: 2.5px solid rgba(123, 92, 255, 0.2);
    border-top-color: var(--ai-1);
    border-radius: 50%;
    opacity: 0;
}
.aibox.is-busy .aibox__glyph { opacity: 0; }
.aibox.is-busy .aibox__mark-spinner { opacity: 1; animation: aibox-spin 0.8s linear infinite; }
.aibox__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.5rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--aibox-text);
    font: inherit;
    font-size: 0.98rem;
}
.aibox__input::placeholder { color: var(--aibox-muted); opacity: 0.85; }
.aibox__input:disabled { color: var(--aibox-muted); }
.aibox__send {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ai-1), var(--ai-2));
    color: #fff;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease, filter 0.12s ease;
}
.aibox__send[aria-disabled="false"]:hover { filter: brightness(1.06); transform: translateX(1px); }
/* aria-disabled, not :disabled — see AiAskBox for why the button is never really disabled. */
.aibox__send[aria-disabled="true"] { cursor: default; opacity: 0.35; }
.aibox.is-busy .aibox__send[aria-disabled="true"] { opacity: 1; }
.aibox__send > * { grid-area: 1 / 1; }
.aibox__spinner {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
}
.aibox.is-busy .aibox__spinner { opacity: 1; animation: aibox-spin 0.8s linear infinite; }
.aibox.is-busy .aibox__arrow { opacity: 0; }
.aibox-wrap { max-width: 880px; }
/* SUGGESTIONS IN A WELL (portal 2026-10-21; both apps since the same day, asked for Roll Search): the chips sit in a
   soft inset tray under the box, so they read as one group of offers rather than loose buttons between the box and
   the answer. Was a portal-only rule in portal.css. */
.aibox__examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    max-width: 880px;
    box-sizing: border-box;
    margin-top: 0.65rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--aibox-border);
    border-radius: var(--aibox-radius);
    background: var(--aibox-well);
    box-shadow: inset 0 1px 2px rgba(12, 2, 36, 0.05);
}
.aibox__examples-label { color: var(--aibox-muted); font-size: 0.78rem; font-weight: 600; }
.aibox__examples-label:empty { display: none; }
.aibox__example {
    padding: 0.38rem 0.8rem;
    border: 1px solid var(--aibox-border);
    border-radius: 999px;
    background: var(--aibox-surface);
    color: var(--aibox-text);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.aibox__example:not(:disabled):hover { border-color: var(--ai-1); color: var(--ai-1); }
.aibox__example:disabled { opacity: 0.5; cursor: default; }
/* "DID THIS ANSWER HELP?" (AiRating; moved here from portal.css 2026-10-26 so the ERP's Roll Search rates too) — a
   quiet line under the answer, pill buttons, so it reads as part of the page and not as a survey. The note box only
   appears after No. --brand-dark is the portal's own button colour; where an app has none, the text colour. */
.aibox-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; max-width: 880px; margin-top: 0.5rem; }
.aibox-rate__q { color: var(--aibox-muted); font-size: 0.84rem; font-weight: 600; }
.aibox-rate__hint { font-weight: 400; }
.aibox-rate__btn {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.35rem 0.95rem;
    border: 1px solid var(--aibox-border);
    border-radius: 999px;
    background: var(--aibox-surface);
    color: var(--brand-dark, var(--aibox-text));
    cursor: pointer;
}
.aibox-rate__btn:hover { border-color: var(--brand-dark, var(--ai-1)); }
.aibox-rate__btn--quiet { border-color: transparent; background: transparent; color: var(--aibox-muted); }
.aibox-rate__btn--quiet:hover { border-color: transparent; color: var(--aibox-text); }
.aibox-rate__note {
    flex: 1 1 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--aibox-border);
    border-radius: var(--aibox-radius);
    background: var(--aibox-surface);
    color: var(--aibox-text);
    font: inherit;
    font-size: 0.86rem;
    resize: vertical;
}
.aibox-rate__actions { display: flex; gap: 0.5rem; }

@keyframes aibox-spin { to { transform: rotate(360deg); } }
/* REDUCED MOTION SLOWS THE SPINNERS, IT DOES NOT STOP THEM: stopped, each is a still ring that reads as a frozen page
   for the whole Ask (found 2026-10-26 on a PC with Windows' "Animation effects" off, which Chrome reports as reduce).
   Bootstrap does the same with its own spinners (1.5s). */
@media (prefers-reduced-motion: reduce) {
    .aibox.is-busy .aibox__spinner,
    .aibox.is-busy .aibox__mark-spinner { animation-duration: 1.5s; }
}

/* ---- AI ANSWER PICTURES (2026-10-21) — AiFigure, AiBars, AiMiniTable. SHARED by the portal's Ask and the ERP, so
   they take the --aibox-* settings above and the AI mark's violet. The app draws every number; these only lay out. */
.ai-figure { margin: 0.2rem 0 0.4rem; }
.ai-figure__value {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--aibox-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.ai-figure__label { margin-top: 0.15rem; color: var(--aibox-muted); font-size: 0.82rem; }
.ai-figure__change {
    display: inline-block;
    margin-top: 0.45rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #f1f2f6;
    color: var(--aibox-muted);
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ai-figure__change.is-up { background: #fff1e6; color: #b45309; }     /* an increase is a cost to the owner */
.ai-figure__change.is-down { background: #e8f6ee; color: #15803d; }

.ai-bars { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.2rem 0 0.3rem; }
.ai-bars__row { display: grid; grid-template-columns: minmax(6rem, 14rem) 1fr auto; align-items: center; gap: 0.65rem; }
.ai-bars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.84rem; color: var(--aibox-text); }
.ai-bars__track { height: 0.65rem; border-radius: 999px; background: #f1f0f8; overflow: hidden; }
.ai-bars__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7b5cff, #3bcbff); }
.ai-bars__value { font-size: 0.82rem; font-weight: 600; color: var(--aibox-text); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ai-mini { width: 100%; border-collapse: collapse; font-size: 0.84rem; margin: 0.15rem 0 0.2rem; }
.ai-mini th, .ai-mini td { padding: 0.34rem 0.5rem; border-bottom: 1px solid var(--aibox-border); text-align: left; }
.ai-mini th { color: var(--aibox-muted); font-weight: 600; font-size: 0.78rem; white-space: nowrap; }
.ai-mini tbody tr:last-child td { border-bottom: 0; }
.ai-mini .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-mini__note { margin: 0.35rem 0 0; color: var(--aibox-muted); font-size: 0.78rem; }

@media (max-width: 600px) {
    .ai-bars__row { grid-template-columns: minmax(5rem, 8rem) 1fr auto; }
    .ai-figure__value { font-size: 1.6rem; }
}