#ai-demo,
#ai-demo * {
  box-sizing: border-box;
}

#ai-demo {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Noto Sans JP",
    Arial,
    sans-serif;

  background:
    url("https://storage.googleapis.com/studio-design-asset-files/projects/7kadMxM9W3/s-3200x1640_v-frms_webp_88984301-a985-4d64-baaa-885f9d598c8d.png")
    center / cover no-repeat;
}


/* ==============================
   TITLE
============================== */

#demo-title-screen {
  position: fixed;
  inset: 0;
  z-index: 1000100;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px;

  background: rgba(247,248,252,.9);
  backdrop-filter: blur(6px);

  text-align: center;

  transition: opacity .35s ease;
}

#demo-title-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.demo-title-inner {
  width: 100%;
  max-width: 600px;
}

.demo-title-logo {
  margin-bottom: 32px;

  font-size: 28px;
  font-weight: 800;
  font-style: italic;

  background:
    linear-gradient(
      100deg,
      #ff68ae,
      #f461bd 45%,
      #7874ff
    );

  -webkit-background-clip: text;
  color: transparent;
}

.demo-title-heading {
  margin: 0 0 18px;

  font-size: 32px;
  line-height: 1.45;

  color: #202020;
}

.demo-title-description {
  margin: 0 0 30px;

  font-size: 15px;
  line-height: 1.9;

  color: #596273;
}

.demo-title-start {
  width: 230px;
  height: 54px;

  border: 0;
  border-radius: 8px;

  background: #7c35ee;
  color: #fff;

  font: inherit;
  font-size: 16px;
  font-weight: 600;

  cursor: pointer;
}

.demo-title-admin {
  display: block;

  margin: 17px auto 0;

  border: 0;
  background: transparent;

  color: #706b79;

  font: inherit;
  font-size: 13px;

  text-decoration: underline;
  text-underline-offset: 4px;

  cursor: pointer;
}


/* ==============================
   STAGE
============================== */

.ai-stage {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;
}


/* ==============================
   PHONE
============================== */

.ai-phone {
  position: relative;

  width: min(
    584px,
    calc((100vh - 40px) * 0.5105)
  );

  aspect-ratio: 584 / 1144;

  padding: 12px;

  background: #111;

  border-radius: 68px;

  box-shadow:
    0 24px 65px rgba(0,0,0,.22);
}

.ai-screen {
  position: relative;

  width: 100%;
  height: 100%;

  aspect-ratio: 560 / 1120;

  overflow: hidden;

  border-radius: 56px;

  background: #f7f8fc;
}


/* ==============================
   INTERVIEW
============================== */

#interview-screen {
  position: absolute;
  inset: 0;

  display: none;

  overflow: hidden;

  background: #000;
}

#interview-screen.active {
  display: block;
}


/* ==============================
   AVATAR VIDEO
============================== */

.avatar-wrap {
  position: absolute;
  inset: 0;

  z-index: 1;

  background: #000;
}

.avatar-video {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center center;
}


/* ==============================
   INTERVIEW HEADER
============================== */

.interview-header {
  position: absolute;

  top: 0;
  left: 0;

  z-index: 50;

  width: 100%;

  pointer-events: none;
}

.interview-header img {
  width: 100%;
  height: auto;

  display: block;
}


/* ==============================
   USER CAMERA
============================== */

.user-camera {
  position: absolute;

  top: calc(16.55cqw + 3.2cqw);
  right: 3.2cqw;

  z-index: 70;

  width: 29%;
  aspect-ratio: 1 / 2;

  overflow: hidden;

  border:
    2px
    solid
    rgba(255,255,255,.9);

  border-radius: 12px;

  background: #111;

  box-shadow:
    0 4px 14px rgba(0,0,0,.22);

  transform-origin: top right;

  transition:
    width .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.user-camera video {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform: scaleX(-1);
}


/* 回答ターン */

#interview-screen.answering .user-camera {
  width: 34.8%;

  border-color: #42e693;

  box-shadow:
    0 0 0 3px rgba(66,230,147,.5),
    0 0 18px rgba(66,230,147,.85),
    0 0 36px rgba(66,230,147,.5);
}


