/* ============================================================
   SendVyte Platform CSS - Single Source of Truth
   /assets/css/sendvyte.css
   ============================================================ */

/* --- CSS Variables (Theming) --- */
:root {
  /* Platform colors */
  --sv-primary: #0e7c6b;
  --sv-primary-dark: #0a6356;
  --sv-primary-light: #10a37f;
  --sv-primary-bg: #f8fffe;
  --sv-primary-border: #e8f5f0;
  --sv-primary-subtle: #e6f7f3;
  --sv-primary-text: #0e7c6b;

  /* Neutral colors */
  --sv-dark: #1a1a2e;
  --sv-text: #333;
  --sv-text-secondary: #555;
  --sv-text-muted: #888;
  --sv-text-light: #94a3b8;
  --sv-text-faint: #999;

  /* Status colors */
  --sv-success: #0d9f6e;
  --sv-warning: #e8a317;
  --sv-danger: #dc2626;
  --sv-info: #3b82f6;
  --sv-purple: #8b5cf6;

  /* Background colors */
  --sv-bg: #f0f4f7;
  --sv-bg-white: #fff;
  --sv-bg-light: #f9fafb;
  --sv-bg-card: #f8fafc;

  /* Border colors */
  --sv-border: #e2e8f0;
  --sv-border-light: #f1f5f9;
  --sv-border-medium: #eee;

  /* Shadows */
  --sv-shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --sv-shadow-md: 0 4px 20px rgba(0,0,0,.08);
  --sv-shadow-lg: 0 8px 24px rgba(14,124,107,.25);

  /* Spacing */
  --sv-radius-sm: 6px;
  --sv-radius: 8px;
  --sv-radius-md: 10px;
  --sv-radius-lg: 12px;
  --sv-radius-xl: 16px;
  --sv-radius-round: 20px;

  /* Typography */
  --sv-font: 'Inter', system-ui, -apple-system, sans-serif;
  --sv-font-mono: 'SF Mono', 'Fira Code', monospace;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--sv-font); color: var(--sv-text); line-height: 1.6; background: var(--sv-bg); }
a { text-decoration: none; color: var(--sv-primary); }
a:hover { color: var(--sv-primary-dark); }
img { max-width: 100%; }

/* --- Typography --- */
h1 { font-size: 52px; font-weight: 800; line-height: 1.15; letter-spacing: -1.5px; color: var(--sv-dark); }
h2 { font-size: 36px; font-weight: 800; letter-spacing: -0.5px; color: var(--sv-dark); }
h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; color: var(--sv-dark); }
h4 { font-size: 18px; font-weight: 700; color: var(--sv-dark); }
.text-accent { color: var(--sv-primary); }
.text-muted { color: var(--sv-text-muted); }
.text-light { color: var(--sv-text-light); }
.text-success { color: var(--sv-success); font-weight: 600; }
.text-warning { color: var(--sv-warning); font-weight: 600; }
.text-danger { color: var(--sv-danger); font-weight: 600; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11px; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.font-mono { font-family: var(--sv-font-mono); }

/* --- Section Labels --- */
.section-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--sv-primary); margin-bottom: 12px; }
.section-title { font-size: 36px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 16px; color: var(--sv-dark); }
.section-desc { font-size: 17px; color: #666; max-width: 700px; margin: 0 auto 48px; line-height: 1.7; }

/* --- Layout --- */
.container { max-width: 1200px; margin: 0 auto; padding: 20px 24px; }
.flex { display: flex; }
.flex-between { justify-content: space-between; }
.flex-center { align-items: center; }
.flex-col { flex-direction: column; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }

/* --- Navigation --- */
.sv-nav { background: var(--sv-bg-white); border-bottom: 1px solid var(--sv-border-medium); padding: 0 40px; position: sticky; top: 0; z-index: 100; }
.sv-nav-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 72px; }
.sv-nav-logo img { height: 44px; }
.sv-nav-links { display: flex; gap: 32px; align-items: center; }
.sv-nav-links a { color: var(--sv-text-secondary); font-size: 14px; font-weight: 500; transition: color .2s; }
.sv-nav-links a:hover { color: var(--sv-primary); }
.sv-nav-login { color: var(--sv-primary); font-weight: 600; font-size: 14px; }

