/* The existing renderer and answer form stay in their original DOM locations. */
.focus-shell[hidden], .focus-resume-banner[hidden], .focus-shell [hidden] { display:none !important; }
.focus-shell { display:none; }
.focus-resume-banner {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:0 0 20px; padding:15px 18px; border:1px solid #dcd6ef; border-radius:14px;
  background:#f0ecfa; color:#514770; font-size:13px; line-height:1.6;
}
.focus-resume-banner button {
  flex:none; min-height:40px; padding:9px 15px; border:0; border-radius:9px;
  background:#6d5bd0; color:#fff; font:inherit; font-weight:600; cursor:pointer;
}
body.interview-focus {
  --focus-top-space:84px; --focus-bottom-space:240px;
  --focus-controls-height:42px; --focus-controls-bottom:23px;
  --focus-drawer-bottom:calc(var(--focus-controls-height) + var(--focus-controls-bottom) + 16px + env(safe-area-inset-bottom,0px));
  overflow:hidden; overscroll-behavior:none; background:#f5f2fb;
}
body.interview-focus .rail,
body.interview-focus .topbar,
body.interview-focus .page-heading,
body.interview-focus .interview-meta,
body.interview-focus .room-footer,
body.interview-focus .stage-top,
body.interview-focus .stage-caption,
body.interview-focus .stage-toolbar,
body.interview-focus .capture-strip,
body.interview-focus .session-strip,
body.interview-focus .focus-resume-banner { display:none !important; }
body.interview-focus .workspace { margin:0; }
body.interview-focus main { max-width:none; margin:0; padding:0; }
body.interview-focus .room-layout { display:block; }
body.interview-focus .interviewer-card {
  position:fixed; inset:0; z-index:30; width:100%; height:100vh; height:100dvh;
  min-height:0; margin:0; border:0; border-radius:0; box-shadow:none;
  background:#f5f2fb;
}
body.interview-focus .interviewer-card .stage {
  flex:1 1 auto; width:100%; height:100%; min-height:0;
  background:radial-gradient(ellipse at 50% 43%,#e9e3f7 0%,#f5f1fb 42%,#faf9fd 78%);
}
body.interview-focus .model-note { display:none; }
body.interview-focus .stage-orb { opacity:.45; }
body.interview-focus .floor-ring { opacity:.25; }
body.interview-focus .camera-preview {
  top:calc(var(--focus-top-space) + env(safe-area-inset-top,0px) + 12px);
  right:max(26px,env(safe-area-inset-right,0px)); bottom:auto;
  width:clamp(112px,13vw,184px); border:3px solid #fff; border-radius:14px;
  box-shadow:0 5px 26px #35264c1c;
}
body.interview-focus .camera-preview > span { font-size:8px; padding:4px 6px; }
body.interview-focus .focus-shell {
  position:fixed; inset:0; z-index:40; display:block; height:100vh; height:100dvh;
  color:#353044; pointer-events:none;
}
.focus-header {
  position:absolute; inset:0 0 auto; min-height:var(--focus-top-space,84px); box-sizing:border-box;
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:calc(21px + env(safe-area-inset-top,0px)) max(30px,env(safe-area-inset-right,0px)) 20px max(30px,env(safe-area-inset-left,0px));
  background:linear-gradient(#faf9fde8,#faf9fdbf 70%,#faf9fd00);
}
.focus-brand { display:flex; flex-direction:column; min-width:0; gap:3px; }
.focus-eyebrow { color:#827192; font-size:9px; font-weight:650; letter-spacing:.18em; }
#focus-company { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:#3d3451; font-size:15px; line-height:1.45; font-weight:650; overflow-wrap:anywhere; }
#focus-role { color:#766a85; font-size:11px; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.focus-session-info { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; flex:none; gap:10px; padding-top:8px; }
#focus-progress { color:#736982; font-size:11px; letter-spacing:.03em; white-space:nowrap; }
#focus-recording {
  display:inline-flex; align-items:center; gap:6px; min-height:27px;
  padding:3px 10px; border:1px solid #e1dce9; border-radius:20px;
  background:#ffffffbd; color:#74687f; font-size:10px; letter-spacing:.02em; white-space:nowrap;
}
#focus-recording::before { content:''; width:5px; height:5px; flex:none; border-radius:50%; background:#aaa1b5; }
#focus-recording[data-state="recording"] { color:#a9566a; border-color:#efdce1; background:#fff9facf; }
#focus-recording[data-state="recording"]::before { background:#c86c80; box-shadow:0 0 0 3px #c86c8012; }
#focus-recording[data-state="partial"] { color:#9b702e; border-color:#e9dac1; background:#fffaf1e8; }
#focus-recording[data-state="partial"]::before { background:#b78a44; }
.focus-bottom {
  position:absolute; right:0; bottom:0; left:0; display:flex; flex-direction:column; align-items:center; gap:13px;
  padding:36px max(28px,env(safe-area-inset-right,0px)) calc(23px + env(safe-area-inset-bottom,0px)) max(28px,env(safe-area-inset-left,0px));
  background:linear-gradient(#f8f6fc00,#f8f6fcbf 33%,#faf9fdf2);
}
.focus-question-card {
  width:min(720px,100%); box-sizing:border-box; padding:17px 23px 18px;
  border:1px solid #ffffff; border-radius:18px; background:#ffffffde;
  box-shadow:0 6px 35px #3c285a0a; backdrop-filter:blur(18px); pointer-events:auto;
}
.focus-question-label { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#75628f; font-size:10px; font-weight:650; letter-spacing:.05em; }
#focus-status { display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; color:#756781; font-size:10px; font-weight:400; letter-spacing:0; text-align:right; }
#focus-status::before { content:''; flex:none; width:5px; height:5px; border-radius:50%; background:#a89bb7; }
#focus-status[data-state="speaking"]::before { background:#8e7ac3; box-shadow:0 0 0 3px #8e7ac312; }
#focus-status[data-state="listening"]::before { background:#6d9e90; box-shadow:0 0 0 3px #6d9e9015; }
#focus-question { margin:9px 0 0; max-height:105px; overflow:auto; overscroll-behavior:contain; color:#443b51; font-size:19px; font-weight:500; line-height:1.8; overflow-wrap:anywhere; scrollbar-width:thin; scrollbar-color:#d7d0e6 transparent; }
.focus-controls { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; pointer-events:auto; }
.focus-controls button {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; box-sizing:border-box;
  padding:10px 15px; border:1px solid #e5dfed; border-radius:11px;
  background:#ffffffd9; color:#6f617c; font:inherit; font-size:11px; line-height:1.4; cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.focus-controls button svg { width:15px; height:15px; }
.focus-controls button:hover { background:#fff; border-color:#cfc3e0; }
.focus-controls button:disabled { opacity:.5; cursor:default; }
.focus-controls button:focus-visible, .focus-resume-banner button:focus-visible { outline:3px solid #b7a9e5; outline-offset:3px; }
#focus-mic-button { color:#fff; border-color:#7865ba; background:#7865ba; box-shadow:0 3px 12px #7865ba16; }
#focus-mic-button:hover { background:#6e5aaa; }
#focus-mic-button.is-listening { background:#537f73; border-color:#537f73; }
#focus-input-toggle[aria-expanded="true"] { color:#6d5b93; border-color:#bfb1d6; background:#f0eaf9; }
#focus-end-button { color:#ac7180; border-color:#e9dce1; }
body.interview-focus .conversation-card { display:none; }
body.interview-focus.focus-input-open .conversation-card {
  position:fixed; z-index:45; bottom:var(--focus-drawer-bottom);
  left:50%; transform:translateX(-50%); display:flex; width:min(720px,calc(100% - 48px));
  height:auto; max-height:calc(100dvh - var(--focus-top-space) - var(--focus-controls-height) - 150px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); min-height:0;
  padding:16px; box-sizing:border-box; border:1px solid #e9e3f1; border-radius:18px;
  background:#fffffff5; box-shadow:0 12px 60px #34224421; overflow:auto;
}
body.interview-focus.focus-input-open .conversation-header,
body.interview-focus.focus-input-open .progress-block,
body.interview-focus.focus-input-open .messages { display:none; }
body.interview-focus.focus-input-open .composer { flex:none; margin:0; border-color:#dfd6eb; background:white; }
body.interview-focus.focus-input-open .composer textarea { min-height:100px; max-height:27dvh; font-size:14px; line-height:1.8; }
body.interview-focus.focus-input-open .auto-answer-choice { margin:12px 1px 0; font-size:10px; }
body.interview-focus.focus-input-open .input-note { margin:8px 1px 0; font-size:10px; line-height:1.7; }
body.interview-focus.focus-input-open .focus-question-card {
  position:fixed; left:50%; bottom:calc(var(--focus-drawer-bottom) + var(--focus-drawer-height,220px) + 10px);
  transform:translateX(-50%); width:min(720px,calc(100% - 48px)); padding:12px 18px; border-radius:14px;
  pointer-events:auto;
}
body.interview-focus.focus-input-open #focus-question { max-height:68px; margin-top:6px; font-size:14px; line-height:1.6; }
body.interview-focus .notice { z-index:80; left:50%; width:auto; max-width:min(600px,calc(100% - 48px)); bottom:calc(86px + env(safe-area-inset-bottom,0px)); }
body.interview-focus dialog { z-index:100; }

@media (max-width:650px) {
  body.interview-focus { --focus-top-space:76px; --focus-bottom-space:250px; --focus-controls-height:84px; --focus-controls-bottom:17px; }
  .focus-header { gap:12px; padding:calc(17px + env(safe-area-inset-top,0px)) max(17px,env(safe-area-inset-right,0px)) 16px max(17px,env(safe-area-inset-left,0px)); }
  .focus-brand { max-width:65%; }
  .focus-eyebrow { font-size:8px; }
  #focus-company { font-size:13px; }
  #focus-role { font-size:10px; }
  .focus-session-info { flex-direction:column; align-items:flex-end; gap:7px; padding-top:1px; }
  #focus-progress { font-size:10px; }
  #focus-recording { min-height:23px; padding:2px 8px; font-size:9px; }
  body.interview-focus .camera-preview { right:max(16px,env(safe-area-inset-right,0px)); width:100px; border-width:2px; border-radius:11px; }
  body.interview-focus .camera-preview > span { font-size:6px; }
  .focus-bottom { gap:11px; padding:24px max(15px,env(safe-area-inset-right,0px)) calc(17px + env(safe-area-inset-bottom,0px)) max(15px,env(safe-area-inset-left,0px)); }
  .focus-question-card { padding:14px 16px 15px; border-radius:15px; }
  .focus-question-label { font-size:9px; gap:8px; }
  #focus-status { font-size:9px; }
  #focus-question { margin-top:8px; max-height:113px; font-size:16px; line-height:1.8; }
  .focus-controls { gap:6px; }
  .focus-controls button { min-height:39px; padding:8px 10px; font-size:10px; gap:5px; border-radius:9px; }
  .focus-controls button svg { width:13px; height:13px; }
  body.interview-focus.focus-input-open .conversation-card { width:calc(100% - 30px); padding:12px; border-radius:15px; }
  body.interview-focus.focus-input-open .focus-question-card { width:calc(100% - 30px); padding:11px 14px; }
  body.interview-focus.focus-input-open #focus-question { font-size:13px; max-height:63px; }
  body.interview-focus.focus-input-open .composer textarea { min-height:80px; }
  body.interview-focus.focus-input-open .shortcut { display:none; }
  body.interview-focus .notice { max-width:calc(100% - 30px); font-size:11px; }
  .focus-resume-banner { align-items:flex-start; flex-direction:column; gap:10px; font-size:12px; }
}
@media (max-width:380px) {
  .focus-controls { max-width:300px; }
  .focus-controls button { padding:8px 10px; }
  .focus-controls #focus-window-button { font-size:9px; }
  body.interview-focus .camera-preview { width:84px; }
}
@media (max-height:570px) and (min-width:651px) {
  body.interview-focus { --focus-top-space:60px; --focus-bottom-space:175px; --focus-controls-height:36px; --focus-controls-bottom:13px; }
  .focus-header { padding-top:12px; }
  .focus-eyebrow, #focus-role { display:none; }
  body.interview-focus .camera-preview { top:74px; width:105px; }
  .focus-bottom { padding-top:15px; padding-bottom:13px; gap:9px; }
  .focus-question-card { width:min(660px,80%); padding:11px 17px; }
  #focus-question { margin-top:5px; max-height:67px; font-size:15px; line-height:1.65; }
  .focus-controls button { min-height:36px; padding:7px 12px; }
  body.interview-focus.focus-input-open .conversation-card { padding:10px; }
  body.interview-focus.focus-input-open .focus-question-card { padding:8px 14px; }
  body.interview-focus.focus-input-open #focus-question { max-height:44px; font-size:12px; }
  body.interview-focus.focus-input-open .composer textarea { min-height:55px; }
}
@media (prefers-reduced-transparency:reduce) {
  .focus-question-card, .focus-controls button { background:#fff; backdrop-filter:none; }
}
