/*
 * Tonari Tutor UI
 * Simplified EN/JA + Hiring Manager flow styled with TONARI design-system tokens.
 */

:root {
    --hero-max-width: 1120px;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(1200px 560px at 8% -10%, color-mix(in srgb, var(--text-accent) 16%, transparent), transparent 64%),
        radial-gradient(980px 480px at 96% 0%, color-mix(in srgb, var(--text-soft) 14%, transparent), transparent 66%),
        linear-gradient(158deg, var(--surface-sunken) 0%, var(--surface-base) 48%, var(--surface-raised) 100%);
    color: var(--text-primary);
}

.container {
    width: min(var(--hero-max-width), calc(100% - (var(--space-6) * 2)));
    margin: 0 auto;
    padding: var(--space-10) 0 var(--space-12);
    position: relative;
    z-index: var(--z-raised);
}

.bg-orb {
    position: fixed;
    border-radius: var(--radius-full);
    pointer-events: none;
    z-index: var(--z-base);
    filter: blur(38px);
}

.bg-orb-a {
    width: 360px;
    height: 360px;
    top: -40px;
    left: -120px;
    background: color-mix(in srgb, var(--text-accent) 26%, transparent);
}

.bg-orb-b {
    width: 300px;
    height: 300px;
    right: -90px;
    bottom: 50px;
    background: color-mix(in srgb, var(--text-soft) 24%, transparent);
}

.hero-header {
    margin-bottom: var(--space-8);
    max-width: 860px;
    display: grid;
    gap: var(--space-2);
}

.brand-title {
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.brand-mark {
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 8vw, 5.6rem) !important;
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-tight);
    line-height: 1 !important;
    color: var(--text-primary);
    font-variant-numeric: normal;
    -webkit-font-smoothing: antialiased;
}

.version-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    border: 1px solid #7c3aed;
    background: color-mix(in srgb, #7c3aed 18%, transparent);
    color: #c4b5fd;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
}

.subtitle {
    font-size: var(--text-xl) !important;
    font-weight: var(--weight-semibold) !important;
    line-height: var(--leading-snug);
    color: var(--text-primary);
    min-height: calc(var(--text-xl) * var(--leading-snug) * 2);
}

.kicker {
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-bold) !important;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-accent);
    font-language-override: normal;
    -webkit-font-smoothing: antialiased;
}

.hero-copy {
    margin-top: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--text-md) !important;
    line-height: 1.65 !important;
    font-style: italic;
    min-height: 5rem;
}

