:root {
    /* PALETTE BLACK & WHITE */
    --bg-color: #000000;
    /* Nero Assoluto */
    --card-bg: #000000;
    /* Anche le card sono nere (stile minimal) */
    --text-primary: #ffffff;
    /* Bianco Puro */
    --text-secondary: #e3e3e3;
    /* #888888 Grigio Argento per i dettagli */

    --accent-blue: #ffffff;
    /* Le icone che erano blu ora sono bianche */
    --accent-blue-bright: #ffffff;
    /* Link e azioni diventano bianchi */

    --btn-blue: #ffffff;
    /* Bottone Principale (Copy) -> Bianco */
    --btn-red: #222222;
    /* Bottone Revoke -> Grigio Scuro (o #333) */

    --input-dark-bg: #111111;
    /* Input leggermente distinguibile dal nero */
    --separator: #333333;
    /* Linee grigie visibili sul nero */

    /* Aggiungi o verifica questa variabile */
    --surface-gray: #222222;
    /* Lo stesso grigio scuro del bottone Revoke */
    --hover-gray: #2a2a2a;
    /* Un grigio appena più chiaro per l'effetto mouse */

    --contrast: #26e0a6;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    /* DISABILITA SELEZIONE TESTO (Effetto App) */
    -webkit-user-select: none;
    /* Safari/Chrome */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE/Edge */
    user-select: none;
    /* Standard */

    /* DISABILITA IL FLASH BLU AL TOCCO SU MOBILE */
    -webkit-tap-highlight-color: transparent;

    /* DISABILITA BORDI BLU DI DEFAULT SU CLICK */
    outline: none;

    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html,
body {
    overflow-x: hidden;
    /* Uccide la scrollbar orizzontale per sempre */
}

/* ECCEZIONE: Permetti di selezionare e scrivere negli input */
input,
textarea {
    -webkit-user-select: text;
    user-select: text;
    /* Manteniamo outline none perché lo gestiamo col border color */
    outline: none;
}

body {
    background-color: var(--bg-color);
    /*font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;*/
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}



/* --- COMPONENTE: Header --- */
.comp-header {
    text-align: center;
    margin-bottom: 20px;
}

.comp-header .main-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 2px solid #222;
    /* Un piccolo bordo scuro per stacco se l'img è nera */
}

.comp-header h1 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.comp-header .handle {
    color: var(--text-secondary);
    font-size: 14px;
}

/* --- COMPONENTE: Token Panel --- */
.token-card {
    background-color: var(--card-bg);
    border: 1px solid #222;
    /* Bordo sottile per definire la card sul nero */
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.token-input-box {
    background-color: var(--input-dark-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 5px;
    border: 1px solid #333;
}

.key-icon {
    width: 20px;
    height: 20px;
    stroke: var(--text-primary);
    /* Icona chiave bianca */
    margin-right: 10px;
}

.account-icon {
    width: 20px;
    height: 20px;
    stroke: var(--text-primary);
    /* Icona bianca */
    margin-right: 10px;
    flex-shrink: 0;
}

.token-value {
    color: var(--text-primary);
    /*font-family: monospace;*/
    font-size: 16px;
    letter-spacing: 2px;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    /*opacity: 0.8;*/
}

.btn-row {
    display: flex;
    gap: 10px;
}

.btn {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn:hover {
    opacity: 0.8;
}

/* Bottone COPY: Bianco con testo Nero */
.btn-primary {
    background-color: var(--btn-blue);
    color: #000000;
}

/* Bottone REVOKE: Scuro con testo Rosso o Bianco (qui bianco per coerenza B&W) */
.btn-danger {
    background-color: var(--surface-gray);
    color: #ffffff;
    border: 1px solid #333;
}

/* --- COMPONENTE: Description Text --- */
.info-text {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 25px;
    padding: 0 5px;
}

.info-text a {
    color: var(--text-primary);
    /* Link bianchi */
    text-decoration: underline;
}

/* --- COMPONENTE: Settings List --- */
.settings-group-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    padding-left: 5px;
    color: var(--text-primary);
}

.list-container {
    background-color: var(--surface-gray);
    /* <--- ORA È GRIGIO */
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.list-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    position: relative;
    height: 54px;

    /* Manteniamo la transizione solo per il colore di sfondo */
    transition: background-color 0.2s ease;
    z-index: 1;
}

.list-item:hover {
    /* Manteniamo solo il cambio colore leggero per far capire che è cliccabile */
    background-color: var(--hover-gray);

    /* RIMOSSI GLI EFFETTI DI MOVIMENTO E OMBRA */
    transform: none;
    box-shadow: none;
}

/* FIX LINEA DI SEPARAZIONE */
.list-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--bg-color);

    /* Linea leggermente più chiara dello sfondo */
}

