/* ============================================================
   GondolaMail — layer "Gmail minimal"  (Fase 1, solo CSS)
   ------------------------------------------------------------
   Va caricato per ULTIMO in index.html: e' un layer di override,
   quindi vince su premium-theme.css e star-fix.css.
   Reversibile: basta togliere il <link> da index.html.

   STATI RIGA (devono restare distinguibili a colpo d'occhio):
     letto      -> bianco
     non letto  -> azzurro tenue + bold + rail 3px
     selezionato-> azzurro piu' carico
   Il JS marca i non letti con la classe .unread sia su .gm-msg-row
   sia su .gm-msg-row.gm-thread-row (verificato nel bundle).

   Cosa fa:
     1. token colore --gm-* (light + dark) al posto dei colori hardcoded
     2. riga messaggio stile Gmail: niente zebra, hover piatto, no ombre
     3. stop animazioni infinite / hover "da landing page"
     4. tab con un solo linguaggio (sottolineatura)
     5. focus visibile da tastiera + prefers-reduced-motion
     6. densita' opzionale via classe .gm-density-compact / -comfy

   NON tocca: logica JS, thread, stella (star-fix.css), compose, mobile.
   ============================================================ */

/* ---------- 1. TOKEN ---------- */
#gondolamail-app {
    --gm-accent: #1a73e8;
    --gm-row-h: 50px;
    --gm-row-bg: #ffffff;
    --gm-row-hover: #f1f3f4;
    --gm-row-unread: #edf3fd;
    --gm-row-unread-hover: #e2ecfb;
    --gm-row-selected: #d3e3fd;
    --gm-border: #eceff3;
    --gm-text: #202124;
    --gm-text-2: #5f6368;
    --gm-sidebar-bg: #f6f8fc;
}

#gondolamail-app.gm-dark,
#gondolamail-app[data-theme="dark"],
html[data-theme="dark"] #gondolamail-app {
    --gm-accent: #8ab4f8;
    --gm-row-bg: #1f2124;
    --gm-row-hover: #2a2d31;
    --gm-row-unread: #2a323d;
    --gm-row-unread-hover: #333d4a;
    --gm-row-selected: #3b4a5e;
    --gm-border: #33373d;
    --gm-text: #e8eaed;
    --gm-text-2: #9aa0a6;
    --gm-sidebar-bg: #1b1d20;
}

/* ---------- 2. MOVIMENTO: solo feedback, mai infinito ---------- */
#gondolamail-app .gm-account-item {
    animation: none !important;
}
#gondolamail-app .gm-account-item:nth-child(n) {
    animation-delay: 0s !important;
}
#gondolamail-app .gm-account-unread-badge {
    animation: none !important;
    background: var(--gm-accent) !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 600 !important;
}

#gondolamail-app .gm-msg-row,
#gondolamail-app .gm-avatar,
#gondolamail-app .gm-row-actions,
#gondolamail-app .gm-row-star,
#gondolamail-app .gm-tab,
#gondolamail-app .gm-tab-inline,
#gondolamail-app .gm-nav-item,
#gondolamail-app .gm-folder-item,
#gondolamail-app .gm-account-item,
#gondolamail-app .gm-compose-btn {
    transition-property: background-color, color, opacity, border-color !important;
    transition-duration: .12s !important;
    transition-timing-function: ease-out !important;
}

/* ---------- 3. SIDEBAR ---------- */
#gondolamail-app .gm-sidebar {
    background: var(--gm-sidebar-bg) !important;
    border-right: 1px solid var(--gm-border) !important;
}
#gondolamail-app .gm-compose-btn {
    background: var(--gm-accent) !important;
    border-radius: 16px !important;
    padding: 12px 20px !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15) !important;
}
#gondolamail-app .gm-compose-btn:hover {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(60, 64, 67, .30), 0 4px 8px 3px rgba(60, 64, 67, .15) !important;
}
/* in dark l'accent e' chiaro: il bottone resta blu per contrasto col testo bianco */
#gondolamail-app.gm-dark .gm-compose-btn,
html[data-theme="dark"] #gondolamail-app .gm-compose-btn {
    background: #1a73e8 !important;
}

#gondolamail-app .gm-nav-item {
    border-radius: 0 16px 16px 0 !important;
    font-weight: 400 !important;
}
#gondolamail-app .gm-nav-item:hover,
#gondolamail-app .gm-folder-item:hover {
    background: rgba(32, 33, 36, .06) !important;
}
#gondolamail-app.gm-dark .gm-nav-item:hover,
#gondolamail-app.gm-dark .gm-folder-item:hover {
    background: rgba(232, 234, 237, .08) !important;
}
#gondolamail-app .gm-nav-item.active,
#gondolamail-app .gm-nav-item[class*="active"] {
    background: var(--gm-row-selected) !important;
    font-weight: 600 !important;
}
#gondolamail-app .gm-account-item,
#gondolamail-app .gm-account-item:hover,
#gondolamail-app .gm-account-item.active,
#gondolamail-app .gm-account-item[class*="active"] {
    border-left-color: transparent !important;
}
#gondolamail-app .gm-account-item:hover {
    background: rgba(32, 33, 36, .05) !important;
}
#gondolamail-app .gm-account-item.active,
#gondolamail-app .gm-account-item[class*="active"] {
    background: var(--gm-row-selected) !important;
}

