/* ==========================================================================
   Helpline · Guardian Hub — design system
   Modern, calm, enterprise. No emojis. Inter + Source Serif.
   ========================================================================== */

:root {
    /* Surfaces */
    --hl-bg:        #f3fbff;
    --hl-bg-2:      #e6f6f7;
    --hl-surface:   #ffffff;
    --hl-surface-2: #f5fbfb;
    --hl-line:      #d7eaee;
    --hl-line-2:    #bddde4;

    /* Ink */
    --hl-ink:       #082b67;
    --hl-ink-2:     #0f5f72;
    --hl-ink-soft:  #4a7f8a;

    /* Accents */
    --hl-accent:        #009b93;
    --hl-accent-2:      #ff970f;
    --hl-accent-soft:   #d9f4f1;
    --hl-accent-glow:   rgba(0, 155, 147, .16);

    --hl-safe:          #009b93;
    --hl-safe-soft:     #d9f4f1;
    --hl-warn:          #ff970f;
    --hl-warn-soft:     #fff0d6;
    --hl-critical:      #d14d2a;
    --hl-critical-soft: #ffe0d5;
    --hl-critical-glow: rgba(209, 77, 42, .18);

    /* Geometry */
    --hl-r-xs: 8px;
    --hl-r-sm: 10px;
    --hl-r:    14px;
    --hl-r-lg: 20px;

    /* Shadow */
    --hl-shadow-1: 0 1px 1px rgba(8,43,103,.04), 0 1px 2px rgba(0,155,147,.04);
    --hl-shadow-2: 0 1px 2px rgba(8,43,103,.05), 0 8px 24px rgba(0,155,147,.07);
    --hl-shadow-3: 0 2px 4px rgba(8,43,103,.06), 0 24px 48px rgba(0,155,147,.12);
    --hl-ring:     0 0 0 3px var(--hl-accent-glow);

    /* Layout */
    --hl-sidebar-w: 252px;
    --hl-topbar-h:  64px;
    --hl-auth-viewport-h: 100dvh;
    --hl-auth-window-offset-y: 0px;
    --hl-auth-face-adjust-y: 0px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { overflow-x: clip; }
body.hl-body {
    margin: 0;
    background: var(--hl-bg);
    color: var(--hl-ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--hl-accent-soft); color: var(--hl-ink); }

/* ---------- App shell ---------- */
.hl-shell { display: grid; grid-template-columns: var(--hl-sidebar-w) 1fr; min-height: 100vh; }
.hl-shell-public { grid-template-columns: 1fr; min-height: var(--hl-auth-viewport-h, 100dvh); }

.hl-nav-toggle,
.hl-sidebar-backdrop {
    display: none;
}

.hl-sidebar {
    position: sticky; top: 0; align-self: start; height: 100vh;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #ffffff 0%, #e8f8f7 100%);
    border-right: 1px solid var(--hl-line);
    padding: 1.25rem 1rem 1rem;
}

.hl-brand {
    display: flex; align-items: center; justify-content: center; gap: 0;
    padding: .2rem .15rem 1.15rem; border-bottom: 1px solid rgba(31,29,26,.08);
    margin-bottom: 1rem;
}
.hl-brand-mark {
    width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #082b67, #009b93 62%, #ff970f);
    color: #fff;
    box-shadow:
        0 1px 1px rgba(8,43,103,.08),
        0 8px 18px rgba(0,155,147,.20);
}
.hl-brand-mark .hl-icon { width: 18px; height: 18px; }
.hl-brand-logo {
    width: 68px;
    height: 68px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}
.hl-brand-text { display: none; }

.hl-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.hl-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hl-nav-section {
    padding: .4rem .75rem .25rem;
    color: var(--hl-ink-soft);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.hl-nav-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .75rem; border-radius: var(--hl-r-sm);
    color: var(--hl-ink-2); font-weight: 500; font-size: .92rem;
    transition: background .12s ease, color .12s ease, transform .08s ease;
}
.hl-nav-link:hover { background: rgba(0, 155, 147, .08); color: var(--hl-ink); }
.hl-nav-link:active { transform: translateY(1px); }
.hl-nav-link .hl-icon { width: 18px; height: 18px; color: var(--hl-ink-soft); }
.hl-nav-link:hover .hl-icon { color: var(--hl-accent); }

.hl-sidebar-footer {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding-top: 1rem; border-top: 1px solid var(--hl-line);
}
.hl-userchip { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.hl-userchip-meta { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.hl-userchip-meta strong { font-size: .88rem; color: var(--hl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.hl-userchip-meta small { font-size: .72rem; color: var(--hl-ink-soft); }

.hl-iconbtn {
    width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--hl-ink-soft); border: 1px solid transparent;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.hl-iconbtn:hover { background: var(--hl-surface); color: var(--hl-accent); border-color: var(--hl-line); }

/* ---------- Main column ---------- */
.hl-main { display: flex; flex-direction: column; min-width: 0; overflow-x: clip; }

.hl-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.hl-status-online { background: var(--hl-safe); box-shadow: 0 0 0 4px rgba(74,122,90,.18); }
.hl-status-offline { background: var(--hl-ink-soft); }

.hl-content { padding: 1.75rem 2rem 3rem; width: 100%; max-width: none; }

/* ---------- Icons ---------- */
.hl-icon { width: 16px; height: 16px; flex-shrink: 0; }
.hl-icon-lg { width: 20px; height: 20px; }
.hl-icon-xl { width: 28px; height: 28px; }

/* ---------- Page header ---------- */
.hl-page-header {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
    margin-bottom: 1.5rem; flex-wrap: wrap;
}
.hl-h1 {
    font-family: "Source Serif 4", serif; font-weight: 600;
    font-size: 1.85rem; margin: 0 0 .25rem; color: var(--hl-ink); letter-spacing: -.015em;
}
.hl-sub { color: var(--hl-ink-soft); margin: 0; font-size: .92rem; }

/* ---------- KPI cards ---------- */
.hl-kpis { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 1.5rem; }
.hl-kpi {
    position: relative; overflow: hidden;
    background: var(--hl-surface); border: 1px solid var(--hl-line);
    border-radius: var(--hl-r); padding: 1.1rem 1.2rem;
    box-shadow: var(--hl-shadow-1); transition: box-shadow .15s ease, transform .15s ease;
}
.hl-kpi:hover { box-shadow: var(--hl-shadow-2); transform: translateY(-1px); }
.hl-kpi-head { display: flex; align-items: center; justify-content: space-between; color: var(--hl-ink-soft); }
.hl-kpi-head .hl-icon { color: var(--hl-ink-soft); }
.hl-kpi-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.hl-kpi-value {
    font-family: "Source Serif 4", serif; font-weight: 600;
    font-size: 2rem; color: var(--hl-ink); margin-top: .35rem; letter-spacing: -.02em;
}
.hl-kpi-foot { color: var(--hl-ink-soft); font-size: .8rem; margin-top: .25rem; }
.hl-kpi-critical { background: linear-gradient(180deg, #fff 0%, var(--hl-critical-soft) 180%); border-color: var(--hl-critical-soft); }
.hl-kpi-critical .hl-kpi-value, .hl-kpi-critical .hl-icon { color: var(--hl-critical); }
.hl-kpi-accent { background: linear-gradient(180deg, #fff 0%, var(--hl-accent-soft) 220%); }
.hl-kpi-accent .hl-kpi-value { color: var(--hl-accent); }
.hl-kpi-safe .hl-kpi-value, .hl-kpi-safe .hl-icon { color: var(--hl-safe); }

/* ---------- Alerts ---------- */
.hl-alert {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .9rem 1.1rem; border-radius: var(--hl-r);
    margin-bottom: 1.25rem; border: 1px solid var(--hl-line);
    background: var(--hl-surface);
}
.hl-alert-critical {
    background: linear-gradient(90deg, var(--hl-critical-soft) 0%, #fff5f1 100%);
    color: var(--hl-critical); border-color: var(--hl-critical-soft);
    box-shadow: 0 8px 28px var(--hl-critical-glow);
}
.hl-alert-critical strong { color: var(--hl-critical); }
.hl-alert-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(209, 77, 42, .12); color: var(--hl-critical);
    box-shadow: 0 0 0 0 rgba(209,77,42,.4); animation: hl-pulse 1.8s infinite;
}
@keyframes hl-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(209,77,42,.45); }
    70%  { box-shadow: 0 0 0 14px rgba(209,77,42,0); }
    100% { box-shadow: 0 0 0 0 rgba(209,77,42,0); }
}

/* ---------- Conversation queue cards ---------- */
.hl-section-title {
    font-size: .8rem; font-weight: 600; color: var(--hl-ink-soft);
    letter-spacing: .08em; text-transform: uppercase; margin: 1.5rem 0 .75rem;
}
.hl-queue { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.hl-card {
    display: block; color: inherit; background: var(--hl-surface);
    border: 1px solid var(--hl-line); border-radius: var(--hl-r);
    padding: 1.1rem 1.2rem; box-shadow: var(--hl-shadow-1);
    transition: transform .12s ease, box-shadow .15s ease, border-color .12s ease;
    position: relative; overflow: hidden;
}
.hl-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--hl-line);
}
.hl-card:hover { transform: translateY(-2px); box-shadow: var(--hl-shadow-2); border-color: var(--hl-line-2); }
.hl-card-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .65rem; }
.hl-card-id { font-weight: 600; font-size: .95rem; }
.hl-card-meta { color: var(--hl-ink-soft); font-size: .82rem; display: flex; align-items: center; gap: .35rem; margin-top: .35rem; }
.hl-card-critical::before { background: var(--hl-critical); }
.hl-card-high::before     { background: var(--hl-warn); }
.hl-card-normal::before   { background: var(--hl-safe); }

/* ---------- Pills / badges ---------- */
.hl-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .6rem; border-radius: 999px; font-size: .72rem;
    font-weight: 600; letter-spacing: .03em;
}
.hl-pri-critical { background: var(--hl-critical-soft); color: var(--hl-critical); }
.hl-pri-high     { background: var(--hl-warn-soft); color: var(--hl-warn); }
.hl-pri-normal   { background: var(--hl-safe-soft); color: var(--hl-safe); }
.hl-state {
    color: var(--hl-ink-soft); font-size: .78rem; padding: .25rem .55rem;
    border-radius: 999px; background: var(--hl-bg-2);
}
.hl-pill-online   { background: var(--hl-safe-soft); color: var(--hl-safe); }
.hl-pill-offline  { background: var(--hl-bg-2); color: var(--hl-ink-soft); }
.hl-pill-admin    { background: var(--hl-accent-soft); color: var(--hl-accent); }
.hl-pill-guardian { background: var(--hl-bg-2); color: var(--hl-ink-2); }

.hl-empty {
    grid-column: 1/-1; padding: 2.25rem; text-align: center;
    color: var(--hl-ink-soft); background: var(--hl-surface);
    border: 1px dashed var(--hl-line); border-radius: var(--hl-r);
}

/* ---------- Buttons ---------- */
.hl-btn {
    display: inline-flex; align-items: center; gap: .45rem; justify-content: center;
    border: 1px solid transparent; border-radius: var(--hl-r-sm);
    padding: .55rem 1rem; font-weight: 500; font-size: .9rem;
    transition: filter .12s ease, transform .08s ease, box-shadow .12s ease;
    text-decoration: none;
}
.hl-btn:hover { filter: brightness(.97); }
.hl-btn:active { transform: translateY(1px); }
.hl-btn:focus-visible { outline: none; box-shadow: var(--hl-ring); }
.hl-btn:disabled,
.hl-btn[disabled] {
    cursor: not-allowed;
    filter: grayscale(.1) brightness(.95);
    opacity: .72;
    transform: none;
}
.hl-btn-primary {
    background: linear-gradient(180deg, var(--hl-accent-2) 0%, var(--hl-accent) 100%);
    color: #fff; border-color: var(--hl-accent);
    box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 4px 12px rgba(0,155,147,.25);
}
.hl-btn-danger {
    background: var(--hl-critical); color: #fff; border-color: var(--hl-critical);
    box-shadow: 0 4px 12px var(--hl-critical-glow);
}
.hl-btn-light { background: var(--hl-surface); color: var(--hl-ink); border-color: var(--hl-line); }
.hl-btn-ghost { background: transparent; color: var(--hl-ink-2); border-color: transparent; }
.hl-btn-ghost:hover { background: var(--hl-bg-2); }
.hl-btn-block { width: 100%; }

.hl-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.hl-inline { display: inline; }

/* ---------- Chat ---------- */
.hl-chat {
    background: var(--hl-surface); border: 1px solid var(--hl-line);
    border-radius: var(--hl-r); box-shadow: var(--hl-shadow-1);
    display: flex; flex-direction: column; min-height: 64vh; overflow: hidden;
}
.hl-chat-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--hl-line); background: var(--hl-surface-2);
}
.hl-chat-stream {
    display: flex; flex-direction: column; gap: .65rem;
    flex: 1; max-height: 62vh; overflow-y: auto; padding: 1.25rem;
}
.hl-msgrow { display: flex; align-items: flex-end; gap: .55rem; }
.hl-msgrow-out { justify-content: flex-end; }
.hl-msgrow-system { justify-content: center; }

.hl-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #ddc7ad, #c89e6f); color: #fff;
    font-weight: 600; font-size: .78rem; letter-spacing: .02em;
    box-shadow: var(--hl-shadow-1);
}
.hl-avatar-sm { width: 30px; height: 30px; font-size: .72rem; }
.hl-avatar-guardian { background: linear-gradient(135deg, var(--hl-accent-2), var(--hl-accent)); }
.hl-avatar-system { background: linear-gradient(135deg, #b9aa92, #8a7c64); }

.hl-msg {
    max-width: 68%; padding: .65rem .85rem; border-radius: 14px;
    box-shadow: var(--hl-shadow-1); position: relative;
}
.hl-msg-body { white-space: pre-wrap; word-wrap: break-word; font-size: .93rem; }
.hl-msg-meta { font-size: .7rem; color: var(--hl-ink-soft); margin-top: .3rem; text-align: right; }
.hl-msg-in {
    background: var(--hl-bg-2); color: var(--hl-ink); border-bottom-left-radius: 4px;
}
.hl-msg-out {
    background: linear-gradient(180deg, var(--hl-accent-2), var(--hl-accent));
    color: #fff; border-bottom-right-radius: 4px;
}
.hl-msg-out .hl-msg-meta { color: rgba(255,255,255,.85); }
.hl-msg-system {
    background: transparent; color: var(--hl-ink-soft); font-size: .85rem;
    box-shadow: none; border: 1px dashed var(--hl-line); padding: .5rem .9rem;
    border-radius: 999px; max-width: 80%; text-align: center;
}

.hl-compose {
    display: flex; gap: .5rem; flex-wrap: wrap; padding: .85rem 1rem;
    border-top: 1px solid var(--hl-line); background: var(--hl-surface-2);
}
.hl-compose-sending .hl-input {
    opacity: .78;
}
.hl-send-loader {
    display: none;
    width: 1em;
    height: 1em;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hl-send-spin .7s linear infinite;
}
.hl-compose-sending .hl-send-icon {
    display: none;
}
.hl-compose-sending .hl-send-loader {
    display: inline-block;
}
@keyframes hl-send-spin {
    to { transform: rotate(360deg); }
}
.hl-input {
    flex: 1; padding: .7rem .9rem; border-radius: var(--hl-r-sm);
    border: 1px solid var(--hl-line); background: var(--hl-surface);
    font: inherit; color: var(--hl-ink); transition: border-color .12s ease, box-shadow .12s ease;
    min-width: 0;
}
.hl-input:focus { outline: none; border-color: var(--hl-accent); box-shadow: var(--hl-ring); }

/* ---------- Table ---------- */
.hl-table-wrap {
    background: var(--hl-surface); border: 1px solid var(--hl-line);
    border-radius: var(--hl-r); overflow-x: auto; overflow-y: hidden; box-shadow: var(--hl-shadow-1);
}
.hl-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.hl-table th, .hl-table td {
    padding: .9rem 1.15rem; text-align: left; border-bottom: 1px solid var(--hl-line);
    vertical-align: middle;
}
.hl-table th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--hl-ink-soft); background: var(--hl-surface-2); font-weight: 600;
}
.hl-table tr:last-child td { border-bottom: none; }
.hl-table tbody tr { transition: background .1s ease; }
.hl-table tbody tr:hover { background: var(--hl-surface-2); }
.hl-name { display: flex; align-items: center; gap: .65rem; }

/* ---------- Auth (split-screen) ---------- */
.hl-auth {
    min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr;
    background: var(--hl-bg);
}
.hl-auth-brand {
    position: relative; overflow: hidden;
    background: radial-gradient(120% 120% at 0% 0%, #ffffff 0%, #d9f4f1 36%, #009b93 72%, #082b67 100%);
    color: var(--hl-ink); padding: 3rem;
    display: flex; flex-direction: column; justify-content: space-between;
}
.hl-auth-brand::after {
    content: ""; position: absolute; right: -120px; bottom: -180px;
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent 70%);
    pointer-events: none;
}
.hl-auth-brand .hl-brand-mark { width: 48px; height: 48px; border-radius: 14px; }
.hl-auth-brand .hl-brand-mark .hl-icon { width: 26px; height: 26px; }
.hl-auth-brand h2 {
    font-family: "Source Serif 4", serif; font-weight: 600;
    font-size: 2.4rem; line-height: 1.15; max-width: 26ch; margin: 0;
    letter-spacing: -.02em;
}
.hl-auth-brand p { color: var(--hl-ink-2); max-width: 38ch; margin-top: .9rem; }

.hl-auth-quote {
    background: rgba(255,255,255,.55); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.6);
    padding: 1.1rem 1.25rem; border-radius: var(--hl-r); max-width: 38ch;
    color: var(--hl-ink-2); font-size: .92rem;
}
.hl-auth-quote strong { color: var(--hl-ink); }

