/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    width:  100%;
    background: #f4f4f4;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

/* ── Full-screen host ─────────────────────────────────────── */
#cavi-host {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    width:           100vw;
    height:          100vh;   /* fallback for older iOS */
    height:          100dvh;  /* excludes browser toolbar on modern browsers */
    background:      #f4f4f4;
}

/* ── 9:16 content panel ───────────────────────────────────── */
/* dvh overrides ensure the panel fits the visible viewport,
   not the area behind the address bar/toolbar. */
#cavi-panel {
    position:   relative;
    width:      min(100vw, calc(100vh  * 9 / 16));
    width:      min(100vw, calc(100dvh * 9 / 16));
    height:     min(100vh,  calc(100vw * 16 / 9));
    height:     min(100dvh, calc(100vw * 16 / 9));
    max-width:  540px;
    max-height: 960px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.12);
    display:         flex;
    flex-direction:  column;
    overflow:        hidden;
    /* 1px at iPhone SE 375×667 reference — all content sizes use calc(N * var(--u)).
       At any other size the content scales proportionally: smaller on the monitor,
       larger on a wider device. min() ensures the tighter axis governs. */
    --u: min(0.2667vw, 0.15vh);
}

/* ── Prescreen (dynamic) — same layout as the old proceed screen ─ */
#prescreen {
    position:        absolute;
    inset:           0;
    background:      #ffffff;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             calc(24 * var(--u));
    padding:         calc(40 * var(--u)) calc(32 * var(--u));
    z-index:         10;
}
#prescreen-content {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             calc(16 * var(--u));
    text-align:      center;
}
#prescreen-content .intro-logo {
    max-width:  calc(180 * var(--u));
    max-height: calc(80  * var(--u));
    object-fit: contain;
}
#prescreen-content .intro-body {
    font-size:   calc(15 * var(--u));
    color:       #555;
    text-align:  center;
    line-height: 1.6;
}
#action-btn {
    margin-top:   calc(8  * var(--u));
    padding:      calc(16 * var(--u)) calc(48 * var(--u));
    font-size:    calc(17 * var(--u));
    font-weight:  600;
    color:        #fff;
    background:   #1a73e8;
    border:       none;
    border-radius: calc(30 * var(--u));
    cursor:       pointer;
    transition:   background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
#action-btn:active { transform: scale(0.97); background: #1558b0; }

/* ── Proceed / intro screen (legacy — kept for reference) ─── */
#proceed-screen {
    position:        absolute;
    inset:           0;
    background:      #ffffff;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             calc(32 * var(--u));
    padding:         calc(40 * var(--u)) calc(32 * var(--u));
    z-index:         10;
}
#proceed-screen .intro-logo {
    max-width:  calc(180 * var(--u));
    max-height: calc(80  * var(--u));
    object-fit: contain;
}
#proceed-screen .intro-heading {
    font-size:   calc(22 * var(--u));
    font-weight: 600;
    color:       #00577f;
    text-align:  center;
    line-height: 1.3;
}
#proceed-screen .intro-body {
    font-size:  calc(15 * var(--u));
    color:      #555;
    text-align: center;
    line-height: 1.6;
}
#proceed-btn {
    margin-top:   calc(8  * var(--u));
    padding:      calc(16 * var(--u)) calc(48 * var(--u));
    font-size:    calc(17 * var(--u));
    font-weight:  600;
    color:        #fff;
    background:   #1a73e8;
    border:       none;
    border-radius: calc(30 * var(--u));
    cursor:       pointer;
    transition:   background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
#proceed-btn:active { transform: scale(0.97); background: #1558b0; }

/* ── State content area ───────────────────────────────────── */
#state-content {
    flex:           1;
    min-height:     0;
    padding:        calc(10 * var(--u)) calc(15 * var(--u));
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    gap:            calc(16 * var(--u));
}
#state-content.scrollable {
    overflow:                  auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior:        contain;
}