/* ---------- 4. TAB: un solo linguaggio (sottolineatura) ---------- */
#gondolamail-app .gm-tabs {
    background: var(--gm-row-bg) !important;
    border-bottom: 1px solid var(--gm-border) !important;
    padding: 0 8px !important;
    gap: 0 !important;
}
#gondolamail-app .gm-tab {
    border-radius: 0 !important;
    border-bottom: 3px solid transparent !important;
    padding: 12px 16px !important;
    color: var(--gm-text-2) !important;
    font-weight: 500 !important;
}
#gondolamail-app .gm-tab:hover {
    background: rgba(32, 33, 36, .04) !important;
    color: var(--gm-text) !important;
}
#gondolamail-app.gm-dark .gm-tab:hover {
    background: rgba(232, 234, 237, .06) !important;
}
#gondolamail-app .gm-tab.active,
#gondolamail-app .gm-tab[class*="active"] {
    background: transparent !important;
    color: var(--gm-accent) !important;
    border-bottom-color: var(--gm-accent) !important;
    font-weight: 600 !important;
}
#gondolamail-app .gm-tab-inline {
    border-radius: 16px !important;
    border-bottom: 0 !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    background: transparent !important;
    color: var(--gm-text-2) !important;
}
#gondolamail-app .gm-tab-inline:hover {
    background: rgba(32, 33, 36, .06) !important;
    color: var(--gm-text) !important;
}

/* ---------- 5. LISTA MESSAGGI ---------- */
#gondolamail-app .gm-list-panel,
#gondolamail-app .gm-msg-list {
    background: var(--gm-row-bg) !important;
}

#gondolamail-app .gm-msg-row {
    height: var(--gm-row-h) !important;
    min-height: var(--gm-row-h) !important;
    background: var(--gm-row-bg) !important;          /* letto = bianco, via la zebra */
    border-bottom: 1px solid var(--gm-border) !important;
    border-left: 0 !important;
    padding: 0 8px 0 9px !important;
    box-shadow: none !important;
    z-index: auto !important;
    contain-intrinsic-size: auto var(--gm-row-h);
}
#gondolamail-app .gm-msg-row:nth-child(even) {
    background: var(--gm-row-bg) !important;
}
#gondolamail-app .gm-msg-row:hover {
    background: var(--gm-row-hover) !important;
    box-shadow: none !important;
    z-index: auto !important;
}
#gondolamail-app .gm-msg-row:hover .gm-row-actions {
    background: var(--gm-row-hover) !important;
    box-shadow: -10px 0 10px -6px var(--gm-row-hover) !important;
}
#gondolamail-app .gm-msg-row.drag-over {
    background: var(--gm-row-selected) !important;
    outline: 2px solid var(--gm-accent) !important;
}

/* -- NON LETTI: fondo azzurro tenue + bold + rail (distinzione sul fondo) -- */
#gondolamail-app .gm-msg-row.unread,
#gondolamail-app .gm-msg-row[class*="unread"],
#gondolamail-app .gm-thread-row.unread,
#gondolamail-app .gm-thread-row[class*="unread"] {
    background: var(--gm-row-unread) !important;
    border-left: 0 !important;
    font-weight: 400 !important;
}
#gondolamail-app .gm-msg-row.unread::before,
#gondolamail-app .gm-msg-row[class*="unread"]::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: var(--gm-accent) !important;
    border-radius: 0 2px 2px 0 !important;
}
#gondolamail-app .gm-msg-row.unread .gm-row-from,
#gondolamail-app .gm-msg-row.unread .gm-row-subject,
#gondolamail-app .gm-msg-row[class*="unread"] .gm-row-from,
#gondolamail-app .gm-msg-row[class*="unread"] .gm-row-subject {
    font-weight: 700 !important;
    color: var(--gm-text) !important;
}
/* hover di una riga non letta: piu' carico, non torna bianco */
#gondolamail-app .gm-msg-row.unread:hover,
#gondolamail-app .gm-msg-row[class*="unread"]:hover,
#gondolamail-app .gm-thread-row.unread:hover,
#gondolamail-app .gm-thread-row[class*="unread"]:hover {
    background: var(--gm-row-unread-hover) !important;
}
#gondolamail-app .gm-msg-row.unread:hover .gm-row-actions,
#gondolamail-app .gm-msg-row[class*="unread"]:hover .gm-row-actions {
    background: var(--gm-row-unread-hover) !important;
    box-shadow: -10px 0 10px -6px var(--gm-row-unread-hover) !important;
}

