/* ===============
   GUSCIO - due colonne FISSE ai lati (sinistra: amici, gruppi, chat; destra:
   vetrina e Consigliati).
   --------------------------------------------------------------------------
   REGOLA DI FERRO: il centro NON SI TOCCA. Il social resta il suo
   .mood-container di sempre: larghezza 680px, centrato, con il suo scroll e i
   suoi stati. Questo foglio non contiene NESSUNA regola che tocchi il centro
   (niente max-width, niente margin, niente griglia): le colonne stanno
   `position: fixed` ai bordi e vivono per conto loro.

   Effetto voluto: aprire o chiudere una colonna NON muove il feed di un pixel.

   Le colonne si mostrano solo quando c'e' spazio vero per loro accanto al
   centro (il centro e' 680px: se lo spazio laterale e' minore, la colonna
   finirebbe sopra il feed - e non deve succedere).
   =============== */

.mood-shell__left,
.mood-shell__right {
    position: fixed;
    top: var(--shell-top, 100px);
    max-height: calc(100vh - var(--shell-top, 84px) - 16px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-bottom: 1rem;
    z-index: 10;
    display: none;              /* si accendono solo con lo spazio giusto */
}
/* La larghezza la danno le due regole qui sotto: --shell-col non esiste nel
   progetto ed era un nome inventato (controllo 13/09), quindi e via. */
.mood-shell__left  {left: 4px;width: var(--shell-col-l, 292px);}
.mood-shell__right { right: 12px; width: var(--shell-col-r, 320px); }

/* Le misure crescono con lo schermo, cosi' non rubano spazio al centro. */
:root {
    --shell-col-l: clamp(260px, 20vw, 280px);
    --shell-col-r: clamp(260px, 20vw, 280px);
}

/* Sinistra: c'e' posto da 1140px in su ((vw - 680) / 2 >= colonna + 12). */
@media (min-width: 1190px) {
    body:not(.shell-aside-closed) .mood-shell__left { display: block; }
}
/* Destra: serve un po' piu' di spazio (1220px), altrimenti finirebbe sul feed. */
@media (min-width: 1200px) {
    .mood-shell__right { display: block; }
}

/* ---------- Pannelli (dentro le colonne) -------------------------------- */
.shell-panel {
    padding: 0.5rem 0.8rem 0.5rem 0.1rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid #9e9e9e3d;
}

/* LE VOCI LEGALI IN FONDO ALLA COLONNA DI DESTRA (23/09/2026). Il titolare: «e aggiungiamoli
   anche qui», indicando questa colonna. NON hanno uno stile loro: la ricetta dei due link sta in
   `mood-ui.css` (`.mood-legali` / `.mood-legale`), la stessa del piede della tendina — una sola,
   due posti, così non possono divergere. Qui c'è solo quello che è di QUESTA colonna: il rientro,
   che segue quello delle intestazioni dei pannelli (9px), e nessun bordo — non è un pannello.
   Stanno sotto i pannelli: si vedono senza aprire il menu, e costano una riga da 21px. */
.mood-shell__right .mood-legali { padding: 2px 0 6px 9px; }
.shell-panel__head {
    display: flex;
    padding-left: 9px;
    padding-right: 9px;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.8rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mood-text-muted, #8b8b9e);
}
.shell-panel__head svg {width: 20px;height: 20px;}
.shell-panel__link {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mood-primary, #f1f1f1);
    text-decoration: none;
    padding: 3px 11px;
    background: var(--bg-color-dark);
    border-radius: 9px;
}

/* «more…»: l'ultima riga del pannello Giochi, che porta a TUTTI i giochi (`/game/`). Sta in fondo
   perche' il pannello mostra solo le ultime entrate: quando i giochi saranno trenta, la colonna di
   sinistra non deve diventare una lista lunghissima (titolare, 19/09/2026). */
.shell-panel__more {
    display: block;
    margin: 0.3rem 0.43rem 0.1rem;
    padding: 0.42rem;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--mood-primary, #6c5ce7);
    text-decoration: none;
    background: var(--bg-color-dark);
    border-radius: 10px;
}
.shell-panel__more span {
    opacity: 0.72;
    font-weight: 600;
}

.shell-item {
    display: flex;
    align-items: center;
    gap: 0.86rem;
    padding: 0.45rem 0.43rem;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.shell-item:hover, .shell-item:focus-visible {background: #aeaeb42e;}
.shell-item__img {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
    flex: none;
    background: var(--gradient-blue-full);
    border: 1px solid #181836;
}
.shell-item__txt {min-width: 0;display: flex;flex-direction: column;}
.shell-item__txt b {font-size: 0.85rem;font-weight: 500;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.shell-item__txt span{
    padding-left: 9px;
    font-size: 0.8rem;
}
.shell-item span{
    padding-left: 0;
}
.shell-item__txt .shell-item__txt span {font-size: 0.72rem;color: var(--mood-text-muted, #8b8b9e);}


.shell-shop { display: grid; gap: 0.6rem; }
.shell-shop__card {display: grid;grid-template-columns: 56px 1fr;gap: 0.85rem;align-items: start;}
.shell-shop__img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: rgba(255, 255, 255, 0.05); }
.shell-shop__b {font-size: 0.84rem;font-weight: 500;line-height: 1.2;display: block;}
.shell-shop__p { font-size: 0.78rem; font-weight: 800; color: var(--mood-primary, #6c5ce7); }
.shell-shop__p.is-manca { color: #e67e22; font-weight: 600; }

/* ---------- La linguetta che apre/chiude la colonna ---------------------
   Sta sul bordo sinistro, sempre raggiungibile: e' li' sia quando la colonna
   e' aperta (per chiuderla) sia quando e' chiusa (per riaprirla). Non tocca
   il centro: e' larga 22px e sta nel margine. */
.shell-toggle {
    position: fixed;
    left: calc(min(86vw, 140px) - 2px);
    top: 36px;
    transform: translateY(-50%);
    z-index: 950;
    display: none;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: none;
    border-left: none;
    border-radius: 0 6px 6px 0;
    color: #ccccdb87;
    cursor: pointer;
    /* Sopra l'intestazione (z-index 100) e sotto il cassetto (1200): se sta a 0
       l'intestazione la copre e il click non arriva. */
    background: transparent;
}
.shell-toggle svg {width: 26px;height: 26px;}
.shell-toggle span {display: none;}
.shell-toggle:hover { color: var(--mood-primary, #6c5ce7); border-color: var(--mood-primary, #6c5ce7); }
@media (min-width: 1190px) {
    .shell-toggle {display: inline-flex;}
    /* Aperta la colonna, la linguetta le sta appiccicata sul bordo destro: cosi'
       non e' un bottone piantato nel vuoto, ma la maniglia della colonna stessa.
       (4px = lo scostamento scelto dall'utente per la colonna.) */
    body:not(.shell-aside-closed) .shell-toggle { left: calc(var(--shell-col-l) + 4px); }
}

/* ---------- Schermi stretti: da colonna a cassetto ---------------------- */

@media (max-width: 1149px) {
    .mood-shell__left {
        display: block;
        left: 0; top: 0; bottom: 0;
        width: min(86vw, 340px);
        max-height: none;
        padding: 1rem 0.9rem 2rem;
        background: var(--mood-bg, #0e0e16);
        border-right: 1px solid var(--mood-border, #2b2b3d);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
        transform: translateX(-102%);
        transition: transform 0.22s ease;
        visibility: hidden;
        z-index: 1200;
    }
    body.shell-aside-open .mood-shell__left { transform: none; visibility: visible; }
    .shell-backdrop {
        position: fixed; inset: 0; z-index: 1190;
        background: rgba(6, 6, 12, 0.55);
        opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
    }
    body.shell-aside-open .shell-backdrop { opacity: 1; pointer-events: auto; }

    /* Sotto i 1150px la sinistra si apre a CASSETTO con la linguetta (come sul
       telefono): non finisce in fondo alla pagina, dove nessuno la trova. */
    .shell-toggle {display: inline-flex;left: calc(min(86vw, 139px) - 2px);}
    body.shell-aside-open .shell-toggle { left: calc(min(86vw, 340px) - 2px); }
    .mood-shell__right {
        display: block;
        position: static;
        width: auto;
        max-width: var(--mood-max-width, 680px);
        margin: 0 auto 1rem;
        padding: 0 16px;
        max-height: none;
        overflow: visible;
    }
}
@media (max-width: 780px) {
    .shell-toggle {left: calc(min(86vw, 139px) - 30px);top: 38px;}
}
@media (prefers-reduced-motion: reduce) {
    .mood-shell__left, .shell-backdrop { transition: none; }
}
/* ---------- Media misto: avatar e miniature possono essere VIDEO -------------
   Un avatar qui puo' essere un .mp4 (segnalato: @admin). Le classi sono le
   stesse per <img> e <video>, ma a un video servono display: block e il
   ritaglio, altrimenti si vedono le bande o il quadrato nero. */
.shell-item__img, .shell-shop__img { display: block; object-fit: cover; }
video.shell-item__img, video.shell-shop__img { background: rgba(255, 255, 255, 0.06); }

/* ---------- Canali: un'icona al posto della foto ------------------------------
   I canali tematici (sotto la Chat) non hanno una miniatura: hanno un simbolo. La
   pastiglia e' la stessa di .shell-item__img - stessa misura, stesso bordo - ma con
   il simbolo in mezzo, perche' qui dentro c'e' un <i data-lucide>, non un'immagine. */
.shell-item__icona {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-blue-full);
    border: 1px solid var(--base-blue);
    color: white;
}
.shell-item__icona svg { width: 18px; height: 18px; }

/* ---------- Canali: il collegamento al FEED + l'icona "info" --------------------------
   In una riga ci stanno due cose diverse: dove vai (il feed del canale) e che cos'e'
   (l'informazione, dall'endpoint `/api/canali/{chiave}/info`). Il tocco grande resta il
   collegamento; l'icona e' piccola, perche' nessuno ci arriva per sbaglio. */
.shell-item--canale {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    padding: 0;
    border-radius: 10px;
}
.shell-item--canale:hover { background: #aeaeb42e; }
.shell-canale__apri {
    display: flex;
    align-items: center;
    gap: 0.86rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.45rem 0.43rem;
    color: inherit;
    text-decoration: none;
}
.shell-canale__info {
    flex: none;
    border: 0;
    background: none;
    color: var(--mood-text-muted, #8b8b9e);
    cursor: pointer;
    padding: 5px;
    border-radius: 8px;
    display: inline-flex;
    margin-top: 4px;
    margin-right: 10px;
}
.shell-canale__info:hover { color: #a29bfe; background: rgba(162, 155, 254, 0.14); }
.shell-canale__info svg { width: 15px; height: 15px; }
/* La spiegazione che si apre sotto la voce: le regole del canale, lette dal server. */
.shell-canale__spiega {
    font-size: 0.75rem;
    color: var(--mood-text-muted, #8b8b9e);
    padding: 2px 10px 8px 12px;
    line-height: 1.45;
}
.shell-canale__spiega ul { margin: 0 0 6px 14px; padding: 0; }
.shell-canale__spiega .shell-panel__link { display: inline-block; }
.shell-canale__spiega li {margin-bottom: 0.5rem;}
.shell-canale__spiega li:nth-child(odd) { background:transparent}
.shell-canale__spiega li:nth-child(even) { background:transparent}