/* Nouveautés dans le dashboard — bouton de la barre du haut et panneau
   (patch-notes-panel.js). Le bouton reprend l'allure de ses voisins de la
   barre ; le panneau ne s'appuie que sur les jetons --tc-* (thèmes compris). */

.tcpn-btn {
    position: relative;
    width: 40px; height: 40px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--glass); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text-main); cursor: pointer; transition: all 0.2s;
}
.tcpn-btn:hover { border-color: var(--tc-primary-border); color: var(--tc-primary-text); }
.tcpn-btn i { font-size: 1.05rem; }
.tcpn-dot {
    position: absolute; top: 6px; right: 6px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--tc-danger); box-shadow: 0 0 0 2px var(--tc-surface);
    pointer-events: none;
}

.tcpn-body { display: flex; flex-direction: column; gap: var(--tc-space-4); }
.tcpn-state {
    display: flex; align-items: center; justify-content: center; gap: var(--tc-space-3);
    padding: var(--tc-space-8) var(--tc-space-4); color: var(--tc-text-muted); text-align: center;
}
.tcpn-spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--tc-border); border-top-color: var(--tc-primary);
    animation: tcpn-spin .8s linear infinite;
}
@keyframes tcpn-spin { to { transform: rotate(360deg); } }

.tcpn-list { display: flex; flex-direction: column; gap: var(--tc-space-4); }
.tcpn-note {
    padding: var(--tc-space-4) var(--tc-space-5);
    border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg);
    background: var(--tc-surface-sunken);
}
.tcpn-meta { display: flex; align-items: center; gap: var(--tc-space-2); color: var(--tc-text-muted); font-size: var(--tc-text-sm); }
.tcpn-latest {
    font-size: var(--tc-text-2xs); font-weight: var(--tc-weight-semibold); letter-spacing: .04em; text-transform: uppercase;
    padding: 2px 8px; border-radius: var(--tc-radius-full);
    color: var(--tc-primary-text); background: var(--tc-primary-soft);
}
.tcpn-title {
    margin: var(--tc-space-1) 0 var(--tc-space-3);
    font-size: var(--tc-text-lg); font-weight: var(--tc-weight-semibold); color: var(--tc-text);
    line-height: var(--tc-leading-snug); overflow-wrap: anywhere;
}
.tcpn-group + .tcpn-group { margin-top: var(--tc-space-3); }
.tcpn-pill {
    display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 var(--tc-space-2);
    font-size: var(--tc-text-xs); font-weight: var(--tc-weight-semibold);
    padding: 2px 10px; border-radius: var(--tc-radius-full); border: 1px solid currentColor;
}
.tcpn-pill--new { color: var(--tc-primary-text); }
.tcpn-pill--improved { color: #8b5cf6; }
.tcpn-pill--fixed { color: var(--tc-success); }
.tcpn-pill--removed { color: var(--tc-danger); }
/* Catégorie créée au panel admin : couleur posée par --tcpn-c sur le groupe. */
.tcpn-pill--custom { color: var(--tcpn-c, var(--tc-text-muted)); }
.tcpn-items { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: var(--tc-space-1); color: var(--tc-text); }
.tcpn-items li { line-height: var(--tc-leading-normal); overflow-wrap: anywhere; }
.tcpn-group--new .tcpn-items li::marker { color: var(--tc-primary-text); }
.tcpn-group--improved .tcpn-items li::marker { color: #8b5cf6; }
.tcpn-group--fixed .tcpn-items li::marker { color: var(--tc-success); }
.tcpn-group--removed .tcpn-items li::marker { color: var(--tc-danger); }
.tcpn-group--custom .tcpn-items li::marker { color: var(--tcpn-c, var(--tc-text-muted)); }

.tcpn-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--tc-space-2); margin-top: var(--tc-space-3); }
.tcpn-shot { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--tc-radius-md);
    border: 1px solid var(--tc-border); background: var(--tc-surface-sunken); cursor: zoom-in; }
.tcpn-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcpn-shot:focus-visible { outline: 2px solid var(--tc-primary-text); outline-offset: 2px; }

.tcpn-footer { display: flex; justify-content: flex-end; width: 100%; }
.tcpn-footer .tc-btn { text-decoration: none; gap: .5rem; }

@media (prefers-reduced-motion: reduce) { .tcpn-spinner { animation-duration: 2.4s; } }