/* ============================================================
   Prescription Analyzer — premium healthcare web app
   ============================================================ */

:root {
    --bg: #eef3f4;
    --surface: #ffffff;
    --surface-soft: #f5f9f9;
    --surface-soft-2: #eef4f4;
    --border: #e6edf0;
    --border-strong: #d6e0e4;
    --text: #16232e;
    --muted: #5b6875;
    --muted-soft: #8a97a3;
    --primary: #0f766e;
    --primary-2: #0d9488;
    --primary-dark: #0b5e57;
    --primary-soft: #e7f5f3;
    --primary-border: #bfe3dd;
    --success: #157347;
    --success-bg: #e9f7ef;
    --success-border: #bfe6cf;
    --warning: #9a6700;
    --warning-bg: #fff6e5;
    --warning-border: #f3ddab;
    --danger: #b42318;
    --danger-bg: #fdecec;
    --danger-border: #f3c0bd;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow: 0 1px 3px rgba(16, 24, 40, 0.05), 0 12px 30px rgba(15, 118, 110, 0.06);
    --shadow-lg: 0 6px 16px rgba(16, 24, 40, 0.08), 0 20px 44px rgba(15, 118, 110, 0.10);
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--text);
    background:
        radial-gradient(1200px 500px at 100% -10%, rgba(13, 148, 136, 0.06), transparent 60%),
        linear-gradient(180deg, #f7fbfb 0%, var(--bg) 100%);
    min-height: 100vh;
}

/* ---------- App shell: sidebar + topbar ---------- */

.layout { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 250px;
    background: linear-gradient(180deg, #ffffff 0%, #f4faf9 100%);
    border-right: 1px solid var(--border);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    z-index: 40;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 6px;
    color: inherit;
    text-decoration: none;
}

.brand__mark {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--primary-2), var(--primary-dark));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700;
    box-shadow: 0 6px 16px rgba(13, 148, 136, 0.28);
}

.brand__name {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--text);
    letter-spacing: -0.01em;
}

.sidebar__nav { display: flex; flex-direction: column; gap: 4px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-item__icon { font-size: 15px; width: 18px; text-align: center; }
.nav-item:hover { background: var(--surface-soft-2); color: var(--text); }
.nav-item.is-active { background: var(--primary-soft); color: var(--primary-dark); }

.sidebar__label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-soft);
    margin: 0 6px 8px;
}

.feature-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 9px;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}

.feature-list .tick {
    width: 15px; height: 15px;
    color: var(--primary);
    flex: 0 0 auto;
    margin-top: 1px;
}

.sidebar__foot {
    margin-top: auto;
    font-size: 11.5px;
    color: var(--muted-soft);
    line-height: 1.5;
    padding: 12px 6px 2px;
    border-top: 1px solid var(--border);
}

.main {
    margin-left: 250px;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    padding: 13px 28px;
}

.topbar__menu {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text);
    padding: 0 4px;
}

.topbar__title { flex: 1; min-width: 0; }
.topbar__title h1 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.topbar__title p { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }

.btn--ghost {
    height: 40px;
    padding: 0 15px;
    background: var(--surface);
    color: var(--primary-dark);
    border: 1px solid var(--primary-border);
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.15s ease;
    flex: 0 0 auto;
}

.btn--ghost:hover { background: var(--primary-soft); transform: translateY(-1px); }

.content {
    padding: 26px 28px 64px;
    max-width: 1000px;
    width: 100%;
    /* Centred: on a wide desktop the page used to sit against the sidebar
       with the right half of the window empty. */
    margin: 0 auto;
}

/* The consultation page shows the transcript and two summary columns, which
   need more room than the prescription page: it may use most of a desktop. */
body[data-page="speech"] .content { max-width: 1440px; }

.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.4);
    z-index: 35;
}
.overlay.is-show { display: block; }

/* ---------- Icons ---------- */

svg { display: inline-block; }
.ic { width: 18px; height: 18px; flex: 0 0 auto; }
.btn svg { width: 17px; height: 17px; }
.mi { width: 15px; height: 15px; vertical-align: -2.5px; margin-right: 6px; }

/* Trust badge in the top bar */
.topbar__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    padding: 6px 11px;
    border-radius: 999px;
    flex: 0 0 auto;
}
.topbar__badge .ic { width: 15px; height: 15px; }
.topbar__badge[hidden] { display: none; }

/* Active nav gets a subtle inner ring */
.nav-item.is-active { box-shadow: inset 0 0 0 1px var(--primary-border); }

h1, h2 { margin: 0; }

/* ---------- Header ---------- */

.app-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #eef8f6 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    box-shadow: var(--shadow);
    margin-bottom: 14px;
    overflow: hidden;
}

