:root { color-scheme: light; font-family: system-ui, sans-serif; color: #173c42; background: #eef7f5; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body { margin: 0; min-height: 100vh; }
.call-shell { min-height: 100vh; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); }
.call-card { width: min(100%, 34rem); padding: clamp(1.25rem, 5vw, 2.25rem); border-radius: 1.25rem; background: white; box-shadow: 0 .75rem 2.5rem #153d421a; }
.eyebrow { color: #0d6971; font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: .45rem 0 .5rem; font-size: clamp(1.8rem, 7vw, 2.5rem); line-height: 1.08; }
p { line-height: 1.5; }
form { display: grid; gap: .7rem; margin-top: 1.5rem; }
label { font-weight: 700; }
input, button { width: 100%; min-height: 3.25rem; border-radius: .75rem; font: inherit; }
input { border: 1px solid #9bb9b6; padding: .75rem 1rem; font-size: 1.05rem; }
button { border: 0; padding: .75rem 1rem; color: white; background: #0d6971; font-weight: 750; cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
button.secondary { margin-top: .75rem; color: #17464a; background: #dcecea; }
#simple-call-media { position: relative; min-height: 14rem; overflow: hidden; margin-top: 1rem; border-radius: 1rem; background: #102a2d; }
#simple-call-intro[hidden] ~ #simple-call-media { margin-top: 0; }
#simple-call-preview, #simple-call-remote video { width: 100%; height: 100%; object-fit: cover; }
#simple-call-preview { min-height: 14rem; transform: scaleX(-1); }
#simple-call-remote:not(:empty) { position: absolute; inset: 0; }
#simple-call-remote video { position: absolute; inset: 0; background: #102a2d; }
#simple-call-remote video:nth-of-type(2), #simple-call-remote video:nth-of-type(3), #simple-call-remote video:nth-of-type(4) { display: none; }
#simple-call-remote video:last-of-type { inset: auto .75rem .75rem auto; width: 28%; height: 5rem; z-index: 2; border: 2px solid white; border-radius: .6rem; transform: scaleX(-1); }
@media (max-width: 28rem) { .call-card { border-radius: 1rem; } }
#simple-family-chat { min-width: 0; border-top: 1px solid #dcecea; margin-top: 1.25rem; padding-top: 1rem; }
#simple-family-chat h2 { margin: 0; font-size: 1.15rem; }
.chat-note, #simple-chat-status { font-size: .85rem; margin: .5rem 0; }
#simple-chat-messages { max-height: 15rem; overflow-y: auto; overflow-wrap: anywhere; background: #f4f9f8; border-radius: .6rem; padding: .75rem; font-size: .9rem; }
#simple-chat-messages { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.simple-chat-message { max-width: 88%; padding: .55rem .7rem; border-radius: .75rem; background: white; border: 1px solid #dcecea; }
.simple-chat-message--family { align-self: flex-start; }
.simple-chat-message--provider { align-self: flex-end; background: #e5f3f1; }
.simple-chat-message strong { display: block; font-size: .78rem; }
.simple-chat-message p { white-space: pre-wrap; overflow-wrap: anywhere; margin: .2rem 0 0; }
#simple-chat-form { margin-top: .75rem; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: end; }
#simple-chat-form label { grid-column: 1 / -1; font-size: .85rem; }
#simple-chat-text { width: 100%; min-width: 0; resize: vertical; border: 1px solid #9bb9b6; border-radius: .6rem; padding: .65rem; font: inherit; }
#simple-chat-send { min-height: 2.75rem; width: auto; }
#simple-chat-status:empty, #simple-chat-messages:empty { display: none; }
/* The small check-in form becomes a fluid call surface after joining. */
.call-shell:has(#simple-call-intro[hidden]) { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); place-items: stretch; }
.call-card:has(#simple-call-intro[hidden]) { width: 100%; padding: 12px; border-radius: 12px; align-self: start; }
.call-card:has(#simple-call-intro[hidden]) #simple-call-media { height: max(280px, 60dvh); min-height: 280px; }
.call-card:has(#simple-call-intro[hidden]) #simple-call-preview { height: 100%; min-height: 0; object-fit: contain; }
.call-card:has(#simple-call-intro[hidden]) #simple-call-remote video { object-fit: contain; }
#simple-call-controls { position: sticky; bottom: 0; z-index: 3; background: white; padding: 8px 0; }
/* Compact waiting screen, with the composer visible below the camera. */
.call-card:has(#simple-call-intro[hidden]):not(.video-connected) { max-width: 620px; margin: auto; display: block; }
.call-card:has(#simple-call-intro[hidden]):not(.video-connected) #simple-call-media { height: clamp(144px, 24dvh, 240px); min-height: 144px; }
.checkin-person { display: grid; gap: 7px; padding: 12px 0; }
.checkin-person + .checkin-person, .checkin-readiness-person { border-top: 1px solid #dcecea; margin-top: 12px; padding-top: 12px; }
.checkin-person label, .checkin-readiness-person label { font-size: 14px; }
button.checkin-text { width: auto; min-height: 36px; padding: 5px 0; color: #0d6971; background: transparent; text-align: left; font-size: 13px; font-weight: 500; }
.checkin-link-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.checkin-link-actions button.checkin-text { padding: 7px 0; font-weight: 650; }
.checkin-link-actions input { flex: 1 1 100%; min-width: 0; }
.checkin-other-person { display: grid; gap: 7px; padding: 12px 0; font-size: 14px; border-top: 1px solid #dcecea; }
.checkin-other-person button.checkin-text { min-height: 30px; }
.checkin-check { display: flex; gap: 9px; font-size: 14px; align-items: start; font-weight: 500; }
.recording-notice { margin: .35rem 0 0; font-size: .9rem; line-height: 1.45; color: #34575b; }
.checkin-check input, .checkin-readiness-person input[type=radio] { width: 18px; min-height: 18px; height: 18px; flex: 0 0 18px; accent-color: #0d6971; }
.checkin-readiness-person fieldset { padding: 0; margin: 16px 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.checkin-readiness-person legend { font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.checkin-readiness-person fieldset label { display: flex; align-items: center; gap: 6px; font-weight: 400; min-height: 36px; }
#checkin-error { color: #9b2727; margin: 0; font-size: 14px; }
#checkin-error:empty { display: none; }
#transcription-explanation { border: 1px solid #cbdedc; border-radius: 14px; padding: 24px; width: min(520px, calc(100% - 24px)); max-height: calc(100dvh - 40px); color: #173c42; }
#transcription-explanation::backdrop { background: #15343699; }
#transcription-explanation h3 { margin-bottom: 4px; font-size: 16px; }
#transcription-explanation p { margin-top: 0; font-size: 14px; }
#simple-wait-estimate { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
#simple-call-status { margin: 6px 0; font-size: 12px; }
#simple-call-leave { min-height: 36px; width: auto; margin-top: 4px; padding: 5px 12px; font-size: 13px; }
#simple-family-chat { margin-top: 8px; padding-top: 8px; }
#simple-chat-messages { max-height: 120px; }
#simple-chat-text { min-height: 42px; }
.device-sms-link { display: inline-block; color: #0d6971; padding: 10px 0; }
.add-patient-panel { margin-top: 8px; border-top: 1px solid #dcecea; padding-top: 6px; }
.add-patient-panel > p { margin: 4px 0; font-size: 13px; }
.add-patient-panel #simple-add-patient-form { margin: 6px 0 10px; padding: 14px; border: 1px solid #cbdedc; border-radius: 12px; background: #f4f9f8; }
.add-patient-panel h2 { margin: 0; font-size: 18px; }
.add-patient-panel form > p { margin: 0 0 5px; font-size: 14px; }
.add-patient-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 500; }
.add-patient-check input { width: 18px; min-height: 18px; height: 18px; flex: 0 0 18px; accent-color: #0d6971; }
.add-patient-actions { display: flex; gap: 8px; }
.add-patient-actions button { width: auto; flex: 1; }
.add-patient-actions .secondary { margin-top: 0; }
#simple-call-remote { display: grid; grid-template-columns: repeat(auto-fit,minmax(0,1fr)); }
#simple-call-remote video:not(:last-of-type):not([hidden]) { position: static; display: block; width: 100%; height: 100%; min-width: 0; }
@media (min-width: 900px) {
  .call-card:has(#simple-call-intro[hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 16px; }
  .call-card:has(#simple-call-intro[hidden]) > * { grid-column: 1; }
  .call-card:has(#simple-call-intro[hidden]) #simple-family-chat { grid-column: 2; grid-row: 1 / span 7; align-self: start; margin-top: 0; padding-top: 0; border-top: 0; }
  .call-shell:has(.desktop-video-connected) { display:block; padding:0; background:#102a2d; }
  .call-card.desktop-video-connected { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; margin:0; padding:0; display:block; border-radius:0; background:#102a2d; box-shadow:none; }
  .call-card.desktop-video-connected #simple-call-media { height:100dvh; min-height:0; margin:0; border-radius:0; }
  .call-card.desktop-video-connected #simple-call-remote video { object-fit:contain; }
  .call-card.desktop-video-connected #simple-family-chat, .call-card.desktop-video-connected #simple-wait-estimate, .call-card.desktop-video-connected #second-device-invites { display:none !important; }
  .call-card.desktop-video-connected #simple-call-controls { position:absolute; z-index:5; bottom:0; left:50%; width:auto; transform:translateX(-50%); border-radius:12px 12px 0 0; padding:8px 14px; }
  .call-card.desktop-video-connected #simple-call-status { position:absolute; z-index:5; top:8px; left:12px; margin:0; color:#fff; text-shadow:0 1px 2px #000; }
  .call-card.desktop-video-connected #simple-call-leave { position:absolute; z-index:6; top:32px; right:12px; }
  .call-card.desktop-video-connected #simple-add-patient { position:absolute; z-index:6; top:76px; right:12px; width:min(380px,calc(100vw - 24px)); max-height:calc(100dvh - 88px); overflow-y:auto; padding:8px 12px; border-radius:12px; background:#fff; }
}