/*
 * A Entrevista (Fase 5) — layout específico da tela, composto inteiramente
 * dos componentes da Fase 3 (`z-field`, `z-btn`, `z-card`, `z-alert`,
 * `z-badge`): nenhuma classe aqui desenha um componente novo, só arranja os
 * que já existem. Ver studio/css/components.css.
 */

.z-interview {
    max-width: 680px;
    margin: 0 auto;
    padding: var(--z-space-8) var(--z-space-5) var(--z-space-10);
}

/* ── Cabeçalho e progresso ────────────────────────────────────────────── */

.z-interview__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--z-space-4);
    margin-bottom: var(--z-space-3);
}
.z-interview__step-label {
    font-size: var(--z-text-sm);
    color: var(--z-text-secondary);
}
.z-interview__skip {
    background: transparent;
    border: none;
    color: var(--z-text-secondary);
    font-size: var(--z-text-sm);
    cursor: pointer;
    padding: var(--z-space-1) var(--z-space-2);
}
.z-interview__skip:hover { color: var(--z-text); }

.z-interview__progress {
    display: flex;
    gap: var(--z-space-1);
    margin-bottom: var(--z-space-6);
}
.z-interview__progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--z-border);
    transition: background var(--z-duration-base) var(--z-ease-out);
}
.z-interview__progress-dot.is-done { background: var(--z-orange); }

/* ── Pergunta ─────────────────────────────────────────────────────────── */

.z-interview__question-text {
    font-size: var(--z-text-xl);
    font-weight: 600;
    margin-bottom: var(--z-space-1);
}
.z-interview__question-why {
    color: var(--z-text-secondary);
    font-size: var(--z-text-sm);
    margin-bottom: var(--z-space-5);
}

.z-interview__options {
    display: flex;
    flex-direction: column;
    gap: var(--z-space-3);
    margin-bottom: var(--z-space-5);
}

/* Opção = z-card--clickable com um indicador de rádio à esquerda. */
.z-interview__option {
    display: flex;
    align-items: flex-start;
    gap: var(--z-space-3);
    text-align: left;
}
.z-interview__option-dot {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid var(--z-border-strong);
    position: relative;
    transition: border-color var(--z-duration-base) var(--z-ease-out);
}
.z-interview__option-dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--z-orange);
    transform: scale(0);
    transition: transform var(--z-duration-fast) var(--z-ease-spring);
}
.z-interview__option.is-active .z-interview__option-dot {
    border-color: var(--z-orange);
}
.z-interview__option.is-active .z-interview__option-dot::after {
    transform: scale(1);
}
.z-interview__option-body { flex: 1; min-width: 0; }
.z-interview__option-label {
    display: flex;
    align-items: center;
    gap: var(--z-space-2);
    font-weight: 600;
}
.z-interview__option-desc {
    color: var(--z-text-secondary);
    font-size: var(--z-text-sm);
    margin-top: var(--z-space-1);
}

.z-interview__precedent { margin-bottom: var(--z-space-5); }
.z-interview__precedent-title {
    font-weight: 600;
    margin-bottom: var(--z-space-2);
}
.z-interview__precedent-item {
    font-size: var(--z-text-sm);
    color: var(--z-text-secondary);
    padding: var(--z-space-1) 0;
}
.z-interview__precedent-item strong { color: var(--z-text); }

.z-interview__freetext { margin-bottom: var(--z-space-6); }
.z-interview__freetext-label {
    display: block;
    font-size: var(--z-text-sm);
    color: var(--z-text-secondary);
    margin-bottom: var(--z-space-2);
}

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

/* ── Tela de mensagem inicial (entrada do pedido) ────────────────────── */

.z-interview__message-tools {
    display: flex;
    align-items: center;
    gap: var(--z-space-2);
    margin-top: var(--z-space-3);
}
.z-interview__tool-btn {
    background: transparent;
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius-sm);
    color: var(--z-text-secondary);
    padding: var(--z-space-2) var(--z-space-3);
    cursor: pointer;
    font-size: var(--z-text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--z-space-2);
}
.z-interview__tool-btn:hover { color: var(--z-text); border-color: var(--z-border-strong); }
.z-interview__tool-btn.is-active {
    color: var(--z-orange);
    border-color: var(--z-orange);
}
.z-interview__attachment-preview {
    margin-top: var(--z-space-3);
    font-size: var(--z-text-sm);
    color: var(--z-text-secondary);
}

/* ── Resumo antes de construir ────────────────────────────────────────── */

.z-interview__summary-title { font-size: var(--z-text-2xl); font-weight: 700; margin-bottom: var(--z-space-5); }
.z-interview__summary-block { margin-bottom: var(--z-space-6); }
.z-interview__summary-block h3 {
    font-size: var(--z-text-sm);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--z-text-secondary);
    margin-bottom: var(--z-space-3);
}
.z-interview__summary-block ul { margin: 0; padding-left: var(--z-space-5); }
.z-interview__summary-block li { margin-bottom: var(--z-space-1); }

.z-interview__decisions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--z-space-3) var(--z-space-6);
    margin-bottom: var(--z-space-6);
}
.z-interview__decision dt { font-size: var(--z-text-xs); color: var(--z-text-secondary); }
.z-interview__decision dd { margin: 0; font-weight: 600; }

.z-interview__build-row {
    display: flex;
    align-items: center;
    gap: var(--z-space-3);
    flex-wrap: wrap;
}
.z-interview__build-btn { flex: 1; min-width: 220px; }

@media (max-width: 640px) {
    .z-interview { padding: var(--z-space-5) var(--z-space-4) var(--z-space-8); }
}