/*
====================================
 MAILDESK Theme — Glassmorphism
 Version 0.51.0
====================================
 Cible : Zimbra Web Client classique (AJAX, skin harmony)
 Les variables --md-* sont injectées par maildesk.js
 depuis /config/client.json

 Sélecteurs applicatifs vérifiés contre le CSS du skin
 harmony et le shell HTML de l'application.

 Référence design : docs/DESIGN_GUIDELINES.md
 Toute évolution graphique DOIT utiliser les tokens
 ci-dessous (pas de valeur hardcodée hors :root).
====================================
*/

:root {
    /* ---------- Couleurs de marque ---------- */
    --md-primary: #0066cc;
    --md-primary-dark: #004c99;
    --md-primary-light: #4d94ff;
    /* Bleu d'information dédié (compteurs, badges) : ne doit pas être
       surchargé par les thèmes de skin comme --md-primary peut l'être */
    --md-info: #2f7fe0;
    --md-banner-0: #2b7cd3;
    --md-deep-1: #0f2b5b;
    --md-deep-2: #071a3a;
    /* Dégradé primaire canonique (boutons d'action, pilules) */
    --md-gradient-primary: linear-gradient(135deg,
        var(--md-primary-light) 0%,
        var(--md-primary) 55%,
        var(--md-primary-dark) 100%);

    /* ---------- Surfaces ---------- */
    --md-surface: #ffffff;
    --md-surface-soft: rgba(255, 255, 255, 0.85);
    --md-surface-faint: rgba(255, 255, 255, 0.75);
    --md-glass-bg: rgba(255, 255, 255, 0.62);
    --md-glass-border: rgba(255, 255, 255, 0.55);
    --md-glass-blur: 22px;
    --md-app-bg: linear-gradient(135deg, #dfe8f4 0%, #cddcee 100%);

    /* ---------- Texte ---------- */
    --md-text: #1a2433;
    --md-text-muted: #5a6b82;
    --md-text-faint: #7a8aa0;
    --md-text-on-primary: #ffffff;

    /* ---------- Couleurs sémantiques ---------- */
    --md-success: #22a355;
    --md-success-bg: #e5f6ec;
    --md-success-border: #b9e6c9;
    --md-success-text: #1c7a3d;
    --md-warning: #e0a000;
    --md-warning-bg: #fdf3e0;
    --md-warning-border: #f0d9a8;
    --md-warning-text: #9a6a00;
    --md-danger: #d24033;
    --md-danger-bg: #fdeceb;
    --md-danger-border: #f5c6c1;
    --md-danger-text: #b03024;

    /* ---------- Bordures (même teinte ardoise, 3 forces) ---------- */
    --md-border-faint: rgba(120, 140, 170, 0.12);
    --md-border-subtle: rgba(120, 140, 170, 0.20);
    --md-input-border: rgba(120, 140, 170, 0.35);

    /* ---------- Rayons ---------- */
    --md-radius-xs: 6px;
    --md-radius-sm: 10px;
    --md-radius-md: 14px;
    --md-radius-lg: 24px;
    --md-radius-pill: 999px;

    /* ---------- Espacements (échelle 4 pt) ---------- */
    --md-space-1: 4px;
    --md-space-2: 8px;
    --md-space-3: 12px;
    --md-space-4: 16px;
    --md-space-5: 20px;
    --md-space-6: 24px;
    --md-space-8: 32px;
    --md-space-10: 40px;

    /* ---------- Typographie ---------- */
    --md-font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --md-text-xs: 12px;
    --md-text-sm: 13px;
    --md-text-md: 15px;
    --md-text-lg: 20px;
    --md-text-xl: 24px;

    /* ---------- Élévation ---------- */
    --md-shadow-xs: 0 2px 8px rgba(10, 20, 40, 0.10);
    --md-shadow-sm: 0 4px 14px rgba(10, 20, 40, 0.12);
    --md-shadow-md: 0 6px 18px rgba(10, 20, 40, 0.14);
    --md-shadow-lg: 0 24px 60px rgba(10, 20, 40, 0.28);
    /* Lueur primaire des boutons d'action */
    --md-shadow-primary: 0 4px 14px color-mix(in srgb, var(--md-primary-dark) 35%, transparent);
    --md-shadow-primary-hover: 0 6px 18px color-mix(in srgb, var(--md-primary-dark) 45%, transparent);

    /* ---------- Focus visible (anneau) ---------- */
    --md-focus-ring: 0 0 0 3px color-mix(in srgb, var(--md-primary) 15%, transparent);
    --md-focus-ring-lg: 0 0 0 4px color-mix(in srgb, var(--md-primary) 18%, transparent);

    /* ---------- Motion ---------- */
    --md-dur-fast: 120ms;   /* micro-interactions (hover léger) */
    --md-dur: 150ms;        /* états standard */
    --md-dur-slow: 250ms;   /* entrées/sorties de panneaux */
    --md-ease: ease-out;

    /* ---------- Palette avatars (initiales expéditeurs) ----------
       Teintes sourdes et professionnelles, texte blanc AA partout */
    --md-av-0: #4f6bed;
    --md-av-1: #0e8a8a;
    --md-av-2: #7c53c8;
    --md-av-3: #c26a1b;
    --md-av-4: #2e8b57;
    --md-av-5: #c2455f;
    --md-av-6: #5a6b82;
    --md-av-7: #0066cc;
}

/* ============================================
   Commun
   ============================================ */

body {
    font-family: var(--md-font) !important;
    padding-top: 0 !important;
}

/* ============================================
   Header de marque MAILDESK (pastille verre)
   ============================================ */

#maildesk-header {
    position: fixed;
    top: 16px;
    left: 20px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px 8px 10px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--md-radius-pill);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--md-shadow-sm);
    color: var(--md-text-on-primary);
    font-family: var(--md-font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

#maildesk-header img {
    max-height: 30px;
    border-radius: var(--md-radius-xs);
}

/* Sur l'application : mini-pastille discrète dans le bandeau */
body.md-app #maildesk-header {
    top: 3px;
    left: 6px;
    gap: 7px;
    padding: 2px 10px 2px 3px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--md-text-on-primary);
    box-shadow: none;
}

body.md-app #maildesk-header img {
    max-height: 26px;
}

/* Lien autour du logo : pas de décalage de ligne de base */
#maildesk-header a {
    display: flex;
    align-items: center;
    line-height: 0;
}

/* ============================================
   PAGE DE LOGIN — fond
   ============================================ */

body.md-login {
    background:
        radial-gradient(1000px 600px at 15% 10%, var(--md-primary-light) 0%, transparent 55%),
        radial-gradient(900px 700px at 85% 90%, var(--md-primary) 0%, transparent 55%),
        linear-gradient(135deg, var(--md-deep-1) 0%, var(--md-primary-dark) 60%, var(--md-deep-2) 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

/* Neutraliser l'image de fond du skin Zimbra */
body.md-login .LoginScreen {
    background: transparent !important;
    background-image: none !important;
    position: relative;
    z-index: 1;
}

/* Masquer les décors d'origine */
.md-login .decor1,
.md-login .decor2 {
    display: none !important;
}

/* Halo animé derrière le panneau */
body.md-login::before {
    content: "";
    position: fixed;
    width: 60vmax;
    height: 60vmax;
    top: -20vmax;
    right: -20vmax;
    background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, transparent 60%);
    animation: md-drift 18s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes md-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-8vmax, 6vmax) scale(1.15); }
}

/* ============================================
   PAGE DE LOGIN — panneau verre
   ============================================ */

/* Un seul panneau : le conteneur externe */
.md-login .modernContentBox {
    background: var(--md-glass-bg) !important;
    backdrop-filter: blur(var(--md-glass-blur)) saturate(160%) !important;
    -webkit-backdrop-filter: blur(var(--md-glass-blur)) saturate(160%) !important;
    border: 1px solid var(--md-glass-border) !important;
    border-radius: var(--md-radius-lg) !important;
    box-shadow: var(--md-shadow-lg) !important;
    padding: 40px 44px !important;
    min-width: 400px;
}

/* L'intérieur ne doit pas former un second panneau */
.md-login .loginSection,
.md-login .form,
.md-login #zLoginForm {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Logo Zimbra centré */
.md-login .logo {
    text-align: center;
    margin-bottom: 8px;
}

.md-login .ImgLoginBanner {
    filter: drop-shadow(0 2px 6px rgba(10, 20, 40, 0.25));
}

/* Titre "Sign In" */
.md-login .signIn {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--md-text) !important;
    text-align: center;
    margin: 6px 0 24px !important;
    background: none !important;
}

/* Labels */
.md-login .zLoginFieldLabel {
    display: block;
    color: var(--md-text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    opacity: 0.75;
    margin: 16px 0 6px !important;
}

/* Champs de saisie (la classe est sur l'input lui-même) */
.md-login input.zLoginFieldInput,
.md-login input[type="text"],
.md-login input[type="password"] {
    box-sizing: border-box;
    width: 100% !important;
    height: 48px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    font-family: var(--md-font) !important;
    color: var(--md-text) !important;
    background: var(--md-surface-soft) !important;
    border: 1px solid var(--md-input-border) !important;
    border-radius: var(--md-radius-md) !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.md-login input.zLoginFieldInput:focus,
.md-login input[type="text"]:focus,
.md-login input[type="password"]:focus {
    background: var(--md-surface) !important;
    border-color: var(--md-primary) !important;
    box-shadow: var(--md-focus-ring-lg) !important;
}

/* Champ mot de passe + lien Afficher/Masquer sur une ligne */
.md-login .passwordWrapper {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.md-login .passwordWrapper input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}

.md-login #showSpan,
.md-login #hideSpan {
    flex: 0 0 auto;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--md-primary) !important;
    cursor: pointer;
    white-space: nowrap;
    padding: 6px 4px;
}

