/* responsive.css — global responsive baseline + consult-room mobile rebuild.
   Loaded LAST so it can override page-local <style> blocks and rules in
   app.css / styles.css. Pure additive; remove this file and the existing
   desktop layout still works.

   Breakpoints:
     - phone    : up to 640px
     - tablet   : 641 - 1024px
     - laptop   : 1025px+
*/

/* ============== 1.  Fluid typography ============== */
:root{
  /* tighter base on tiny screens, generous on big screens */
  --rs-font-base: clamp(14.5px, 0.55vw + 12px, 16px);
  --rs-h1: clamp(1.35rem, 1.2vw + 1rem, 2rem);
  --rs-h2: clamp(1.15rem, 0.7vw + 0.95rem, 1.5rem);
  --rs-h3: clamp(1rem, 0.4vw + 0.9rem, 1.15rem);
}
html{font-size: var(--rs-font-base)}
body{font-size: var(--rs-font-base)}
h1{font-size: var(--rs-h1) !important; line-height: 1.2}
h2{font-size: var(--rs-h2) !important; line-height: 1.3}
h3{font-size: var(--rs-h3) !important; line-height: 1.4}

/* ============== 2.  Universal box & overflow safety ============== */
*,*::before,*::after{box-sizing: border-box}
html,body{overflow-x: hidden}
img,video,iframe,canvas{max-width: 100%; height: auto}
pre,code{white-space: pre-wrap; word-break: break-word}

/* ============== 3.  Touch tap targets (≥44px on coarse pointers) ============== */
@media (hover: none) and (pointer: coarse){
  .btn{min-height: 44px}
  .btn-sm{min-height: 40px}
  .ctrl-btn{min-height: 44px}
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea{
    min-height: 44px;
    font-size: 16px;        /* prevents iOS Safari zoom-on-focus */
  }
  textarea{min-height: 88px}
  .app-nav a{min-height: 44px; display: flex; align-items: center}
  .user-pop-item{min-height: 44px}
  .nav-toggle, .bell-btn, .user-chip{min-height: 44px; min-width: 44px}
  /* Larger tap area for icon-only buttons */
  button[aria-label]:not(.btn){min-height: 44px; min-width: 44px}
}

/* ============== 4.  App shell on small screens ============== */
@media (max-width: 720px){
  .app-main{padding: 16px 12px}
  .app-header{padding: 0 12px; gap: 8px}
  .page-title{flex-direction: column; align-items: flex-start; gap: 8px}
  .page-title .actions, .page-title > div:last-child{width: 100%}
  .card{padding: 16px}
  .card-tight{padding: 12px}
  .card-actions{gap: 6px}
  .card-actions .btn{flex: 1 1 auto; min-width: 0; justify-content: center}
}
@media (max-width: 480px){
  .app-main{padding: 12px 10px}
  .card{padding: 14px; border-radius: 12px}
  .grid{gap: 10px}
}

/* ============== 5.  Grid auto-collapse ============== */
@media (max-width: 720px){
  .grid-3, .grid-4{grid-template-columns: repeat(auto-fit,minmax(160px,1fr))}
}
@media (max-width: 480px){
  .grid-3, .grid-4{grid-template-columns: 1fr}
}

/* ============== 6.  Forms ============== */
@media (max-width: 640px){
  /* Common multi-column form layouts collapse to single column */
  .form-row, .form-grid, .form-grid-2, .form-grid-3,
  form .row, form .grid, .two-col, .three-col,
  [class*="form-"][class*="-grid"]{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .input-group{width: 100%}
  /* Auth split-screen pages stack on mobile */
  .auth-split, .split-hero{
    grid-template-columns: 1fr !important;
  }
  .auth-side, .hero-side{display: none}     /* hide marketing column on phones */
}

/* ============== 7.  Tables → horizontally scrollable on mobile ============== */
@media (max-width: 720px){
  /* Wrap any wide table in .table-wrap to enable smooth horizontal scroll.
     Pages can opt-in by adding class="table-wrap" around their <table>. */
  .table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }
  .table-wrap table{min-width: 540px}
  /* For tables marked with class="table-stack", switch to card rows */
  table.table-stack thead{display: none}
  table.table-stack, table.table-stack tbody,
  table.table-stack tr, table.table-stack td{display: block; width: 100%}
  table.table-stack tr{
    background: var(--vs-surface);
    border: 1px solid var(--vs-line);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 10px 14px;
  }
  table.table-stack td{
    border: none; padding: 6px 0;
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  }
  table.table-stack td::before{
    content: attr(data-label);
    font: 600 12px var(--vs-font);
    color: var(--vs-muted);
    text-transform: uppercase; letter-spacing: .4px;
    flex-shrink: 0;
  }
}

