/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,sans-serif; background:#F2F2F7; color:#1C1C1E; -webkit-user-select:none; user-select:none; overflow:hidden; height:100vh; }

/* Screen system */
.screen { display:none; position:absolute; top:0; left:0; right:0; bottom:56px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.screen.active { display:block; }

/* Detail screen overlays everything */
#screen-detail { bottom:0; z-index:100; background:#F2F2F7; }

/* Tab bar - fixed bottom, white, 56px height */
#tabbar { position:fixed; bottom:0; left:0; right:0; height:56px; background:#fff; display:flex; border-top:1px solid #E5E5EA; z-index:50; padding-bottom:env(safe-area-inset-bottom); }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:none; background:none; color:#8E8E93; font-size:10px; font-weight:500; cursor:pointer; }
.tab.active { color:#007AFF; }
.tab svg { width:24px; height:24px; fill:currentColor; }

/* Header bar */
.header-bar { background:#fff; padding:12px 16px; border-bottom:1px solid #E5E5EA; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:10; }
.header-bar h1 { font-size:17px; font-weight:700; color:#007AFF; }
.back-btn { background:none; border:none; color:#007AFF; font-size:15px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:4px; }

/* Cards */
.card { background:#fff; border-radius:12px; padding:14px; margin:8px 16px; box-shadow:0 1px 3px rgba(0,0,0,0.06); }

/* Appointment card */
.appt-card { display:flex; align-items:center; background:#fff; padding:12px 16px; border-bottom:0.5px solid #F2F2F7; cursor:pointer; gap:12px; }
.appt-card:active { background:#F2F2F7; }
.status-bar { width:4px; height:40px; border-radius:2px; flex-shrink:0; }
.appt-content { flex:1; min-width:0; }
.appt-time { font-size:14px; color:#8E8E93; font-weight:500; }
.appt-name { font-size:16px; font-weight:600; color:#1C1C1E; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appt-reason { font-size:13px; color:#8E8E93; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status-badge { display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:600; }
.scribe-btn { padding:8px; background:none; border:none; color:#6366F1; cursor:pointer; }

/* Date navigator */
.date-nav { display:flex; align-items:center; justify-content:space-between; background:#fff; padding:10px 16px; border-bottom:1px solid #E5E5EA; }
.date-nav button { background:none; border:none; color:#007AFF; font-size:20px; cursor:pointer; padding:8px; }
.date-center { text-align:center; }
.date-day { font-size:16px; font-weight:600; }
.date-full { font-size:13px; color:#8E8E93; }

/* Inbox message card */
.msg-card { display:flex; align-items:center; background:#fff; padding:12px 16px; border-bottom:0.5px solid #F2F2F7; gap:12px; cursor:pointer; position:relative; }
.msg-card:active { background:#F2F2F7; }
.avatar { width:42px; height:42px; border-radius:21px; background:#E3F0FF; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; color:#007AFF; flex-shrink:0; }
.msg-body { flex:1; min-width:0; }
.msg-title { font-size:15px; font-weight:600; color:#1C1C1E; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-sub { font-size:13px; color:#3C3C43; margin-top:2px; }
.msg-type { font-size:12px; color:#8E8E93; margin-top:1px; }
.msg-time { font-size:12px; color:#8E8E93; white-space:nowrap; }
.msg-row { display:flex; justify-content:space-between; align-items:center; }
.priority-dot { width:10px; height:10px; border-radius:5px; flex-shrink:0; }

/* Swipe action */
.swipe-container { position:relative; overflow:hidden; }
.swipe-action { position:absolute; right:0; top:0; bottom:0; width:80px; background:#16A34A; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:600; transform:translateX(80px); transition:transform 0.2s; }
.swipe-container.swiped .swipe-action { transform:translateX(0); }
.swipe-container.swiped .msg-card { transform:translateX(-80px); transition:transform 0.2s; }

/* Filter tabs */
.filters { display:flex; background:#fff; padding:8px 16px; gap:8px; border-bottom:1px solid #E5E5EA; }
.filter-tab { padding:6px 14px; border-radius:16px; background:#F2F2F7; font-size:13px; font-weight:500; color:#8E8E93; border:none; cursor:pointer; }
.filter-tab.active { background:#007AFF; color:#fff; }

/* Action bar */
.action-bar { display:flex; background:#fff; padding:10px 8px; gap:8px; border-bottom:1px solid #E5E5EA; }
.action-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px; border-radius:10px; background:#F2F2F7; border:none; font-size:13px; font-weight:600; color:#3C3C43; cursor:pointer; }
.action-btn:active { opacity:0.7; }

/* Meta card (for lab details, transcription headers) */
.meta-card { border-radius:12px; padding:14px; margin-bottom:12px; border:1px solid; }
.meta-card h3 { font-size:13px; font-weight:700; margin-bottom:8px; }
.meta-row { display:flex; align-items:flex-start; gap:6px; margin-bottom:4px; font-size:12px; }
.meta-label { font-weight:600; color:#475569; min-width:70px; }
.meta-value { color:#334155; flex:1; }

/* Lab test table */
.lab-section { margin-bottom:12px; }
.section-header { display:flex; align-items:center; gap:6px; background:#EEF2FF; padding:10px; border-radius:10px; cursor:pointer; }
.section-header:active { opacity:0.8; }
.section-name { font-size:14px; font-weight:600; color:#312E81; flex:1; }
.abn-badge { background:#FEF2F2; padding:2px 8px; border-radius:8px; font-size:11px; font-weight:600; color:#991B1B; }
.test-table { background:#fff; border-radius:10px; overflow:hidden; margin-top:4px; }
.test-header { display:flex; padding:6px 10px; background:#F8FAFC; border-bottom:1px solid #E2E8F0; font-size:10px; font-weight:600; color:#64748B; text-transform:uppercase; }
.test-row { display:flex; padding:8px 10px; border-bottom:0.5px solid #F1F5F9; align-items:center; }
.test-row.abnormal { background:#FEF2F2; }
.test-row.abnormal .test-name, .test-row.abnormal .test-result { color:#991B1B; font-weight:700; }
.test-name { flex:3; font-size:13px; color:#334155; }
.test-result { flex:1.5; font-size:13px; font-weight:600; color:#1E293B; text-align:right; font-family:Courier,monospace; }
.test-trend { flex:0.5; text-align:center; font-size:14px; font-weight:700; }
.test-range { flex:2; font-size:11px; color:#94A3B8; text-align:right; }
.test-units { flex:1; font-size:11px; color:#94A3B8; text-align:right; }

/* Transcription sections */
.section-card { background:#fff; border-radius:12px; margin-bottom:10px; border-left:4px solid; overflow:hidden; }
.section-heading { padding:8px 14px; font-size:12px; font-weight:700; text-transform:uppercase; }
.section-body { padding:0 14px 14px; font-size:13px; color:#334155; line-height:20px; white-space:pre-wrap; }

/* Scribe */
.template-row { display:flex; gap:6px; padding:8px 12px; background:#fff; border-bottom:1px solid #E5E5EA; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.template-btn { display:flex; align-items:center; gap:4px; padding:6px 12px; border-radius:16px; background:#F2F2F7; border:none; font-size:12px; font-weight:600; color:#8E8E93; white-space:nowrap; cursor:pointer; }
.template-btn.active { background:#6366F1; color:#fff; }
.record-area { display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px; }
.record-btn { width:80px; height:80px; border-radius:40px; background:#DC2626; border:none; color:#fff; font-size:28px; cursor:pointer; box-shadow:0 4px 12px rgba(220,38,38,0.3); display:flex; align-items:center; justify-content:center; }
.record-btn.recording { background:#991B1B; animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0.4)} 50%{box-shadow:0 0 0 12px rgba(220,38,38,0)} }
.record-info { display:flex; align-items:center; gap:8px; }
.record-dot { width:10px; height:10px; border-radius:5px; background:#DC2626; animation:pulse 1s infinite; }
.transcript-input { width:100%; min-height:150px; padding:14px; border:1px solid #E5E5EA; border-radius:12px; font-size:15px; line-height:22px; background:#fff; resize:none; font-family:inherit; color:#1C1C1E; }
.generate-btn { display:flex; align-items:center; justify-content:center; gap:8px; background:#6366F1; color:#fff; padding:14px; border-radius:12px; border:none; font-size:16px; font-weight:600; width:100%; cursor:pointer; margin-top:16px; }
.generate-btn:disabled { opacity:0.5; }
.upload-btn { display:flex; align-items:center; justify-content:center; gap:8px; background:#F2F2F7; color:#3C3C43; padding:10px; border-radius:10px; border:1px solid #E5E5EA; font-size:14px; font-weight:500; cursor:pointer; margin-top:8px; width:100%; }

/* Results */
.success-banner { display:flex; align-items:center; gap:8px; background:#F0FDF4; padding:12px; border-radius:10px; margin-bottom:12px; font-size:14px; font-weight:600; color:#16A34A; }
.note-card { background:#fff; border-radius:12px; padding:16px; margin-bottom:12px; }
.note-card h4 { font-size:11px; font-weight:700; color:#6366F1; margin-bottom:8px; text-transform:uppercase; }
.note-card pre { font-size:14px; color:#1C1C1E; line-height:22px; white-space:pre-wrap; font-family:inherit; }
.billing-card { background:#fff; border-radius:12px; padding:14px; margin-bottom:12px; }
.billing-card h4 { font-size:11px; font-weight:700; color:#16A34A; margin-bottom:8px; text-transform:uppercase; }
.code-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.code-badge { background:#EEF2FF; padding:4px 10px; border-radius:6px; font-size:13px; font-weight:700; color:#6366F1; }
.dx-row { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.dx-badge { background:#F0FDF4; padding:2px 8px; border-radius:6px; font-size:12px; font-weight:600; color:#16A34A; }
.dx-desc { font-size:13px; color:#334155; }
.evidence-card { background:#fff; border-radius:10px; border-left:4px solid; padding:12px; margin-bottom:8px; }
.evidence-source { font-size:12px; font-weight:700; margin-bottom:4px; }
.evidence-text { font-size:13px; color:#334155; line-height:20px; }

/* Tickler form */
.tickler-form { background:#fff; padding:14px; border-bottom:1px solid #E5E5EA; }
.field-label { font-size:12px; font-weight:600; color:#8E8E93; margin:4px 0; }
.staff-row { display:flex; gap:8px; margin-bottom:8px; }
.staff-btn { flex:1; padding:8px; border-radius:8px; border:1px solid #E5E5EA; background:#F9F9F9; text-align:center; font-size:13px; color:#8E8E93; font-weight:500; cursor:pointer; }
.staff-btn.active { border-color:#6366F1; background:#EEF2FF; color:#6366F1; font-weight:600; }
.form-input { width:100%; padding:10px; border:1px solid #E5E5EA; border-radius:8px; font-size:14px; background:#F9F9F9; font-family:inherit; margin-bottom:8px; }
.send-btn { background:#6366F1; color:#fff; padding:10px; border-radius:8px; border:none; font-size:14px; font-weight:600; width:100%; cursor:pointer; }

/* Patient chart */
.patient-header { display:flex; background:#fff; padding:16px; gap:12px; border-bottom:1px solid #E5E5EA; }
.patient-avatar { width:52px; height:52px; border-radius:26px; background:#E3F0FF; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:#007AFF; }
.patient-info { flex:1; }
.patient-name-lg { font-size:18px; font-weight:700; color:#1C1C1E; }
.patient-meta { font-size:13px; color:#8E8E93; }
.chart-tabs { display:flex; background:#fff; border-bottom:1px solid #E5E5EA; }
.chart-tab { flex:1; padding:12px; text-align:center; font-size:14px; font-weight:500; color:#8E8E93; border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; }
.chart-tab.active { color:#007AFF; border-bottom-color:#007AFF; font-weight:600; }

/* Medication card */
.med-card { background:#fff; border-radius:12px; padding:14px; margin:8px 16px; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.med-card.inactive { opacity:0.6; }
.med-name { font-size:16px; font-weight:600; color:#1C1C1E; }
.med-dose { font-size:14px; color:#3C3C43; }
.med-date { font-size:12px; color:#8E8E93; margin-top:6px; }
.badge { display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:600; }
.badge-green { background:#E8F7EE; color:#1A7A3C; }
.badge-red { background:#FDE8E8; color:#C62828; }
.badge-signed { background:#E8F7EE; color:#1A7A3C; }

/* Doc card */
.doc-card { background:#fff; border-radius:12px; padding:14px; margin:8px 16px; box-shadow:0 1px 3px rgba(0,0,0,0.06); cursor:pointer; }
.doc-card:active { opacity:0.7; }

/* Encounter card */
.encounter-card { background:#fff; border-radius:12px; padding:14px; margin:8px 16px; box-shadow:0 1px 3px rgba(0,0,0,0.06); }

/* Loading & empty states */
.centered { display:flex; flex-direction:column; align-items:center; justify-content:center; height:60vh; gap:12px; color:#8E8E93; }
.spinner { width:32px; height:32px; border:3px solid #E5E5EA; border-top-color:#007AFF; border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty-text { font-size:16px; color:#8E8E93; }

/* Utility */
.hidden { display:none !important; }
.pad { padding:16px; }
.text-card { background:#fff; border-radius:12px; padding:14px; margin-bottom:10px; }
.text-body { font-size:13px; color:#334155; line-height:20px; white-space:pre-wrap; }