/* dock.css — bottom nav mobile: pill fluttuante "glass" con indicatore che scorre.
   Sostituisce il vecchio .tt-mobile-nav. Caricato globalmente in app.php (?v=filemtime).
   Posizionamento indicatore + reposition() in dock.js (predisposto per Barba.js). */

/* ── Spazio riservato in fondo al contenuto (solo mobile) ─────────────── */
@media (max-width: 767px) {
    .tt-container__right {
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }
    /* Pagine senza dock (body.no-dock, vedi app.php): niente spazio riservato */
    body.no-dock .tt-container__right {
        padding-bottom: 0;
    }

    /* Con soft-nav il dock è sempre nel DOM (app.php lo renderizza sempre):
       sulle pagine no-dock va nascosto, non solo tolto lo spazio. */
    body.no-dock .tt-dock { display: none; }
}

/* ── Contenitore glass ───────────────────────────────────────────────── */
.tt-dock {
    display: none; /* desktop → sidebar */
}

@media (max-width: 767px) {
    .tt-dock {
        position: fixed;
        left: 50%;
        bottom: calc(14px + env(safe-area-inset-bottom));
        transform: translateX(-50%);
        z-index: 100;

        display: inline-flex;
        align-items: center;
        /* dock.js blocca la larghezza al caso più largo (voce attiva con la
           label più lunga): il centraggio assorbe il gioco residuo e il
           contenitore non si ridimensiona a ogni cambio di sezione.
           border-box: la larghezza impostata via JS è misurata sui rect. */
        box-sizing: border-box;
        justify-content: center;
        gap: 2px;
        padding: 6px;

        border-radius: 999px;
        /* superficie calda translucida (mai grigio neutro) */
        background: hsla(26 8% 10% / 0.7);
        /* hairline via box-shadow inset così il padding-box == border-box:
           l'indicatore assoluto si allinea al pixel senza offset del bordo */
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55),
                    inset 0 0 0 1px rgba(245, 242, 236, 0.14),
                    inset 0 1px 0 rgba(245, 242, 236, 0.10);
        -webkit-backdrop-filter: blur(20px) saturate(1.4);
        backdrop-filter: blur(20px) saturate(1.4);
    }
}

/* ── Indicatore glass che scorre ─────────────────────────────────────── */
.tt-dock__pill {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-radius: 999px;
    /* Effetto "scavato": incavo leggermente più scuro della barra, con ombra
       interna in alto (profondità) e un filo di luce in basso (parete illuminata). */
    background: linear-gradient(rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.05));
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55),
                inset 0 -1px 1px rgba(245, 242, 236, 0.12),
                inset 0 0 0 1px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translate(0, 0);
    /* transform con overshoot elastico sottile (partenza ottimista al tap,
       vedi dock.js); width/height restano su ease-out puro: l'overshoot
       sulle dimensioni deformerebbe l'incavo. */
    transition: transform 390ms cubic-bezier(.30, 1.42, .44, 1),
                width var(--dur-base, 320ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
                height var(--dur-base, 320ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
                opacity var(--dur-fast, 180ms) var(--ease-out);
}
/* Primo paint e misure FLIP senza transizioni: dock.js aggiunge .no-anim
   per un frame (label incluse: servono ferme per misurare lo stato finale) */
.tt-dock.no-anim .tt-dock__pill,
.tt-dock.no-anim .tt-dock__label {
    transition: none;
}

/* ── Voci ────────────────────────────────────────────────────────────── */
.tt-dock__item {
    position: relative;
    z-index: 1;
    /* mai schiacciare le voci: se il contenuto supera la larghezza fissa
       (transitorio di misura/calibrazione) meglio sforare che tagliare
       le label a metà testo */
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 46px;
    padding: 0 13px;
    border-radius: 999px;
    text-decoration: none;
    color: rgba(245, 242, 236, 0.55);
    transition: color var(--dur-fast, 180ms) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}
.tt-dock__item:hover { color: rgba(245, 242, 236, 0.82); }
.tt-dock__item.active { color: var(--ink); }

.tt-dock__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tt-dock__icon i { font-size: 21px; line-height: 1; }
.tt-dock__icon svg { width: 22px; height: 22px; display: block; }

.tt-dock__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: max-width var(--dur-base, 320ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
                opacity var(--dur-base, 320ms) var(--ease-out),
                margin-left var(--dur-base, 320ms) var(--ease-out);
}
.tt-dock__item.active .tt-dock__label {
    /* larghezza esatta misurata da dock.js: con un tetto generoso le due
       label in transizione restano entrambe piene per mezza corsa e il
       dock si gonfia; con quella reale le corse sono complementari */
    max-width: var(--label-w, 140px);
    opacity: 1;
    margin-left: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .tt-dock__pill,
    .tt-dock__label,
    .tt-dock__item { transition: none; }
}