.app-header::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(13, 148, 136, 0.10), transparent 70%);
}

.app-header__mark {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(140deg, var(--primary-2) 0%, var(--primary-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(13, 148, 136, 0.30);
}

.app-header__text h1 {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 5px;
}

.app-header__text p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 720px;
}

.app-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.chip {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    padding: 6px 12px;
    border-radius: 999px;
}

/* ---------- Cards / sections ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow);
    margin-bottom: 22px;
}

.card-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted-soft);
    margin-bottom: 12px;
}

.upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.section-heading {
    position: relative;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 30px 0 14px;
    padding-left: 14px;
    line-height: 1.3;
}

.section-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--primary-2), var(--primary-dark));
}

/* ---------- Dropzone + preview ---------- */

.dropzone {
    display: block;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
    padding: 26px 18px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    margin-bottom: 14px;
}

.dropzone:hover { border-color: var(--primary-border); background: var(--surface-soft-2); }

/* A file is being held over the zone (see enableDrop in app.js) */
.dropzone--over {
    border-color: var(--primary);
    border-style: solid;
    background: var(--primary-soft);
    box-shadow: 0 0 0 4px var(--primary-border);
}
.dropzone--over .dropzone__text { color: var(--primary-dark); }

/* "or drop a file here" means nothing on a touch screen */
@media (hover: none) and (pointer: coarse) {
    .dropzone__drop-hint { display: none; }
}

.dropzone__icon { margin-bottom: 8px; color: var(--primary); display: flex; justify-content: center; }
.dropzone__icon svg { width: 40px; height: 40px; }
.dropzone__text { font-weight: 700; color: var(--text); font-size: 14px; word-break: break-word; }
.dropzone__hint { font-size: 12px; color: var(--muted-soft); margin-top: 3px; }

.preview {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.preview img { max-width: 100%; max-height: 360px; display: block; cursor: zoom-in; }
.preview__empty { color: var(--muted-soft); font-size: 13px; padding: 20px; }

/* Full-size view of the prescription photo (click the preview to open) */
.lightbox {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(15, 23, 42, 0.88);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; border-radius: 6px; box-shadow: var(--shadow-lg);
    cursor: default;
}
.lightbox__close {
    position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
    border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.92);
    color: #0f172a; font-size: 28px; line-height: 1; cursor: pointer;
}
.lightbox__close:hover { background: #fff; }

/* ---------- Buttons ---------- */

.btn {
    height: 48px;
    padding: 0 20px;
    border-radius: var(--radius-sm);
    border: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn--block { width: 100%; }

.btn--primary {
    background: linear-gradient(135deg, var(--primary-2) 0%, var(--primary-dark) 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(13, 148, 136, 0.25);
}

.btn--primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(13, 148, 136, 0.32);
}

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- Status / loading ---------- */

.status {
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.status--loading { background: var(--primary-soft); color: var(--primary-dark); border: 1px solid var(--primary-border); }
.status--ok { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.status--error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
.status--warn { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); font-weight: 500; }

.spinner {
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(15, 118, 110, 0.25);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex: 0 0 auto;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Patient box ---------- */

.patient-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    box-shadow: var(--shadow);
    margin-bottom: 8px;
}

.pt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 14px;
}

.pt-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 10px 13px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: 10px;
}

.pt-cell--ok { border-left-color: var(--success); }
.pt-cell--warn { border-left-color: var(--warning); }
.pt-cell--muted { border-left-color: var(--border-strong); }

.pt-k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-soft); }
.pt-v { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; word-break: break-word; }
.pt-status { font-size: 10.5px; font-weight: 700; }
.pt-status--ok { color: var(--success); }
.pt-status--warn { color: var(--warning); }
.pt-status--muted { color: var(--muted-soft); }
.pt-missing {
    margin-top: 12px;
    font-size: 12px;
    color: var(--muted-soft, #6b7280);
    line-height: 1.5;
}
.pt-hint { display: block; font-size: 10.5px; color: var(--muted-soft, #6b7280); font-style: italic; margin-top: 2px; word-break: break-word; }

/* ---------- Medicine cards ---------- */

.med-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px 18px 22px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.med-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--border-strong);
}

.med-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.med-card--clear::before { background: linear-gradient(180deg, #1fa363, var(--success)); }
.med-card--review::before { background: linear-gradient(180deg, #c98a1e, var(--warning)); }
.med-card--unclear::before { background: linear-gradient(180deg, #d1493f, var(--danger)); }

.med-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.med-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted-soft); margin-bottom: 2px; }
.med-name { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); line-height: 1.25; }
.med-from { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.med-from strong { color: var(--text); }

.med-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 2px; }
.med-cell { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; }
.med-cell .k { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-soft); margin-bottom: 1px; }
.med-cell .v { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); word-break: break-word; }

.med-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 8px; }
.med-note--evidence { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; }
.med-note strong, .med-note--evidence strong { color: var(--text); }
/* Flags the pipeline raised about a medicine (typo repair, implausible dose,
   form mismatch, reading conflict) — these must read as warnings, not notes. */
.med-note--warn {
    display: flex; gap: 7px; align-items: flex-start;
    background: var(--warn-soft, #fff8ec); border: 1px solid var(--warn-border, #f3d9a4);
    color: var(--warn-text, #8a5a00); border-radius: 9px; padding: 9px 12px;
}
.med-note--warn svg { flex: none; margin-top: 2px; }
.med-note--how {
    background: var(--surface-soft); border: 1px solid var(--border);
    border-radius: 9px; padding: 9px 12px; color: var(--text);
}
.med-note--effects { color: var(--muted); }

.med-dupe { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning); border-radius: 9px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; margin-bottom: 10px; }
.med-triage { color: var(--text-muted, #6b7280); font-size: 12.5px; font-weight: 600; margin: 0 0 10px; }

/* One notice above the list when every medicine needs checking: the reason,
   where to start, and how many sit in each tier. Replaces the count line. */
.med-notice { display: flex; gap: 10px; align-items: flex-start; background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning); border-radius: var(--radius-sm, 10px); padding: 11px 14px; font-size: 13.5px; font-weight: 600; line-height: 1.5; margin: 0 0 12px; }
.med-notice .mi { flex: 0 0 auto; margin-top: 2px; }
.med-notice__breakdown { margin-top: 4px; font-size: 12.5px; font-weight: 600; opacity: 0.85; }
/* The refused page: the only thing shown when the handwriting could not be read. */
.refusal { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--text); border-radius: var(--radius-sm, 10px); padding: 16px 18px; margin: 12px 0; font-size: 14px; line-height: 1.55; }
.refusal__title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: var(--danger); margin-bottom: 8px; }
.refusal__title .mi { flex: 0 0 auto; }
.refusal p { margin: 6px 0; }
.refusal__seen { color: var(--danger); font-weight: 600; }
.refusal__what { font-weight: 700; margin-top: 10px; }
.refusal ul { margin: 4px 0 0; padding-left: 20px; }
.refusal li { margin: 3px 0; }
.refusal__footer { color: var(--muted); font-size: 13px; margin-top: 10px; }
/* The message for medicines nothing was read from. On an unclear page it is the main result. */
.med-notice--unclear { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); font-size: 14.5px; padding: 14px 16px; }
.med-notice__details { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; font-weight: 500; }
.med-notice__details li { margin: 2px 0; }
.pdf-blocked { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm, 10px); background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning); font-size: 13px; line-height: 1.5; }
.pdf-blocked .mi { flex: 0 0 auto; margin-top: 2px; }