.md-login #showSpan:hover,
.md-login #hideSpan:hover {
    text-decoration: underline;
}

/* Zone bouton + mémorisation : empilées, pleine largeur */
.md-login .signInAndLabel {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-top: 22px !important;
}

.md-login .signInAndLabel > div {
    width: 100%;
}

/* Bouton de connexion */
.md-login #loginButton,
.md-login .loginButton {
    display: block !important;
    width: 100% !important;
    height: 50px !important;
    border: none !important;
    border-radius: var(--md-radius-md) !important;
    background: var(--md-gradient-primary) !important;
    color: var(--md-text-on-primary) !important;
    font-family: var(--md-font) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--md-primary-dark) 35%, transparent) !important;
    transition: transform var(--md-dur) var(--md-ease), box-shadow var(--md-dur) var(--md-ease), filter var(--md-dur) var(--md-ease);
}

.md-login #loginButton:hover,
.md-login .loginButton:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--md-primary-dark) 45%, transparent) !important;
}

.md-login #loginButton:active,
.md-login .loginButton:active {
    transform: translateY(0);
}

/* Case "rester connecté" */
.md-login .rememberCheckWrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 8px !important;
    width: auto !important;
    font-size: 13px !important;
    color: var(--md-text) !important;
}

.md-login .rememberCheckWrapper input[type="checkbox"] {
    accent-color: var(--md-primary);
    width: 16px;
    height: 16px;
    margin: 0 !important;
}

/* Séparateur */
.md-login hr {
    border: none !important;
    border-top: 1px solid var(--md-border-subtle) !important;
    margin: 26px 0 16px !important;
}

/* Message d'erreur */
.md-login .errorMessage:not(:empty),
.md-login #errorMessageDiv:not(:empty) {
    background: rgba(220, 38, 38, 0.12) !important;
    border: 1px solid rgba(220, 38, 38, 0.35) !important;
    border-radius: var(--md-radius-sm) !important;
    color: var(--md-danger-text) !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    margin-bottom: 10px;
}

/* Sélecteur de version : discret, dans le panneau */
.md-login .versionBlock {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent !important;
    color: var(--md-text) !important;
    opacity: 0.75;
    font-size: 13px !important;
    padding: 0 !important;
}

.md-login .versionBlock label {
    font-size: 13px !important;
}

.md-login .versionBlock select {
    height: 34px;
    padding: 0 10px;
    font-family: var(--md-font) !important;
    font-size: 13px !important;
    color: var(--md-text);
    background: var(--md-surface-soft) !important;
    border: 1px solid var(--md-input-border) !important;
    border-radius: var(--md-radius-sm) !important;
}

/* Bouton "?" du sélecteur de version */
.md-login #ZLoginWhatsThisButton {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: 1px solid var(--md-input-border) !important;
    background: var(--md-surface-soft) !important;
    cursor: pointer;
}

/* Info-bulle version */
.md-login #ZLoginWhatsThis .ZLoginInfo {
    background: var(--md-surface) !important;
    border-radius: var(--md-radius-md) !important;
    box-shadow: var(--md-shadow-lg) !important;
    color: var(--md-text) !important;
    padding: 16px !important;
    font-size: 13px !important;
}

/* Footer : texte clair sur fond sombre, hors panneau */
.md-login .Footer,
.md-login .legalNotice-small {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 12px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    background: transparent !important;
}

.md-login .Footer a {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================
   ÉCRAN DE CHARGEMENT (avant init de l'app)
   Volontairement SANS préfixe body.md-app :
   il doit s'appliquer avant l'exécution du JS
   ============================================ */

/* --- Splash initial (fond montagne + boîte bleue d'origine) --- */

.SplashScreen {
    background:
        radial-gradient(1000px 600px at 15% 10%, var(--md-primary-light) 0%, transparent 55%),
        radial-gradient(900px 700px at 85% 90%, var(--md-primary) 0%, transparent 55%),
        linear-gradient(135deg, var(--md-deep-1) 0%, var(--md-primary-dark) 60%, var(--md-deep-2) 100%) !important;
    background-attachment: fixed !important;
}

/* Panneau verre, comme la page de login */
#ZSplashPanel .contentBox {
    background: var(--md-glass-bg) !important;
    backdrop-filter: blur(var(--md-glass-blur)) saturate(160%) !important;
    -webkit-backdrop-filter: blur(var(--md-glass-blur)) saturate(160%) !important;
    border: 1px solid var(--md-glass-border) !important;
    border-radius: var(--md-radius-lg) !important;
    box-shadow: var(--md-shadow-lg) !important;
    color: var(--md-text) !important;
    font-family: var(--md-font) !important;
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-top: 60px;
}

/* Spinner CSS dans le panneau */
#ZSplashPanel .contentBox::after {
    content: "";
    display: block;
    width: 46px;
    height: 46px;
    margin: 26px auto 0;
    border: 4px solid color-mix(in srgb, var(--md-primary) 18%, transparent);
    border-top-color: var(--md-primary);
    border-radius: 50%;
    animation: md-loadspin 0.9s linear infinite;
}

/* Footer du splash : texte clair sur fond sombre */
.SplashScreen .Footer,
.SplashScreen .copyright {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 12px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    background: transparent !important;
}

/* --- Écran "Chargement..." du shell --- */

#z_loading {
    background:
        radial-gradient(1000px 600px at 15% 10%, var(--md-primary-light) 0%, transparent 55%),
        radial-gradient(900px 700px at 85% 90%, var(--md-primary) 0%, transparent 55%),
        linear-gradient(135deg, var(--md-deep-1) 0%, var(--md-primary-dark) 60%, var(--md-deep-2) 100%) !important;
    color: var(--md-text-on-primary) !important;
    font-family: var(--md-font) !important;
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 20, 50, 0.4);
}

/* Spinner CSS à la place du gif d'origine */
#z_loading .Imgwait_64 {
    display: none !important;
}

#z_loading td[align="center"]::after {
    content: "";
    display: block;
    width: 46px;
    height: 46px;
    margin: 20px auto 0;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--md-text-on-primary);
    border-radius: 50%;
    animation: md-loadspin 0.9s linear infinite;
}

@keyframes md-loadspin {
    to { transform: rotate(360deg); }
}

/* ============================================
   APPLICATION WEBMAIL — refonte glassmorphism
   (skin harmony : classes vérifiées)
   ============================================ */

/* ---------- Fond général de l'application ---------- */

body.md-app {
    background: var(--md-app-bg) !important;
}

/* Le conteneur du skin est blanc opaque par défaut :
   on le rend transparent pour laisser voir le fond dégradé */
body.md-app #skin_outer {
    background: transparent !important;
}

/* Les panneaux de contenu restent blancs et lisibles,
   avec angles arrondis et ombre pour créer de la profondeur */
body.md-app .DwtListView,
body.md-app .ZmMailMsgView,
body.md-app .DwtTabView .DwtTabViewPage {
    background: var(--md-surface) !important;
}

body.md-app .DwtListView,
body.md-app .ZmMailMsgView {
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-shadow-md);
}

/* La liste a overflow visible : ses enfants repeignent les coins arrondis */
body.md-app .DwtListView {
    overflow: hidden;
}

/* Lecteur de message : teinte très légère pour le distinguer de la liste */
body.md-app .ZmMailMsgView {
    background: #f6fafe !important;
}

/* ---------- Bandeau supérieur (tous les niveaux possibles) ---------- */

body.md-app #skin_tr_top,
body.md-app #skin_tr_top .skin_table,
body.md-app #skin_spacing_top_row,
body.md-app #skin_tr_app,
body.md-app #skin_spacing_app_row {
    background: linear-gradient(135deg,
        var(--md-banner-0) 0%,
        var(--md-primary) 45%,
        var(--md-primary-dark) 100%) !important;
}

/* Le logo Zimbra du bandeau laisse sa place à la pastille MAILDESK */
body.md-app .ImgAppBanner {
    visibility: hidden;
}

/* Champ de recherche : pilule verre */
body.md-app #skin_container_search .ZmSearchToolbar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-radius: var(--md-radius-pill) !important;
    box-shadow: var(--md-shadow-sm) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Nom utilisateur + liens (déconnexion, aide) : blanc lisible sur le
   bandeau dégradé — certains skins clairs teintent ce texte et le
   rendent peu lisible (sand, bones, oasis) */
body.md-app .BannerTextUser,
body.md-app #skin_container_help A,
body.md-app #skin_container_logoff A {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* ---------- Onglets d'applications ---------- */

body.md-app .ZAppTabBorder {
    border-radius: var(--md-radius-sm) 10px 0 0 !important;
    transition: background-color var(--md-dur) var(--md-ease);
}

/* Titres des onglets inactifs : blanc franc sur le dégradé */
body.md-app .ZAppTabBorder .ZWidgetTitle {
    color: var(--md-text-on-primary) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 30, 60, 0.40);
}

body.md-app .ZHover .ZAppTabBorder,
body.md-app .ZFocused .ZAppTabBorder {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Onglet actif : verre clair */
body.md-app .ZSelected .ZAppTabBorder {
    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--md-text) !important;
    border-radius: var(--md-radius-md) 12px 0 0 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.md-app .ZSelected .ZAppTabBorder .ZWidgetTitle {
    color: var(--md-text) !important;
    font-weight: 700 !important;
    text-shadow: none;
}

/* ---------- Barre d'outils ---------- */

body.md-app #skin_tr_toolbar,
body.md-app #skin_tr_toolbar .skin_layout_cell,
body.md-app #skin_container_app_new_button,
body.md-app #skin_container_app_top_toolbar,
body.md-app #skin_tr_toolbar .ZToolbar,
body.md-app #skin_tr_toolbar .ZToolbarTable {
    background: var(--md-surface) !important;
    border-bottom: 1px solid var(--md-border-subtle) !important;
}

