/* Self-hosted Roboto so the respondent (phone) and the interviewer monitor (Windows
   WebView) render the same font — the system stack otherwise resolves to San Francisco
   on iOS, Roboto on Android, and Segoe UI on the Windows monitor.  Falls back to the
   system stack if the woff2 fails to load. */
@font-face {
    font-family:  'Roboto';
    font-style:   normal;
    font-weight:  400;
    font-display: swap;
    src: url('/fonts/roboto-400.woff2') format('woff2');
}
@font-face {
    font-family:  'Roboto';
    font-style:   normal;
    font-weight:  500 600;   /* Medium covers the semibold (600) content — Bold (700) read too heavy */
    font-display: swap;
    src: url('/fonts/roboto-500.woff2') format('woff2');
}

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

html, body {
    height: 100%;
    width:  100%;
    background: #f4f4f4;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 '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);
}

/* Body below the persistent header — holds the prescreen overlay and the state content. */
#cavi-body {
    position:       relative;
    flex:           1;
    min-height:     0;
    display:        flex;
    flex-direction: column;
}

/* ── Prescreen (dynamic) ─────────────────────────────────────── */
#prescreen {
    position:        absolute;
    inset:           0;
    background:      #ffffff;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    z-index:         10;
    overflow:        hidden;
}

/* Logo header — matches the photo.html header (solid MISCO blue).  Shown on the
   prescreen and on the wait/greeting/end states; hidden on blank/listen/show. */
#brand-bar {
    width:         100%;
    padding:       calc(10 * var(--u));
    background:    #00577f;
    border-bottom: 1px solid #dce8ed;
    display:       flex;
    align-items:   center;
    flex-shrink:   0;
}
.brand-logo {
    height:  calc(34 * var(--u));
    width:   auto;
    display: block;
}

/* Centering wrapper that fills remaining height below the brand bar */
#prescreen-center {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             calc(24 * var(--u));
    padding:         calc(20 * var(--u)) calc(32 * var(--u)) calc(40 * var(--u));
    width:           100%;
}

#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-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-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    { width: calc(48 * var(--u)); height: calc(48 * var(--u)); color: #cccccc; }
.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    { width: calc(56 * var(--u)); height: calc(56 * var(--u)); color: #00577f; }
.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-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; }