/* --- Dashboard Header --- */
.sv-header { background: linear-gradient(135deg, #0e4a43 0%, #0e7c6b 60%, #10a37f 100%); padding: 16px 24px; box-shadow: 0 2px 12px rgba(0,0,0,.15); }
.sv-header-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.sv-header-logo img { height: 42px; border-radius: 6px; }
.sv-header .name { color: #fff; font-size: 13px; font-weight: 600; }
.sv-header .date { color: rgba(255,255,255,.7); font-size: 11px; }
.sv-header .avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; }
.sv-header a.logout { color: rgba(255,255,255,.7); font-size: 12px; margin-left: 12px; }
.sv-header a.logout:hover { color: #fff; }

/* --- Platform Header (different shade) --- */
.sv-platform-header { background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 60%, #3b3b8e 100%); }

/* --- Buttons --- */
.btn { border: none; border-radius: var(--sv-radius); padding: 10px 24px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; display: inline-block; text-decoration: none; font-family: var(--sv-font); }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--sv-primary); color: #fff !important; }
.btn-primary:hover { background: var(--sv-primary-dark); box-shadow: var(--sv-shadow-lg); }
.btn-secondary { background: var(--sv-bg-white); color: var(--sv-primary); border: 2px solid var(--sv-primary); }
.btn-secondary:hover { background: var(--sv-primary-bg); }
.btn-white { background: #fff; color: var(--sv-primary); }
.btn-white:hover { box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.btn-danger { background: var(--sv-danger); color: #fff; }
.btn-sm { padding: 6px 14px; font-size: 12px; border-radius: var(--sv-radius-sm); }
.btn-lg { padding: 14px 32px; font-size: 16px; border-radius: var(--sv-radius-md); }
.btn:disabled { background: var(--sv-text-light); cursor: not-allowed; transform: none; }

/* --- Cards --- */
.card { background: var(--sv-bg-white); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-sm); overflow: hidden; }
.card-header { padding: 16px 24px; border-bottom: 1px solid var(--sv-border); }
.card-body { padding: 20px 24px; }

/* --- Stat Cards --- */
.stat-card { background: var(--sv-bg-white); border-radius: var(--sv-radius-lg); padding: 18px 20px; box-shadow: var(--sv-shadow-sm); }
.stat-label { font-size: 11px; color: var(--sv-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.stat-value { font-size: 28px; font-weight: 800; line-height: 1; }
.stat-sub { font-size: 12px; color: var(--sv-text-light); margin-top: 4px; }
.stat-icon { font-size: 24px; }

/* --- Tabs --- */
.sv-tabs { display: flex; border-bottom: 1px solid var(--sv-border); padding-left: 8px; }
.sv-tab { padding: 10px 20px; cursor: pointer; font-weight: 600; font-size: 13px; letter-spacing: .3px; border: none; background: none; border-bottom: 3px solid transparent; color: var(--sv-text-muted); transition: all .2s; font-family: var(--sv-font); }
.sv-tab.active { color: var(--sv-primary); border-bottom-color: var(--sv-primary); }
.sv-tab:hover { color: var(--sv-primary); }

/* --- Tables --- */
.sv-table { width: 100%; border-collapse: collapse; }
.sv-table th { padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 700; color: var(--sv-text-muted); text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid var(--sv-border); }
.sv-table td { padding: 12px; font-size: 13px; border-bottom: 1px solid var(--sv-border-light); }
.sv-table tr:hover td { background: var(--sv-bg-card); }

/* --- Badges --- */
.badge { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; letter-spacing: .3px; color: #fff; display: inline-block; }
.badge-success { background: var(--sv-success); }
.badge-warning { background: var(--sv-warning); }
.badge-danger { background: var(--sv-danger); }
.badge-info { background: var(--sv-info); }
.badge-purple { background: var(--sv-purple); }
.badge-gray { background: var(--sv-text-light); }
.sv-view-toggle{display:inline-flex;background:#f1f3f5;border-radius:20px;padding:3px;gap:2px}
.sv-vt-btn{padding:7px 18px;font-size:12px;font-weight:600;border:none;background:transparent;color:#6b7280;cursor:pointer;border-radius:17px;transition:all .2s ease;white-space:nowrap}
.sv-vt-btn:hover{color:#374151}
.sv-vt-active{background:#fff;color:#111;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.04)}
.op-wrap{overflow-x:auto;margin-top:8px;border:1px solid var(--sv-border);border-radius:10px;background:#fff}
.op-table{width:100%;border-collapse:collapse;min-width:700px;table-layout:fixed}
.op-th-doc{background:#f0f4ff;padding:10px 4px;font-size:13px;font-weight:700;text-align:center;color:var(--sv-primary);border-bottom:1px solid var(--sv-border);border-right:1px solid #e8ecf4}
.op-th-op{background:#f8f9fb;padding:8px 4px;font-size:10px;font-weight:700;text-align:center;color:var(--sv-text-muted);border-bottom:2px solid var(--sv-border);border-right:1px solid #e8ecf4;text-transform:uppercase;letter-spacing:.5px}
.op-th-time{background:#f8f9fb;padding:6px 8px;font-size:10px;font-weight:700;color:var(--sv-text-muted);text-align:right;border-right:2px solid var(--sv-border);border-bottom:2px solid var(--sv-border);width:70px;text-transform:uppercase;letter-spacing:.5px}
.op-td-time{padding:2px 8px;font-size:11px;font-weight:600;color:var(--sv-text-muted);text-align:right;border-right:2px solid var(--sv-border);background:#fafbfc;vertical-align:top;width:70px}
.op-td-cell{border-right:1px solid #f0f0f0;border-bottom:1px solid #f5f5f5;padding:1px 2px;vertical-align:top;min-height:26px;height:26px}
.op-row-hour td{border-top:1px solid #e0e3e8}
.op-appt{border-radius:5px;padding:4px 6px;cursor:pointer;font-size:11px;line-height:1.3;transition:transform .1s}
.op-appt:hover{transform:scale(1.03);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.op-c-conf{background:#dcfce7;border-left:3px solid #22c55e}
.op-c-pend{background:#fef9c3;border-left:3px solid #eab308}
.op-c-unset{background:#fef2f2;border-left:3px solid #dc2626}
.op-c-here{background:#ffff00;border-left:3px solid #ca8a04}
.op-c-called{background:#fef3c7;border-left:3px solid #d97706}
.op-c-done{background:#f1f5f9;border-left:3px solid #16a34a}
.op-appt-n{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-appt-t{color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}
/* --- Forms --- */
.form-label { font-size: 11px; font-weight: 600; color: var(--sv-text-secondary); text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 4px; }
.form-input { width: 100%; padding: 10px 14px; border: 2px solid var(--sv-border); border-radius: var(--sv-radius-md); font-size: 14px; font-family: var(--sv-font); outline: none; transition: border-color .2s; }
.form-input:focus { border-color: var(--sv-primary); }
.form-textarea { width: 100%; padding: 10px 14px; border: 2px solid var(--sv-border); border-radius: var(--sv-radius-md); font-size: 14px; font-family: var(--sv-font); resize: vertical; outline: none; transition: border-color .2s; }
.form-textarea:focus { border-color: var(--sv-primary); }
.form-group { margin-bottom: 20px; }

/* --- Appointment Cards --- */
.appt-card { background: var(--sv-bg-card); border-radius: var(--sv-radius-md); padding: 16px 20px; border: 1px solid var(--sv-border); display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; transition: all .2s; }
.appt-card:hover { border-color: var(--sv-primary-border); }

/* --- Messages --- */
.msg-container { display: flex; height: 540px; }
@media (min-height: 800px) { .msg-container { height: 620px; } }
@media (min-height: 1000px) { .msg-container { height: 720px; } }
.msg-list { width: 280px; border-right: 1px solid var(--sv-border); overflow-y: auto; }
.msg-item { padding: 14px 16px; cursor: pointer; border-bottom: 1px solid var(--sv-border-light); border-left: 3px solid transparent; transition: all .15s; }
.msg-item:hover, .msg-item.active { background: var(--sv-primary-bg); border-left-color: var(--sv-primary); }
.msg-detail { flex: 1; display: flex; flex-direction: column; }
.msg-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.msg-compose { padding: 10px 16px; border-top: 1px solid var(--sv-border); display: flex; flex-direction: column; gap: 6px; }
.msg-compose input { flex: 1; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: var(--sv-radius-md); font-size: 13px; outline: none; font-family: var(--sv-font); }
.bubble { max-width: 70%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
.bubble.out { background: #0A84FF; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble.in { background: #d1d5db; color: var(--sv-text); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble-time { font-size: 10px; margin-top: 4px; opacity: .7; }

/* --- Settings --- */
.settings-card { background: var(--sv-bg-card); border-radius: var(--sv-radius); padding: 12px 16px; border: 1px solid var(--sv-border); }
.conn-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sv-success); display: inline-block; margin-right: 8px; }
.conn-dot.offline { background: var(--sv-danger); }

/* --- Info Box --- */
.info-box { background: #f0fdf4; border-radius: var(--sv-radius-md); padding: 14px 20px; margin-bottom: 20px; border: 1px solid #bbf7d0; }
.info-box .info-title { font-size: 13px; font-weight: 600; color: #166534; margin-bottom: 4px; }
.info-box .info-text { font-size: 12px; color: #15803d; line-height: 1.6; }
.info-code { background: #dcfce7; padding: 1px 4px; border-radius: 3px; font-size: 11px; font-family: var(--sv-font-mono); }

/* --- Login Page --- */
.login-card { background: var(--sv-bg-white); border-radius: var(--sv-radius-xl); box-shadow: var(--sv-shadow-md); padding: 48px 40px; width: 100%; max-width: 420px; text-align: center; }
.login-title { font-size: 22px; font-weight: 700; color: var(--sv-dark); margin-bottom: 8px; }
.login-sub { font-size: 14px; color: var(--sv-text-muted); margin-bottom: 32px; }
.login-btn { width: 100%; padding: 14px; }
.error-msg { color: var(--sv-danger); font-size: 13px; margin-top: 16px; display: none; }

/* --- CTA Section --- */
.sv-cta { padding: 80px 40px; background: linear-gradient(135deg, #0e4a43 0%, #0e7c6b 60%, #10a37f 100%); text-align: center; }
.sv-cta h2 { color: #fff; margin-bottom: 16px; }
.sv-cta p { font-size: 17px; color: rgba(255,255,255,.8); margin-bottom: 32px; line-height: 1.7; }
.sv-cta .note { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 16px; }

/* --- Footer --- */
.sv-footer { padding: 40px; border-top: 1px solid var(--sv-border-medium); }
.sv-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.sv-footer-brand { font-size: 13px; color: var(--sv-text-faint); }
.sv-footer-links { display: flex; gap: 24px; }
.sv-footer-links a { font-size: 13px; color: var(--sv-text-faint); }
.sv-footer-links a:hover { color: var(--sv-primary); }

/* --- Comparison Table --- */
.comp-table { width: 100%; border-collapse: collapse; background: var(--sv-bg-white); border-radius: var(--sv-radius-xl); overflow: hidden; box-shadow: var(--sv-shadow-sm); }
.comp-table th { padding: 16px 20px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid var(--sv-border-medium); }
.comp-table th:first-child { text-align: left; color: var(--sv-text-muted); }
.comp-table th.highlight { background: var(--sv-primary-subtle); color: var(--sv-primary); }
.comp-table td { padding: 14px 20px; font-size: 14px; border-bottom: 1px solid #f3f3f3; color: var(--sv-text-secondary); }
.comp-table td:first-child { text-align: left; font-weight: 600; color: var(--sv-text); }
.comp-table td.highlight { background: var(--sv-primary-bg); }
.comp-table tr:last-child td { border-bottom: none; }

/* --- How It Works Steps --- */
.step-num { width: 48px; height: 48px; border-radius: 50%; background: var(--sv-primary); color: #fff; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }

/* --- Payment Page --- */
.pay-card { background: var(--sv-bg-white); border-radius: var(--sv-radius-xl); box-shadow: var(--sv-shadow-md); padding: 40px; width: 100%; max-width: 480px; }
.pay-amount { font-size: 48px; font-weight: 800; color: var(--sv-primary); }
.pay-practice { font-size: 16px; color: var(--sv-text-secondary); }
.pay-desc { font-size: 14px; color: var(--sv-text-muted); margin-top: 8px; }

/* --- Responsive --- */
@media (max-width: 768px) {
  .sv-nav { padding: 0 20px; }
  .sv-nav-links { display: none; }
  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .msg-container { flex-direction: column; height: auto; }
  .msg-list { width: 100%; max-height: 200px; }
  .sv-footer-inner { flex-direction: column; text-align: center; }
  .comp-table th, .comp-table td { padding: 10px 12px; font-size: 12px; }
  .stat-card { padding: 14px 16px; }
  .stat-value { font-size: 22px; }
}
.op-type-rct{border-right:3px solid #ef4444}
.op-type-retreat{border-right:3px solid #f97316}
.op-type-eval{border-right:3px solid #3b82f6}
.op-type-surg{border-right:3px solid #8b5cf6}
.op-type-followup{border-right:3px solid #06b6d4}
.op-type-complete{border-right:3px solid #10b981}
.op-appt[title]{position:relative}
.op-td-cell .op-appt+.op-appt{margin-top:2px}
.op-resch-sidebar{width:200px;min-width:200px;background:#fff;border:1px solid var(--sv-border);border-radius:10px;padding:12px;max-height:calc(100vh - 280px);overflow-y:auto}
.op-resch-title{font-size:13px;font-weight:700;color:#374151;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--sv-border)}
.op-resch-count{background:#fee2e2;color:#dc2626;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;margin-left:6px}
.op-appt-dur{color:#9ca3af;font-size:9px;margin-top:2px}
.op-appt-ph{color:#4b5563;font-size:10px}
.op-appt-ref{color:#7c3aed;font-size:10px;font-style:italic}
.op-appt-ins{color:#0369a1;font-size:9px;font-weight:600}
.op-block{background:#22c55e;border-radius:5px;padding:6px 8px;font-size:11px;line-height:1.3;color:#fff;height:100%}
.op-block-name{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.5px}

/* ── Mobile Responsive + PWA ── */
.mobile-header{display:none;align-items:center;justify-content:space-between;padding:10px 16px;background:#fff;border-bottom:1px solid #e2e8f0;position:fixed;top:0;left:0;right:0;z-index:60;height:56px;flex-direction:row}
.mobile-menu-btn{background:none;border:none;font-size:28px;cursor:pointer;padding:8px 12px;color:#334155;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.mobile-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:70}
.mobile-overlay.active{display:block}
.mobile-drawer{position:fixed;top:0;right:-280px;width:280px;height:100vh;background:#fff;z-index:80;transition:right 0.25s ease;box-shadow:-2px 0 12px rgba(0,0,0,0.15);overflow-y:auto;padding:16px 0}
.mobile-drawer.active{right:0}
.mobile-drawer-header{display:flex;align-items:center;gap:12px;padding:12px 20px 20px;border-bottom:1px solid #e2e8f0}
.mobile-drawer-header img{width:32px;height:32px;border-radius:8px}
.mobile-drawer-header span{font-size:16px;font-weight:700;color:#0e7c6b}
.mobile-nav-item{display:flex;align-items:center;gap:12px;padding:14px 20px;font-size:14px;font-weight:500;color:#334155;cursor:pointer;border:none;background:none;width:100%;text-align:left}
.mobile-nav-item:hover{background:#f0fdf4;color:#0e7c6b}
.mobile-nav-divider{height:1px;background:#e2e8f0;margin:8px 20px}
@media(max-width:768px){
  .mobile-header{display:flex!important}
  .t-topbar{display:none}
  .t-main{padding-top:56px}
  .msg-container{flex-direction:column!important;height:auto!important}
  .msg-list{width:100%!important;max-width:100%!important;max-height:none!important;border-right:none!important}
  .msg-detail{display:none!important}
  .msg-container.mobile-convo-open .msg-list{display:none!important}
  .msg-container.mobile-convo-open .msg-detail{display:flex!important}
  .msg-detail .msg-header{padding-right:8px}
  .msg-compose{padding:8px!important}
  .msg-compose textarea{font-size:16px!important}
  .patient-context{display:none}
  .msg-context{display:none!important}
  .rev-card{padding:14px!important}
  .stats{display:none!important}
  .t-topbar{display:none!important}
  .mobile-back-btn{display:inline!important}
  .t-sidebar{display:none!important}
  .t-main{margin-left:0!important;padding-top:56px!important}
  .t-content{padding:12px!important}
  .footer{padding:8px 12px!important}
}

/* ── Patient Context Popover ── */
.ctx-popover-wrap{position:relative;display:inline-block}
.ctx-popover-name{cursor:pointer;border-bottom:1px dashed #94a3b8}
.ctx-popover-name:hover{color:#0e7c6b}
.ctx-popover{display:none;position:absolute;top:100%;left:0;z-index:200;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,0.12);width:280px;max-height:70vh;overflow-y:auto}
.ctx-popover.active{display:block}
@media(max-width:768px){.ctx-popover{position:fixed!important;top:auto!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;max-height:60vh!important;border-radius:16px 16px 0 0!important;box-shadow:0 -8px 30px rgba(0,0,0,0.2)!important;z-index:300!important}}
@media(min-width:769px){.ctx-popover-wrap:hover .ctx-popover{display:block}}