/* Le sélecteur d'applications vit sur le bandeau dégradé :
   il doit rester transparent (sinon onglets blanc sur blanc) */
body.md-app .ZmAppChooser,
body.md-app #ztb_appChooser,
body.md-app #ztb_appChooser .ZToolbarTable {
    background: transparent !important;
}

/* Sous la barre d'outils (y≈100→107) aucun élément ne peint : le fond
   général apparaissait en "barre grise". On prolonge le blanc des deux
   conteneurs vers le bas avec une ombre portée pleine, sans toucher au layout. */
body.md-app #skin_container_app_new_button,
body.md-app #skin_container_app_top_toolbar {
    box-shadow: 0 7px 0 var(--md-surface);
}

/* Boutons d'action (Répondre, Supprimer, ...) */
body.md-app .ZToolbarButtonBorder {
    border-radius: var(--md-radius-sm) !important;
    border: 1px solid var(--md-input-border) !important;
    background: var(--md-surface-soft) !important;
    transition: background var(--md-dur) var(--md-ease), border-color var(--md-dur) var(--md-ease), box-shadow var(--md-dur) var(--md-ease);
}

body.md-app .ZHover .ZToolbarButtonBorder {
    background: color-mix(in srgb, var(--md-primary) 10%, transparent) !important;
    border-color: var(--md-primary) !important;
    box-shadow: var(--md-shadow-sm) !important;
}

body.md-app .ZActive .ZToolbarButtonBorder,
body.md-app .ZSelected .ZToolbarButtonBorder {
    background: color-mix(in srgb, var(--md-primary) 18%, transparent) !important;
    border-color: var(--md-primary) !important;
}

/* Bouton "Nouveau message" : dégradé primaire, forme pilule.
   Il utilise ZToolbarButtonBorder : il faut écraser la règle toolbar. */
body.md-app .ZNewButton .ZToolbarButtonBorder,
body.md-app .ZNewButton .ZButtonBorder {
    background: var(--md-gradient-primary) !important;
    border: none !important;
    border-radius: var(--md-radius-pill) !important;
    box-shadow: var(--md-shadow-primary) !important;
    transition: transform var(--md-dur) var(--md-ease), box-shadow var(--md-dur) var(--md-ease);
}

body.md-app .ZNewButton .ZWidgetTitle {
    color: var(--md-text-on-primary) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 40, 80, 0.35);
}

body.md-app .ZHover .ZNewButton .ZToolbarButtonBorder,
body.md-app .ZHover .ZNewButton .ZButtonBorder {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--md-primary-dark) 45%, transparent) !important;
    transform: translateY(-1px);
    border: none !important;
    background: var(--md-gradient-primary) !important;
}

/* Boutons génériques */
body.md-app .ZButtonBorder {
    border-radius: var(--md-radius-sm) !important;
}

/* ---------- Arborescence des dossiers ---------- */

body.md-app #skin_td_tree {
    background: var(--md-surface-soft) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid var(--md-border-faint);
}

/* En-têtes de sections de l'arbre (Dossiers de mails, Recherches, ...) */
/* Le fond est neutralisé : certains skins (carbon) les peignent en gris */
body.md-app .overviewHeader {
    background: transparent !important;
}

body.md-app .overviewHeader-Text {
    color: var(--md-text-muted) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

body.md-app .DwtTreeItem {
    border-radius: 8px;
    transition: background var(--md-dur-fast) var(--md-ease);
}

body.md-app .DwtTreeItem:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, transparent);
}

/* Dossier sélectionné : pilule dégradé primaire, texte blanc */
body.md-app .DwtTreeItem-selected,
body.md-app .DwtTreeItem-selected .DwtTreeItemChildDiv {
    background: linear-gradient(135deg,
        var(--md-primary-light) 0%,
        var(--md-primary) 100%) !important;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--md-primary-dark) 30%, transparent);
}

body.md-app .DwtTreeItem-selected,
body.md-app .DwtTreeItem-selected .DwtTreeItemChildDiv,
body.md-app .DwtTreeItem-selected a,
body.md-app .DwtTreeItem-selected a:link,
body.md-app .DwtTreeItem-selected a:visited {
    color: var(--md-text-on-primary) !important;
}

/* ---------- Séparateurs (sashes) : gouttières transparentes ---------- */
/* Les conteneurs de sash sont blancs par défaut et soudent tous les
   panneaux en un seul plan blanc ; en les rendant transparents, le fond
   dégradé apparaît entre les panneaux et crée la profondeur */
body.md-app .HSashContainer,
body.md-app .VSashContainer {
    background: transparent !important;
}

/* Le voile modal de Zimbra est une table NOIRE pleine page, toujours peinte
   sous l'application ; dès qu'une zone est transparente (calendrier,
   gouttières) elle devient gris foncé. On le neutralise. */
body.md-app .VeilOverlay > table {
    background: transparent !important;
}

/* ---------- Calendrier ---------- */

body.md-app .calendar_view {
    background: var(--md-surface) !important;
    border-radius: var(--md-radius-md);
    box-shadow: var(--md-shadow-md);
}

/* Heures ouvrées : blocs blancs (calques par-dessus le fond) */
body.md-app .ImgCalendarDayGrid {
    background-color: var(--md-text-on-primary) !important;
}

/* Heures fermées : le grand calque de fond de la grille en teinte plus marquée
   (enfant direct de .calendar_body) */
body.md-app .calendar_body > .ImgCalendarDayGrid {
    background-color: #e0e7f0 !important;
}

/* Séparateurs de jours : ligne plus franche */
body.md-app .calendar_day_separator,
body.md-app .calendar_header_allday_separator {
    background: #b9c7da !important;
}

/* ---------- Liste des mails ---------- */

/* En-têtes de colonnes */
body.md-app .DwtListView-ColHeader,
body.md-app .DwtListView-Column {
    background: var(--md-surface) !important;
    border-bottom: 1px solid var(--md-border-subtle) !important;
}

/* Zébrure douce — SANS !important (1.0.0-rc28) : Zimbra pose la couleur
   d'un tag en style INLINE sur la ligne (gradient) ; un !important ici
   l'écrasait une ligne sur deux (les RowOdd), les lignes taggées
   n'étaient donc colorées qu'une sur deux. Sans !important, le style
   inline du tag prime, et la zébrure reste gagnante sur le .RowOdd
   natif (#FFF) grâce à la spécificité. */
body.md-app .DwtListView .RowOdd {
    background: #f6fafd;
}

/* Séparateurs de lignes discrets */
body.md-app .DwtListView li[id^="zli__"] {
    border-bottom: 1px solid var(--md-border-faint);
}

/* Lignes : survol et sélection teintés primaire */
body.md-app .DwtListView li[id^="zli__"]:hover {
    background: color-mix(in srgb, var(--md-primary) 7%, transparent) !important;
}

body.md-app .DwtListView .Row-selected {
    background: color-mix(in srgb, var(--md-primary) 14%, transparent) !important;
}

body.md-app .DwtListView .Row-selected .AttLink:link,
body.md-app .DwtListView .Row-selected .AttLink:visited {
    color: var(--md-primary-dark) !important;
}

/* ---------- Mini-calendrier ---------- */

/* Le conteneur de l'arbre : certains skins (carbon) lui donnent un fond
   et une bordure grise qui forment une barre au-dessus du mini-calendrier */
body.md-app #skin_container_tree {
    background: transparent !important;
    border: none !important;
}

body.md-app .DwtCalendar {
    background: var(--md-surface) !important;
    border-radius: var(--md-radius-md) !important;
    box-shadow: var(--md-shadow-sm) !important;
    padding: 6px;
    /* la largeur est fixée en JS : le padding ne doit pas l'élargir,
       sinon le calendrier déborde sur la barre verticale */
    box-sizing: border-box;
}

/* Barre de titre du mois : fond forcé transparent (twilight la teinte)
   et texte forcé sombre (sinon blanc sur blanc sur les skins sombres) */
body.md-app .DwtCalendarTitlebar {
    font-weight: 600 !important;
    color: var(--md-text) !important;
    background: transparent !important;
}

body.md-app .DwtCalendarTitle,
body.md-app .DwtCalendarTitleCell {
    color: var(--md-text) !important;
    background: transparent !important;
}

/* Flèches de navigation : les sprites des skins sombres sont blancs et
   deviennent invisibles sur fond clair ; on les redessine en texte */
body.md-app .DwtCalendarButton div[class*="Arrow"] {
    background-image: none !important;
    width: 12px !important;
    height: 16px !important;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
    color: var(--md-text);
}

body.md-app .DwtCalendarButton div[class*="Arrow"]::after {
    display: block;
}

body.md-app .DwtCalendarButton .ImgRevArrowSmall::after { content: "‹"; }
body.md-app .DwtCalendarButton .ImgFwdArrowSmall::after { content: "›"; }
body.md-app .DwtCalendarButton .ImgFastRevArrowSmall::after { content: "«"; }
body.md-app .DwtCalendarButton .ImgFastFwdArrowSmall::after { content: "»"; }

/* En-tête des jours (Lun Mar ...) : blanc sur tous les skins */
body.md-app .DwtCalendarDow {
    background: var(--md-surface) !important;
}

/* Jour courant : pilule aux couleurs primaires, identique partout */
body.md-app .DwtCalendarDay-today {
    background: var(--md-primary) !important;
    border-color: var(--md-primary-dark) !important;
    color: var(--md-text-on-primary) !important;
    border-radius: var(--md-radius-xs) !important;
}

body.md-app .DwtCalendarDay {
    border-radius: var(--md-radius-xs);
    transition: background var(--md-dur-fast) var(--md-ease);
}

body.md-app .DwtCalendarDay:hover {
    background: color-mix(in srgb, var(--md-primary) 10%, transparent);
}