/* ---------- Badges ---------- */

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid transparent; flex: 0 0 auto; }
.badge-success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.badge-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.badge-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
/* "Likely correct": the catalogue backed the reading; confirm, don't worry. */
.badge-soft { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary-border); }

/* ---------- DB match + AI suggestion ---------- */

.db-match { margin: 10px 0; padding: 10px 13px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; border: 1px solid transparent; }
.db-match-ok { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.db-match-warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.db-match-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
/* The AI recognised the name; no database confirmed it. Blue: a third source. */
.db-match-info   { background: #e8f1fb; border-color: #b6d4f5; color: #1d4f91; }
.db-about        { margin-top: 6px; font-weight: 400; color: #1d4f91; opacity: 0.92; line-height: 1.45; }
.db-sources      { margin-top: 6px; font-size: 12.5px; font-weight: 400; color: #1d4f91; opacity: 0.85; line-height: 1.45; }
.db-sources a    { color: inherit; text-decoration: underline; }
.db-score { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: rgba(255,255,255,0.55); font-size: 11px; font-weight: 700; }
.db-suggestion { font-size: 12.5px; color: var(--muted); margin: 2px 0 2px 6px; line-height: 1.5; }

/* Partial-name candidates: leads for a name that could only partly be read. */
.db-candidates { display: flex; gap: 8px; margin: 8px 0; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--warning-bg); border: 1px solid var(--warning-border); font-size: 13px; color: var(--warning); line-height: 1.5; }
.db-candidates__body { flex: 1 1 160px; min-width: 0; }
.db-candidates__list { list-style: none; margin: 6px 0 0; padding: 0; }
.db-candidate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 4px 0; border-top: 1px solid var(--warning-border); }
.db-candidate__text { flex: 1 1 160px; min-width: 0; overflow-wrap: break-word; color: var(--text); }
.db-candidate__generic { color: var(--muted); font-size: 12.5px; margin-left: 4px; }
.db-candidate__tag { display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 999px; background: var(--success-bg); color: var(--success); font-size: 11px; font-weight: 700; }

.ai-suggestion { margin: 8px 0; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--warning-bg); border: 1px solid var(--warning-border); font-size: 13px; color: var(--warning); line-height: 1.5; }
/* The suggestion and its Confirm button share a row and wrap on a phone. */
.ai-suggestion, .ai-confirmed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ai-suggestion > span, .ai-confirmed > span { flex: 1 1 160px; min-width: 0; overflow-wrap: break-word; }
/* A real button: tall enough to tap on a phone. */
.ai-pill {
    flex: none;
    min-height: 32px;
    padding: 0 16px;
    border: 1px solid #d9b46a;
    border-radius: 999px;
    background: #f6e2b8;
    color: #6b4200;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.ai-pill:hover { background: #f0d190; transform: translateY(-1px); }
.ai-pill:focus-visible, .ai-undo:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-border); }
/* What replaces the suggestion once the user has confirmed it. */
.ai-confirmed { margin: 8px 0; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--success-bg); border: 1px solid var(--success-border); font-size: 13px; color: var(--success); line-height: 1.5; }
.ai-confirmed svg { flex: none; }
.ai-undo { flex: none; min-height: 32px; padding: 0 10px; border: none; background: none; color: var(--success); font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---------- Summary + reminder ---------- */

.summary-box {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbfa 100%);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-md);
    padding: 18px 20px 18px 22px;
    box-shadow: var(--shadow);
    font-size: 15px;
    line-height: 1.75;
    color: var(--text);
    margin-bottom: 12px;
    overflow: hidden;
}