.header-tools {
    margin-top: var(--space-3);
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.lang-toggle {
    border: 1px solid var(--interactive-secondary-border);
    background: var(--surface-overlay);
    color: var(--interactive-secondary-text);
    border-radius: var(--radius-full);
    padding: 0.42rem 0.85rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
}

.lang-toggle:hover {
    background: var(--interactive-secondary-bg-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.lang-toggle.active {
    background: var(--interactive-primary-bg);
    border-color: var(--interactive-primary-bg);
    color: var(--interactive-primary-text);
    box-shadow: var(--glow-accent);
}

.step {
    display: none;
}

.step.active {
    display: block;
    animation: stepIn var(--duration-enter) var(--ease-out);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ──── Card Component ──── */
/* Base card: dark panel with subtle border and generous padding.
   Used for both the setup card (precall-card) and interview card. */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
}

.card > h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.card > p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* ──── Upload Groups & File Status ──── */
.upload-group {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.upload-group:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 1.5rem;
}

.upload-group h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.upload-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.required {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--error);
    text-transform: uppercase;
}

.optional {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* File upload zone: dashed border invites drag-and-drop. State classes
   (.drag-over, .has-file) are toggled by app.js setupDragDrop() and
   handleFileUpload(). */
.upload-section {
    margin-bottom: 1rem;
}

.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border: 2px dashed var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-secondary);
}

.file-upload-label:hover {
    border-color: var(--border-accent);
    background: var(--interactive-accent-bg);
}

.file-upload-label.drag-over {
    border-color: var(--border-accent);
    background: var(--interactive-accent-bg-hover);
}

.file-upload-label.has-file {
    border-color: var(--success);
    border-style: solid;
}

.upload-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.upload-text {
    font-weight: 600;
    color: var(--text-primary);
}

.upload-subtext {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.file-status {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    text-align: center;
}

.file-status.success {
    color: var(--success);
}

.file-status.error {
    color: var(--error);
}

.file-status.loading {
    color: var(--accent);
}

/* ──── Textarea (resume/JD paste mode) ──── */
textarea {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s;
}

textarea:focus {
    outline: none;
    border-color: var(--accent);
}

textarea::placeholder {
    color: var(--text-secondary);
}

/* ──── Buttons ──── */
/* Primary CTA: green background, used for "Continue to Interview". */
.btn-primary {
    width: 100%;
    background: var(--success);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover:not(:disabled) {
    background: var(--interactive-primary-bg-active);
    transform: translateY(-1px);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.btn-secondary:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    color: var(--text-muted);
}

/* ──── Interview Card & Header ──── */
.interview-card {
    text-align: center;
}

.interview-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.interview-header h2 {
    margin: 0;
}

.interview-title-row {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.interview-version {
    transform: translateY(1px);
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--status-success-bg);
    color: var(--status-success-text);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.pulse {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.interview-instructions {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.interview-instructions p {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin: 0;
}

/* ──── Interview Tips ──── */
.interview-tips {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: left;
    margin-bottom: 2rem;
}

.interview-tips h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.interview-tips ul {
    list-style: none;
}

.interview-tips li {
    color: var(--text-secondary);
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.95rem;
}

.interview-tips li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent);
}

.interview-tips li strong {
    color: var(--text-primary);
}

/* Headphones warning card: amber/yellow gradient border signals caution.
   Displayed prominently in the interview sidebar to prevent echo issues
   caused by speaker feedback into the microphone. */
.headphones-warning {
    margin-bottom: 1rem;
    padding: 0.9rem 0.95rem;
    border-radius: 12px;
    border: 1px solid var(--status-warning-border);
    background: var(--status-warning-bg);
}

.headphones-warning-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-warm);
    margin-bottom: 0.35rem;
}

.headphones-warning p {
    margin: 0;
    color: var(--text-warm);
    font-size: 0.87rem;
    line-height: 1.45;
}

.warning-icon {
    font-size: 1.05rem;
}

.interview-actions {
    display: flex;
    justify-content: center;
}

/* ──── Footer & Updates Link ──── */
footer {
    margin-top: 3rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

footer a {
    color: var(--accent);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

.privacy {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.7;
}

.updates-link {
    margin-top: 0.2rem;
    background: none;
    border: none;
    color: inherit;
    font-size: 0.8rem;
    opacity: 0.7;
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.updates-link:hover {
    opacity: 0.92;
}

.updates-link:focus-visible {
    outline: 2px solid var(--interactive-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ──── Updates Modal ──── */
/* Full-viewport overlay with centered card. Uses position:fixed + inset:0
   and a semi-transparent backdrop. Toggled via the .hidden class. */
.updates-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--surface-sunken) 76%, transparent);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.updates-modal-card {
    width: min(560px, 100%);
    background: var(--surface-overlay);
    border: 1px solid var(--border-default);
    border-radius: 14px;
    box-shadow: var(--shadow-xl);
    padding: 1rem 1rem 0.95rem;
}

.updates-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.updates-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.updates-modal-close {
    border: 1px solid var(--border-default);
    background: var(--surface-base);
    color: var(--text-secondary);
    border-radius: 8px;
    width: 1.9rem;
    height: 1.9rem;
    line-height: 1;
    font-size: 1.15rem;
    cursor: pointer;
}

.updates-modal-close:hover {
    border-color: var(--border-strong);
}

.updates-modal-intro {
    margin: 0.7rem 0 0.6rem;
    color: var(--text-secondary);
    font-size: 0.84rem;
}

.updates-list {
    list-style: none;
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
}

.updates-list li {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: 0.55rem;
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.45;
}

.updates-list strong {
    color: var(--text-primary);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

/* ===========================================
   Email Gate Modal
   =========================================== */

.email-gate-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--surface-sunken) 80%, transparent);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.email-gate-card {
    width: min(440px, 100%);
    background: var(--surface-overlay);
    border: 1px solid var(--border-default);
    border-radius: 14px;
    box-shadow: var(--shadow-xl);
    padding: 1.5rem;
}

.email-gate-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.email-gate-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.email-gate-close {
    border: 1px solid var(--border-default);
    background: var(--surface-base);
    color: var(--text-secondary);
    border-radius: 8px;
    width: 1.9rem;
    height: 1.9rem;
    font-size: 1.15rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s;
}

.email-gate-close:hover {
    background: var(--surface-raised);
}

.email-gate-step p {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}

.email-gate-input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.email-gate-input:focus {
    border-color: var(--border-accent);
}

.email-gate-input::placeholder {
    color: var(--text-muted);
}

.email-gate-code-field {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    padding: 0.8rem;
}

.email-gate-textarea {
    resize: vertical;
    min-height: 80px;
    font-size: 0.88rem;
    line-height: 1.5;
}

.email-gate-submit {
    width: 100%;
    padding: 0.7rem;
    margin-top: 0.75rem;
    background: var(--interactive-primary-bg);
    color: var(--interactive-primary-text);
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.email-gate-submit:hover {
    opacity: 0.9;
}

.email-gate-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.email-gate-resend {
    display: block;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.4rem;
    background: none;
    border: none;
    color: var(--text-accent);
    font-size: 0.82rem;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.15s;
}

.email-gate-resend:hover {
    opacity: 0.75;
}

.email-gate-resend:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.email-gate-status {
    margin-top: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.4;
}

.email-gate-status.status-error {
    background: var(--status-error-bg);
    color: var(--status-error-text);
    border: 1px solid var(--status-error-border);
}

.email-gate-status.status-info {
    background: var(--status-info-bg);
    color: var(--status-info-text);
    border: 1px solid var(--status-info-border);
}

.email-gate-status.status-success {
    background: var(--status-success-bg);
    color: var(--status-success-text);
    border: 1px solid var(--status-success-border);
}

.email-gate-exhausted-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem;
    background: var(--status-warning-bg);
    border: 1px solid var(--status-warning-border);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.email-gate-exhausted-msg .exhausted-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.email-gate-exhausted-msg p {
    margin: 0;
    color: var(--text-accent);
}

.email-gate-thanks {
    text-align: center;
    color: var(--status-success-text);
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

/* ===========================================
   Mic Check Modal
   =========================================== */

.mic-check-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--surface-sunken) 80%, transparent);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.mic-check-card {
    width: min(400px, 100%);
    background: var(--surface-overlay);
    border: 1px solid var(--border-default);
    border-radius: 14px;
    box-shadow: var(--shadow-xl);
    padding: 1.5rem;
    text-align: center;
}

.mic-check-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1.25rem;
}

.mic-check-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.mic-check-close {
    border: 1px solid var(--border-default);
    background: var(--surface-base);
    color: var(--text-secondary);
    border-radius: 8px;
    width: 1.9rem;
    height: 1.9rem;
    font-size: 1.15rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s;
}

.mic-check-close:hover {
    background: var(--surface-raised);
}

.mic-check-prompt {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 1.25rem;
}

/* ── Mic Check Device Selector ── */
.mic-device-selector {
    width: 100%;
    margin-bottom: var(--space-3);
    text-align: left;
}

.mic-device-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.mic-device-select {
    width: 100%;
    padding: 0.55rem 0.8rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    appearance: auto;
}

.mic-device-select:focus-visible {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--interactive-focus-ring) 40%, transparent);
}

.mic-check-no-audio {
    color: var(--status-warning-text);
    font-size: var(--text-sm);
    line-height: 1.45;
    margin: var(--space-2) 0;
    padding: var(--space-2) var(--space-3);
    background: var(--status-warning-bg);
    border: 1px solid var(--status-warning-border);
    border-radius: var(--radius-md);
    text-align: left;
}

.mic-check-visualizer {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.mic-check-visualizer .audio-bars {
    gap: 6px;
}

.mic-check-visualizer .bar {
    width: 6px;
    min-height: 6px;
    border-radius: 3px;
    background: var(--text-accent);
    transition: height 0.08s ease-out, background-color 0.15s ease-out;
}

.mic-check-visualizer .mic-active .bar {
    background: var(--status-success-text);
}

.mic-check-countdown {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mic-check-btn {
    width: 100%;
    padding: 0.7rem;
    margin-top: 0.75rem;
    background: var(--interactive-primary-bg);
    color: var(--interactive-primary-text);
    font-weight: 600;
    font-size: 0.88rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.mic-check-btn:hover { opacity: 0.9; }
.mic-check-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.mic-check-btn-secondary {
    width: 100%;
    padding: 0.7rem;
    margin-top: 0.75rem;
    background: transparent;
    color: var(--text-accent);
    font-weight: 600;
    font-size: 0.88rem;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.mic-check-btn-secondary:hover {
    background: var(--interactive-accent-bg);
    border-color: var(--border-accent);
}

.mic-check-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mic-check-denied-msg {
    padding: 0.75rem;
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
    border-radius: 8px;
}

.mic-check-denied-msg p {
    margin: 0;
    color: var(--status-error-text);
    font-size: 0.88rem;
    line-height: 1.5;
    text-align: left;
}

/* ===========================================
   Interview Session UI Components
   =========================================== */

/* ──── Connection Status Indicator ──── */
/* Pill-shaped badge with a colored dot. Five state classes
   (idle, connecting, connected, error, ended) control colors. */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.status-idle {
    background: var(--status-info-bg);
    color: var(--text-secondary);
}

.status-idle .status-dot {
    background: var(--text-secondary);
}

.status-connecting {
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.status-connecting .status-dot {
    background: var(--status-warning-text);
    animation: pulse 1s infinite;
}

.status-connected {
    background: var(--status-success-bg);
    color: var(--status-success-text);
}

.status-connected .status-dot {
    background: var(--status-success-text);
    animation: pulse 2s infinite;
}

.status-error {
    background: var(--status-error-bg);
    color: var(--status-error-text);
}

.status-error .status-dot {
    background: var(--status-error-text);
}

.status-ended {
    background: var(--status-info-bg);
    color: var(--text-secondary);
}

.status-ended .status-dot {
    background: var(--text-secondary);
}

/* ──── Error Display ──── */
/* Slide-down alert banner with dismiss button. Uses role="alert"
   and aria-live="assertive" in the HTML for screen reader support. */
.error-display {
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 88%, transparent), color-mix(in srgb, var(--surface-overlay) 88%, transparent));
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-8);
}

.card > h2 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-2);
}

.card > p {
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}

.precall-layout {
    display: grid;
    gap: var(--space-4);
}

.precall-docs,
.precall-config {
    display: grid;
    gap: var(--space-4);
}

.upload-group,
.option-group {
    background: color-mix(in srgb, var(--surface-overlay) 92%, transparent);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
}

.upload-group h3,
.option-group h3 {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.precall-config .btn-primary {
    margin-top: var(--space-2);
}

.upload-hint {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

.required,
.optional {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.required {
    color: var(--status-error-text);
}

.optional {
    color: var(--text-muted);
}

.upload-section {
    margin-bottom: var(--space-2);
}

.file-upload-label {
    display: grid;
    place-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-6);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
    cursor: pointer;
    transition: border-color var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out);
}

.file-upload-label:hover {
    border-color: var(--border-accent);
    background: color-mix(in srgb, var(--interactive-primary-bg) 10%, var(--surface-raised));
}

.file-upload-label.drag-over {
    border-color: var(--border-accent);
    background: color-mix(in srgb, var(--interactive-primary-bg) 14%, var(--surface-raised));
}

.file-upload-label.has-file {
    border-style: solid;
    border-color: var(--status-success-border);
}

.upload-icon {
    font-size: var(--text-2xl);
}

.upload-text {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
}

.upload-subtext {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.file-status {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    min-height: 1.2rem;
}

.file-status.success {
    color: var(--status-success-text);
}

.file-status.error {
    color: var(--status-error-text);
}

.file-status.loading {
    color: var(--status-warning-text);
}

textarea {
    width: 100%;
    min-height: 120px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    background: var(--surface-raised);
    color: var(--text-primary);
    padding: var(--space-4);
    font: inherit;
    resize: vertical;
}

textarea::placeholder {
    color: var(--text-muted);
}

textarea:focus-visible {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--interactive-focus-ring) 40%, transparent);
    outline: none;
}

.mode-toggle {
    margin-top: var(--space-2);
    border: 1px solid var(--interactive-secondary-border);
    background: var(--interactive-secondary-bg);
    color: var(--interactive-secondary-text);
    border-radius: var(--radius-md);
    padding: 0.56rem 0.95rem;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
}

.mode-toggle:hover {
    background: var(--interactive-secondary-bg-hover);
    color: var(--text-primary);
}

.btn-primary,
.btn-start,
.btn-end,
.btn-secondary,
.btn-feedback-export {
    font-family: var(--font-body);
}

.btn-primary {
    width: 100%;
    border: 1px solid var(--interactive-primary-bg);
    background: var(--interactive-primary-bg);
    color: var(--interactive-primary-text);
    border-radius: var(--radius-lg);
    padding: 0.92rem 1.2rem;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
}

.btn-primary:hover:not(:disabled) {
    background: var(--interactive-primary-bg-hover);
    border-color: var(--interactive-primary-bg-hover);
    transform: translateY(-1px);
}

.btn-primary:disabled {
    border-color: var(--interactive-disabled-border);
    background: var(--interactive-disabled-bg);
    color: var(--interactive-disabled-text);
    cursor: not-allowed;
}

.option-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.option-btn {
    flex: 1;
    min-width: 140px;
    border: 1px solid var(--interactive-secondary-border);
    background: var(--surface-raised);
    color: var(--text-primary);
    border-radius: var(--radius-lg);
    padding: 0.8rem 0.9rem;
    display: grid;
    gap: var(--space-1);
    text-align: center;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
}

.option-btn:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.option-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

.option-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-snug);
}

