/* ==========================================================================
   chatbot.css — Split-panel Ask PX (extends front_md.css)
   Left: conversation | Right: visualisations
   Collapses to linear on screens < 1100px
   ========================================================================== */

/* ================================================================
   PAGE LAYOUT OVERRIDES (front_md.css)
   
   front_md.css sets:
     .wrap        → margin:18px auto 48px
     .panel       → height:calc(100vh - 240px); min-height:520px
     .stats       → margin:14px 0
     html,body    → height:100%
   
   We override all of these so the chatbot fits exactly in the
   viewport with zero page scroll.
   ================================================================ */
html {
    height:100% !important;
    overflow:hidden !important;
}
body {
    height:100% !important;
    overflow:hidden !important;
    margin:0 !important;
    background:#fff !important;
}
.wrap {
    display:flex !important;
    flex-direction:column !important;
    height:100vh !important;
    max-height:100vh !important;
    margin:0 auto !important;
    padding:10px 18px 6px !important;
    overflow:hidden !important;
}

/* Each section above the split takes only its natural height */
.wrap > header   { flex:0 0 auto; margin-bottom:4px; }
.wrap > .topline { flex:0 0 auto; margin:2px 0 4px; }
.wrap > .divider { flex:0 0 auto; }
.wrap > .stats   { flex:0 0 auto; margin:6px 0 !important; padding:8px 14px; }

/* The split panel fills ALL remaining space */
.cb-split {
    display:grid;
    grid-template-columns:50% 50%;
    gap:14px;
    margin-top:6px;
    flex:1 1 0;
    min-height:0 !important;
    overflow:hidden;
}

/* Kill the fixed panel height from front_md.css */
.panel {
    height:auto !important;
    min-height:0 !important;
}
.cb-split .panel {
    box-shadow:none;
}

/* ================================================================
   LEFT COLUMN
   ================================================================ */
.cb-left {
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:hidden;
}

/* ---- Input area (top of left column) ---- */
.cb-input-area {
    flex:0 0 auto;
    padding:0 0 4px;
}

.cb-search{ margin-bottom:0; }

.cb-textarea {
    width:100%;
    min-height:42px;
    max-height:120px;
    border:1.5px solid var(--px-border);
    border-radius:12px;
    padding:9px 42px 9px 12px;
    font-size:13.5px;
    font-family:inherit;
    color:#212121;
    outline:none;
    background:#fff;
    resize:none;
    line-height:1.5;
}
.cb-textarea:focus {
    border-color:var(--px-purple);
    box-shadow:0 0 0 4px rgba(123,56,194,.12);
}
.cb-textarea::placeholder { color:var(--px-muted); }

.cb-send-btn {
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:transparent;
    cursor:pointer;
    padding:5px;
    border-radius:8px;
    transition:background .15s;
}
.cb-send-btn:hover { background:rgba(123,56,194,.1); }
.cb-send-btn:disabled { opacity:.35; cursor:not-allowed; }

/* ---- Chat panel (fills remaining left column) ---- */
.cb-panel {
    flex:1 1 0;
    min-height:0 !important;
    height:auto !important;
    overflow-y:auto;
    padding:12px;
    scroll-behavior:smooth;
}

.cb-panel::-webkit-scrollbar { width:6px; }
.cb-panel::-webkit-scrollbar-thumb {
    background:rgba(15,18,32,0.12);
    border-radius:999px;
}

/* ---- Welcome state ---- */
.cb-welcome {
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:8px;
}

/* Remove dashed border from front_md placeholder card */
.cb-welcome .ph-card {
    border:none;
    background:transparent;
    padding:0;
}

.cb-suggestions {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:12px;
}

.cb-chip {
    background:#fff;
    border:1px solid var(--px-border);
    border-radius:999px;
    padding:5px 12px;
    font-size:11.5px;
    font-weight:700;
    color:#2b2f42;
    cursor:pointer;
    font-family:inherit;
    transition:all .15s ease;
}
.cb-chip:hover {
    border-color:rgba(123,56,194,.45);
    background:rgba(123,56,194,.06);
    box-shadow:0 4px 12px rgba(15,18,32,.06);
}

/* ---- Chip groups (categorised suggestions) ---- */
.cb-chip-group { margin-top:8px; }
.cb-chip-heading {
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--px-purple);
    margin-bottom:4px;
    padding-left:2px;
}

/* ---- New Chat button ---- */
.cb-new-chat {
    cursor:pointer;
    font-weight:800;
    font-size:12px;
}
.cb-new-chat:hover {
    background:rgba(123,56,194,.22);
    border-color:rgba(123,56,194,.45);
}

/* ================================================================
   RIGHT COLUMN
   ================================================================ */
.cb-right {
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:hidden;
}

.cb-viz-panel {
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    min-height:0 !important;
    height:auto !important;
}