.list-item:last-child::after {
    display: none;
}

.settings-icon {
    width: 24px;
    height: 24px;
    margin-right: 16px;
    stroke: var(--text-primary);
    /* Icone Bianche */
    stroke-width: 1.5;
}

.item-text {
    flex-grow: 1;
    font-size: 15px;
    font-weight: 400;
    color: var(--text-primary);
}

.chevron {
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary);
    /* Chevron grigia */
}

.verified-icon {
    width: 20px;
    height: 20px;
    fill: #1DA1F2;
    /* Colore Twitter */
    vertical-align: middle;
    margin-left: 2px;
}

/* Stile del Bottone */
.btn-stripe {
    background-color: #26e0a6;
    color: #0a2540;
    width: 100%;
    margin-top: 5px;
    padding: 0 12px;
    height: 48px;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;

    /* FLEXBOX */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* Spazio tra testo e immagine */
}

.btn-stripe:hover {
    opacity: 0.9;
}

.btn-stripe:active {
    transform: scale(0.98);
}


/* Stile per il Logo PNG */
.stripe-logo-img {
    height: 26px;
    /* Leggermente più grande per leggibilità */
    width: auto;
    display: block;

    /* TRUCCO PER RIMUOVERE LO SFONDO BIANCO */
    /* Questo fa sì che il bianco dell'immagine diventi trasparente */
    mix-blend-mode: multiply;

    /* Rimuovi il vecchio filtro brightness che creava il quadrato nero */
    /* filter: brightness(0.1);  <-- RIMOSSO */
}

/* --- TELEGRAM STYLE LOADER (Fixed) --- */
.tg-loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    /* Barra sottile e pulita */
    z-index: 9999;
    pointer-events: none;
}

.tg-loader-bar {
    height: 100%;
    /* Colore di contrasto (bianco) */
    background-color: var(--contrast);
    width: 0%;
    opacity: 0;
    transition: none;

    /* AGGIUNTE DI SICUREZZA: Rimuovono ogni possibile ombra o bordo */
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* Stato di caricamento: Arriva veloce all'80% */
.loading .tg-loader-bar {
    opacity: 1;
    width: 80%;
    /* Attiviamo la transizione solo quando parte il caricamento */
    transition: width 0.4s cubic-bezier(0.2, 0, 0, 1), opacity 0.2s ease;
}

/* Stato completato: Finisce al 100% e sparisce */
.loaded .tg-loader-bar {
    width: 100% !important;
    opacity: 0;
    transition: width 0.2s ease-in, opacity 0.3s ease-in 0.2s;
}

/* --- FORM CONTATTI --- */
.contact-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--separator);
}

.back-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px;
    margin-right: 10px;
}

.back-btn:hover {
    color: var(--text-primary);
}

.form-group {
    margin-bottom: 12px;
}

.form-label {
    font-size: 12px;
    font-weight: 500;
    color: #666;
    margin-bottom: 4px;
    margin-left: 2px;
}

