/* Live interview room — layered desktop composition around the native 512px stream. */
body[data-product-page="interview"]{
  background:radial-gradient(circle at 13% -12%,rgba(190,210,195,.72),transparent 34rem),linear-gradient(135deg,#eef0eb 0,#f7f6f1 54%,#eceee9 100%);
}
body[data-product-page="interview"] .product-bar{border-bottom-color:rgba(39,58,48,.09);background:rgba(255,255,252,.76);box-shadow:none;backdrop-filter:blur(16px)}
body[data-product-page="interview"] .product-shell{padding-top:16px}

#interviewRoom{
  width:min(940px,100%);margin:0 auto;overflow:hidden;color:#17201b;
  --room-ink:#17201b;--room-muted:#758078;--room-line:#e0e5de;--room-paper:#fffefa;--room-green:#244d3c;--room-green-deep:#18372b;
  border:1px solid rgba(39,58,48,.12);border-radius:20px;background:rgba(255,255,252,.9);
  box-shadow:0 26px 70px rgba(41,51,45,.13),0 3px 12px rgba(41,51,45,.05);
}

#interviewRoom .room-bar{
  min-height:64px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:0 24px;
  color:var(--room-ink);background:rgba(255,255,252,.92);border-bottom:1px solid var(--room-line);
}
#interviewRoom .room-brand{display:flex;align-items:center;gap:12px}
#interviewRoom .room-brand-mark{width:32px;height:32px;display:grid;place-items:center;border-radius:9px 9px 9px 2px;background:var(--room-green-deep);color:#f4f2e8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font:italic 20px Georgia,serif}
#interviewRoom .room-bar small{margin:0 0 2px;color:#899188;font-size:9px;font-weight:700;letter-spacing:.13em}
#interviewRoom .room-bar strong{display:block;color:var(--room-ink);font-size:13px;letter-spacing:.02em}
#interviewRoom .room-bar .quiet{min-height:34px;padding:0 11px;border:1px solid transparent;border-radius:8px;background:transparent;color:#68756d;font-size:10px;box-shadow:none}
#interviewRoom .room-bar .quiet:hover{border-color:var(--room-line);background:#f2f4ef}
#interviewRoom .room-meta-sr{display:none}

#interviewRoom .interview-layout{
  display:grid;grid-template-columns:512px 300px;justify-content:center;align-items:center;gap:22px;padding:23px 24px;
  color:inherit;background:#e9ebe6;box-shadow:none;
}
#interviewRoom .stage{min-width:0;padding:0}
#interviewRoom .video-frame{position:relative;width:512px;height:512px;max-height:none;aspect-ratio:1;margin:0;overflow:hidden;border-radius:14px;background:#17211c;box-shadow:0 15px 38px rgba(26,36,30,.18),inset 0 0 0 1px rgba(255,255,255,.14)}
#interviewRoom .video-frame::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
#interviewRoom .digital-human-surface{height:100%}
#interviewRoom .digital-human-video,#interviewRoom .digital-human-standby{object-fit:contain}
#interviewRoom .digital-human-caption{display:none!important}
#interviewRoom .live-mark,#interviewRoom .mobile-candidate{display:none}

#interviewRoom .room-status-column{height:512px;min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:1px solid #dde1db;border-radius:14px;background:var(--room-paper);box-shadow:0 10px 28px rgba(42,54,47,.07)}
#interviewRoom .candidate-side{display:block;padding:22px 22px 19px;border-bottom:1px solid var(--room-line)}
#interviewRoom .candidate-side[hidden]{display:none}
#interviewRoom .candidate-label{margin:0 0 12px;color:#838c84;font-size:9px;font-weight:700;letter-spacing:.13em}
#interviewRoom .candidate-live{position:relative;width:100%;height:132px;aspect-ratio:auto;overflow:hidden;border-radius:11px;background:linear-gradient(145deg,#4b5d54,#26342e);box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}
#interviewRoom .candidate-live::after{content:"";position:absolute;inset:auto 0 0;height:50%;background:linear-gradient(transparent,rgba(9,17,13,.32));pointer-events:none}
#interviewRoom .candidate-live video{display:block;width:100%;height:100%;object-fit:cover}
#interviewRoom .candidate-live span{position:absolute;z-index:1;left:11px;bottom:9px;color:#f2f5f1;font-size:9px;letter-spacing:.08em}
#interviewRoom .candidate-live span::before{content:"";display:inline-block;width:5px;height:5px;margin:0 5px 1px 0;border-radius:50%;background:#75a986}