.summary-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--primary-2), var(--primary-dark)); }
.summary-box strong { color: var(--primary-dark); font-weight: 700; }

.reminder-box { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning); border-radius: var(--radius-md); padding: 13px 16px; font-size: 13px; line-height: 1.6; margin-bottom: 22px; }
.reminder-box strong { color: var(--warning); }

.empty { color: var(--muted-soft); font-size: 14px; padding: 12px; }

.foot { text-align: center; color: var(--muted-soft); font-size: 12px; margin-top: 20px; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--shadow-lg);
    }
    .sidebar.is-open { transform: translateX(0); }
    .main { margin-left: 0; }
    .topbar__menu { display: block; }
    .content { padding: 20px 18px 50px; }
}

@media (max-width: 760px) {
    .upload-grid { grid-template-columns: 1fr; }
    .med-grid { grid-template-columns: repeat(2, 1fr); }
    .med-name { font-size: 16px; }
    .topbar__title p { display: none; }
    .topbar__badge { display: none; }
    .btn--ghost { padding: 0 10px; }
    .btn--ghost span, .btn--ghost { font-size: 12px; }
    .mini-grid { grid-template-columns: repeat(2, 1fr); }
    /* .speech-cols is stacked for phones further down, AFTER its base rule:
       written here it was overridden by that later rule and never applied. */
}

/* ============================================================
   Speech page — form controls + clinical result rendering
   ============================================================ */

.field { margin-bottom: 14px; }
.field__label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-soft); margin-bottom: 6px; }
.field__hint { font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 6px; }

.select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.select:focus { outline: none; border-color: var(--primary-border); box-shadow: 0 0 0 3px var(--primary-soft); }
.select:disabled { opacity: 0.55; cursor: not-allowed; }

.preview--audio { min-height: 120px; }
.preview--audio audio { width: 100%; padding: 0 16px; }
.audio-meta { font-size: 12px; color: var(--muted); margin-top: 8px; text-align: center; }

/* clinical fact grid */
.mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.mini-box { background: var(--surface-soft); border: 1px solid var(--border); border-left: 3px solid var(--primary-border); border-radius: 10px; padding: 10px 12px; }
.mini-box .label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-soft); }
.mini-box .value { margin-top: 3px; color: var(--text); font-size: 14px; font-weight: 600; word-break: break-word; }