/* ============== 8.  Modals / popovers ============== */
@media (max-width: 640px){
  /* Backdrop pins the modal to the bottom of the SCREEN — not the layout
     viewport — so iOS Safari's bottom toolbar can't eclipse the footer. */
  .modal-back{
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal, .dialog, .sheet,
  [role="dialog"]{
    max-width: 100vw !important;
    width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    /* svh/dvh exclude iOS Safari's collapsing browser chrome.
       vh is the fallback for older browsers that don't support them. */
    max-height: 92vh;
    max-height: 92svh;
    max-height: 92dvh;
    /* respect the bottom notch / home-indicator inset */
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Booking modal — has its own fixed-height grid (header / scroll-body / sticky footer).
     Make sure the GRID anchors to dvh so the footer with the Confirm button is always
     visible on iOS, where 92vh extends behind the bottom URL bar. */
  .book-modal{
    height: 92vh !important;
    height: 92svh !important;
    height: 92dvh !important;
    max-height: 92dvh !important;
  }
  .book-modal #book-content{
    /* fill the actual modal height — works with both vh and dvh */
    height: 100% !important;
  }
  /* Ensure the sticky footer is above the safe-area inset on phones with a
     home-indicator (iPhone X and later). */
  .book-footer{
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
  .notif-pop, .user-pop{
    position: fixed !important;
    top: 64px !important;
    left: 12px !important; right: 12px !important;
    width: auto !important; max-width: none !important;
  }
}

/* ============== 9.  Hide / stack helpers ============== */
@media (max-width: 640px){
  .hide-on-mobile{display: none !important}
  .stack-on-mobile{flex-direction: column !important; align-items: stretch !important}
  .stack-on-mobile > *{width: 100%}
}
@media (min-width: 641px){
  .show-on-mobile{display: none !important}
}

/* ============== 10.  CONSULT ROOM — mobile rebuild ============== */
@media (max-width: 800px){
  /* Single-column stack: video first, then a tab bar, then the active panel */
  .consult-room{
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .video-stage{
    border-radius: 12px;
    margin-bottom: 10px;
    /* Cap video height so the tab bar + panel are visible without scrolling */
    max-height: 60vh;
  }
  .video-stage .video-main{
    min-height: 220px;
    aspect-ratio: 4/3;
  }
  .video-stage video.local-video{
    width: 84px; height: 60px;
    right: 8px; bottom: 8px;
    border-width: 1.5px;
  }
  .video-stage .controls{
    padding: 8px;
    gap: 6px;
    justify-content: center;
  }
  .video-stage .controls .ctrl-btn{padding: 10px 14px}
  .video-stage .controls .ctrl-btn .ctrl-lbl{display: none}

  /* Mobile tab bar (created by /js/consult-mobile.js) */
  .consult-mobile-tabs{
    display: flex;
    background: white;
    border: 1px solid var(--vs-line);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 10px;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-shadow: var(--vs-shadow-1);
  }
  .consult-mobile-tabs::-webkit-scrollbar{display: none}
  .consult-mobile-tabs button{
    flex: 1 0 auto;
    min-width: 80px;
    padding: 10px 14px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--vs-muted);
    font: 600 13px var(--vs-font);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
  }
  .consult-mobile-tabs button:hover{color: var(--vs-primary)}
  .consult-mobile-tabs button.active{
    background: var(--vs-primary);
    color: white;
  }
  /* Hide all side panels except the one mapped to the active tab */
  .consult-side{gap: 0}
  /* Only hide panels when the tab bar is in play (consult-mobile.js
     adds .is-tabbed to .consult-side when it builds the bar). */
  .consult-side.is-tabbed .panel{display: none}
  .consult-side.is-tabbed .panel.is-active-tab{display: flex}

  /* Make the chat input always reachable above the on-screen keyboard */
  .panel.is-active-tab .chat-input,
  .panel.is-active-tab .panel-foot{
    position: sticky;
    bottom: 0;
    background: white;
    z-index: 1;
  }

  /* Doctor's prescription panel needs more height on mobile */
  #rx-editor.panel-body{max-height: none}
}
@media (min-width: 801px){
  .consult-mobile-tabs{display: none !important}
  /* On laptop, never let the JS-applied class hide a panel */
  .consult-side .panel{display: flex}
}

/* Doctor consult page has multiple .card sections in the LEFT column
   (context, scan, transcript, chat) that are not part of .consult-side.
   On phone we still want them readable — the global stacking handles it,
   but the per-page <style> hard-codes a 2-column .consult-room which we
   override above. Also tighten the stage banner so it doesn't overflow. */
@media (max-width: 800px){
  .stage-banner{
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px 10px;
    font-size: 12px;
  }
  .stage-banner .stage-arrow{display: none}
  .spread{flex-wrap: wrap; gap: 10px}
  .spread > h1{flex: 1 1 100%; font-size: clamp(1.15rem, 4vw, 1.5rem)}

  /* Live transcript inside the doctor's chat card — keep it scrollable
     but cap height so the page doesn't run on forever */
  .transcript-list{max-height: 180px}

  /* Each "card" stacked under the video on the doctor side gets a thinner
     top margin so the page isn't too long on phones */
  .consult-room .card{margin-top: 10px !important; padding: 14px}
  .consult-room .card h3{font-size: 14px; margin-bottom: 8px}
}

/* Sticky video stage on mobile — keeps the call visible while the user
   scrolls through panels / chat / prescription below. We give it a soft
   shadow so the stack underneath doesn't visually run into it. */
@media (max-width: 800px) and (orientation: portrait){
  .consult-room > div:first-child{
    /* The doctor side wraps video + cards in this <div>; the patient side
       has the .video-stage as a direct child. Both selectors covered. */
    display: flex; flex-direction: column;
  }
  .consult-room .video-stage{
    position: sticky;
    top: 0;
    z-index: 4;
    box-shadow: 0 6px 20px rgba(6, 24, 42, .25);
  }
}

/* ============== 11.  Landing & auth pages ============== */
@media (max-width: 640px){
  /* Landing hero typography */
  .top, header.top{padding: 14px 16px !important; flex-direction: column; gap: 10px; align-items: flex-start !important}
  .top nav{flex-wrap: wrap}
  /* Generic hero classes used in index.html */
  .hero{padding: 28px 18px !important}
  .hero h1, .hero .h1{font-size: clamp(1.5rem, 5vw, 2.2rem) !important}
  .hero p, .hero .lead{font-size: 0.95rem !important}
  /* Landing page CTAs become full-width */
  .cta-row{flex-direction: column; align-items: stretch}
  .cta-row .btn{width: 100%; justify-content: center}
}

/* ============== 12.  Scan page (the rPPG capture screen) ============== */
@media (max-width: 720px){
  /* Keep the camera fully visible; HUD and controls stack below */
  #video, video#video{width: 100% !important; height: auto !important; max-height: 60vh}
  .hud, .scan-hud{flex-direction: column; gap: 8px; padding: 10px}
  .pulse-hud, #pulse-canvas{width: 100% !important}
}

/* ============== 13.  Print ============== */
@media print{
  .app-header, .app-footer, .consult-mobile-tabs, .nav-toggle{display: none !important}
  .card, .panel{box-shadow: none; border-color: #ddd}
}

/* ============== 14.  Vital scan in-call cues ============== */
/* Doctor's "patient is scanning" card — replaces the old single-line alert.
   Big enough that the doctor cannot miss it even if they were typing
   in the prescription editor. */
.doc-scan-card{
  position: relative;
  background: linear-gradient(135deg, #06203a 0%, #0d3b66 60%, #144d80 100%);
  color: white;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 12px 32px rgba(13, 59, 102, .25);
  overflow: hidden;
}
.doc-scan-card::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 24px 24px; opacity: .4; pointer-events: none;
}
.doc-scan-card > *{position: relative; z-index: 1}
.doc-scan-head{
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.doc-scan-pulse{
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--vs-accent-2);
  box-shadow: 0 0 0 0 rgba(98, 217, 200, .65);
  animation: doc-scan-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes doc-scan-pulse{
  0%, 100% { box-shadow: 0 0 0 0    rgba(98, 217, 200, .65); transform: scale(1) }
  50%      { box-shadow: 0 0 0 12px rgba(98, 217, 200, 0);   transform: scale(1.2) }
}
.doc-scan-title{
  font-weight: 800; font-size: 15px;
  color: white; letter-spacing: -.01em; line-height: 1.25;
}
.doc-scan-sub{
  font-size: 12.5px; color: rgba(255,255,255,.78); margin-top: 2px;
  line-height: 1.4;
}
.doc-scan-bar{
  height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
}
.doc-scan-fill{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--vs-accent-2), var(--vs-accent-3));
  border-radius: 999px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 12px rgba(98, 217, 200, .4);
}
.doc-scan-meta{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px;
  font: 600 12px var(--vs-font-data);
  color: rgba(255, 255, 255, .85);
}
.doc-scan-meta #doc-scan-pct{
  font-size: 16px; font-weight: 800; color: var(--vs-accent-3);
  font-variant-numeric: tabular-nums;
}

/* Patient overlay polish — bigger, friendlier copy + cleaner ring around the
   live face video so the patient knows where to look. The base layout
   .video-stage .scan-overlay is in app.css; we just amplify it. */
.video-stage .scan-overlay{
  background: radial-gradient(ellipse at center, rgba(13,59,102,.96), rgba(6,24,42,.99)) !important;
}
.video-stage .scan-overlay > div:first-child{
  /* "Vital Scan in progress" headline */
  font-size: 22px !important;
  letter-spacing: -.01em;
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 10px;
}
.video-stage .scan-overlay > div:first-child::before{
  content: "";
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--vs-accent-2);
  box-shadow: 0 0 0 0 rgba(98, 217, 200, .65);
  animation: doc-scan-pulse 1.4s ease-in-out infinite;
  display: inline-block;
}
.video-stage .scan-overlay p{
  max-width: 380px;
  font-size: 13.5px; line-height: 1.5;
}
.video-stage .scan-overlay video{
  box-shadow: 0 0 0 6px rgba(98, 217, 200, .18), 0 12px 32px rgba(0,0,0,.45);
}
.video-stage .scan-overlay .scan-status{
  font-weight: 700;
  letter-spacing: .2px;
  color: white !important;
}
@media (max-width: 640px){
  .video-stage .scan-overlay video{
    width: 180px !important; height: 240px !important;
  }
  .video-stage .scan-overlay > div:first-child{font-size: 18px !important}
  .video-stage .scan-overlay p{font-size: 12.5px !important}
}

