/* =============================================
   its-markup-components.css
   Stili per componenti generati via MarkupString.
   
   Questi stili NON possono stare nei file .razor.css
   (CSS scoped Blazor) perché l'HTML prodotto da
   MarkupString viene iniettato raw nel DOM senza
   l'attributo scope — i selettori scoped non lo
   raggiungono. Questo file viene importato
   direttamente in index.html come CSS globale.
   ============================================= */

/* ─────────────────────────────────────────────
   VCard — contatto condiviso (messaggio chat)
   Generato da LiveChat_razor.cs → RenderVCard()
   ───────────────────────────────────────────── */

.lc2-vcard {
    background: var(--lc2-surface, #ffffff);
    border: 1px solid var(--lc2-border, #e0e3ed);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 200px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
}

    .lc2-vcard + .lc2-vcard {
        margin-top: 6px;
    }

.lc2-vcard__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lc2-border, #e0e3ed);
    margin-bottom: 6px;
}

.lc2-vcard__avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f8ef7, #a78bfa);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.lc2-vcard__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.lc2-vcard__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--lc2-text, #1a1d2e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.lc2-vcard__company {
    font-size: 11px;
    color: var(--lc2-text-muted, #8a93b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc2-vcard__phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--lc2-text-dim, #5a6282);
    padding: 4px 0;
    font-family: 'DM Mono', monospace;
}

    .lc2-vcard__phone + .lc2-vcard__phone {
        border-top: 1px solid var(--lc2-border, #e0e3ed);
    }

/* ─────────────────────────────────────────────
   VCard — responsive
   ───────────────────────────────────────────── */

/* Tablet (max 960px) — leggermente più compatta */
@media (max-width: 960px) {
    .lc2-vcard {
        max-width: 240px;
    }
}

/* Mobile (max 640px) — occupa tutta la larghezza
   della bolla che già è al max-width 88% */
@media (max-width: 640px) {
    .lc2-vcard {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    .lc2-vcard__name {
        font-size: 12.5px;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.4;
    }

    .lc2-vcard__company {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .lc2-vcard__phone {
        font-size: 11.5px;
    }
}

/* Mobile piccolo (max 600px) — riduci avatar */
@media (max-width: 600px) {
    .lc2-vcard__avatar {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 11px;
    }

    .lc2-vcard__header {
        gap: 6px;
    }
}