.form-input,
.form-textarea {
    width: 100%;
    background-color: var(--input-dark-bg);
    border: 1px solid #333;
    color: var(--text-primary);
    padding: 12px;
    border-radius: 8px;
    /*font-family: 'Roboto', sans-serif;*/
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.form-input:focus,
.form-textarea:focus {
    border-color: #26e0a6;
    /* Verde del brand */
    box-shadow: 0 0 0 3px rgba(38, 224, 166, 0.1);
    /* Alone leggero */
    background-color: #1a1a1a;
    /* Leggermente più chiaro quando attivo */
    transition: all 0.2s ease;
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* --- NUOVO MEGA BOTTONE (Profile + Action) --- */
/* --- NUOVO MEGA BOTTONE (Profile + Action) --- */
.profile-action-btn {
    width: 100%;
    background-color: #26e0a6;
    color: #0a2540;
    border: none;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    position: relative;
    padding-right: 60px;

    /* --- MAGIA STRIPE --- */
    /* Transizione fluida su tutto (ombra e movimento) */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Ombra iniziale quasi invisibile */
    box-shadow: 0 2px 4px rgba(38, 224, 166, 0.1);

    /* Per evitare che l'animazione sfochi il testo */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* EFFETTO RILIEVO QUANDO PASSI IL MOUSE */
.profile-action-btn:hover {
    /* 1. Si alza di 4 pixel */
    transform: translateY(-4px);

    /* 2. L'ombra diventa grande, diffusa e colorata (effetto neon/glow) */
    box-shadow: 0 12px 20px -5px rgba(38, 224, 166, 0.4);

    /* 3. Leggermente più brillante */
    filter: brightness(1.05);
}

.profile-action-btn:active {
    /* Quando clicchi torna giù (feedback tattile) */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(38, 224, 166, 0.3);
    transition: all 0.1s;
}

/* Logo Stripe in alto a destra */
.pab-stripe-logo-corner {
    position: absolute;
    top: 12px;
    /* Distanza dal bordo superiore */
    right: 12px;
    /* Distanza dal bordo destro */
    height: 18px;
    /* Dimensione contenuta */
    width: auto;
    /*opacity: 0.8;
    /* Leggermente trasparente per eleganza */
    /*mix-blend-mode: screen;*/
    /* Ottimo su sfondo scuro per rimuovere eventuali bordi bianchi */
    pointer-events: none;
    /* Il click passa attraverso e clicca il bottone */
}

/* Avatar circolare a sinistra */
.pab-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #ffffff;
    /* Sfondo bianco se l'img è trasparente */
    flex-shrink: 0;
    /* Non si schiaccia mai */
    border: 2px solid rgba(0, 0, 0, 0.1);
    /* Leggero bordo */
    pointer-events: none;/
}

/* Contenitore dei testi a destra */
.pab-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex-grow: 1;
    overflow: hidden;
    /* Per gestire nomi lunghi */
}

/* Nome Utente (Riga in alto) */
.pab-name {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* Riga Status (Riga in basso) */
.pab-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0.9;
}

/* Logo Stripe piccolo dentro la riga status */
.pab-stripe-logo {
    height: 16px;
    /* Piccolo e discreto accanto al testo */
    width: auto;
    display: block;
    mix-blend-mode: multiply;
    /* Rimuove lo sfondo bianco del logo PNG */
    pointer-events: none;
}

/* --- ANIMAZIONI INGRESSO HOME PAGE --- */

/* Stato iniziale: invisibile e spostato giù */
.animate-entry {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
    /* Ottimizzazione performance */
}

/* Stato finale: visibile e al suo posto */
.animate-entry.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ritardi progressivi (Staggering) */
.delay-1 {
    transition-delay: 0.05s;
}

/* Header */
.delay-2 {
    transition-delay: 0.15s;
}

/* Account Card */
.delay-3 {
    transition-delay: 0.25s;
}

/* Settings List */

.post-card {
    /*background: #0a0a0a;*/
    /*border: 1px solid var(--separator);*/
    border-radius: 12px;
    padding: 18px;
}

.post-date {
    font-size: 11px;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.post-title {
    font-size: 17px;
    font-weight: 400;
    /* RIMOSSO IL GRASSETTO */
    margin-bottom: 8px;
    color: var(--text-primary);
}

.post-excerpt {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 0 5px;
    /* Stessa grandezza di info-text */
    line-height: 1.5;
    /*font-weight: 400;*/
    /*color: #ffffff;*/
    /* Bianco puro come richiesto */
    white-space: pre-wrap;

    /* Mantiene gli "a capo" corretti */
}

/* --- BADGE FINANZIARI (Ticker, CIK, SIC) --- */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.post-tag {
    font-size: 11px;
    padding: 4px 8px;
    background-color: #1a1a1a;
    border: 1px solid var(--separator);
    border-radius: 6px;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.5px;
}

.ticker-tag {
    color: var(--contrast);
    /* Verde acceso per far risaltare il Ticker */
    border-color: rgba(38, 224, 166, 0.3);
    background-color: rgba(38, 224, 166, 0.05);
}


/* Search Box */
.search-container {
    flex-grow: 1;
    /* Prende tutto lo spazio rimanente */
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary);
}

.search-input {
    width: 100%;
    background-color: var(--input-dark-bg);
    /* var(--bg-color);*/
    border: 1px solid var(--separator);
    color: var(--text-primary);
    padding: 12px 12px 12px 42px;
    /* 42px per fare spazio all'icona lente */
    border-radius: 12px;
    font-size: 15px;
    outline: none;
    transition: all 0.2s ease;
}

.search-input:focus {
    border-color: var(--contrast);
    box-shadow: 0 0 0 3px rgba(38, 224, 166, 0.1);
    background-color: #1a1a1a;
}


/* 2. Webkit (Chrome, Edge, Safari) - La magia dell'Overlay (SCROLLBAR GLOBALE) */
::-webkit-scrollbar {
    width: 2px;
    /* <-- PORTATA A 3px (Molto più stretta e raffinata su PC) */
    height: 2px;
    /* Stessa cosa per quella orizzontale se dovesse servire */
    background-color: transparent;
    /* Sfondo completamente invisibile */
}

/* La 'pista' dove scorre la barra */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Il 'pollice' (la barra vera e propria) */
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0);
    /* INVISIBILE DI DEFAULT */
    border-radius: 10px;

    /* Il trucco per staccare la barra dal bordo destro */
    background-clip: padding-box;
    border: 2px solid transparent;

    transition: background-color 0.3s ease;
    /* Transizione morbida */
}

