/* =========================================================
   consultation.css — page-specific styles for consultation.php
   Adapted from the standalone video-consultation prototype.
   Shared color tokens come from common.css (:root); this file
   only adds the app-shell layout + components unique to the room.
   ========================================================= */

body.consultation-body {
  background: var(--bg-deep);
  margin: 0;
}

/* ============ SITE NAVBAR ============
   Consultation Room now includes the real shared site-header.php/
   site-footer.php, same as every other page, instead of a hand-rolled
   copy that had drifted out of sync. */

/* The app is constrained to the same max-width + 24px gutter as
   .container (used by the header, footer, and every other page), so its
   left/right edges line up with the rest of the site instead of bleeding
   to the viewport edge. It's presented as a rounded card so it still
   reads as a distinct "app" area rather than plain page content.
   Height is CAPPED (not just a floor) — long content in .rx-pane scrolls
   internally instead of stretching the whole card taller than the
   screen, which was pushing the page down and overlapping the footer. */
.app {
  display: flex;
  width: 100%;
  max-width: var(--container);
  margin: 32px auto;
  padding-top: 0;
  padding-right: 24px;
  padding-bottom: 10px;
  padding-left: 24px;
  box-sizing: border-box;
  height: min(780px, calc(100vh - var(--header-h) - 64px)); /* 64px = 32px top+bottom margin above */
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
/* ============ VIDEO PANE (62%) — widened from 55% for a bigger camera view ============ */
.video-pane{
  flex:0 0 62%;
  max-width:62%;
  background:
    radial-gradient(circle at 15% 10%, rgba(47,169,140,0.10), transparent 45%),
    var(--bg-deep);
  display:flex;
  flex-direction:column;
  padding:22px 22px 22px;
  position:relative;
}
.video-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.brand-group{display:flex; align-items:center; gap:12px;}
.back-link{
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#B9C7D0;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  transition:background .15s ease, color .15s ease;
}
.back-link:hover{background:rgba(255,255,255,0.1); color:#EAF1F6;}
.brand{
  display:flex;
  align-items:baseline;
  gap:9px;
}
.brand .mark{
  width:9px;height:9px;border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 3px rgba(47,169,140,0.18);
}
.brand-text{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:15px;
  color:#EAF1F6;
  letter-spacing:0.01em;
}
.patient-chip{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  color:#9FB2BF;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  padding:5px 10px;
  border-radius:20px;
}

.video-stage{
  flex:1;
  position:relative;
  border-radius:14px;
  background:var(--bg-deep-2);
  border:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
  min-height:380px;
}
.tile-remote{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:
    radial-gradient(circle at 50% 38%, #1C3A56 0%, #10233A 70%);
}
.avatar-ring{
  width:88px;height:88px;
  border-radius:50%;
  background:var(--bg-tile);
  border:1.5px solid rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;
  font-size:28px;
  color:#7FBFAE;
  position:relative;
}
.avatar-ring.pulse::after{
  content:'';
  position:absolute; inset:-8px;
  border-radius:50%;
  border:1.5px solid rgba(47,169,140,0.35);
  animation:pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing{
  0%{transform:scale(0.9); opacity:0.9;}
  100%{transform:scale(1.35); opacity:0;}
}
.remote-status-text{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  color:#8FA2AF;
  letter-spacing:0.02em;
}
.remote-name{
  font-family:'Space Grotesk',sans-serif;
  font-size:16px;
  color:#DCE6EB;
  font-weight:500;
}

.tile-local{
  position:absolute;
  right:16px; bottom:16px;
  width:210px; height:148px;
  border-radius:10px;
  overflow:hidden;
  background:var(--bg-tile);
  border:1.5px solid rgba(255,255,255,0.14);
  box-shadow:0 8px 22px rgba(0,0,0,0.35);
  transition:opacity .2s ease;
}
.tile-local video{
  width:100%;height:100%;object-fit:cover;
  display:block;
  transform:scaleX(-1);
}
.tile-local .local-off{
  position:absolute; inset:0;
  display:flex;align-items:center;justify-content:center;
  background:#1B3552;
  color:#6E8494;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  flex-direction:column;
  gap:6px;
}
.tile-local .local-tag{
  position:absolute; left:8px; bottom:6px;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  color:#DCE6EB;
  background:rgba(0,0,0,0.45);
  padding:2px 6px;
  border-radius:4px;
  letter-spacing:0.03em;
}

/* vitals strip */
.vitals-strip{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:#8FA2AF;
}
.vitals-group{display:flex; align-items:center; gap:16px;}
.vitals-item{display:flex; align-items:center; gap:6px;}
.vitals-dot{width:6px;height:6px;border-radius:50%; background:#3C4E5C;}
.vitals-dot.live{background:var(--teal); box-shadow:0 0 0 2px rgba(47,169,140,0.2);}
.signal-bars{display:flex; align-items:flex-end; gap:2px; height:10px;}
.signal-bars span{width:3px; background:#3C4E5C; border-radius:1px;}
.signal-bars span:nth-child(1){height:4px;}
.signal-bars span:nth-child(2){height:6px;}
.signal-bars span:nth-child(3){height:8px;}
.signal-bars span:nth-child(4){height:10px;}
.signal-bars.on span{background:var(--teal);}

/* controls */
.controls{
  margin-top:14px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.ctrl-btn{
  width:48px;height:48px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.05);
  color:#DCE6EB;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.ctrl-btn:hover{background:rgba(255,255,255,0.09);}
.ctrl-btn:active{transform:scale(0.94);}
.ctrl-btn svg{width:20px;height:20px;}
.ctrl-btn.off{
  background:rgba(214,69,80,0.18);
  border-color:rgba(214,69,80,0.4);
  color:#F0A6AB;
}
.ctrl-btn.disabled{
  opacity:0.35;
  pointer-events:none;
}
.call-btn{
  width:auto;
  padding:0 22px;
  height:48px;
  border-radius:24px;
  background:var(--teal);
  border:1.5px solid var(--teal);
  color:#08211B;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:13.5px;
  display:flex;align-items:center;gap:8px;
  cursor:pointer;
  transition:background .15s ease, transform .1s ease;
}
.call-btn:hover{background:#38BC9E;}
.call-btn:active{transform:scale(0.97);}
.call-btn.active{
  background:var(--red);
  border-color:var(--red);
  color:#FFEDEE;
}
.call-btn.active:hover{background:#E4606A;}
.call-btn-audio{
  background:transparent;
  border-color:var(--teal);
  color:var(--teal);
}
.call-btn-audio:hover{background:rgba(47,169,140,0.1);}
.call-btn-audio.active{
  background:var(--red);
  border-color:var(--red);
  color:#FFEDEE;
}
.call-btn-audio.active:hover{background:#E4606A;}
.call-btn.disabled{
  opacity:0.35;
  pointer-events:none;
}

.audio-out-wrap{position:relative;}
.volume-pop{
  position:absolute;
  bottom:60px; left:50%;
  transform:translateX(-50%) translateY(6px);
  background:var(--bg-deep-2);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  padding:12px 14px 10px;
  width:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  box-shadow:0 12px 28px rgba(0,0,0,0.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.volume-pop.show{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.volume-pop .vol-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:0.05em;
  color:#8FA2AF;
}
.volume-pop input[type="range"]{
  width:100%;
  accent-color:var(--teal);
}
.volume-pop .vol-val{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:#DCE6EB;
}
.ctrl-btn.muted-out{
  background:rgba(214,69,80,0.18);
  border-color:rgba(214,69,80,0.4);
  color:#F0A6AB;
}

/* ============ PRESCRIPTION PANE (38%) ============ */
.rx-pane{
  flex:0 0 38%;
  max-width:38%;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  overflow-y:auto; /* long content scrolls inside the card, not the whole page */
  min-height:0; /* required for a flex child to actually respect overflow:auto */
}
.rx-header{
  padding:22px 26px 16px;
  border-bottom:1px solid var(--paper-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky; top:0;
  background:var(--paper);
  z-index:5;
}
.rx-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:17px;
  font-weight:600;
  color:var(--ink);
}
.rx-sub{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:var(--muted-soft);
  margin-top:2px;
}
.rx-id{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:var(--muted);
  background:#EDF2F0;
  border:1px solid var(--paper-line-strong);
  padding:5px 9px;
  border-radius:6px;
}

.rx-section{
  padding:18px 26px;
  border-bottom:1px solid var(--paper-line);
}
.section-label{
  font-family:'Space Grotesk',sans-serif;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.section-label .count{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  font-weight:400;
  color:var(--muted-soft);
  text-transform:none;
  letter-spacing:0;
}

/* files */
.file-drop{
  border:1.5px dashed var(--paper-line-strong);
  border-radius:8px;
  padding:14px;
  text-align:center;
  cursor:pointer;
  font-size:12.5px;
  color:var(--muted);
  background:#FBFCFB;
  transition:border-color .15s ease, background .15s ease;
  margin-bottom:12px;
}
.file-drop:hover{border-color:var(--teal-dim); background:#F1F8F6;}
.file-drop strong{color:var(--ink); font-weight:600;}
#fileInput{display:none;}

.file-list{display:flex; flex-direction:column; gap:7px;}
.file-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:#fff;
  border:1px solid var(--paper-line);
  border-radius:7px;
  font-size:12.5px;
}
.file-icon{
  width:28px;height:28px;
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  font-weight:600;
  color:#fff;
}
.file-icon.in{background:#5B7FA6;}
.file-icon.out{background:var(--teal-dim);}
.file-meta{flex:1; min-width:0;}
.file-name{
  color:var(--ink); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.file-sub{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px; color:var(--muted-soft);
  margin-top:1px;
}
.file-dir{
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  padding:2px 6px;
  border-radius:4px;
  flex-shrink:0;
}
.file-dir.in{background:#EAF0F7; color:#5B7FA6;}
.file-dir.out{background:#E6F4F0; color:var(--teal-dim);}

/* medicines */
.rx-table{width:100%; border-collapse:collapse;}
.rx-table thead th{
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--muted-soft);
  text-align:left;
  padding:0 6px 8px;
  font-weight:500;
}
.rx-row td{padding:4px 6px 4px 0;}
.rx-row input{
  width:100%;
  border:1px solid var(--paper-line-strong);
  background:#fff;
  border-radius:6px;
  padding:7px 8px;
  font-size:12.5px;
  font-family:'IBM Plex Sans',sans-serif;
  color:var(--ink);
  outline:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.rx-row input:focus{
  border-color:var(--teal-dim);
  box-shadow:0 0 0 3px rgba(47,169,140,0.12);
}
.rx-row .num-input{font-family:'IBM Plex Mono',monospace; font-size:12px;}
.row-del{
  width:24px;height:24px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--muted-soft);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s ease, color .12s ease;
}
.row-del:hover{background:#FBE8E9; color:var(--red);}

.add-row-btn{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:1px dashed var(--paper-line-strong);
  color:var(--muted);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:12px;
  font-weight:500;
  padding:7px 12px;
  border-radius:7px;
  cursor:pointer;
  transition:border-color .12s ease, color .12s ease;
}
.add-row-btn:hover{border-color:var(--teal-dim); color:var(--teal-dim);}

.notes-area{
  width:100%;
  min-height:64px;
  border:1px solid var(--paper-line-strong);
  border-radius:7px;
  padding:10px 11px;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:12.5px;
  color:var(--ink);
  resize:vertical;
  outline:none;
}
.notes-area:focus{border-color:var(--teal-dim); box-shadow:0 0 0 3px rgba(47,169,140,0.12);}

.followup-row{display:flex; gap:14px;}
.followup-field{flex:1;}
.followup-field label{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--muted-soft);
  margin-bottom:6px;
}
.followup-field input{
  width:100%;
  border:1px solid var(--paper-line-strong);
  background:#fff;
  border-radius:7px;
  padding:9px 10px;
  font-size:12.5px;
  font-family:'IBM Plex Sans',sans-serif;
  color:var(--ink);
  outline:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.followup-field input:focus{
  border-color:var(--teal-dim);
  box-shadow:0 0 0 3px rgba(47,169,140,0.12);
}

.rx-actions{
  padding:18px 26px 26px;
  display:flex;
  gap:10px;
}
.rx-actions .btn{
  flex:1;
  padding:12px 14px;
  border-radius:8px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:background .15s ease, transform .1s ease, border-color .15s ease;
}
.rx-actions .btn:active{transform:scale(0.98);}
.rx-actions .btn-secondary{
  background:#fff;
  border-color:var(--paper-line-strong);
  color:var(--ink);
}
.rx-actions .btn-secondary:hover{border-color:var(--muted-soft);}
.rx-actions .btn-primary{
  background:var(--teal);
  color:#08211B;
}
.rx-actions .btn-primary:hover{background:#38BC9E;}

/* toast */
.toast{
  position:fixed;
  right:24px; bottom:24px;
  background:var(--bg-deep-2);
  color:#EAF1F6;
  padding:12px 18px;
  border-radius:8px;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:9px;
  box-shadow:0 12px 30px rgba(0,0,0,0.3);
  transform:translateY(16px);
  opacity:0;
  pointer-events:none;
  transition:all .25s ease;
  z-index:50;
}
.toast.show{transform:translateY(0); opacity:1;}
.toast .dot{width:7px;height:7px;border-radius:50%; background:var(--teal); flex-shrink:0;}

@media (max-width: 860px){
  .app{
    flex-direction:column;
    margin:20px auto;
    height:min(700px, calc(100vh - var(--header-h) - 40px)); /* 40px = 20px top+bottom margin above */
  }
  .video-pane, .rx-pane{flex:none; max-width:100%; width:100%;}

  /* Video pane: taller than before (240px was too short once the topbar,
     vitals strip, and controls took their share — that's what was
     squeezing the actual video area to ~0). Padding/spacing on the
     surrounding chrome is also tightened so more of this height goes to
     the video itself. */
  .video-pane{height:380px; padding:14px 14px 12px;}
  .video-topbar{margin-bottom:10px;}
  .video-stage{min-height:180px;} /* real floor, not 0 — this is the video area itself */
  .avatar-ring{width:64px; height:64px; font-size:20px;}
  .tile-local{width:130px; height:92px; right:10px; bottom:10px;}
  .vitals-strip{margin-top:10px; padding:7px 10px;}
  .controls{margin-top:10px; gap:8px;}
  .ctrl-btn{width:40px; height:40px;}
  .ctrl-btn svg{width:18px; height:18px;}
  .call-btn{height:40px; padding:0 16px; font-size:12.5px;}

  .rx-pane{flex:1; min-height:0; overflow-y:auto;}
}