.option-btn.selected {
    color: var(--interactive-primary-text);
    border-color: var(--interactive-primary-bg);
    background: var(--interactive-primary-bg);
    box-shadow: var(--glow-accent);
}

.option-btn.selected .option-desc {
    color: color-mix(in srgb, var(--interactive-primary-text) 76%, transparent);
}


.interview-card {
    text-align: left;
    padding: var(--space-6);
}

.interview-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.interview-header h2 {
    font-size: var(--text-xl);
}

.interview-title-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35rem 0.72rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--status-info-border);
    background: var(--status-info-bg);
    color: var(--status-info-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: currentColor;
}

.status-idle {
    border-color: var(--status-info-border);
    background: var(--status-info-bg);
    color: var(--status-info-text);
}

.status-connecting {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.status-connected {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-text);
}

.status-ended {
    border-color: var(--border-default);
    background: var(--surface-raised);
    color: var(--text-secondary);
}

.status-error {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-text);
}

.latency-badge {
    margin-left: var(--space-2);
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    display: inline-block;
}

.latency-badge.latency-good {
    background: var(--status-success-text);
}

.latency-badge.latency-ok {
    background: var(--status-warning-text);
}

.latency-badge.latency-poor {
    background: var(--status-error-text);
}

.error-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
    color: var(--status-error-text);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

