/* Número Telefônico — só o que é deste módulo. A base (.module-*, tokens de tema) vem do app.css do
   host. Servido em /_content/Cesar.Modules.Phone.Web/css/phone.css.

   A tela tem um estado por vez, então o desenho é de "cartão único": nada de grade, nada de lista. O
   que ela precisa fazer bem é uma coisa só — deixar óbvio qual é o próximo passo. */
@layer components {
    .phone-card {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-top: 16px;
    }

    .phone-card-title {
        margin: 0;
        font-size: var(--text-base);
        font-weight: 650;
    }

    /* ---------- o número em destaque ---------- */
    .phone-number-line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .phone-number {
        font-size: var(--text-heading-sm);
        font-weight: 650;
        /* Dígito com largura fixa: o número não "dança" quando a tela recarrega o estado. */
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.01em;
    }

    .phone-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .phone-pill::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
    }

    .phone-pill.is-on {
        color: var(--accent-ink);
        background: var(--accent-soft, var(--surface-hover));
    }

    .phone-pill.is-off {
        color: var(--danger);
        background: var(--danger-bg);
    }

    /* ---------- as regras do canal (o que ele faz e o que não faz) ---------- */
    .phone-rules {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .phone-rule {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    .phone-rule svg {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        margin-top: 2px;
    }

    .phone-rule.is-yes svg {
        color: var(--accent-ink);
    }

    .phone-rule.is-no svg {
        color: var(--ink-muted);
    }

    /* ---------- números da cobrança ---------- */
    .phone-facts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
        margin: 0;
        padding-top: 4px;
        border-top: 1px solid var(--line);
    }

    .phone-facts dt {
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .phone-facts dd {
        margin: 4px 0 0;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
    }

    /* ---------- a proposta, para quem ainda não tem número ---------- */
    .phone-pitch-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .phone-pitch-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .phone-pitch-icon {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        color: var(--accent-ink);
        background: var(--surface-hover);
    }

    .phone-pitch-icon svg {
        width: 18px;
        height: 18px;
    }

    /* ---------- o aviso que não se desfaz ---------- */
    .phone-warning {
        border-color: var(--warn-border);
        background: var(--warn-bg);
        color: var(--warn-ink);
    }

    .phone-warning p {
        margin: 0;
    }

    .phone-check {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-weight: 600;
        cursor: pointer;
    }

    .phone-check input {
        margin-top: 2px;
        width: 18px;
        height: 18px;
        accent-color: var(--green);
        flex: 0 0 auto;
    }

    /* O campo da cidade tem a largura do conteúdo, não a da linha: um controle esticado por cima de um
       rótulo curto é o que fazia a tela parecer um formulário mal montado. */
    .phone-area-field {
        max-width: 22rem;
    }

    .phone-area-select {
        width: 100%;
    }

    /* ---------- formulário ---------- */
    .phone-grid {
        display: grid;
        grid-template-columns: 92px 1fr;
        gap: 12px;
        align-items: start;
    }

    @media (max-width: 520px) {
        .phone-grid {
            grid-template-columns: 80px 1fr;
        }
    }

    .phone-fieldset {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .phone-radio-row {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 8px;
    }

    .phone-radio {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }

    .phone-radio input {
        width: 18px;
        height: 18px;
        accent-color: var(--green);
    }

    /* ---------- o código ---------- */
    .phone-code-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .phone-code-field {
        max-width: 240px;
    }

    .phone-code-input {
        font-size: var(--text-heading-sm);
        font-variant-numeric: tabular-nums;
        /* Espaçamento largo: seis dígitos digitados um a um se conferem de longe. */
        letter-spacing: 0.32em;
        text-align: center;
    }

    .phone-actions {
        margin-top: 2px;
    }

    .phone-cancel {
        align-self: flex-start;
    }

    /* ---------- avisos ---------- */
    .phone-notice {
        margin: 0;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--ink-muted);
        background: var(--surface-hover);
        font-size: var(--text-sm);
    }

    .phone-notice.is-warn {
        border-color: var(--warn-border);
        color: var(--warn-ink);
        background: var(--warn-bg);
    }
}

/* A cara do número, ao lado do número: é o que todo contato vê no topo da conversa. */
.phone-avatar-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
}

.phone-avatar {
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-surface-sunken);
    color: var(--color-text-subtle);
}

.phone-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.phone-avatar svg {
    inline-size: 2rem;
    block-size: 2rem;
}

/* Cresce e empurra os botões para a direita; no telefone a linha quebra e eles descem inteiros. */
.phone-avatar-text {
    flex: 1 1 12rem;
    min-inline-size: 0;
}

.phone-avatar-title {
    margin: 0;
    font-weight: 600;
}

.phone-avatar-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}