/* 3. Rendiamo visibile la barra SOLO quando il contenitore riceve un hover */
body:hover::-webkit-scrollbar-thumb,
.drawer:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    /* Diventa grigio semi-trasparente */
    border: 1px solid transparent;
    /* Riduce il bordo per renderla più visibile */
}

/* 4. Ancora più visibile se ci passi sopra direttamente con il mouse o stai trascinando */
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, 0.5);
    /* Grigio più chiaro */
}

/*fix margini su browser*/

/*marini sul canale*/
/* Questa classe viene aggiunta da main.js solo se NON sei su Telegram */
/* Aggiunge spazio extra in fondo quando l'app è aperta da un browser normale */
.app-container.browser-view {
    /*padding-top: 40px; distanza tra top e barra srtumenti*/
    padding-bottom: 40px !important;
}

/*margini menu a tendina*/
/* Margini menu a tendina solo da Browser */
body.browser-view #side-drawer,
body.browser-view #drawer-content {
    padding-bottom: 40px !important;
}

/* Sicurezza extra per assicurare che il feed non venga mai coperto */
/*#feed-wrapper {
    padding-bottom: 120px;
}*/

/* IMPORTANTE: Overlay per evitare che la scrollbar occupi spazio nel layout.
   Questa proprietà non è supportata ovunque, ma dove c'è, fa la differenza.
*/
html {
    overflow-y: overlay;
}


/* 1. Blocchiamo la pagina principale (addio spazio nero laterale!) */
html,
body {
    overflow: hidden !important;
    height: 100%;
    width: 100%;
    margin: 0;
}