/* ---- Viz header: tabs row + action bar ---- */
.cb-viz-header {
    display:flex;
    flex-direction:column;
    gap:0;
    margin-bottom:10px;
    flex:0 0 auto;
}
.cb-viz-header .cb-viz-tabs {
    border-bottom:none;
    margin-bottom:0;
}

/* ---- Tab bar ---- */
.cb-viz-tabs {
    flex:0 0 auto;
    display:flex;
    gap:4px;
    padding:0 0 8px;
    overflow-x:auto;
    border-bottom:1px solid var(--px-border);
    margin-bottom:10px;
    scrollbar-width:thin;
    scrollbar-color:var(--px-purple) #e9e9ef;
}
.cb-viz-tabs:empty { display:none; }

.cb-viz-tabs::-webkit-scrollbar { height:8px; }
.cb-viz-tabs::-webkit-scrollbar-track {
    background:#e9e9ef;
    border-radius:999px;
}
.cb-viz-tabs::-webkit-scrollbar-thumb {
    background:var(--px-purple);
    border-radius:999px;
}

.cb-viz-tab {
    flex:0 0 auto;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid var(--px-border);
    background:#fff;
    font-size:11px;
    font-weight:800;
    color:#636a7a;
    cursor:pointer;
    font-family:inherit;
    white-space:nowrap;
    transition:all .15s ease;
}
.cb-viz-tab:hover {
    border-color:rgba(123,56,194,.35);
    color:#2b2f42;
}
.cb-viz-tab.active {
    background:var(--px-purple);
    color:#fff;
    border-color:var(--px-purple);
}

/* ---- Action bar (PDF buttons) ---- */
.cb-viz-actions {
    display:flex;
    gap:6px;
    flex:0 0 auto;
    padding:8px 0;
    border-bottom:1px solid var(--px-border);
    margin-bottom:10px;
}

/* ---- Viz content (scrollable) ---- */
.cb-viz-content {
    flex:1 1 0;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:2px;
}
.cb-viz-content::-webkit-scrollbar { width:6px; }
.cb-viz-content::-webkit-scrollbar-thumb {
    background:rgba(15,18,32,0.12);
    border-radius:999px;
}

/* A single viz item */
.cb-viz-item { display:none; animation:cbFadeIn .3s ease; }
.cb-viz-item.active { display:block; }

/* ---- Empty state ---- */
.cb-viz-empty {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:200px;
    text-align:center;
    padding:40px 20px;
    gap:20px;
}
.cb-viz-empty-title {
    font-size:14px;
    font-weight:800;
    color:#b0b5c3;
}
.cb-viz-empty-types {
    display:flex;
    gap:24px;
}
.cb-viz-type {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:700;
    color:#9094a3;
}

/* ---- Left panel welcome sub-heading ---- */
.cb-welcome-sub {
    margin-bottom:6px;
    font-size:12.5px;
}

/* ---- Chart containers ---- */
.cb-viz-chart { margin:0 0 12px; min-height:300px; }

