/**
 * Carinhas Likert padronizadas (5 níveis) — chip + SVG.
 * Usado no portal do paciente, wizard público, preview nutri e matriz.
 * Manter em sincronia com resources/js/likert-faces.js e iphone-preview.css.
 */

.likert-face-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--apple-radius-pill, 999px);
    flex-shrink: 0;
}

.likert-face-chip--otimo {
    background: color-mix(in srgb, var(--apple-tint-green, #34c759) 20%, transparent);
}

.likert-face-chip--bom {
    background: color-mix(in srgb, var(--apple-tint-teal, #5ac8fa) 18%, transparent);
}

.likert-face-chip--regular {
    background: color-mix(in srgb, var(--apple-tint-yellow, #ffcc00) 22%, transparent);
}

.likert-face-chip--ruim {
    background: color-mix(in srgb, var(--apple-tint-orange, #ff9500) 18%, transparent);
}

.likert-face-chip--pessimo {
    background: color-mix(in srgb, var(--apple-tint-red, #ff3b30) 16%, transparent);
}

.likert-face-svg {
    display: block;
    inline-size: var(--apple-sp-5, 20px);
    block-size: var(--apple-sp-5, 20px);
}

/* Portal do paciente / wizard: chip no lugar do emoji nativo grande */
.likert-emoji.likert-face-chip,
.option-emoji-display.likert-face-chip,
.multipla-score.likert-face-chip,
.multipla-emoji.likert-face-chip,
.resposta-emoji.likert-face-chip {
    inline-size: var(--apple-sp-8, 32px);
    block-size: var(--apple-sp-8, 32px);
}

.likert-emoji.likert-face-chip .likert-face-svg,
.option-emoji-display.likert-face-chip .likert-face-svg,
.multipla-score.likert-face-chip .likert-face-svg,
.multipla-emoji.likert-face-chip .likert-face-svg,
.resposta-emoji.likert-face-chip .likert-face-svg {
    inline-size: var(--apple-sp-5, 20px);
    block-size: var(--apple-sp-5, 20px);
}

.likert-display .likert-face-chip,
.likert-resposta .likert-face-chip {
    inline-size: var(--apple-sp-8, 32px);
    block-size: var(--apple-sp-8, 32px);
}