/* ==============================
   ANSWER UI
============================== */

.answer-ui {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 50px;

  z-index: 80;

  width: 100%;

  padding:
    0
    16px;

  opacity: 1;
  visibility: visible;
}


/* 回答中 / 時間は非表示 */

.answer-info {
  display: none;
}


/* ==============================
   ANSWER BUTTON
============================== */

.answer-button {
  display: block;

  width: 100%;
  height: 56px;

  margin: 0;

  border: 0;
  border-radius: 8px;

  background: #c8c4ce;

  color: rgba(255,255,255,.75);

  font: inherit;
  font-size: 18px;
  font-weight: 600;

  cursor: default;

  box-shadow:
    0 4px 14px rgba(0,0,0,.15);

  transition:
    background .25s ease,
    color .25s ease;
}

#interview-screen.answering .answer-button {
  background: #7c35ee;

  color: #fff;

  cursor: pointer;

  box-shadow:
    0 5px 18px rgba(124,53,238,.35);
}


/* ==============================
   COMPLETE
============================== */

#complete-screen {
  position: fixed;
  inset: 0;

  z-index: 1000001;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px;

  background: #f7f8fc;

  text-align: center;

  opacity: 0;
  visibility: hidden;

  transform: translateY(60px);

  transition:
    opacity .45s ease,
    transform .5s ease;
}

#complete-screen.active {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);
}

.complete-inner {
  width: 100%;
  max-width: 700px;
}

.complete-check {
  width: 68px;
  height: 68px;

  margin:
    0
    auto
    30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #7c35ee;

  color: #fff;

  font-size: 36px;
  font-weight: 700;
}

.complete-title {
  margin:
    0
    0
    20px;

  font-size: 27px;
  line-height: 1.5;

  color: #111;
}

.complete-text {
  margin:
    0
    0
    26px;

  font-size: 13px;
  line-height: 1.7;

  color: #62626b;
}

.evaluation-button {
  min-width: 220px;
  height: 50px;

  padding:
    0
    24px;

  border: 0;
  border-radius: 8px;

  background: #7c35ee;

  color: #fff;

  font: inherit;
  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
}


/* ==============================
   CAMERA / MIC ERROR
============================== */

#media-permission-dialog {
  position: fixed;
  inset: 0;

  z-index: 2000000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background: rgba(0,0,0,.48);
}

.media-permission-box {
  width: 100%;
  max-width: 420px;

  padding:
    32px
    28px;

  border-radius: 16px;

  background: #fff;

  text-align: center;

  box-shadow:
    0 20px 60px rgba(0,0,0,.22);
}

.media-permission-icon {
  margin-bottom: 14px;

  font-size: 36px;
}

.media-permission-title {
  margin-bottom: 12px;

  font-size: 20px;
  font-weight: 700;

  color: #222;
}

.media-permission-text {
  margin-bottom: 24px;

  font-size: 14px;
  line-height: 1.7;

  color: #666;
}

.media-permission-button {
  width: 100%;
  height: 48px;

  border: 0;
  border-radius: 8px;

  background: #7c35ee;

  color: #fff;

  font-size: 15px;
  font-weight: 600;

  cursor: pointer;
}

.demo-title-start:disabled {
  cursor: wait;
  opacity: .7;
}

