/* BlackVoxel — X-ray reading-session demo (chest + limb, modality chooser on entry).
 * Dark medical reading room. Real model outputs; descriptive, non-diagnostic (SD-004). */
:root{
  --bg:#0b0c0f; --panel:#131519; --panel2:#181b21; --view:#050608;
  --border:#262a31; --border-hi:#3a404b;
  --txt:#cfd4dc; --mute:#828a97; --dim:#59616e;
  --teal:#34c2ac; --teal-deep:#12463f; --peri:#8b8bff; --warn:#e2b25c;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--txt);font-family:"Inter",system-ui,sans-serif;
  display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--mono)}
.mut{color:var(--dim)}
b{font-weight:600;color:var(--txt)}

.demo-tag{font-size:.62rem;letter-spacing:.04em;color:var(--dim);background:#0e0f13;
  border-bottom:1px solid var(--border);padding:.4rem .9rem;text-align:center}

/* header */
.bar{display:flex;align-items:center;gap:1.2rem;padding:.7rem 1.1rem;background:var(--panel);
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem}
.mark{width:30px;height:30px}
.bname{font-weight:600;font-size:.92rem}
.bsub{font-size:.64rem;color:var(--teal);letter-spacing:.04em}
.bmid{margin-left:.4rem;font-size:.74rem;color:var(--mute);display:flex;gap:.5rem;align-items:center}
.bmid .dot{color:var(--dim)}
.bmodel{margin-left:auto;font-size:.68rem;color:var(--mute)}
.bmodel b{color:var(--teal)}

/* "‹ trocar exame" — compact back-to-chooser control in the header */
.swap{border:1px solid var(--border-hi);background:transparent;color:var(--mute);
  border-radius:6px;padding:.32rem .6rem;font-size:.66rem;letter-spacing:.02em;
  cursor:pointer;white-space:nowrap;transition:.15s;line-height:1.2}
.swap:hover{color:var(--teal);border-color:var(--teal)}
.swap:active{transform:translateY(1px)}
.swap[hidden]{display:none}
/* on the chooser the header shows only the brand */
body.choosing .bmid,body.choosing .bmodel{display:none}

/* layout */
.viewer{flex:1;display:grid;grid-template-columns:1fr;gap:0;min-height:0}
@media(min-width:900px){.viewer{grid-template-columns:minmax(0,1fr) 380px}}
/* display:grid/flex on these beats the [hidden] UA default — restore it explicitly */
.viewer[hidden],.controls[hidden],.chooser[hidden]{display:none}

/* ---- modality chooser (entry overlay on the reading-room bg) ---- */
.chooser{flex:1;display:flex;overflow-y:auto;background:
  radial-gradient(60rem 30rem at 50% -8rem,rgba(52,194,172,.06),transparent 65%),var(--view);
  padding:2rem 1.2rem calc(2rem + env(safe-area-inset-bottom))}
.ch-inner{margin:auto;width:min(780px,100%)}  /* margin:auto = centered, still scrollable when tall */
.ch-kicker{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0 0 .5rem}
.ch-title{font-size:1.55rem;font-weight:700;letter-spacing:-.01em;margin:0 0 .45rem;color:var(--txt)}
.ch-sub{font-size:.8rem;line-height:1.6;color:var(--mute);margin:0 0 1.5rem;max-width:56ch}
.ch-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ch-card{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;text-align:left;
  min-height:44px;padding:1.35rem 1.3rem 1.15rem;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--border-hi);
  color:var(--txt);font-family:inherit;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.ch-card:hover{transform:translateY(-3px);border-color:var(--teal);
  box-shadow:0 22px 44px -26px rgba(52,194,172,.45),0 0 0 1px rgba(52,194,172,.25)}
.ch-card:active{transform:translateY(-1px)}
.ch-card:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.ch-mod{font-size:.58rem;letter-spacing:.1em;color:var(--dim)}
.ch-name{font-size:1.08rem;font-weight:600;color:var(--txt)}
.ch-desc{font-size:.76rem;line-height:1.5;color:var(--mute)}
.ch-metrics{display:flex;flex-direction:column;gap:.25rem;font-size:.62rem;color:var(--dim);
  background:rgba(52,194,172,.08);border:1px solid var(--border);border-radius:6px;
  padding:.45rem .55rem;width:100%;line-height:1.3}