#interviewRoom .answer-dock{
  position:relative;inset:auto;min-width:0;width:auto;height:100%;margin:0;padding:21px 22px 17px;
  display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;justify-items:center;align-items:center;gap:7px;
  overflow:hidden;border:0;background:transparent;color:inherit;box-shadow:none;text-align:center;
}
#interviewRoom .answer-dock__copy{grid-column:1;grid-row:1;min-width:0;align-self:start}
#interviewRoom .answer-dock__copy>span{display:block;margin-bottom:4px;color:#879188;font-size:9px;font-weight:700;letter-spacing:.12em}
#interviewRoom .answer-dock__copy strong{display:block;color:#294236;font-size:14px;line-height:1.6}
#interviewRoom .answer-dock__copy small{display:block;margin-top:3px;color:#7d8981;font-size:9px;line-height:1.6;white-space:normal}
#interviewRoom .answer-dock__status{grid-column:1;grid-row:2;position:relative;width:106px;height:106px;margin:2px 0;display:flex;align-items:center;justify-content:center;gap:3px;border:1px solid #dce8de;border-radius:50%;background:radial-gradient(circle,#f9fcf8 0 36%,#edf5ef 37% 54%,#f8faf6 55%);box-shadow:0 0 0 12px #f4f7f2}
#interviewRoom .answer-dock__status::before{content:"";position:absolute;width:48px;height:48px;border-radius:50%;background:var(--room-green);box-shadow:0 7px 18px rgba(36,77,60,.22)}
#interviewRoom .answer-dock__status i{position:relative;z-index:1;width:2px;height:5px;border-radius:2px;background:#c9d6ce;animation:none;transform:none;opacity:1;transition:height .1s ease-out,background-color .1s ease-out}
#interviewRoom .answer-dock__status i.is-active{height:10px;background:#fff}
#interviewRoom .answer-dock__status i.is-active:nth-child(2){height:18px}
#interviewRoom .answer-dock__status i.is-active:nth-child(3){height:24px}
#interviewRoom .answer-dock__status i.is-active:nth-child(4){height:14px}
#interviewRoom .answer-dock[data-state="submitting"] .answer-dock__status::before,#interviewRoom .answer-dock[data-state="responding"] .answer-dock__status::before{background:#8b6d3e}
#interviewRoom .answer-dock[data-state="recovering"] .answer-dock__status::before,#interviewRoom .answer-dock[data-state="error"] .answer-dock__status::before{background:#9b5a50}
#interviewRoom .countdown{grid-column:1;grid-row:2;position:relative;z-index:3;width:106px;height:106px;display:grid;place-items:center;margin:2px 0;border-radius:50%;background:#f8f2e7}
#interviewRoom .countdown svg{position:absolute;inset:0;width:106px;height:106px;transform:rotate(-90deg);fill:none;stroke:#e8dcc6;stroke-width:2}
#interviewRoom #roomCountdownRing{stroke:#b58e4d;stroke-dasharray:100;transition:stroke-dashoffset .1s linear}
#interviewRoom .countdown strong{font:500 22px/1 Georgia,serif;color:#7b6031}
#interviewRoom .answer-dock__progress{display:none}
#interviewRoom .recording-status{grid-column:1;grid-row:3;width:100%;display:flex;align-items:center;gap:7px;padding:12px 0 0;border:0;border-top:1px solid var(--room-line);text-align:left}
#interviewRoom .recording-status__mic{display:none}
#interviewRoom .recording-status__copy{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:normal;flex:1}
#interviewRoom .recording-status__copy strong{display:block;color:#5f7666;font-size:9px}
#interviewRoom .recording-status__copy small{display:none}
#interviewRoom .recording-status__clock{color:#8d9a91;font-size:9px;font-variant-numeric:tabular-nums}
#interviewRoom .recording-status__meter{display:flex;align-items:center;gap:2px;height:14px}
#interviewRoom .recording-status__meter i{width:2px;height:4px;border-radius:2px;background:#d2d9d2}
#interviewRoom .recording-status__meter i.is-active{background:#6f977c}