/* ---------- Boîtes de dialogue & menus ---------- */

body.md-app .DwtDialog,
body.md-app .DwtBaseDialog {
    border-radius: var(--md-radius-lg) !important;
    box-shadow: var(--md-shadow-lg) !important;
    overflow: hidden;
}

body.md-app .DwtMenu {
    border-radius: var(--md-radius-md) !important;
    box-shadow: var(--md-shadow-lg) !important;
    border: 1px solid var(--md-border-subtle) !important;
}

body.md-app .DwtMenuItem {
    border-radius: var(--md-radius-xs);
}

/* ---------- Champs de saisie dans l'app ---------- */

body.md-app input[type="text"],
body.md-app input[type="password"],
body.md-app textarea {
    border-radius: var(--md-radius-sm) !important;
}

body.md-app input[type="text"]:focus,
body.md-app input[type="password"]:focus,
body.md-app textarea:focus {
    border-color: var(--md-primary) !important;
    box-shadow: var(--md-focus-ring) !important;
    outline: none !important;
}

/* ---------- Bouton Actualiser (en haut à droite) ---------- */

/* Pilule bleue comme le bandeau, icône passée en blanc */
body.md-app #CHECK_MAIL {
    background: var(--md-gradient-primary) !important;
    border: none !important;
    border-radius: var(--md-radius-pill) !important;
    box-shadow: var(--md-shadow-primary) !important;
    padding: 3px 10px !important;
    cursor: pointer !important;
    transition: filter var(--md-dur) var(--md-ease), transform var(--md-dur) var(--md-ease), box-shadow var(--md-dur) var(--md-ease);
}

body.md-app #CHECK_MAIL .ImgRefreshAll {
    filter: brightness(0) invert(1);
}

/* La table interne du bouton a un fond blanc d'origine : transparent
   pour laisser voir le dégradé du conteneur */
body.md-app #CHECK_MAIL .ZToolbarButtonTable,
body.md-app #CHECK_MAIL .ZToolbarButtonBorder {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Survol */
body.md-app #CHECK_MAIL:hover,
body.md-app .ZHover#CHECK_MAIL {
    filter: brightness(1.10);
    box-shadow: var(--md-shadow-primary-hover) !important;
}

/* Clic : enfoncement + teinte plus sombre + rotation de l'icône */
body.md-app #CHECK_MAIL:active,
body.md-app .ZActive#CHECK_MAIL {
    filter: brightness(0.85);
    transform: scale(0.94);
}

body.md-app #CHECK_MAIL:active .ImgRefreshAll,
body.md-app .ZActive#CHECK_MAIL .ImgRefreshAll {
    animation: md-spin 0.6s linear;
}

@keyframes md-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---------- Fenêtre de composition ---------- */
/* Fond dégradé cohérent avec l'application */
body.md-compose {
    background: var(--md-app-bg) !important;
}

/* Champs d'adresses (À, Cc) : blanc au lieu du jaune Zimbra */
body.md-compose .addrInputField,
body.md-compose input.addrInputField {
    background: var(--md-surface) !important;
    border-radius: 8px !important;
}

/* Conteneurs d'adresses (A:, Cc, CCi) : mêmes fond, bordure et rayons
   que le champ Sujet — un seul ensemble visuel de champs */
body.md-compose .addrBubbleContainer,
body.md-compose .addrBubbleContainer.ZFocused {
    background: var(--md-surface) !important;
    border: 1px solid var(--md-input-border) !important;
    border-radius: var(--md-radius-sm) !important;
    transition: box-shadow var(--md-dur) var(--md-ease),
        border-color var(--md-dur) var(--md-ease);
}

/* Focus : l'anneau entoure le CHAMP ENTIER (comme le sujet), pas le petit
   input interne — celui-ci ne doit jamais montrer d'anneau propre */
body.md-compose .addrBubbleContainer:focus-within {
    border-color: var(--md-primary) !important;
    box-shadow: var(--md-focus-ring) !important;
}

body.md-compose input.addrInputField:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Le champ de saisie d'adresse est 2px trop haut dans son conteneur :
   recentrage vertical */
body.md-compose .addrInputField {
    margin-top: 2px !important;
}

/* Champ sujet : jaune au focus d'origine -> blanc comme les autres champs ;
   bordure et rayon explicites identiques aux champs d'adresses.
   Le sujet est niché dans une table interne dont la cellule a 4 px de
   padding droit : sans correction il est 4 px plus court que les champs
   d'adresses — on neutralise pour une largeur strictement identique. */
body.md-compose .subjectField,
body.md-compose .subjectField:focus {
    background: var(--md-surface) !important;
    border: 1px solid var(--md-input-border) !important;
    border-radius: var(--md-radius-sm) !important;
    width: 100% !important;
}

body.md-compose tr[id$="_subject_row"] > td > table td {
    padding-right: 0 !important;
}

/* ---------- Composeur : en-tête strictement harmonisé (v0.54.2) ----------

/* Libellés À/Cc/CCi : Zimbra les rend en boutons-pilules (ouverture du
   carnet d'adresses). On retire tout le chrome — rendu texte simple,
   aligné sur le libellé « Sujet : » (ils restent cliquables). */
body.md-compose tr[id$="_to_row"] > td:first-child .ZButton,
body.md-compose tr[id$="_cc_row"] > td:first-child .ZButton,
body.md-compose tr[id$="_bcc_row"] > td:first-child .ZButton,
body.md-compose tr[id$="_to_row"] > td:first-child .ZButtonBorder,
body.md-compose tr[id$="_cc_row"] > td:first-child .ZButtonBorder,
body.md-compose tr[id$="_bcc_row"] > td:first-child .ZButtonBorder {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Tous les champs à la même hauteur (30 px, comme les pilules natives) */
body.md-compose .addrBubbleContainer {
    min-height: 30px;
    box-sizing: border-box;
}

body.md-compose .subjectField {
    height: 30px !important;
    box-sizing: border-box;
}

/* Zone pièce jointe : mêmes fond, bordure, rayon et hauteur que les
   champs — le conteneur visible est .attBubbleContainer (le wrapper
   attachments_div reste neutre, sinon double cadre) */
body.md-compose tr[id$="_attachments_row"] .attBubbleContainer {
    background: var(--md-surface);
    border: 1px solid var(--md-input-border);
    border-radius: var(--md-radius-sm);
    min-height: 30px;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 10px;
    line-height: 20px;
    color: var(--md-text-faint);
    font-size: var(--md-text-xs);
}

/* Bouton Envoyer : dégradé primaire, forme pilule */
body.md-compose [id^="zb__COMPOSE"][id*="__SEND"] .ZToolbarButtonBorder {
    background: var(--md-gradient-primary) !important;
    border: none !important;
    border-radius: var(--md-radius-pill) !important;
    box-shadow: var(--md-shadow-primary) !important;
}

body.md-compose [id^="zb__COMPOSE"][id*="__SEND"] .ZWidgetTitle {
    color: var(--md-text-on-primary) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 40, 80, 0.35);
}

/* ---------- Scrollbars modernes ----------
   Fine (9 px) et discrète : le thumb est transparent par défaut et
   n'apparaît qu'au survol du conteneur scrollable (ou au survol du
   thumb lui-même, teinté primaire). scrollbar-width/scrollbar-color
   couvrent Firefox (qui ignore ::-webkit-scrollbar). */

body.md-app * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

body.md-app *:hover {
    scrollbar-color: rgba(100, 120, 150, 0.4) transparent;
}

body.md-app ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.md-app ::-webkit-scrollbar-track {
    background: transparent;
}

body.md-app ::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: var(--md-radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}

body.md-app :hover::-webkit-scrollbar-thumb {
    background: rgba(100, 120, 150, 0.4);
    background-clip: content-box;
    border: 2px solid transparent;
}

body.md-app ::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 120, 150, 0.55);
    background-clip: content-box;
    border: 2px solid transparent;
}

/* ============================================
   Assistant IA
   ============================================ */

/* Bouton « Réponse IA » dans la toolbar du mail :
   pilule dégradé (design MAILDESK) calibrée sur la hauteur des voisins */
#md-ai-btn, #md-ai-correct-btn, .md-ai-btn {
    display: inline-block;
    margin: 0 4px;
    padding: 0 12px;
    height: 24px;
    line-height: 24px;
    border-radius: var(--md-radius-pill);
    background: linear-gradient(135deg, var(--md-primary-light) 0%, var(--md-primary) 100%);
    color: var(--md-text-on-primary);
    font-family: var(--md-font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--md-primary-dark) 30%, transparent);
    transition: transform var(--md-dur-fast) var(--md-ease), box-shadow var(--md-dur-fast) var(--md-ease);
}

#md-ai-btn:hover, #md-ai-correct-btn:hover, .md-ai-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--md-primary-dark) 40%, transparent);
}

/* État « correction en cours » du bouton Corriger */
#md-ai-correct-btn.md-ai-busy {
    opacity: .6;
    pointer-events: none;
}

/* Le composeur (popup) partage la même hauteur de boutons natifs (30 px) :
   pas de surcharge de taille pour la pilule Corriger */

/* Cellule des pastilles IA, insérée dans la rangée du bouton Actualiser :
   vraie cellule de tableau centrée verticalement (la rangée Zimbra est un
   <tr> ; un conteneur inline-flex y serait anonymisé et désaligné) */
#md-ai-settings-cell {
    display: table-cell;
    vertical-align: middle;
    padding-right: 6px;
    white-space: nowrap;
    /* La barre d'onglets Zimbra (#ztb_appChooser, z-index 300) déborde
       verticalement sur la rangée des boutons et intercepte les clics
       selon la largeur de fenêtre / le compte : on passe au-dessus */
    position: relative;
    z-index: 301;
    cursor: pointer;
}