.hl-auth-panel {
    display: flex; align-items: center; justify-content: center; padding: 2.5rem;
    background: var(--hl-surface);
}
.hl-auth-card {
    width: 100%; max-width: 440px;
}
.hl-auth-card .hl-h1 { font-size: 1.7rem; }
.hl-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }
.hl-field { display: flex; flex-direction: column; gap: .35rem; }
.hl-field label { font-size: .82rem; color: var(--hl-ink-2); font-weight: 500; }
.hl-error { color: var(--hl-critical); font-size: .8rem; }
.hl-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .25rem; }
.hl-link { color: var(--hl-accent); font-size: .9rem; font-weight: 500; }
.hl-link:hover { text-decoration: underline; }

.hl-role-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.hl-role-option {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .85rem .9rem; border: 1px solid var(--hl-line);
    border-radius: var(--hl-r-sm); background: var(--hl-surface);
    cursor: pointer; transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.hl-role-option:hover { border-color: var(--hl-line-2); }
.hl-role-option input[type=radio] { margin-top: .25rem; accent-color: var(--hl-accent); }
.hl-role-option span { display: flex; flex-direction: column; gap: .15rem; }
.hl-role-option strong { color: var(--hl-ink); font-weight: 600; font-size: .92rem; }
.hl-role-option small { color: var(--hl-ink-soft); font-size: .78rem; }
.hl-role-option:has(input:checked) {
    border-color: var(--hl-accent); background: var(--hl-accent-soft); box-shadow: var(--hl-ring);
}

/* ---------- Simulator ---------- */
.hl-sim-grid {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.hl-panel {
    background: var(--hl-surface);
    border: 1px solid var(--hl-line);
    border-radius: var(--hl-r);
    box-shadow: var(--hl-shadow-1);
    padding: 1.2rem;
}

.hl-textarea {
    min-height: 120px;
    resize: vertical;
}

.hl-meta-list {
    display: grid;
    gap: .75rem;
}

.hl-meta-item {
    display: grid;
    gap: .2rem;
}

.hl-meta-item small {
    color: var(--hl-ink-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    font-weight: 600;
}

.hl-meta-item strong {
    color: var(--hl-ink);
    word-break: break-word;
}

.hl-filter-summary-panel {
    margin-top: 1rem;
    padding: 1rem 1.15rem;
}

.hl-filter-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .85rem;
}

.hl-filter-summary-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.hl-filter-summary-item {
    padding: .95rem 1rem;
    border-radius: 16px;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(231,223,209,.72);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}

.hl-filter-summary-item small {
    display: block;
    margin-bottom: .25rem;
    color: var(--hl-ink-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .7rem;
    font-weight: 700;
}

.hl-filter-summary-item strong {
    color: var(--hl-ink);
    word-break: break-word;
}

.hl-filter-modal {
    width: min(720px, 100%);
}

.hl-filter-modal-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.hl-filter-modal-form-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hl-filter-modal-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    margin-top: .25rem;
}

.hl-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.hl-heatmap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: .55rem;
}

.hl-heat-cell {
    min-height: 64px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: .55rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.16)),
        rgba(0,155,147, calc(var(--heat) * .58));
    border: 1px solid rgba(215,234,238,.7);
    color: var(--hl-ink);
}

.hl-heat-cell span {
    color: var(--hl-ink-soft);
    font-size: .72rem;
}

.hl-heat-cell strong {
    font-size: 1.25rem;
}

.hl-report-bar {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem .95rem;
    margin-bottom: .6rem;
    border-radius: 14px;
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(215,234,238,.72);
}

.hl-report-bar i {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hl-accent-2), var(--hl-accent));
    border-radius: 999px;
}

.hl-outcome-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .45rem;
    min-width: 0;
}

.hl-note {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border-radius: var(--hl-r-sm);
    background: var(--hl-surface-2);
    border: 1px dashed var(--hl-line);
    color: var(--hl-ink-2);
    font-size: .88rem;
}

@media (min-width: 1800px) {
    :root {
        --hl-sidebar-w: 288px;
    }

    body.hl-body {
        font-size: 17px;
    }

    .hl-content {
        padding: 2.5rem 3rem 4rem;
    }

    .hl-kpis {
        grid-template-columns: repeat(4, minmax(220px, 1fr));
    }

    .hl-queue {
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    }

    .hl-panel,
    .hl-card,
    .hl-kpi,
    .hl-page-header {
        border-radius: 28px;
    }
}

.hl-assistant-widget {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
    transform: translate3d(0, 0, 0);
    transition: opacity .32s ease, transform .42s cubic-bezier(.2,.9,.25,1.1);
    will-change: opacity, transform;
}

.hl-assistant-toggle {
    position: relative;
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background:
        radial-gradient(circle at 35% 22%, rgba(255,255,255,.9), rgba(255,255,255,.12) 28%, transparent 42%),
        conic-gradient(from 210deg, #d9f4f1, #009b93, #082b67, #ff970f, #009b93, #d9f4f1);
    color: #fff;
    box-shadow:
        0 20px 46px rgba(0,155,147,.36),
        0 0 0 1px rgba(255,255,255,.65) inset,
        0 0 36px rgba(255,151,15,.30);
    overflow: visible;
    isolation: isolate;
    transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}

.hl-assistant-toggle:hover {
    transform: translateY(-4px) scale(1.04);
    filter: saturate(1.15);
    box-shadow:
        0 26px 60px rgba(0,155,147,.46),
        0 0 0 1px rgba(255,255,255,.75) inset,
        0 0 46px rgba(255,151,15,.42);
}

.hl-assistant-toggle::after {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217,122,58,.22), transparent 62%);
    animation: hl-assistant-breathe 2.6s ease-in-out infinite;
    z-index: -3;
}

.hl-assistant-orbit {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.44);
    box-shadow: 0 0 0 1px rgba(124,58,20,.18) inset;
}

.hl-assistant-core {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.06)),
        radial-gradient(circle at 50% 78%, rgba(111,50,19,.55), transparent 48%);
    box-shadow:
        0 1px 0 rgba(255,255,255,.5) inset,
        0 10px 18px rgba(111,50,19,.22) inset;
}

.hl-assistant-face {
    position: relative;
    width: 34px;
    height: 24px;
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 12px 12px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: 0 0 16px rgba(255,255,255,.35);
}

.hl-assistant-face::after {
    content: "";
    position: absolute;
    bottom: -7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255,255,255,.9);
    border-bottom: 2px solid rgba(255,255,255,.9);
    transform: rotate(42deg);
    border-radius: 0 0 3px 0;
}

.hl-assistant-eye {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,.95);
    animation: hl-assistant-blink 4.8s ease-in-out infinite;
}

.hl-assistant-spark {
    position: absolute;
    right: 7px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff8da;
    box-shadow: 0 0 14px rgba(255,248,218,.95);
}

@keyframes hl-assistant-breathe {
    0%, 100% { opacity: .7; transform: scale(.98); }
    50%      { opacity: 1; transform: scale(1.08); }
}
@keyframes hl-assistant-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    95%           { transform: scaleY(.18); }
}

.hl-assistant-panel {
    width: min(380px, calc(100vw - 2rem));
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--hl-line);
    border-radius: var(--hl-r-lg);
    box-shadow: var(--hl-shadow-3);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.hl-assistant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem .85rem;
    border-bottom: 1px solid var(--hl-line);
    background: var(--hl-surface-2);
}

.hl-assistant-messages {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    max-height: 360px;
    overflow-y: auto;
    padding: 1rem;
}

.hl-assistant-msg {
    padding: .7rem .85rem;
    border-radius: 14px;
    font-size: .9rem;
    white-space: pre-wrap;
}

.hl-assistant-msg-assistant {
    background: var(--hl-surface-2);
    border: 1px solid var(--hl-line);
    color: var(--hl-ink);
    align-self: flex-start;
}

.hl-assistant-msg-user {
    background: linear-gradient(180deg, var(--hl-accent-2), var(--hl-accent));
    color: #fff;
    align-self: flex-end;
}

.hl-assistant-form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 0 1rem 1rem;
}

.hl-assistant-input {
    min-height: 96px;
}

.hl-assistant-actions {
    display: flex;
    justify-content: flex-end;
}

/* ---------- Assignment modal ---------- */
.hl-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(31, 29, 26, .42);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1000;
}

.hl-modal-backdrop[hidden] {
    display: none;
}

.hl-modal {
    width: min(560px, 100%);
    background: var(--hl-surface);
    border: 1px solid var(--hl-line);
    border-radius: var(--hl-r-lg);
    box-shadow: var(--hl-shadow-3);
    overflow: hidden;
}

.hl-modal-head,
.hl-modal-body,
.hl-modal-foot {
    padding: 1.1rem 1.25rem;
}

.hl-modal-head {
    border-bottom: 1px solid var(--hl-line);
    background: linear-gradient(180deg, #fff 0%, var(--hl-surface-2) 100%);
}

.hl-modal-title {
    margin: 0;
    font-family: "Source Serif 4", serif;
    font-size: 1.45rem;
}

.hl-offer-list {
    display: grid;
    gap: .85rem;
}

.hl-offer-card {
    border: 1px solid var(--hl-line);
    border-radius: var(--hl-r);
    padding: 1rem;
    background: var(--hl-surface-2);
}

.hl-offer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem;
}

.hl-offer-copy {
    color: var(--hl-ink-2);
    margin: 0 0 .9rem;
}

.hl-offer-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
}

/* ==========================================================================
   Futuristic enhancements (additive — preserves existing class API)
   Glass surfaces, motion, glow, animated auth shader background.
   ========================================================================== */

/* Custom scrollbar – logo palette, slim. */
* { scrollbar-width: thin; scrollbar-color: rgba(0,155,147,.38) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0,155,147,.45), rgba(8,43,103,.55));
    border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255,151,15,.72), rgba(0,155,147,.82));
    background-clip: padding-box;
}