.error-content {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.error-dismiss {
    border: none;
    background: transparent;
    color: inherit;
    font-size: var(--text-lg);
    cursor: pointer;
}

.interview-layout {
    display: grid;
    gap: var(--space-4);
}

.interview-main {
    display: grid;
    gap: var(--space-3);
}

.interview-side {
    background: color-mix(in srgb, var(--surface-overlay) 92%, transparent);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
}

.transcript-container {
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    height: 340px;
    overflow: hidden;
}

.transcript-messages {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
}

.transcript-placeholder {
    height: 100%;
    display: grid;
    place-content: center;
    text-align: center;
    color: var(--text-secondary);
    gap: var(--space-1);
}

.transcript-hint {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.transcript-message {
    max-width: 86%;
    padding: 0.72rem 0.88rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    animation: messageIn var(--duration-normal) var(--ease-out);
}

@keyframes messageIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.transcript-message.user {
    align-self: flex-end;
    background: var(--interactive-primary-bg);
    border-color: var(--interactive-primary-bg);
    color: var(--interactive-primary-text);
}

.transcript-message.agent {
    align-self: flex-start;
    background: var(--surface-overlay);
    color: var(--text-primary);
}

.transcript-message .message-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-bottom: 0.18rem;
    opacity: 0.9;
}

.speaking-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-2) 0;
}