/* ============== 15.  Quick chat (floating fallback) ============== */
#vs-quickchat{
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 9000;
  font-family: var(--vs-font);
  /* respect iOS home indicator */
  padding-bottom: env(safe-area-inset-bottom);
}
.vs-qc-fab{
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--vs-accent), #128a99);
  color: white; border: 0;
  box-shadow: 0 10px 28px rgba(13, 59, 102, .35),
              0 0 0 4px rgba(98, 217, 200, .14);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
}
.vs-qc-fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(13, 59, 102, .42),
              0 0 0 6px rgba(98, 217, 200, .18);
}
.vs-qc-fab:active{transform: translateY(0)}
.vs-qc-pulse{animation: vs-qc-shake .9s ease-in-out 1}
@keyframes vs-qc-shake{
  0%,100%{transform: translateY(0) rotate(0deg)}
  25%   {transform: translateY(-3px) rotate(-6deg)}
  60%   {transform: translateY(-1px) rotate(6deg)}
}
.vs-qc-badge{
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--vs-warn);
  color: white;
  font: 700 11px/22px var(--vs-font-data);
  text-align: center;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(208,74,46,.4);
}
.vs-qc-panel{
  position: absolute;
  right: 0; bottom: 72px;
  width: min(360px, calc(100vw - 32px));
  height: min(480px, calc(100vh - 120px));
  background: white;
  border: 1px solid var(--vs-line);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(13, 59, 102, .22),
              0 4px 16px rgba(13, 59, 102, .08);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(12px) scale(.96);
  opacity: 0;
  transform-origin: bottom right;
  transition: transform .2s cubic-bezier(.34,1.3,.64,1), opacity .15s ease;
}
.vs-qc-panel.vs-qc-open{transform: translateY(0) scale(1); opacity: 1}
.vs-qc-head{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #06203a 0%, #0d3b66 60%, #144d80 100%);
  color: white;
}
.vs-qc-title{display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0}
.vs-qc-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--vs-accent-2);
  box-shadow: 0 0 0 0 rgba(98, 217, 200, .6);
  animation: doc-scan-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.vs-qc-name{font: 700 14px/1.2 var(--vs-font); letter-spacing: -.01em}