/* Body gets a faint logo-palette aurora glow on the app shell. */
body.hl-body::before {
    content: ""; position: fixed; inset: -10vmax; z-index: -1;
    background:
        radial-gradient(60vmax 60vmax at 8% 6%, rgba(217, 244, 241, .72), transparent 60%),
        radial-gradient(50vmax 50vmax at 92% 12%, rgba(255, 151, 15, .20), transparent 60%),
        radial-gradient(70vmax 70vmax at 60% 110%, rgba(0, 155, 147, .22), transparent 60%);
    filter: blur(40px) saturate(115%);
    pointer-events: none;
    animation: hl-aurora-drift 24s ease-in-out infinite alternate;
}
@keyframes hl-aurora-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-2%, 1%, 0) scale(1.03); }
    100% { transform: translate3d(2%, -1%, 0) scale(1.01); }
}

/* Sidebar / topbar / cards — glass + subtle border highlight. */
.hl-sidebar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(232, 248, 247, .88) 100%),
        radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.6), transparent 60%);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border-right: 1px solid rgba(215, 234, 238, .8);
    box-shadow: inset -1px 0 0 rgba(255,255,255,.45);
}
.hl-topbar {
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(215, 234, 238, .7);
}

.hl-brand-mark {
    position: relative;
    background: linear-gradient(135deg, #082b67 0%, #009b93 62%, #ff970f 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,.22) inset,
        0 8px 18px rgba(0,155,147,.20),
        0 0 0 1px rgba(8,43,103,.16);
}
.hl-brand-mark::after {
    content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none;
    border: 1px solid rgba(255,255,255,.16);
}

/* Nav link — animated indicator on hover/active. */
.hl-nav-link { position: relative; }
.hl-nav-link::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 3px; height: 0; border-radius: 2px;
    background: linear-gradient(180deg, var(--hl-accent-2), var(--hl-accent));
    transform: translateY(-50%);
    transition: height .2s ease, opacity .2s ease;
    opacity: 0;
}
.hl-nav-link:hover::before { height: 60%; opacity: 1; }
.hl-nav-link.is-active {
    background: linear-gradient(90deg, rgba(0,155,147,.12), transparent 70%);
    color: var(--hl-ink);
}
.hl-nav-link.is-active::before { height: 70%; opacity: 1; }
.hl-nav-link.is-active .hl-icon { color: var(--hl-accent); }

/* KPI cards — subtle gradient sheen + accent glow on hover. */
.hl-kpi {
    background:
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)),
        radial-gradient(120% 90% at 100% 0%, rgba(0,155,147,.10), transparent 60%);
    border: 1px solid rgba(215, 234, 238, .9);
    backdrop-filter: blur(8px);
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.hl-kpi::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.55), transparent 35%);
    opacity: .6;
}
.hl-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(0,155,147,.18), 0 2px 6px rgba(8,43,103,.06);
    border-color: rgba(0, 155, 147, .45);
}

/* Queue cards — refined hover lift + accent glow. */
.hl-card {
    backdrop-filter: blur(6px);
    transition: transform .18s ease, box-shadow .25s ease, border-color .18s ease;
}
.hl-card-critical:hover { box-shadow: 0 18px 42px rgba(209,77,42,.22); border-color: rgba(209,77,42,.35); }
.hl-card-high:hover     { box-shadow: 0 18px 42px rgba(255,151,15,.22); border-color: rgba(255,151,15,.35); }
.hl-card-normal:hover   { box-shadow: 0 18px 42px rgba(0,155,147,.20);  border-color: rgba(0,155,147,.30); }

/* Live dot pulse. */
.hl-status-online { position: relative; }
.hl-status-online::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0,155,147,.6);
    animation: hl-live-pulse 2s ease-out infinite;
}
@keyframes hl-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0,155,147,.55); }
    70%  { box-shadow: 0 0 0 10px rgba(0,155,147,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,155,147,0); }
}

/* Buttons — glow on primary, smoother focus ring. */
.hl-btn { position: relative; overflow: hidden; }
.hl-btn-primary {
    background: linear-gradient(180deg, #ff970f 0%, #009b93 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,.25) inset,
        0 8px 24px rgba(0,155,147,.32),
        0 0 0 1px rgba(8,43,103,.16);
}
.hl-btn-primary::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .6s ease;
}
.hl-btn-primary:hover::after { transform: translateX(100%); }
.hl-btn-primary:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,.3) inset,
        0 12px 32px rgba(0,155,147,.42),
        0 0 0 1px rgba(8,43,103,.18);
}

/* Inputs — refined focus state. */
.hl-input, .hl-textarea {
    background: rgba(255,255,255,.92);
    transition: border-color .15s ease, box-shadow .2s ease, background .15s ease;
}
.hl-input:hover, .hl-textarea:hover { border-color: var(--hl-line-2); }
.hl-input:focus, .hl-textarea:focus {
    background: #fff;
    border-color: var(--hl-accent);
    box-shadow: 0 0 0 4px rgba(0,155,147,.16), 0 6px 18px rgba(0,155,147,.10);
}

/* Chat bubble polish. */
.hl-msg-out {
    background: linear-gradient(135deg, #082b67 0%, #009b93 72%, #ff970f 100%);
    box-shadow: 0 8px 22px rgba(0,155,147,.26);
}
.hl-msg-in {
    background: linear-gradient(180deg, #fff 0%, var(--hl-bg-2) 100%);
    border: 1px solid rgba(231,223,209,.7);
}
.hl-chat {
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,246,240,.96));
    backdrop-filter: blur(10px);
}

/* Modal — glass + warm rim light. */
.hl-modal {
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,246,240,.96));
    border: 1px solid rgba(231,223,209,.85);
    box-shadow:
        0 30px 80px rgba(40,30,20,.28),
        0 0 0 1px rgba(255,255,255,.5) inset,
        0 -1px 0 rgba(217,122,58,.2) inset;
    animation: hl-modal-in .28s cubic-bezier(.2,.9,.25,1.15);
}
@keyframes hl-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ========================================================================== 
   Operations pages — futuristic command-center styling
   ========================================================================== */
#dashboard-root,
#guardians-root,
section:has(.hl-sim-grid) {
    position: relative;
    isolation: isolate;
}

#dashboard-root::before,
#guardians-root::before,
section:has(.hl-sim-grid)::before {
    content: "";
    position: absolute;
    inset: -1.75rem -2rem auto;
    height: 220px;
    border-radius: 0 0 32px 32px;
    background:
        radial-gradient(520px 160px at 12% 8%, rgba(0,155,147,.18), transparent 62%),
        radial-gradient(460px 180px at 84% 4%, rgba(255,151,15,.20), transparent 64%),
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(245,251,251,.62));
    border-bottom: 1px solid rgba(215,234,238,.74);
    box-shadow: 0 22px 70px rgba(0,155,147,.10);
    z-index: -1;
}

.hl-page-header {
    position: relative;
    padding: 1.15rem 1.2rem;
    border: 1px solid rgba(215,234,238,.78);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.84), rgba(245,251,251,.62)),
        radial-gradient(380px 140px at 100% 0%, rgba(255,151,15,.18), transparent 70%);
    box-shadow:
        0 14px 42px rgba(8,43,103,.06),
        0 1px 0 rgba(255,255,255,.72) inset;
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.hl-page-header::after {
    content: "";
    position: absolute;
    right: 1.1rem;
    top: 1.1rem;
    width: 92px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,151,15,.82), transparent);
    opacity: .75;
}

.hl-h1 {
    font-size: clamp(1.9rem, 2.8vw, 3rem);
    line-height: 1;
    background: linear-gradient(135deg, #082b67 0%, #009b93 62%, #ff970f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hl-kpis {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 1.15rem;
}

.hl-kpi {
    min-height: 150px;
    border-radius: 24px;
    padding: 1.25rem;
}

.hl-kpi::before {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -42px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217,122,58,.18), transparent 68%);
    pointer-events: none;
}

.hl-kpi-value {
    font-size: clamp(2.3rem, 4vw, 4rem);
    line-height: .95;
    margin-top: .65rem;
}

.hl-kpi-foot {
    margin-top: .75rem;
    font-weight: 500;
}

.hl-kpis-dashboard {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .9rem;
}

.hl-kpis-dashboard .hl-kpi {
    min-height: 128px;
    padding: 1rem 1rem .95rem;
}

.hl-kpis-dashboard .hl-kpi-value {
    font-size: clamp(2rem, 2.8vw, 3rem);
    margin-top: .5rem;
}

.hl-kpis-dashboard .hl-kpi-label {
    font-size: .72rem;
}

.hl-kpis-dashboard .hl-kpi-foot {
    margin-top: .6rem;
    font-size: .86rem;
}

.hl-section-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: 2rem;
    color: var(--hl-ink);
}

.hl-section-title::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hl-accent-2);
    box-shadow: 0 0 0 6px rgba(217,122,58,.12), 0 0 24px rgba(217,122,58,.42);
}

.hl-queue {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1.1rem;
}

.hl-card {
    min-height: 150px;
    border-radius: 22px;
    padding: 1.25rem;
    background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,250,243,.74)),
        radial-gradient(240px 100px at 100% 0%, rgba(217,122,58,.11), transparent 70%);
}

.hl-card::before {
    width: 5px;
    border-radius: 999px;
    top: 1rem;
    bottom: 1rem;
    left: .85rem;
}

.hl-card-row,
.hl-card-id,
.hl-card-meta {
    margin-left: .75rem;
}

.hl-card-id {
    font-size: 1.05rem;
    margin-top: 1.2rem;
}

.hl-pill,
.hl-state {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}

/* Simulator — split-screen control console. */
.hl-sim-grid {
    grid-template-columns: minmax(340px, 460px) minmax(0, 1fr);
    gap: 1.25rem;
}

.hl-panel {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 1.35rem;
    background:
        linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,250,243,.72)),
        radial-gradient(260px 120px at 100% 0%, rgba(217,122,58,.12), transparent 70%);
    border: 1px solid rgba(231,223,209,.78);
    box-shadow:
        0 18px 48px rgba(40,30,20,.07),
        0 1px 0 rgba(255,255,255,.72) inset;
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.hl-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, rgba(217,122,58,.05), rgba(217,122,58,.75), rgba(74,122,90,.45), rgba(217,122,58,.05));
}

.hl-textarea {
    min-height: 170px;
}

.hl-meta-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hl-meta-item {
    padding: .9rem 1rem;
    border: 1px solid rgba(231,223,209,.74);
    border-radius: 16px;
    background: rgba(255,255,255,.6);
}

.hl-note {
    border-style: solid;
    background:
        linear-gradient(135deg, rgba(255,255,255,.62), rgba(245,220,198,.5));
}

/* Guardians — premium roster table. */
#guardians-root .hl-table-wrap {
    border-radius: 24px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(231,223,209,.78);
    box-shadow:
        0 18px 50px rgba(40,30,20,.07),
        0 1px 0 rgba(255,255,255,.8) inset;
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
}

#guardians-root .hl-table th {
    padding: 1.05rem 1.25rem;
    background:
        linear-gradient(180deg, rgba(255,250,243,.95), rgba(250,246,240,.82));
    color: #6f3213;
}

#guardians-root .hl-table td {
    padding: 1.05rem 1.25rem;
}

#guardians-root .hl-table tbody tr {
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

#guardians-root .hl-table tbody tr:hover {
    background: rgba(245,251,251,.82);
    box-shadow: 0 12px 28px rgba(0,155,147,.10) inset;
}

#guardians-root .hl-avatar {
    width: 38px;
    height: 38px;
    box-shadow: 0 8px 18px rgba(0,155,147,.18);
}

#guardians-root .hl-name strong {
    font-size: .98rem;
}