/* chips */
.field-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-soft); margin: 14px 0 6px; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.chip-tag { background: #e0f2fe; color: #075985; border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; }
.chip-tag.green { background: var(--success-bg); color: var(--success); }
.chip-tag.orange { background: var(--warning-bg); color: var(--warning); }
.chip-tag.red { background: var(--danger-bg); color: var(--danger); }
.chip-tag.purple { background: #f3e8ff; color: #6b21a8; }
.chip-muted { color: var(--muted-soft); font-size: 13px; }

/* minmax(0, 1fr), not 1fr: a column must be allowed to shrink below its
   longest word instead of pushing the page sideways. */
.speech-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }

/* SOAP + narrative boxes */
.note-box { background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; line-height: 1.7; color: var(--text); font-size: 14px; }
.note-box b { color: var(--primary-dark); }

.plan-box {
    background: linear-gradient(180deg, #ffffff 0%, #fff8f1 100%);
    border: 1px solid var(--warning-border);
    border-left: 4px solid var(--warning);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 16px 18px;
    color: var(--text);
    line-height: 1.75;
    font-size: 14px;
    white-space: pre-wrap;
}

/* dark transcript */
.transcript-box {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: var(--radius-md);
    padding: 16px 18px;
    font-family: Consolas, "SF Mono", monospace;
    white-space: pre-wrap;
    max-height: 360px;
    overflow-y: auto;
    line-height: 1.8;
    font-size: 13px;
}
.transcript-box .doctor { color: #67e8f9; font-weight: 700; }
.transcript-box .patient { color: #86efac; font-weight: 700; }
/* the turn a summary line pointed at (jumpToTranscript) */
.transcript-box .turn { border-radius: 4px; padding: 1px 4px; margin: 0 -4px; transition: background 0.3s ease; }
.transcript-box .turn.is-hit { background: rgba(250, 204, 21, 0.28); box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.6); }

/* summary lines that link to the transcript */
.cs-jump { cursor: pointer; border-bottom: 1px dotted var(--primary-border); }
.cs-jump:hover, .cs-jump:focus-visible { background: var(--primary-soft); border-bottom-color: var(--primary); outline: none; }
.cs-jump-hint { font-size: 12.5px; color: var(--muted); margin: -6px 0 12px; }

.plain-transcript {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    white-space: pre-wrap;
    max-height: 240px;
    overflow-y: auto;
    line-height: 1.7;
    font-size: 13.5px;
    color: var(--text);
}

/* ---------- Analysis progress indicator ---------- */

.progress-card {
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 18px;
    color: var(--primary-dark);
}

.progress-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    flex-wrap: wrap;
}

.progress-card__label { flex: 1 1 auto; min-width: 0; }

.progress-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}

.progress-card__time {
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--primary-border);
    border-radius: 999px;
    padding: 2px 8px;
}

.progress-card__cancel {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
    font-weight: 600;
}

/* "Usually takes about 20 s" under the bar; empty until a run has finished */
.progress-card__estimate {
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
}

.progress-card__estimate:empty { display: none; }

.progress-bar {
    height: 8px;
    margin-top: 12px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.15);
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--primary-2));
    transition: width 0.5s ease;
    position: relative;
}

/* Moving sheen so the bar visibly keeps going during a long AI call even
   when the width has not changed for several seconds. */
.progress-bar__fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    background-size: 200% 100%;
    animation: progress-sheen 1.6s linear infinite;
}

@keyframes progress-sheen {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.progress-done {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
}

.progress-done:empty { display: none; }

.progress-done li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.progress-done li::before {
    content: "\2713";
    color: var(--success);
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar__fill { transition: none; }
    .progress-bar__fill::after { animation: none; }
}


/* ============================================================
   Speech page — consultation recorder
   ============================================================ */

:root {
    --wave-bar: var(--primary-2);
    --wave-idle: #cbd5e1;
    --rec: #dc2626;
    --rec-soft: #fef2f2;
    --rec-border: #fecaca;
}

.btn--tall { height: 60px; font-size: 15.5px; }
.btn--tall svg { width: 22px; height: 22px; }

.btn--outline {
    background: var(--surface);
    color: var(--primary-dark);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-sm);
}
.btn--outline:hover:not(:disabled) { background: var(--primary-soft); border-color: var(--primary-border); transform: translateY(-1px); }

.btn--danger {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.22);
}
.btn--danger:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(220, 38, 38, 0.3); }

.btn--danger-text { color: var(--danger); }
.btn--danger-text:hover:not(:disabled) { background: var(--danger-bg); border-color: var(--danger-border); }

.preview[hidden] { display: none; }

