/* ══════════════════════════════════════════
   FEATURE MOCKUPS — Realistic UI Previews
   v0.1.0  ClaraFirst
   ══════════════════════════════════════════ */

/* ── Shared mockup shell ── */
.fm-shell{width:100%;max-width:340px;background:var(--white);border-radius:var(--rl);box-shadow:var(--shlg);overflow:hidden;font-size:13px;color:var(--heading)}
.fm-bar{padding:10px 14px;display:flex;align-items:center;gap:7px;background:var(--bg-soft);border-bottom:1px solid var(--border)}
.fm-dot{width:7px;height:7px;border-radius:50%}.fm-dot.r{background:#ff5f57}.fm-dot.y{background:#ffbd2e}.fm-dot.g{background:#28c840}
.fm-bar-brand{margin-left:auto;display:flex;align-items:center;gap:5px;font-family:'Newsreader',Georgia,serif;font-size:.7rem;font-weight:700;color:var(--heading);letter-spacing:-.01em}
.fm-bar-brand .lc{color:var(--primary)}
.fm-bar-logo{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.fm-body{padding:16px}

/* Shared utility */
.fm-badge{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:10px;line-height:1}
.fm-badge-green{color:#0a8a5e;background:rgba(0,212,170,.12)}
.fm-badge-yellow{color:#946800;background:rgba(255,189,46,.15)}
.fm-badge-red{color:#c0392b;background:rgba(255,59,48,.12)}
.fm-badge-purple{color:var(--primary);background:rgba(99,91,255,.1)}
.fm-divider{height:1px;background:var(--border);margin:10px 0}
.fm-label{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fm-row{display:flex;align-items:center;gap:8px}
.fm-icon-sm{width:16px;height:16px;flex-shrink:0;color:var(--muted)}

/* ═══════════════════════════════════════
   1. SYMPTOM CHECKER — Chat + Triage Card
   ═══════════════════════════════════════ */
.fm-chat{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.fm-msg{padding:8px 12px;border-radius:12px;font-size:.75rem;line-height:1.5;max-width:88%;animation:fmFadeUp .5s ease both}
.fm-msg-clara{background:var(--bg-soft);color:var(--body);border-bottom-left-radius:4px;align-self:flex-start}
.fm-msg-user{background:var(--primary);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.fm-msg:nth-child(2){animation-delay:.15s}
.fm-msg:nth-child(3){animation-delay:.3s}
.fm-msg:nth-child(4){animation-delay:.45s}

.fm-triage{border:1px solid rgba(0,212,170,.2);border-radius:var(--r);overflow:hidden;animation:fmFadeUp .5s ease .6s both}
.fm-triage-header{background:rgba(0,212,170,.06);padding:8px 12px;display:flex;align-items:center;justify-content:space-between}
.fm-triage-header span:first-child{font-weight:700;font-size:.7rem;color:var(--heading)}
.fm-triage-body{padding:10px 12px}
.fm-triage-item{display:flex;align-items:center;justify-content:space-between;padding:4px 0;font-size:.72rem;color:var(--body)}
.fm-triage-item+.fm-triage-item{border-top:1px solid var(--border)}
.fm-confidence{font-family:'JetBrains Mono',monospace;font-size:.65rem;font-weight:600}
.fm-conf-high{color:var(--teal)}.fm-conf-med{color:var(--orange)}.fm-conf-low{color:var(--muted)}

.fm-triage-action{margin-top:10px;padding:8px 12px;border-radius:8px;background:rgba(0,212,170,.08);border:1px solid rgba(0,212,170,.15);display:flex;align-items:center;gap:8px}
.fm-triage-action-icon{width:20px;height:20px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fm-triage-action-icon svg{width:11px;height:11px}
.fm-triage-action-text{font-size:.7rem;color:var(--heading);line-height:1.4}
.fm-triage-action-text strong{display:block;font-size:.72rem}

/* ═══════════════════════════════════════
   2. LAB ANALYSIS — Lab Report Table
   ═══════════════════════════════════════ */
.fm-lab-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.fm-lab-title{font-weight:700;font-size:.78rem;color:var(--heading)}
.fm-lab-date{font-size:.62rem;color:var(--muted);font-family:'JetBrains Mono',monospace}

.fm-lab-table{width:100%;border-collapse:collapse}
.fm-lab-table th{font-size:.58rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left;padding:4px 0 6px;border-bottom:1px solid var(--border)}
.fm-lab-table th:last-child{text-align:right}
.fm-lab-table td{font-size:.72rem;padding:7px 0;border-bottom:1px solid rgba(230,235,241,.5);color:var(--body);vertical-align:middle}
.fm-lab-table td:last-child{text-align:right}
.fm-lab-val{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.7rem}
.fm-lab-val.normal{color:var(--teal)}.fm-lab-val.high{color:#e74c3c}.fm-lab-val.low{color:var(--orange)}

.fm-lab-bar{width:60px;height:4px;background:var(--bg-muted);border-radius:2px;position:relative;display:inline-block;vertical-align:middle;margin-left:6px}
.fm-lab-bar-fill{position:absolute;top:0;left:0;height:100%;border-radius:2px}
.fm-lab-bar-fill.normal{width:55%;background:var(--teal)}.fm-lab-bar-fill.high{width:85%;background:#e74c3c}.fm-lab-bar-fill.low{width:25%;background:var(--orange)}

.fm-lab-summary{margin-top:12px;padding:10px 12px;border-radius:8px;background:rgba(255,122,69,.06);border:1px solid rgba(255,122,69,.12)}
.fm-lab-summary-title{font-size:.68rem;font-weight:700;color:var(--heading);margin-bottom:4px;display:flex;align-items:center;gap:5px}
.fm-lab-summary-title svg{width:12px;height:12px;color:var(--orange)}
.fm-lab-summary-text{font-size:.68rem;color:var(--body);line-height:1.5}

/* ═══════════════════════════════════════
   3. CARE NAVIGATION — Visit Plan Card
   ═══════════════════════════════════════ */
.fm-plan{border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.fm-plan-top{padding:12px;background:rgba(99,91,255,.04);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.fm-plan-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--teal));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fm-plan-avatar svg{width:18px;height:18px;color:#fff}
.fm-plan-info{flex:1}
.fm-plan-spec{font-weight:700;font-size:.78rem;color:var(--heading)}
.fm-plan-reason{font-size:.65rem;color:var(--muted);margin-top:1px}

.fm-plan-body{padding:12px}
.fm-plan-section{margin-bottom:12px}
.fm-plan-section:last-child{margin-bottom:0}

.fm-checklist{list-style:none;display:flex;flex-direction:column;gap:5px}
.fm-checklist li{display:flex;align-items:flex-start;gap:6px;font-size:.7rem;color:var(--body);line-height:1.4}
.fm-check-icon{width:14px;height:14px;border-radius:50%;background:rgba(0,212,170,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.fm-check-icon svg{width:8px;height:8px;color:var(--teal)}

.fm-plan-urgency{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:rgba(255,189,46,.08);border:1px solid rgba(255,189,46,.15)}
.fm-plan-urgency-dot{width:8px;height:8px;border-radius:50%;background:#f5a623;flex-shrink:0;animation:fmPulse 2s ease infinite}
.fm-plan-urgency-text{font-size:.68rem;color:var(--heading);line-height:1.4}
.fm-plan-urgency-text strong{color:#946800}

/* ═══════════════════════════════════════
   4. SECOND OPINION — Treatment Compare
   ═══════════════════════════════════════ */
.fm-compare-title{font-weight:700;font-size:.75rem;color:var(--heading);margin-bottom:10px;text-align:center}
.fm-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.fm-compare-card{border:1px solid var(--border);border-radius:var(--r);padding:10px;position:relative;transition:var(--ease)}
.fm-compare-card.recommended{border-color:rgba(0,212,170,.3);background:rgba(0,212,170,.02)}
.fm-compare-card.recommended::after{content:'Recommended';position:absolute;top:-1px;right:8px;font-size:.5rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--teal);color:#fff;padding:2px 6px;border-radius:0 0 4px 4px}
.fm-compare-name{font-weight:700;font-size:.72rem;color:var(--heading);margin-bottom:8px}
.fm-compare-stat{display:flex;align-items:center;justify-content:space-between;padding:3px 0;font-size:.64rem;color:var(--body)}
.fm-compare-stat+.fm-compare-stat{border-top:1px solid rgba(230,235,241,.5)}
.fm-compare-stat-val{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.62rem}

.fm-compare-meter{width:100%;height:3px;background:var(--bg-muted);border-radius:2px;margin-top:8px;overflow:hidden}
.fm-compare-meter-fill{height:100%;border-radius:2px;transition:width .8s ease}

.fm-questions{border:1px solid var(--border);border-radius:var(--r);padding:10px}
.fm-questions-title{font-size:.65rem;font-weight:700;color:var(--heading);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.fm-questions-title svg{width:11px;height:11px;color:var(--primary)}
.fm-questions-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.fm-questions-list li{font-size:.66rem;color:var(--body);line-height:1.4;padding-left:10px;position:relative}
.fm-questions-list li::before{content:'→';position:absolute;left:0;color:var(--primary);font-size:.6rem}

/* ═══════════════════════════════════════
   5. WELLNESS PLANNING — Dashboard
   ═══════════════════════════════════════ */
.fm-wellness-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.fm-score-ring{position:relative;width:64px;height:64px;flex-shrink:0}
.fm-score-ring svg{width:64px;height:64px;transform:rotate(-90deg)}
.fm-score-ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.fm-score-ring .ring-bg{stroke:var(--bg-muted)}
.fm-score-ring .ring-fill{stroke:var(--teal);stroke-dasharray:163;stroke-dashoffset:28;transition:stroke-dashoffset 1s ease}
.fm-score-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fm-score-num{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1rem;color:var(--heading);line-height:1}
.fm-score-label{font-size:.5rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.fm-wellness-greeting{flex:1}
.fm-wellness-greeting strong{display:block;font-size:.78rem;color:var(--heading);margin-bottom:2px}
.fm-wellness-greeting span{font-size:.66rem;color:var(--muted);line-height:1.4}

.fm-wellness-metrics{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.fm-metric{display:flex;align-items:center;gap:8px}
.fm-metric-icon{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fm-metric-icon svg{width:12px;height:12px}
.fm-metric-icon.sleep{background:rgba(99,91,255,.1);color:var(--primary)}
.fm-metric-icon.nutrition{background:rgba(0,212,170,.1);color:var(--teal)}
.fm-metric-icon.exercise{background:rgba(255,122,69,.1);color:var(--orange)}
.fm-metric-info{flex:1}
.fm-metric-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.fm-metric-name{font-size:.66rem;font-weight:600;color:var(--heading)}
.fm-metric-val{font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:600;color:var(--muted)}
.fm-metric-bar{width:100%;height:4px;background:var(--bg-muted);border-radius:2px;overflow:hidden}
.fm-metric-bar-fill{height:100%;border-radius:2px;transition:width .8s ease}
.fm-metric-bar-fill.sleep{background:var(--primary);width:78%}
.fm-metric-bar-fill.nutrition{background:var(--teal);width:65%}
.fm-metric-bar-fill.exercise{background:var(--orange);width:42%}

.fm-tip{padding:10px 12px;border-radius:8px;background:rgba(99,91,255,.04);border:1px solid rgba(99,91,255,.1)}
.fm-tip-title{font-size:.65rem;font-weight:700;color:var(--primary);margin-bottom:4px;display:flex;align-items:center;gap:5px}
.fm-tip-title svg{width:11px;height:11px}
.fm-tip-text{font-size:.66rem;color:var(--body);line-height:1.5}

/* ═══════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════ */
@keyframes fmFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fmPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media(max-width:1080px){
  .fm-shell{max-width:360px;margin:0 auto}
}
@media(max-width:480px){
  .fm-shell{max-width:100%}
  .fm-compare-grid{grid-template-columns:1fr}
}