@media (max-width: 1100px) {
    .hl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hl-sim-grid { grid-template-columns: 1fr; }
    .hl-report-grid { grid-template-columns: 1fr; }
    .hl-filter-modal-form,
    .hl-filter-modal-form-compact { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
    body.hl-body.hl-nav-open {
        overflow: hidden;
    }

    .hl-shell {
        grid-template-columns: 1fr;
    }

    /* Main content gets a soft "depth pushed back" effect when nav is open. */
    .hl-main {
        transition: transform .45s cubic-bezier(.2,.9,.25,1.05),
                    filter   .45s ease,
                    border-radius .45s ease;
        transform-origin: 100% 50%;
    }
    body.hl-body.hl-nav-open .hl-main {
        transform: scale(.94) translateX(8%);
        filter: blur(2px) saturate(.85) brightness(.92);
        border-radius: 28px;
        overflow: hidden;
        pointer-events: none;
    }

    /* ---------- Floating circular hamburger (matches brand mark vibe) ---------- */
    .hl-nav-toggle {
        position: fixed;
        top: 1rem;
        left: 1rem;
        z-index: 1400;
        width: 56px;
        height: 56px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        padding: 0;
        background:
            radial-gradient(circle at 32% 24%, rgba(255,255,255,.85), rgba(255,255,255,.1) 28%, transparent 44%),
            conic-gradient(from 220deg, #d9f4f1, #009b93, #082b67, #ff970f, #009b93, #d9f4f1);
        box-shadow:
            0 18px 40px rgba(0,155,147,.34),
            0 0 0 1px rgba(255,255,255,.65) inset,
            0 0 30px rgba(255,151,15,.25);
        isolation: isolate;
        transform: translate3d(0, 0, 0);
        will-change: transform;
        transition: transform .35s cubic-bezier(.2,.9,.25,1.15),
                    box-shadow .25s ease, filter .25s ease;
    }

    .hl-nav-toggle::after {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(217,122,58,.28), transparent 62%);
        animation: hl-assistant-breathe 2.8s ease-in-out infinite;
        z-index: -1;
    }

    .hl-nav-toggle:hover {
        transform: translateY(-2px) scale(1.04);
        filter: saturate(1.12);
    }

    .hl-nav-toggle:active {
        transform: scale(.96);
    }

    /* The 3 spans become a cleaner icon (top + middle + bottom bars). */
    .hl-nav-toggle span {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 22px;
        height: 2px;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 0 10px rgba(255,255,255,.55);
        transform-origin: 50% 50%;
        transition: transform .35s cubic-bezier(.2,.9,.25,1.15),
                    opacity .2s ease, width .35s ease;
    }
    .hl-nav-toggle span:nth-child(1) { transform: translate(-50%, -50%) translateY(-7px); }
    .hl-nav-toggle span:nth-child(2) { transform: translate(-50%, -50%); width: 16px; }
    .hl-nav-toggle span:nth-child(3) { transform: translate(-50%, -50%) translateY(7px); width: 12px; }

    body.hl-body.hl-nav-open .hl-nav-toggle {
        transform: translate3d(0, 0, 0) rotate(180deg);
    }
    body.hl-body.hl-nav-open .hl-nav-toggle span:nth-child(1) {
        transform: translate(-50%, -50%) rotate(45deg);
        width: 22px;
    }
    body.hl-body.hl-nav-open .hl-nav-toggle span:nth-child(2) {
        opacity: 0;
        width: 0;
    }
    body.hl-body.hl-nav-open .hl-nav-toggle span:nth-child(3) {
        transform: translate(-50%, -50%) rotate(-45deg);
        width: 22px;
    }

    /* ---------- Backdrop ---------- */
    .hl-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1250;
        background:
            radial-gradient(120% 80% at 0% 50%, rgba(111,50,19,.55), transparent 60%),
            rgba(31,29,26,.55);
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%);
        opacity: 0;
        transition: opacity .35s ease;
    }
    body.hl-body.hl-nav-open .hl-sidebar-backdrop {
        opacity: 1;
    }

    /* ---------- Immersive sidebar ---------- */
    .hl-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1300;
        width: min(92vw, 380px);
        height: 100vh;
        transform: translateX(-110%);
        transition: transform .5s cubic-bezier(.2,.9,.25,1.05),
                    box-shadow .5s ease;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 5.5rem 1.25rem 1.5rem;
        background:
            radial-gradient(140% 60% at 0% 0%, rgba(255,225,180,.65), transparent 60%),
            radial-gradient(120% 80% at 100% 100%, rgba(217,122,58,.32), transparent 65%),
            linear-gradient(165deg, rgba(255,250,243,.96) 0%, rgba(247,238,224,.96) 60%, rgba(241,217,184,.96) 100%);
        backdrop-filter: blur(28px) saturate(140%);
        -webkit-backdrop-filter: blur(28px) saturate(140%);
        border-right: 1px solid rgba(255,255,255,.45);
        border-radius: 0 32px 32px 0;
        box-shadow:
            0 30px 90px rgba(40,30,20,.35),
            1px 0 0 rgba(255,255,255,.6) inset;
    }

    /* Decorative aurora orb behind brand. */
    .hl-sidebar::before {
        content: "";
        position: absolute;
        top: -80px;
        right: -60px;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(217,122,58,.45), transparent 65%);
        pointer-events: none;
        animation: hl-aurora-drift 18s ease-in-out infinite alternate;
    }

    body.hl-body.hl-nav-open .hl-sidebar {
        transform: translateX(0);
    }

    /* Brand inside sidebar — clean product header. */
    .hl-sidebar .hl-brand {
        gap: .75rem;
        padding: .1rem .25rem 1.2rem;
        border-bottom: 1px solid rgba(31,29,26,.08);
        margin-bottom: 1rem;
        position: relative;
    }
    .hl-sidebar .hl-brand-mark {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .hl-sidebar .hl-brand-mark .hl-icon {
        width: 18px;
        height: 18px;
    }
    .hl-sidebar .hl-brand-text strong {
        font-size: 1rem;
        line-height: 1;
    }
    .hl-sidebar .hl-brand-text small {
        font-size: .62rem;
        letter-spacing: .095em;
    }

    /* Nav becomes large pill cards with stagger entrance. */
    .hl-sidebar .hl-nav {
        gap: .5rem;
    }

    .hl-sidebar .hl-nav-group {
        gap: .35rem;
    }

    .hl-sidebar .hl-nav-section {
        padding: .15rem .4rem .05rem;
        font-size: .66rem;
        letter-spacing: .14em;
    }

    .hl-sidebar .hl-nav-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: .9rem;
        padding: .95rem 1rem .95rem 1.1rem;
        border-radius: 18px;
        font-size: 1rem;
        font-weight: 500;
        color: var(--hl-ink-2);
        background: rgba(255,255,255,.55);
        border: 1px solid rgba(255,255,255,.7);
        box-shadow:
            0 1px 0 rgba(255,255,255,.7) inset,
            0 6px 16px rgba(40,30,20,.04);
        opacity: 0;
        transform: translateX(-18px);
        transition: transform .35s cubic-bezier(.2,.9,.25,1.1),
                    opacity .35s ease,
                    background .2s ease,
                    border-color .2s ease,
                    box-shadow .25s ease,
                    color .2s ease;
    }

    body.hl-body.hl-nav-open .hl-sidebar .hl-nav-link {
        opacity: 1;
        transform: translateX(0);
    }

    /* Stagger the entrance: each link delays a touch more. */
    body.hl-body.hl-nav-open .hl-sidebar .hl-nav-link:nth-child(1) { transition-delay: .08s; }
    body.hl-body.hl-nav-open .hl-sidebar .hl-nav-link:nth-child(2) { transition-delay: .14s; }
    body.hl-body.hl-nav-open .hl-sidebar .hl-nav-link:nth-child(3) { transition-delay: .20s; }
    body.hl-body.hl-nav-open .hl-sidebar .hl-nav-link:nth-child(4) { transition-delay: .26s; }
    body.hl-body.hl-nav-open .hl-sidebar .hl-nav-link:nth-child(5) { transition-delay: .32s; }
    body.hl-body.hl-nav-open .hl-sidebar .hl-nav-link:nth-child(6) { transition-delay: .38s; }

    /* Icon inside a "tile" capsule. */
    .hl-sidebar .hl-nav-link .hl-icon {
        width: 20px;
        height: 20px;
        padding: 8px;
        box-sizing: content-box;
        border-radius: 12px;
        background: linear-gradient(145deg, #fff, var(--hl-surface-2));
        border: 1px solid rgba(215,234,238,.85);
        color: var(--hl-accent);
        box-shadow: 0 4px 10px rgba(0,155,147,.12);
    }

    /* Chevron hint on the right of each link. */
    .hl-sidebar .hl-nav-link::after {
        content: "";
        margin-left: auto;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--hl-ink-soft);
        border-bottom: 2px solid var(--hl-ink-soft);
        transform: rotate(-45deg);
        opacity: .55;
        transition: transform .2s ease, opacity .2s ease, border-color .2s ease;
    }
    .hl-sidebar .hl-nav-link:hover::after {
        transform: translateX(3px) rotate(-45deg);
        opacity: 1;
        border-color: var(--hl-accent);
    }

    /* Reset the desktop ::before vertical bar for mobile (we use a different active style). */
    .hl-sidebar .hl-nav-link::before { display: none; }

    .hl-sidebar .hl-nav-link:hover {
        background: rgba(255,255,255,.85);
        border-color: rgba(0,155,147,.35);
        color: var(--hl-ink);
        box-shadow:
            0 1px 0 rgba(255,255,255,.8) inset,
            0 12px 26px rgba(0,155,147,.14);
        transform: translateX(2px);
    }

    .hl-sidebar .hl-nav-link.is-active {
        color: #fff;
        background: linear-gradient(135deg, #082b67 0%, #009b93 68%, #ff970f 100%);
        border-color: rgba(0,155,147,.45);
        box-shadow:
            0 1px 0 rgba(255,255,255,.35) inset,
            0 14px 30px rgba(0,155,147,.30);
    }
    .hl-sidebar .hl-nav-link.is-active .hl-icon {
        background: rgba(255,255,255,.18);
        border-color: rgba(255,255,255,.35);
        color: #fff;
        box-shadow: none;
    }
    .hl-sidebar .hl-nav-link.is-active::after {
        border-color: #fff;
        opacity: 1;
    }

    /* Footer chip — premium user card. */
    .hl-sidebar .hl-sidebar-footer {
        margin-top: 1.5rem;
        padding: .9rem 1rem;
        border-top: none;
        border-radius: 20px;
        background: rgba(255,255,255,.7);
        border: 1px solid rgba(255,255,255,.8);
        box-shadow:
            0 1px 0 rgba(255,255,255,.7) inset,
            0 12px 28px rgba(8,43,103,.06);
    }
    .hl-sidebar .hl-userchip-meta strong {
        font-size: .95rem;
        max-width: 180px;
    }
    .hl-sidebar .hl-iconbtn {
        background: linear-gradient(180deg, #fff, var(--hl-surface-2));
        border: 1px solid rgba(215,234,238,.9);
        color: var(--hl-accent);
        width: 40px;
        height: 40px;
        border-radius: 12px;
        box-shadow: 0 8px 18px rgba(0,155,147,.12);
    }
    .hl-sidebar .hl-iconbtn:hover {
        background: linear-gradient(180deg, var(--hl-accent-2), var(--hl-accent));
        color: #fff;
        border-color: var(--hl-accent);
    }

    .hl-content {
        padding: 5rem 1.25rem 2rem;
    }

    #dashboard-root::before,
    #guardians-root::before,
    section:has(.hl-sim-grid)::before {
        inset-inline: -1.25rem;
    }

    .hl-alert {
        align-items: flex-start;
        flex-direction: column;
    }

    .hl-actions {
        width: 100%;
    }

    .hl-modal {
        width: min(92vw, 640px);
    }

    /* Hide the floating chatbot orb while the mobile sidebar is open
       so it doesn't poke through the backdrop or twitch during transitions. */
    body.hl-body.hl-nav-open .hl-assistant-widget {
        opacity: 0;
        transform: translate3d(0, 24px, 0) scale(.78);
        pointer-events: none;
    }
}

@media (max-width: 720px) {
    .hl-kpis,
    .hl-meta-list,
    .hl-report-grid,
    .hl-filter-summary-grid,
    .hl-filter-summary-grid-compact { grid-template-columns: 1fr; }

    .hl-content { padding: 4.75rem 1rem 1.5rem; }

    .hl-page-header,
    .hl-panel,
    .hl-card,
    .hl-kpi,
    .hl-chat,
    .hl-table-wrap,
    .hl-modal {
        border-radius: 18px;
    }

    .hl-page-header {
        padding: 1rem;
    }

    .hl-page-header::after {
        width: 64px;
        right: 1rem;
    }

    .hl-h1 {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }

    .hl-queue {
        grid-template-columns: 1fr;
    }

    .hl-card-row,
    .hl-chat-head,
    .hl-offer-meta,
    .hl-filter-modal-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .hl-msg {
        max-width: 88%;
    }

    .hl-chat-stream {
        padding: 1rem .85rem;
        max-height: none;
    }

    .hl-compose {
        padding: .75rem;
    }

    .hl-compose .hl-input,
    .hl-compose .hl-btn,
    .hl-filter-modal-actions .hl-btn,
    .hl-actions .hl-btn,
    .hl-actions > button {
        width: 100%;
    }

    .hl-assistant-widget {
        right: 1rem;
        bottom: 1rem;
    }

    .hl-assistant-toggle { width: 60px; height: 60px; }

    .hl-assistant-panel {
        width: min(100vw - 1rem, 420px);
    }

    .hl-modal-backdrop {
        padding: .75rem;
    }

    .hl-modal-head,
    .hl-modal-body,
    .hl-modal-foot {
        padding: 1rem;
    }

    .hl-auth .hl-auth-panel {
        padding: 1.25rem .9rem;
    }

    .hl-auth .hl-auth-card {
        padding: 1.5rem 1.1rem 1.25rem;
    }

    .hl-role-choice {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hl-nav-toggle {
        width: 50px;
        height: 50px;
        top: .75rem;
        left: .75rem;
    }

    .hl-sidebar {
        width: 94vw;
        padding: 5rem 1rem 1.25rem;
        border-radius: 0 26px 26px 0;
    }

    body.hl-body.hl-nav-open .hl-main {
        transform: scale(.92) translateX(6%);
        border-radius: 22px;
    }

    .hl-content {
        padding: 4.25rem .75rem 1.25rem;
    }

    .hl-pill,
    .hl-state,
    .hl-btn,
    .hl-msg-body,
    .hl-sub {
        font-size: .84rem;
    }

    .hl-kpi-value {
        font-size: 2.1rem;
    }

    .hl-assistant-panel {
        width: calc(100vw - .5rem);
    }

    .hl-msg {
        max-width: 94%;
    }
}

/* ==========================================================================
   Auth — clean white aesthetic with soft orange shader behind a crisp card
   ========================================================================== */
.hl-auth {
    position: relative;
    overflow: hidden;
    min-height: var(--hl-auth-viewport-h, 100dvh);
    display: grid;
    grid-template-columns: 1fr;
    background: #ffffff;
}

/* Bubble stage \u2014 plain white. No filters: realism comes from the canvas itself. */
.hl-shader-stage {
    position: absolute; inset: 0; z-index: 0;
    background: #ffffff;
    overflow: hidden;
}
.hl-shader-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: block;
    background: transparent;
}
.hl-auth-grain { display: none; }
.hl-auth-vignette { display: none; }

/* Hide the old split-screen brand panel; the auth surface is now single-column. */
.hl-auth .hl-auth-brand { display: none; }
.hl-orbit { display: none; }

/* Centered glass-light auth panel. */
.hl-auth .hl-auth-panel {
    position: relative; z-index: 2;
    background: transparent;
    padding: clamp(1.5rem, 4vh, 3rem) 1.5rem;
    display: flex; align-items: center; justify-content: center;
    min-height: var(--hl-auth-viewport-h, 100dvh);
    transform: translateY(calc((var(--hl-auth-window-offset-y, 0px) * -1) + var(--hl-auth-face-adjust-y, 0px)));
}

/* Book flip — two faces share the same grid cell so the card auto-sizes
   to whichever face is taller, and the flip is a clean Y rotation. */
.hl-auth-flip {
    position: relative;
    width: 100%;
    max-width: 460px;
    perspective: 2200px;
    animation: hl-fade-up .7s ease both .15s;
}
.hl-auth-flip-inner {
    position: relative;
    display: grid;
    grid-template-areas: "stack";
    transform-style: preserve-3d;
    transition: transform .9s cubic-bezier(.76, 0, .24, 1);
    will-change: transform;
}
.hl-auth-flip.is-flipped .hl-auth-flip-inner {
    transform: rotateY(180deg);
}
.hl-auth-face {
    grid-area: stack;
    align-self: center;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    transition: opacity .25s ease;
}
.hl-auth-face-back {
    transform: rotateY(180deg);
}
/* Soft fade so the in-flight side never visually clips through. */
.hl-auth-flip:not(.is-flipped) .hl-auth-face-back  { opacity: 0; pointer-events: none; }
.hl-auth-flip.is-flipped         .hl-auth-face-front { opacity: 0; pointer-events: none; }

.hl-auth .hl-auth-card {
    position: relative;
    width: 100%;
    padding: 2.5rem 2.25rem 2rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 24px 60px rgba(0, 155, 147, 0.10),
        0 8px 24px rgba(8, 43, 103, 0.06),
        0 0 0 1px rgba(215, 234, 238, 0.55);
}
.hl-auth .hl-auth-card::before { display: none; }

/* Brand mark inline above title. */
.hl-auth-card-brand {
    display: inline-flex; align-items: center; justify-content: center; gap: 0;
    margin-bottom: 1.25rem;
    width: 100%;
}
.hl-auth-logo {
    width: 84px;
    height: 84px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}
.hl-auth-card-brand-text { display: none; }

.hl-auth .hl-auth-card .hl-h1 {
    font-size: 1.75rem;
    color: var(--hl-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
    margin: 0 0 .35rem;
}
.hl-auth .hl-auth-card .hl-sub { color: var(--hl-ink-soft); margin: 0; }

/* Form polish on the auth card. */
.hl-auth .hl-input {
    background: #ffffff;
    border: 1px solid rgba(215, 234, 238, 0.9);
    padding: .8rem 1rem;
    border-radius: 12px;
}
.hl-auth .hl-input:hover { border-color: rgba(0, 155, 147, 0.5); }
.hl-auth .hl-input:focus {
    background: #fff;
    border-color: var(--hl-accent);
    box-shadow: 0 0 0 4px rgba(0, 155, 147, 0.14), 0 6px 18px rgba(0, 155, 147, 0.10);
}

.hl-auth .hl-form { margin-top: 1.5rem; gap: 1rem; }
.hl-auth .hl-field label { font-weight: 500; color: var(--hl-ink-2); font-size: .82rem; }

.hl-auth .hl-btn-primary {
    padding: .85rem 1.1rem;
    border-radius: 12px;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .005em;
}

/* Role choice — clean white tiles with logo-palette selected ring. */
.hl-auth .hl-role-option {
    background: #ffffff;
    border: 1px solid rgba(215, 234, 238, 0.9);
    border-radius: 12px;
    padding: .9rem;
    transition: transform .15s ease, border-color .15s ease, box-shadow .2s ease, background .15s ease;
}
.hl-auth .hl-role-option:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 155, 147, 0.5);
}
.hl-auth .hl-role-option:has(input:checked) {
    background: linear-gradient(180deg, #f5fbfb, #d9f4f1);
    border-color: var(--hl-accent);
    box-shadow: 0 8px 22px rgba(0, 155, 147, 0.16), 0 0 0 3px rgba(0, 155, 147, 0.14);
}

/* Footer link row. */
.hl-auth .hl-form-actions {
    margin-top: .75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(231, 223, 209, 0.7);
}

@keyframes hl-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Misc — landing / privacy / error
   ========================================================================== */
.hl-prose {
    background: var(--hl-surface); border: 1px solid var(--hl-line);
    border-radius: var(--hl-r-lg); padding: 2rem 2.25rem;
    box-shadow: var(--hl-shadow-1); max-width: 820px;
}
.hl-prose h2 {
    font-family: "Source Serif 4", serif; font-weight: 600;
    margin: 1.5rem 0 .5rem; color: var(--hl-ink); font-size: 1.2rem;
}
.hl-prose h2:first-child { margin-top: 0; }
.hl-prose p { color: var(--hl-ink-2); margin: .5rem 0 1rem; }
.hl-prose ul { color: var(--hl-ink-2); padding-left: 1.25rem; margin: .25rem 0 1rem; }
.hl-prose li { margin: .25rem 0; }

.hl-error-shell {
    min-height: 70vh; display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}
.hl-error-card {
    max-width: 520px; text-align: center;
    background: var(--hl-surface);
    border: 1px solid var(--hl-line);
    border-radius: var(--hl-r-lg);
    padding: 2.5rem;
    box-shadow: var(--hl-shadow-3);
}
.hl-error-mark {
    width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #082b67, #009b93 58%, #ff970f);
    color: #fff;
    box-shadow: 0 12px 30px rgba(0,155,147,.25);
}
.hl-error-mark .hl-icon { width: 30px; height: 30px; }
.hl-error-code {
    display: inline-block; margin-top: 1rem; padding: .35rem .7rem;
    border-radius: 999px; background: var(--hl-bg-2);
    color: var(--hl-ink-soft); font-size: .78rem; font-family: ui-monospace, monospace;
}

/* Honor reduced motion globally. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   Responsive polish — every page on every screen
   (legacy 960px sidebar override removed; off-canvas owns mobile)
   ========================================================================== */

/* Mobile card-style tables (opt-in via data-label attributes on td).
   At <=640px, rows become stacked cards and each cell shows its label. */
@media (max-width: 640px) {
    .hl-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .hl-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0 .65rem;
    }

    .hl-table thead { display: none; }

    .hl-table tbody,
    .hl-table tr,
    .hl-table td {
        display: block;
        width: 100%;
    }

    .hl-table tbody tr {
        background: rgba(255,255,255,.92);
        border: 1px solid rgba(215,234,238,.78);
        border-radius: 18px;
        padding: .65rem .75rem;
        box-shadow: 0 8px 22px rgba(8,43,103,.05);
    }

    .hl-table tbody tr:hover {
        background: rgba(245,251,251,.95);
        box-shadow: 0 12px 30px rgba(0,155,147,.10);
    }

    .hl-table td {
        border: none;
        padding: .45rem .15rem;
        text-align: left;
        white-space: normal !important;
        max-width: none !important;
    }

    .hl-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--hl-ink-soft);
        margin-bottom: .2rem;
    }

    /* Pack the outcome form into a single readable column on phones. */
    .hl-outcome-form {
        grid-template-columns: 1fr;
    }

    /* Heatmap cells comfortable on phones. */
    .hl-heatmap {
        grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
        gap: .4rem;
    }
    .hl-heat-cell {
        min-height: 56px;
        padding: .4rem;
    }
    .hl-heat-cell strong {
        font-size: 1rem;
    }

    /* Page header: actions span full width and stack neatly. */
    .hl-page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .hl-page-header > div:first-child {
        min-width: 0;
    }
    .hl-page-header .hl-actions {
        margin-top: .5rem;
    }

    /* Filter summary panel — single column on phones. */
    .hl-filter-summary-panel {
        padding: .85rem;
    }

    /* Reports KPIs: two columns instead of one for a denser phone view. */
    .hl-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
    }
    .hl-kpi {
        min-height: 0;
        padding: .9rem;
    }
    .hl-kpi-value {
        font-size: clamp(1.7rem, 9vw, 2.4rem);
    }
}