/* Pastilles d'accès (stats + config), à côté du bouton Actualiser :
   même pilule dégradé, hauteur fixe 30 px comme les pilules natives */
#md-ai-settings-link,
#md-stats-link {
    display: inline-block;
    height: 30px;
    box-sizing: border-box;
    padding: 0 12px !important;
    line-height: 30px;
    vertical-align: middle;
    border-radius: var(--md-radius-pill);
    background: var(--md-gradient-primary);
    color: var(--md-text-on-primary) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: var(--md-shadow-primary);
    cursor: pointer;
    transition: filter var(--md-dur) var(--md-ease), transform var(--md-dur) var(--md-ease);
}

#md-ai-settings-link:hover,
#md-stats-link:hover {
    filter: brightness(1.10);
    box-shadow: var(--md-shadow-primary-hover);
}

/* Espace entre les deux pastilles */
#md-stats-link {
    margin-right: 6px;
}

/* Panneaux latéraux (analyse + configuration + statistiques) */
#md-ai-panel,
#md-ai-settings-panel,
#md-stats-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 33vw;
    min-width: 420px;
    max-width: 92vw;
    height: 100vh;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    background: var(--md-glass-bg);
    backdrop-filter: blur(var(--md-glass-blur));
    -webkit-backdrop-filter: blur(var(--md-glass-blur));
    border-left: 1px solid var(--md-glass-border);
    box-shadow: -18px 0 50px rgba(10, 20, 40, 0.25);
    font-family: var(--md-font);
    color: var(--md-text);
    transform: translateX(105%);
    transition: transform var(--md-dur-slow) var(--md-ease);
}

#md-ai-panel.md-ai-open,
#md-ai-settings-panel.md-ai-open,
#md-stats-panel.md-ai-open {
    transform: translateX(0);
}

/* Volet Assistant IA : fermé, le volet est TOTALEMENT hors écran —
   seule la tirette (left: -48px, largeur 46 px) dépasse (0.73.3) */
#md-ai-panel {
    transform: translateX(100%);
}

#md-ai-panel.md-ai-open {
    transform: translateX(0);
}

/* Le panneau de configuration embarque la page ai-settings en iframe.
   Fond harmonisé (0.73.0) : teinte claire, fini le dégradé bleu */
#md-ai-settings-panel {
    background: color-mix(in srgb, var(--md-primary) 5%, #ffffff);
}

#md-ai-settings-panel iframe {
    flex: 1;
    border: none;
    width: 100%;
}

#md-ai-settings-panel .md-ai-head {
    color: var(--md-primary-dark);
}

#md-ai-panel .md-ai-head,
#md-ai-settings-panel .md-ai-head,
#md-stats-panel .md-ai-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--md-primary-dark);
    border-bottom: 1px solid var(--md-border-subtle);
}

/* Onglets des sessions d'analyse (max 3, v0.72) */
#md-ai-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 12px 0;
    flex-wrap: wrap;
}

.md-ai-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 190px;
    padding: 4px 8px 4px 10px;
    border-radius: var(--md-radius-pill);
    border: 1px solid var(--md-input-border);
    background: var(--md-surface);
    font-family: var(--md-font);
    font-size: 12px;
    color: var(--md-text-muted);
    cursor: pointer;
    transition: border-color var(--md-dur) var(--md-ease),
        background var(--md-dur) var(--md-ease);
}

.md-ai-tab:hover { border-color: var(--md-primary); }

.md-ai-tab.md-ai-tab-active {
    background: color-mix(in srgb, var(--md-primary) 10%, var(--md-surface));
    border-color: var(--md-primary);
    color: var(--md-primary-dark);
    font-weight: 600;
}

.md-ai-tab .md-card-dot {
    width: 8px;
    height: 8px;
}

.md-ai-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.md-ai-tab-x {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    line-height: 15px;
    text-align: center;
    border-radius: 50%;
    font-size: 10px;
    color: var(--md-text-muted);
}

.md-ai-tab-x:hover {
    background: var(--md-danger-bg);
    color: var(--md-danger-text);
}

.md-ai-tab.md-ai-tab-clear {
    color: var(--md-danger-text);
    border-color: var(--md-danger-border);
}

.md-ai-tab.md-ai-tab-clear:hover {
    background: var(--md-danger-bg);
    border-color: var(--md-danger);
}

/* Poignée latérale des analyses : ENFANT du volet (0.73.2) — elle
   glisse avec lui naturellement, aucun calcul JS de position.
   Visible en permanence (poignée d'accès au volet). */
#md-ai-handle {
    position: absolute;
    left: -48px;
    top: 40%;
    width: 46px;
    box-sizing: border-box;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 7px;
    border-radius: var(--md-radius-md) 0 0 var(--md-radius-md);
    background: var(--md-surface);
    border: 1px solid var(--md-glass-border);
    border-right: none;
    box-shadow: var(--md-shadow-lg);
    cursor: pointer;
    font-family: var(--md-font);
}

#md-ai-h-run {
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--md-danger, #c0392b);
}

/* Clignotement uniquement avec des analyses en cours (« pénible pour
   l'œil » à 0) */
#md-ai-h-run.md-ai-h-live {
    animation: md-dict-pulse 1.2s ease-in-out infinite;
}

#md-ai-h-queue {
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    /* Bleu explicite (analyses terminées) — token dédié, immunisé
       contre les surcharges de --md-primary par les skins */
    background: var(--md-info, #2f7fe0);
}

/* Bleu clignotant tant qu'il y a des terminées NON CONSULTÉES (0.73.3) */
#md-ai-h-queue.md-ai-h-live {
    animation: md-dict-pulse 1.2s ease-in-out infinite;
}

/* Puces d'onglets : rouge clignotant en traitement, bleu clignotant
   quand le résultat est disponible non consulté, orange clignotant en
   attente d'action utilisateur (1.0.0-rc3) */
.md-ai-tab-dot-red,
.md-ai-tab-dot-blue,
.md-ai-tab-dot-orange {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    animation: md-dict-pulse 1.2s ease-in-out infinite;
}

.md-ai-tab-dot-red { background: var(--md-danger, #c0392b); }

.md-ai-tab-dot-blue { background: var(--md-info, #2f7fe0); }

/* Puce ORANGE clignotante (1.0.0-rc3) : la session attend une ACTION
   de l'utilisateur (question pièces jointes ou équivalent futur).
   Priorité d'affichage : orange (action) > rouge (en cours) > bleu
   (terminé non consulté). */
.md-ai-tab-dot-orange { background: var(--md-warning, #e0a000); }

/* Tirette : le compteur rouge passe en orange clignotant dès qu'au
   moins une session attend une action (choix retenu : pas de 3e
   compteur, la couleur seule signale l'attente) */
#md-ai-h-run.md-ai-h-action {
    background: var(--md-warning, #e0a000);
    animation: md-dict-pulse 1.2s ease-in-out infinite;
}

/* Empty state du volet (aucune session) */
.md-ai-empty {
    padding: 40px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--md-text-muted);
}

/* Croix de fermeture : ronde, dégradé bleu comme le bouton Actualiser */
#md-ai-panel .md-ai-head button,
#md-ai-settings-panel .md-ai-head button,
#md-stats-panel .md-ai-head button {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--md-text-on-primary);
    background: var(--md-gradient-primary);
    box-shadow: var(--md-shadow-primary);
    transition: filter var(--md-dur) var(--md-ease), transform var(--md-dur) var(--md-ease);
}

#md-ai-panel .md-ai-head button:hover,
#md-ai-settings-panel .md-ai-head button:hover,
#md-stats-panel .md-ai-head button:hover {
    filter: brightness(1.10);
}

#md-ai-panel .md-ai-head button:active,
#md-ai-settings-panel .md-ai-head button:active,
#md-stats-panel .md-ai-head button:active {
    filter: brightness(0.85);
    transform: scale(0.92);
}

/* ---------------- Écran de chargement MAILDESK (login, anti pop-in) ---------------- */
#md-splash {
    position: fixed;
    inset: 0;
    /* Au-dessus du rideau de chargement natif de Zimbra
       (skin_container_splash_screen, z-index 90000000) */
    z-index: 90000001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        var(--md-deep-1) 0%,
        var(--md-primary-dark) 60%,
        var(--md-deep-2) 100%);
    font-family: var(--md-font);
    opacity: 1;
    transition: opacity var(--md-dur) var(--md-ease);
}

#md-splash.md-splash-out {
    opacity: 0;
    pointer-events: none;
}

.md-splash-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: var(--md-glass-bg);
    backdrop-filter: blur(var(--md-glass-blur));
    -webkit-backdrop-filter: blur(var(--md-glass-blur));
    border: 1px solid var(--md-glass-border);
    border-radius: var(--md-radius-lg);
    box-shadow: var(--md-shadow-lg);
    padding: 36px 48px;
    color: var(--md-text-muted);
    font-size: 13px;
}

.md-splash-card img { height: 38px; }

.md-splash-spin {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--md-primary) 25%, transparent);
    border-top-color: var(--md-primary);
    animation: md-splash-rot 0.9s linear infinite;
}

@keyframes md-splash-rot {
    to { transform: rotate(360deg); }
}

/* ---------------- Overlay KFA2 (vérification en deux étapes au login) ---------------- */
#md-kfa2-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        var(--md-deep-1) 0%,
        var(--md-primary-dark) 60%,
        var(--md-deep-2) 100%);
    font-family: var(--md-font);
}

.md-kfa2-card {
    width: 400px;
    max-width: calc(100vw - 48px);
    background: var(--md-glass-bg);
    backdrop-filter: blur(var(--md-glass-blur));
    -webkit-backdrop-filter: blur(var(--md-glass-blur));
    border: 1px solid var(--md-glass-border);
    border-radius: var(--md-radius-lg);
    box-shadow: var(--md-shadow-lg);
    padding: 36px 40px 32px;
    text-align: center;
    color: var(--md-text);
}

