/* MediSense — Enhanced UI Styles */

/* ── Page Navigation Tabs ─────────────────────────────────────── */
.page-tab {
    border-bottom: 3px solid transparent;
    color: #94a3b8;
    cursor: pointer;
    background: none;
}
.page-tab:hover {
    color: #475569;
    background: rgba(13,148,136,0.05);
}
.dark .page-tab:hover { color: #cbd5e1; background: rgba(13,148,136,0.1); }
.page-tab-active {
    color: #0d9488 !important;
    border-bottom-color: #0d9488 !important;
    background: rgba(13,148,136,0.06) !important;
}
.dark .page-tab-active {
    color: #2dd4bf !important;
    border-bottom-color: #2dd4bf !important;
    background: rgba(45,212,191,0.08) !important;
}

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
    --teal:   #0d9488;
    --teal-d: #0f766e;
    --r: 14px;
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 99px; }
.dark ::-webkit-scrollbar-thumb { background: #2dd4bf; }

/* ── Status dots ───────────────────────────────────────────── */
.status-dot {
    width: 8px; height: 8px;
    border-radius: 50%; display: inline-block;
    flex-shrink: 0; margin-right: 6px;
}
.status-ready      { background: #22c55e; }
.status-active     { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.2); animation: pulse-green 2s infinite; }
.status-connecting { background: #f59e0b; animation: pulse-amber 1s infinite; }
.status-error      { background: #f43f5e; }
.status-inactive   { background: #94a3b8; }
@keyframes pulse-green  { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.4);}50%{box-shadow:0 0 0 6px rgba(16,185,129,0);} }
@keyframes pulse-amber  { 0%,100%{opacity:1;}50%{opacity:0.4;} }

/* ── Active button state ────────────────────────────────────── */
.btn-active { background: var(--teal-d) !important; box-shadow: 0 0 0 3px rgba(15,118,110,0.35) !important; }

/* ── Message bubbles ───────────────────────────────────────── */
.message { display: flex; flex-direction: column; margin-bottom: 2px; }
.message-user      { align-items: flex-end; }
.message-assistant { align-items: flex-start; }
.message-system    { align-items: center; }
.message-error     { align-items: flex-start; }

.msg-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    margin-bottom: 3px; padding: 0 2px; opacity: 0.8;
}
.message-user .bubble {
    background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%);
    color: #fff;
    border-radius: 18px 18px 4px 18px;
    padding: 10px 15px;
    max-width: 84%;
    font-size: 13px;
    line-height: 1.55;
    box-shadow: 0 2px 10px rgba(13,148,136,0.22);
}
.message-assistant .bubble {
    background: #fff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: 18px 18px 18px 4px;
    padding: 10px 15px;
    max-width: 84%;
    font-size: 13px;
    line-height: 1.55;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.dark .message-assistant .bubble {
    background: #1e293b; color: #e2e8f0; border-color: #334155;
}
.message-system .bubble {
    background: #f1f5f9; color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 99px;
    padding: 4px 14px;
    max-width: 90%;
    font-size: 11.5px;
    font-style: italic;
}
.dark .message-system .bubble { background: #1e293b; color: #94a3b8; border-color: #334155; }
.message-error .bubble {
    background: #fee2e2; color: #991b1b;
    border-radius: 12px; padding: 8px 14px; font-size: 12px;
}
.dark .message-error .bubble { background: #450a0a; color: #fca5a5; }

/* ── Clinical note cards ─────────────────────────────────────── */
.note-card {
    border-left: 3px solid var(--teal);
    background: #f0fdfa;
    border-radius: 0 8px 8px 0;
    padding: 7px 10px;
    font-size: 11.5px;
    line-height: 1.5;
}
.dark .note-card { background: #134e4a; border-left-color: #2dd4bf; }
.note-card.warning { border-left-color: #f59e0b; background: #fffbeb; }
.dark .note-card.warning { background: #451a03; }
.note-card.urgent  { border-left-color: #ef4444; background: #fff1f2; }
.dark .note-card.urgent  { background: #450a0a; }

/* ── Urgent alert banner ────────────────────────────────────── */
.urgent-banner {
    border: 1.5px solid rgba(251,113,133,0.4);
    border-radius: 12px;
    background: linear-gradient(135deg, #dc2626, #9f1239);
    color: white;
    padding: 12px 14px;
    box-shadow: 0 4px 20px rgba(220,38,38,0.28);
}
.urgent-pulse { animation: urgent-flash 0.8s ease-in-out 4; }
@keyframes urgent-flash { 0%,100%{opacity:1;}50%{opacity:0.6;} }

/* ── Loading dots ────────────────────────────────────────────── */
.loading-dots span {
    display: inline-block; width: 6px; height: 6px;
    border-radius: 50%; background: var(--teal);
    animation: bounce-dot 1.4s infinite ease-in-out both;
    margin: 0 2px;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce-dot { 0%,80%,100%{transform:scale(0);opacity:0.3;}40%{transform:scale(1);opacity:1;} }

/* ── Image modal ─────────────────────────────────────────────── */
.image-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:9999; align-items:center; justify-content:center; cursor:zoom-out; }
.image-modal.active { display:flex; }
.image-modal img { max-width:90vw; max-height:90vh; border-radius:12px; box-shadow:0 8px 60px rgba(0,0,0,0.6); }

/* ── Toast ─────────────────────────────────────────────────── */
#notification-toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%); z-index: 10000; pointer-events: none;
}

/* ── Camera preview ─────────────────────────────────────────── */
#camera-container { position: relative; }
#camera-container video {
    max-height: 200px; width: 100%;
    object-fit: cover; border-radius: 12px;
    border: 2px solid var(--teal);
}
#camera-container::after {
    content: '● LIVE';
    position: absolute; top: 8px; left: 8px;
    background: rgba(220,38,38,0.9);
    color: white; font-size: 10px; font-weight: 800;
    padding: 2px 8px; border-radius: 99px; letter-spacing: 0.06em;
}

/* ── Upload preview ─────────────────────────────────────────── */
#upload-preview-container { display: none; }

/* ── ESR bar (patient records) ───────────────────────────────── */
.esr-bar-track { background: #e2e8f0; border-radius: 99px; height: 3px; margin-top: 3px; overflow: hidden; }
.dark .esr-bar-track { background: #334155; }
.esr-bar-fill { height: 100%; border-radius: 99px; transition: width 0.6s ease; }

/* ── Sidebar mc-card (used in index.html inline styles) ───────────── */
.mc-card {
    background: white;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
    border: 1px solid rgba(226,232,240,0.9);
    overflow: hidden;
}
.dark .mc-card {
    background: #1e293b;
    border-color: rgba(51,65,85,0.8);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15);
}
.mc-card-header {
    padding: 10px 14px;
    display: flex; align-items: center; justify-content: space-between;
}
.mc-input {
    width: 100%; padding: 9px 12px; font-size: 13px;
    border-radius: 10px; border: 1.5px solid #e2e8f0;
    background: #f8fafc; color: #0f172a;
    transition: all 0.15s; outline: none; font-family: inherit;
}
.mc-input:focus { border-color: #0d9488; background: #fff; box-shadow: 0 0 0 3px rgba(13,148,136,0.1); }
.dark .mc-input { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.dark .mc-input:focus { border-color: #2dd4bf; box-shadow: 0 0 0 3px rgba(45,212,191,0.1); }

/* ── Header bg ─────────────────────────────────────────────── */
.header-bg {
    background: linear-gradient(135deg, #0f172a 0%, #134e4a 60%, #0f172a 100%);
    position: relative;
}
.header-bg::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 20% 50%, rgba(13,148,136,0.18) 0%, transparent 55%),
                radial-gradient(circle at 80% 20%, rgba(8,145,178,0.12) 0%, transparent 50%);
}

/* ── Mode pill toggle (inside header) ───────────────────────── */
.mode-pill-active   { background: white; color: #0f172a; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.mode-pill-inactive { color: rgba(255,255,255,0.6); }
.mode-pill-inactive:hover { color: rgba(255,255,255,0.9); }

/* ── Fade in ───────────────────────────────────────────────── */
.fade-in { animation: fadeIn 0.35s ease-out; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);} }

/* ── Session timer ─────────────────────────────────────────── */
#session-timer {
    font-variant-numeric: tabular-nums;
    font-size: 11px; font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
}

/* ── Quick prompt chips ────────────────────────────────────── */
.quick-chip {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    padding: 5px 12px; border-radius: 99px;
    font-size: 11.5px; font-weight: 600;
    background: white; border: 1.5px solid #e2e8f0;
    color: #475569; cursor: pointer; white-space: nowrap;
    transition: all 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.quick-chip:hover {
    background: #f0fdfa; border-color: #5eead4; color: #0d9488;
    transform: translateY(-1px); box-shadow: 0 3px 8px rgba(13,148,136,0.14);
}
.dark .quick-chip { background: #1e293b; border-color: #334155; color: #94a3b8; }
.dark .quick-chip:hover { background: #134e4a; border-color: #2dd4bf; color: #2dd4bf; }
#quick-prompts::-webkit-scrollbar { height: 0; }

/* ── Patient vitals strip ──────────────────────────────────── */
#patient-vitals-strip {
    padding: 10px 14px;
    background: white; border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dark #patient-vitals-strip { background: #1e293b; border-color: #334155; }
.vital-item {
    display: flex; flex-direction: column; align-items: center;
    padding: 4px 9px; border-radius: 10px;
    background: #f8fafc; border: 1px solid #e2e8f0; min-width: 48px;
}
.dark .vital-item { background: #0f172a; border-color: #334155; }
.vital-label { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; margin-bottom: 2px; }
.vital-val   { font-size: 13px; font-weight: 800; line-height: 1.2; }
.vital-ok    { color: #10b981; }
.vital-warn  { color: #f59e0b; }
.vital-alert { color: #ef4444; animation: pulse-alert 1.5s ease-in-out 3; }
@keyframes pulse-alert { 0%,100%{opacity:1;}50%{opacity:0.5;} }

/* ── Copy button on AI bubbles ─────────────────────────────── */
.bubble-wrap { position: relative; max-width: 84%; }
.message-assistant .bubble-wrap .bubble { max-width: 100%; }
.copy-btn {
    position: absolute; top: 5px; right: 7px;
    padding: 2px 8px; border-radius: 6px;
    font-size: 10px; font-weight: 700;
    background: rgba(255,255,255,0.9); border: 1px solid #e2e8f0;
    color: #64748b; cursor: pointer; opacity: 0;
    transition: all 0.15s; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.copy-btn.copied { background: #f0fdfa; border-color: #5eead4; color: #0d9488; }
.dark .copy-btn { background: rgba(15,23,42,0.92); border-color: #334155; color: #94a3b8; }
.dark .copy-btn.copied { background: #134e4a; border-color: #2dd4bf; color: #2dd4bf; }
.bubble-wrap:hover .copy-btn { opacity: 1; }

/* ── Risk Score Badges (NEWS2 / qSOFA) ─────────────────────────── */
.score-badge {
    padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 800; line-height: 1.5;
    border: 1.5px solid; transition: all 0.3s; white-space: nowrap;
}
.score-badge-green  { background:#f0fdf4; color:#15803d; border-color:#86efac; }
.score-badge-amber  { background:#fffbeb; color:#92400e; border-color:#fcd34d; }
.score-badge-red    { background:#fef2f2; color:#991b1b; border-color:#fca5a5; animation: pulse-alert 1.2s ease-in-out infinite; }
.dark .score-badge-green  { background:rgba(20,83,45,0.5);  color:#4ade80; border-color:#166534; }
.dark .score-badge-amber  { background:rgba(69,26,3,0.5);   color:#fbbf24; border-color:#78350f; }
.dark .score-badge-red    { background:rgba(69,10,10,0.5);  color:#f87171; border-color:#7f1d1d; }

/* ── DDx Panel items ────────────────────────────────────────────── */
.ddx-item {
    padding: 8px 10px; border-radius: 10px;
    border: 1px solid; font-size: 11px; line-height: 1.4;
}
.ddx-item p { margin: 0 0 3px; }
.ddx-item-high   { background:#fef2f2; border-color:#fca5a5; }
.ddx-item-medium { background:#fffbeb; border-color:#fde68a; }
.ddx-item-low    { background:#f0fdf4; border-color:#86efac; }
.dark .ddx-item-high   { background:rgba(69,10,10,0.4);   border-color:#7f1d1d; }
.dark .ddx-item-medium { background:rgba(69,26,3,0.4);    border-color:#78350f; }
.dark .ddx-item-low    { background:rgba(20,83,45,0.4);   border-color:#166534; }

/* ── Procedure Checklist ──────────────────────────────────────────────────── */
.procedure-select-btn {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 8px 10px; border-radius: 12px;
    border: 1px solid transparent; background: #f8fafc;
    cursor: pointer; transition: all 0.15s;
}
.procedure-select-btn:hover { background: #fff7ed; border-color: #fed7aa; }
.dark .procedure-select-btn { background: #1e293b; }
.dark .procedure-select-btn:hover { background: rgba(120,53,15,0.3); border-color: #92400e; }

.procedure-progress-bar {
    height: 4px; border-radius: 2px; background: #e2e8f0; overflow: hidden; margin-bottom: 6px;
}
.dark .procedure-progress-bar { background: #334155; }
.procedure-progress-fill {
    height: 100%; border-radius: 2px;
    background: linear-gradient(to right, #f59e0b, #22c55e);
    transition: width 0.4s ease;
}

.procedure-step {
    padding: 8px 10px; border-radius: 10px; border-left: 3px solid #cbd5e1;
    background: #f8fafc; transition: all 0.25s; margin-bottom: 2px;
}
.dark .procedure-step { background: #1e293b; border-left-color: #475569; }

.procedure-step-pending  { border-left-color: #94a3b8; }
.procedure-step-verified { border-left-color: #22c55e; background: #f0fdf4; }
.procedure-step-warning  { border-left-color: #f59e0b; background: #fffbeb; }
.procedure-step-flagged  { border-left-color: #ef4444; background: #fef2f2; }
.dark .procedure-step-verified { background: rgba(20,83,45,0.3); border-left-color: #16a34a; }
.dark .procedure-step-warning  { background: rgba(69,26,3,0.3); border-left-color: #d97706; }
.dark .procedure-step-flagged  { background: rgba(69,10,10,0.3); border-left-color: #dc2626; }

.procedure-step-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.procedure-step-title { font-size: 11px; font-weight: 700; color: #334155; line-height: 1.3; }
.dark .procedure-step-title { color: #e2e8f0; }
.procedure-step-detail { font-size: 10px; color: #64748b; line-height: 1.3; margin-top: 2px; }
.dark .procedure-step-detail { color: #94a3b8; }
.procedure-step-visual { font-size: 9px; color: #94a3b8; margin-top: 3px; font-style: italic; }
.dark .procedure-step-visual { color: #64748b; }
.procedure-step-obs {
    font-size: 10px; margin-top: 4px; padding: 4px 6px; border-radius: 6px;
    background: rgba(0,0,0,0.04); color: #475569; font-style: italic;
}
.dark .procedure-step-obs { background: rgba(255,255,255,0.05); color: #94a3b8; }

.procedure-complete {
    text-align: center; padding: 10px; font-size: 12px; font-weight: 700;
    color: #16a34a; background: #f0fdf4; border-radius: 10px; margin-top: 4px;
}
.dark .procedure-complete { background: rgba(20,83,45,0.3); color: #4ade80; }