* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #222;
    background: #f7f7f7;
    line-height: 1.5;
}

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

.sidebar {
    background: #1a3a52;
    width: 260px;
    color: #e6f0fa;
    padding: 1.5rem 0;
    flex-shrink: 0;
    overflow-wrap: break-word;
}

.sidebar-brand {
    padding: 0 1.5rem 1.5rem 1.5rem;
    border-bottom: 1px solid #2c5680;
    margin-bottom: 1rem;
}

.sidebar-brand h2 {
    margin: 0;
    color: #fff;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    overflow-wrap: break-word;
}

.sidebar-brand small {
    color: #a4c4dc;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    overflow-wrap: break-word;
    display: block;
}

.nav-menu {
    display: flex;
    flex-direction: column;
}

.nav-section {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #2c5680;
}

.nav-section-label {
    display: block;
    color: #a4c4dc;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 1.5rem 0.5rem 1.5rem;
}

.nav-link-sub {
    padding-left: 2.5rem !important;
}

.demo-banner {
    background: #f59e0b;
    color: #1f2937;
    padding: 0.5rem 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.demo-banner-text {
    flex: 1 1 auto;
    text-align: center;
}

.booth-culture-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.booth-culture-link {
    color: #78350f;
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 999px;
    transition: color 120ms ease-out, background 120ms ease-out;
}

.booth-culture-link.active {
    color: #ffffff;
    background: #b45309;
}

.booth-culture-link:hover:not(.active) {
    color: #1f2937;
}

.booth-culture-sep {
    color: #b45309;
    opacity: 0.5;
}

/* On mobile the banner text can be long; stack the pill on its own row
 * so it doesn't get read as part of the sentence. */
@media (max-width: 640px) {
    .demo-banner {
        flex-direction: column;
        gap: 6px;
        padding: 8px 12px;
    }
    .demo-banner-text {
        font-size: 0.85rem;
    }
    .booth-culture-toggle {
        font-size: 0.75rem;
    }
}

.culture-toggle {
    margin-top: 1.5rem;
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.culture-link {
    color: #a4c4dc;
    text-decoration: none;
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}

.culture-link:hover {
    color: #fff;
    background: #2c5680;
    text-decoration: none;
}

.culture-link.active {
    color: #fff;
    font-weight: 600;
}

.culture-sep {
    color: #2c5680;
}

.sidebar-auth {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #2c5680;
}

.auth-name {
    display: block;
    color: #a4c4dc;
    padding: 0.5rem 1.5rem 0 1.5rem;
    font-size: 0.85rem;
    word-break: break-word;
}

/* Mobile layout: collapse the sidebar so scanned-from-QR visitors get the
 * full-width Home page content instead of losing 40% of the viewport to
 * the navy DrOk chrome. Public pages (Home, Chat, Kiosk) each carry their
 * own brand mark in-content, so the sidebar's role on mobile is nil.
 * Signed-in physicians on mobile are an edge case — post-Congreso we can
 * add a hamburger toggle if it comes up. */
@media (max-width: 768px) {
    .page {
        flex-direction: column;
    }
    .sidebar {
        display: none;
    }
    .page-kiosk .sidebar {
        display: none;
    }
    main > .content {
        padding: 1rem 1rem;
        max-width: 100%;
    }
    main > .content.footer {
        padding: 1rem;
    }
}

/* Mobile ES|EN toggle. Sidebar-hosted culture toggle is hidden on mobile
 * (see above), so this floating pill sits fixed top-right on non-dashboard
 * anonymous routes so shared-link visitors can still switch languages.
 * /dashboard has the banner's toggle already; BoothLayout has its own. */
.mobile-culture-toggle {
    display: none; /* desktop hides this — sidebar toggle covers it there */
}

@media (max-width: 768px) {
    .mobile-culture-toggle {
        display: inline-flex;
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 200;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.05em;
    }

    .mobile-culture-link {
        color: #475569;
        text-decoration: none;
        padding: 3px 8px;
        border-radius: 999px;
        transition: color 120ms ease-out, background 120ms ease-out;
    }

    .mobile-culture-link.active {
        color: #ffffff;
        background: #2dbeb5;
    }

    .mobile-culture-link:hover:not(.active) {
        color: #0f172a;
    }

    .mobile-culture-sep {
        color: #cbd5e1;
    }
}

.auth-roles {
    display: block;
    color: #88c0d0;
    padding: 0.1rem 1.5rem 0.4rem 1.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    overflow-wrap: break-word;
}

.auth-link {
    color: #c8d8e8 !important;
    font-size: 0.9rem;
}

.nav-link {
    color: #e6f0fa;
    text-decoration: none;
    display: block;
    padding: 0.625rem 1.5rem;
    transition: background 0.15s;
}

.nav-link:hover {
    background: #2c5680;
}

.nav-link.active {
    background: #2c5680;
    border-left: 3px solid #88c0d0;
    padding-left: calc(1.5rem - 3px);
}

main {
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.content {
    max-width: 900px;
    padding: 2rem 3rem;
    width: 100%;
}

h1 {
    color: #1a3a52;
    border-bottom: 2px solid #1a3a52;
    padding-bottom: 0.5rem;
    margin-top: 0;
}

h2 {
    color: #1a3a52;
    margin-top: 2rem;
    font-size: 1.35rem;
}

h3 {
    color: #2c5680;
    margin-top: 1rem;
    font-size: 1.1rem;
}

.lead {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 2rem;
}

ul {
    line-height: 1.8;
}

code {
    background: #f0f0f0;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-family: "SF Mono", Monaco, Consolas, monospace;
    font-size: 0.9em;
}

a {
    color: #2c5680;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.stub-card {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    background: #fafafa;
}

.stub-card h3 {
    margin-top: 0;
}

.stub-tag {
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 0;
}

.footer {
    margin-top: auto;
    padding-top: 2rem;
    border-top: 1px solid #eee;
    color: #888;
}

/* Conversation detail view */
.detail-header {
    margin-bottom: 1.5rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .detail-grid { grid-template-columns: 1fr; }
}

/* Transcript: chat-style left/right bubbles. Parent on left in warm sand,
   Assistant on right in teal — palette per Mark's 2026-06-20 review. */
.transcript {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.transcript .msg {
    max-width: 75%;
    padding: 0.7rem 0.95rem;
    border-radius: 14px;
    word-wrap: break-word;
    font-weight: 500;
}

.transcript .msg-parent {
    background: #dbbf95;
    color: #3d2f1c;
    margin-right: auto;
    border-bottom-left-radius: 4px;
}

.transcript .msg-assistant {
    background: #07777a;
    color: #ffffff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.transcript .msg-meta {
    font-size: 0.75rem;
    opacity: 0.8;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.3rem;
}

.transcript .msg-role { font-weight: 600; }

.transcript .msg-body { white-space: pre-wrap; }

/* Right-side panels on the conversation detail page. Distinct from the dark
   nav .sidebar — that class sets light-on-dark text and was bleeding into
   the detail panels, making body text near-invisible on white backgrounds. */
.detail-sidebar .panel {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    background: #fafafa;
    color: #222;
}

.detail-sidebar .panel h3 {
    margin-top: 0;
    color: #2a2836;
}

.detail-sidebar .panel p { margin: 0.5rem 0; }
.detail-sidebar .panel ul { margin: 0.5rem 0; padding-left: 1.2rem; }

/* Citation rendering — title + journal + year, readable at-a-glance.
   Per Mark's 2026-06-20 ask: not obtrusive, full text visible without clicking. */
.citation-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.citation {
    padding: 0.65rem 0;
    border-bottom: 1px solid #eee;
}

.citation:last-child { border-bottom: none; }

.citation-title {
    font-size: 0.92rem;
    line-height: 1.35;
    color: #2a2836;
    margin-bottom: 0.25rem;
}

.citation-meta {
    font-size: 0.8rem;
    color: #666;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: baseline;
}

.citation-link {
    margin-left: auto;
    color: #07777a;
    font-weight: 500;
    white-space: nowrap;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}

.badge-urgent { background: #b00020; }
.badge-priority { background: #c47600; }
.badge-routine { background: #2c7a3e; }
.badge-unknown { background: #777; }

.alert { padding: 0.5rem 0.75rem; border-radius: 4px; margin: 0; }
.alert-urgent { background: #fdecea; color: #b00020; border: 1px solid #f5c1bb; }
.alert-priority { background: #fff4e0; color: #8a5500; border: 1px solid #f0d9a8; }
.alert-routine { background: #e9f5ec; color: #2c7a3e; border: 1px solid #c1e1c9; }

.muted { color: #888; font-size: 0.85rem; }

/* Dashboard queue — tighter table, hover affordance, tier column anchor */
.queue-card {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    background: #fff;
}

.queue-card h3 { margin-top: 0; color: #1a3a52; }
.queue-empty { color: #888; font-style: italic; margin: 0.5rem 0; }
.lead-sub { color: #444; margin: 0 0 0.75rem 0; }

.queue-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

.queue-table th {
    text-align: left;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
    border-bottom: 1px solid #e2e2e2;
}

.queue-table td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.queue-row:hover { background: #f7fafc; }

.queue-phone a {
    font-weight: 600;
    color: #1a3a52;
}

.queue-ts {
    white-space: nowrap;
    color: #555;
    font-size: 0.9rem;
}

.queue-count {
    text-align: right;
    color: #888;
    font-variant-numeric: tabular-nums;
    width: 3rem;
}

/* Open clinical flags — populated from urgent-tier conversations */
.flag-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.flag-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.flag-list li:last-child { border-bottom: none; }
.flag-list a { font-weight: 600; color: #b00020; white-space: nowrap; }
.flag-preview { flex: 1; color: #444; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; }
.flag-ts { color: #888; font-size: 0.85rem; white-space: nowrap; }

/* Dashboard secondary cards laid out side-by-side on wide viewports */
.dashboard-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

@media (max-width: 900px) {
    .dashboard-cards { grid-template-columns: 1fr; }
}

/* Volume metrics — placeholder values until real telemetry lands */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 0.5rem 0 0.75rem 0;
}

.metric {
    padding: 0.75rem;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fff;
    text-align: center;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a3a52;
}

.metric-label {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.2rem;
}

/* Admin surfaces (/admin/contacts, /admin/conversations) — AB#135 */
.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.admin-filter {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 12rem;
}

.admin-filter-grow {
    flex: 1 1 18rem;
}

.admin-filter label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
}

.admin-filter select,
.admin-filter input[type="text"] {
    padding: 0.4rem 0.6rem;
    font-size: 0.95rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #0f172a;
}

.admin-filter select:focus,
.admin-filter input[type="text"]:focus {
    outline: 2px solid #2dbeb5;
    outline-offset: -1px;
    border-color: #2dbeb5;
}

.admin-count {
    margin-left: auto;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: #475569;
    white-space: nowrap;
    padding-bottom: 0.4rem;
}

.admin-metrics {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 900px) {
    .admin-metrics { grid-template-columns: repeat(2, 1fr); }
}

.metric-urgent { border-left: 3px solid #b00020; }
.metric-priority { border-left: 3px solid #c47600; }
.metric-routine { border-left: 3px solid #2c7a3e; }
.metric-unknown { border-left: 3px solid #777; }

.admin-phone {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    color: #475569;
}

.admin-culture {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: #475569;
    text-transform: lowercase;
}

.admin-source-tag {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    background: #e8f3ff;
    color: #1e5e8b;
    border: 1px solid #c6dcf2;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

.admin-note {
    color: #475569;
    font-size: 0.88rem;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}