/* ==========================================================
   COMMS — stile "Night-City NetWire" (riferimento utente).
   Token del kit SCOPED su #view-social per non toccare il
   resto del gioco: palette rosso/ciano/oro su fondo scuro,
   font Rajdhani + VT323, angoli notched con barretta diagonale,
   etichette-chip, messaggi bordati oro, testata con glow.
   ================================================---------- */

#view-social {
    /* --- design token del riferimento NetWire --- */
    --nw-bg-300: #1e181e;
    --nw-bg-500: #191a1e;
    --nw-primary-200: #f4908b;
    --nw-primary-500: #e8615a;
    --nw-primary-600: #9c3230;
    --nw-primary-800: #451717;
    --nw-secondary-500: #2be4ea;
    --nw-secondary-900: #295459;
    --nw-tertiary-500: #fed33f;
    --nw-active-500: #2bfea0;
    --nw-font: "Rajdhani", "Segoe UI", sans-serif;
    --nw-font-mono: "VT323", "Courier New", monospace;
    --nw-glow: 0 0 5px var(--nw-primary-500);
    --nw-glow-text: -9px -6px 40px currentcolor;
    --nw-notch: 1rem;
    --nw-notch-hyp: 22.627416px;
    --nw-notch-path: polygon(0 0, 100% 0,
        100% calc(100% - var(--nw-notch) + 2px),
        calc(100% - var(--nw-notch) + 2px) 100%, 0 100%);

    font-family: var(--nw-font);
    color: var(--nw-primary-500);
}

/* --- Card principale: pannello scuro con vignetta rossa --- */
.sc-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 92vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    padding-bottom: calc(var(--nw-notch) + 0.5rem);
    background-color: var(--nw-bg-500);
    background-image: radial-gradient(ellipse at 33% 10%, #461616 0%, transparent 75%);
    border: 2px solid var(--nw-primary-600);
    clip-path: var(--nw-notch-path);
    line-height: 1.4;
}
/* barretta diagonale sul notch (firma del riferimento) */
.sc-card::before {
    content: "";
    position: absolute;
    background-color: var(--nw-primary-600);
    bottom: 5px;
    right: -6px;
    height: 3px;
    width: var(--nw-notch-hyp);
    transform: rotate(-45deg);
    z-index: 100;
}
@media (min-width: 900px) {
    .sc-card { max-width: 640px; }
}

/* --- Testata: titolo glow + sottolineatura luminosa --- */
.sc-head {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.25rem 0.25rem 0.6rem 0.25rem;
}
.sc-head::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background-color: var(--nw-primary-500);
    box-shadow: var(--nw-glow);
}
.sc-title {
    font-family: var(--nw-font-mono);
    font-size: 1.35rem;
    letter-spacing: 0.035rem;
    text-transform: uppercase;
    text-shadow: var(--nw-glow-text);
    color: var(--nw-primary-500);
}
.sc-overline {
    display: block;
    font-family: var(--nw-font-mono);
    font-size: 0.95rem;
    color: var(--nw-primary-200);
    opacity: 0.8;
}
.sc-close {
    font-family: var(--nw-font);
    color: var(--nw-primary-500);
    background: transparent;
    border: 1px solid var(--nw-primary-500);
    border-radius: 2px;
    width: 30px; height: 30px;
    cursor: pointer;
}
.sc-close:hover { background-color: var(--nw-primary-800); color: var(--nw-primary-200); }

.sc-errore {
    min-height: 1.1em;
    font-family: var(--nw-font-mono);
    font-size: 1rem;
    color: var(--nw-primary-200);
    text-shadow: var(--nw-glow-text);
}
.sc-offline {
    color: var(--nw-primary-200);
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 0.75rem 0.25rem;
}

/* --- Sezioni (stile nav-section__header del riferimento) --- */
.sc-sezione {
    background-color: var(--nw-bg-300);
    border: 1px solid #5d2322;
    border-radius: 3px;
    color: var(--nw-secondary-500);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.75rem;
    text-transform: uppercase;
}