/* Chart / Map download button */
.cb-chart-wrap { position:relative; margin:0 0 12px; isolation:isolate; }
.cb-chart-wrap .cb-viz-chart { margin:0; }
.cb-chart-dl-btn {
    position:absolute; top:8px; right:8px;
    display:flex; align-items:center; gap:4px;
    padding:5px 11px; border-radius:6px;
    background:rgba(255,255,255,0.95); border:1px solid #e5e7eb;
    font-size:11px; font-weight:700; color:#7B38C2;
    cursor:pointer; opacity:0; transition:opacity .18s ease;
    box-shadow:0 2px 6px rgba(0,0,0,.15); z-index:1000;
    user-select:none; pointer-events:all;
}
.cb-chart-dl-icon { font-size:13px; }
.cb-chart-wrap:hover .cb-chart-dl-btn { opacity:1; }
.cb-chart-dl-btn:hover { background:#f5f0fc; border-color:#c4a0e8; }
.cb-chart-dl-menu {
    display:none; position:absolute; top:36px; right:8px;
    background:#fff; border:1px solid #e5e7eb; border-radius:8px;
    box-shadow:0 4px 14px rgba(0,0,0,.15); z-index:1001; min-width:90px;
    overflow:hidden;
}
.cb-chart-dl-menu.open { display:block; }
.cb-chart-dl-opt {
    padding:8px 14px; font-size:12px; font-weight:700;
    color:#2b2f42; cursor:pointer;
}
.cb-chart-dl-opt:hover { background:#f5f0fc; color:#7B38C2; }

/* ---- Table containers ---- */
.cb-viz-table { margin:0 0 12px; overflow-x:auto; }

.cb-viz-table table {
    width:100%;
    border-collapse:collapse;
    font-size:12px;
    border:1px solid var(--px-border);
    border-radius:12px;
    overflow:hidden;
}
.cb-viz-table thead { background:var(--px-ink); }
.cb-viz-table th {
    padding:8px 10px;
    text-align:left;
    font-weight:800;
    color:#fff;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.3px;
    white-space:nowrap;
    position:sticky;
    top:0;
    z-index:1;
}
.cb-viz-table td {
    padding:7px 10px;
    border-bottom:1px solid var(--px-border);
    color:#2b2f42;
    vertical-align:top;
}
.cb-viz-table tr:nth-child(even) { background:#fafbfe; }
.cb-viz-table tr:hover { background:rgba(123,56,194,.04); }
.cb-viz-table td:last-child, .cb-viz-table th:last-child { text-align:right; }

/* ---- Map containers ---- */
.cb-viz-map {
    margin:0 0 12px;
    border-radius:12px;
    overflow:hidden;
    min-height:400px;
}

.cb-viz-title {
    font-weight:800;
    font-size:13px;
    color:#2b2f42;
    margin-bottom:8px;
}

/* Leaflet popup + tooltip */
.cb-map-popup { font-family:Poppins,system-ui,sans-serif; font-size:12px; }
.cb-map-tooltip { font-family:Poppins,system-ui,sans-serif; font-size:11px; font-weight:700; }

/* ================================================================
   MESSAGES
   ================================================================ */
.cb-msg {
    margin-bottom:10px;
    animation:cbFadeIn .25s ease;
}
@keyframes cbFadeIn {
    from { opacity:0; transform:translateY(4px); }
    to   { opacity:1; transform:translateY(0); }
}

.cb-msg-header {
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:4px;
}

.cb-avatar {
    width:24px;
    height:24px;
    border-radius:6px;
    display:grid;
    place-items:center;
    font-size:10px;
    font-weight:900;
    flex-shrink:0;
}
.cb-avatar.user {
    background:rgba(15,18,32,.08);
    color:var(--px-muted);
    border:1px solid var(--px-border);
}
.cb-avatar.bot {
    background:var(--px-purple);
    color:#fff;
}

.cb-body {
    margin-left:30px;
    padding:8px 12px;
    border-radius:12px;
    font-size:12.5px;
    line-height:1.45;
    color:#212121;
}
.cb-msg.user .cb-body {
    background:#fff;
    border:1px solid var(--px-border);
}
.cb-msg.bot .cb-body {
    background:#fff;
    border:1px solid rgba(123,56,194,.18);
}

/* ---- Markdown inside messages ---- */
.cb-body p { margin:0 0 4px; }
.cb-body p:last-child { margin-bottom:0; }
.cb-body strong { color:#2b2f42; font-weight:800; }
.cb-body em { color:var(--px-purple); font-style:italic; }
.cb-body code {
    font-family:'Cascadia Code','Fira Code',monospace;
    background:rgba(15,18,32,.05);
    padding:1px 4px;
    border-radius:4px;
    font-size:11.5px;
}
.cb-body h3 { font-size:13px; font-weight:800; color:#2b2f42; margin:6px 0 2px; }
.cb-body h4 {
    font-size:11px;
    font-weight:900;
    color:var(--px-purple);
    text-transform:uppercase;
    letter-spacing:.3px;
    margin:5px 0 2px;
}
.cb-body ul, .cb-body ol { margin:2px 0 4px 24px; padding-left:4px; }
.cb-body li { margin-bottom:2px; font-size:12px; }
.cb-body a { color:var(--px-purple); text-decoration:none; font-weight:700; }
.cb-body a:hover { text-decoration:underline; }

/* ---- Viz links in left panel ---- */
.cb-viz-link {
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:var(--px-purple);
    font-weight:800;
    font-size:11.5px;
    text-decoration:none;
    padding:4px 10px;
    margin:2px 0;
    background:rgba(123,56,194,.06);
    border:1px solid rgba(123,56,194,.15);
    border-radius:8px;
    cursor:pointer;
    transition:all .15s ease;
}
.cb-viz-link:hover {
    background:rgba(123,56,194,.12);
    border-color:rgba(123,56,194,.35);
    text-decoration:none;
}
.cb-viz-link-icon { font-size:14px; line-height:1; }

/* ---- Tables in left panel (compact) ---- */
.cb-body table {
    width:100%;
    border-collapse:collapse;
    margin:8px 0;
    font-size:11px;
    border:1px solid var(--px-border);
    border-radius:10px;
    overflow:hidden;
}
.cb-body thead { background:var(--px-ink); }
.cb-body th {
    padding:6px 8px;
    text-align:left;
    font-weight:800;
    color:#fff;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.3px;
    white-space:nowrap;
}
.cb-body td {
    padding:5px 8px;
    border-bottom:1px solid var(--px-border);
    color:#2b2f42;
    vertical-align:top;
    font-size:11px;
}
.cb-body tr:nth-child(even) { background:#fafbfe; }
.cb-body tr:hover { background:rgba(123,56,194,.04); }
.cb-body td:last-child, .cb-body th:last-child { text-align:right; }

/* ---- Thinking indicator ---- */
.cb-thinking {
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:30px;
    padding:8px 12px;
    color:var(--px-muted);
    font-size:12px;
    font-weight:600;
}

.cb-dots { display:flex; gap:4px; }
.cb-dots span {
    width:5px; height:5px;
    background:var(--px-purple);
    border-radius:999px;
    animation:cbPulse 1.4s infinite;
}
.cb-dots span:nth-child(2) { animation-delay:.2s; }
.cb-dots span:nth-child(3) { animation-delay:.4s; }

@keyframes cbPulse {
    0%,80%,100% { opacity:.25; transform:scale(.8); }
    40%         { opacity:1; transform:scale(1.2); }
}

.cb-thinking-wrap {
    margin-left:30px;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.cb-thinking-log {
    display:flex;
    flex-direction:column;
    gap:2px;
    padding-left:4px;
}
.cb-thinking-done {
    font-size:11px;
    font-weight:500;
    color:var(--px-muted);
    opacity:0.75;
    line-height:1.5;
    padding-left:2px;
}
.cb-thinking { margin-left:0 !important; }
.cb-thinking-status { transition:color 0.2s ease; }
.cb-thinking-update { color:var(--px-purple); font-weight:700; }

/* ---- Active message indicator ---- */
.cb-msg.cb-msg-active .cb-body {
    border-color:var(--px-purple);
    box-shadow:0 0 0 2px rgba(123,56,194,.12);
}

/* ================================================================
   PDF BUTTONS
   ================================================================ */
.cb-report-btn {
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:6px 12px;
    border-radius:999px;
    border:1.5px solid var(--px-purple);
    background:transparent;
    color:var(--px-purple);
    font-size:11px;
    font-weight:800;
    font-family:inherit;
    cursor:pointer;
    white-space:nowrap;
    transition:all .15s ease;
}
.cb-report-btn:hover:not(:disabled) {
    background:var(--px-purple);
    color:#fff;
}
.cb-report-btn:disabled { opacity:.35; cursor:not-allowed; }

.cb-briefing-btn {
    background:var(--px-purple);
    color:#fff;
    border-color:var(--px-purple);
}
.cb-briefing-btn:hover:not(:disabled) {
    background:#5e1a9e;
    border-color:#5e1a9e;
    color:#fff;
}
.cb-briefing-btn svg { stroke:#fff; }

.cb-pptx-btn {
    background:#C05621;
    color:#fff;
    border-color:#C05621;
}
.cb-pptx-btn:hover:not(:disabled) {
    background:#9C4518;
    border-color:#9C4518;
    color:#fff;
}
.cb-pptx-btn svg { stroke:#fff; }

.cb-report-btn.loading { pointer-events:none; opacity:.6; }
.cb-report-btn.loading span::after { content:'...'; animation:cbPulse 1s infinite; }

/* ---- Excel Export Button ---- */
.cb-export-bar {
    display:flex;
    justify-content:flex-end;
    padding:8px 4px 6px;
    border-bottom:1px solid var(--px-border,#e9e9ef);
    margin-bottom:8px;
}
.cb-export-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 16px;
    border-radius:20px;
    border:1.5px solid #1a7a3a;
    background:#fff;
    color:#1a7a3a;
    font-size:11px;
    font-weight:800;
    font-family:inherit;
    cursor:pointer;
    white-space:nowrap;
    transition:all .15s ease;
}
.cb-export-btn svg { stroke:#1a7a3a; flex-shrink:0; }
.cb-export-btn:hover:not(:disabled) { background:#1a7a3a; color:#fff; }
.cb-export-btn:hover:not(:disabled) svg { stroke:#fff; }
.cb-export-btn:disabled { opacity:.5; cursor:wait; }

/* ================================================================
   RESPONSIVE: collapse to linear
   ================================================================ */
@media (max-width:1100px) {
    .wrap { height:auto !important; max-height:none !important; overflow-y:auto !important; }
    .cb-split {
        grid-template-columns:1fr;
        overflow:visible;
    }
    .cb-left  { min-height:400px; }
    .cb-right { min-height:400px; }
    .cb-body  { margin-left:0; }
}

@media (max-width:700px) {
    .cb-body table { font-size:10px; }
    .cb-viz-table table { font-size:11px; }
}

/* ================================================================
   VOICE INPUT — mic button
   ================================================================ */
.cb-mic-btn {
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 5px;
    border-radius: 8px;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cb-mic-btn:hover {
    background: rgba(123, 56, 194, 0.1);
}
.cb-mic-btn.recording {
    background: rgba(220, 38, 38, 0.12);
    animation: mic-pulse 1s ease-in-out infinite;
}
.cb-mic-btn.recording svg path {
    fill: #dc2626;
}
@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Send button pushed to far right */
.cb-send-btn {
    right: 8px !important;
}

/* Textarea right padding clears ALL three buttons (speaker ~28px + mic ~28px + send ~28px + gaps) */
.cb-textarea {
    padding-right: 100px !important;
}

/* ================================================================
   VOICE OUTPUT — speaker toggle + speaking state
   ================================================================ */
.cb-speaker-btn {
    position: absolute;
    right: 64px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 5px;
    border-radius: 8px;
    transition: background .15s, color .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7B38C2;
    opacity: 0.45;
}
.cb-speaker-btn:hover {
    background: rgba(123, 56, 194, 0.1);
    opacity: 1;
}

/* TTS enabled — speaker is "on" */
.cb-speaker-btn.active {
    opacity: 1;
    background: rgba(123, 56, 194, 0.1);
}
.cb-speaker-btn.active svg {
    stroke: #7B38C2;
}

/* Speaking animation — purple pulse on both mic and speaker while audio plays */
.cb-mic-btn.speaking,
.cb-speaker-btn.speaking {
    opacity: 1;
    animation: cb-speaking-pulse 1.2s ease-in-out infinite;
}
.cb-mic-btn.speaking svg path {
    fill: #7B38C2;
}
.cb-speaker-btn.speaking {
    background: rgba(123, 56, 194, 0.12);
}
.cb-speaker-btn.speaking svg {
    stroke: #7B38C2;
}

@keyframes cb-speaking-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(123, 56, 194, 0.3); }
    50%      { opacity: 0.5; box-shadow: 0 0 0 5px rgba(123, 56, 194, 0); }
}
/* ---- Composing-report progress ring ----
   Shown in place of the .cb-dots indicator while the active status is
   "Composing report…". Continuously rotating purple arc + elapsed-time
   counter. Honest signal — no fake progress. Reverts to dots when a
   subsequent tool round begins or when the response arrives.
*/
.cb-composing-ring {
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.cb-composing-ring svg {
    width:18px;
    height:18px;
    transform:rotate(-90deg);   /* arc starts at 12 o'clock */
}
.cb-composing-ring .cb-cr-track {
    fill:none;
    stroke:rgba(123, 56, 194, 0.15);
    stroke-width:3;
}
.cb-composing-ring .cb-cr-arc {
    fill:none;
    stroke:var(--px-purple, #7B38C2);
    stroke-width:3;
    stroke-linecap:round;
    /* Circumference at r=15 is ~94.25; show ~25% as a moving arc. */
    stroke-dasharray:24 70;
    transform-origin:18px 18px;
    animation:cbComposeSpin 1.4s linear infinite;
}
.cb-composing-ring .cb-cr-time {
    font-size:11px;
    font-weight:600;
    color:var(--px-purple, #7B38C2);
    font-variant-numeric:tabular-nums;
    min-width:28px;
    letter-spacing:0.2px;
}

@keyframes cbComposeSpin {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
}

/* ---- Per-viz action bar (download chart/map/table) ----
   A small floating action group anchored to the top-right of each viz
   panel. Visible on hover or when a dropdown is open. Charts and maps
   show a single PNG button; tables show a Save dropdown with PNG +
   Excel options. The hospital-list "Export All Hospitals (.xlsx)"
   button (rendered inside the table wrapper) is a separate full-data
   server export and is not part of this action bar.
*/
.cb-viz-item { position:relative; }   /* anchor for the absolute action bar */

.cb-viz-item-actions {
    position:absolute;
    top:6px;
    right:6px;
    display:flex;
    gap:6px;
    /* Sits above Leaflet's internal panes (Leaflet uses z-index up to ~800
       for popups and controls) so the action bar isn't occluded when it
       overlaps a map. */
    z-index:1000;
    opacity:0;
    transform:translateY(-2px);
    transition:opacity 0.18s ease, transform 0.18s ease;
    pointer-events:none;
}
/* Reveal on hover, on focus-within (keyboard), or when a dropdown is open */
.cb-viz-item:hover .cb-viz-item-actions,
.cb-viz-item:focus-within .cb-viz-item-actions,
.cb-viz-item-actions.cb-viz-item-actions-pinned {
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.cb-viz-action {
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 9px;
    background:#fff;
    border:1px solid rgba(123, 56, 194, 0.25);
    border-radius:6px;
    color:var(--px-purple, #7B38C2);
    font-size:11px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    box-shadow:0 1px 3px rgba(0, 0, 0, 0.08);
    transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cb-viz-action:hover {
    background:var(--px-purple, #7B38C2);
    border-color:var(--px-purple, #7B38C2);
    color:#fff;
}
.cb-viz-action:disabled {
    opacity:0.6;
    cursor:wait;
}
.cb-viz-action svg {
    flex-shrink:0;
}

/* Dropdown variant (used for tables: PNG + Excel) */
.cb-viz-action-dropdown {
    position:relative;
}
.cb-viz-action-menu {
    position:absolute;
    top:calc(100% + 4px);
    right:0;
    min-width:140px;
    background:#fff;
    border:1px solid rgba(123, 56, 194, 0.25);
    border-radius:6px;
    box-shadow:0 4px 12px rgba(0, 0, 0, 0.12);
    padding:4px;
    display:none;
    flex-direction:column;
    gap:2px;
    z-index:1001;   /* one above .cb-viz-item-actions so the menu floats correctly */
}
.cb-viz-action-dropdown.open .cb-viz-action-menu {
    display:flex;
}
.cb-viz-action-menu-item {
    background:transparent;
    border:none;
    padding:7px 10px;
    text-align:left;
    font-size:12px;
    font-weight:600;
    color:#333;
    border-radius:4px;
    cursor:pointer;
    transition:background 0.12s ease, color 0.12s ease;
}
.cb-viz-action-menu-item:hover {
    background:rgba(123, 56, 194, 0.08);
    color:var(--px-purple, #7B38C2);
}

/* ================================================================
   GUEST MODE — banner, watermarks, locked states, modals
   See app.js GUEST MODE section for the JS that creates these.
   ================================================================ */

/* ---- Top-of-chat dismissable banner ---- */
.px-guest-banner {
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 14px;
    background:linear-gradient(90deg, rgba(123, 56, 194, 0.08), rgba(123, 56, 194, 0.03));
    border:1px solid rgba(123, 56, 194, 0.18);
    border-radius:8px;
    margin:0 0 10px;
    font-size:12px;
    line-height:1.4;
    color:#3b3148;
    transition:opacity 0.25s ease, max-height 0.3s ease;
    max-height:80px;
    overflow:hidden;
}
.px-guest-banner.dismissed {
    opacity:0;
    max-height:0;
    padding-top:0;
    padding-bottom:0;
    margin:0;
    border:none;
}
.px-guest-banner-icon {
    flex:0 0 auto;
    width:22px;
    height:22px;
    border-radius:50%;
    background:rgba(123, 56, 194, 0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--px-purple, #7B38C2);
}
.px-guest-banner-text {
    flex:1 1 auto;
}
.px-guest-banner-text a {
    color:var(--px-purple, #7B38C2);
    font-weight:700;
    text-decoration:none;
    margin-left:4px;
}
.px-guest-banner-text a:hover {
    text-decoration:underline;
}
.px-guest-banner-dismiss {
    flex:0 0 auto;
    background:transparent;
    border:none;
    color:#888;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    padding:2px 6px;
    border-radius:4px;
    transition:background 0.15s ease, color 0.15s ease;
}
.px-guest-banner-dismiss:hover {
    background:rgba(123, 56, 194, 0.1);
    color:var(--px-purple, #7B38C2);
}

/* ---- Watermarks ----
   Wrapper makes the chart container the positioning context. The watermark
   itself is a single rotated text overlay, low opacity, pointer-events:none
   so the chart stays fully interactive. Visible in screenshots — the whole
   point. */
.px-watermark-wrap {
    position:relative;
}
.px-watermark {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) rotate(-22deg);
    font-size:30px;
    font-weight:900;
    color:rgba(123, 56, 194, 0.15);
    letter-spacing:1.5px;
    white-space:nowrap;
    pointer-events:none;
    user-select:none;
    z-index:3;
    text-transform:uppercase;
    /* Subtle outline so the mark stays legible against any chart fill */
    text-shadow:
        0 0 1px rgba(255, 255, 255, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.04);
}
/* Maps use a slightly more aggressive watermark since map tiles are dense
   and a faint mark would be invisible. Constrained to z-index 500 so popups
   (z-index 700 in Leaflet) still render on top. */
.px-watermark-map {
    z-index:500;
    color:rgba(123, 56, 194, 0.22);
    font-size:26px;
}

/* ---- Locked-state action buttons (per-viz PNG/Save replacements) ---- */
.cb-viz-action-locked {
    background:rgba(123, 56, 194, 0.06) !important;
    border-color:rgba(123, 56, 194, 0.4) !important;
    color:var(--px-purple, #7B38C2) !important;
}
.cb-viz-action-locked:hover {
    background:var(--px-purple, #7B38C2) !important;
    border-color:var(--px-purple, #7B38C2) !important;
    color:#fff !important;
}

/* ---- Locked Export All Hospitals button (inside table wrapper) ---- */
.cb-export-btn-locked {
    background:rgba(123, 56, 194, 0.06) !important;
    border-color:rgba(123, 56, 194, 0.35) !important;
    color:var(--px-purple, #7B38C2) !important;
}
.cb-export-btn-locked:hover {
    background:var(--px-purple, #7B38C2) !important;
    border-color:var(--px-purple, #7B38C2) !important;
    color:#fff !important;
}
.cb-export-btn-locked svg { stroke:currentColor !important; }

/* ---- Locked header export buttons (PDF Briefing / Word / PPT) ----
   Small lock badge in the top-right corner; underlying button keeps its
   colour scheme so the chrome doesn't jump between guest and authed
   states. */
.cb-report-btn-locked {
    position:relative;
}
.cb-report-btn-locked::after {
    content:"";
    position:absolute;
    top:-3px;
    right:-3px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B38C2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") center/9px no-repeat;
    border:1.5px solid var(--px-purple, #7B38C2);
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.1);
    pointer-events:none;
}

/* ---- Modal backdrop + card (shared by signup + login modals) ---- */
.px-modal-backdrop {
    position:fixed;
    inset:0;
    background:rgba(20, 12, 38, 0.55);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:10000;
    padding:20px;
    animation:cbFadeIn 0.18s ease;
}
.px-modal-backdrop.open {
    display:flex;
}
.px-modal {
    background:#fff;
    border-radius:12px;
    padding:32px 28px 24px;
    width:100%;
    max-width:440px;
    box-shadow:0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(123, 56, 194, 0.08);
    position:relative;
    animation:px-modal-pop 0.2s ease;
}
@keyframes px-modal-pop {
    from { transform:translateY(8px) scale(0.98); opacity:0; }
    to   { transform:none; opacity:1; }
}
.px-modal-close {
    position:absolute;
    top:10px;
    right:12px;
    background:transparent;
    border:none;
    font-size:24px;
    line-height:1;
    color:#888;
    cursor:pointer;
    padding:4px 9px;
    border-radius:6px;
    transition:background 0.15s ease, color 0.15s ease;
}
.px-modal-close:hover {
    background:rgba(123, 56, 194, 0.1);
    color:var(--px-purple, #7B38C2);
}
.px-modal-icon {
    width:56px;
    height:56px;
    border-radius:50%;
    background:rgba(123, 56, 194, 0.12);
    color:var(--px-purple, #7B38C2);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 16px;
}
.px-modal-title {
    font-size:18px;
    font-weight:800;
    color:#2b2f42;
    margin:0 0 6px;
    text-align:center;
}
.px-modal-feature {
    font-size:12px;
    font-weight:700;
    color:var(--px-purple, #7B38C2);
    text-align:center;
    margin:0 0 12px;
    padding:6px 12px;
    background:rgba(123, 56, 194, 0.08);
    border-radius:6px;
}
.px-modal-body {
    font-size:13px;
    line-height:1.55;
    color:#4a4a55;
    margin:0 0 20px;
    text-align:center;
}
.px-modal-actions {
    display:flex;
    flex-direction:column;
    gap:8px;
}
.px-btn-primary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    background:var(--px-purple, #7B38C2);
    color:#fff;
    border:none;
    border-radius:8px;
    font-size:13px;
    font-weight:700;
    font-family:inherit;
    text-decoration:none;
    cursor:pointer;
    transition:background 0.15s ease, transform 0.1s ease;
}
.px-btn-primary:hover {
    background:#5e1a9e;
}
.px-btn-primary:active {
    transform:scale(0.98);
}
.px-btn-primary:disabled {
    opacity:0.6;
    cursor:wait;
}
.px-btn-secondary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 18px;
    background:transparent;
    color:var(--px-purple, #7B38C2);
    border:1.5px solid rgba(123, 56, 194, 0.3);
    border-radius:8px;
    font-size:13px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    transition:background 0.15s ease, border-color 0.15s ease;
}
.px-btn-secondary:hover {
    background:rgba(123, 56, 194, 0.08);
    border-color:var(--px-purple, #7B38C2);
}

/* ---- Login modal specifics ---- */
.px-login-modal {
    max-width:380px;
}
.px-login-form {
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:12px;
}
.px-field {
    display:flex;
    flex-direction:column;
    gap:5px;
}
.px-field span {
    font-size:11px;
    font-weight:700;
    color:#5a5a66;
    letter-spacing:0.4px;
    text-transform:uppercase;
}
.px-field input {
    padding:9px 12px;
    border:1.5px solid rgba(123, 56, 194, 0.25);
    border-radius:7px;
    font-size:14px;
    font-family:inherit;
    background:#fafbfe;
    color:#2b2f42;
    transition:border-color 0.15s ease, background 0.15s ease;
}
.px-field input:focus {
    outline:none;
    border-color:var(--px-purple, #7B38C2);
    background:#fff;
    box-shadow:0 0 0 3px rgba(123, 56, 194, 0.12);
}
.px-login-error {
    min-height:18px;
    color:#c62828;
    font-size:12px;
    font-weight:600;
    line-height:1.3;
}
.px-login-error:empty {
    min-height:0;
}
.px-login-foot {
    margin:10px 0 0;
    font-size:12px;
    color:#666;
    text-align:center;
}
.px-login-foot a {
    color:var(--px-purple, #7B38C2);
    font-weight:700;
    text-decoration:none;
}
.px-login-foot a:hover {
    text-decoration:underline;
}

/* ---- Authenticated user pill (header) — name + dropdown with logout ---- */
.px-user-pill-wrap {
    position:relative;
    display:inline-flex;
}
.px-user-pill {
    cursor:pointer;
    font-weight:700;
    font-size:12px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    transition:background 0.15s ease, border-color 0.15s ease;
}
.px-user-pill:hover {
    background:rgba(123, 56, 194, 0.22);
    border-color:rgba(123, 56, 194, 0.45);
}
.px-user-pill-name {
    max-width:140px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.px-user-pill-chevron {
    flex-shrink:0;
    color:var(--px-purple, #7B38C2);
    transition:transform 0.18s ease;
}
.px-user-pill-wrap.open .px-user-pill-chevron {
    transform:rotate(180deg);
}
.px-user-pill-wrap.open .px-user-pill {
    background:rgba(123, 56, 194, 0.22);
    border-color:rgba(123, 56, 194, 0.45);
}

.px-user-menu {
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    min-width:220px;
    max-width:280px;
    background:#fff;
    border:1px solid rgba(123, 56, 194, 0.2);
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0, 0, 0, 0.12);
    padding:4px;
    z-index:10000;
    display:none;
    animation:px-user-menu-pop 0.15s ease;
}
.px-user-pill-wrap.open .px-user-menu {
    display:block;
}
@keyframes px-user-menu-pop {
    from { opacity:0; transform:translateY(-4px); }
    to   { opacity:1; transform:translateY(0); }
}

.px-user-menu-header {
    padding:10px 12px 8px;
    border-bottom:1px solid rgba(123, 56, 194, 0.12);
    margin-bottom:4px;
}
.px-user-menu-name {
    font-size:13px;
    font-weight:800;
    color:#2b2f42;
    line-height:1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.px-user-menu-meta {
    font-size:11px;
    color:#6a6a78;
    font-weight:500;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.px-user-menu-id {
    color:#9a9aa6;
    font-variant-numeric:tabular-nums;
}
.px-user-menu-item {
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    padding:9px 12px;
    background:transparent;
    border:none;
    border-radius:6px;
    font-size:13px;
    font-weight:600;
    font-family:inherit;
    color:#2b2f42;
    cursor:pointer;
    text-align:left;
    transition:background 0.12s ease, color 0.12s ease;
}
.px-user-menu-item:hover {
    background:rgba(123, 56, 194, 0.08);
    color:var(--px-purple, #7B38C2);
}
.px-user-menu-item:disabled {
    opacity:0.6;
    cursor:wait;
}
.px-user-menu-item svg {
    flex-shrink:0;
    color:var(--px-purple, #7B38C2);
}

/* ---- Pictorial list items ----
   When a <li> starts with an emoji (📈, 🗾, ✅, etc.) the emoji IS the
   bullet — hide the default • marker so it doesn't double up. The parent
   list also gets its left padding stripped IFF every child is pictorial
   (mixed lists keep their default layout so non-emoji items still get
   their bullets in the right column). Logic in markPictorialListItems
   in app.js. */
.cb-body li.cb-li-pictorial {
    list-style:none;
}
.cb-body ul.cb-list-pictorial,
.cb-body ol.cb-list-pictorial {
    list-style:none;
    margin-left:0;
    padding-left:0;
}

/* ---- Clickable follow-up suggestions ----
   Each <li> in a "Suggested Follow-Up Analyses" list becomes a clickable
   item that re-asks the question. Visual affordance is quiet: a subtle
   hover background tint + a right-arrow that fades in on hover. Click
   sends the question text as the next message; keyboard Enter/Space
   works the same way (role="button" + tabindex applied in JS). */
.cb-followup-list .cb-followup-item {
    cursor:pointer;
    border-radius:6px;
    padding:6px 28px 6px 8px;
    margin-left:-8px;             /* pull back so padding doesn't shift list alignment */
    position:relative;
    transition:background-color 0.15s ease;
}
.cb-followup-list .cb-followup-item:hover,
.cb-followup-list .cb-followup-item:focus-visible {
    background:rgba(123, 56, 194, 0.08);
    outline:none;
}
.cb-followup-list .cb-followup-item::after {
    content:"→";
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    color:var(--px-purple, #7B38C2);
    font-weight:800;
    font-size:14px;
    opacity:0;
    transition:opacity 0.15s ease, transform 0.15s ease;
}
.cb-followup-list .cb-followup-item:hover::after,
.cb-followup-list .cb-followup-item:focus-visible::after {
    opacity:1;
    transform:translateY(-50%) translateX(2px);
}