.media-permission-dismiss {
  display: block;
  margin: 16px auto 0;
  padding: 4px;
  border: 0;
  background: transparent;
  color: #706b79;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* Avatar interview overlays, independent of the applicant detail screen. */
.interview-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.interview-status { padding: 5px 12px; border-radius: 999px; background: #7c35ee; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.5; }
#interview-screen.answering .interview-status { background: #16a34a; }
.interview-subtitle { width: 100%; padding: 12px 14px; border: 1px solid rgba(255,255,255,.4); border-radius: 16px; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
#playback-message:empty { display: none; }
#playback-message { background: rgba(0,0,0,.75); color: white; padding: 8px; border-radius: 8px; font-size: 12px; }
#playback-retry { width: 100%; margin-bottom: 8px; padding: 10px; border: 0; border-radius: 8px; background: #7c35ee; color: #fff; font: inherit; cursor: pointer; }
.answer-button:focus-visible, #playback-retry:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 480px) {
  .ai-stage { padding: 8px; }
  .ai-phone { width: min(calc(100vw - 16px), calc((100dvh - 16px) * .5105)); padding: 8px; border-radius: 36px; }
  .ai-screen { border-radius: 28px; }
  .answer-ui { bottom: 24px; padding: 0 12px; }
  .interview-subtitle { padding: 10px 12px; font-size: 12px; }
  .answer-button { height: 48px; font-size: 15px; }
}

/* Reserve full subtitle height while revealing characters to avoid UI jumps. */
.interview-subtitle-box { display: grid; width: 100%; }
.interview-subtitle-box::before { content: attr(data-full-subtitle); visibility: hidden; }
.interview-subtitle-box::before, .interview-subtitle-box > .interview-subtitle { grid-area: 1 / 1; }
.interview-subtitle-box::before { padding: 12px 14px; border: 1px solid transparent; font-size: 14px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .interview-subtitle-box::before { padding: 10px 12px; font-size: 12px; }
}

/* Scale overlays against the displayed interview frame, as in the reference. */
.ai-screen { container-type: inline-size; }
.interview-brand { position: absolute; z-index: 60; top: calc(16.55cqw + 3.2cqw); left: 3.2cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 3cqw; color: #fff; }
.interview-brand img { display: block; width: 30cqw; height: auto; }
.interview-progress { display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: #fff; border: 2px solid #a78bfa; color: #8b5cf6; font-size: 3cqw; font-weight: 600; }
#interview-step-title { font-size: 3.5cqw; line-height: 1.5; font-weight: 500; text-shadow: 0 1px 4px #0004; }
.interview-status { font-size: 3.2cqw; font-weight: 500; padding: 1.3cqw 3.2cqw; }
.interview-subtitle, .interview-subtitle-box::before { font-size: 3.7cqw; font-weight: 400; line-height: 1.65; padding: 2.7cqw 3.2cqw; }

#playback-retry { font-weight: 600; }

/* Start screen: camera check and concise demo reassurance. */
#demo-title-screen { overflow-y: auto; padding: 24px; }
.demo-title-inner { margin: auto; }
.demo-camera-preview { position: relative; width: clamp(130px, 20vh, 220px); aspect-ratio: 3 / 4; margin: 0 auto 32px; overflow: hidden; border-radius: 16px; background: #e2e8f0; border: 1px solid #cbd5e1; }
#preview-camera { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
#preview-camera-enable { position: absolute; inset: 0; width: 100%; border: 0; background: #e2e8f0; color: #475569; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
#preview-camera-enable[hidden] { display: none; }
.demo-camera-caption { position: absolute; bottom: 8px; left: 0; right: 0; font-size: 11px; color: #fff; text-shadow: 0 1px 4px #000; pointer-events: none; }
#preview-camera-message { margin: 0 0 16px; font-size: 12px; color: #64748b; }
#preview-camera-message:empty { display: none; }
.demo-title-logo { margin-bottom: 20px; }
.demo-title-description { margin-bottom: 16px; font-size: 14px; }
.demo-privacy-note { margin: 0 auto 24px; max-width: 520px; padding: 16px 20px; border: 1px solid #c4b5fd; border-radius: 12px; background: #f5f3ff; color: #5b5475; font-size: 14px; font-weight: 500; line-height: 1.8; }
.demo-privacy-note strong { display: block; color: #6d28d9; font-weight: 500; margin-bottom: 4px; }
.demo-privacy-note span { display: block; }
#demo-title-start { font-weight: 600; }
@media (max-width: 480px) {
  #demo-title-screen { padding: 20px 16px; }
  .demo-title-heading { font-size: 24px; }
  .demo-camera-preview { margin-bottom: 24px; }
}

/* Figma: pre-interview, camera unavailable, and completion screens. */
#demo-title-screen, #complete-screen { font-family: "Noto Sans JP", sans-serif; background: #f7f8fc; padding: 32px 24px; overflow-y: auto; }
#demo-title-screen { backdrop-filter: none; }
.demo-title-inner { display: flex; align-items: center; gap: 80px; width: 720px; max-width: 100%; margin: auto; text-align: left; }
.demo-title-copy { display: flex; flex-direction: column; gap: 32px; width: 400px; flex: 0 0 400px; }
#demo-title-screen .demo-title-logo { margin: 0; background: none; line-height: 0; }
#demo-title-screen .demo-title-logo img { display: block; width: 177px; height: 28px; margin: 0; }
.demo-title-heading { margin: 0; color: #0f1729; font-size: 40px; font-weight: 700; line-height: 58px; }
.demo-title-actions { display: flex; flex-direction: column; gap: 16px; }
.demo-title-description { margin: 0; color: #344154; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: .05em; }
.demo-privacy-note { width: 100%; max-width: none; margin: 0; padding: 16px; border: 1px solid #bb94f8; border-radius: 8px; background: #f7f3ff; color: #344154; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: .05em; }
.demo-privacy-note strong { margin: 0 0 16px; color: #7740ea; font-size: 16px; font-weight: 600; line-height: 23px; }
.demo-title-start { width: 100%; height: auto; min-height: 43px; padding: 10px 32px; border-radius: 8px; background: #7740ea; font-size: 16px; line-height: 23px; }
.demo-camera-column { display: flex; flex-direction: column; gap: 16px; width: 240px; flex: 0 0 240px; }
.demo-camera-preview { width: 240px; height: 400px; aspect-ratio: auto; margin: 0; border: 0; border-radius: 16px; background: #c4cbd5; }
.demo-camera-caption { bottom: 0; padding: 8px; font-size: 12px; font-weight: 600; line-height: 17px; letter-spacing: .05em; text-align: center; text-shadow: 1px 1px 2px rgba(0,0,0,.3); }
#preview-camera-message { margin: 0; color: #344154; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: .05em; }
#preview-camera-enable { position: static; width: 100%; padding: 10px 32px; border-radius: 8px; background: #ef3a3d; color: #fff; font-size: 16px; font-weight: 600; line-height: 23px; }
.complete-inner { display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 900px; margin: auto; }
.complete-check { width: 80px; height: 80px; margin: 0; background: transparent; flex-shrink: 0; }
.complete-check img { display: block; }
.complete-title { margin: 0; color: #000; font-size: 32px; font-weight: 600; line-height: 46px; }
.complete-text { margin: 0; color: rgba(0,0,0,.7); font-size: 20px; font-weight: 500; line-height: 30px; }
.evaluation-button { min-width: 0; height: auto; padding: 10px 32px; background: #7740ea; font-family: inherit; font-size: 20px; font-weight: 600; line-height: 29px; }
@media (max-width: 767px) {
  .demo-title-inner { flex-direction: column; gap: 32px; width: 400px; }
  .demo-title-copy { width: 100%; flex-basis: auto; }
  .demo-camera-column { flex-basis: auto; }
  .demo-title-heading { font-size: clamp(26px, 5.2vw, 40px); line-height: 1.45; }
  .complete-title { font-size: clamp(24px, 5.2vw, 32px); line-height: 1.45; }
  .complete-text { font-size: 16px; line-height: 24px; }
}