/* Soft Presence: keep the live renderer, session controls and access rules intact. */
body.interview-focus {
  --focus-top-space:100px;
  --focus-bottom-space:260px;
  --focus-controls-bottom:26px;
  background:#f1f4ef;
}
body.interview-focus .interviewer-card { background:#f1f4ef; }
body.interview-focus .studio-scene { display:contents; }
body.interview-focus .interviewer-card .stage[data-background="studio"],
.appearance-preview-dialog .appearance-preview-stage[data-background="studio"] {
  background-color:#eef2ed;
  background-image:linear-gradient(90deg,#f8fbf3df 0%,#f8faf4b3 30%,#f6faf43d 66%,#eef4f012 100%),url('./backgrounds/studio.webp');
  background-position:center,center;
  background-size:cover,cover;
  background-repeat:no-repeat;
}
body.interview-focus .stage-orb,
body.interview-focus .floor-ring,
.appearance-preview-stage > .stage-orb,
.appearance-preview-stage > .floor-ring { opacity:0; }
body.interview-focus .focus-shell {
  color:var(--sp-color-2e3e37,#2e3e37);
  font-family:"Helvetica Neue",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
}
.focus-header {
  min-height:var(--focus-top-space,100px);
  padding:calc(23px + env(safe-area-inset-top,0px)) max(38px,env(safe-area-inset-right,0px)) 23px max(38px,env(safe-area-inset-left,0px));
  background:linear-gradient(#f9fcf5f0,#f9fcf5c4 72%,#f9fcf500);
}
.focus-header::after {
  content:"";
  position:absolute;
  left:max(38px,env(safe-area-inset-left,0px));
  right:max(38px,env(safe-area-inset-right,0px));
  bottom:9px;
  height:1px;
  background:var(--sp-color-72867624,#72867624);
}
.focus-brand { gap:4px; }
.focus-eyebrow { color:var(--sp-color-607367,#607367); font-size:10px; font-weight:500; letter-spacing:.21em; }
#focus-company { color:var(--sp-color-354b3d,#354b3d); font-size:15px; font-weight:500; letter-spacing:.025em; }
#focus-role { color:var(--sp-color-607467,#607467); font-size:11px; }
#focus-mode-label { color:var(--sp-color-5d7462,#5d7462); border-color:var(--sp-color-d5e0d1,#d5e0d1); background:var(--sp-color-f4f8efdf,#f4f8efdf); font-size:10px; }
.focus-session-info { gap:14px; }
#focus-progress { color:var(--sp-color-566e5c,#566e5c); font-size:12px; }
#focus-recording {
  min-height:28px; padding:4px 10px;
  border-color:var(--sp-color-b5c4b44a,#b5c4b44a);
  background:#ffffffe0;
  color:var(--sp-color-5b7161,#5b7161);
  font-size:11px;
}
#focus-recording::before { background:var(--sp-color-8b9e8f,#8b9e8f); }
#focus-recording[data-state="recording"] { color:#965b6b; border-color:#d7b8c057; background:#fffafbe8; }
#focus-recording[data-state="recording"]::before { background:#b46f80; box-shadow:0 0 0 3px #b46f8010; }
#focus-recording[data-state="partial"] { color:#8b672e; border-color:#d7c6a85c; background:#fffaf0ed; }
.focus-intro { display:none; }
.focus-bottom {
  gap:14px;
  padding:35px max(38px,env(safe-area-inset-right,0px)) calc(26px + env(safe-area-inset-bottom,0px)) max(38px,env(safe-area-inset-left,0px));
  background:linear-gradient(#f7faf300,#f5f8f2a3 38%,#f8fbf5ed);
}
.focus-question-card {
  width:min(1000px,100%);
  padding:20px 27px 22px;
  border-color:#ffffffed;
  border-radius:22px;
  background:#ffffffd9;
  box-shadow:0 16px 48px var(--sp-color-3a5a4010,#3a5a4010),inset 0 1px 0 #fff;
  backdrop-filter:blur(24px) saturate(.8);
  -webkit-backdrop-filter:blur(24px) saturate(.8);
}
.focus-question-label { color:var(--sp-color-597561,#597561); font-size:11px; font-weight:500; letter-spacing:.08em; }
#focus-status { color:var(--sp-color-627c69,#627c69); font-size:11px; }
#focus-status::before { width:4px; height:4px; background:var(--sp-color-8da393,#8da393); }
#focus-status[data-state="speaking"]::before { background:var(--sp-color-698873,#698873); box-shadow:0 0 0 4px var(--sp-color-6988730b,#6988730b); }
#focus-status[data-state="listening"]::before { background:var(--sp-color-5d8a76,#5d8a76); box-shadow:0 0 0 4px var(--sp-color-5d8a760c,#5d8a760c); }
#focus-question {
  margin-top:10px;
  max-height:108px;
  color:var(--sp-color-334c3c,#334c3c);
  font-size:18px;
  font-weight:400;
  line-height:1.9;
  scrollbar-color:var(--sp-color-b4c4b8,#b4c4b8) transparent;
}
.focus-controls { gap:8px 15px; }
.focus-controls button {
  min-height:44px;
  padding:10px 14px;
  border:1px solid #ffffffa6;
  border-radius:100px;
  background:#ffffffe3;
  color:var(--sp-color-4c6b57,#4c6b57);
  font-size:12px;
  font-weight:400;
  box-shadow:0 3px 13px var(--sp-color-3c59430a,#3c59430a);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.focus-controls button:hover:enabled { background:#fff; border-color:var(--sp-color-b3c5b5,#b3c5b5); box-shadow:0 5px 16px var(--sp-color-3c59430d,#3c59430d); }
.focus-controls button:focus-visible { outline:2px solid var(--sp-color-607f69,#607f69); outline-offset:4px; }
#focus-mic-button { background:linear-gradient(145deg,#fff,var(--sp-color-e2ece0,#e2ece0)); color:var(--sp-color-355d42,#355d42); border-color:#fff; box-shadow:0 4px 16px var(--sp-color-40634818,#40634818),inset 0 1px 1px #fff; }
#focus-mic-button:hover:enabled { background:linear-gradient(145deg,#fff,var(--sp-color-dce8dc,#dce8dc)); }
#focus-mic-button.is-listening { background:var(--sp-color-e3efe5,#e3efe5); border-color:var(--sp-color-b7cbb9,#b7cbb9); color:var(--sp-color-325d3d,#325d3d); }
#focus-input-toggle[aria-expanded="true"] { background:var(--sp-color-e9f0e6,#e9f0e6); border-color:var(--sp-color-b3c6b2,#b3c6b2); color:var(--sp-color-365e40,#365e40); }
#focus-end-button { color:#96596b; border-color:#e2cbd17d; }
body.interview-focus .camera-preview { right:max(32px,env(safe-area-inset-right,0px)); border-radius:15px; border-color:#ffffffeb; box-shadow:0 7px 30px var(--sp-color-2d4a3520,#2d4a3520); }
body.interview-focus.focus-input-open .conversation-card {
  width:min(820px,calc(100% - 64px));
  padding:18px;
  border:1px solid #fff;
  border-radius:20px;
  background:#fdfefbf5;
  box-shadow:0 14px 60px var(--sp-color-29433224,#29433224);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}
body.interview-focus.focus-input-open .composer { border-color:var(--sp-color-c7d4c5,#c7d4c5); border-radius:12px; background:#fffffff0; }
body.interview-focus.focus-input-open .composer textarea { color:var(--sp-color-34523d,#34523d); }
body.interview-focus.focus-input-open .focus-question-card { width:min(820px,calc(100% - 64px)); border-radius:17px; }
body.interview-focus.focus-input-open .input-note,
body.interview-focus.focus-input-open .auto-answer-choice { color:var(--sp-color-607968,#607968); font-size:11px; }
body.interview-focus .live-microphone-panel { color:var(--sp-color-526f5b,#526f5b); border-color:var(--sp-color-b5c9b94d,#b5c9b94d); background:#f4f9f2b3; }
body.interview-focus :is(#focus-turn-hint,#session-turn-hint),
body.interview-focus .microphone-device-name { color:var(--sp-color-58715f,#58715f); }
body.interview-focus .microphone-settings summary { color:var(--sp-color-496951,#496951); }

/* Appearance-only preview uses the same material language, with no session side effects. */
.appearance-preview-dialog,.appearance-preview-dialog::backdrop { background:#f0f4ed; color:var(--sp-color-354c3c,#354c3c); }
.appearance-preview-header {
  padding:calc(23px + env(safe-area-inset-top,0px)) max(38px,env(safe-area-inset-right,0px)) 28px max(38px,env(safe-area-inset-left,0px));
  background:linear-gradient(#f9fcf4f5,#f9fcf4cc 72%,#f9fcf400);
}
.appearance-preview-eyebrow { color:var(--sp-color-647d69,#647d69); font-size:10px; font-weight:500; letter-spacing:.18em; }
.appearance-preview-heading h1 { color:var(--sp-color-36543e,#36543e); font-size:20px; font-weight:400; letter-spacing:.03em; }
.appearance-preview-heading>p { color:var(--sp-color-66806d,#66806d); font-size:11px; }
.appearance-preview-dialog button { min-height:44px; padding:10px 17px; border:1px solid #ffffffd9; border-radius:100px; background:#ffffffe6; color:var(--sp-color-4c6d57,#4c6d57); font-size:12px; box-shadow:0 4px 16px var(--sp-color-3c59430a,#3c59430a); }
.appearance-preview-dialog button:hover:enabled { border-color:var(--sp-color-afc5b1,#afc5b1); background:#fff; }
.appearance-preview-dialog button:focus-visible { outline:2px solid var(--sp-color-607f69,#607f69); outline-offset:4px; }
.appearance-preview-dialog .appearance-preview-return { background:var(--sp-color-edf4e9,#edf4e9); border-color:var(--sp-color-b8cdb68c,#b8cdb68c); color:var(--sp-color-335d3c,#335d3c); }
.appearance-preview-dialog .appearance-preview-return:hover:enabled { background:var(--sp-color-e3eedf,#e3eedf); border-color:var(--sp-color-a5bda2,#a5bda2); }
.appearance-preview-bottom { gap:10px; padding:40px max(38px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(38px,env(safe-area-inset-left,0px)); background:linear-gradient(#f7faf300,#f5f8f2b3 38%,#f8fbf5f2); }
.appearance-preview-sample { width:min(1000px,100%); padding:20px 27px 22px; border-radius:22px; background:#ffffffe0; box-shadow:0 16px 48px var(--sp-color-3a5a4010,#3a5a4010),inset 0 1px 0 #fff; backdrop-filter:blur(24px) saturate(.8); -webkit-backdrop-filter:blur(24px) saturate(.8); }
.appearance-preview-sample-heading { font-size:11px; color:var(--sp-color-66816e,#66816e); }
.appearance-preview-sample-heading strong { font-size:11px; font-weight:500; letter-spacing:.08em; color:var(--sp-color-55745f,#55745f); }
.appearance-preview-sample>p { color:var(--sp-color-34513d,#34513d); font-size:18px; font-weight:400; line-height:1.9; }
.appearance-preview-controls { gap:10px; }
.appearance-preview-controls button { min-width:90px; }
.appearance-preview-status { color:var(--sp-color-56735f,#56735f); font-size:11px; }
.appearance-preview-notice { color:var(--sp-color-6b8170,#6b8170); font-size:11px; }

@media (min-width:901px) and (min-height:761px) {
  body.interview-focus .interviewer-card .stage>#avatar-canvas { left:34%; right:0; width:66%; }
  body.interview-focus .interviewer-card .stage[data-background]:not([data-background="studio"])::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#f8fbf2f5,#f8fbf2ba 30%,#f8fbf200 66%); }
  .focus-intro { display:block; position:absolute; top:calc(var(--focus-top-space) + 12vh); left:max(48px,env(safe-area-inset-left,0px)); width:34%; max-width:450px; padding-right:24px; }
  .focus-intro .focus-intro-label { display:flex; align-items:center; gap:12px; color:var(--sp-color-607b67,#607b67); font-size:11px; letter-spacing:.12em; }
  .focus-intro .focus-intro-label::before { content:""; width:25px; height:1px; background:var(--sp-color-6c876e73,#6c876e73); }
  .focus-intro .focus-intro-title { display:block; margin:26px 0 18px; font-size:clamp(28px,3.15vw,48px); font-weight:300; line-height:1.85; letter-spacing:.005em; color:var(--sp-color-314738,#314738); }
  .focus-intro p { margin:0; color:var(--sp-color-5e7866,#5e7866); font-size:13px; line-height:2.1; }
}
@media(max-width:900px) {
  .focus-header { padding-left:max(24px,env(safe-area-inset-left,0px)); padding-right:max(24px,env(safe-area-inset-right,0px)); }
  .focus-header::after { left:24px; right:24px; }
  .focus-bottom { padding-left:max(24px,env(safe-area-inset-left,0px)); padding-right:max(24px,env(safe-area-inset-right,0px)); }
}
@media(max-width:650px) {
  body.interview-focus { --focus-top-space:90px; --focus-bottom-space:282px; --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)) 22px max(17px,env(safe-area-inset-left,0px)); }
  .focus-header::after { left:17px; right:17px; bottom:8px; }
  .focus-brand { max-width:61%; }
  .focus-eyebrow { font-size:9px; letter-spacing:.13em; }
  #focus-company { font-size:13px; }
  #focus-role,#focus-progress { font-size:11px; }
  #focus-recording { font-size:10px; min-height:25px; padding:3px 8px; }
  .focus-session-info { gap:7px; }
  .focus-bottom { gap:10px; padding:25px 15px calc(17px + env(safe-area-inset-bottom,0px)); }
  .focus-question-card { padding:15px 17px 17px; border-radius:18px; }
  .focus-question-label,#focus-status { font-size:10px; }
  #focus-question { font-size:16px; max-height:116px; line-height:1.85; }
  .focus-controls { gap:6px; }
  .focus-controls button { min-height:44px; padding:9px 12px; font-size:11px; }
  .focus-controls #focus-window-button { font-size:11px; }
  body.interview-focus.focus-input-open .conversation-card,body.interview-focus.focus-input-open .focus-question-card { width:calc(100% - 30px); }
  body.interview-focus.focus-input-open .conversation-card { padding:13px; border-radius:17px; }
  body.interview-focus.focus-input-open .composer textarea { font-size:16px; }
  .appearance-preview-header { padding:calc(16px + env(safe-area-inset-top,0px)) 17px 23px; gap:12px; }
  .appearance-preview-heading h1 { font-size:17px; }
  .appearance-preview-eyebrow { font-size:9px; }
  .appearance-preview-heading>p { font-size:10px; max-width:190px; }
  .appearance-preview-head-actions { gap:6px; max-width:148px; }
  .appearance-preview-dialog button { min-height:44px; font-size:11px; padding:9px 12px; }
  .appearance-preview-bottom { padding:27px 15px calc(17px + env(safe-area-inset-bottom,0px)); gap:8px; }
  .appearance-preview-sample { padding:15px 17px 17px; border-radius:18px; }
  .appearance-preview-sample-heading { align-items:flex-start; font-size:10px; gap:12px; }
  .appearance-preview-sample-heading strong { font-size:10px; flex:none; }
  .appearance-preview-sample>p { font-size:16px; line-height:1.85; }
  .appearance-preview-controls { gap:7px; }
  .appearance-preview-controls button { min-width:78px; }
  .appearance-preview-status,.appearance-preview-notice { font-size:10px; }
}
@media(max-height:570px) and (min-width:651px) {
  body.interview-focus { --focus-top-space:60px; --focus-bottom-space:180px; --focus-controls-bottom:13px; }
  .focus-header { padding-top:12px; padding-bottom:12px; }
  .focus-header::after { bottom:0; }
  .focus-bottom { padding-top:15px; padding-bottom:13px; gap:8px; }
  .focus-question-card { width:min(1000px,100%); padding:11px 18px; border-radius:17px; }
  #focus-question { font-size:15px; max-height:64px; margin-top:6px; line-height:1.7; }
  .focus-controls { gap:8px; }
  .focus-controls button { min-height:36px; padding:7px 13px; font-size:11px; }
  .appearance-preview-header { padding-top:12px; }
  .appearance-preview-heading h1 { font-size:17px; }
  .appearance-preview-bottom { padding-top:22px; padding-bottom:12px; gap:7px; }
  .appearance-preview-sample { padding:11px 18px; border-radius:17px; }
  .appearance-preview-sample>p { font-size:15px; line-height:1.7; }
  .appearance-preview-dialog button { min-height:36px; padding:7px 13px; font-size:11px; }
}
@media(prefers-reduced-transparency:reduce) {
  .focus-question-card,.focus-controls button,.appearance-preview-sample,.appearance-preview-dialog button,
  body.interview-focus.focus-input-open .conversation-card { background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media(prefers-reduced-motion:reduce) {
  .focus-controls button,.appearance-preview-dialog button { transition:none; }
}