/* Ultra-small phones (< 380px). */
@media (max-width: 380px) {
    .hl-kpis { grid-template-columns: 1fr; }
    .hl-content { padding: 4rem .65rem 1rem; }
    .hl-h1 { font-size: clamp(1.4rem, 8vw, 1.9rem); }
    .hl-prose { padding: 1.25rem 1rem; }
    .hl-error-card { padding: 1.75rem 1.25rem; }
}

/* Tablet portrait (iPad-ish) — keep KPIs and queue comfortable. */
@media (min-width: 720px) and (max-width: 1024px) {
    .hl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hl-queue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hl-report-grid { grid-template-columns: 1fr; }
}

/* Large desktops + 4K TVs — open up the layout. */
@media (min-width: 2200px) {
    :root { --hl-sidebar-w: 320px; }
    body.hl-body { font-size: 18px; }
    .hl-content { padding: 3rem 4rem 5rem; max-width: 2400px; margin: 0 auto; }
    .hl-kpis { grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 1.5rem; }
    .hl-queue { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
    .hl-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
    .hl-h1 { font-size: clamp(2.4rem, 2.4vw, 3.6rem); }
}

/* Landscape phones with short heights — let chat fill, not overflow. */
@media (max-height: 520px) and (orientation: landscape) {
    .hl-chat { min-height: 70vh; }
    .hl-chat-stream { max-height: 56vh; }
    .hl-content { padding-top: 4.25rem; }
}

/* Print — hide chrome, keep content readable. */
@media print {
    .hl-sidebar,
    .hl-nav-toggle,
    .hl-sidebar-backdrop,
    .hl-assistant-widget,
    .hl-modal-backdrop,
    .hl-actions,
    .hl-compose { display: none !important; }
    .hl-shell { grid-template-columns: 1fr !important; }
    .hl-content { padding: 1rem !important; }
    body.hl-body::before { display: none; }
}

/* ==========================================================================
   Final polish layer — universal lift across every page
   Additive only; uses existing tokens; preserves the colour scheme.
   ========================================================================== */

/* Smoother global focus ring for keyboard users — accessible + on-brand. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.hl-link:focus-visible,
.hl-card:focus-visible,
.hl-nav-link:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(255,255,255,.9),
        0 0 0 5px rgba(0,155,147,.55);
    border-radius: 12px;
}

/* Cascading entrance for content blocks — feels premium, not childish. */
@keyframes hl-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hl-content > section > .hl-page-header,
.hl-content > .hl-page-header,
.hl-content > section > .hl-kpis,
.hl-content > section > .hl-section-title,
.hl-content > section > .hl-queue,
.hl-content > section > .hl-table-wrap,
.hl-content > section > .hl-panel,
.hl-content > section > .hl-report-grid,
.hl-content > section > .hl-chat,
.hl-content > section > .hl-alert,
.hl-content > .hl-prose,
.hl-error-card {
    animation: hl-rise .55s cubic-bezier(.2,.9,.25,1.05) both;
}
.hl-content > section > *:nth-child(1) { animation-delay: .02s; }
.hl-content > section > *:nth-child(2) { animation-delay: .08s; }
.hl-content > section > *:nth-child(3) { animation-delay: .14s; }
.hl-content > section > *:nth-child(4) { animation-delay: .20s; }
.hl-content > section > *:nth-child(5) { animation-delay: .26s; }
.hl-content > section > *:nth-child(6) { animation-delay: .32s; }
.hl-content > section > *:nth-child(7) { animation-delay: .38s; }

/* Stagger the queue cards inside .hl-queue. */
.hl-queue > .hl-card { animation: hl-rise .55s cubic-bezier(.2,.9,.25,1.05) both; }
.hl-queue > .hl-card:nth-child(1) { animation-delay: .10s; }
.hl-queue > .hl-card:nth-child(2) { animation-delay: .16s; }
.hl-queue > .hl-card:nth-child(3) { animation-delay: .22s; }
.hl-queue > .hl-card:nth-child(4) { animation-delay: .28s; }
.hl-queue > .hl-card:nth-child(5) { animation-delay: .34s; }
.hl-queue > .hl-card:nth-child(6) { animation-delay: .40s; }
.hl-queue > .hl-card:nth-child(n+7) { animation-delay: .46s; }

/* Stagger KPI tiles. */
.hl-kpis > .hl-kpi { animation: hl-rise .55s cubic-bezier(.2,.9,.25,1.05) both; }
.hl-kpis > .hl-kpi:nth-child(1) { animation-delay: .06s; }
.hl-kpis > .hl-kpi:nth-child(2) { animation-delay: .12s; }
.hl-kpis > .hl-kpi:nth-child(3) { animation-delay: .18s; }
.hl-kpis > .hl-kpi:nth-child(4) { animation-delay: .24s; }
.hl-kpis > .hl-kpi:nth-child(n+5) { animation-delay: .30s; }

/* Friendlier ghost + light buttons (hover lift, subtle border tint). */
.hl-btn-light {
    background: linear-gradient(180deg, #ffffff, var(--hl-surface-2));
    border-color: rgba(215, 234, 238, .9);
    color: var(--hl-ink);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 14px rgba(8,43,103,.05);
}
.hl-btn-light:hover {
    border-color: rgba(0,155,147,.45);
    color: var(--hl-ink);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 22px rgba(0,155,147,.14);
}
.hl-btn-ghost {
    transition: background .15s ease, color .15s ease, transform .12s ease;
}
.hl-btn-ghost:hover { color: var(--hl-ink); transform: translateY(-1px); }

/* Danger button: bring it on-brand instead of flat red box. */
.hl-btn-danger {
    background: linear-gradient(180deg, #e35a36 0%, var(--hl-critical) 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,.22) inset,
        0 8px 22px rgba(209,77,42,.32),
        0 0 0 1px rgba(120,30,12,.18);
}
.hl-btn-danger:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,.28) inset,
        0 12px 28px rgba(209,77,42,.44),
        0 0 0 1px rgba(120,30,12,.20);
    transform: translateY(-1px);
}

/* Prose pages (Privacy / docs) — premium top accent + reading rhythm. */
.hl-prose {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,251,251,.94));
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.hl-prose::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, #082b67 0%, #009b93 60%, #ff970f 100%);
    opacity: .85;
}
.hl-prose h2 {
    display: flex; align-items: center; gap: .55rem;
    font-size: 1.25rem;
}
.hl-prose h2::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--hl-accent);
    box-shadow: 0 0 0 4px rgba(0,155,147,.14);
    flex: 0 0 auto;
}