.speaking-indicator .dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--text-accent);
    animation: speakingPulse 1.1s infinite ease-in-out;
}

.speaking-indicator .dot:nth-child(2) {
    animation-delay: 0.12s;
}

.speaking-indicator .dot:nth-child(3) {
    animation-delay: 0.24s;
}

@keyframes speakingPulse {
    0%,
    100% { transform: scale(0.55); opacity: 0.45; }
    50% { transform: scale(1); opacity: 1; }
}

.waveform-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

#waveform-canvas {
    width: 100%;
    height: 66px;
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}

.audio-indicators {
    background: var(--surface-overlay);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    display: flex;
    justify-content: center;
    gap: var(--space-10);
}

.audio-indicator {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
}

.audio-label {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-secondary);
}

.audio-bars {
    height: 24px;
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
}

.audio-bars .bar {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
    transition: height 50ms linear, background-color var(--duration-fast) var(--ease-out);
}

#mic-indicator.active .audio-bars .bar {
    background: var(--status-success-text);
}

#agent-indicator.active .audio-bars .bar {
    background: var(--text-accent);
}

.headphones-warning {
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--status-warning-border);
    background: var(--status-warning-bg);
}

.headphones-warning-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--status-warning-text);
}

.headphones-warning p {
    color: color-mix(in srgb, var(--status-warning-text) 84%, var(--text-primary));
    font-size: var(--text-sm);
}

