/* Packet P-AI-Conversations (2026-08-20) + P-AI-Chat-Progress (2026-08-20) + Followup
 * (2026-08-20). MINIMAL CSS - only what Harbor doesn't already ship.
 *
 * Three things live here:
 *   1. Rename input width (chat header inline rename).
 *   2. Ask-button spinner glyph shown while the AI is thinking. Every other visual for the
 *      busy button is Harbor's own `.hrc-button[data-hrc-busy]` rule from forms.css.
 *   3. Syntax-highlighter colours for AI Log detail JSON/SQL pre blocks.
 *
 * The Followup 2026-08-20 removed the modal `.hrc-ai-progress-overlay*` classes - the button
 * spinner alone is the whole processing signal now.
 *
 * Everything else on /ai/chat and /admin/reports/ai-log uses existing Harbor primitives per
 * MYS's ask 2026-08-20 mid-verify: no bespoke chat-header, no bespoke turn card, no bespoke
 * log-panel. Use hrc-page-head + Section + hrc-pill + hrc-dl + hrc-grid instead.
 *
 * Every token is `--hrc-*` prefix (memory grep-harbor-css-before-authoring).
 */

/* ---- Rename input shown by ai-chat-progress.js on click of Rename button ------------------ */
.hrc-ai-chat-rename-input {
    inline-size: 24rem;
    max-inline-size: 60vw;
    margin-inline-end: var(--hrc-space-xs, 6px);
}

/* ---- Ask-button "Thinking..." spinner + label --------------------------------------------
 * When ai-chat-progress.js swaps the Ask button's innerHTML on submit, it injects a
 * <span class="hrc-ai-progress-spinner"> before the label <span>. The spinner is a pure-CSS
 * ring; label is plain text. Harbor's own `.hrc-button[data-hrc-busy]` rule from forms.css
 * dims + disables pointer events, so nothing here has to fight for specificity - we only
 * add the missing rotating glyph. */
.hrc-ai-progress-spinner {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    margin-inline-end: var(--hrc-space-xs, 6px);
    vertical-align: -0.15em;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: hrc-ai-progress-spin 0.8s linear infinite;
}
.hrc-ai-progress-label {
    /* Sits inline with the spinner; nothing special needed - existing button typography
     * carries it. Kept as a class handle in case a future edit needs to hide the label at
     * narrow widths. */
}
@keyframes hrc-ai-progress-spin {
    to { transform: rotate(360deg); }
}
/* Users who set prefers-reduced-motion get a still ring (still visually distinct from the
 * ordinary Ask label; not a lie about progress). */
@media (prefers-reduced-motion: reduce) {
    .hrc-ai-progress-spinner {
        animation: none;
    }
}

/* ---- Syntax highlighter tokens (rendered by ai-log-highlight.js) --------------------------- */
.hrc-syn-string   { color: #22863a; }
.hrc-syn-number   { color: #b08800; }
.hrc-syn-boolean  { color: #0550ae; font-weight: 600; }
.hrc-syn-null     { color: #6e7781; font-style: italic; }
.hrc-syn-key      { color: #24292f; font-weight: 600; }
.hrc-syn-keyword  { color: #0550ae; font-weight: 600; }
.hrc-syn-comment  { color: #6e7781; font-style: italic; }

/* Dark-mode overrides (mirror Harbor's data-theme convention). */
:root[data-theme="dark"] .hrc-syn-string   { color: #7ee787; }
:root[data-theme="dark"] .hrc-syn-number   { color: #ffa657; }
:root[data-theme="dark"] .hrc-syn-boolean  { color: #79c0ff; }
:root[data-theme="dark"] .hrc-syn-null     { color: #8b949e; }
:root[data-theme="dark"] .hrc-syn-key      { color: #e6edf3; }
:root[data-theme="dark"] .hrc-syn-keyword  { color: #79c0ff; }
:root[data-theme="dark"] .hrc-syn-comment  { color: #8b949e; }