.rec-step { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.rec-step[hidden] { display: none; }

/* "Up to 90 minutes" under the record button */
.rec-limit { font-size: 12px; color: var(--muted-soft); text-align: center; margin: 8px 0 2px; }

.rec-or {
    display: flex; align-items: center; gap: 12px;
    color: var(--muted-soft); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
.rec-or::before, .rec-or::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }

/* microphone status line */
.mic-status {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--muted); font-weight: 600;
    padding: 8px 12px; border-radius: var(--radius-sm);
    background: var(--surface-soft); border: 1px solid var(--border);
}
.mic-status__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-soft); flex: none; }
.mic-status[data-state="requesting"] .mic-status__dot { background: var(--warning); animation: rec-blink 1s ease-in-out infinite; }
.mic-status[data-state="ready"] .mic-status__dot,
.mic-status[data-state="granted"] .mic-status__dot { background: var(--success); }
.mic-status[data-state="live"] .mic-status__dot { background: var(--rec); box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18); animation: rec-blink 1.2s ease-in-out infinite; }
.mic-status[data-state="live"] { color: var(--rec); background: var(--rec-soft); border-color: var(--rec-border); }
.mic-status[data-state="muted"] .mic-status__dot { background: var(--warning); }
.mic-status[data-state="muted"] { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.mic-status[data-state="blocked"] .mic-status__dot,
.mic-status[data-state="missing"] .mic-status__dot,
.mic-status[data-state="busy"] .mic-status__dot,
.mic-status[data-state="error"] .mic-status__dot { background: var(--danger); }
.mic-status[data-state="blocked"], .mic-status[data-state="missing"], .mic-status[data-state="busy"], .mic-status[data-state="error"] {
    color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border);
}

/* consent */
.consent {
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}
.consent__title { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--primary-dark); font-size: 14.5px; margin-bottom: 6px; }
.consent__text { font-size: 13px; color: var(--muted); margin: 0 0 10px; line-height: 1.5; }
.consent__note { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.55; border-top: 1px dashed var(--primary-border); padding-top: 10px; }
.consent__note em { font-style: normal; font-weight: 700; color: var(--primary-dark); }

.check {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font-size: 13px; line-height: 1.5; color: var(--text);
}
.check:hover { border-color: var(--primary-border); }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary); flex: none; cursor: pointer; }
.check strong { color: var(--primary-dark); }

/* live controls */
.rec-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.rec-actions .btn { height: 52px; white-space: nowrap; padding: 0 14px; }
.rec-hint { font-size: 12.5px; color: var(--muted); line-height: 1.55; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }

/* review */
.rec-review {
    background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success);
    border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; font-weight: 600; line-height: 1.5;
}
.rec-review--warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }

/* monitor (right column while recording) */
.monitor {
    background: linear-gradient(180deg, #ffffff 0%, var(--surface-soft) 100%);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
}
.monitor[hidden] { display: none; }
.monitor__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.rec-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--rec-soft); color: var(--rec); border: 1px solid var(--rec-border);
}
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rec); animation: rec-blink 1.2s ease-in-out infinite; }
.rec-pill[data-state="paused"] { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.rec-pill[data-state="paused"] .rec-dot { background: var(--warning); animation: none; }
.rec-pill[data-state="stopping"] { background: var(--surface-soft-2); color: var(--muted); border-color: var(--border-strong); }
.rec-pill[data-state="stopping"] .rec-dot { background: var(--muted-soft); animation: none; }

.rec-timer {
    font-size: 40px; font-weight: 800; letter-spacing: 0.02em; color: var(--text);
    font-variant-numeric: tabular-nums; line-height: 1;
}
.rec-pill[data-state="paused"] ~ .rec-timer, .monitor.is-paused .rec-timer { color: var(--muted); }

.wave {
    display: block; width: 100%; height: 96px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.level { height: 6px; border-radius: 999px; background: var(--surface-soft-2); overflow: hidden; border: 1px solid var(--border); }
.level__bar { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--primary-2), #22c55e 60%, #f59e0b 85%, var(--rec)); transition: width 80ms linear; }

@keyframes rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* modal (stop / discard confirmation) */
.modal {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal[hidden] { display: none; }
.modal__box {
    background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    width: 100%; max-width: 420px; padding: 22px 22px 18px;
}
.modal__title { font-size: 17px; font-weight: 800; color: var(--text); margin: 0 0 8px; }
.modal__body { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 18px; white-space: pre-line; }
.modal__actions { display: flex; gap: 10px; justify-content: flex-end; }
.modal__actions .btn { height: 44px; padding: 0 16px; }

/* image source sheet (Photo Library / Take Photo / Choose File) */
.sheet { max-width: 380px; }
.sheet__options { display: grid; gap: 8px; margin-bottom: 12px; }
.sheet__option {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-soft); color: var(--text);
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.sheet__option:hover, .sheet__option:focus-visible { background: var(--primary-soft); border-color: var(--primary-border); outline: none; }
.sheet__option svg { width: 22px; height: 22px; color: var(--primary); flex: none; }
.sheet__option small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }

/* in-page camera (desktops without a native camera picker) */
.camera { max-width: 640px; }
.camera__view {
    background: #0f172a; border-radius: var(--radius-sm); overflow: hidden;
    aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
}
.camera__view video { width: 100%; height: 100%; object-fit: contain; display: block; }
.camera__hint { font-size: 13px; color: var(--muted); margin: 10px 0 14px; min-height: 18px; }

/* status boxes that carry an action button */
.status--actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.status--actions .status__text { flex: 1 1 260px; }
.status .btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }

@media (max-width: 760px) {
    /* on phones the live monitor (timer + waveform) sits above the controls */
    .rec-grid .rec-monitor { order: -1; }
    .rec-actions { grid-template-columns: 1fr 1.6fr; }
    .rec-timer { font-size: 34px; }
    .modal__actions { flex-direction: column-reverse; }
    .modal__actions .btn { width: 100%; }
    /* the source sheet slides up from the bottom on phones, like a native picker */
    .modal--sheet { align-items: flex-end; padding: 0; }
    .modal--sheet .modal__box {
        max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .rec-dot, .mic-status__dot { animation: none !important; }
}

/* ============================================================
   Consultation summary card (speech results)
   ============================================================ */

#speechResults > .status { max-width: 1200px; margin: 0 auto 12px; }
#speechResults .status .mi { flex: none; }

.cs-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 20px 22px 22px;
    max-width: 1200px;
    margin: 0 auto 22px;
}

.cs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cs-head__title { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.cs-logo { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--primary-2), var(--primary-dark)); }
.cs-logo svg { width: 20px; height: 20px; }
.cs-actions { display: flex; gap: 8px; }
.cs-btn { height: 40px; padding: 0 14px; font-size: 13.5px; border-color: var(--primary-border); }