.vs-qc-sub{font: 500 11px/1.3 var(--vs-font); color: rgba(255,255,255,.7); margin-top: 2px}
.vs-qc-close{
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: white; border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s ease;
}
.vs-qc-close:hover{background: rgba(255,255,255,.22)}
.vs-qc-body{
  flex: 1; min-height: 0;
  padding: 14px 14px 6px;
  background: var(--vs-bg);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.vs-qc-body::-webkit-scrollbar{width: 6px}
.vs-qc-body::-webkit-scrollbar-thumb{background: var(--vs-line-2); border-radius: 3px}
.vs-qc-empty{
  text-align: center;
  color: var(--vs-muted);
  font-size: 12.5px; line-height: 1.5;
  padding: 30px 16px;
}
/* Inherit chat-msg styles from app.css — they look fine in our narrower box,
   but cap width so they don't overflow the panel. */
.vs-qc-body .chat-msg{max-width: 88%; font-size: 13px}
.vs-qc-input{
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--vs-surface-2);
  border-top: 1px solid var(--vs-line);
}
.vs-qc-input input{
  flex: 1; min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--vs-line); border-radius: 999px;
  background: white;
  font: 500 13.5px/1.4 var(--vs-font);
  color: var(--vs-ink);
}
.vs-qc-input input:focus{
  outline: 0;
  border-color: var(--vs-accent);
  box-shadow: 0 0 0 4px rgba(155,231,231,.45);
}
.vs-qc-send{
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--vs-accent); color: white; border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s ease, transform .12s ease;
}
.vs-qc-send:hover{background: var(--vs-primary-3); transform: translateY(-1px)}
.vs-qc-send:disabled{opacity: .55; cursor: not-allowed}