#interviewRoom .room-toolbar{min-height:82px;margin:0;padding:0 24px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;border-top:1px solid var(--room-line);background:rgba(255,255,252,.94)}
#interviewRoom .room-device-actions,#interviewRoom .interview-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#interviewRoom .room-device-actions button{min-height:38px;padding:0 11px;border:1px solid transparent;border-radius:8px;background:transparent;color:#647169;font-size:10px;box-shadow:none}
#interviewRoom .room-device-actions button:hover{border-color:#e2e6df;background:#f0f2ed}
#interviewRoom button[aria-pressed="false"]{color:#909889}
#interviewRoom .room-volume{display:flex;align-items:center;gap:7px;color:#77837b;font-size:9px}
#interviewRoom .room-volume input{width:70px;height:30px;margin:0;accent-color:#547764}
#interviewRoom .room-volume output{min-width:28px;color:#88938b;font-size:9px}
#interviewRoom .interview-actions{justify-content:flex-end;gap:10px}
#interviewRoom .controls{display:flex;gap:6px}
#interviewRoom .controls button{min-height:40px;padding:0 16px;border:1px solid var(--room-line);border-radius:8px;background:transparent;color:#506348;font-size:11px;box-shadow:none}
#interviewRoom .controls .answer-primary{min-width:132px;border-color:var(--room-green);background:var(--room-green);color:#fff;box-shadow:0 7px 17px rgba(36,77,60,.18)}
#interviewRoom .controls .answer-primary:hover:not(:disabled){transform:translateY(-1px);background:var(--room-green-deep)}
#interviewRoom .end-session{min-height:40px;padding:0 2px 0 8px;border:0;background:transparent;color:#9e655b;font-size:9px}
#interviewRoom .end-session svg{width:22px;height:22px;padding:5px;border-radius:50%;background:#f4e7e4;fill:currentColor}
#interviewRoom .end-session span{color:#9e655b}
#interviewRoom .end-session:hover:not(:disabled) svg{background:#a45449;color:#fff}
#interviewRoom .submit-hint,#interviewRoom .device-note{display:none}

/* Conversation and timed captions are intentionally unavailable in this iteration. */
#interviewRoom #roomCaptionToggle,#interviewRoom #roomHistoryToggle,#interviewRoom #roomHistory{display:none!important}
#interviewRoom .asr-inspector,#interviewRoom .latency-inspector{margin:14px 20px;padding:14px;border:1px solid var(--room-line);background:#fff;color:var(--room-ink)}
#interviewRoom button:focus-visible,#interviewRoom input:focus-visible{outline:2px solid #789467;outline-offset:3px}

@media(max-width:899px){
  body[data-product-page="interview"] .product-shell{padding-top:10px}
  #interviewRoom{max-width:512px;border-radius:12px;padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  #interviewRoom .room-bar{min-height:52px;padding:7px 11px}
  #interviewRoom .room-brand-mark{width:28px;height:28px;font-size:17px}
  #interviewRoom .room-bar #openDeviceSwitcher{display:none}
  #interviewRoom .interview-layout{display:block;padding:8px;background:#e9ebe6}
  #interviewRoom .video-frame{width:100%;height:auto;aspect-ratio:1;max-height:none;border-radius:9px}
  #interviewRoom .mobile-candidate{display:block;top:10px;right:10px;width:74px;border-radius:6px;aspect-ratio:3/4}
  #interviewRoom .mobile-candidate[hidden]{display:none}
  #interviewRoom .room-status-column{display:block;height:auto;margin-top:8px;border-radius:9px}
  #interviewRoom .candidate-side{display:none}
  #interviewRoom .answer-dock{min-height:92px;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;padding:13px 14px;text-align:left;justify-items:stretch}
  #interviewRoom .answer-dock__status{grid-column:1;grid-row:1;width:40px;height:40px;margin:0;box-shadow:none}
  #interviewRoom .answer-dock__status::before{width:34px;height:34px}
  #interviewRoom .answer-dock__copy{grid-column:2;grid-row:1;align-self:center}
  #interviewRoom .recording-status{grid-column:1/-1;grid-row:2;padding-top:9px}
  #interviewRoom .countdown{grid-column:1;grid-row:1;width:40px;height:40px;margin:0}
  #interviewRoom .countdown svg{width:40px;height:40px}
  #interviewRoom .countdown strong{font-size:13px}
  #interviewRoom .room-toolbar{position:fixed;z-index:20;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,544px);min-height:auto;margin:0;padding:5px 12px calc(8px + env(safe-area-inset-bottom));display:flex;gap:3px;background:#f4f5eff5;backdrop-filter:blur(14px)}
  #interviewRoom .room-device-actions{width:100%;justify-content:space-between;gap:0}
  #interviewRoom .room-device-actions button{padding:0 5px;font-size:10px}
  #interviewRoom .room-volume{font-size:0;gap:3px}
  #interviewRoom .room-volume input{width:45px}
  #interviewRoom .interview-actions{width:100%;justify-content:flex-end;gap:5px}
  #interviewRoom .controls{flex:1;display:flex}
  #interviewRoom .controls button{flex:1;min-height:44px}
  #interviewRoom .end-session span{position:static;width:auto;height:auto;clip:auto;overflow:visible;font-size:10px}
  #interviewRoom .end-session svg{display:none}
}
@media(prefers-reduced-motion:reduce){#interviewRoom *{animation:none!important;transition:none!important}}