/* Privacy page hero — match the dashboard's command-center treatment. */
#privacy-root {
    position: relative;
    isolation: isolate;
}
#privacy-root::before {
    content: "";
    position: absolute;
    inset: -1.75rem -2rem auto;
    height: 220px;
    border-radius: 0 0 32px 32px;
    background:
        radial-gradient(520px 160px at 12% 8%, rgba(0,155,147,.18), transparent 62%),
        radial-gradient(460px 180px at 84% 4%, rgba(255,151,15,.20), transparent 64%),
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(245,251,251,.62));
    border-bottom: 1px solid rgba(215,234,238,.74);
    box-shadow: 0 22px 70px rgba(0,155,147,.10);
    z-index: -1;
}

/* Friendlier empty state — soft, professional, not empty-feeling. */
.hl-empty {
    background:
        radial-gradient(280px 90px at 50% 0%, rgba(0,155,147,.08), transparent 70%),
        var(--hl-surface);
    color: var(--hl-ink-2);
    font-size: .92rem;
    line-height: 1.55;
    border-radius: 18px;
}

/* Conversation chat header — subtle gradient + lift. */
.hl-chat-head {
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,251,251,.85));
    border-bottom-color: rgba(215,234,238,.78);
}

/* Smooth chat scroll on touch + desktop. */
.hl-chat-stream { scroll-behavior: smooth; overscroll-behavior: contain; }

/* Outcome form (Reports) — let it breathe in dense tables. */
.hl-outcome-form {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .55rem;
    align-items: stretch;
}
.hl-outcome-form .hl-input {
    padding: .55rem .7rem;
    font-size: .85rem;
    border-radius: 10px;
}
.hl-outcome-form .hl-btn { padding: .55rem .9rem; font-size: .85rem; }

/* Pill icon spacing inside hl-actions. */
.hl-actions .hl-pill { padding: .35rem .7rem; gap: .4rem; }
.hl-actions .hl-pill .hl-icon { width: 14px; height: 14px; }

/* Sidebar nav: slight letter spacing + weight pop on active for legibility. */
.hl-nav-link.is-active { font-weight: 600; }

/* Tables: zebra rows for very long lists (additive, subtle). */
.hl-table tbody tr:nth-child(even) {
    background: rgba(245,251,251,.45);
}
.hl-table tbody tr:nth-child(even):hover {
    background: rgba(245,251,251,.85);
}

/* Selection highlight — warmer, on-brand. */
::selection { background: rgba(255,151,15,.28); color: var(--hl-ink); }

/* Caret colour aligns with brand. */
.hl-input, .hl-textarea { caret-color: var(--hl-accent); }

/* ==========================================================================
   SOLIDS-ONLY OVERRIDE LAYER
   Flattens every gradient surface to a single brand colour for a clean,
   kid-friendly, unfussy look. Uses existing palette tokens only.
   ========================================================================== */

/* Kill the body aurora glow — pure flat background. */
body.hl-body { background: var(--hl-bg); }
body.hl-body::before { display: none !important; }

/* Sidebar / topbar / surfaces — solid white. */
.hl-sidebar {
    background: var(--hl-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-right: 1px solid var(--hl-line);
}
.hl-topbar {
    background: var(--hl-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--hl-line);
}

/* Brand mark — solid teal tile. */
.hl-brand-mark {
    background: var(--hl-accent) !important;
    box-shadow: none !important;
}
.hl-brand-mark::after { display: none !important; }

/* H1 — solid ink colour, no clipped gradient text. */
.hl-h1 {
    background: none !important;
    -webkit-background-clip: initial !important;
            background-clip: initial !important;
    color: var(--hl-ink) !important;
    -webkit-text-fill-color: var(--hl-ink) !important;
}

/* Page header — solid surface, no radial bands. */
.hl-page-header {
    background: var(--hl-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 1px 0 var(--hl-line);
    border: 1px solid var(--hl-line);
}
.hl-page-header::after {
    background: var(--hl-accent-2) !important;
    opacity: .9;
}

/* Hero radial bands behind dashboard / guardians / privacy / simulator — gone. */
#dashboard-root::before,
#guardians-root::before,
#privacy-root::before,
section:has(.hl-sim-grid)::before { display: none !important; }

/* KPI cards — flat surface, light tinted variants. */
.hl-kpi {
    background: var(--hl-surface) !important;
    border: 1px solid var(--hl-line);
    backdrop-filter: none !important;
}
.hl-kpi::after,
.hl-kpi::before { display: none !important; }
.hl-kpi-accent    { background: var(--hl-accent-soft) !important; border-color: var(--hl-accent-soft); }
.hl-kpi-critical  { background: var(--hl-critical-soft) !important; border-color: var(--hl-critical-soft); }
.hl-kpi-safe      { background: var(--hl-safe-soft) !important; border-color: var(--hl-safe-soft); }

/* Section title indicator — solid dot, no glow ring. */
.hl-section-title::before {
    background: var(--hl-accent) !important;
    box-shadow: none !important;
}

/* Queue cards — solid white. */
.hl-card {
    background: var(--hl-surface) !important;
    backdrop-filter: none !important;
}
.hl-card-critical:hover,
.hl-card-high:hover,
.hl-card-normal:hover { box-shadow: var(--hl-shadow-2); }

/* Panels (simulator, reports, audit summary) — flat. */
.hl-panel {
    background: var(--hl-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.hl-panel::before {
    background: var(--hl-accent) !important;
    height: 3px;
}

/* Filter summary tiles + meta items — solid surface-2. */
.hl-filter-summary-item,
.hl-meta-item {
    background: var(--hl-surface-2) !important;
    border-color: var(--hl-line);
}

.hl-note {
    background: var(--hl-surface-2) !important;
}

/* Chat panel + bubbles — flat solid colours. */
.hl-chat {
    background: var(--hl-surface) !important;
    backdrop-filter: none !important;
}
.hl-chat-head {
    background: var(--hl-surface-2) !important;
    border-bottom-color: var(--hl-line);
}
.hl-msg-out {
    background: var(--hl-accent) !important;
    box-shadow: var(--hl-shadow-1);
}
.hl-msg-in {
    background: var(--hl-bg-2) !important;
    border: 1px solid var(--hl-line);
}

/* Buttons — solid fills, no shimmer. */
.hl-btn-primary {
    background: var(--hl-accent) !important;
    border-color: var(--hl-accent);
    color: #fff;
    box-shadow: none !important;
}
.hl-btn-primary:hover {
    background: var(--hl-ink-2) !important;
    box-shadow: none !important;
}
.hl-btn-primary::after { display: none !important; }
.hl-btn-danger {
    background: var(--hl-critical) !important;
    border-color: var(--hl-critical);
    box-shadow: none !important;
}
.hl-btn-danger:hover {
    filter: brightness(.95);
    box-shadow: none !important;
}
.hl-btn-light {
    background: var(--hl-surface) !important;
    border-color: var(--hl-line);
    color: var(--hl-ink);
    box-shadow: none !important;
}
.hl-btn-light:hover {
    background: var(--hl-surface-2) !important;
    border-color: var(--hl-line-2);
    color: var(--hl-ink);
    box-shadow: none !important;
}

/* Inputs — flat white. */
.hl-input, .hl-textarea {
    background: #fff !important;
}

/* Modal — flat surface card. */
.hl-modal {
    background: var(--hl-surface) !important;
    border: 1px solid var(--hl-line);
}
.hl-modal-head {
    background: var(--hl-surface-2) !important;
    border-bottom-color: var(--hl-line);
}

/* Avatars — solid brand colours instead of gradients. */
.hl-avatar          { background: var(--hl-ink-2) !important; }
.hl-avatar-guardian { background: var(--hl-accent) !important; }
.hl-avatar-system   { background: var(--hl-ink-soft) !important; }

/* Sidebar nav — solid active highlight. */
.hl-nav-link.is-active {
    background: var(--hl-accent-soft) !important;
    color: var(--hl-ink);
}
.hl-nav-link::before {
    background: var(--hl-accent) !important;
}

/* Tables — flat surface, plain header bar. */
.hl-table-wrap,
#guardians-root .hl-table-wrap {
    background: var(--hl-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: var(--hl-line);
}
.hl-table th,
#guardians-root .hl-table th {
    background: var(--hl-surface-2) !important;
    color: var(--hl-ink-2);
}

/* Heatmap cells — single tinted teal, opacity drives intensity. */
.hl-heat-cell {
    background: rgba(0, 155, 147, calc(var(--heat) * .55)) !important;
    border-color: var(--hl-line);
}

/* Risk / severity bars — flat fill. */
.hl-report-bar {
    background: var(--hl-surface-2) !important;
    border-color: var(--hl-line);
}
.hl-report-bar i {
    background: var(--hl-accent) !important;
}

/* Pills + states — already solid; ensure no inherited blur halos. */
.hl-pill, .hl-state {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Error mark — solid teal disc. */
.hl-error-mark {
    background: var(--hl-accent) !important;
    box-shadow: none !important;
}

/* Prose card — flat surface, solid accent rule on top. */
.hl-prose {
    background: var(--hl-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.hl-prose::before {
    background: var(--hl-accent) !important;
    height: 3px;
    opacity: 1;
}
.hl-prose h2::before {
    background: var(--hl-accent) !important;
    box-shadow: none !important;
}

/* Empty state — flat. */
.hl-empty {
    background: var(--hl-surface) !important;
}

/* Assistant widget — solid teal orb, no conic/glow. */
.hl-assistant-toggle {
    background: var(--hl-accent) !important;
    box-shadow: 0 6px 16px rgba(0,155,147,.25) !important;
}
.hl-assistant-toggle:hover {
    background: var(--hl-ink-2) !important;
    box-shadow: 0 8px 20px rgba(0,155,147,.30) !important;
    filter: none;
}
.hl-assistant-toggle::after { display: none !important; }
.hl-assistant-orbit { display: none !important; }
.hl-assistant-core {
    background: rgba(255,255,255,.18) !important;
    box-shadow: none !important;
}
.hl-assistant-msg-user {
    background: var(--hl-accent) !important;
}
.hl-assistant-panel {
    background: var(--hl-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.hl-assistant-head {
    background: var(--hl-surface-2) !important;
}

/* Mobile floating hamburger — solid teal disc. */
@media (max-width: 980px) {
    .hl-nav-toggle {
        background: var(--hl-accent) !important;
        box-shadow: 0 6px 16px rgba(0,155,147,.28) !important;
    }
    .hl-nav-toggle::after { display: none !important; }

    .hl-sidebar-backdrop {
        background: rgba(8, 43, 103, .45) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .hl-sidebar {
        background: var(--hl-surface) !important;
    }
    .hl-sidebar::before { display: none !important; }

    .hl-sidebar .hl-nav-link {
        background: var(--hl-surface) !important;
        border-color: var(--hl-line);
        box-shadow: none !important;
    }
    .hl-sidebar .hl-nav-link:hover {
        background: var(--hl-surface-2) !important;
        border-color: var(--hl-line-2);
        box-shadow: none !important;
    }
    .hl-sidebar .hl-nav-link.is-active {
        background: var(--hl-accent) !important;
        border-color: var(--hl-accent);
        color: #fff;
        box-shadow: none !important;
    }
    .hl-sidebar .hl-nav-link .hl-icon {
        background: var(--hl-surface-2) !important;
        border-color: var(--hl-line);
    }
    .hl-sidebar .hl-nav-link.is-active .hl-icon {
        background: rgba(255,255,255,.22) !important;
        border-color: rgba(255,255,255,.35);
    }
    .hl-sidebar .hl-sidebar-footer {
        background: var(--hl-surface-2) !important;
        border-color: var(--hl-line);
        box-shadow: none !important;
    }
    .hl-sidebar .hl-iconbtn {
        background: var(--hl-surface) !important;
        border-color: var(--hl-line);
        box-shadow: none !important;
    }
    .hl-sidebar .hl-iconbtn:hover {
        background: var(--hl-accent) !important;
        border-color: var(--hl-accent);
        color: #fff;
    }
}

/* Mobile card-style table rows — flat. */
@media (max-width: 640px) {
    .hl-table tbody tr {
        background: var(--hl-surface) !important;
        border-color: var(--hl-line);
        box-shadow: none !important;
    }
    .hl-table tbody tr:hover {
        background: var(--hl-surface-2) !important;
        box-shadow: none !important;
    }
}

/* Auth role-option selected — flat soft teal. */
.hl-auth .hl-role-option:has(input:checked) {
    background: var(--hl-accent-soft) !important;
    box-shadow: none !important;
}

/* Drop the warm orange ::selection in favour of soft teal. */
::selection { background: var(--hl-accent-soft); color: var(--hl-ink); }

/* Remove zebra striping (read as noise on a flat design). */
.hl-table tbody tr:nth-child(even) { background: transparent; }
.hl-table tbody tr:nth-child(even):hover { background: var(--hl-surface-2); }

/* ==========================================================================
   WARMTH PASS — inject the brand orange across secondary surfaces so the
   palette feels balanced (was reading too blue/green). Solid colours only.
   Primary CTAs remain teal so "go" still reads as "go".
   ========================================================================== */

/* Section indicator dot — orange. */
.hl-section-title::before { background: var(--hl-accent-2) !important; }

/* Page header underline accent — already orange; bump opacity. */
.hl-page-header::after { background: var(--hl-accent-2) !important; opacity: 1 !important; }

/* Panel top stripe — orange. */
.hl-panel::before { background: var(--hl-accent-2) !important; }

/* Prose card — orange top bar + orange h2 dot for warmth. */
.hl-prose::before    { background: var(--hl-accent-2) !important; }
.hl-prose h2::before { background: var(--hl-accent-2) !important; }

/* "Active" KPI tile — switch from soft teal to soft orange so the row of
   KPIs has a visible warm beat. */
.hl-kpi-accent { background: var(--hl-warn-soft) !important; border-color: var(--hl-warn-soft); }
.hl-kpi-accent .hl-kpi-value,
.hl-kpi-accent .hl-icon { color: var(--hl-accent-2) !important; }

/* Sidebar active link — soft orange tint with orange indicator bar. */
.hl-nav-link.is-active     { background: var(--hl-warn-soft) !important; color: var(--hl-ink) !important; }
.hl-nav-link.is-active::before,
.hl-nav-link::before       { background: var(--hl-accent-2) !important; }
.hl-nav-link.is-active .hl-icon { color: var(--hl-accent-2) !important; }

/* Mobile sidebar active link — solid orange pill. */
@media (max-width: 980px) {
    .hl-sidebar .hl-nav-link.is-active {
        background: var(--hl-accent-2) !important;
        border-color: var(--hl-accent-2) !important;
        color: #fff !important;
    }
}

/* Admin pill — soft orange (was teal-tinted). */
.hl-pill-admin { background: var(--hl-warn-soft) !important; color: var(--hl-accent-2) !important; }

/* Guardian avatar — orange disc so guardians stand out from the supportee. */
.hl-avatar-guardian { background: var(--hl-accent-2) !important; }

/* Brand mark — split the difference: keep the small sidebar tile teal,
   but make the larger error/login mark warm orange for friendliness. */
.hl-error-mark { background: var(--hl-accent-2) !important; }

/* Live status dot ring — orange pulse so "online" reads warm not cold. */
.hl-status-online {
    background: var(--hl-accent-2) !important;
    box-shadow: 0 0 0 4px rgba(255,151,15,.18) !important;
}
@keyframes hl-live-pulse-warm {
    0%   { box-shadow: 0 0 0 0   rgba(255,151,15,.55); }
    70%  { box-shadow: 0 0 0 10px rgba(255,151,15,0); }
    100% { box-shadow: 0 0 0 0   rgba(255,151,15,0); }
}
.hl-status-online::after {
    animation: hl-live-pulse-warm 2s ease-out infinite !important;
}

/* Online pill — soft orange chip with orange ink. */
.hl-pill-online { background: var(--hl-warn-soft) !important; color: var(--hl-accent-2) !important; }

/* Send button (primary in compose / forms) keeps teal — it's the action.
   But the icon button (sidebar logout, etc.) hover gets an orange tint. */
.hl-iconbtn:hover { color: var(--hl-accent-2) !important; }

/* ==========================================================================
   FIX: Floating chatbot orb overlapping the chat Send button.
   When a compose bar is present on the page, lift the orb above it.
   ========================================================================== */

/* Reserve a little safe-zone in the compose so the Send button can never
   sit directly under the orb at any width. */
.hl-compose {
    padding-right: 1.25rem;
}

/* Lift the floating assistant widget above the compose bar whenever a
   .hl-compose is rendered on the page (Conversations/View, Simulator). */
body:has(.hl-compose) .hl-assistant-widget {
    bottom: 6.25rem;
}

/* On phones, lift it a bit further so it never collides with sticky inputs. */
@media (max-width: 720px) {
    body:has(.hl-compose) .hl-assistant-widget {
        bottom: 5.5rem;
        right: 1rem;
    }
    .hl-compose .hl-btn { /* allow Send to wrap below input cleanly */
        margin-right: 0;
    }
}

/* When the assistant panel is open, restore its natural position so the
   panel doesn't hover too far above the screen. */
body:has(.hl-assistant-panel:not([hidden])) .hl-assistant-widget {
    bottom: 1.5rem;
}

/* ==========================================================================
   ASSISTANT REWORK — moved out of the floating bottom-right corner into
   the sidebar; panel becomes a centered modal. Reset old floating styles.
   ========================================================================== */

/* Hard-reset the legacy floating-orb chrome so the new modal can take over.
   IMPORTANT: use explicit top/right/bottom/left (not the inset shorthand
   followed by `right/bottom: auto`, which would shrink the widget to its
   content and leave the panel anchored top-left without a backdrop). */
.hl-assistant-widget,
.hl-assistant-backdrop {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    background: rgba(8, 43, 103, .42) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 1.5rem !important;
    z-index: 1200 !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.hl-assistant-widget[hidden],
.hl-assistant-backdrop[hidden] {
    display: none !important;
}

/* Old floating button is gone; nuke its visual artifacts if the markup
   ever lingers. */
.hl-assistant-toggle.hl-assistant-toggle,
.hl-assistant-orbit,
.hl-assistant-core,
.hl-assistant-face,
.hl-assistant-eye,
.hl-assistant-spark {
    display: none !important;
}

/* Re-enable the toggle ONLY when it lives in the sidebar nav. */
button#hl-assistant-toggle.hl-nav-link {
    display: flex !important;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    padding: .6rem .75rem;
    border-radius: var(--hl-r-sm);
    align-items: center;
    gap: .7rem;
    margin-top: .35rem;
    position: relative;
    overflow: hidden;
}
button#hl-assistant-toggle.hl-nav-link:hover {
    background: var(--hl-warn-soft) !important;
    color: var(--hl-ink) !important;
}
button#hl-assistant-toggle.hl-nav-link[aria-expanded="true"] {
    background: var(--hl-accent-2) !important;
    color: #fff !important;
}
button#hl-assistant-toggle.hl-nav-link[aria-expanded="true"] .hl-icon { color: #fff !important; }
button#hl-assistant-toggle.hl-nav-link[aria-expanded="true"] .hl-nav-link-tag {
    background: rgba(255,255,255,.22);
    color: #fff;
}

/* Spark icon tile — solid orange tile, gentle pulse so users discover it. */
.hl-nav-spark {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--hl-warn-soft);
    color: var(--hl-accent-2);
    flex: 0 0 auto;
    position: relative;
}
.hl-nav-spark::after {
    content: ""; position: absolute; inset: -2px;
    border-radius: 10px;
    box-shadow: 0 0 0 0 rgba(255,151,15,.55);
    animation: hl-spark-pulse 2.6s ease-out infinite;
    pointer-events: none;
}
@keyframes hl-spark-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(255,151,15,.55); }
    70%  { box-shadow: 0 0 0 10px rgba(255,151,15,0); }
    100% { box-shadow: 0 0 0 0   rgba(255,151,15,0); }
}
button#hl-assistant-toggle.hl-nav-link[aria-expanded="true"] .hl-nav-spark {
    background: rgba(255,255,255,.22);
    color: #fff;
}
button#hl-assistant-toggle.hl-nav-link[aria-expanded="true"] .hl-nav-spark::after {
    box-shadow: none;
    animation: none;
}

.hl-nav-link-tag {
    margin-left: auto;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: var(--hl-warn-soft);
    color: var(--hl-accent-2);
}

/* Modal-style assistant panel. */
.hl-assistant-panel.hl-modal {
    position: relative !important;
    width: min(520px, 100%);
    max-height: min(640px, 90vh);
    display: flex;
    flex-direction: column;
    background: var(--hl-surface) !important;
    border: 1px solid var(--hl-line) !important;
    border-radius: var(--hl-r-lg) !important;
    box-shadow: 0 30px 80px rgba(8,43,103,.28) !important;
    overflow: hidden;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: hl-modal-in .28s cubic-bezier(.2,.9,.25,1.15);
}
.hl-assistant-panel.hl-modal[hidden] { display: none !important; }

.hl-assistant-panel .hl-assistant-head {
    background: var(--hl-surface-2) !important;
    border-bottom: 1px solid var(--hl-line) !important;
    padding: 1rem 1.15rem;
}

.hl-assistant-panel .hl-assistant-messages {
    flex: 1;
    max-height: none;
    padding: 1.15rem;
    background: var(--hl-bg);
}

.hl-assistant-panel .hl-assistant-form {
    padding: 0 1.15rem 1.15rem;
    background: var(--hl-surface);
    border-top: 1px solid var(--hl-line);
    padding-top: 1rem;
}

/* On mobile the modal becomes near-fullscreen for thumbs. */
@media (max-width: 720px) {
    .hl-assistant-widget,
    .hl-assistant-backdrop { padding: 0 !important; align-items: flex-end !important; }
    .hl-assistant-panel.hl-modal {
        width: 100%;
        max-height: 88vh;
        border-radius: var(--hl-r-lg) var(--hl-r-lg) 0 0 !important;
    }
}

/* The compose bar no longer needs orb avoidance — strip the reservation. */
.hl-compose { padding-right: 1rem; }

/* ==========================================================================
   CREATIVE LAYER — solid-colour ambient canvas + tilt cards + counter.
   ========================================================================== */

/* Canvas sits behind page content, full-bleed inside .hl-content. */
.hl-ambient-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    opacity: .55;
}
.hl-shell .hl-main { position: relative; z-index: 1; }