.md-kfa2-logo {
    height: 34px;
    margin-bottom: 14px;
}

.md-kfa2-card h2 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--md-primary-dark);
}

.md-kfa2-card p {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--md-text-muted);
}

#md-kfa2-code {
    width: 180px;
    padding: 12px 14px;
    border-radius: var(--md-radius-sm);
    border: 1px solid var(--md-input-border);
    background: rgba(255, 255, 255, 0.9);
    font-family: var(--md-font);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 8px;
    text-align: center;
    outline: none;
    transition: box-shadow var(--md-dur) var(--md-ease),
        border-color var(--md-dur) var(--md-ease);
}

#md-kfa2-code:focus {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 15%, transparent);
}

#md-kfa2-go {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 12px 0;
    border: none;
    border-radius: var(--md-radius-sm);
    font-family: var(--md-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--md-text-on-primary);
    background: var(--md-gradient-primary);
    box-shadow: var(--md-shadow-primary);
    cursor: pointer;
    transition: filter var(--md-dur) var(--md-ease);
}

#md-kfa2-go:hover { filter: brightness(1.08); }

#md-kfa2-go:disabled { opacity: 0.55; cursor: default; }

#md-kfa2-err {
    min-height: 18px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--md-danger-text);
}

/* Poignée de redimensionnement (bord gauche du panneau) */
#md-ai-resize,
#md-ai-settings-resize {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 12px;
    cursor: ew-resize;
    z-index: 10;
    touch-action: none;
}

#md-ai-resize::after,
#md-ai-settings-resize::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 44px;
    border-radius: 2px;
    background: rgba(120, 140, 170, 0.35);
    opacity: 0;
    transition: opacity var(--md-dur) var(--md-ease);
}

#md-ai-resize:hover::after,
#md-ai-settings-resize:hover::after {
    opacity: 1;
}

#md-ai-panel .md-ai-body,
#md-stats-panel .md-ai-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px 24px;
}

#md-ai-status {
    font-size: 13px;
    color: var(--md-text-muted);
    line-height: 1.55;
    /* Même « box » que les cartes flottantes (md-card-box) */
    padding: 8px 10px;
    border-radius: var(--md-radius-sm);
    border: 1px solid var(--md-input-border);
    background: var(--md-surface);
}

#md-ai-status a {
    color: var(--md-primary);
    font-weight: 600;
}

.md-ai-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 3px solid color-mix(in srgb, var(--md-primary) 18%, transparent);
    border-top-color: var(--md-primary);
    border-radius: 50%;
    animation: md-ai-spin 0.9s linear infinite;
}

@keyframes md-ai-spin {
    to { transform: rotate(360deg); }
}

#md-ai-panel h3 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--md-text-muted);
    margin: 18px 0 8px;
}

#md-ai-panel h3:first-child {
    margin-top: 0;
}

.md-ai-note {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--md-text-faint);
}

#md-ai-summary {
    background: var(--md-surface-faint);
    border: 1px solid var(--md-border-subtle);
    border-radius: var(--md-radius-sm);
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.65;
    white-space: pre-wrap;
}

#md-ai-attach-text {
    background: var(--md-surface-faint);
    border: 1px solid var(--md-border-subtle);
    border-radius: var(--md-radius-sm);
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.65;
    margin-bottom: 10px;
}

/* Sélection individuelle des pièces jointes (plusieurs PJ) */
#md-ai-attach-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
}

.md-ai-attach-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid var(--md-border-subtle);
    border-radius: var(--md-radius-sm);
    background: var(--md-surface-faint);
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color var(--md-dur-fast) var(--md-ease),
        background var(--md-dur-fast) var(--md-ease);
}

.md-ai-attach-item:hover {
    border-color: var(--md-primary);
}

.md-ai-attach-item input[type="checkbox"] {
    accent-color: var(--md-primary);
    margin: 0;
    flex: none;
}

.md-ai-attach-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* En mode multi-PJ les deux boutons ont des labels longs :
   répartition égale sur la ligne */
#md-ai-attach.md-ai-attach-multi .md-ai-actions button,
#md-ai-attach.md-ai-attach-multi .md-ai-actions .md-ai-secondary {
    flex: 1 1 auto;
}

/* Badge de fiabilité du mail (verdict anti-phishing de l'IA) */
#md-ai-safety {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--md-radius-pill);
    padding: 5px 13px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter var(--md-dur) var(--md-ease), box-shadow var(--md-dur) var(--md-ease);
}
#md-ai-safety:hover { filter: brightness(0.96); }
#md-ai-safety:focus-visible { outline: 2px solid var(--md-primary, #3367d6); outline-offset: 1px; }

#md-ai-safety .md-ai-safety-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    color: var(--md-text-on-primary);
    flex: none;
}

#md-ai-safety .md-ai-safety-chevron {
    font-size: 10px;
    opacity: 0.7;
    transition: transform var(--md-dur) var(--md-ease);
}
#md-ai-safety.md-ai-safety-open .md-ai-safety-chevron { transform: rotate(180deg); }

#md-ai-safety.md-ai-safety-legitime {
    background: var(--md-success-bg);
    color: var(--md-success-text);
    border-color: var(--md-success-border);
}
#md-ai-safety.md-ai-safety-legitime .md-ai-safety-icon { background: var(--md-success); }

#md-ai-safety.md-ai-safety-douteux {
    background: var(--md-warning-bg);
    color: var(--md-warning-text);
    border-color: var(--md-warning-border);
}
#md-ai-safety.md-ai-safety-douteux .md-ai-safety-icon { background: var(--md-warning); }

#md-ai-safety.md-ai-safety-frauduleux {
    background: var(--md-danger-bg);
    color: var(--md-danger-text);
    border-color: var(--md-danger-border);
}
#md-ai-safety.md-ai-safety-frauduleux .md-ai-safety-icon { background: var(--md-danger); }

#md-ai-safety-reasons {
    border-left: 3px solid;
    border-radius: 0 var(--md-radius-sm) var(--md-radius-sm) 0;
    padding: 9px 13px;
    font-size: 12.5px;
    line-height: 1.55;
    margin: -4px 0 12px 4px;
}
#md-ai-safety-reasons.md-ai-safety-legitime { background: #f2faf5; border-color: var(--md-success); color: #2c5f3e; }
#md-ai-safety-reasons.md-ai-safety-douteux { background: #fdf8ec; border-color: var(--md-warning); color: #6d4e00; }
#md-ai-safety-reasons.md-ai-safety-frauduleux { background: #fdf1f0; border-color: var(--md-danger); color: #7e241c; }

#md-ai-reply {
    width: 100%;
    box-sizing: border-box;
    min-height: 220px;
    padding: 12px 14px;
    border-radius: var(--md-radius-sm);
    border: 1px solid var(--md-input-border);
    background: rgba(255, 255, 255, 0.9);
    font-family: var(--md-font);
    font-size: 13.5px;
    line-height: 1.6;
    resize: vertical;
    outline: none;
}

#md-ai-reply:focus {
    border-color: var(--md-primary);
    box-shadow: var(--md-focus-ring);
}

.md-ai-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.md-ai-actions button {
    flex: 1;
    padding: 11px 0;
    border: none;
    border-radius: var(--md-radius-md);
    font-family: var(--md-font);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, var(--md-primary-light) 0%, var(--md-primary) 100%);
    color: var(--md-text-on-primary);
    box-shadow: var(--md-shadow-primary);
    transition: transform var(--md-dur-fast) var(--md-ease),
        box-shadow var(--md-dur-fast) var(--md-ease),
        filter var(--md-dur-fast) var(--md-ease);
}

.md-ai-actions button:hover {
    transform: translateY(-1px);
}

.md-ai-actions .md-ai-secondary {
    flex: 0 0 90px;
    background: var(--md-surface-soft);
    color: var(--md-primary-dark);
    border: 1px solid var(--md-input-border);
    box-shadow: none;
}


/*
====================================
 Avertissement bêta (page de login)
====================================
*/

#md-beta-warning {
    max-width: 460px;
    margin: 18px auto 0;
    padding: 12px 18px;
    border-radius: var(--md-radius-md);
    background: rgba(255, 244, 214, 0.96);
    border: 1px solid rgba(214, 158, 16, 0.65);
    color: #6b4e00;
    font-family: var(--md-font);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

#md-beta-warning strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13.5px;
}

#md-beta-warning.md-beta-fixed {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 9000;
}

/*
====================================
 Badge de version (barre du haut)
====================================
*/

#md-version-badge {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    padding: 3px 14px;
    border-radius: var(--md-radius-pill);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--md-font);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    pointer-events: none;
    white-space: nowrap;
}

#md-version-badge.md-badge-anchored {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#md-app-link {
    pointer-events: auto;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
}

#md-app-link:hover { color: #ffe9a8; }

/*
====================================
 Panneau IA : affiner la proposition
====================================
*/

#md-ai-instructions, #md-ai-followup-text {
    width: 100%;
    box-sizing: border-box;
    min-height: 64px;
    padding: 10px 12px;
    border-radius: var(--md-radius-sm);
    border: 1px solid var(--md-input-border);
    background: rgba(255, 255, 255, 0.9);
    font-family: var(--md-font);
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    outline: none;
}

#md-ai-instructions:focus, #md-ai-followup-text:focus {
    border-color: var(--md-primary);
    box-shadow: var(--md-focus-ring);
}


/*
====================================
 Écran d'attente Assistant IA
====================================
*/

.md-ai-thinking {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 34px 10px 26px;
    text-align: center;
}

/* Trois points qui rebondissent en dégradé */
.md-ai-dots {
    display: flex;
    gap: 9px;
}