/* 2. Il feed scorre solo all'interno del suo contenitore */
/* --- CONTENITORE PRINCIPALE --- */
.app-container {
    width: 100%;
    padding: 0;
    height: 100vh;

    /* MODIFICHE ANTI-SHIFT */
    overflow-y: scroll;
    /* Forza la presenza della 'pista' di scorrimento */
    scrollbar-gutter: stable;
    /* Dice al browser di riservare sempre lo spazio per la barra */

    overflow-x: hidden;
    position: relative;
    scrollbar-width: thin;
}

/* --- INVOLUCRO INTERNO (Mantiene il design stretto come su smartphone) --- */
.content-wrapper {
    width: 100%;
    /* Si allarga sempre prendendo tutto lo spazio... */
    min-width: 320px;
    /* ...ma non si stringe mai sotto i 320px (evita che si rompa su telefoni piccolissimi) */
    max-width: 450px;
    /* ...e non si allarga mai oltre i 600px su PC! (Scegli tu questo valore) */
    margin: 0 auto;
    position: relative;
}

/* --- FEED POST STYLE --- */
.feed-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 10px 40px 10px;
    /* 0 10px 40px 10px - 10px ai lati per staccare i post dal bordo */
}


/* --- HIGHLIGHT RICERCA (Stile Ctrl+F) --- */
.search-highlight {
    background-color: var(--contrast);
    /* Il verde di Stripe */
    color: #000000;
    /* Testo nero per massimo contrasto */
    border-radius: 3px;
    /* Nessun padding e nessun font-weight: 
       la parola manterrà la sua esatta dimensione originale! 
    padding: 0 2px;
    font-weight: 500;*/
}


/* 1. Applichiamo la scrollbar overlay al body e al drawer */
html,
body {
    /* Su Firefox, usa la scrollbar sottile ma purtroppo non supporta l'overlay perfetto nativamente */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* --- OVERLAY CENTRALE PER I BOTTONI FLUTTUANTI --- */
#floating-wrapper {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    /* Centra l'overlay nello schermo */
    width: 100%;
    /* DEVE ESSERE IDENTICO AL MAX-WIDTH DI .content-wrapper */
    max-width: 450px;
    /* Esatta larghezza del feed, rimarrà nei bordi! */
    pointer-events: none;
    /* Lascia cliccare le pubblicazioni sotto */
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Ancora tutti gli elementi al lato DESTRO */
    padding: 0 10px;
    /* Margine per non toccare i bordi dello schermo */
}

/* Fix per Browser Mobile (evita la barra in basso) */
body.browser-view #floating-wrapper {
    bottom: 90px;
}

/* --- SFONDO SCURO (BACKDROP) PER MENU FLUTTUANTE --- */
#floating-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.6);
    /* Nero trasparente al 60% */
    backdrop-filter: blur(3px);
    /* Sfocatura del testo in background */
    -webkit-backdrop-filter: blur(3px);
    z-index: 1990;
    /* Sta sotto i bottoni ma sopra al feed */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;

    will-change: opacity;
    transform: translateZ(0);
}

#floating-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
    /* Cattura i click per chiudere il menu */
}

.floating-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    padding-right: 1px;
    width: 100%;

    /* MODIFICA CRUCIALE: Rimetti a 'none' per far passare i tocchi e le rotellate del mouse! */
    pointer-events: none;
}

/* --- IL BOTTONE MAGICO (Stato Chiuso) --- */
.expandable-box {
    background-color: #111111;
    border: 1px solid #333333;
    border-radius: 12px;
    width: 44px;

    /* MODIFICA CHIAVE: Niente più height fisso. Usiamo i limiti! */
    min-height: 44px;
    max-height: 44px;

    /* AGGIUNTA FONDAMENTALE: Riattiva il click e lo scroll SOLO sul bottone reale */
    pointer-events: auto;

    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Assicuriamoci che l'animazione copra il max-height */
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.4s ease,
        background-color 0.3s ease;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    will-change: width, max-height;
    transform: translateZ(0);
    backface-visibility: hidden;

    /* AGGIUNTA FONDAMENTALE PER LA CHIUSURA SU MOBILE */
    contain: layout paint;

}