/* Mobile — slide up from the bottom edge as a sheet, full width */
@media (max-width: 640px){
  #vs-quickchat{right: 14px; bottom: 14px}
  .vs-qc-fab{width: 52px; height: 52px}
  .vs-qc-panel{
    position: fixed;
    right: 0; left: 0; bottom: 0;
    width: 100vw;
    height: 78vh; height: 78dvh;
    border-radius: 18px 18px 0 0;
    transform: translateY(20px);
    transform-origin: bottom center;
  }
  .vs-qc-panel.vs-qc-open{transform: translateY(0)}
}

/* Hide on print */
@media print{ #vs-quickchat{display: none !important} }

/* ============== 16.  Diet plan UI (prescription editor) ============== */
#rx-editor .rx-section-diet{padding-bottom: 18px}
#rx-editor .diet-toolbar{
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr auto;
  gap: 12px;
  align-items: end;
  background: linear-gradient(135deg, #f0fbfd, #e6f4f7);
  border: 1px solid #b3dde6;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
#rx-editor .diet-toolbar .diet-field{display: flex; flex-direction: column; gap: 6px}
#rx-editor .diet-toolbar label{
  font: 700 10.5px var(--vs-font);
  color: var(--vs-muted);
  letter-spacing: .55px; text-transform: uppercase;
  margin: 0;
}
#rx-editor .diet-toolbar select,
#rx-editor .diet-toolbar input{
  height: 38px; min-height: 38px;
  margin: 0;
}
#rx-editor .diet-veg-group{display: flex; gap: 8px}
#rx-editor .diet-veg{
  flex: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  background: white;
  border: 1px solid var(--vs-line);
  border-radius: 8px;
  padding: 8px 10px;
  font: 600 12.5px var(--vs-font);
  color: var(--vs-muted);
  transition: all .15s ease;
}
#rx-editor .diet-veg input{position: absolute; opacity: 0; pointer-events: none}
#rx-editor .diet-veg span{display: flex; align-items: center; gap: 6px}
#rx-editor .diet-veg .dot{
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid currentColor; background: white;
  flex-shrink: 0;
}
#rx-editor .diet-veg .dot-veg{color: var(--vs-ok)}
#rx-editor .diet-veg .dot-nv{color: var(--vs-warn)}
#rx-editor .diet-veg.on{
  border-color: var(--vs-accent);
  color: var(--vs-primary);
  background: #f7feff;
  box-shadow: 0 0 0 3px rgba(155,231,231,.45);
}
#rx-editor .diet-veg.on .dot{background: currentColor}
#rx-editor #diet-ai-gen{
  align-self: end; height: 38px;
  white-space: nowrap;
}
#rx-editor #diet-ai-gen .icon{width: 14px; height: 14px}