/* 3D tilt — set perspective on parents and translateZ on cards. */
.hl-kpis, .hl-queue, .hl-report-grid, .hl-meta-list {
    perspective: 1200px;
}
.hl-kpi, .hl-card, .hl-panel {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .25s cubic-bezier(.2,.9,.25,1.05),
                box-shadow .25s ease;
}
.hl-kpi.hl-tilt-on, .hl-card.hl-tilt-on, .hl-panel.hl-tilt-on {
    transition: transform .12s linear, box-shadow .25s ease;
}
.hl-kpi.hl-tilt-on { box-shadow: 0 22px 44px rgba(0,155,147,.18); }
.hl-card.hl-tilt-on { box-shadow: 0 22px 44px rgba(8,43,103,.16); }

/* KPI count-up: highlight the digit while it's animating. */
.hl-kpi-value.hl-counting {
    color: var(--hl-accent-2);
    transition: color .35s ease;
}

/* A subtle glow ring around an active KPI (one rotates per cycle). */
.hl-kpi.hl-spotlight {
    box-shadow:
        0 0 0 2px var(--hl-accent-2),
        0 22px 44px rgba(255,151,15,.20);
    transition: box-shadow .6s ease;
}

/* "Live" header dot (used inside section titles when SignalR is connected). */
.hl-live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--hl-accent-2);
    margin-left: .5rem; vertical-align: middle;
    animation: hl-live-pulse-warm 1.6s ease-out infinite;
}

/* Send button micro-interaction: a tiny "lift-and-go" on click. */
@keyframes hl-send-go {
    0%   { transform: translateY(0)   scale(1); }
    35%  { transform: translateY(-2px) scale(1.04); }
    100% { transform: translateY(0)   scale(1); }
}
.hl-btn.hl-btn-go { animation: hl-send-go .35s ease; }

/* Sidebar link icon: a small "wiggle on hover" so the nav feels alive. */
@keyframes hl-wiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-6deg); }
    75% { transform: rotate(6deg); }
}
.hl-nav-link:hover .hl-icon { animation: hl-wiggle .45s ease; }

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .hl-ambient-canvas { display: none !important; }
    .hl-nav-spark::after,
    .hl-live-dot,
    .hl-btn.hl-btn-go,
    .hl-nav-link:hover .hl-icon { animation: none !important; }
    .hl-kpi, .hl-card, .hl-panel { transform: none !important; }
}

/* ==========================================================================
   MOBILE HAMBURGER + X — kill every gradient layer for good.
   The original has both a radial sheen AND a conic-gradient base; nuke both
   in any state (closed = bars, open = X).
   ========================================================================== */
@media (max-width: 980px) {
    .hl-nav-toggle,
    body.hl-body.hl-nav-open .hl-nav-toggle {
        background-image: none !important;
        background: var(--hl-accent) !important;
        box-shadow: 0 6px 16px rgba(0, 155, 147, .28) !important;
    }
    .hl-nav-toggle::after,
    .hl-nav-toggle::before {
        background: none !important;
        background-image: none !important;
        animation: none !important;
        display: none !important;
    }
    .hl-nav-toggle:hover {
        background: var(--hl-ink-2) !important;
        background-image: none !important;
        filter: none !important;
    }

    /* Sidebar backdrop — solid translucent ink, no radial gradient. */
    .hl-sidebar-backdrop {
        background: rgba(8, 43, 103, .55) !important;
        background-image: none !important;
    }

    /* Mobile sidebar surface — solid white, no peach radials. */
    .hl-sidebar {
        background: var(--hl-surface) !important;
        background-image: none !important;
    }
    .hl-sidebar::before { display: none !important; }
}

/* The × inside the AI modal (and any iconbtn) — solid surfaces only. */
.hl-iconbtn,
#hl-assistant-close {
    background-image: none !important;
}
#hl-assistant-close {
    background: rgba(8, 43, 103, .06) !important;
    color: var(--hl-ink) !important;
    border: 1px solid var(--hl-line) !important;
    border-radius: 10px !important;
    width: 34px; height: 34px;
    font-size: 1.4rem;
    line-height: 1;
    transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
#hl-assistant-close:hover {
    background: var(--hl-critical) !important;
    color: #fff !important;
    border-color: var(--hl-critical) !important;
    transform: rotate(90deg);
}

/* ==========================================================================
   ASSISTANT MODAL — futuristic command-deck rework.
   Solid colours, animated SVG core, scanline sweep, type-on, thinking dots.
   ========================================================================== */

/* Backdrop: deep teal-ink wash with floating particles canvas behind. */
.hl-assistant-widget,
.hl-assistant-backdrop {
    background: rgba(8, 30, 55, .58) !important;
    background-image: none !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
}
.hl-assistant-widget.is-open .hl-assistant-particles {
    opacity: 1;
}
.hl-assistant-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease;
}

/* The modal itself: solid surface with an animated accent rim. */
.hl-assistant-panel.hl-modal {
    position: relative !important;
    z-index: 1;
    width: min(560px, 100%) !important;
    max-height: min(680px, 88vh) !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--hl-surface) !important;
    background-image: none !important;
    border: 1px solid var(--hl-line) !important;
    border-radius: 22px !important;
    box-shadow:
        0 30px 80px rgba(8, 43, 103, .35),
        0 0 0 1px rgba(0, 155, 147, .35),
        0 0 60px rgba(0, 155, 147, .18) !important;
    overflow: hidden !important;
    transform-origin: center bottom;
    animation: hl-ai-modal-in .55s cubic-bezier(.22, 1.2, .36, 1) both;
}