/* Effetto di pressione solo se chiuso e non è scroll */
.expandable-box:not(.open):not(.scroll-only):active {
    transform: scale(0.92);
    background-color: #222222;
}


/* --- IL PANNELLO (Stato Aperto Dinamico) --- */
.expandable-box.open {
    /* MODIFICA: 100% invece di 100vw, così si adatta al contenitore! */
    width: var(--open-width, 100%);
    max-width: 100%;
    /* Sicurezza per non farlo mai strabordare */

    max-height: var(--open-height, calc(100dvh - 290px));
    border-radius: 16px;
    background-color: #000000;
    cursor: default;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    border-color: #444;

    transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
        max-height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-radius 0.4s ease,
        background-color 0.3s ease;
}

/* --- CLASSE SPECIALE PER NASCONDERE TITOLO E 'X' --- */
.expandable-box.hide-header-texts .box-title,
.expandable-box.hide-header-texts .box-close {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* --- STILI INPUT DI RICERCA FLUTTUANTE --- */
#floating-search-input {
    position: absolute;
    left: 45px;
    /* Lascia lo spazio per la lente d'ingrandimento */
    right: 15px;
    /* Distanza dal bordo destro */
    height: 100%;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 15px;
    outline: none;

    /* È invisibile e non cliccabile quando il box è chiuso */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Quando il box ricerca è aperto, l'input compare in ritardo */
.expandable-box.open #floating-search-input {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease 0.2s;
    /* Aspetta che il box si allarghi */
}

/* Nascondiamo il contenuto finto per il box di ricerca */
#box-search .box-content {
    display: none;
}

/* --- L'HEADER INTERNO (Animazione icona fluida) --- */
.box-header {
    position: relative;
    width: 100%;
    height: 44px;
    min-height: 44px;

    /* AGGIUNTO: Impedisce all'header di venire schiacciato e sparire */
    flex-shrink: 0;

    display: flex;
    align-items: center;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.expandable-box.open .box-header {
    border-bottom: 1px solid #222;
    cursor: pointer;
}

/* 1. L'ICONA: Scivola morbidamente in sincrono perfetto */
.box-icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;

    /* MODIFICA QUI: Portato a 0.5s esatti per viaggiare insieme ai bordi */
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.expandable-box.open .box-icon {
    left: 15px;
    /* Quando si apre, si sposta esattamente a 15px dal bordo sinistro */
    transform: translateX(0);
}

/* 2. IL TITOLO: Appare e scompare al momento giusto */
.box-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
    margin-left: 45px;
    /* Lascia lo spazio fisico per l'icona a sinistra */
    opacity: 0;
    visibility: hidden;
    /* Sparisce sùbito in chiusura per evitare accavallamenti */
    transition: opacity 0.05s ease, visibility 0.05s;
}

.expandable-box.open .box-title {
    opacity: 1;
    visibility: visible;
    /* In apertura aspetta 0.2s che la scatola si allarghi, poi appare in dissolvenza */
    transition: opacity 0.3s ease 0.2s, visibility 0s 0.2s;
}

/* 3. LA 'X' DI CHIUSURA: Ancorata a destra */
.box-close {
    position: absolute;
    right: 15px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.05s ease, visibility 0.05s;
}

.expandable-box.open .box-close {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease 0.2s, visibility 0s 0.2s;
}

/* --- IL CONTENUTO (Appare sfumando) --- */
.box-content {
    opacity: 0;
    visibility: hidden;
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px 15px 20px 15px;
    /* <-- 40px di spazio vitale in basso! */

    /* Scrollbar sottile per Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;

    /* QUANDO SI CHIUDE: Svanisce quasi all'istante per non sbordare */
    transition: opacity 0.05s ease, visibility 0.05s;
}

/* --- REGOLA PER FIREFOX --- */
.box-content {
    /* ... (lascia intatto il resto del codice che hai qui dentro) ... */

    /* Su Firefox 'thin' è il massimo che possiamo fare per stringerla, 
       ma se la vuoi ancora più invisibile puoi scrivere: scrollbar-width: none; */
    scrollbar-width: thin !important;
}