/* -- SELEZIONATI: piu' carichi dei non letti -- */
#gondolamail-app .gm-msg-row.selected,
#gondolamail-app .gm-msg-row.selected.unread {
    background: var(--gm-row-selected) !important;
}
#gondolamail-app .gm-msg-row.selected:hover .gm-row-actions {
    background: var(--gm-row-selected) !important;
    box-shadow: -10px 0 10px -6px var(--gm-row-selected) !important;
}

/* -- Tipografia riga -- */
#gondolamail-app .gm-msg-row .gm-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transform: none !important;
}
#gondolamail-app .gm-avatar-wrap {
    width: 36px !important;
    height: 36px !important;
}
#gondolamail-app .gm-msg-row:hover .gm-avatar {
    transform: none !important;
    box-shadow: none !important;
}
#gondolamail-app .gm-row-from {
    flex: 0 1 168px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--gm-text) !important;
}
#gondolamail-app .gm-row-body {
    font-size: 14px !important;
}
#gondolamail-app .gm-row-subject {
    color: var(--gm-text) !important;
}
#gondolamail-app .gm-row-preview {
    color: var(--gm-text-2) !important;
    font-weight: 400 !important;
}
#gondolamail-app .gm-msg-row [class*="date"],
#gondolamail-app .gm-msg-row [class*="time"] {
    font-size: 12px !important;
    color: var(--gm-text-2) !important;
    font-variant-numeric: tabular-nums !important;
}
/* stella: dorata ma senza drop-shadow ne' scala */
#gondolamail-app .gm-msg-row [class*="star"].active,
#gondolamail-app .gm-msg-row [class*="star"][class*="on"] {
    color: #f4b400 !important;
    filter: none !important;
    transform: none !important;
}

/* ---------- 6. DENSITA' OPZIONALE ---------- */
#gondolamail-app.gm-density-compact { --gm-row-h: 40px; }
#gondolamail-app.gm-density-comfy   { --gm-row-h: 60px; }
#gondolamail-app.gm-density-compact .gm-avatar-wrap { width: 30px !important; height: 30px !important; }
#gondolamail-app.gm-density-compact .gm-msg-row .gm-avatar { width: 24px !important; height: 24px !important; }

/* ---------- 7. ACCESSIBILITA' ---------- */
#gondolamail-app :focus-visible {
    outline: 2px solid var(--gm-accent) !important;
    outline-offset: 2px !important;
}
#gondolamail-app .gm-msg-row:focus-visible {
    outline-offset: -2px !important;
}

@media (prefers-reduced-motion: reduce) {
    #gondolamail-app *,
    #gondolamail-app *::before,
    #gondolamail-app *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   8. SKELETON DELLA LISTA  (Fase 1, punto #3)
   ------------------------------------------------------------
   Il bundle mostra .gm-loading (spinner + "Caricamento...", 200px)
   dentro al pannello lista. js/inbox-polish.js aggiunge la classe
   .gm-list-skeleton SOLO a quell'elemento (mai al reader, mai a
   "Ricerca in corso...") e solo se il caricamento supera i 150 ms,
   cosi' su rete veloce non c'e' nessun flash.
   Qui diventa 8 righe fantasma alte esattamente --gm-row-h:
   quando arrivano i messaggi non c'e' layout shift.
   ============================================================ */

#gondolamail-app {
    --gm-sk: #e7ebf0;
}

#gondolamail-app.gm-dark,
#gondolamail-app[data-theme="dark"],
html[data-theme="dark"] #gondolamail-app {
    --gm-sk: #2f343a;
}

#gondolamail-app .gm-loading.gm-list-skeleton {
    display: block !important;
    height: calc(var(--gm-row-h) * 8) !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
    position: relative !important;
    background: var(--gm-row-bg) !important;
}

#gondolamail-app .gm-loading.gm-list-skeleton > * {
    display: none !important;
}

/* riga fantasma: avatar tondo + due barre + separatore, ripetuta ogni --gm-row-h */
#gondolamail-app .gm-loading.gm-list-skeleton::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-color: var(--gm-row-bg) !important;
    background-image:
        linear-gradient(to bottom, transparent 13px, var(--gm-sk) 13px 23px, transparent 23px),
        linear-gradient(to bottom, transparent 29px, var(--gm-sk) 29px 35px, transparent 35px),
        radial-gradient(circle at 24px 25px, var(--gm-sk) 14px, transparent 15px),
        linear-gradient(to bottom, transparent calc(100% - 1px), var(--gm-border) calc(100% - 1px));
    background-size:
        calc(100% - 200px) var(--gm-row-h),
        calc(100% - 320px) var(--gm-row-h),
        100% var(--gm-row-h),
        100% var(--gm-row-h);
    background-position: 50px 0, 50px 0, 0 0, 0 0;
    background-repeat: repeat-y;
    opacity: .9;
}

@media (prefers-reduced-motion: no-preference) {
    #gondolamail-app .gm-loading.gm-list-skeleton::before {
        animation: gm-skeleton-breathe 1.8s ease-in-out infinite;
    }
}

@keyframes gm-skeleton-breathe {
    0%, 100% { opacity: .55; }
    50%      { opacity: .95; }
}