/* --- Tab canali (stile nav__link del riferimento) --- */
.sc-tabs { display: flex; gap: 0.25rem; }
.sc-tab {
    font-family: var(--nw-font);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.045em;
    color: var(--nw-secondary-500);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.25s;
}
.sc-tab:hover { background-color: var(--nw-bg-300); border-color: #5d2322; }
.sc-tab.attivo { background-color: #391419; border-color: var(--nw-primary-600); }

/* --- Chat: messaggi bordati ORO (firma del riferimento) --- */
.sc-chat {
    height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0.1rem;
}
.sc-msg { padding-bottom: 1rem; }
.sc-msg-testo {
    background-color: var(--nw-bg-300);
    border: 1px solid var(--nw-tertiary-500);
    border-radius: 3px;
    color: var(--nw-tertiary-500);
    font-size: 1rem;
    padding: 0.75rem;
}
.sc-msg-firma {
    color: var(--nw-tertiary-500);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}
.sc-msg-firma .sc-titolo-badge {
    border: 1.5px solid var(--nw-tertiary-500);
    border-radius: 3px;
    display: inline-block;
    font-size: 0.78rem;
    line-height: 1;
    padding: 0.15em 0.34em;
    margin-right: 0.4em;
    vertical-align: middle;
}
.sc-vuoto {
    margin: auto;
    color: var(--nw-primary-200);
    font-family: var(--nw-font-mono);
    font-size: 1.05rem;
    opacity: 0.7;
}

/* --- Scelta gilda: due pulsanti grossi e leggibili --- */
.sc-intro {
    color: var(--nw-primary-200);
    font-size: 0.98rem;
    line-height: 1.5;
}
.sc-scelte { display: flex; flex-direction: column; gap: 0.5rem; }
.sc-scelta {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--nw-font);
    color: var(--nw-secondary-500);
    background-color: var(--nw-bg-300);
    border: 1px solid var(--nw-primary-600);
    border-radius: 3px;
    padding: 0.85rem 1rem;
    transition: background-color 0.2s, border-color 0.2s;
}
.sc-scelta:hover { background-color: #391419; border-color: var(--nw-secondary-500); }
.sc-scelta-ico {
    flex-shrink: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--nw-secondary-500);
}
.sc-scelta-txt { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; }
.sc-scelta:disabled { opacity: 0.5; cursor: not-allowed; }
.sc-scelta:disabled:hover { background-color: var(--nw-bg-300); border-color: var(--nw-primary-600); }
.sc-scelta-freccia { font-size: 1.5rem; color: var(--nw-secondary-500); flex-shrink: 0; }
.sc-soon {
    flex-shrink: 0;
    font-family: var(--nw-font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--nw-tertiary-500);
    border: 1px solid var(--nw-tertiary-500);
    border-radius: 3px;
    padding: 0.1em 0.4em;
}

/* Testata con freccia "indietro" (home ← gilda) */
.sc-head-left { display: flex; align-items: center; gap: 0.5rem; }
.sc-back-home {
    font-family: var(--nw-font);
    font-size: 1.3rem; line-height: 1;
    color: var(--nw-secondary-500);
    background: transparent;
    border: 1px solid var(--nw-secondary-500);
    border-radius: 2px;
    width: 30px; height: 30px;
    cursor: pointer;
    flex-shrink: 0;
}
.sc-back-home:hover { background-color: var(--nw-secondary-900); }
.sc-scelta-txt b {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sc-scelta-txt small { font-size: 0.85rem; color: var(--nw-primary-200); opacity: 0.85; }

/* --- Lista gilde disponibili (cliccabili) --- */
.sc-elenco {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 200px;
    overflow-y: auto;
}
.sc-gilda-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--nw-font);
    color: var(--nw-secondary-500);
    background-color: var(--nw-bg-300);
    border: 1px solid #5d2322;
    border-radius: 3px;
    padding: 0.55rem 0.7rem;
    transition: background-color 0.2s, border-color 0.2s;
}
.sc-gilda-row:hover { background-color: #391419; border-color: var(--nw-secondary-500); }
.sc-gilda-tag {
    flex-shrink: 0;
    font-family: var(--nw-font-mono);
    font-size: 0.9rem;
    color: var(--nw-tertiary-500);
    border: 1px solid var(--nw-tertiary-500);
    border-radius: 3px;
    padding: 0.1em 0.4em;
    min-width: 2.5em;
    text-align: center;
}
.sc-gilda-nome { flex: 1; font-size: 1rem; }
.sc-gilda-membri {
    flex-shrink: 0;
    font-family: var(--nw-font-mono);
    font-size: 0.9rem;
    color: var(--nw-primary-200);
}

/* --- Form verticale (crea/unisciti) con riga etichetta+campo --- */
.sc-form-v { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.sc-riga { display: flex; align-items: stretch; gap: 0.4rem; }
.sc-riga .sc-etichetta { flex: 0 0 auto; min-width: 60px; }
.sc-azioni-form {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.15rem;
}
.sc-azioni-form .sc-btn { flex: 1; text-align: center; }

/* --- Form: chip-label + campo notched (firma del riferimento) --- */
.sc-invio-form, .sc-crea-form, .sc-unisciti-form, .sc-nick-form {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}
.sc-etichetta {
    background-color: var(--nw-primary-600);
    color: var(--nw-primary-200);
    font-family: var(--nw-font-mono);
    font-size: 0.92rem;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    line-height: 1;
    padding: 0.125em 2em 0.125em 0.75em;
    clip-path: polygon(0.25em 0, calc(100% - 1em) 0, 100% 100%, 0.33em 100%, 0 100%, 0 0.25em);
    flex-shrink: 0;
}
.sc-campo {
    position: relative;
    flex: 1;
    background-color: var(--nw-bg-300);
    border: 1px solid var(--nw-primary-600);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.55rem), calc(100% - 0.55rem) 100%, 0 100%);
    padding-right: 0.5rem;
}
.sc-campo::before {
    content: "";
    position: absolute;
    background-color: var(--nw-primary-600);
    bottom: 3px;
    right: -4px;
    height: 2px;
    width: 14px;
    transform: rotate(-45deg);
    z-index: 100;
}
.sc-campo input {
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
    color: var(--nw-primary-500);
    font-family: var(--nw-font);
    font-size: 1rem;
    letter-spacing: 0.045em;
    width: 100%;
    padding: 0.5rem;
}
.sc-campo input::placeholder { color: var(--nw-primary-600); }
.sc-campo-tag { flex: 0 0 84px; }