#rx-editor .diet-summary{
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--vs-surface-2);
  border-left: 3px solid var(--vs-accent);
  border-radius: 6px;
  font: italic 12.5px/1.5 var(--vs-font);
  color: var(--vs-inkSoft, var(--vs-ink-2));
}

#rx-editor .diet-meal{
  background: white;
  border: 1px solid var(--vs-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
#rx-editor .diet-meal-head{
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
#rx-editor .diet-meal-name{
  font: 700 13.5px var(--vs-font); color: var(--vs-primary);
  letter-spacing: -.01em;
}
#rx-editor .diet-meal-hint{
  font: 500 11px var(--vs-font); color: var(--vs-muted-2);
  margin-top: 2px;
}
#rx-editor .diet-meal-kcal{
  font: 600 12px var(--vs-font-data); color: var(--vs-accent);
  font-variant-numeric: tabular-nums;
}
#rx-editor .diet-meal-rows{display: flex; flex-direction: column; gap: 6px}
#rx-editor .diet-meal-empty{
  font-size: 12.5px; color: var(--vs-muted);
  padding: 8px 0; font-style: italic;
}
#rx-editor .diet-row{
  display: grid;
  grid-template-columns: minmax(0,2.5fr) minmax(0,1.2fr) 80px 30px;
  gap: 6px; align-items: center;
}
#rx-editor .diet-row input{
  height: 34px; min-height: 34px;
  padding: 6px 10px;
  font-size: 12.5px;
  border-radius: 7px;
}
#rx-editor .diet-row .diet-kcal{text-align: right}
#rx-editor .diet-add{margin-top: 8px; height: 32px; padding: 6px 12px}

#rx-editor .diet-foot{margin-top: 14px}
#rx-editor .diet-totals{margin-top: 14px}
#rx-editor .diet-total-row{
  display: flex; justify-content: space-between; align-items: center;
  background: var(--vs-bg);
  border: 1px solid var(--vs-line);
  border-radius: 8px;
  padding: 10px 14px;
  font: 600 13px var(--vs-font);
  color: var(--vs-ink);
  font-variant-numeric: tabular-nums;
}
#rx-editor .diet-total-ok{
  background: #ecfdf5; border-color: #a7f3d0; color: #065f46;
}
#rx-editor .diet-total-warn{
  background: #fff7ed; border-color: #fdba74; color: #9a3412;
}

/* Compact diet UI on phones */
@media (max-width: 720px){
  #rx-editor .diet-toolbar{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #rx-editor #diet-ai-gen{grid-column: 1 / -1; width: 100%}
  #rx-editor .diet-row{
    grid-template-columns: 1fr 1fr 70px 28px;
    gap: 4px;
  }
}