.interview-controls {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.btn-start,
.btn-end {
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    padding: 0.85rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
}

.btn-start {
    background: var(--interactive-primary-bg);
    border-color: var(--interactive-primary-bg);
    color: var(--interactive-primary-text);
}

.btn-start:hover:not(:disabled) {
    background: var(--interactive-primary-bg-hover);
    border-color: var(--interactive-primary-bg-hover);
}

.btn-start.connecting {
    background: var(--status-warning-bg);
    border-color: var(--status-warning-border);
    color: var(--status-warning-text);
}

.btn-end {
    background: var(--status-error-bg);
    border-color: var(--status-error-border);
    color: var(--status-error-text);
}

.btn-end:hover:not(:disabled) {
    background: color-mix(in srgb, var(--status-error-bg) 75%, var(--interactive-primary-bg));
}

.btn-start:disabled,
.btn-end:disabled {
    background: var(--interactive-disabled-bg);
    border-color: var(--interactive-disabled-border);
    color: var(--interactive-disabled-text);
    cursor: not-allowed;
}

.btn-icon {
    font-size: 1.05rem;
}

.interview-tips {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
}

.interview-tips h3 {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

.interview-tips ul {
    list-style: none;
    display: grid;
    gap: var(--space-1);
}

.interview-tips li {
    color: var(--text-secondary);
    padding-left: var(--space-4);
    position: relative;
}

.interview-tips li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--text-accent);
}

.interview-actions {
    display: flex;
    justify-content: flex-start;
}

.btn-secondary {
    border: 1px solid var(--interactive-secondary-border);
    background: var(--interactive-secondary-bg);
    color: var(--interactive-secondary-text);
    border-radius: var(--radius-lg);
    padding: 0.7rem 1rem;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--interactive-secondary-bg-hover);
    color: var(--text-primary);
}

.btn-secondary:disabled {
    border-color: var(--interactive-disabled-border);
    color: var(--interactive-disabled-text);
    cursor: not-allowed;
}

.feedback-panel {
    background: color-mix(in srgb, var(--surface-overlay) 92%, transparent);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
}

.feedback-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.feedback-panel-header h3 {
    font-size: var(--text-md);
}