.md-ai-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        var(--md-primary-light) 0%,
        var(--md-primary) 60%,
        var(--md-primary-dark) 100%);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--md-primary-dark) 40%, transparent);
    animation: md-ai-bounce 1.2s ease-in-out infinite;
}

.md-ai-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.md-ai-dots span:nth-child(3) {
    animation-delay: 0.30s;
}

@keyframes md-ai-bounce {
    0%, 60%, 100% { transform: translateY(0) scale(1); opacity: 0.75; }
    30%           { transform: translateY(-11px) scale(1.12); opacity: 1; }
}

.md-ai-think-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--md-primary-dark);
    min-height: 20px;
    animation: md-ai-fade 0.6s ease;
}

@keyframes md-ai-fade {
    from { opacity: 0.25; }
    to   { opacity: 1; }
}

.md-ai-elapsed {
    font-size: 12px;
    font-weight: 600;
    color: var(--md-text-faint);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

/* Barre shimmer indéterminée */
.md-ai-shimmer {
    width: 100%;
    height: 6px;
    border-radius: var(--md-radius-pill);
    background: rgba(120, 140, 170, 0.16);
    overflow: hidden;
}

.md-ai-shimmer div {
    width: 40%;
    height: 100%;
    border-radius: var(--md-radius-pill);
    background: linear-gradient(90deg,
        transparent 0%,
        var(--md-primary-light) 35%,
        var(--md-primary) 55%,
        transparent 100%);
    animation: md-ai-slide 1.5s ease-in-out infinite;
}

@keyframes md-ai-slide {
    from { transform: translateX(-110%); }
    to   { transform: translateX(260%); }
}

/* ---------- Sélecteur d'émoji (composeur) ---------- */
#md-emoji-btn,
#md-ai-mic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    min-width: 34px;
    padding: 0 8px;
    margin: 0 2px;
    border-radius: var(--md-radius-xs);
    border: 1px solid var(--md-input-border);
    background: var(--md-surface);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: filter var(--md-dur-fast) var(--md-ease), border-color var(--md-dur-fast) var(--md-ease);
}
#md-emoji-btn:hover,
#md-ai-mic-btn:hover {
    filter: brightness(0.95);
    border-color: var(--md-primary, #3367d6);
}

/* Icône SVG du micro : nette, suit la couleur du bouton (currentColor) */
#md-ai-mic-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

#md-emoji-panel {
    position: absolute;
    top: 28px;
    right: 0;
    left: auto;
    z-index: 10000;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    width: 280px;
    padding: 8px;
    border-radius: var(--md-radius-sm);
    border: 1px solid var(--md-input-border);
    background: var(--md-surface);
    box-shadow: var(--md-shadow-lg);
}
#md-emoji-panel[hidden] { display: none; }

#md-emoji-panel button {
    border: none;
    background: transparent;
    font-size: 17px;
    line-height: 1;
    padding: 4px 0;
    border-radius: var(--md-radius-xs);
    cursor: pointer;
}
#md-emoji-panel button:hover { background: color-mix(in srgb, var(--md-primary) 12%, transparent); }

/* ----------------------------------------- panneau statistiques IA */

#md-stats-panel h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--md-text-faint);
    margin: 22px 0 8px;
}

#md-stats-panel h3:first-child {
    margin-top: 0;
}

#md-stats-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 6px;
}

.md-stat-card {
    flex: 1;
    border-radius: var(--md-radius-md);
    padding: 12px 14px;
    background: rgba(120, 140, 170, 0.10);
    border: 1px solid var(--md-border-subtle);
}

.md-stat-card .md-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--md-primary-dark);
}

.md-stat-card .md-stat-label {
    font-size: 12px;
    color: var(--md-text-muted);
    margin-top: 2px;
}

#md-stats-panel table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

#md-stats-panel th,
#md-stats-panel td {
    text-align: right;
    padding: 6px 8px;
    border-bottom: 1px solid var(--md-border-faint);
    white-space: nowrap;
}

#md-stats-panel th:first-child,
#md-stats-panel td:first-child {
    text-align: left;
}

#md-stats-panel th {
    color: var(--md-text-faint);
    font-weight: 600;
    font-size: 12px;
}

/* Barres de tendance (moyenne du jour, proportionnelle au max) */
.md-stat-bar {
    height: 6px;
    border-radius: 3px;
    margin-top: 4px;
    background: var(--md-gradient-primary);
    min-width: 2px;
}

#md-stats-panel .md-stats-empty {
    color: var(--md-text-faint);
    font-size: 13px;
    line-height: 1.6;
}

/* Graphique des temps de réponse (canvas) */
#md-stats-chart-wrap {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--md-primary) 10%, #ffffff) 0%,
        #ffffff 100%);
    border: 1px solid var(--md-border-subtle);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--md-primary-dark) 12%, transparent);
}

#md-stats-chart {
    display: block;
    width: 100%;
    height: 180px;
}

#md-stats-legend {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--md-text-muted);
}

#md-stats-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#md-stats-legend i {
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

/* ============================================
   États transverses des contrôles MAILDESK
   (réf. docs/DESIGN_GUIDELINES.md § États)
   ============================================ */

/* Enfoncement : retour haptique discret sur toutes les pilules/actions */
#md-ai-settings-link:active,
#md-stats-link:active,
#md-ai-btn:active,
#md-ai-correct-btn:active,
.md-ai-btn:active,
.md-ai-actions button:active,
#md-emoji-btn:active,
#md-ai-mic-btn:active {
    transform: scale(0.96);
    filter: brightness(0.92);
}

/* Focus visible clavier : anneau primaire, jamais masqué */
#md-ai-settings-link:focus-visible,
#md-stats-link:focus-visible,
#md-ai-btn:focus-visible,
#md-ai-correct-btn:focus-visible,
.md-ai-btn:focus-visible,
.md-ai-actions button:focus-visible,
#md-emoji-btn:focus-visible,
#md-ai-mic-btn:focus-visible,
#md-emoji-panel button:focus-visible,
#md-ai-panel .md-ai-head button:focus-visible,
#md-ai-settings-panel .md-ai-head button:focus-visible,
#md-stats-panel .md-ai-head button:focus-visible {
    outline: none;
    box-shadow: var(--md-focus-ring), var(--md-shadow-primary);
}

#md-emoji-panel button:focus-visible {
    box-shadow: var(--md-focus-ring);
}

/* Survol des boutons d'action du panneau IA : lueur cohérente */
.md-ai-actions button:hover {
    box-shadow: var(--md-shadow-primary-hover);
    filter: brightness(1.06);
}

/* Boutons secondaires : survol teinté, pas de lueur */
.md-ai-actions .md-ai-secondary:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface));
    border-color: var(--md-primary);
    box-shadow: none;
    filter: none;
}

/* État désactivé / en cours : opacité réduite, curseur neutre */
.md-ai-actions button:disabled,
.md-ai-actions button.md-ai-busy,
#md-ai-btn.md-ai-busy,
#md-ai-correct-btn.md-ai-busy {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
    transform: none;
    filter: none;
    box-shadow: none;
}

/* ============================================
   Liste des mails — refonte v0.52
   (avatars, respiration, non-lus, typographie)
   ============================================ */

/* Séparateurs quasi invisibles + transition douce au survol.
   NB : Zimbra utilise la classe Row OU RowDouble (lignes doubles)
   selon le mode d'affichage — on cible l'id stable zli__* */
body.md-app .DwtListView li[id^="zli__"] {
    border-bottom: 1px solid var(--md-border-faint);
    transition: background var(--md-dur-fast) var(--md-ease);
}

/* Avatar rond à initiales (injecté par maildesk.js), en ligne avec le nom */
.md-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 50%;
    color: var(--md-text-on-primary);
    font-family: var(--md-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: var(--md-shadow-xs);
    user-select: none;
}

.md-avatar-lg {
    width: 40px;
    height: 40px;
    font-size: 15px;
}

/* Lignes doubles (lecture à droite) : la TopRow fait ~19 px de haut avec
   overflow:hidden — un avatar de 20 px y est croppé en bas. 16 px passe
   sans toucher aux hauteurs de ligne calculées par Zimbra. */
body.md-app li.RowDouble .md-avatar {
    width: 16px;
    height: 16px;
    font-size: 9px;
}

.md-av-0 { background: var(--md-av-0); }
.md-av-1 { background: var(--md-av-1); }
.md-av-2 { background: var(--md-av-2); }
.md-av-3 { background: var(--md-av-3); }
.md-av-4 { background: var(--md-av-4); }
.md-av-5 { background: var(--md-av-5); }
.md-av-6 { background: var(--md-av-6); }
.md-av-7 { background: var(--md-av-7); }

/* Hiérarchie typographique : expéditeur affirmé, aperçu effacé
   (lignes simples .ZmMsgListColFrom / doubles .TopRow span __fr /
   vue conversation .TopRow div[__fr] > span participant) */
body.md-app .ZmMsgListColFrom > span:not(.md-avatar),
body.md-app .TopRow span[id$="__fr"],
body.md-app .TopRow div[id$="__fr"] > span {
    font-weight: 600;
    color: var(--md-text);
}

body.md-app .ZmMsgListColSubject > span:first-child,
body.md-app .SubjectDoubleRow > span:first-child {
    color: var(--md-text);
}

body.md-app .ZmConvListFragment {
    color: var(--md-text-faint);
    font-size: var(--md-text-xs);
}

/* Non-lus : barre d'accent primaire + texte affirmé + fond teinté léger */
body.md-app .DwtListView li[id^="zli__"].md-row-unread {
    box-shadow: inset 3px 0 0 var(--md-primary);
    background: color-mix(in srgb, var(--md-primary) 5%, var(--md-surface)) !important;
}