/* ── Wait state ───────────────────────────────────────────── */
.s-wait {
    flex: 1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             calc(24 * var(--u));
    text-align:      center;
}
.s-wait .w-logo    { max-width: calc(160 * var(--u)); max-height: calc(70 * var(--u)); object-fit: contain; }
.s-wait .w-company { font-size: calc(18 * var(--u)); font-weight: 600; color: #00577f; }
.s-wait .w-message { font-size: calc(14 * var(--u)); color: #666; line-height: 1.6; }
.spinner {
    width:  calc(36 * var(--u)); height: calc(36 * var(--u));
    border: calc(4 * var(--u)) solid #e0e0e0;
    border-top-color: #1a73e8;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Greeting state ───────────────────────────────────────── */
.s-greeting {
    flex: 1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             calc(20 * var(--u));
    text-align:      center;
}
.s-greeting .g-logo  { max-width: calc(140 * var(--u)); max-height: calc(60 * var(--u)); object-fit: contain; }
.s-greeting .g-photo {
    width: calc(100 * var(--u)); height: calc(100 * var(--u));
    border-radius: 50%;
    object-fit: cover;
    border: calc(3 * var(--u)) solid #e0e0e0;
}
.s-greeting .g-name    { font-size: calc(20 * var(--u)); font-weight: 600; color: #222; }
.s-greeting .g-message { font-size: calc(14 * var(--u)); color: #666; }

/* ── Blank state (no stimulus for this question) ─────────── */
.s-blank {
    flex: 1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             calc(20 * var(--u));
    text-align:      center;
}
.s-blank .b-icon    { font-size: calc(48 * var(--u)); line-height: 1; opacity: 0.35; }
.s-blank .b-message { font-size: calc(15 * var(--u)); color: #999; font-style: italic; }

/* ── Listen state ─────────────────────────────────────────── */
.s-listen {
    flex: 1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             calc(20 * var(--u));
    text-align:      center;
}
.s-listen .l-icon    { font-size: calc(56 * var(--u)); line-height: 1; }
.s-listen .l-message { font-size: calc(16 * var(--u)); color: #444; font-weight: 500; }

/* ── Show state ───────────────────────────────────────────── */
.s-show { display: flex; flex-direction: column; gap: calc(12 * var(--u)); flex-shrink: 0; }
.s-show .sh-question-image,
.s-show .sh-grid-image {
    max-height:    calc(120 * var(--u));
    object-fit:    contain;
    align-self:    flex-start;
    border-radius: calc(4 * var(--u));
}
.s-show .sh-question  { font-weight: 600; color: #222; line-height: 1.45; }
.s-show .sh-grid-text { font-weight: 600; color: #333; line-height: 1.45; }
.s-show .sh-responses { list-style: none; display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.s-show .sh-response {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    background:     #e0e0e0;
    border:         1px solid #b0b0b0;
    border-radius:  calc(4 * var(--u));
    padding:        0 calc(5 * var(--u)) calc(1 * var(--u)) calc(5 * var(--u));
    color:          #000;
    line-height:    1.4;
}
.s-show .sh-response img {
    max-height: calc(80 * var(--u));
    object-fit: contain;
    align-self: flex-start;
    margin:     calc(2 * var(--u)) 0;
}

/* ── End state ────────────────────────────────────────────── */
.s-end {
    flex: 1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             calc(24 * var(--u));
    text-align:      center;
}
.s-end .e-logo    { max-width: calc(160 * var(--u)); max-height: calc(70 * var(--u)); object-fit: contain; }
.s-end .e-message { font-size: calc(16 * var(--u)); color: #333; line-height: 1.6; }
.s-end .e-redirect{ font-size: calc(13 * var(--u)); color: #999; }

/* ── Scroll hint ──────────────────────────────────────────── */
#scroll-hint {
    display:        none;
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    padding:        2px 16px;
    background:     rgba(0,0,0,0.55);
    text-align:     center;
    font-size:      13px;
    font-weight:    600;
    color:          #ffd60a;
    pointer-events: none;
    z-index:        15;
}
#scroll-hint.visible { display: block; }

/* ── Monitor status bar ───────────────────────────────────── */
/* Sits below the panel as a flex sibling inside #cavi-host.  */
#monitor-status {
    width:           min(100vw, calc(100dvh * 9 / 16));
    max-width:       540px;
    background:      rgba(0,0,0,0.72);
    color:           #fff;
    font-size:       15px;
    font-family:     'SF Mono', 'Consolas', monospace;
    padding:         7px 12px;
    display:         flex;
    gap:             10px;
    align-items:     center;
    pointer-events:  none;
    border-radius:   0 0 4px 4px;
}
.ms-group   { display: flex; align-items: center; gap: 6px; }
.ms-label   { color: #aaa; font-size: 13px; text-transform: uppercase;
              letter-spacing: 0.04em; margin-right: 2px; }
.ms-sep     { color: #888; }
.ms-dot {
    display:         inline-block;
    width:           7px;
    height:          7px;
    border-radius:   50%;
    background:      #666;
    flex-shrink:     0;
}
.ms-dot.on  { background: #2ecc71; }
.ms-dot.off { background: #e74c3c; }
.ms-dot.warn{ background: #f39c12; }
.ms-item    { display: flex; align-items: center; gap: 3px; white-space: nowrap;
              color: #ccc; font-size: 14px; }
.ms-quality-good     { color: #2ecc71; }
.ms-quality-low      { color: #f39c12; }
.ms-quality-very-low { color: #e74c3c; }

/* ── Mic error ────────────────────────────────────────────── */
.mic-error {
    padding:       20px;
    text-align:    center;
    color:         #c00;
    font-size:     14px;
    line-height:   1.6;
}

/* ── Interviewer audio page ───────────────────────────────── */
#iv-host {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    height:          100vh;
    background:      #1a1a2e;
    color:           #fff;
    font-family:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    gap:             24px;
}
#iv-status { font-size: 18px; font-weight: 500; }
#iv-mute-btn {
    padding:       14px 36px;
    font-size:     16px;
    font-weight:   600;
    border:        none;
    border-radius: 30px;
    cursor:        pointer;
    transition:    background 0.15s;
}
#iv-mute-btn.unmuted { background: #e53935; color: #fff; }
#iv-mute-btn.muted   { background: #555;    color: #fff; }