.feedback-status {
    border-radius: var(--radius-full);
    padding: 0.2rem 0.56rem;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.feedback-status.idle {
    background: var(--status-info-bg);
    color: var(--status-info-text);
}

.feedback-status.pending {
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.feedback-status.ready {
    background: var(--status-success-bg);
    color: var(--status-success-text);
}

.feedback-status.warning {
    background: var(--status-error-bg);
    color: var(--status-error-text);
}

.feedback-content {
    display: grid;
    gap: var(--space-3);
}

.feedback-waiting {
    color: var(--text-secondary);
}

.feedback-actions {
    margin-top: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.btn-feedback-export {
    border: 1px solid var(--interactive-secondary-border);
    border-radius: var(--radius-md);
    background: var(--interactive-secondary-bg);
    color: var(--interactive-secondary-text);
    padding: 0.48rem 0.76rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
}

.btn-feedback-export:hover {
    background: var(--interactive-secondary-bg-hover);
    color: var(--text-primary);
}

.feedback-meta-grid,
.feedback-score-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.feedback-meta-item {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.58rem 0.68rem;
    display: grid;
    gap: 0.16rem;
}

.feedback-meta-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--weight-semibold);
}

.feedback-meta-value {
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.feedback-section {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.7rem;
}

.feedback-section h4 {
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.feedback-paragraph {
    color: var(--text-primary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.feedback-paragraph + .feedback-paragraph {
    margin-top: var(--space-1);
}

footer {
    margin-top: var(--space-8);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

footer a {
    color: var(--text-accent);
}

.privacy {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.updates-link {
    margin-top: var(--space-1);
    border: none;
    background: transparent;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: var(--text-sm);
    cursor: pointer;
}

.updates-link:hover {
    color: var(--text-secondary);
}

.updates-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: color-mix(in srgb, var(--surface-sunken) 76%, transparent);
}

.updates-modal-card {
    width: min(640px, 100%);
    background: var(--surface-overlay);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-4);
}

.updates-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.updates-modal-header h3 {
    font-size: var(--text-lg);
}

.updates-modal-close {
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--interactive-secondary-border);
    background: var(--interactive-secondary-bg);
    color: var(--interactive-secondary-text);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-md);
}

.updates-modal-close:hover {
    background: var(--interactive-secondary-bg-hover);
    color: var(--text-primary);
}

.updates-modal-intro {
    margin: var(--space-3) 0 var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.updates-list {
    list-style: none;
    display: grid;
    gap: var(--space-2);
}

.updates-list li {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.updates-list strong {
    color: var(--text-primary);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.hidden {
    display: none !important;
}

@media (min-width: 980px) {
    .precall-layout {
        grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.92fr);
        align-items: start;
    }

    .interview-layout {
        grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.94fr);
        align-items: start;
    }

    .interview-side {
        position: sticky;
        top: var(--space-4);
    }
}

@media (max-width: 760px) {
    .container {
        width: min(var(--hero-max-width), calc(100% - (var(--space-4) * 2)));
        padding-top: var(--space-8);
    }

    .bg-orb-a,
    .bg-orb-b {
        display: none;
    }

    .card {
        padding: var(--space-5);
    }

    .brand-mark {
        font-size: clamp(2.5rem, 14vw, 3.3rem);
    }

    .subtitle {
        font-size: var(--text-lg);
    }

    .hero-copy {
        font-size: var(--text-base);
    }

    .option-buttons {
        flex-direction: column;
    }

    .option-btn {
        min-width: auto;
    }

    .transcript-container {
        height: 260px;
    }

    .audio-indicators {
        gap: var(--space-6);
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .feedback-panel-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .feedback-meta-grid,
    .feedback-score-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   Floating Feedback Button (Appzi trigger)
   ============================================ */
.appzi-feedback-fab {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--interactive-primary-bg);
    color: var(--interactive-primary-text);
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: var(--glow-accent), var(--shadow-md);
    transition: transform var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    animation: fab-pulse 3s ease-in-out infinite;
}

@keyframes fab-pulse {
    0%, 100% { box-shadow: var(--glow-accent), var(--shadow-md); }
    50% { box-shadow: var(--glow-accent), var(--shadow-lg); }
}

.appzi-feedback-fab:hover {
    transform: translateY(-3px) scale(1.05);
    background: var(--interactive-primary-bg-hover);
    box-shadow: var(--glow-accent), var(--shadow-lg);
    animation: none;
}

.appzi-feedback-fab:active {
    transform: translateY(0) scale(1);
    background: var(--interactive-primary-bg-active);
}

.appzi-feedback-fab-icon {
    font-size: 1.25em;
    line-height: 1;
}

.appzi-feedback-fab-label {
    white-space: nowrap;
}

@media (max-width: 480px) {
    .appzi-feedback-fab {
        bottom: var(--space-4);
        right: var(--space-4);
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }
}

/* ============================================
   Post-Interview Feedback CTA (Appzi trigger)
   ============================================ */
.post-interview-feedback-cta {
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(135deg, var(--surface-overlay), var(--surface-raised));
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-lg);
    text-align: center;
}

.post-interview-feedback-cta p {
    margin: 0 0 var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.post-interview-feedback-cta .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: var(--interactive-primary-bg);
    color: var(--interactive-primary-text);
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.post-interview-feedback-cta .cta-btn:hover {
    background: var(--interactive-primary-bg-hover);
    transform: translateY(-1px);
}

.post-interview-feedback-cta .cta-btn:active {
    background: var(--interactive-primary-bg-active);
    transform: translateY(0);
}