/* --- Bottoni (stile .button del riferimento) --- */
.sc-btn {
    font-family: var(--nw-font);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: var(--nw-secondary-500);
    background: transparent;
    border: 1px solid var(--nw-secondary-500);
    border-radius: 2px;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
}
.sc-btn:hover { background-color: var(--nw-secondary-900); }
.sc-btn.pericolo {
    color: var(--nw-primary-500);
    border-color: var(--nw-primary-500);
    align-self: flex-start;
}
.sc-btn.pericolo:hover { background-color: var(--nw-primary-800); color: var(--nw-primary-200); }

/* --- Membri gilda (stile conversation-link, pallino stato) --- */
.sc-membri { display: flex; flex-direction: column; gap: 0.125rem; }
.sc-membro {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--nw-secondary-500);
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 0.4rem 0.75rem;
    font-size: 0.98rem;
}
.sc-membro:hover { background-color: var(--nw-bg-300); border-color: #5d2322; }
.sc-membro::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 0.5em; height: 0.5em;
    border-radius: 50%;
    background-color: var(--nw-primary-500);
}
.sc-membro.capo::before { background-color: var(--nw-active-500); }
.sc-membro .sc-ruolo {
    font-family: var(--nw-font-mono);
    font-size: 0.85rem;
    color: var(--nw-tertiary-500);
}
.sc-membro .sc-nome { flex: 1; }
.sc-membro .sc-azioni { display: flex; gap: 0.25rem; }
.sc-membro .sc-mini {
    font-family: var(--nw-font);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--nw-primary-500);
    background: transparent;
    border: 1px solid var(--nw-primary-500);
    border-radius: 2px;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    text-transform: uppercase;
}
.sc-mini:hover { background-color: var(--nw-primary-800); color: var(--nw-primary-200); }