@keyframes hl-ai-modal-in {
    0%   { opacity: 0; transform: translateY(36px) scale(.92); }
    60%  { opacity: 1; transform: translateY(-4px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Animated corner accents — solid colours, four little brackets that
   fade in as the modal lands. */
.hl-assistant-panel.hl-modal::before,
.hl-assistant-panel.hl-modal::after {
    content: "";
    position: absolute;
    width: 36px; height: 36px;
    border: 2px solid var(--hl-accent-2);
    pointer-events: none;
    opacity: 0;
    animation: hl-ai-corner-in .8s ease .25s forwards;
}
.hl-assistant-panel.hl-modal::before {
    top: 14px; left: 14px;
    border-right: 0; border-bottom: 0;
    border-top-left-radius: 12px;
}
.hl-assistant-panel.hl-modal::after {
    bottom: 14px; right: 14px;
    border-left: 0; border-top: 0;
    border-bottom-right-radius: 12px;
}
@keyframes hl-ai-corner-in {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: .85; transform: scale(1); }
}

/* Scanline sweep — a solid teal line that races top→bottom once on open. */
.hl-assistant-panel.hl-modal > .hl-ai-scanline {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: var(--hl-accent);
    box-shadow: 0 0 18px var(--hl-accent), 0 0 36px var(--hl-accent);
    opacity: .85;
    pointer-events: none;
    z-index: 4;
    animation: hl-ai-scan 1.6s cubic-bezier(.55, .05, .35, 1) .15s 1;
}
@keyframes hl-ai-scan {
    0%   { top: 0;     opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 100%;  opacity: 0; }
}

/* Header: solid surface-2 with an animated AI core SVG on the left. */
.hl-assistant-panel.hl-modal .hl-assistant-head {
    position: relative;
    background: var(--hl-bg-2) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--hl-line) !important;
    padding: 1.1rem 1.25rem !important;
    display: flex;
    align-items: center;
    gap: .9rem;
    z-index: 2;
}
.hl-assistant-panel.hl-modal .hl-assistant-head > div:first-child {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex: 1;
    min-width: 0;
}
.hl-assistant-panel.hl-modal .hl-assistant-head strong {
    font-family: "Source Serif 4", serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--hl-ink);
    letter-spacing: -.01em;
}
.hl-assistant-panel.hl-modal .hl-assistant-head .hl-sub {
    font-size: .78rem;
    color: var(--hl-ink-soft);
    margin: .15rem 0 0;
}

/* AI orb — animated SVG core that lives in the modal header. */
.hl-ai-orb {
    width: 44px; height: 44px;
    position: relative;
    flex: 0 0 auto;
    color: var(--hl-accent);
}
.hl-ai-orb svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hl-ai-orb-ring {
    fill: none;
    stroke: var(--hl-accent);
    stroke-width: 2;
    stroke-linecap: round;
    transform-origin: center;
    animation: hl-orb-spin 9s linear infinite;
}
.hl-ai-orb-ring-2 {
    fill: none;
    stroke: var(--hl-accent-2);
    stroke-width: 1.6;
    stroke-linecap: round;
    transform-origin: center;
    animation: hl-orb-spin-rev 6s linear infinite;
    opacity: .85;
}
.hl-ai-orb-core {
    fill: var(--hl-accent);
    transform-origin: center;
    animation: hl-orb-pulse 2.4s ease-in-out infinite;
}
.hl-ai-orb-tick {
    fill: var(--hl-accent-2);
    transform-origin: center;
    animation: hl-orb-spin 4s linear infinite;
}
@keyframes hl-orb-spin     { to { transform: rotate(360deg); } }
@keyframes hl-orb-spin-rev { to { transform: rotate(-360deg); } }
@keyframes hl-orb-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.15); opacity: .8; }
}

/* Messages area: solid background, custom rail + bubble polish. */
.hl-assistant-panel.hl-modal .hl-assistant-messages {
    flex: 1 1 auto !important;
    max-height: none !important;
    padding: 1.25rem !important;
    background: var(--hl-bg) !important;
    background-image: none !important;
    overflow-y: auto;
    scroll-behavior: smooth;
    position: relative;
    z-index: 2;
}

.hl-assistant-context {
    display: grid;
    gap: .75rem;
    padding: .95rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--hl-line);
    border-left: 4px solid var(--hl-accent-2);
    border-radius: 16px;
    background: var(--hl-surface);
    box-shadow: 0 8px 22px rgba(8, 43, 103, .06);
}

.hl-assistant-context label {
    display: block;
    color: var(--hl-ink);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hl-assistant-context p {
    margin: .2rem 0 0;
    color: var(--hl-ink-soft);
    font-size: .82rem;
}

.hl-assistant-context select.hl-input {
    width: 100%;
    flex: 0 0 auto;
    background: var(--hl-bg) !important;
    border-color: var(--hl-line-2) !important;
    color: var(--hl-ink);
    font-weight: 600;
}

.hl-assistant-context select.hl-input:disabled {
    opacity: .65;
    cursor: wait;
}

.hl-assistant-msg {
    position: relative;
    padding: .8rem 1rem !important;
    border-radius: 14px !important;
    font-size: .92rem !important;
    line-height: 1.5;
    max-width: 92%;
    word-wrap: break-word;
    animation: hl-msg-in .35s cubic-bezier(.22, 1.2, .36, 1) both;
}
@keyframes hl-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hl-assistant-msg-assistant {
    background: var(--hl-surface) !important;
    background-image: none !important;
    border: 1px solid var(--hl-line) !important;
    color: var(--hl-ink) !important;
    align-self: flex-start;
    border-bottom-left-radius: 4px !important;
    box-shadow: 0 4px 14px rgba(8, 43, 103, .06);
}
.hl-assistant-msg-assistant::before {
    content: "AI";
    position: absolute;
    top: -10px; left: 12px;
    font-size: .58rem;
    letter-spacing: .12em;
    font-weight: 700;
    padding: .15rem .45rem;
    background: var(--hl-accent);
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 155, 147, .35);
}
.hl-assistant-msg-user {
    background: var(--hl-accent) !important;
    background-image: none !important;
    color: #fff !important;
    align-self: flex-end;
    border-bottom-right-radius: 4px !important;
    box-shadow: 0 6px 18px rgba(0, 155, 147, .25);
}

/* Typing indicator — three dots that bounce. */
.hl-ai-typing {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .8rem 1rem;
    background: var(--hl-surface);
    border: 1px solid var(--hl-line);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    margin-top: .35rem;
    box-shadow: 0 4px 14px rgba(8, 43, 103, .06);
    animation: hl-msg-in .35s ease both;
}
.hl-ai-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--hl-accent);
    display: inline-block;
    animation: hl-typing-bounce 1.2s ease-in-out infinite;
}
.hl-ai-typing span:nth-child(2) { animation-delay: .15s; background: var(--hl-accent-2); }
.hl-ai-typing span:nth-child(3) { animation-delay: .30s; }
@keyframes hl-typing-bounce {
    0%, 60%, 100% { transform: translateY(0);   opacity: .5; }
    30%           { transform: translateY(-6px); opacity: 1; }
}

/* Caret blink while a message types itself out. */
.hl-ai-caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--hl-accent);
    vertical-align: -0.15em;
    margin-left: 2px;
    animation: hl-ai-caret-blink 0.9s step-end infinite;
}
@keyframes hl-ai-caret-blink {
    0%, 60%  { opacity: 1; }
    61%, 100% { opacity: 0; }
}

/* Compose form — solid surface + glowing focus. */
.hl-assistant-panel.hl-modal .hl-assistant-form {
    padding: 1rem 1.15rem 1.15rem !important;
    background: var(--hl-surface) !important;
    background-image: none !important;
    border-top: 1px solid var(--hl-line) !important;
    position: relative;
    z-index: 2;
}
.hl-assistant-panel.hl-modal .hl-assistant-input {
    min-height: 90px !important;
    background: var(--hl-bg) !important;
    border: 1px solid var(--hl-line) !important;
    border-radius: 12px !important;
    padding: .8rem .95rem !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    resize: none;
}
.hl-assistant-panel.hl-modal .hl-assistant-input:focus {
    background: #fff !important;
    border-color: var(--hl-accent) !important;
    box-shadow:
        0 0 0 4px rgba(0, 155, 147, .14),
        0 0 24px rgba(0, 155, 147, .15) !important;
    outline: none;
}

/* Send button — solid orange/teal swap on hover with a darting arrow icon. */
.hl-assistant-panel.hl-modal .hl-assistant-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: .85rem;
    gap: .5rem;
    align-items: center;
}
.hl-assistant-panel.hl-modal .hl-assistant-actions::before {
    content: "Press Enter ↵";
    font-size: .72rem;
    color: var(--hl-ink-soft);
    margin-right: auto;
    letter-spacing: .04em;
}
.hl-assistant-panel.hl-modal #hl-assistant-send {
    position: relative;
    overflow: hidden;
    padding: .65rem 1.4rem !important;
    border-radius: 12px !important;
    background: var(--hl-accent) !important;
    background-image: none !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 6px 18px rgba(0, 155, 147, .28) !important;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease, padding .2s ease;
}
.hl-assistant-panel.hl-modal #hl-assistant-send::after {
    content: "";
    position: absolute;
    top: 50%; left: -16px;
    width: 14px; height: 14px;
    transform: translateY(-50%) rotate(-45deg);
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    opacity: 0;
    transition: opacity .2s ease, left .25s ease;
}
.hl-assistant-panel.hl-modal #hl-assistant-send:hover {
    background: var(--hl-accent-2) !important;
    box-shadow: 0 8px 24px rgba(255, 151, 15, .35) !important;
    transform: translateY(-1px);
    padding-left: 2.2rem !important;
}
.hl-assistant-panel.hl-modal #hl-assistant-send:hover::after {
    opacity: 1;
    left: 12px;
}
.hl-assistant-panel.hl-modal #hl-assistant-send:disabled {
    background: var(--hl-ink-soft) !important;
    cursor: progress;
    box-shadow: none !important;
}

/* Mobile: AI modal becomes an immersive bottom sheet with a pull handle. */
@media (max-width: 720px) {
    .hl-assistant-widget,
    .hl-assistant-backdrop {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    .hl-assistant-panel.hl-modal {
        width: 100% !important;
        max-height: 92vh !important;
        border-radius: 22px 22px 0 0 !important;
        animation: hl-ai-sheet-in .5s cubic-bezier(.22, 1.2, .36, 1) both;
    }
    .hl-assistant-panel.hl-modal::before { top: 18px; left: 18px; }
    .hl-assistant-panel.hl-modal::after  { bottom: 18px; right: 18px; }
    .hl-assistant-panel.hl-modal > .hl-ai-pullhandle {
        position: absolute;
        top: 8px; left: 50%;
        width: 40px; height: 4px;
        background: var(--hl-line-2);
        border-radius: 999px;
        transform: translateX(-50%);
        z-index: 5;
    }
}
@keyframes hl-ai-sheet-in {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: keep colours, drop the dancing parts. */
@media (prefers-reduced-motion: reduce) {
    .hl-assistant-panel.hl-modal,
    .hl-assistant-msg,
    .hl-ai-typing,
    .hl-assistant-panel.hl-modal::before,
    .hl-assistant-panel.hl-modal::after,
    .hl-assistant-panel.hl-modal > .hl-ai-scanline,
    .hl-ai-orb-ring,
    .hl-ai-orb-ring-2,
    .hl-ai-orb-core,
    .hl-ai-orb-tick {
        animation: none !important;
    }
    .hl-assistant-particles { display: none !important; }
}

/* ==========================================================================
   FIX — SVG transform-origin for the AI orb header animation.
   SVG primitives need explicit transform-box + origin in user units, otherwise
   rotations happen around (0,0) of the viewBox and produce no visible motion.
   ========================================================================== */
.hl-ai-orb svg {
    transform-origin: 32px 32px;
    transform-box: view-box;
}
.hl-ai-orb-ring,
.hl-ai-orb-ring-2,
.hl-ai-orb-core,
.hl-ai-orb-tick {
    transform-box: view-box !important;
    transform-origin: 32px 32px !important;
    will-change: transform, opacity;
}

/* Make the orb a touch larger so the motion reads at a glance. */
.hl-ai-orb { width: 48px; height: 48px; }

/* Belt-and-braces: ensure the typing indicator + bubbles always animate
   even when site-wide *::before resets fire later in the cascade. */
.hl-ai-typing span {
    animation: hl-typing-bounce 1.2s ease-in-out infinite !important;
    will-change: transform, opacity;
    transform-origin: 50% 50%;
}
.hl-ai-typing span:nth-child(2) { animation-delay: .15s !important; }
.hl-ai-typing span:nth-child(3) { animation-delay: .30s !important; }

/* Add a soft pulsing halo around the whole orb so the header reads alive
   even on browsers that don't honour SVG transforms. */
.hl-ai-orb {
    position: relative;
    isolation: isolate;
}
.hl-ai-orb::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--hl-accent);
    opacity: 0;
    animation: hl-orb-halo 2.4s ease-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes hl-orb-halo {
    0%   { transform: scale(.6); opacity: .55; }
    70%  { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(1.3); opacity: 0; }
}
.hl-ai-orb::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1px dashed var(--hl-accent-2);
    opacity: .6;
    animation: hl-orb-spin 12s linear infinite;
    pointer-events: none;
}

/* Reduced motion: kill the new helpers too. */
@media (prefers-reduced-motion: reduce) {
    .hl-ai-orb::before,
    .hl-ai-orb::after,
    .hl-ai-typing span { animation: none !important; }
}