.ch-arch{color:var(--mute)}
.ch-perf{color:var(--teal);font-weight:500}
.ch-tag{font-size:.6rem;color:var(--teal);background:rgba(52,194,172,.1);
  border:1px solid var(--teal-deep);border-radius:10px;padding:.18rem .55rem;margin-top:.15rem}
.ch-go{font-size:.66rem;color:var(--teal);margin-top:.55rem;opacity:.7;transition:.18s}
.ch-card:hover .ch-go{opacity:1;transform:translateX(3px)}

/* viewport */
.viewport{background:var(--view);display:flex;align-items:center;justify-content:center;padding:1.2rem;min-height:52vh}
.stage{position:relative;width:min(72vh,100%);aspect-ratio:1/1;border:1px solid var(--border);
  border-radius:6px;overflow:hidden;background:#000;box-shadow:0 30px 70px -40px rgba(0,0,0,.8)}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#xray{filter:contrast(1.06) brightness(1.03)}
.cam{opacity:0;transition:opacity .7s ease;mix-blend-mode:screen;pointer-events:none}
.cam.on{opacity:1}
.box{position:absolute;border:2px solid var(--peri);border-radius:3px;opacity:0;transition:opacity .4s;pointer-events:none;box-shadow:0 0 0 1px rgba(139,139,255,.3),0 0 14px rgba(139,139,255,.25)}
.box.on{opacity:1}
.box-lbl{position:absolute;top:-19px;left:-2px;background:var(--peri);color:#0a0a14;font-size:.6rem;
  font-weight:600;padding:.12rem .35rem;border-radius:2px;white-space:nowrap}
.hud{position:absolute;font-size:.6rem;letter-spacing:.03em;line-height:1.35;text-shadow:0 1px 3px #000;color:#c8ccd4}
.hud.tl{top:8px;left:9px}.hud.tr{top:8px;right:9px;text-align:right}
.hud.bl{bottom:8px;left:9px;background:rgba(6,8,11,.72);padding:.16rem .4rem;border-radius:3px;color:#aeb4bf}
.scan{position:absolute;left:0;right:0;height:2px;top:0;background:linear-gradient(90deg,transparent,rgba(52,194,172,.7),transparent);opacity:0}
.stage.reading .scan{animation:scan 1.15s ease-in-out}
@keyframes scan{0%{opacity:0;top:0}15%{opacity:1}85%{opacity:1}100%{opacity:0;top:100%}}

/* panel */
.panel{background:var(--panel);border-left:1px solid var(--border);padding:1.1rem 1.15rem;display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.phead{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.phead h2{font-size:1.02rem;font-weight:600;margin:0}
.tag{font-size:.58rem;color:var(--mute);border:1px solid var(--border-hi);border-radius:10px;padding:.15rem .5rem;white-space:nowrap}
.pmeta{font-size:.62rem;color:var(--dim);margin:.35rem 0 .9rem}

.findings{display:flex;flex-direction:column;gap:.66rem}
.f{display:grid;grid-template-columns:1fr auto;gap:.15rem .5rem;align-items:baseline}
.f .fn{font-size:.82rem;color:var(--txt)}
.f.low .fn{color:var(--mute)}
.f .fv{font-family:var(--mono);font-size:.72rem;color:var(--txt)}
.f.low .fv{color:var(--dim)}
.f .track{grid-column:1/3;height:6px;border-radius:3px;background:#23272f;overflow:hidden}
.f .fill{height:100%;width:0;border-radius:3px;background:var(--teal);transition:width .9s cubic-bezier(.2,.7,.2,1)}
.f.low .fill{background:#4a515c}

/* confirmed ground-truth finding block */
.conf{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:.7rem .8rem;margin-bottom:.7rem}
.conf-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.45rem}
.conf-name{font-size:1.02rem;font-weight:600;color:var(--txt)}
.chip{font-size:.56rem;color:#07201c;background:var(--teal);border-radius:10px;padding:.16rem .5rem;font-weight:600;white-space:nowrap}
.conf-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.66rem;color:var(--mute);margin-bottom:.32rem}
.conf-row .fv{font-family:var(--mono);color:var(--txt);font-size:.74rem}
.conf .track{height:7px;border-radius:4px;background:#23272f;overflow:hidden}
.conf .fill{height:100%;width:0;background:var(--teal);border-radius:4px;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.seclab{font-size:.58rem;color:var(--dim);letter-spacing:.06em;margin:.1rem 0 .5rem}

/* report sizes to its content — never squeezed into leftover flex space (that made
   the laudo text overflow onto the signature row on short windows). The panel
   scrolls if the whole column is taller than the viewport; the signature is pinned
   to the bottom via margin-top:auto below. */
.report{margin-top:1rem;border-top:1px solid var(--border);padding-top:.8rem}
.rtext{overflow-wrap:break-word}
.rhead{font-size:.62rem;color:var(--teal);letter-spacing:.05em;margin-bottom:.55rem}
.rsec{margin-bottom:.65rem}
.rlab{display:block;font-size:.55rem;letter-spacing:.09em;color:var(--dim);margin-bottom:.18rem}
.rtext{font-size:.82rem;line-height:1.6;color:#b9bfc9;margin:0}
.rtext .caret{display:inline-block;width:7px;background:var(--teal);animation:blink 1s steps(1) infinite;color:transparent}
@keyframes blink{50%{opacity:0}}
.rnote{font-size:.6rem;color:var(--dim);margin-top:.6rem}

.signrow{margin-top:auto;border-top:1px solid var(--border);padding-top:.85rem}
.reviewer{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.ava{width:30px;height:30px;border-radius:50%;background:#232833;display:flex;align-items:center;justify-content:center;font-size:.66rem;color:var(--mute)}
.rv1{font-size:.8rem}.rv2{font-size:.62rem;color:var(--dim)}
.signbtn{width:100%;padding:.7rem;border:0;border-radius:6px;background:var(--teal);color:#07201c;
  font-weight:600;font-size:.9rem;cursor:pointer;transition:.15s}
.signbtn:hover{filter:brightness(1.08)}
.signbtn:disabled{background:#232833;color:var(--dim);cursor:default}
.signed{margin-top:.5rem;text-align:center;color:var(--teal);font-size:.74rem}
.pdfbtn{width:100%;margin-top:.55rem;padding:.62rem;border:1px solid var(--teal);border-radius:6px;
  background:transparent;color:var(--teal);font-weight:600;font-size:.84rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;transition:.15s}
.pdfbtn:hover{background:rgba(52,194,172,.12)}
.pdfbtn:active{transform:translateY(1px)}
.pdfbtn .pico{font-size:.95rem;line-height:1}

/* controls */
.controls{display:flex;align-items:center;gap:1rem;padding:.7rem 1.1rem;background:var(--panel);border-top:1px solid var(--border);flex-wrap:wrap}
.ctl{display:flex;gap:.4rem}
.cbtn{width:38px;height:34px;border:1px solid var(--border-hi);background:var(--panel2);color:var(--txt);
  border-radius:6px;font-size:1rem;cursor:pointer;transition:.15s;line-height:1}
.cbtn:hover{border-color:var(--teal);color:var(--teal)}
.cbtn.play{color:var(--teal);border-color:var(--teal-deep)}
.thumbs{display:flex;gap:.3rem;flex:1;overflow-x:auto;padding:.15rem}
.thumbs .t{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:4px;overflow:hidden;
  border:1px solid var(--border);cursor:pointer;opacity:.5;transition:.18s}
.thumbs .t img{width:100%;height:100%;object-fit:cover}
.thumbs .t:hover{opacity:.85}
.thumbs .t.on{opacity:1;border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.thumbs .t .pg{position:absolute;left:0;bottom:0;height:2px;background:var(--teal);width:0}
.credit{font-size:.62rem;color:var(--dim);white-space:nowrap}
/* ---- mobile / tablet ---- */
@media(max-width:900px){
  /* On phones the viewport image and the panel STACK. The desktop layout pins the
     page to one viewport height (body height:100% + .viewer flex:1;min-height:0)
     and lets the panel scroll internally — but as a scroll container the panel's
     minimum contribution to grid row sizing is 0, so its row (and the report in it)
     collapsed to near-nothing and the laudo text clipped/wrote over itself.
     Fix: the viewer never shrinks below its content and the panel is a normal
     content-sized block; the DOCUMENT scrolls, the report grows with its text. */
  .viewer{flex:1 0 auto;min-height:auto}
  .viewport{min-height:auto;padding:.7rem}
  .stage{width:min(94vw,56vh)}
  .panel{border-left:0;border-top:1px solid var(--border);overflow:visible;min-height:auto;
    padding:.95rem 1rem calc(1.2rem + env(safe-area-inset-bottom))}
  /* controls are NOT sticky on mobile: sticky pinned the bar over the panel's
     bottom text (report / signature), which read as overlapping. Let it sit at
     the end of the flow instead. */
  .controls{padding-bottom:calc(.7rem + env(safe-area-inset-bottom))}
}
@media(max-width:720px){
  /* chooser: cards stack vertically, full width, comfortable tap targets */
  .ch-cards{grid-template-columns:1fr}
  .ch-card{width:100%;padding:1.25rem 1.15rem 1.05rem}
  .ch-title{font-size:1.3rem}
  .chooser{padding:1.4rem .9rem calc(1.6rem + env(safe-area-inset-bottom))}
}
@media(max-width:640px){
  .bmodel,.credit{display:none}
  .bar{gap:.5rem;padding:.55rem .7rem}
  .swap{min-height:44px;padding:.5rem .7rem;font-size:.68rem;order:3;margin-left:auto}   /* tap target, far right */
  .bmid{margin-left:0;font-size:.68rem}
  .brand .bname{font-size:.84rem}
  .mark{width:26px;height:26px}
  .phead h2{font-size:.96rem}
  .rtext{font-size:.8rem;line-height:1.65}
  .rsec{margin-bottom:.75rem}
  .conf-name{font-size:.96rem}
  .cbtn{width:46px;height:40px;font-size:1.05rem}   /* bigger touch targets */
  .thumbs .t{width:40px;height:40px}
  .demo-tag{font-size:.55rem;padding:.35rem .6rem;line-height:1.3}
  .signbtn,.pdfbtn{padding:.8rem}
}
@media(prefers-reduced-motion:reduce){.cam{transition:none}.f .fill{transition:none}.scan{display:none}
  .ch-card,.ch-go{transition:none}.ch-card:hover{transform:none}.ch-card:hover .ch-go{transform:none}}

/* ---- PDF preview modal (in-page viewer before download) ---- */
.pdfmodal{position:fixed;inset:0;z-index:50;background:rgba(6,8,11,.84);display:flex;
  align-items:center;justify-content:center;padding:2vh 2vw}
.pdfmodal[hidden]{display:none}
.pdfm-card{display:flex;flex-direction:column;width:min(920px,96vw);height:min(94vh,100%);
  background:var(--panel);border:1px solid var(--border-hi);border-radius:10px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.pdfm-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.55rem .75rem;background:var(--panel2);border-bottom:1px solid var(--border);flex-wrap:wrap}
.pdfm-title{font-size:.72rem;color:var(--txt)}
.pdfm-actions{display:flex;gap:.4rem;align-items:center;margin-left:auto}
.pdfm-btn{padding:.5rem .8rem;border-radius:6px;border:0;background:var(--teal);color:#07201c;
  font-weight:600;font-size:.8rem;cursor:pointer;text-decoration:none;display:inline-flex;
  align-items:center;line-height:1;min-height:40px}
.pdfm-btn.ghost{background:transparent;border:1px solid var(--border-hi);color:var(--txt)}
.pdfm-btn:hover{filter:brightness(1.08)}
.pdfm-frame{flex:1;width:100%;border:0;background:#525659}
@media(max-width:640px){
  .pdfmodal{padding:0}
  .pdfm-card{width:100vw;height:100dvh;border-radius:0;border:0}
  .pdfm-title{display:none}
  .pdfm-bar{padding-top:calc(.55rem + env(safe-area-inset-top))}
}