/* appsg.ai — global styles
   Brand: deep navy #14143C, accent red #E63E2E, cream #FAF8F3
*/

:root {
    --bg:        #faf8f3;
    --surface:   #ffffff;
    --surface-2: #fbf9f3;
    --ink:       #14143c;
    --ink-2:     #2a2a4a;
    --muted:     #5a5d6b;   /* darkened from #6b6e7e for AA contrast on cream at small sizes */
    --line:      #e6e2d6;
    --line-2:    #d4d0c2;
    --accent:    #14143c;
    --accent-2:  #e63e2e;
    --ok:        #2f6f48;
    --warn:      #a35a14;
    --danger:    #95231b;
    --shadow:    0 1px 0 rgba(20,20,60,.04), 0 4px 16px rgba(20,20,60,.06);
    --radius:    6px;
    --radius-lg: 10px;
    --serif:     'Source Serif 4', 'Source Serif Pro', Georgia, serif;
    --sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--sans); background: var(--bg); color: var(--ink); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── accessible focus (WCAG 2.1 AA 2.4.7 / 1.4.11) ──────────
   Every keyboard-focused element gets a clearly visible 2px navy ring.
   The :not(:focus-visible) reset keeps the ring off pointer clicks so the
   design stays clean, while element rules below only add colour/glow — they
   no longer set `outline:none`, so this ring is never suppressed. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
h1 { font-size: 28px; line-height: 1.15; }
h2 { font-size: 20px; line-height: 1.2; }
h3 { font-size: 16px; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); font-size: 13px; }
.hint  { color: var(--muted); font-size: 12.5px; font-weight: 400; display: inline; margin-top: 4px; }

/* ── alerts ──────────────────────────────────────────────── */
.alert { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 20px; font-size: 13.5px; }
.alert-error { background: #fef2f0; border: 1px solid #f3c5bf; color: var(--danger); }
.alert-ok    { background: #ecf4ee; border: 1px solid #c4dfcc; color: var(--ok); }

/* ── buttons ─────────────────────────────────────────────── */
.btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--line-2);
    background: var(--surface); color: var(--ink); border-radius: var(--radius);
    cursor: pointer; font: inherit; text-decoration: none; transition: all .15s; font-size: 13.5px; font-weight: 500; }
.btn:hover { border-color: var(--ink-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: white; }
.btn-primary:hover { background: #0a0a28; }
.btn-accent { background: var(--accent-2); border-color: var(--accent-2); color: white; }
.btn-accent:hover { background: #c8331c; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-text { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; font-size: 13.5px; padding: 0; font-weight: 500; }
.btn-text.danger { color: var(--danger); }
.btn-text:hover { text-decoration: underline; }

/* ── forms ───────────────────────────────────────────────── */
.form label, .builder-section > label, .builder-section .grid > label {
    display: block; font-size: 12.5px; color: var(--ink-2); font-weight: 500; margin-bottom: 14px;
}
.form input[type=text], .form input[type=email], .form input[type=password],
.form input[type=number], .form input[type=file], .form input[type=search],
.form input[type=url], .form input[type=tel], .form input[type=date],
.form input[type=datetime-local], .form input[type=time], .form input[type=color],
.form select, .form textarea {
    display: block; width: 100%; margin-top: 6px;
    padding: 9px 11px; font-size: 14px; font-family: inherit;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-2); border-radius: var(--radius);
    transition: border-color .12s, box-shadow .12s;
    box-sizing: border-box;
}
.form input:focus, .form select:focus, .form textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20,20,60,.10);
}
.form textarea { font-family: var(--mono); font-size: 13px; min-height: 80px; resize: vertical; }
.form select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b6e7e' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
.form .check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.form .check input { margin-top: 3px; }
.form .check span { font-weight: 400; font-size: 13.5px; color: var(--ink-2); }

/* Operator plan / trial controls (console business detail) — polished cards + select */
.op-controls { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 16px; flex-wrap: wrap; }
.op-control { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 15px 17px 16px;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(20,20,60,.04); min-width: 268px; }
.op-control-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); display: flex; align-items: center; gap: 7px; }
.op-control-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.op-control .op-note { font-size: 12px; color: var(--muted); }
.op-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink);
    padding: 10px 36px 10px 13px; min-width: 210px; height: 40px; box-sizing: border-box;
    background-color: var(--surface);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path fill='%2314143c' d='M.7.7l4.8 5 4.8-5z'/></svg>");
    background-repeat: no-repeat; background-position: right 13px center;
    border: 1px solid var(--line-2); border-radius: var(--radius);
    cursor: pointer; transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.op-select:hover { border-color: var(--accent); background-color: #fff; }
.op-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20,20,60,.12); }
.op-select-sm { min-width: 128px; }
@media (max-width: 640px) { .op-control { min-width: 100%; } .op-select { width: 100%; } }

/* ── auth screens ────────────────────────────────────────── */
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 40px 16px;
    background: radial-gradient(900px 500px at 20% 0%, rgba(20,20,60,.04), transparent), var(--bg); }
.auth-frame { width: 100%; max-width: 420px; }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 36px 32px; box-shadow: var(--shadow); }
.auth-brand { display: inline-flex; align-items: center; margin-bottom: 28px; text-decoration: none; }
.auth-brand-logo { max-height: 50px; width: auto; display: block; }
.auth-brand-logo-dark { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
.auth-title { font-size: 24px; margin-bottom: 6px; }
.auth-sub { color: var(--muted); margin: 0 0 22px; }
.auth-alt { font-size: 13.5px; color: var(--muted); margin-top: 16px; text-align: center; }
.auth-foot { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 18px; }
.demo-hint { margin-top: 16px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); font-size: 12.5px; }
.demo-hint summary { cursor: pointer; color: var(--muted); }
.demo-hint code { background: var(--line); padding: 1px 5px; border-radius: 3px; }