body.md-app li[id^="zli__"].md-row-unread .ZmMsgListColFrom > span:not(.md-avatar),
body.md-app li[id^="zli__"].md-row-unread .TopRow span[id$="__fr"],
body.md-app li[id^="zli__"].md-row-unread .TopRow div[id$="__fr"] > span,
body.md-app li[id^="zli__"].md-row-unread .ZmMsgListColSubject > span:first-child,
body.md-app li[id^="zli__"].md-row-unread .SubjectDoubleRow > span:first-child {
    font-weight: 700;
}

body.md-app .DwtListView li[id^="zli__"].md-row-unread:hover {
    background: color-mix(in srgb, var(--md-primary) 9%, var(--md-surface)) !important;
}

/* ============================================
   Vue message — en-tête restructuré (v0.52)
   ============================================ */

/* Photo de contact générique : remplacée par l'avatar à initiales */
body.md-app .MsgHeaderContactImage {
    display: none;
}

/* Silhouette générique des en-têtes du panneau conversation :
   remplacée par l'avatar à initiales (les vraies photos de contact,
   dont le src ne contient pas ImgPerson, sont conservées) */
body.md-app .Conv2MsgHeader .image img[src*="ImgPerson"] {
    display: none;
}

body.md-app .MsgHeaderContactContainer {
    padding-right: var(--md-space-3);
    vertical-align: top;
}

/* Objet : titre de la page de lecture */
body.md-app .MsgHeaderTable .SubjectCol {
    font-size: 17px;
    font-weight: 700;
    color: var(--md-text);
    padding-bottom: 2px;
}

/* Date : discrète */
body.md-app .MsgHeaderTable .DateCol {
    color: var(--md-text-faint);
    font-size: var(--md-text-xs);
    white-space: nowrap;
}

/* Libellés (Expéditeur :, À :) en tertiaire */
body.md-app .MsgHeaderTable .LabelColName {
    color: var(--md-text-faint);
    font-size: var(--md-text-xs);
}

/* En-tête : carte soufflée, séparée du corps du message */
body.md-app .MsgHeaderTable {
    border-bottom: 1px solid var(--md-border-subtle);
    padding-bottom: var(--md-space-2);
}

/* ============================================
   Profondeur du bandeau / toolbar (v0.52)
   ============================================ */

/* Ombre douce sous la barre d'outils : le contenu « passe sous » la barre */
body.md-app #skin_container_app_new_button,
body.md-app #skin_container_app_top_toolbar {
    box-shadow: 0 7px 0 var(--md-surface),
        0 12px 22px rgba(10, 20, 40, 0.10);
}

/* Scrollbars encore plus fines, survol du thumb teinté primaire */
body.md-app ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

body.md-app ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--md-primary) 45%, transparent);
    background-clip: content-box;
    border: 2px solid transparent;
}

/* ============================================
   Écran d'attente « Corriger » (composeur) — v0.54
   Même animation que le panneau Assistant IA,
   en overlay centré sur la fenêtre de composition
   ============================================ */

#md-correct-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 25, 45, 0.30);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-dur-slow) var(--md-ease);
}

#md-correct-overlay.md-open {
    opacity: 1;
    pointer-events: auto;
}

#md-correct-card {
    width: 380px;
    max-width: 90vw;
    transform: translateY(8px) scale(0.98);
    transition: transform var(--md-dur-slow) var(--md-ease);
}

#md-correct-overlay.md-open #md-correct-card {
    transform: translateY(0) scale(1);
}

#md-correct-card .md-correct-error {
    color: var(--md-danger-text);
    font-size: var(--md-text-sm);
    line-height: 1.55;
    margin-bottom: var(--md-space-4);
    text-align: center;
}

/* ============================================
   Cartes flottantes MAILDESK — langage commun
   (référence : carte de dictée, v0.69 ; appliqué
   à la dictée et à l'overlay de correction, v0.71)
   ============================================ */
.md-card {
    /* Cartes contextuelles du composeur/panneau : BLANC OPAQUE (retour
       utilisateur 0.71.1 — pas de verre semi-transparent ici ; le verre
       reste réservé au splash login et à l'overlay KFA2) */
    background: var(--md-surface);
    border: 1px solid var(--md-glass-border);
    border-radius: var(--md-radius-lg);
    box-shadow: var(--md-shadow-lg);
    padding: 14px 18px;
    font-family: var(--md-font);
    color: var(--md-text);
}

.md-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--md-primary-dark);
    margin-bottom: 8px;
}

.md-card-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--md-primary);
    animation: md-dict-pulse 1.2s ease-in-out infinite;
    flex: 0 0 auto;
}

.md-card-box {
    max-height: 140px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.55;
    padding: 8px 10px;
    border-radius: var(--md-radius-sm);
    border: 1px solid var(--md-input-border);
    background: var(--md-surface);
    min-height: 44px;
}

.md-card-status {
    min-height: 16px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--md-text-muted);
}

.md-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.md-card-actions button {
    flex: 1;
    padding: 9px 0;
    border: none;
    border-radius: var(--md-radius-pill);
    background: var(--md-gradient-primary);
    color: var(--md-text-on-primary);
    font-family: var(--md-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--md-shadow-primary);
    transition: filter var(--md-dur) var(--md-ease);
}

.md-card-actions button:hover { filter: brightness(1.08); }

.md-card-actions .md-card-secondary {
    background: transparent;
    color: var(--md-text-muted);
    border: 1px solid var(--md-input-border);
    box-shadow: none;
}

.md-card-actions .md-card-secondary:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, transparent);
    color: var(--md-primary-dark);
}

/* ============================================
   Dictée audio (composeur) — v0.69
   ============================================ */
#md-dict-card {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 12000;
    width: 380px;
    max-width: calc(100vw - 48px);
}

.md-dict-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--md-primary-dark);
    margin-bottom: 8px;
}

#md-dict-time {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--md-text-muted);
    font-weight: 600;
}

.md-dict-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d33;
    animation: md-dict-pulse 1.2s ease-in-out infinite;
}

.md-dict-dot.md-dict-dot-off {
    background: var(--md-text-muted);
    animation: none;
}

@keyframes md-dict-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

#md-dict-text {
    max-height: 140px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.55;
    padding: 8px 10px;
    border-radius: var(--md-radius-sm);
    border: 1px solid var(--md-input-border);
    background: rgba(255, 255, 255, 0.75);
    min-height: 44px;
}

.md-dict-partial {
    color: var(--md-text-muted);
    font-style: italic;
}

#md-dict-status {
    min-height: 16px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--md-text-muted);
}

.md-dict-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.md-dict-actions button {
    flex: 1;
    padding: 9px 0;
    border: none;
    border-radius: var(--md-radius-pill);
    background: var(--md-gradient-primary);
    color: var(--md-text-on-primary);
    font-family: var(--md-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--md-shadow-primary);
    transition: filter var(--md-dur) var(--md-ease);
}

.md-dict-actions button:hover { filter: brightness(1.08); }

.md-dict-actions .md-dict-secondary {
    background: transparent;
    color: var(--md-text-muted);
    border: 1px solid var(--md-input-border);
    box-shadow: none;
}

.md-dict-actions .md-dict-secondary:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, transparent);
    color: var(--md-primary-dark);
}

/* ============================================
   Réponse rapide (réaction emoji) — v0.56
   ============================================ */

/* Picker : popover sous le bouton, même esprit que le sélecteur
   d'emoji du composeur, emojis en grand.
   position: fixed + rattachement au <body> (coordonnées calculées en
   JS depuis le bouton) : en vue onglet, la toolbar du message a un
   contexte d'empilement inférieur à l'en-tête du message — en
   absolute dans la cellule, le picker passait dessous même à 10000. */
.md-quick-panel {
    position: fixed;
    z-index: 13000;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--md-space-1);
    width: 200px;
    padding: var(--md-space-2);
    border-radius: var(--md-radius-sm);
    border: 1px solid var(--md-input-border);
    background: var(--md-surface);
    box-shadow: var(--md-shadow-lg);
}

.md-quick-panel[hidden] { display: none; }

.md-quick-panel button {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    padding: 6px 0;
    border-radius: var(--md-radius-xs);
    cursor: pointer;
    transition: background var(--md-dur-fast) var(--md-ease),
        transform var(--md-dur-fast) var(--md-ease);
}

.md-quick-panel button:hover {
    background: color-mix(in srgb, var(--md-primary) 12%, transparent);
    transform: scale(1.15);
}

.md-quick-panel button:focus-visible {
    outline: none;
    box-shadow: var(--md-focus-ring);
}

/* Toast de confirmation (succès / erreur) */
#md-toast {
    position: fixed;
    bottom: var(--md-space-6);
    right: var(--md-space-6);
    z-index: 13000;
    max-width: 360px;
    padding: 10px 18px;
    border-radius: var(--md-radius-pill);
    font-family: var(--md-font);
    font-size: var(--md-text-sm);
    font-weight: 600;
    color: var(--md-text-on-primary);
    background: linear-gradient(135deg,
        var(--md-primary-light) 0%,
        var(--md-primary) 55%,
        var(--md-primary-dark) 100%);
    box-shadow: var(--md-shadow-primary);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--md-dur-slow) var(--md-ease),
        transform var(--md-dur-slow) var(--md-ease);
}

#md-toast.md-toast-err {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--md-danger) 80%, #ffffff) 0%,
        var(--md-danger) 100%);
}

#md-toast.md-toast-show {
    opacity: 1;
    transform: translateY(0);
}
#md-toast.md-toast-show {
    opacity: 1;
    transform: translateY(0);
}

/* Session « Sécurité IA » (1.0.0-rc38) : dans le bloc résultat, ne
   garder que le badge de verdict et ses raisons (ni résumé, ni
   proposition, ni bouton « Utiliser », ni affinement) */
#md-ai-result.md-ai-safety-only > :not(#md-ai-safety):not(#md-ai-safety-reasons) {
    display: none !important;
}