/* --- REGOLE FORZATE PER CHROME / EDGE / SAFARI SU PC --- */
.box-content::-webkit-scrollbar {
    width: 2px !important;
    /* Il martello pesante: DEVE essere 2px */
}

.box-content::-webkit-scrollbar-track {
    background: transparent !important;
}

.box-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
}

.expandable-box.open .box-content {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease 0.2s, visibility 0s 0.2s;
}

.expandable-box.open .box-content {
    opacity: 1;
    visibility: visible;

    /* QUANDO SI APRE: Aspetta un attimo (0.2s) e poi appare dolcemente */
    transition: opacity 0.3s ease 0.2s, visibility 0s 0.2s;
}

/* --- BOTTONE SCROLL (Eccezione: non si apre) --- */
.expandable-box.scroll-only {
    transition: all 0.2s ease;
}

.expandable-box.scroll-only:active {
    transform: scale(0.92);
}


/* --- STILE BOTTONE DISATTIVATO/NON ABBONATO (Grigio elegante) --- */
.profile-action-btn.btn-inactive {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

/* Rimuove l'alone verde e mette un'ombra grigia leggerissima */
.profile-action-btn.btn-inactive:hover {
    box-shadow: 0 8px 16px -5px rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
}

/* Inverte i loghi Stripe per renderli visibili sullo sfondo scuro */
.profile-action-btn.btn-inactive .pab-stripe-logo-corner,
.profile-action-btn.btn-inactive .pab-stripe-logo {
    filter: brightness(0) invert(1);
    opacity: 0.4;
}


/* --- ANIMAZIONE DI INGRESSO DEL MENU FLUTTUANTE (Ritardata) --- */
#floating-wrapper {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) !important;
    /* Parte dal basso */
    /* Entra in scena con 0.4 secondi di ritardo per far caricare prima i paper! */
    transition: opacity 0.6s ease 0.4s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s;
}

#floating-wrapper.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) !important;
}

/* --- RIPRISTINO DELLA TUA ANIMAZIONE SCROLL BOTTONE --- */
#scroll-to-bottom-btn {
    opacity: 0;
    pointer-events: none;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#scroll-to-bottom-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}


/* Container iniziale */
#manifesto-wrapper {
    position: relative;
    cursor: pointer;
    /* Specifica max-height nella transizione per renderla burrosa */
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin-bottom 0.4s ease;
    max-height: 80px;
    overflow: hidden;
    margin-bottom: 20px;
}

/* Effetto sfocatura sul testo nascosto */
.collapsed .blur-effect {
    filter: blur(5px);
    opacity: 0.5;
    user-select: none;
    /* Impedisce di copiare il testo da chiuso */
    pointer-events: none;
}

/* Sfumatura nera sul fondo per dare profondità */
.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(transparent, #000);
    /* Cambia #000 col colore del tuo sfondo */
}

/* Stato espanso */
#manifesto-wrapper.expanded {
    max-height: 1500px;
    /* Aumentato per sicurezza */
    /*margin-bottom: 40px;*/
    /* Margine extra quando è aperto per dare respiro */
}

#manifesto-wrapper.expanded .blur-effect {
    filter: blur(0);
    opacity: 1;
    user-select: auto;
}

#manifesto-wrapper.expanded::after {
    display: none;
}

/* Suggerimento "Read more" */
#read-more-hint {
    font-size: 0.75rem;
    color: #0088cc;
    /* Colore Telegram o il tuo colore d'accento */
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.expanded #read-more-hint {
    display: none;
}

/* BOTTONE LOGOUT ROSSO */
/* Assicurati che il tuo bottone abbia la classe .logout-btn o l'id #logout */
.logout-btn,
#logout-button {
    color: #ff4d4d !important;
    /* Rosso vivido */
    border: 1px solid #ff4d4d !important;
    background: transparent;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    background: rgba(255, 77, 77, 0.1);
    /* Effetto hover leggero */
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.2);
}