:root {
    --bg-deep: #050810;
    --card-bg: rgba(15, 23, 42, 0.7);
    --border: rgba(51, 65, 85, 0.5);
    --accent: #3b82f6;
}

body { background: var(--bg-deep); color: #f1f5f9; font-family: 'Inter', sans-serif; }

/* Tailwind via CDN ne garantit pas que .hidden gagne quand une classe display
   concurrente (.flex) est appliquée sur le même élément (modales, dropdowns).
   On force la priorité ici, sinon les modales ne se ferment pas. */
.hidden { display: none !important; }

.tei-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    padding: 2rem;
}

.tei-select {
    width: 100%;
    background: #020617;
    border: 1px solid #1e293b;
    color: #94a3b8;
    padding: 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.8rem;
    transition: border 0.3s;
}

.tei-select:focus { border-color: var(--accent); outline: none; }

/* Navigation principale partagée par toutes les pages TEI. */
.tei-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}
.tei-nav-spacer { flex: 1; }
.tei-nav-link {
    color: #94a3b8;
    transition: color .2s, border-color .2s;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    background: transparent;
    border-top: 0; border-left: 0; border-right: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
}
.tei-nav-link:hover { color: #f8fafc; }
.tei-nav-link.is-active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
}

/* Sélecteur de provider IA — comportement radio en chips colorés. */
.provider-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    border: 1px solid rgba(51, 65, 85, 0.5);
    background: rgba(15, 23, 42, 0.5);
    color: #94a3b8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    transition: all .2s;
    cursor: pointer;
}
.provider-chip:hover:not(:disabled) { color: #f8fafc; border-color: rgba(100, 116, 139, 0.7); }
.provider-chip.is-selected { color: #f8fafc; border-color: #3b82f6; background: rgba(59, 130, 246, 0.12); }
.provider-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.provider-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.provider-chip[data-provider="openai"]  .dot { background: #10a37f; }
.provider-chip[data-provider="claude"]  .dot { background: #d97706; }
.provider-chip[data-provider="gemini"]  .dot { background: #4285f4; }
.provider-chip[data-provider="mistral"] .dot { background: #ff7000; }

/* Badge compact (pour la bibliothèque, par exemple) */
.provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #94a3b8;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.4);
}
.provider-badge .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.provider-badge[data-provider="openai"]  .dot { background: #10a37f; }
.provider-badge[data-provider="claude"]  .dot { background: #d97706; }
.provider-badge[data-provider="gemini"]  .dot { background: #4285f4; }
.provider-badge[data-provider="mistral"] .dot { background: #ff7000; }

/* Bandeau de description de la page courante. Hauteur fixe pour éviter
   les sauts de mise en page lorsque l'utilisateur change d'onglet. */
.tei-page-intro {
    min-height: 80px;
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    border: 1px solid rgba(51, 65, 85, 0.5);
    background: rgba(15, 23, 42, 0.5);
    color: #94a3b8;
    font-size: 0.8rem;
    line-height: 1.5;
}