/* ============== 17.  Patient prescription-ready popup ============== */
.rx-ready-back{
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(13, 44, 59, .65);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: vs-fade-in .2s ease;
}
@keyframes vs-fade-in{from{opacity:0}to{opacity:1}}
.rx-ready-card{
  width: min(440px, calc(100vw - 32px));
  max-height: 92vh; max-height: 92dvh;
  background: white;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(13, 59, 102, .35);
  display: flex; flex-direction: column;
  animation: vs-toast-in .25s ease;
}
.rx-ready-head{
  background: linear-gradient(135deg, #06203a 0%, #0d3b66 60%, #144d80 100%);
  color: white;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.rx-ready-head::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 24px 24px; opacity: .35; pointer-events: none;
}
.rx-ready-head > *{position: relative; z-index: 1}
.rx-ready-icon{
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--vs-accent-2), var(--vs-accent-3));
  color: var(--vs-primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 0 0 4px rgba(98,217,200,.18);
}
.rx-ready-icon svg{width: 28px; height: 28px}
.rx-ready-title{
  font: 800 20px/1.2 var(--vs-font);
  letter-spacing: -.01em;
  margin: 0 0 6px;
}
.rx-ready-sub{
  font: 500 13px/1.5 var(--vs-font);
  color: rgba(255,255,255,.78);
  margin: 0;
}
.rx-ready-body{
  padding: 18px 24px;
  display: flex; flex-direction: column; gap: 10px;
  font: 500 13px/1.55 var(--vs-font); color: var(--vs-ink);
  background: var(--vs-bg);
  flex: 1; min-height: 0; overflow-y: auto;
}
.rx-ready-row{
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--vs-line);
}
.rx-ready-row:last-child{border-bottom: 0}
.rx-ready-row .lbl{
  font: 700 11px var(--vs-font); color: var(--vs-muted);
  letter-spacing: .5px; text-transform: uppercase;
  flex-shrink: 0;
}
.rx-ready-row .val{
  text-align: right;
  color: var(--vs-ink); font-weight: 600;
}
.rx-ready-foot{
  padding: 14px 18px;
  background: white;
  border-top: 1px solid var(--vs-line);
  display: flex; gap: 8px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
.rx-ready-foot .btn{flex: 1; justify-content: center}

@media (max-width: 640px){
  .rx-ready-back{align-items: flex-end; padding: 0}
  .rx-ready-card{
    width: 100vw;
    border-radius: 18px 18px 0 0;
    max-height: 92dvh;
  }
}

/* ============== 18.  Camera-permission banner (patient consult) ============== */
.vs-perm-banner{
  position: sticky; top: 0; z-index: 8500;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-bottom: 2px solid #f59e0b;
  color: #78350f;
  padding: 14px 18px;
  display: flex; gap: 14px; align-items: flex-start;
  box-shadow: 0 4px 16px rgba(245, 158, 11, .25);
  animation: vs-fade-in .25s ease;
}
.vs-perm-icon{
  flex-shrink: 0; color: #d97706;
  width: 32px; height: 32px;
  background: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(217, 119, 6, .25);
}
.vs-perm-body{flex: 1; min-width: 0}
.vs-perm-title{
  font: 800 15px/1.3 var(--vs-font);
  letter-spacing: -.01em;
  color: #78350f;
  margin-bottom: 4px;
}
.vs-perm-sub{
  font: 500 13px/1.5 var(--vs-font);
  color: #92400e;
  margin-bottom: 10px;
}
.vs-perm-steps{
  margin: 0 0 12px 18px;
  padding: 0;
  font: 500 13px/1.55 var(--vs-font);
  color: #78350f;
}
.vs-perm-steps li{margin: 2px 0}
.vs-perm-actions{display: flex; gap: 8px}
.vs-perm-actions .btn{flex: 0 0 auto}

@media (max-width: 640px){
  .vs-perm-banner{padding: 12px 14px; gap: 10px}
  .vs-perm-icon{width: 28px; height: 28px}
  .vs-perm-title{font-size: 14px}
  .vs-perm-sub, .vs-perm-steps{font-size: 12.5px}
  .vs-perm-actions .btn{flex: 1}
}

/* ============== 19.  Reduce motion respect ============== */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}