/* ── app shell ───────────────────────────────────────────── */
.app-body { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.sidebar { background: var(--surface); border-right: 1px solid var(--line);
    padding: 20px 14px; display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

.brand { display: block; align-items: center; padding: 4px 8px 14px; text-decoration: none; }
.brand-logo { max-height: 40px; width: auto; display: block; }
.brand-logo-dark { filter: invert(1) hue-rotate(180deg) brightness(1.1); }

.org-pill { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 10px 12px; margin: 0 4px 18px; }
.org-name { display: block; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.org-meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }

.nav { display: flex; flex-direction: column; flex: 1; padding: 0 4px; }
.nav a { padding: 7px 10px; border-radius: var(--radius); font-size: 13.5px; color: var(--ink-2); margin-bottom: 1px; text-decoration: none; }
.nav a:hover { background: var(--surface-2); }
.nav a.is-active { background: var(--accent); color: white; }
.nav-section { font-size: 11px; color: #0c0432; text-transform: uppercase; letter-spacing: .06em; padding: 20px 10px 2px; font-weight: 800; }

.user-foot { border-top: 1px solid var(--line); padding-top: 12px; margin: 0 4px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.user-info { font-size: 12.5px; min-width: 0; }
.user-name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-email { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

/* Full width — action-heavy tables (campaigns, oversight pages) were cramped
   at the old 1160px cap. Sections keep their own internal rhythm. */
.main { padding: 32px 40px 60px; }

/* ── page head ───────────────────────────────────────────── */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
    padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 4px; font-weight: 600; }
.lede { color: var(--muted); font-size: 14px; margin: 6px 0 0; max-width: 64ch; }
.page-actions { display: flex; gap: 10px; align-items: center; }

/* ── KPI + panels ───────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 32px; }
.kpi-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 32px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; text-decoration: none; color: inherit; }
.kpi.kpi-link:hover { border-color: var(--accent); }
.kpi-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.kpi-value { font-family: var(--serif); font-size: 32px; margin-top: 6px; color: var(--ink); }
.kpi-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--shadow); }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px;
    border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.panel-head h2 { font-size: 16px; }
.empty { color: var(--muted); font-size: 13.5px; padding: 8px 0; }
.empty-state { text-align: center; padding: 60px 24px; }
.empty-state h2 { font-size: 22px; margin-bottom: 8px; }
.link { color: var(--accent); font-size: 13px; font-weight: 500; }
/* let <button class="link"> read as a text link, not a native grey button */
button.link { background: none; border: 0; padding: 0; margin: 0;
    font-family: inherit; font-size: 13px; font-weight: 500; line-height: inherit;
    color: var(--accent); cursor: pointer; vertical-align: baseline; }
.link:hover { text-decoration: underline; }
button.link:disabled { color: var(--muted); cursor: default; text-decoration: none; opacity: .65; }

/* ── tables ──────────────────────────────────────────────── */
.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data th { text-align: left; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line);
    padding: 10px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.data td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.data tr:hover td { background: var(--surface-2); }
/* datatable.js — search / sort / paging toolbar for long tables (entry #119) */
.dt-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.dt-bar .dt-search { flex: 1 1 220px; max-width: 340px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: var(--surface); }
.dt-bar .dt-size { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; background: var(--surface); }
.dt-bar .dt-info { white-space: nowrap; }
.dt-bar .dt-pager { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dt-bar .dt-pager button { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 2px 9px; cursor: pointer; font-size: 14px; line-height: 1.4; }
.dt-bar .dt-pager button:disabled { opacity: .4; cursor: default; }
.data th.dt-sortable { cursor: pointer; user-select: none; }
.data th.dt-sortable:hover { color: var(--ink); }
.data th.dt-asc::after  { content: ' ▲'; font-size: 9px; }
.data th.dt-desc::after { content: ' ▼'; font-size: 9px; }
/* breathe out crammed inline row actions (Edit / Mail / Poll / Test / …) */
.data td > .link + .link, .data td > .link + form,
.data td > form + .link, .data td > form + form { margin-left: 14px; }
.badge { display: inline-block; background: var(--surface-2); border: 1px solid var(--line);
    padding: 1px 8px; border-radius: 999px; font-size: 11px; color: var(--ink-2); font-weight: 500;
    text-transform: uppercase; letter-spacing: .04em; }
.badge-ok    { background: #ecf4ee; border-color: #c4dfcc; color: var(--ok); }
.badge-warn  { background: #fef6e6; border-color: #f5dca7; color: var(--warn); }
.badge-active   { background: #ecf4ee; border-color: #c4dfcc; color: var(--ok); }
.badge-trialing { background: #fef6e6; border-color: #f5dca7; color: var(--warn); }
.badge-suspended{ background: #fef2f0; border-color: #f3c5bf; color: var(--danger); }
.badge-cancelled{ background: #f1efe6; border-color: var(--line); color: var(--muted); }

/* HeyGen avatar preview block on /console/providers.php */
.heygen-avatar-preview { display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius); }
.heygen-avatar-preview img { width: 64px; height: 64px; border-radius: 6px; object-fit: cover;
    background: var(--line); border: 1px solid var(--line-2); flex-shrink: 0; }
.heygen-avatar-preview b { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 2px; }
.heygen-avatar-preview .mono { font-size: 11px; color: var(--muted); }

/* Operator businesses table — suspended/cancelled row treatment */
tr.row-suspended > td { background: rgba(255, 180, 0, 0.05); }
tr.row-cancelled > td { background: rgba(255, 60, 60, 0.04); color: var(--muted); }
tr.row-cancelled > td b { color: var(--muted); text-decoration: line-through; }
tr.action-row > td { border-top: 2px solid var(--accent-2); }

/* ── deployment templates (dashboard) ────────────────────── */
.usecase-head { padding: 0 0 12px; margin-bottom: 16px; }
.usecase-head h2 { font-size: 18px; }
.usecase-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 24px 0 10px; font-weight: 600; }
.usecase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px; margin-bottom: 8px; }
.usecase-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 18px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
    text-decoration: none; color: inherit; transition: all .15s; min-height: 200px; }
.usecase-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.usecase-card h4 { margin: 0; font-family: var(--serif); font-size: 17px; }
.usecase-card p { margin: 0; font-size: 13px; color: var(--muted); flex: 1; }
.usecase-blocks { display: flex; flex-wrap: wrap; gap: 4px; }
.usecase-block { font-size: 10.5px; background: var(--surface-2); border: 1px solid var(--line); padding: 2px 8px; border-radius: 4px; color: var(--muted); }
.usecase-cta { color: var(--accent-2); font-size: 13px; font-weight: 600; }

/* ── console (dark theme for platform operators) ─────────── */
.console-body { background: #0f0f24; }
.console-sidebar { background: #14143c; border-right: 1px solid #20204a; color: #e3e7f0; }
.console-sidebar .brand-logo { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
.console-sidebar .nav a { color: #c9cfdb; }
.console-sidebar .nav a:hover { background: #1c1c44; color: white; }
.console-sidebar .nav a.is-active { background: var(--accent-2); color: white; }
.console-sidebar .nav-section { color: #6f7891; }
.console-sidebar .user-foot { border-top-color: #20204a; }
.console-sidebar .user-name { color: #f3f4f6; }
.console-sidebar .user-email { color: #8a93a8; }
.console-sidebar .btn-text { color: var(--accent-2); }

.console-pill { background: linear-gradient(135deg, #1c1c44 0%, #28285a 100%);
    border: 1px solid #2a2a55; border-radius: var(--radius);
    padding: 12px; margin: 0 4px 18px; }
.console-pill-tag { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--accent-2); }
.console-pill-sub { display: block; font-size: 11.5px; color: #aeb5c6; margin-top: 2px; }

.console-main { background: var(--bg); }

/* ── agent tiles ─────────────────────────────────────────── */
.agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 18px; }
.agent-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 18px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 220px; }
.agent-tile-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.agent-tile-title { font-size: 17px; margin-bottom: 4px; }
.agent-tile-desc { color: var(--muted); font-size: 13px; flex: 1; min-height: 40px; }
.agent-tile-meta { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; }
.agent-tile-actions { display: flex; gap: 8px; }
.agent-status { font-size: 11px; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.status-active   { background: #ecf4ee; color: var(--ok); }
.status-draft    { background: #fef6e6; color: var(--warn); }
.status-archived { background: #f1efe6; color: var(--muted); }

/* ── Agents page v2 — audience sections + rich cards ─────────── */
.agent-section { margin-bottom: 30px; }
.agent-section-head { margin: 0 0 14px; }
.agent-section-head h2 { font-size: 18px; display: flex; align-items: center; gap: 9px; }
.agent-section-count { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }
.agent-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; transition: border-color .12s, box-shadow .12s; }
.agent-card:hover { border-color: var(--line-2); box-shadow: 0 2px 4px rgba(20,20,60,.05), 0 8px 24px rgba(20,20,60,.08); }
.agent-card-top { display: flex; align-items: flex-start; gap: 12px; }
.agent-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: var(--accent);
    color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; }
.agent-card-id { flex: 1; min-width: 0; }
.agent-card-id h3 { font-size: 16px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.aud-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.aud-external { background: #e0f2fe; color: #0c4a6e; }
.aud-internal { background: #ede9fe; color: #5b21b6; }
.cat-badge { font-size: 11px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line);
    padding: 2px 9px; border-radius: 999px; }
.agent-card-deploy { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.deploy-chip { font-size: 11px; padding: 2px 8px; border-radius: 6px; font-weight: 500; }
.deploy-live { background: #ecf4ee; color: var(--ok); }
.deploy-warn { background: #fef6e6; color: var(--warn); }
.deploy-none { background: var(--surface-2); color: var(--muted); }
.agent-card-foot { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.agent-card-foot .dot { opacity: .5; }
.agent-card-actions { display: flex; gap: 8px; margin-top: 2px; }
.agent-card-actions .btn { flex: 1; text-align: center; }
.btn-disabled { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); cursor: default; }
.agent-icon, .agent-icon-lg, .agent-icon-sm, .agent-icon-xl {
    display: inline-flex; background: var(--accent); color: white;
    align-items: center; justify-content: center; font-family: var(--serif); }
.agent-icon-lg { width:48px; height:48px; border-radius: var(--radius); font-size: 20px; }
.agent-icon    { width: 36px; height: 36px; border-radius: var(--radius); font-size: 16px; }
.agent-icon-sm { width: 24px; height: 24px; border-radius: 4px; font-size: 12px; margin-right: 10px; }
.agent-icon-xl { width: 72px; height: 72px; border-radius: var(--radius-lg); font-size: 30px; margin-bottom: 12px; }
.add-tile { border-style: dashed; }

/* ── agent builder ───────────────────────────────────────── */
.builder { display: flex; flex-direction: column; gap: 18px; }
.builder-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; }
.builder-section h2 { margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 17px; }
.builder-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 0; }
.builder-foot .danger { margin-right: auto; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.tool-summary { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px; }
.tool-summary-row { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.tool-summary-row:last-child { border-bottom: none; }
.tool-summary-row b { font-family: var(--mono); font-size: 12.5px; color: var(--accent); margin-right: 12px; }

/* ── KB search ───────────────────────────────────────────── */
.kb-search { display: flex; gap: 10px; margin-bottom: 16px; align-items: stretch; }
.kb-search input[type=search] { flex: 1; margin-top: 0; padding: 10px 14px; font-size: 14.5px;
    background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius); }
.kb-search input[type=search]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20,20,60,.10); }
.kb-results { list-style: none; padding: 0; margin: 0; }
.kb-results li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.kb-results li:last-child { border-bottom: none; }
.kb-result-snippet { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 6px 0 0; }
.kb-result-snippet mark { background: #fef3d6; color: inherit; padding: 0 2px; border-radius: 2px; }

.tab-switch { display: inline-flex; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: var(--radius); }
.tab-switch .tab { background: transparent; border: none; padding: 5px 12px; font: inherit; font-size: 12.5px;
    color: var(--muted); cursor: pointer; border-radius: 4px; font-weight: 500; }
.tab-switch .tab.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20,20,60,.06); }

/* ── chat ────────────────────────────────────────────────── */
.chat-head { padding-bottom: 18px; }
.model-pill { display: inline-flex; gap: 8px; align-items: center; padding: 5px 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; }
.model-provider { font-weight: 700; color: white; padding: 2px 8px; border-radius: 999px; font-size: 11px; letter-spacing: .04em; }
.model-provider.claude { background: #b34a2c; }
.model-provider.openai { background: #2d4a35; }
.model-name { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }

.chat-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 18px; height: calc(100vh - 220px); min-height: 540px; }
.chat-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 14px; overflow-y: auto; }
.side-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 18px 4px 6px; font-weight: 600; }
.side-list { list-style: none; padding: 0; margin: 0; }
.side-list li { padding: 7px 8px; border-radius: var(--radius); cursor: pointer; font-size: 13px; }
.side-list li:hover { background: var(--surface-2); }
.side-list li.is-active { background: var(--accent); color: white; }
.side-list li.is-active a, .side-list li.is-active .convo-time { color: white; }
.side-list li a { color: inherit; text-decoration: none; display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-list li .convo-time { font-size: 11px; color: var(--muted); display: block; margin-top: 2px; }
.side-list li.empty { color: var(--muted); font-size: 12px; padding: 8px 4px; }
/* Per-conversation reply status chips (conversations monitor) */
.reply-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: nowrap; line-height: 1.7; }
.reply-chip.reply-agent    { background: #dcfce7; color: #14532d; }
.reply-chip.reply-awaiting { background: #f1f5f9; color: #475569; }
.reply-chip.reply-off      { background: #fef3c7; color: #92400e; }
.reply-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.reply-summary-hint { font-size: 12px; color: var(--muted); }

/* Manual-mode (auto-reply off) markers on conversations */
.convo-tag-manual { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: #fef3c7; color: #92400e; white-space: nowrap; }
.side-list li.is-active .convo-tag-manual { background: rgba(255,255,255,.25); color: #fff; }
.manual-mode-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius); font-size: 13.5px; line-height: 1.5; background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
/* The HTML `hidden` attribute must ALWAYS win — any class that sets its own
   `display` (.grid, .form label, …) silently overrides the UA's [hidden] rule
   otherwise. The per-selector fixes below predate this global guard. */
[hidden] { display: none !important; }
.manual-mode-banner[hidden] { display: none; }

/* Agent-handled (automated channel) conversations — read-only transcript markers */
.convo-tag-auto { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: #e0e7ff; color: #3730a3; white-space: nowrap; }
.side-list li.is-active .convo-tag-auto { background: rgba(255,255,255,.25); color: #fff; }
.handled-note { margin: 10px 0 0; padding: 10px 14px; border-radius: var(--radius); font-size: 13.5px; line-height: 1.5; background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; }
.handled-note a { color: inherit; font-weight: 600; }
.handled-note[hidden] { display: none; }
.chat-form[hidden] { display: none; }
#convo-list li { position: relative; padding-right: 30px; }
#convo-list li .convo-del { position: absolute; right: 5px; top: 6px; border: 0; background: none; cursor: pointer; font-size: 13px; line-height: 1; opacity: 0; padding: 4px 5px; border-radius: 6px; color: var(--muted); transition: opacity .1s, background .1s; }
#convo-list li:hover .convo-del { opacity: .6; }
#convo-list li .convo-del:hover { opacity: 1; background: rgba(0,0,0,.08); }
#convo-list li.is-active .convo-del { color: white; }
.side-tools { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.side-tools li { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.side-tools li:last-child { border-bottom: none; }
.side-tools b { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.visitor-card { background: linear-gradient(180deg,#f0f9ff 0%,#fafbfd 100%); border: 1px solid #bae6fd; border-radius: var(--radius); padding: 12px; margin-bottom: 14px; }
.visitor-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.visitor-badge { background: #0c4a6e; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; }
.visitor-name { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.visitor-meta { display: grid; grid-template-columns: max-content 1fr; gap: 3px 8px; margin: 0; font-size: 11.5px; }
.visitor-meta dt { color: var(--muted); font-weight: 500; }
.visitor-meta dd { margin: 0; color: #0f172a; word-break: break-all; }
.visitor-meta dd a { color: var(--accent); text-decoration: none; }
.visitor-meta dd a:hover { text-decoration: underline; }
.visitor-meta dd.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-main { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; }
.messages { flex: 1; overflow-y: auto; padding: 28px 32px; }
.empty-chat { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-chat h2 { margin-bottom: 6px; color: var(--ink); }

.msg { margin-bottom: 18px; max-width: 760px; }
.msg-user { margin-left: auto; }
.msg-user .bubble { background: var(--accent); color: white; }

/* Chat grounding banner — shown at the top of every conversation */
.chat-grounding-bar { display: flex; align-items: center; gap: 10px; padding: 9px 16px;
    background: var(--surface-2); border-bottom: 1px solid var(--line);
    font-size: 12.5px; color: var(--muted); }
.chat-grounding-bar b { color: var(--ink); font-weight: 600; }
.grounding-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(47, 111, 72, .15); }

/* Tag chips — used in the chat grounding bar (scope) + the builder picker */
.tag-chip { display: inline-block; background: var(--surface); border: 1px solid var(--line-2);
    color: var(--accent); padding: 1px 8px; border-radius: 999px; font-size: 11.5px;
    font-weight: 500; font-family: var(--mono); margin: 0 2px; }
button.tag-chip { cursor: pointer; font: inherit; font-size: 11.5px; font-family: var(--mono); }
button.tag-chip:hover { border-color: var(--accent); background: var(--surface-2); }
button.tag-chip.is-added { background: var(--accent); color: white; border-color: var(--accent); }
.chat-grounding-bar .tag-chip { background: rgba(20, 20, 60, .05); border-color: var(--line); }
.grounding-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }

.kb-tag-picker { background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 10px 14px; margin-top: 10px;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kb-tag-picker .muted { font-size: 12.5px; margin-right: 6px; }

/* Chat content — markdown rendering inside .bubble */
.bubble a { color: inherit; text-decoration: underline; word-break: break-all; }
.msg-user .bubble a { color: white; }
.chat-h { font-family: var(--serif); font-weight: 500; margin: 12px 0 6px; }
h2.chat-h { font-size: 17px; }
h3.chat-h { font-size: 15px; }
h4.chat-h { font-size: 14px; color: var(--accent); }
.chat-img { display: block; max-width: 100%; height: auto; border-radius: var(--radius);
    margin: 10px 0; box-shadow: var(--shadow); border: 1px solid var(--line); }
.chat-download {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; margin: 8px 0;
    background: var(--accent); color: white !important;
    border-radius: var(--radius); text-decoration: none !important;
    font-weight: 600; font-size: 13.5px;
    transition: transform .12s, background .15s;
}
.chat-download:hover { background: #0a0a28; transform: translateY(-1px); text-decoration: none !important; }
.chat-download-secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); margin-left: 8px; color: #14143c !important}
.chat-download-secondary:hover { background: var(--surface); }
.chat-download-wrap { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chat-render-badge { display: inline-block; padding: 8px 14px; background: var(--surface-2); border: 1px dashed var(--accent-2);
    border-radius: var(--radius); color: var(--ink-2); font-size: 13px; }
.chat-render-failed { border-color: var(--danger); color: var(--danger); }

/* Admin dashboard — alert strip */
.dash-alerts { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
.dash-alert { display: flex; align-items: center; gap: 16px; padding: 12px 16px;
    border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; line-height: 1.5; }
.dash-alert-body { flex: 1; }
.dash-alert-danger { border-left: 3px solid var(--danger); background: rgba(255, 60, 60, 0.04); }
.dash-alert-warn   { border-left: 3px solid #d99800; background: rgba(255, 180, 0, 0.05); }
.dash-alert-info   { border-left: 3px solid var(--accent); background: var(--surface-2); }
.dash-alert .btn-text { font-size: 13px; color: var(--accent); white-space: nowrap; }

/* Admin dashboard — 14-day sparkline */
.sparkline { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: 8px 0 0; }
.spark-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.spark-bar { width: 100%; max-width: 36px; background: var(--accent); border-radius: 3px 3px 0 0;
    transition: background .15s; cursor: default; }
.spark-bar:hover { background: var(--accent-2); }
.spark-bar.is-today { background: var(--ink); }
.spark-label { font-size: 10.5px; color: var(--muted); margin-top: 4px; font-family: var(--mono); }

/* Admin dashboard — recent activity feed */
.activity-feed { list-style: none; margin: 0; padding: 0; }
.activity-feed li { display: flex; align-items: center; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--line); font-size: 13px; }
.activity-feed li:last-child { border-bottom: none; }
.activity-feed li.empty { justify-content: center; color: var(--muted); border: none; padding: 24px 0; }
.activity-icon { font-size: 17px; flex-shrink: 0; width: 24px; text-align: center; }
.activity-body { flex: 1; color: var(--ink); }
.activity-time { font-size: 11.5px; white-space: nowrap; }

/* KB doc view + chunks */
.kb-content { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 18px; font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
    font-size: 14px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; word-wrap: break-word;
    max-height: 70vh; overflow-y: auto; }
.kb-chunks { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.kb-chunk { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent-2);
    border-radius: var(--radius); padding: 10px 14px; }
.kb-chunk-meta { font-size: 11.5px; color: var(--muted); font-family: var(--mono); margin-bottom: 6px; }
.kb-chunk-body { background: transparent; padding: 0; font-size: 13px; line-height: 1.55;
    color: var(--ink-2); white-space: pre-wrap; word-wrap: break-word; max-height: 200px; overflow-y: auto; }

/* Tag chip — reused on KB list */
.tag-chip { display: inline-block; padding: 2px 8px; margin: 0 4px 2px 0; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 10px; font-size: 11px; color: var(--ink-2); }

/* Indexing status badge colours */
.badge-pending  { background: rgba(255, 180, 0, 0.10); color: #a05a00; border: 1px solid rgba(255, 180, 0, 0.35); }
.badge-indexing { background: rgba(30, 90, 220, 0.08); color: #1a3a8a; border: 1px solid rgba(30, 90, 220, 0.30); }
.badge-failed   { background: rgba(255, 60, 60, 0.10); color: var(--danger); border: 1px solid rgba(255, 60, 60, 0.35); font-weight: 600; }

/* Quick-start prompt cards on empty agent chat */
.quickstart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 28px auto 0; max-width: 760px; }
.quickstart-card { background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 14px 16px; text-align: left; cursor: pointer;
    font-family: inherit; transition: border-color .12s, transform .12s, box-shadow .12s; }
.quickstart-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(20,20,60,.08); }
.quickstart-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.quickstart-prompt { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; }

/* KB-hungry warning on agent chat page */
.kb-warn { margin: 0 0 12px; padding: 12px 16px; border-radius: var(--radius); font-size: 13.5px; line-height: 1.55; }
.kb-warn-starving { background: rgba(255, 60, 60, 0.08); border: 1px solid rgba(255, 60, 60, 0.35); color: var(--ink); }
.kb-warn-sparse   { background: rgba(255, 180, 0, 0.08); border: 1px solid rgba(255, 180, 0, 0.35); color: var(--ink); }
.kb-warn b { color: var(--ink); }
.kb-warn-details { margin-top: 10px; }
.kb-warn-details summary { cursor: pointer; color: var(--accent); font-weight: 500; margin-bottom: 8px; }
.kb-warn-details ul { margin: 6px 0 12px 22px; }
.kb-warn-details li { margin: 4px 0; color: var(--ink-2); }

/* Per-user permissions matrix on /admin/users.php */
.perms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.perm-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.perm-group h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.perm-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; cursor: pointer; }
.perm-toggle input[type=checkbox] { margin-top: 3px; flex-shrink: 0; }
.perm-toggle b { display: block; font-size: 13px; font-weight: 500; color: var(--ink); }
.perm-toggle .perm-key { display: inline-block; margin-left: 6px; font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.perm-toggle .perm-desc { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.perm-toggle:hover b { color: var(--accent); }
.perms-row td { border-top: 2px solid var(--accent); }

/* Invoice status badges */
.badge-paid       { background: rgba(26, 122, 58, 0.10); color: #1a7a3a; border: 1px solid rgba(26, 122, 58, 0.35); }
.badge-issued     { background: rgba(30, 60, 200, 0.08);  color: #1a3a8a; border: 1px solid rgba(30, 60, 200, 0.25); }
.badge-due-soon   { background: rgba(255, 150, 0, 0.10);  color: #a05a00; border: 1px solid rgba(255, 150, 0, 0.40); }
.badge-overdue    { background: rgba(255, 60, 60, 0.10);  color: var(--danger); border: 1px solid rgba(255, 60, 60, 0.40); font-weight: 600; }
.badge-draft      { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.badge-void       { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--line-2); text-decoration: line-through; }

/* Inline filter controls inside .page-actions (e.g. operator console filters) */
.page-actions form { display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.page-actions label { display: inline-flex; align-items: center; gap: 8px; margin: 0;
    font-size: 12.5px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.page-actions select {
    margin: 0; padding: 7px 28px 7px 11px; font-size: 13px; font-family: inherit;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-2); border-radius: var(--radius);
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat; background-position: right 10px center;
    cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.page-actions select:hover  { border-color: var(--line); }
.page-actions select:focus  { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20,20,60,.10); }

/* Console body (operator) override — dark sidebar puts the rest of the chrome on white */
.console-body .page-actions select { background-color: var(--surface); }

/* Operator feedback review cards (/console/feedback.php) */
.feedback-list { display: flex; flex-direction: column; gap: 14px; }
.feedback-card { background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 16px 20px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.feedback-card.fc-up   { border-left: 3px solid #1a7a3a; }
.feedback-card.fc-down { border-left: 3px solid var(--danger); }
.fc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
    padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.fc-rating { display: inline-block; padding: 3px 10px; border-radius: 12px;
    font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.fc-rating.is-up   { background: rgba(26, 122, 58, 0.10); color: #1a7a3a; }
.fc-rating.is-down { background: rgba(255, 60, 60, 0.10); color: var(--danger); }
.fc-meta { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.fc-turn { margin: 10px 0; }
.fc-turn-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.fc-turn-body { padding: 10px 14px; border-radius: var(--radius); font-size: 13.5px;
    line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.fc-turn-user .fc-turn-body  { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.fc-turn-agent .fc-turn-body { background: rgba(20, 20, 60, 0.03); border: 1px solid var(--line-2); color: var(--ink); }
.fc-note { margin-top: 10px; padding: 10px 14px; background: rgba(255, 180, 0, 0.06);
    border: 1px dashed rgba(255, 180, 0, 0.35); border-radius: var(--radius); }
.fc-note .fc-turn-body { padding: 4px 0; background: transparent; border: none; font-style: italic; }
.fc-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
    text-align: right; font-size: 12.5px; }

/* Per-message feedback (thumbs up/down) */
.msg-feedback { display: inline-flex; gap: 6px; margin-top: 6px; opacity: 0; transition: opacity .15s; }
.msg-assistant:hover .msg-feedback, .msg-feedback.is-rated { opacity: 1; }
.msg-feedback button { background: transparent; border: 1px solid var(--line); border-radius: 6px;
    padding: 3px 8px; cursor: pointer; font-size: 12px; color: var(--muted); transition: all .12s; }
.msg-feedback button:hover { color: var(--ink); border-color: var(--line-2); background: var(--surface); }
.msg-feedback button.is-on-up   { color: #1a7a3a; border-color: #1a7a3a; background: rgba(26, 122, 58, 0.08); }
.msg-feedback button.is-on-down { color: var(--danger); border-color: var(--danger); background: rgba(255, 60, 60, 0.08); }

/* Margin table — flag negative margins */
.usage-warn td { background: rgba(255, 180, 0, 0.06); }
tr.usage-over td { background: rgba(255, 60, 60, 0.06); color: var(--danger); }

/* Per-user quota cells */
.usage-over { color: var(--danger); font-weight: 600; }
.quota-input { width: 110px; margin-top: 0; padding: 6px 10px; font-size: 13px; font-family: var(--mono); }

/* Builder: the "platform grounding rule" expandable note */
.grounding-note { margin: 12px 0 0; padding: 10px 14px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius); font-size: 13px; }
.grounding-note summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.grounding-note pre { white-space: pre-wrap; font-family: var(--mono); font-size: 12px;
    line-height: 1.55; color: var(--ink-2); background: var(--surface);
    padding: 12px 14px; border-radius: 4px; margin: 10px 0; overflow-x: auto;
    border: 1px solid var(--line); }
.grounding-note .hint { margin-top: 8px; }
.msg-assistant .bubble { background: var(--surface-2); border: 1px solid var(--line); }
.bubble { padding: 12px 16px; border-radius: var(--radius-lg); font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.msg-meta { font-size: 11px; color: var(--muted); margin-top: 4px; padding: 0 4px; }
.msg-user .msg-meta { text-align: right; }

.tool-call { background: var(--surface); border: 1px dashed var(--line-2); border-left: 3px solid var(--accent-2);
    border-radius: var(--radius); padding: 10px 14px; margin: 8px 0; font-size: 13px; }
.tool-call-head { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.tool-call-name { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.tool-call-arrow { color: var(--muted); }
.tool-call-args, .tool-call-result { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
    background: var(--surface-2); padding: 8px 10px; border-radius: 4px; margin-top: 6px;
    max-height: 280px; overflow: auto; white-space: pre-wrap; }
.tool-call-error { color: var(--danger); }
.tool-call-toggle { font-size: 11px; color: var(--muted); cursor: pointer; user-select: none; }

/* KB citation footer — appears under any assistant message that consumed retrieved chunks */
.kb-sources { margin: 8px 0 0; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 12.5px; }
.kb-sources > summary { cursor: pointer; user-select: none; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 8px; }
.kb-sources > summary::-webkit-details-marker { display: none; }
.kb-sources > summary::before { content: '▸'; font-size: 10px; transition: transform 0.15s; }
.kb-sources[open] > summary::before { transform: rotate(90deg); }
.kb-sources .src-count { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.kb-sources ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.kb-sources li { padding: 6px 0; border-top: 1px dashed var(--line); }
.kb-sources li:first-child { border-top: none; padding-top: 0; }
.src-pill { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); }
.src-pill:hover .src-pill-title { text-decoration: underline; }
.src-pill-n { background: var(--accent); color: #fff; border-radius: 4px; font-size: 10px; font-weight: 600; padding: 1px 6px; min-width: 16px; text-align: center; }
.src-pill-type { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); border-radius: 3px; font-size: 10px; padding: 1px 5px; text-transform: lowercase; }
.src-pill-title { font-weight: 500; }
.src-preview { font-size: 11.5px; color: var(--muted); margin-top: 4px; padding-left: 26px; line-height: 1.45; }

.chat-form { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
.chat-form textarea { flex: 1; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--radius);
    font-family: inherit; font-size: 14px; resize: none; background: var(--surface); color: var(--ink); }
.chat-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20,20,60,.12); }
.chat-form button { align-self: stretch; padding: 0 20px; }

.thinking { color: var(--muted); font-size: 13px; padding: 8px 12px; display: flex; gap: 8px; align-items: center; }
.thinking::before { content:''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ── plan picker ─────────────────────────────────────────── */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; margin: 20px 0; }
.plan-card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-lg);
    padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.plan-card.is-featured { border-color: var(--accent-2); position: relative; }
.plan-card.is-featured::before { content: 'POPULAR'; position: absolute; top: -10px; right: 20px;
    background: var(--accent-2); color: white; font-size: 10px; font-weight: 700;
    letter-spacing: .12em; padding: 3px 10px; border-radius: 4px; }
.plan-card.is-current { border-color: var(--accent); background: rgba(20,20,60,.03); }
/* Keyboard a11y: the radio inside each plan card is visually hidden (opacity:0),
   so surface focus + selection on the card itself. Robust to the existing markup
   whatever the radio's position within .plan-card. */
.plan-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.plan-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20,20,60,.14); }
.plan-name { font-family: var(--serif); font-size: 22px; }
.plan-tagline { color: var(--muted); font-size: 13.5px; min-height: 36px; margin: -2px 0 10px; }
.plan-price { display: flex; align-items: baseline; gap: 4px; }
.plan-price-amount { font-family: var(--serif); font-size: 36px; color: var(--ink); line-height: 1; }
.plan-price-period { font-size: 13px; color: var(--muted); }
.plan-features { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.plan-features li { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.plan-features li:last-child { border-bottom: none; }
.plan-features li.off { color: var(--muted); }
.plan-features b { color: var(--ink); }
.plan-cta { margin-top: auto; }
.plan-cta .btn { width: 100%; text-align: center; }

.billing-toggle { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; margin-bottom: 8px; }
.billing-toggle button { background: transparent; border: none; padding: 6px 14px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; border-radius: 999px; font-weight: 500; }
.billing-toggle button.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20,20,60,.06); }

/* ── mobile ──────────────────────────────────────────────── */
.mobile-nav-toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: 60;
    width: 40px; height: 40px; background: var(--surface); border: 1px solid var(--line-2);
    border-radius: var(--radius); cursor: pointer; padding: 0;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    box-shadow: 0 1px 4px rgba(20,20,60,.08); }
.mobile-nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 1px; transition: transform .2s, opacity .2s; }
.mobile-nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(20,20,60,.45); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s; }
.console-body .mobile-nav-toggle { background: #1c1c44; border-color: #2a2a55; }
.console-body .mobile-nav-toggle span { background: var(--accent-2); }

/* Plan usage panel — shown on /admin/index.php */
.usage-panel .panel-head { align-items: center; }
.usage-row { display: grid; grid-template-columns: 180px 1fr 180px; gap: 14px; align-items: center;
    padding: 10px 0; border-bottom: 1px dashed var(--line); }
.usage-row:last-child { border-bottom: none; }
.usage-label { font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.usage-track { background: var(--surface-2); border-radius: 999px; height: 8px; overflow: hidden; }
.usage-fill  { background: var(--accent); height: 100%; transition: width .3s; min-width: 2px; }
.usage-fill.is-mid  { background: var(--accent-2); opacity: 0.7; }
.usage-fill.is-high { background: var(--warn); }
.usage-fill.is-over { background: var(--danger); }
.usage-value { font-size: 13px; text-align: right; font-family: var(--mono); }

@media (max-width: 980px) {
    .kpi-grid     { grid-template-columns: 1fr 1fr; }
    .kpi-grid-6   { grid-template-columns: repeat(3, 1fr); }
    .usage-row    { grid-template-columns: 1fr; gap: 6px; }
    .usage-value  { text-align: left; }
}
@media (max-width: 768px) {
    .app-body { grid-template-columns: 1fr; }
    .main { padding: 64px 16px 40px; max-width: 100%; }
    .sidebar { position: fixed; top: 0; left: 0; width: 280px; max-width: 85vw;
        height: 100vh; z-index: 50; transform: translateX(-100%);
        transition: transform .25s ease; box-shadow: 4px 0 24px rgba(20,20,60,.15);
        padding-top: 64px; }
    body.nav-open .sidebar { transform: translateX(0); }
    body.nav-open .mobile-nav-backdrop { display: block; opacity: 1; pointer-events: auto; }
    .mobile-nav-toggle { display: flex; }
    body.nav-open .mobile-nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    body.nav-open .mobile-nav-toggle span:nth-child(2) { opacity: 0; }
    body.nav-open .mobile-nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .page-head { flex-direction: column; align-items: stretch; gap: 14px; }
    .kpi-grid, .kpi-grid-6 { grid-template-columns: 1fr 1fr; gap: 10px; }
    .usecase-grid { grid-template-columns: 1fr; }
    .panel { padding: 18px 16px; }
}

/* ── reduced motion (WCAG 2.3.3 / respects prefers-reduced-motion) ──
   Users who ask their OS to reduce motion get no sidebar slide, no pulse,
   and effectively-instant transitions. Focus rings (outline) are unaffected. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .sidebar { transition: none !important; }
}

/* ── editor + sticky aside (social post editor's live advisor panel;
      reusable for any form-plus-companion layout) ────────────────── */
.split-aside { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.split-aside > aside { position: sticky; top: 16px; }
@media (max-width: 1080px) {
    .split-aside { grid-template-columns: 1fr; }
    .split-aside > aside { position: static; }
}
/* advisor scorecard rows */
.advise-row { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.advise-row:last-child { border-bottom: none; }
.advise-row b { min-width: 96px; font-weight: 600; }
.advise-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; align-self: center; }
.advise-dot.good { background: #2e9e5b; }
.advise-dot.warn { background: #e0a10c; }
.advise-dot.bad  { background: #d64545; }
/* emoji quick-pick row above the post textarea */
.emoji-row { display: flex; gap: 2px; flex-wrap: wrap; margin: 2px 0 4px; }
.emoji-row button { border: 1px solid transparent; background: none; font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.emoji-row button:hover { border-color: var(--line); background: var(--surface-2); }

/* ── bookings month grid (Google-Calendar-style overview) ────────── */
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #8a8ba0; padding: 6px; text-align: left; }
.cal-grid td { border: 1px solid var(--line); vertical-align: top; height: 96px; padding: 4px 6px; }
.cal-grid td.other { background: var(--surface-2); }
.cal-grid .dnum { font-size: 11px; color: #8a8ba0; }
.cal-grid td.today { box-shadow: inset 0 0 0 2px var(--accent, #14143c); }
.cal-grid td.today .dnum { font-weight: 700; color: var(--accent, #14143c); }
.cal-chip { display: block; margin: 2px 0; padding: 1px 6px; border-radius: 4px; font-size: 11px; line-height: 1.5;
            color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-legend { display: inline-flex; gap: 14px; flex-wrap: wrap; font-size: 12px; align-items: center; }
.cal-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
a.cal-chip { text-decoration: none; cursor: pointer; }
tr:target > td { background: #fff8e1; box-shadow: inset 3px 0 0 var(--accent, #14143c); }

/* ── compact inline controls (CRM table row: status select + small buttons
      share one height/看 look so they sit flush together) ─────────── */
.btn-sm { font-size: 12px; padding: 4px 10px; }
select.select-sm { display: inline-block; font: inherit; font-size: 12px; font-weight: 500;
    padding: 4px 8px; border: 1px solid var(--line-2); background: var(--surface);
    color: var(--ink); border-radius: var(--radius); cursor: pointer; height: 27px;
    vertical-align: middle; transition: all .15s; }
select.select-sm:hover { border-color: var(--ink-2); }
input.input-sm { display: inline-block; font: inherit; font-size: 12px; padding: 4px 8px;
    border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
    border-radius: var(--radius); height: 27px; vertical-align: middle; }

/* ── Complimentary training (entry #139) ─────────────────────────────── */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 4px 0 16px; }
.slot-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.slot-day h4 { margin: 0 0 2px; font-size: 13px; color: var(--ink); }
.slot-day .slot-dow { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.slot-chip { display: block; margin: 6px 0 0; cursor: pointer; }
.slot-chip input { position: absolute; opacity: 0; pointer-events: none; }
.slot-chip span { display: block; text-align: center; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 999px;
    background: var(--surface-2); font-size: 13px; color: var(--ink); transition: all .15s; }
.slot-chip:hover span { border-color: var(--accent); }
.slot-chip:has(input:checked) span { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.slot-chip .slot-cap { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.slot-chip:has(input:checked) .slot-cap { color: rgba(255,255,255,.8); }
.session-when { font-weight: 600; }
.session-when small { display: block; font-weight: 400; color: var(--muted); }

/* Calendar-style slot picker (training) */
.cal { margin: 4px 0 18px; }
.cal-month { margin-bottom: 18px; }
.cal-month h3 { font-family: var(--serif); font-size: 17px; margin: 0 0 10px; }
.cal .cal-head, .cal .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .cal-head { margin-bottom: 6px; }
.cal .cal-head span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); text-align: center; }
.cal-cell { min-height: 64px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 6px; }
.cal-cell.cal-empty { background: transparent; border-color: transparent; }
.cal-cell.cal-past { background: var(--surface-2); opacity: .45; }
.cal-cell.cal-open { border-color: var(--accent); box-shadow: 0 1px 4px rgba(26,86,219,.08); }
.cal-cell.cal-today { outline: 2px solid var(--accent); outline-offset: -1px; }
.cal-daynum { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.cal-open .cal-daynum { color: var(--ink); font-weight: 600; }
.cal-cell .slot-chip { margin: 4px 0 0; }
.cal-cell .slot-chip span { padding: 4px 6px; font-size: 12px; border-radius: 7px; }
.cal-cell .slot-chip .slot-cap { font-size: 9.5px; }
@media (max-width: 760px) { .cal-cell { min-height: 46px; padding: 4px; } .cal-head span { font-size: 9px; } }

/* Attendee picker (training) — selectable person cards */
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 10px 0 4px; }
.att-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: all .15s; position: relative; }
.att-card:hover { border-color: var(--accent); }
.att-card input { position: absolute; opacity: 0; pointer-events: none; }
.att-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2);
    border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center;
    font: 600 15px var(--serif); color: var(--ink); }
.att-name { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.att-role { font-size: 11px; color: var(--muted); }
.att-tick { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2);
    display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; transition: all .15s; }
.att-card:has(input:checked) { border-color: var(--accent); background: rgba(26, 86, 219, .05); }
.att-card:has(input:checked) .att-avatar { background: var(--accent); border-color: var(--accent); color: #fff; }
.att-card:has(input:checked) .att-tick { background: var(--accent); border-color: var(--accent); color: #fff; }
.att-card.att-held { opacity: .55; cursor: default; }
.att-card.att-held:hover { border-color: var(--line); }
.att-held-note { font-size: 10.5px; color: var(--warn); }
.form-block { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.form-block > h3 { font-size: 14px; margin: 0 0 4px; }
.form-block > .hint { margin: 0 0 8px; display: block; }

/* Plan accordion (console) */
details.plan-acc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
details.plan-acc > summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
details.plan-acc > summary::-webkit-details-marker { display: none; }
details.plan-acc > summary::before { content: '▸'; color: var(--muted); transition: transform .15s; }
details.plan-acc[open] > summary::before { transform: rotate(90deg); }
details.plan-acc[open] > summary { border-bottom: 1px solid var(--line); }
details.plan-acc .plan-acc-name { font-family: var(--serif); font-size: 16px; color: var(--ink); }
details.plan-acc .plan-acc-body { padding: 16px 18px; }

/* ── Mobile overflow fix (entry #147): the PAGE never scrolls sideways. ──
   Same pattern as the www/ site: anything wide scrolls INSIDE its own
   container. Pinch zoom stays enabled (no user-scalable=no): once the page
   fits the viewport, accidental zoom stops on its own. */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; }
    /* The body grid's track must be allowed to shrink below its content
       (grid min-width:auto trap), or one wide element inflates the whole
       page to its width and everything else stretches with it. */
    .app-body { grid-template-columns: minmax(0, 1fr) !important; }
    .main { min-width: 0; max-width: 100%; }
    .main > * { min-width: 0; }
    /* Wide tables become their own touch scroll container (www .cmp-wrap pattern) */
    table.data { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    table.data thead, table.data tbody, table.data tr { width: max-content; min-width: 100%; }
    /* Fixed-column grids collapse instead of forcing width */
    .kpi-grid, .kpi-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid, .grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
    /* 3/4-column rows hold SHORT fields (times, numbers, small selects):
       keep them 2-up so a label stays visually paired with its row, instead
       of collapsing into an orphaned full-width stack. Checkboxes and
       free-text fields get the whole row (the :has() fallback is just 2-up). */
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-3 > .check, .grid-4 > .check { grid-column: 1 / -1; margin-bottom: 0 !important; }
    .grid-3 > label:has(input[type=text]), .grid-3 > label:has(input[type=email]),
    .grid-3 > label:has(input[type=password]), .grid-3 > label:has(input[type=url]),
    .grid-3 > label:has(input[type=tel]), .grid-3 > label:has(select),
    .grid-3 > label:has(input[type=file]), .grid-3 > label:has(textarea),
    .grid-4 > label:has(input[type=text]), .grid-4 > label:has(input[type=email]),
    .grid-4 > label:has(input[type=password]), .grid-4 > label:has(input[type=url]),
    .grid-4 > label:has(input[type=tel]), .grid-4 > label:has(select),
    .grid-4 > label:has(input[type=file]), .grid-4 > label:has(textarea) { grid-column: 1 / -1; }
    .ent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .att-grid { grid-template-columns: minmax(0, 1fr); }
    .panel-head { flex-wrap: wrap; gap: 6px; }
    .page-head { flex-wrap: wrap; }
    /* Grid/flex children may shrink below content width */
    .kpi, .metric, .panel, .usecase-card { min-width: 0; }
    .kpi-value { font-size: 24px; }
    /* Long unbroken strings (URLs, tokens, emails) wrap instead of stretching */
    .panel, .kpi, td, th { overflow-wrap: anywhere; }
    table.data td, table.data th { overflow-wrap: normal; }
}

/* Bookings month view on phones (entry #148): chips become coloured DOTS,
   like a native calendar; the details live in the Upcoming list below the
   grid, which each dot still links to. */
@media (max-width: 768px) {
    .cal-grid { table-layout: fixed; }
    .cal-grid th { font-size: 9px; padding: 4px 2px; text-align: center; letter-spacing: 0; }
    .cal-grid td { height: auto; min-height: 46px; padding: 3px 2px 5px; text-align: center; }
    .cal-grid .dnum { display: block; text-align: center; margin-bottom: 2px; }
    .cal-grid .cal-chip { width: 7px; height: 7px; min-height: 0; border-radius: 50%; padding: 0;
        margin: 2px auto 0; font-size: 0; line-height: 0; overflow: hidden; }
    .cal-grid td > .muted { display: none; }   /* the "+N more" counter */
    .cal-legend { margin: 6px 0 0; }
}

/* Full mobile sweep (entry #149). Training's "Book a session" month grid
   becomes an AGENDA on phones: only days that actually have slots are
   listed (7 columns of chips is unreadable at 375px); months with no open
   days hide entirely. Plus the small overflows the sweep caught: page-head
   children must be allowed to shrink, long links wrap, the console activity
   feed wraps, and the Plans upgrade-sequence rows stack like .grid-3. */
@media (max-width: 768px) {
    .cal .cal-head { display: none; }
    .cal .cal-grid { display: block; }
    .cal .cal-cell { display: none; }
    .cal .cal-cell.cal-open { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap;
        min-height: 0; margin-bottom: 8px; padding: 8px 10px; }
    .cal .cal-cell.cal-open .cal-daynum { margin: 0; font-size: 14.5px; font-weight: 600;
        color: var(--ink); min-width: 24px; }
    .cal .cal-cell.cal-open .slot-chip { margin: 0; }
    .cal .cal-cell.cal-open .slot-chip span { white-space: nowrap; }
    .cal .cal-month:not(:has(.cal-open)) { display: none; }

    .page-head > * { min-width: 0; max-width: 100%; }
    .main a { overflow-wrap: anywhere; }
    .feed-row { flex-wrap: wrap; }
    .feed-row > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
    .feed-row .feed-main { white-space: normal; }   /* wrap instead of ellipsis on phones */
    .page-actions { flex-wrap: wrap; max-width: 100%; }
    .seq-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .seq-row > .seq-on { grid-column: 1 / -1; }
}