.cs-tabs { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 2px; }
.cs-tab {
    flex: 1 0 auto;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--surface-soft-2);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.cs-tab:hover { background: var(--primary-soft); }
.cs-tab.is-active { background: var(--primary); color: #fff; box-shadow: 0 6px 14px rgba(15, 118, 110, 0.22); }
.cs-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-border); }

.cs-meta { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; margin-bottom: 10px; }
.cs-meta__box { background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.cs-doctor { display: flex; align-items: center; gap: 14px; }
.cs-avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--primary-soft); color: var(--primary-dark); border: 1px solid var(--primary-border); }
.cs-avatar svg { width: 26px; height: 26px; }
.cs-doctor__name { font-size: 16px; font-weight: 800; color: var(--text); }
.cs-doctor__sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cs-facts { display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.cs-fact { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--text); }
.cs-fact svg { flex: none; width: 16px; height: 16px; color: var(--muted); }

.cs-row { display: flex; gap: 16px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 10px; }
.cs-row__icon { flex: none; width: 30px; color: #2563eb; padding-top: 2px; }
.cs-row__icon svg { width: 26px; height: 26px; }
.cs-row__main { min-width: 0; flex: 1; }
.cs-row__title { font-size: 14.5px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
/* overflow-wrap, not word-break: a word is split only when it cannot fit on a
   line of its own (a long URL), never just because the column is narrow. */
.cs-row__body { font-size: 14.5px; line-height: 1.65; color: var(--text); overflow-wrap: break-word; }
.cs-list { margin: 2px 0 0; padding-left: 20px; }
.cs-list li { margin: 3px 0; }
.cs-list--key li { margin: 6px 0; font-weight: 500; }
.cs-none { color: var(--muted-soft); font-size: 13.5px; font-style: italic; }
.cs-detail { display: inline-block; margin-right: 18px; }
.cs-detail:not(:last-child)::after { content: "|"; color: var(--border-strong); margin-left: 18px; }
.cs-detail__k { color: var(--muted); }
/* Indic scripts need more line height than Latin to stay readable */
.cs-panel[lang="Malayalam"] .cs-row__body, .cs-panel[lang="Tamil"] .cs-row__body, .cs-panel[lang="Hindi"] .cs-row__body { line-height: 1.9; font-size: 15px; }

.cs-clinical { margin: 14px 0 4px; }
.cs-heard { text-align: left; margin: 0 0 10px; }
.cs-panel .transcript-box { max-height: 520px; }

.cs-note { display: flex; gap: 12px; align-items: flex-start; background: #eff6ff; border: 1px solid #dbeafe; color: #475569; border-radius: var(--radius-md); padding: 12px 16px; font-size: 12.5px; line-height: 1.6; margin-top: 6px; }
.cs-note svg { flex: none; width: 17px; height: 17px; color: #2563eb; margin-top: 1px; }

/* Structured summary columns (Doctor Consultation | After Visit Summary) */
.speech-cols .cs-row { background: var(--surface); padding: 12px 14px; gap: 12px; }
.speech-cols .cs-row__icon { width: 24px; }
.speech-cols .cs-row__icon svg { width: 21px; height: 21px; }
.speech-cols .cs-row__title { font-size: 13.5px; }
.speech-cols .cs-row__body { font-size: 14px; }
.speech-cols [lang="Malayalam"] .cs-row__body, .speech-cols [lang="Tamil"] .cs-row__body, .speech-cols [lang="Hindi"] .cs-row__body { line-height: 1.9; font-size: 14.5px; }
.cs-sub { margin-top: 6px; font-size: 13.5px; }
.cs-stack .cs-detail { display: block; margin: 2px 0; }
.cs-stack .cs-detail::after { content: none !important; }
/* "Key Points" / "Remember": the one row that must stand out */
.speech-cols .cs-row--key, .cs-row--key { background: var(--primary-soft); border-color: var(--primary-border); }
.cs-row--key .cs-row__icon { color: var(--primary); }
.cs-row--key .cs-row__title { color: var(--primary-dark); }

@media (max-width: 760px) {
    /* Phones: Doctor Consultation and After Visit Summary one under the other,
       each the full width. Side by side they were about 45px wide each and
       every word was broken across lines ("Paraceta / mol"). */
    .speech-cols { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .cs-card { padding: 16px 14px 18px; }
    .cs-meta { grid-template-columns: 1fr; }
    .cs-row { gap: 12px; padding: 12px 13px; }
    .cs-detail { display: block; margin: 0; }
    .cs-detail:not(:last-child)::after { content: none; }
}

/* Export buttons under the consultation summary */
.export-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.export-row .btn { flex: 1 1 220px; }
.export-row .btn--ghost { flex: 0 1 auto; }

/* "Print": print only the results (transcript + summaries), not the page chrome. */
@media print {
    body.print-consult { background: #fff; }
    body.print-consult .sidebar,
    body.print-consult .topbar,
    body.print-consult #page-speech > .card,
    body.print-consult #speechStatus,
    body.print-consult #speechResults > .status,
    body.print-consult .export-row,
    body.print-consult .reminder-box .btn,
    body.print-consult .cs-tabs,
    body.print-consult .cs-actions,
    body.print-consult .foot { display: none !important; }
    body.print-consult #page-speech { display: block !important; }
    body.print-consult #speechResults { display: block !important; }
    body.print-consult .speech-cols { display: block; }
    body.print-consult .speech-cols > div { break-inside: auto; margin-bottom: 18px; }
    body.print-consult .transcript-box { max-height: none !important; overflow: visible !important; }
    body.print-consult .main { margin-left: 0 !important; }
    body.print-consult .content { padding: 0 !important; }
    body.print-consult .cs-card { border: none; box-shadow: none; max-width: none; margin: 0; padding: 0; }
    body.print-consult .cs-row,
    body.print-consult .cs-meta__box,
    body.print-consult .cs-note { break-inside: avoid; }
    body.print-consult .cs-row,
    body.print-consult .cs-meta__box,
    body.print-consult .cs-logo,
    body.print-consult .cs-note { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* paper is narrow enough to trigger the phone layout; keep the desktop one, tighter */
    body.print-consult .cs-head { margin-bottom: 10px; }
    body.print-consult .cs-meta { grid-template-columns: 1.5fr 1fr; gap: 8px; margin-bottom: 8px; }
    body.print-consult .cs-meta__box { padding: 10px 14px; }
    body.print-consult .cs-avatar { width: 42px; height: 42px; }
    body.print-consult .cs-row { gap: 14px; padding: 9px 14px; margin-bottom: 7px; }
    body.print-consult .cs-row__icon svg { width: 22px; height: 22px; }
    body.print-consult .cs-row__title { font-size: 13.5px; margin-bottom: 2px; }
    body.print-consult .cs-row__body { font-size: 13px; line-height: 1.55; }
    body.print-consult .cs-panel[lang] .cs-row__body { font-size: 13.5px; line-height: 1.7; }
    body.print-consult .cs-detail { display: inline-block; margin-right: 18px; }
    body.print-consult .cs-detail:not(:last-child)::after { content: "|"; }
    body.print-consult .cs-note { font-size: 11px; padding: 9px 14px; }
    body.print-consult .transcript-box { max-height: none; overflow: visible; background: #fff; color: #111; border: 1px solid var(--border); }
    body.print-consult .transcript-box .doctor { color: #0b5e57; }
    body.print-consult .transcript-box .patient { color: #1d4ed8; }
}