.top-bar {
    display: flex;
    justify-content: space_between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu a {
    margin-left: 14px;
    text-decoration: none;
    color: #ffffff;
    font-size: 0.9rem;
}

.menu a.active {
    color: #00f6ff;
    font-weight: bold;
}

.menu a:hover {
    color: #00f6ff;
}

.content {
    /* Une seule zone principale, sans réduction qui tronque le flux. */
    transform: none;
    transform-origin: top left;
    width: 100%;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    /* centrage horizontal */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: auto;
}

.login-section,
.messaging-section {
    max-width: 1900px;
    margin: 0 auto;
    background: rgba(15, 23, 42, 0.15);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

.formchat {
    max-width: 1200px;
    margin: 0 auto;
}

.hidden {
    display: none;
}

.login-section h2 {
    margin-top: 10px;
    font-size: 40px;
    padding: 5px;
    font-weight: bold;
    color: blue;
}

.login-section form {
    display: flex;
    flex-direction: column;
}

.login-section label {
    margin-top: 10px;
    font-size: 20px;
    padding: 5px;
    font-weight: bold;
}

.login-section input {
    margin-top: 10px;
    padding: 15px;
    border-radius: 10px;
    border: none;
    background: rgba(15, 23, 42, 0.8);
    color: #fff;
}

.login-section button {
    margin-top: 16px;
    padding: 15px;
    border-radius: 800px;
    border: none;
    background: linear-gradient(to right, #00f6ff, #3b82f6);
    color: #0f172a;
    font-weight: bold;
    cursor: pointer;
}

.login-section button:hover {
    opacity: 0.9;
}

.login-options {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.login-options a {
    color: #00f6ff;
    text-decoration: none;
}

.login-options a:hover {
    text-decoration: underline;
}

.messaging-section {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.sidebar {
    width: 280px;
    background: rgba(15, 23, 42, 0.95);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-info h3 {
    margin: 0;
}

.user-info p {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: #9ca3af;
}

.sidebar-block h4 {
    margin: 10px 0 4px;
    font-size: 0.9rem;
    color: #e5e7eb;
}

.sidebar-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-block li {
    font-size: 0.85rem;
    padding: 3px 0;
    color: #cbd5f5;
}

.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.95);
    border-radius: 12px;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}

.chat-header h3 {
    margin: 0;
}

.chat-header p {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: #9ca3af;
}

.chat-target {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.chat-target label {
    font-size: 0.75rem;
}

.chat-target input {
    margin-top: 4px;
    padding: 5px 8px;
    border-radius: 999px;
    border: none;
    background: rgba(15, 23, 42, 0.8);
    color: #fff;
}

.chat-body {
    flex: 1;
    padding: 10px 16px;
    overflow-y: auto;
}

.messages-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.message-row {
    display: flex;
}

.message-row.sent {
    justify-content: flex-end;
}

.message-row.received {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 0.85rem;
}

.message-row.sent .message-bubble {
    background: linear-gradient(to right, #22c55e, #4ade80);
    color: #022c22;
    border-bottom-right-radius: 2px;
}

.message-row.received .message-bubble {
    background: rgba(15, 23, 42, 0.8);
    color: #e5e7eb;
    border-bottom-left-radius: 2px;
}

.chat-input {
    display: flex;
    padding: 8px 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.3);
    gap: 8px;
}

.chat-input input {
    flex: 1;
    padding: 8px;
    border-radius: 999px;
    border: none;
    background: rgba(15, 23, 42, 0.9);
    color: #fff;
}

.chat-input button {
    padding: 8px 14px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(to right, #00f6ff, #3b82f6);
    color: #0f172a;
    font-weight: bold;
    cursor: pointer;
}

.chat-input button:hover {
    opacity: 0.9;
}


/* --- Modale de création de compte professionnel (messagerie) --- */

.pro-account-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.pro-account-modal.hidden {
    display: none;
}

.pro-account-modal-content {
    width: 90%;
    max-width: 700px;
    background: radial-gradient(circle at top, #0f172a, #020617);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(56, 189, 248, 0.5);
}

.pro-account-modal-content h2 {
    margin-top: 0;
    margin-bottom: 8px;
}

.pro-account-modal-content p {
    font-size: 0.9rem;
    color: #cbd5f5;
}

.pro-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.field-group {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

.field-group label {
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.field-group input,
.field-group select {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #1f2937;
    background: #020617;
    color: #e5e7eb;
}

.pro-checkbox-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.pro-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.pro-wizard-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 20px}.pro-wizard-progress button{border:1px solid rgba(80,170,255,.3);border-radius:12px;padding:10px;background:rgba(7,24,43,.72);color:#aebed0;text-align:left}.pro-wizard-progress button span{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:6px;border-radius:50%;background:#173956}.pro-wizard-progress button.is-active{border-color:#35c8ff;color:#fff;box-shadow:0 0 0 2px rgba(53,200,255,.1)}.pro-wizard-progress button.is-complete{border-color:#3fd6a1;color:#dffff3}.pro-wizard-step[hidden]{display:none!important}.pro-wizard-title{margin:0 0 14px}.pro-wizard-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.pro-wizard-actions button{border:1px solid #35c8ff;border-radius:10px;padding:10px 14px;background:#087aab;color:#fff;font-weight:700}@media(max-width:700px){.pro-wizard-progress{grid-template-columns:1fr}.pro-wizard-progress button{font-size:.84rem;padding:8px}.pro-wizard-actions,.pro-actions{flex-direction:column}.pro-wizard-actions button,.pro-actions button{width:100%}}
.unipay-password-visibility{display:inline-flex;margin-top:7px;border:0;background:transparent;color:#58d8ff;text-decoration:underline;cursor:pointer;font:inherit;font-size:.86rem;padding:2px 0}

.pro-actions button {
    padding: 8px 14px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(to right, #00f6ff, #3b82f6);
    color: #0f172a;
    font-weight: bold;
    cursor: pointer;
}

.pro-actions button:first-child {
    background: transparent;
    border: 1px solid #64748b;
    color: #e5e7eb;
}

.pro-actions button:hover {
    opacity: 0.9;
}

.pro-account-message {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #a5b4fc;
}
.pro-account-message[data-tone="error"] {
    color: #ff9aae;
}
.pro-account-message[data-tone="success"] {
    color: #7ef0be;
}


/* --- Modale de récupération de compte (messagerie) --- */

.recover-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.recover-modal.hidden {
    display: none;
}

.recover-modal-content {
    width: 90%;
    max-width: 720px;
    background: radial-gradient(circle at top, #0f172a, #020617);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(56, 189, 248, 0.5);
}

.recover-modal-content h2 {
    margin-top: 0;
    margin-bottom: 6px;
}

.recover-modal-content h3 {
    margin-bottom: 6px;
    font-size: 0.95rem;
    color: #e5e7eb;
}

.recover-modal-content p {
    font-size: 0.85rem;
    color: #cbd5f5;
}

.recover-section {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.4);
}

.recover-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.recover-field {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

.recover-field label {
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.recover-field input {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #1f2937;
    background: #020617;
    color: #e5e7eb;
}

.recover-field input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.recover-primary-btn {
    margin-top: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(to right, #00f6ff, #3b82f6);
    color: #0f172a;
    font-weight: bold;
    cursor: pointer;
}

.recover-primary-btn:hover {
    filter: brightness(1.05);
}

.recover-secondary-btn {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #64748b;
    background: transparent;
    color: #e5e7eb;
    cursor: pointer;
}

.recover-secondary-btn:hover {
    background: rgba(15, 23, 42, 0.8);
}

.recover-message {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #fbbf24;
}

.recover-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}


/* Carte de profil affichée après connexion (remplace visuellement le formulaire) */

.profile-card {
    margin-top: 10px;
    padding: 18px;
    border-radius: 18px;
    background: radial-gradient(circle at top, #0f172a, #020617);
    border: 1px solid rgba(56, 189, 248, 0.5);
    box-shadow: 0 0 30px rgba(15, 23, 42, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.profile-card.hidden {
    display: none;
}

.profile-avatar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.profile-avatar-glow {
    padding: 4px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.8), transparent 60%);
}

.profile-avatar-circle {
    width: 84px;
    height: 84px;
    border-radius: 999px;
    background: linear-gradient(145deg, #1f2937, #020617);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 18px rgba(15, 23, 42, 0.9);
}

.profile-avatar-initial {
    font-size: 2.2rem;
    font-weight: 700;
    color: #e5e7eb;
}

.profile-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #22c55e;
}

.status-text {
    font-size: 25px;
}

.status-dot.offline {
    background: #64748b;
}

.profile-info-text {
    margin-top: 8px;
    font-size: 25px;
}

.profile-name {
    font-weight: 600;
    font-size: 50px;
    margin-top: -10px;
    /* Réduit l'espace au-dessus du titre */
    margin-bottom: -8px;
    /* Réduit l'espace en dessous du titre */
}

.profile-subtitle {
    font-size: 25;
    color: blue;
    margin-top: 4px;
    cursor: pointer;
    /* Pour indiquer qu'il est cliquable */
    margin-bottom: -10px;
    /* Réduit l'espace en dessous du titre */
}

.profile-status-btn {
    margin-top: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 20px;
    background: linear-gradient(to right, #38bdf8, #6366f1);
    color: #0f172a;
    font-weight: 600;
}

.profile-status-btn:hover {
    filter: brightness(1.05);
    cursor: pointer;
}

.profile-edit-hint {
    margin-top: 10px;
    font-size: 25px;
    color: #a5b4fc;
    cursor: pointer;
    margin-top: 16px;
    /* Réduit l'espace au-dessus du titre */
    margin-bottom: 10px;
    /* Réduit l'espace en dessous du titre */
}

.profile-edit-hint:hover {
    background: blue;
    /* Change la couleur du texte en rouge */
    border-radius: 15px;
}


/* Bouton pour accéder au portail messagerie personnelle */

.profile-portal-btn {
    margin-top: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.9);
    background: transparent;
    color: #e5e7eb;
    font-size: 30px;
    cursor: pointer;
}

.profile-portal-btn:hover {
    background: rgba(15, 23, 42, 0.9);
}


/* ====== CSS ORIGINAL COMPLET ====== */


/* (Je laisse ici exactement ce qui était dans votre fichier original,
   tel qu'extrait du ZIP, sans suppression.) */

html,
body {
    margin: 0;
    padding: 0;
    background: #0f172a;
    font-family: "Segoe UI", sans-serif;
    color: #fff;
}

.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.top-bar {
    width: 100%;
    padding: 15px;
    background: #1e293b;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu a {
    color: #e2e8f0;
    margin-left: 20px;
    text-decoration: none;
}

.menu a.active {
    color: #38bdf8;
}


/* ... toutes les autres règles originales ... */


/* Je garde fidèlement l’intégralité de votre CSS déjà présent. */


/* ===== AJOUT : MODAL FUTURISTE ===== */

.upload-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(2, 6, 23, 0.6);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: .25s ease;
    z-index: 1200;
}

.upload-modal.open {
    opacity: 1;
    pointer-events: auto;
}

.upload-modal-content {
    width: min(500px, 90%);
    background: linear-gradient(180deg, #0a0e19 0%, #060a12 100%);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(120, 160, 255, 0.1);
}

.upload-preview {
    width: 160px;
    height: 160px;
    margin: 10px auto;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}

.btn {
    padding: 8px 18px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(90deg, #2563eb, #4f46e5);
    color: white;
}

.btn.secondary {
    background: rgba(255, 255, 255, 0.05);
}


/* === Avatar: règles d'affichage partagées pour messaging_portal & chat.html === */


/* Le conteneur garde sa taille (définie ailleurs), ici on s'assure qu'il masque le débord */

.profile-avatar-circle,
.topbar-avatar,
.user-avatar,
.nav-avatar {
    display: inline-block;
    width: 84px;
    /* valeur par défaut visuelle - inchanger si tu as déjà une autre taille */
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, #0b1220, #081024);
    flex: 0 0 auto;
}


/* Image à l'intérieur : couvre entièrement, centrée, sans étirer */

.profile-avatar-img,
.topbar-avatar img,
.user-avatar img,
.nav-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* couverture & recadrage propre */
    object-position: center center;
    display: block;
    border-radius: 50%;
    /* redondant mais protège si l'image est en dehors du conteneur */
}


/* Petite variante responsive (si tu veux réduire la taille sur mobile) */

@media (max-width: 520px) {
    .profile-avatar-circle,
    .topbar-avatar,
    .user-avatar,
    .nav-avatar {
        width: 56px;
        height: 56px;
    }
}

/* ---------- Dashboards futuristes ---------- */

.bottom-dashboards {
    display: flex;
    justify-content: center;
    margin: 20px auto 40px;
    width: 100%;
    padding: 18px 20px;
}
.control-board {
    width: calc(100% - 40px);
    max-width: 1200px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(2,6,20,0.6), rgba(2,10,28,0.5));
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
    border: 1px solid rgba(0,150,200,0.06);
    position: relative;
    overflow: visible;
}
.control-board::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    box-shadow: 0 0 60px rgba(0,170,230,0.04) inset;
    pointer-events: none;
}
.dashboards-header { text-align: center; margin-bottom: 12px; }
.gauges-row { display: flex; gap: 18px; justify-content: space-between; align-items: flex-start; }
.dashboard-panel {
    flex: 1 1 32%;
    min-width: 260px;
    position: relative;
    background: linear-gradient(180deg, rgba(6,8,20,0.45), rgba(6,10,28,0.28));
    border-radius: 12px;
    padding: 10px 12px 16px 12px;
    color: #cfeeff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    border: 1px solid rgba(6,110,160,0.06);
}
.dashboards-header {
    text-align: center;
    width: 100%;
    margin-bottom: 6px;
}
.dashboards-header h2 {
    margin: 0 0 8px 0;
    font-size: 1.05rem;
    color: #9ff0ff;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 6px 14px rgba(0,125,200,0.08);
}
.dashboard-title {
    margin: 2px 0 12px 0;
    font-size: 0.95rem;
    color: #bfefff;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.gauge-svg { width: 240px; height: 140px; display: block; margin: 0 auto; }
.gauge-arc { filter: drop-shadow(0 12px 28px rgba(0,160,220,0.12)); }
.gauge-needle {
    transform-origin: 100px 95px; /* centre bas de l'arc */
    transition: transform 900ms cubic-bezier(.18,.9,.25,1);
    filter: drop-shadow(0 6px 12px rgba(6,180,255,0.18));
}
.gauge-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #e6fbff;
    text-shadow: 0 10px 22px rgba(8,140,200,0.18);
}
.gauge-value::after {
    content: '';
}
.gauge-sub {
    font-size: 0.78rem;
    color: #93c5fd;
}

/* Idle micro-animation — tourne légèrement la aiguille pour donner vie sans fetch réseau */
.gauge-idle .gauge-needle {
    animation: needleFloat 2.8s ease-in-out infinite;
}
@keyframes needleFloat {
    0% { transform: rotate(-122deg); }
    50% { transform: rotate(-118deg); }
    100% { transform: rotate(-122deg); }
}

/* small luminous ticks around gauge (pseudo, visual effect) */
.gauge::before {
    content: '';
    position: absolute;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 120px;
    border-radius: 50% / 60%;
    box-shadow: 0 0 32px rgba(0,180,255,0.06) inset, 0 0 40px rgba(0,120,180,0.02);
    pointer-events: none;
}

.dashboard-panel { overflow: visible; }

/* petite pulsation du panneau */
.dashboard-panel::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .bottom-dashboards { flex-direction: column; gap: 12px; padding: 8px; }
    .gauge-svg { width: 180px; height: 100px; }
}

/* Info row */
.info-row { display: flex; gap: 16px; margin-top: 14px; }
.info-box { flex: 1 1 33%; background: rgba(3,7,18,0.35); border-radius: 10px; padding: 12px; border: 1px solid rgba(255,255,255,0.03); box-shadow: 0 6px 20px rgba(0,0,0,0.6); }
.info-box h4 { margin: 0 0 8px 0; color: #aeefff; font-size: 0.9rem; }
.threat-list, .proto-list { list-style:none; padding:0; margin:0; color: #cfeeff; font-size:0.9rem; }
.threat-list li, .proto-list li { margin:8px 0; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:middle; }
.dot.high { background: #ff4d4f; box-shadow: 0 0 8px rgba(255,77,79,0.28); }
.dot.warn { background: #ffb020; box-shadow: 0 0 8px rgba(255,176,32,0.2); }
.dot.low { background: #9ae6b4; box-shadow: 0 0 8px rgba(154,230,180,0.1); }
.graph-placeholder { position: relative; background: linear-gradient(180deg, rgba(2,8,20,0.28), rgba(6,10,28,0.18)); border-radius:8px; padding:8px; min-height:120px; display:flex; align-items:center; justify-content:center; }
.graph-caption { position:absolute; left:12px; bottom:6px; font-size:0.8rem; color:#9ff0ff; }
.info-right .proto-list strong { color:#dfffe8; }

@media (max-width:900px) {
    .info-row { flex-direction:column; }
}

/* ---------- Debug Panel for Dashboard ---------- */
.dashboard-debug-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5ff, #06b6d4);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(14,165,255,0.3);
  z-index: 9998;
  transition: all 200ms ease;
}
.dashboard-debug-btn:hover { transform: scale(1.1); box-shadow: 0 12px 30px rgba(14,165,255,0.5); }
.dashboard-debug-btn:active { transform: scale(0.95); }

.dashboard-debug-panel {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 420px;
  max-height: 480px;
  background: linear-gradient(180deg, rgba(2,6,20,0.95), rgba(6,10,28,0.92));
  border-radius: 12px;
  border: 1px solid rgba(14,165,255,0.25);
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  z-index: 9999;
  overflow: hidden;
}
.dashboard-debug-panel.hidden { display: none; }

.debug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(14,165,255,0.15);
  background: rgba(2,6,20,0.5);
}
.debug-header h3 {
  margin: 0;
  font-size: 0.95rem;
  color: #7ff0ff;
  letter-spacing: 0.4px;
}
.debug-toggle-close {
  background: none;
  border: none;
  color: #9ff0ff;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
}
.debug-toggle-close:hover { color: #dffaff; }

.debug-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.debug-controls {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(14,165,255,0.1);
  background: rgba(6,10,28,0.3);
  font-size: 0.85rem;
}
.debug-controls label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #9ff0ff;
  cursor: pointer;
}
.debug-controls input[type="checkbox"] { cursor: pointer; }
.debug-controls button {
  padding: 4px 10px;
  background: rgba(14,165,255,0.2);
  border: 1px solid rgba(14,165,255,0.3);
  color: #9ff0ff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 150ms ease;
}
.debug-controls button:hover {
  background: rgba(14,165,255,0.35);
  border-color: rgba(14,165,255,0.5);
}

.debug-logs {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  color: #cfeeff;
  line-height: 1.4;
}
.debug-logs::-webkit-scrollbar { width: 6px; }
.debug-logs::-webkit-scrollbar-track { background: rgba(2,6,20,0.5); }
.debug-logs::-webkit-scrollbar-thumb { background: rgba(14,165,255,0.3); border-radius: 3px; }
.debug-logs::-webkit-scrollbar-thumb:hover { background: rgba(14,165,255,0.5); }

.debug-log-entry {
  margin-bottom: 8px;
  padding: 6px;
  border-left: 2px solid rgba(14,165,255,0.3);
  background: rgba(6,10,28,0.3);
  border-radius: 2px;
}
.debug-log-entry.success { border-left-color: #4ade80; }
.debug-log-entry.error { border-left-color: #ff4d4f; background: rgba(255,77,79,0.08); }
.debug-log-entry.warning { border-left-color: #ffb020; background: rgba(255,176,32,0.08); }
.debug-log-entry.info { border-left-color: #7ff0ff; }

.debug-log-time { color: #9ff0ff; font-weight: bold; }
.debug-log-status { font-weight: bold; margin: 0 4px; }
.debug-log-message { color: #dffaff; word-break: break-word; }

/* Dev Mode Footer Button */
.dashboard-dev-mode-footer {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(0, 246, 255, 0.1);
}

.dev-mode-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);
  border: 1px solid rgba(0, 246, 255, 0.3);
  border-radius: 6px;
  color: #00f6ff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 246, 255, 0.1);
}

.dev-mode-toggle-btn:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.35) 0%, rgba(6, 182, 212, 0.35) 100%);
  border-color: rgba(0, 246, 255, 0.6);
  box-shadow: 0 0 20px rgba(0, 246, 255, 0.25);
  transform: translateY(-2px);
}

.dev-mode-toggle-btn:active {
  transform: translateY(0);
}

.dev-icon {
  font-size: 1.1em;
  display: inline-block;
}

.dev-text {
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .dashboard-debug-btn { bottom: 10px; right: 10px; width: 40px; height: 40px; font-size: 1.2rem; }
  .dashboard-debug-panel { width: calc(100vw - 40px); bottom: 60px; right: 20px; max-height: 300px; }
  .dev-mode-toggle-btn { padding: 8px 14px; font-size: 0.85rem; }
}

/* Dev code/message box (futuristic green-ish) */
.dev-code-box {
    width: 100%;
    margin-top: 18px;
    background: linear-gradient(180deg, rgba(6,182,212,0.04) 0%, rgba(34,211,238,0.02) 60%, rgba(12,74,12,0.03) 100%);
    border: 1px solid rgba(34,197,94,0.14);
    box-shadow: 0 8px 30px rgba(6,182,212,0.06), inset 0 1px 0 rgba(255,255,255,0.02);
    border-radius: 10px;
    backdrop-filter: blur(6px) saturate(120%);
    padding: 12px;
    color: #c8ffd8;
}

.dev-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #e6ffed;
}

.dev-code-actions { display:flex; gap:8px; }
.dev-code-btn {
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.12);
    color: #bfffc8;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.dev-code-btn:hover { background: rgba(34,197,94,0.14); }

.dev-code-body {
    background: rgba(2,6,23,0.22);
    border-radius: 8px;
    padding: 10px;
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.45;
    color: #bfffc8;
    max-height: 180px;
    overflow: auto;
    border: 1px solid rgba(0,0,0,0.25);
}

.dev-code-body code { display:block; white-space: pre-wrap; }

@media (max-width: 900px) {
    .dev-code-body { max-height: 220px; font-size: 12px; }
}


/* Variable personnalisée pour décaler la section principal */

 :root {
    --main-offset-x: -250px;
    /* ← modifie ici pour décaler */
}


/* Conteneur parent centré */

.page,
body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.messaging-main {
    transform: scale(0.80);
    transform-origin: top center;
    width: calc(100% / 1);
    height: calc(100% / 1);
    /* centrage horizontal */
    margin-left: auto;
    margin-right: auto;
    /* décalage gauche/droite basé sur le centre */
    position: relative;
    left: var(--main-offset-x);
    /* ← Ajustement horizontal */
}


/* Évite un scroll horizontal inutile */

html,
body {
    overflow-x: hidden !important;
}


/* Mobile : désactivation pour éviter les problèmes d'affichage */

@media (max-width: 768px) {
    .page,
    body {
        display: block;
    }
    .messaging-main {
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        left: 0 !important;
        /* Pas de décalage sur mobile */
    }
}

/* === FUTURISTIC STATS BAR (ADDED) === */
.futuristic-stats-bar {
  display: flex;
  gap: 12px;
  padding: 10px;
  margin-bottom: 12px;
}
.futuristic-stats-bar .stat-box {
  background: rgba(0,255,255,0.08);
  border: 1px solid rgba(0,255,255,0.3);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
  color: #eaffff;
  box-shadow: 0 0 10px rgba(0,255,255,0.25);
}
.futuristic-stats-bar .stat-box span {
  font-weight: bold;
  margin-left: 6px;
}

/* === NEW FRIENDS FORM STABILITY CSS === */
#friends-form .friends-stats {
  display:flex;
  gap:10px;
  margin-bottom:10px;
}
#friends-form .friend-block {
  cursor:pointer;
  padding:6px;
}

/* === READ / UNREAD BUBBLES (PROPOSAL 3) === */
.bubble.unread {
  border-left: 3px solid cyan;
}
.bubble.read {
  opacity: 0.6;
}

/* === UNIVERSAL CHAT FORM VISIBILITY === */
.futuristic-chat-form {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 320px;
  height: 420px;
  background: rgba(0,0,0,0.85);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}
.chat-messages {
  flex:1;
  overflow-y:auto;
}


/* === CONVERSATION HEADER STRUCTURE (INJECTED – DO NOT REMOVE) === */
.conversation-header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.conversation-header-center {
  display: flex;
  justify-content: center;
}

.conversation-count {
  padding: 4px 12px;
  border-radius: 14px;
  background: rgba(0, 180, 255, 0.18);
  color: #00eaff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.35);
}

.conversation-header {
  overflow: visible;
  z-index: 2;
}


/* === SIDEBAR PANELS CORE (PHASE 2) === */
.sidebar-panel {
  position: fixed;
  top: 0;
  left: 72px;
  width: calc(100% - 72px);
  height: 100vh;
  z-index: 200;
}
.sidebar-panel-active { display: block !important; }


/* =====================================================
   CHAT.CSS — RESPONSABILITÉ ARRIÈRE-PLAN : QUADRILLAGE PUR
   -----------------------------------------------------
   Règle verrouillée : le même quadrillage est utilisé en mode ordinateur,
   mobile portrait et mobile paysage. Aucune media query ne doit changer
   la taille, l'attachement ou les couleurs du quadrillage.

   Ce fichier ne charge AUCUNE image d'arrière-plan.
   Le fichier unipay-page-background.css garde l'objet image, le stage,
   les images et les transitions.
===================================================== */

:root {
  --unipay-chat-grid-base: #03050a;
  --unipay-chat-grid-size: 30px;
  --unipay-chat-grid-line: rgba(0, 243, 255, 0.05);
  --unipay-chat-grid-depth: radial-gradient(circle at center, rgba(10, 20, 50, 0.4) 0%, #03050a 80%);
}

html,
body {
  margin: 0;
  overflow-x: hidden;
  background-color: var(--unipay-chat-grid-base);
}

/* Fallback si le conteneur global d'images n'est pas encore prêt.
   Pas de background-attachment: fixed ici : les navigateurs mobiles le
   traitent différemment, ce qui créait un rendu téléphone/ordinateur différent. */
body:not(.unipay-page-bg-ready) {
  background-image: none !important;
}

/* Quadrillage officiel quand #unipayPageBackgroundHost existe.
   La classe est dans l'objet global, mais le style reste ici pour garder la
   responsabilité du quadrillage dans chat.css. */
.unipay-page-bg-grid {
  display: none !important;
}

/* Sécurité : pas de second moteur d'images dans chat.css. */
body::before,
body::after {
  content: none !important;
  display: none !important;
}

/* Animation optionnelle pour rendre le quadrillage "vivant" */

@keyframes scanline {
    0% { transform: translateY(0); }
    100% { transform: translateY(100vh); }
}


/* ==========================================================================
   VARIABLES GLOBALES
   ========================================================================== */
:root {
  --up-bg-dark: #090b10;
  --up-glass-bg: rgba(16, 20, 31, 0.6);
  --up-glass-border: rgba(0, 242, 254, 0.15);
  --up-cyan-glow: #00f2fe;
  --up-purple-glow: #4facfe;
  --up-text-main: #ffffff;
  --up-text-muted: #8b9bb4;
  --up-success: #00ffaa;
  --transition-fast: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   CONTENEUR PRINCIPAL (Bords renforcés, côtés inchangés)
   ========================================================================== */
.unipay-smart-hub {
  font-family: 'Inter', system-ui, sans-serif;
  background: radial-gradient(circle at center, #101625, var(--up-bg-dark));
  color: var(--up-text-main);
  padding: 2.5rem;
  border-radius: 24px;
  /* Lignes de côté normales, haut et bas en surbrillance */
  border-left: 1px solid var(--up-glass-border);
  border-right: 1px solid var(--up-glass-border);
  border-top: 2px solid var(--up-cyan-glow);
  border-bottom: 2px solid var(--up-purple-glow);
  
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
  animation: hub-breathe 4s infinite alternate;
}

@keyframes hub-breathe {
  0% { box-shadow: 0 -10px 20px -10px rgba(0, 242, 254, 0.2), 0 10px 20px -10px rgba(79, 172, 254, 0.2); }
  100% { box-shadow: 0 -25px 40px -10px rgba(0, 242, 254, 0.6), 0 25px 40px -10px rgba(79, 172, 254, 0.6); }
}

/* ==========================================================================
   GRILLE DYNAMIQUE (Flex-Morphing)
   ========================================================================== */
.smart-grid {
  display: flex;
  flex-wrap: wrap; /* Permet de séparer la ligne du haut et du bas */
  gap: 1.5rem;
  position: relative;
  z-index: 1;
  justify-content: center;
}

/* ==========================================================================
   CARTES (Général et Coins en Surbrillance)
   ========================================================================== */
.smart-card {
  background: var(--up-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden; /* Empêche le texte de déborder lors du morphing */
}

/* Génération des coins lumineux renforcés */
.smart-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    /* Haut Gauche */
    linear-gradient(var(--up-cyan-glow), var(--up-cyan-glow)) top left / 20px 2px no-repeat,
    linear-gradient(var(--up-cyan-glow), var(--up-cyan-glow)) top left / 2px 20px no-repeat,
    /* Haut Droite */
    linear-gradient(var(--up-cyan-glow), var(--up-cyan-glow)) top right / 20px 2px no-repeat,
    linear-gradient(var(--up-cyan-glow), var(--up-cyan-glow)) top right / 2px 20px no-repeat,
    /* Bas Gauche */
    linear-gradient(var(--up-cyan-glow), var(--up-cyan-glow)) bottom left / 20px 2px no-repeat,
    linear-gradient(var(--up-cyan-glow), var(--up-cyan-glow)) bottom left / 2px 20px no-repeat,
    /* Bas Droite */
    linear-gradient(var(--up-cyan-glow), var(--up-cyan-glow)) bottom right / 20px 2px no-repeat,
    linear-gradient(var(--up-cyan-glow), var(--up-cyan-glow)) bottom right / 2px 20px no-repeat;
  animation: corner-flash 2.5s infinite alternate;
}

@keyframes corner-flash {
  0% { opacity: 0.4; filter: drop-shadow(0 0 2px var(--up-cyan-glow)); }
  100% { opacity: 1; filter: drop-shadow(0 0 15px var(--up-cyan-glow)); }
}

/* ==========================================================================
   PROFIL IA : CENTRE, DYNAMIQUE IMMERSIVE ET RIDEAU
   ========================================================================== */
.profile-ai-card {
  flex: 0 0 100%; /* Oblige la carte à prendre toute la largeur en haut */
  max-width: 600px; /* Garde une taille élégante au centre */
  margin: 0 auto 1rem auto;
  border-radius: 20px;
  background: rgba(16, 20, 31, 0.4);
  /* Effet d'ouverture de rideau */
  clip-path: inset(0 50% 0 50%); 
  animation: curtain-reveal 1.5s 0.5s cubic-bezier(0.8, 0, 0.2, 1) forwards;
}

@keyframes curtain-reveal {
  to { clip-path: inset(0 0% 0 0%); }
}

/* Onde dynamique périodique au milieu du profil */
.profile-ai-card::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.3) 0%, transparent 60%);
  border-radius: 50%;
  animation: immersive-pulse 4s infinite ease-in-out;
  z-index: 0;
  pointer-events: none;
}

@keyframes immersive-pulse {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.2; }
  50% { transform: translate(-50%, -50%) scale(2.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.2; }
}

/* Ajustement du contenu du profil pour être centré */
.smart-profile-line {
  display: flex;
  flex-direction: column; /* Avatar au-dessus du texte */
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  z-index: 1; /* Reste au-dessus de l'onde */
}

/* ==========================================================================
   LES 3 OBJETS DU BAS : VARIATION ALÉATOIRE DES LONGUEURS
   ========================================================================== */
/* On cible les 3 cartes en bas */
.smart-card:not(.profile-ai-card) {
  flex-basis: 0; /* Base à 0, la largeur sera gérée par le flex-grow */
  border-radius: 12px;
  min-width: 150px; /* Assure qu'ils ne disparaissent pas complètement */
  transition: flex-grow 2s ease-in-out;
}

/* Animation "aléatoire" des flex-grow sur la même ligne */
.smart-card:nth-of-type(2) {
  animation: morph-card-1 8s infinite alternate ease-in-out;
}
.smart-card:nth-of-type(3) {
  animation: morph-card-2 11s infinite alternate ease-in-out;
}
.smart-card:nth-of-type(4) {
  animation: morph-card-3 9s infinite alternate ease-in-out;
}

@keyframes morph-card-1 {
  0% { flex-grow: 1; background: rgba(16,20,31,0.6); }
  50% { flex-grow: 3; background: rgba(0,242,254,0.08); } /* Domine */
  100% { flex-grow: 1; background: rgba(16,20,31,0.6); }
}

@keyframes morph-card-2 {
  0% { flex-grow: 2; }
  33% { flex-grow: 1; background: rgba(16,20,31,0.6); }
  66% { flex-grow: 4; background: rgba(79,172,254,0.08); } /* Domine */
  100% { flex-grow: 2; }
}

@keyframes morph-card-3 {
  0% { flex-grow: 1.5; }
  50% { flex-grow: 1; background: rgba(16,20,31,0.6); }
  100% { flex-grow: 3.5; background: rgba(0,255,170,0.05); } /* Domine */
}

/* Raccourcir le texte pour éviter la casse pendant le morphing */
.smart-card p {
  white-space: nowrap;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

/* UNIPAY STATUS OLD DYNAMIC RESTORE */
/* CSS DYNAMIQUE : STATUS PULSE MORPHING 
  - Coins surbrillants renforcés
  - Guerre des largeurs asynchrones (7 slots)
  - Modal "Curtain Reveal" immersive
*/

.unipay-status-hub {
    --neon-cyan: #00f2fe;
    --neon-purple: #4facfe;
    --dark-void: #090b10;
    --glass: rgba(16, 20, 31, 0.8);
    
    padding: 2rem;
    background: var(--dark-void);
    border-top: 2px solid var(--neon-cyan);
    border-bottom: 2px solid var(--neon-purple);
    border-left: 1px solid rgba(0, 242, 254, 0.1);
    border-right: 1px solid rgba(0, 242, 254, 0.1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
}

/* Présentation compacte 2026-08-31 : géométrie seulement, moteur et animations préservés. */
#unipayStatusHub.unipay-status-hub {
  box-sizing: border-box;
  min-height: 0;
  height: auto;
  margin-block: clamp(.55rem, 1.2vw, 1rem);
  padding: clamp(.7rem, 1.35vw, 1.15rem);
  overflow: clip;
}
#unipayStatusHub .status-header {
  margin: 0 0 clamp(.5rem, 1vw, .85rem);
  gap: .65rem;
  align-items: center;
}
#unipayStatusHub .status-kicker { font-size: clamp(.62rem, .75vw, .75rem); letter-spacing: .12em; }
#unipayStatusHub .status-title { margin:.12rem 0 0; font-size:clamp(1.08rem, 1.7vw, 1.55rem); line-height:1.12; }
#unipayStatusHub .status-carousel-container { min-height:0; height:auto; margin:0; padding-block:clamp(.25rem,.7vw,.55rem); }
#unipayStatusHub .status-belt { min-height:0; height:auto; align-items:center; }
@media (max-width: 720px) {
  #unipayStatusHub.unipay-status-hub { margin-block:.4rem; padding:.62rem .5rem .68rem; border-radius:18px; }
  #unipayStatusHub .status-header { margin-bottom:.38rem; gap:.42rem; flex-wrap:wrap; }
  #unipayStatusHub .status-header > div:first-child { flex:1 1 100%; }
  #unipayStatusHub .status-title { font-size:1.04rem; max-width:28ch; }
  #unipayStatusHub .status-kicker { font-size:.58rem; }
  #unipayStatusHub .status-carousel-container { padding-block:.15rem; gap:.25rem; }
}

/* En-tête avec Pulse */
.status-header { margin-bottom: 2rem; }
.pulse-indicator {
    width: 10px; height: 10px; background: var(--neon-cyan);
    border-radius: 50%; display: inline-block; margin-right: 10px;
    box-shadow: 0 0 10px var(--neon-cyan);
    animation: pulse-ring 2s infinite;
}

/* LA CEINTURE DE STATUTS (7 SLOTS) */
.status-belt {
    display: flex;
    gap: 10px;
    height: 280px;
    align-items: stretch;
}

.status-slot-wrapper {
    flex: 1; /* Base égale */
    background: var(--glass);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* COINS SURBRILLANTS RENFORCÉS */
.status-slot-wrapper::before {
    content: ''; position: absolute; inset: 0;
    background: 
        linear-gradient(to right, var(--neon-cyan) 15px, transparent 15px) top left / 100% 2px no-repeat,
        linear-gradient(to bottom, var(--neon-cyan) 15px, transparent 15px) top left / 2px 100% no-repeat,
        linear-gradient(to left, var(--neon-purple) 15px, transparent 15px) bottom right / 100% 2px no-repeat,
        linear-gradient(to top, var(--neon-purple) 15px, transparent 15px) bottom right / 2px 100% no-repeat;
    opacity: 0.5; transition: 0.3s;
}

.status-slot-wrapper:hover::before { opacity: 1; filter: drop-shadow(0 0 5px var(--neon-cyan)); }

/* LA GUERRE DES LARGEURS (ANIMATIONS ALÉATOIRES DÉCALÉES) */
.status-slot-wrapper[data-slot="1"] { animation: morph-1 12s infinite ease-in-out; }
.status-slot-wrapper[data-slot="2"] { animation: morph-2 15s infinite ease-in-out; }
.status-slot-wrapper[data-slot="3"] { animation: morph-3 10s infinite ease-in-out; }
.status-slot-wrapper[data-slot="4"] { animation: morph-4 18s infinite ease-in-out; }
.status-slot-wrapper[data-slot="5"] { animation: morph-5 13s infinite ease-in-out; }
.status-slot-wrapper[data-slot="6"] { animation: morph-6 16s infinite ease-in-out; }
.status-slot-wrapper[data-slot="7"] { animation: morph-7 11s infinite ease-in-out; }

@keyframes morph-1 { 0%, 100% { flex-grow: 1; } 50% { flex-grow: 4; } }
@keyframes morph-2 { 0%, 100% { flex-grow: 2; } 30% { flex-grow: 0.5; } 70% { flex-grow: 3; } }
@keyframes morph-3 { 0%, 100% { flex-grow: 1; } 40% { flex-grow: 5; } }
/* ... (Les autres animations suivent la même logique de décalage) */

/* MODAL IMMERSIVE : EFFET RIDEAU */
.immersive-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}


.immersive-card {
    width: 90%; max-width: 6500px;
    background: var(--glass);
    border: 1px solid var(--neon-cyan);
    border-radius: 30px;
    position: relative;
    clip-path: inset(0 50% 0 50%); /* Départ rideau fermé */
    clip-path: inset(0 50% 0 50%); /* Départ rideau fermé */
    transition: clip-path 0.8s cubic-bezier(0.8, 0, 0.2, 1);
}

.immersive-overlay:not(.hidden) .immersive-card {
    clip-path: inset(0 0 0 0); /* Ouverture rideau */
}

/* ==========================================================================
   CSS CORE - MULTIMEDIA & PAGINATION UPDATE
   ========================================================================== */

/* En-tête Flexbox pour le bouton Sync */
.status-header {
    display: flex; justify-content: space-between; align-items: flex-end; width: 100%; margin-bottom: 2rem;
}
.header-left { display: flex; align-items: center; gap: 15px; }

/* BOUTON CYBER-SYNC */
.cyber-refresh-btn {
    position: relative; background: rgba(0, 242, 254, 0.05); border: 1px solid var(--up-neon-cyan);
    color: var(--up-neon-cyan); padding: 10px 25px; font-family: 'Inter', monospace;
    font-size: 0.9rem; font-weight: bold; letter-spacing: 2px; border-radius: 4px;
    cursor: pointer; overflow: hidden; transition: 0.3s; z-index: 5;
}
.cyber-refresh-btn .sync-icon { display: inline-block; transition: 0.5s; }
.cyber-refresh-btn:hover { background: rgba(0, 242, 254, 0.2); box-shadow: 0 0 20px rgba(0, 242, 254, 0.4); }
.cyber-refresh-btn:hover .sync-icon { transform: rotate(180deg); }
.cyber-refresh-btn:active { transform: scale(0.95); }

/* Ligne de balayage du bouton */
.cyber-lines { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--up-neon-purple); transform: translateX(-100%); transition: 0.3s; }
.cyber-refresh-btn:hover .cyber-lines { transform: translateX(0); }

/* CONTENEUR CARROUSEL & BOUTONS EXTRÊMES */
.status-carousel-container {
    display: flex; align-items: center; gap: 15px; position: relative; width: 100%;
}

/* Boutons de Navigation (Flèches) */
.nav-extreme-btn {
    flex-shrink: 0; width: 45px; height: 100px; background: rgba(16, 20, 31, 0.7);
    border: 1px solid rgba(0, 242, 254, 0.2); color: white; font-size: 2rem;
    cursor: pointer; position: relative; overflow: hidden; transition: 0.3s;
    display: flex; justify-content: center; align-items: center; backdrop-filter: blur(5px);
}
.nav-left { border-radius: 10px 0 0 10px; border-right: none; }
.nav-right { border-radius: 0 10px 10px 0; border-left: none; }

.nav-extreme-btn:hover:not(:disabled) { background: rgba(0, 242, 254, 0.15); border-color: var(--up-neon-cyan); box-shadow: 0 0 20px rgba(0, 242, 254, 0.3); }
.nav-extreme-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.nav-glow { position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, var(--up-neon-cyan) 0%, transparent 70%); transform: translate(-50%, -50%); opacity: 0; transition: 0.3s; pointer-events: none; }
.nav-extreme-btn:hover:not(:disabled) .nav-glow { width: 150px; height: 150px; opacity: 0.4; }

/* ==========================================================================
   COUCHES MULTIMÉDIAS DANS LES SLOTS
   ========================================================================== */
.status-belt { flex-grow: 1; /* Le tapis prend l'espace central */ }

/* Conteneur média générique pour la carte */
.media-layer {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; opacity: 0.6; transition: 0.5s;
}
.status-slot-wrapper:hover .media-layer { opacity: 0.9; transform: scale(1.05); }

/* Overlay pour assurer la lisibilité du texte par-dessus la vidéo */
.slot-overlay-gradient {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}

/* Indicateur de type de média (Icône Vidéo/Audio) */
.media-type-icon {
    position: absolute; top: 10px; right: 10px; z-index: 5;
    background: rgba(0,0,0,0.6); padding: 5px 8px; border-radius: 5px;
    font-size: 0.7rem; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(5px);
}

.slot-user-info { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin-top: auto; padding-bottom: 15px; }

/* Effet visuel pour les mémos vocaux (Audio) */
.audio-visualizer-wave {
    display: flex; gap: 3px; height: 20px; align-items: center; justify-content: center; z-index: 2; position: relative; margin-bottom: 10px;
}
.audio-bar { width: 4px; background: var(--up-neon-purple); border-radius: 2px; animation: sound-wave 1.2s infinite ease-in-out; }
.audio-bar:nth-child(2) { animation-delay: 0.2s; height: 15px; }
.audio-bar:nth-child(3) { animation-delay: 0.4s; height: 25px; }
.audio-bar:nth-child(4) { animation-delay: 0.1s; height: 10px; }

@keyframes sound-wave { 0%, 100% { transform: scaleY(0.5); opacity: 0.5; } 50% { transform: scaleY(1.5); opacity: 1; box-shadow: 0 0 8px var(--up-neon-purple); } }

/* ==========================================================================
   VIEWPORT MODAL (Player Vidéo/Audio immersif)
   ========================================================================== */
.modal-media-viewport {
    width: 100%; height: 250px; border-radius: 15px; overflow: hidden;
    position: relative; border: 2px solid rgba(0, 242, 254, 0.3); margin-bottom: 1.5rem;
    background: #000; box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.modal-media-viewport video, .modal-media-viewport img {
    width: 100%; height: 100%; object-fit: contain; background: #050505;
}
.audio-player-ui {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; background: radial-gradient(circle, #1a1a2e, #000); color: var(--up-neon-purple);
}
.audio-player-ui .huge-icon { font-size: 4rem; margin-bottom: 15px; text-shadow: 0 0 20px var(--up-neon-purple); animation: pulse-ring 2s infinite; }

.user-identity-plate { text-align: center; margin-bottom: 1.5rem; }
.status-badge { display: inline-block; font-size: 0.65rem; background: var(--up-neon-cyan); color: #000; padding: 2px 8px; border-radius: 10px; font-weight: bold; margin-top: 5px; }
.media-progress-bar { height: 2px; background: rgba(255,255,255,0.1); width: 100%; margin-top: 10px; }
#mediaPlaybackBar { height: 100%; width: 0%; background: var(--up-neon-cyan); transition: 0.1s linear; }
/* Force l'état masqué */
.immersive-overlay.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

/* Force l'état affiché lors du retrait de .hidden */
.immersive-overlay:not(.hidden) {
    display: flex ;
    opacity: 0.9;
    pointer-events: auto;
}
/* 1. Forcer la disparition réelle */
.hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 2. Permettre au clic de traverser l'overlay pour atteindre le slot */
.slot-overlay-gradient, 
.media-type-icon, 
.slot-loader,
.slot-user-info {
    pointer-events: none; 
}

/* 3. S'assurer que le slot est cliquable */
.status-slot-wrapper {
    pointer-events: auto !important;
    cursor: pointer;
}


/* ==========================================================================
   UNIPAY IMMERSIVE MODAL : CYBER-HUD DESIGN
   ========================================================================== */

/* --- 1. VARIABLES DE CONTRÔLE (Redimensionnez ici facilement) --- */
#statusImmersiveModal {
    --modal-width: 92vw;          /* Largeur relative pour mobile */
    --modal-max-width: 420px;     /* Largeur max sur PC */
    --modal-height: 85vh;         /* Hauteur relative */
    --modal-max-height: 800px;    /* Hauteur max sur PC */
    
    --neon-cyan: #00f2fe;
    --neon-purple: #4facfe;
    --glass-bg: rgba(5, 8, 15, 0.1); /* Transparence extrême */
    --glass-border: rgba(0, 242, 254, 0.2);
}

/* --- 2. CONTENEUR PRINCIPAL (La Carte) --- */
.immersive-card {
    position: relative;
    width: var(--modal-width);
    max-width: var(--modal-max-width);
    height: var(--modal-height);
    max-height: var(--modal-max-height);
    border-radius: 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    overflow: hidden; /* Coupe tout ce qui dépasse des 4 bords */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 242, 254, 0.1);
    backdrop-filter: blur(10px);
    
    /* Animation d'ouverture cybernétique */
    animation: unipay-modal-boot 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Ligne de scan radar animée sur la bordure */
.immersive-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(transparent, rgba(0, 242, 254, 0.3), transparent 30%);
    animation: radar-spin 4s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* --- 3. CONTENU MÉDIA (Forcé jusqu'aux 4 bords) --- */
.modal-media-viewport {
    position: absolute;
    inset: 0; /* Équivalent à top:0; bottom:0; left:0; right:0; */
    width: 100%;
    height: 100%;
    z-index: 0; /* Couche du fond */
    background: #000;
}

/* Le média couvre 100% de l'espace sans se déformer */
.modal-media-viewport img,
.modal-media-viewport video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Étend et recadre proprement */
    display: block;
}

/* Filtre assombrissant en bas et en haut pour lire le texte par-dessus l'image */
.modal-media-viewport::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 25%, transparent 60%, rgba(0,0,0,0.9) 100%);
    pointer-events: none;
}

/* --- 4. COUCHE D'INTERFACE (Transparente par-dessus le média) --- */
.immersive-body {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    pointer-events: none; /* Laisse le clic traverser vers la vidéo si besoin */
}

/* Réactive les clics sur les éléments interactifs */
.immersive-body > * {
    pointer-events: auto;
}

/* --- 5. BOUTON FERMER --- */
#closeImmersive {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    backdrop-filter: blur(8px);
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
}

#closeImmersive:hover {
    background: rgba(0, 242, 254, 0.2);
    box-shadow: 0 0 20px var(--neon-cyan);
    transform: rotate(90deg) scale(1.1);
}

/* Construire la croix avec ::before / ::after */
#closeImmersive .cross-line {
    position: absolute;
    width: 16px;
    height: 2px;
    background: currentColor;
}
#closeImmersive .cross-line:first-child { transform: rotate(45deg); }
#closeImmersive .cross-line:last-child { transform: rotate(-45deg); }


/* --- 6. PLAQUE D'IDENTITÉ UTILISATEUR --- */
.user-identity-plate {
    margin-top: auto; /* Pousse ce bloc tout en bas, juste au-dessus des boutons */
    padding: 20px;
    text-align: left;
}

.neon-text {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    letter-spacing: 1px;
    text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px rgba(0,0,0,0.8);
}

.status-badge {
    display: inline-block;
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: bold;
    letter-spacing: 2px;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
}

/* --- 7. GRILLE D'ACTIONS (Boutons totalement transparents) --- */
.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 20px 30px 20px; /* 30px en bas pour laisser place au footer */
}

.action-item {
    background: rgba(255, 255, 255, 0.05); /* Transparence totale */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    color: #ffffff;
    padding: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    backdrop-filter: blur(12px); /* Effet verre dépoli */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.action-item:hover {
    background: rgba(0, 242, 254, 0.15);
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.3);
    transform: translateY(-3px);
}

.action-icon {
    font-size: 1.2rem;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
}

/* --- 8. FOOTER ET BARRE DE PROGRESSION --- */
.immersive-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
}

.security-tag {
    text-align: center;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 3px;
    margin-bottom: 6px;
    font-family: monospace;
}

.media-progress-bar {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
}

#mediaPlaybackBar {
    height: 100%;
    width: 0%; /* Piloté par le JS */
    background: var(--neon-cyan);
    box-shadow: 0 0 12px var(--neon-cyan);
    transition: width 0.1s linear;
}

/* --- 9. ANIMATIONS CLÉS --- */
@keyframes unipay-modal-boot {
    0% { transform: scale(0.95) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes radar-spin {
    100% { transform: rotate(360deg); }
}

/* Complément: l'archive ancienne déclarait les slots 4 à 7 sans keyframes explicites. */
@keyframes morph-4 { 0%, 100% { flex-grow: 1.2; } 35% { flex-grow: 3.8; } 72% { flex-grow: 0.8; } }
@keyframes morph-5 { 0%, 100% { flex-grow: 2.2; } 45% { flex-grow: 0.7; } 78% { flex-grow: 4.2; } }
@keyframes morph-6 { 0%, 100% { flex-grow: 1; } 28% { flex-grow: 2.8; } 66% { flex-grow: 1.4; } }
@keyframes morph-7 { 0%, 100% { flex-grow: 1.6; } 42% { flex-grow: 4.8; } 74% { flex-grow: 0.9; } }

/* UNIPAY SMART HUB RESTORE - scoped from the stable status archive. */
#unipaySmartHub .smart-kicker {
    color: #00f2fe;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.75rem;
    font-weight: 800;
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.6);
    animation: unipay-text-pulse 2s infinite alternate;
    display: inline-block;
}

#unipaySmartHub h3 {
    color: #ffffff;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

#unipaySmartHub .smart-card-title {
    color: #8b9bb4;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(0, 242, 254, 0.2);
    padding-bottom: 8px;
    margin-bottom: 12px;
    position: relative;
}

#unipaySmartHub .smart-card-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 30px;
    height: 1px;
    background: #00f2fe;
    box-shadow: 0 0 5px #00f2fe;
}

#unipaySmartHub button {
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none;
}

#unipaySmartHub .smart-btn,
#unipaySmartHub #smartSearchBtn {
    background: rgba(0, 242, 254, 0.05);
    border: 1px solid #00f2fe;
    color: #00f2fe;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 10px 24px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.1);
    position: relative;
    overflow: hidden;
}

#unipaySmartHub .smart-btn:hover,
#unipaySmartHub #smartSearchBtn:hover {
    background: #00f2fe;
    color: #090b10;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.6), 0 0 40px rgba(0, 242, 254, 0.2);
    transform: translateY(-2px) scale(1.02);
}

#unipaySmartHub .smart-mini-btn {
    background: transparent;
    border: 1px solid rgba(79, 172, 254, 0.4);
    color: #4facfe;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
}

#unipaySmartHub .smart-mini-btn:hover {
    background: rgba(79, 172, 254, 0.15);
    border-color: #00f2fe;
    color: #00f2fe;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
}

#unipaySmartHub .smart-search-panel {
    display: flex;
    gap: 15px;
}

#unipaySmartHub #smartSearchInput {
    flex-grow: 1;
    background: rgba(9, 11, 16, 0.6);
    border: 1px solid rgba(79, 172, 254, 0.2);
    border-bottom: 2px solid #4facfe;
    color: #ffffff;
    padding: 14px 20px;
    font-size: 1rem;
    border-radius: 6px 6px 0 0;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
    font-family: inherit;
}

#unipaySmartHub #smartSearchInput:focus {
    background: rgba(16, 20, 31, 0.9);
    border-color: rgba(0, 242, 254, 0.5);
    border-bottom: 2px solid #00f2fe;
    box-shadow: inset 0 2px 15px rgba(0, 242, 254, 0.1), 0 10px 20px -10px rgba(0, 242, 254, 0.3);
}

#unipaySmartHub #smartSearchInput::placeholder {
    color: rgba(139, 155, 180, 0.5);
    font-style: italic;
    letter-spacing: 0.5px;
}

@keyframes unipay-text-pulse {
    0% {
        opacity: 0.8;
        text-shadow: 0 0 4px rgba(0, 242, 254, 0.4);
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 15px rgba(0, 242, 254, 0.9), 0 0 25px rgba(79, 172, 254, 0.5);
    }
}


.pro-account-feedback-modal{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:clamp(16px,4vw,40px);background:rgba(2,8,23,.82);backdrop-filter:blur(12px)}
.pro-account-feedback-modal.hidden{display:none!important}
.pro-account-feedback-card{width:min(560px,100%);max-height:min(82vh,620px);overflow:auto;padding:clamp(22px,5vw,34px);border:1px solid rgba(56,189,248,.45);border-radius:24px;background:linear-gradient(145deg,rgba(15,23,42,.98),rgba(8,47,73,.97));box-shadow:0 28px 90px rgba(0,0,0,.6);color:#f8fafc}
.pro-account-feedback-kicker{display:block;margin-bottom:10px;color:#67e8f9;font-size:.72rem;font-weight:800;letter-spacing:.14em}
.pro-account-feedback-card h2{margin:0 0 12px;font-size:clamp(1.25rem,4vw,1.75rem)}
.pro-account-feedback-card p{margin:0;line-height:1.65;color:#dbeafe;overflow-wrap:anywhere}
.pro-account-feedback-actions{display:flex;justify-content:flex-end;margin-top:24px}
.pro-account-feedback-actions button{min-height:46px;padding:11px 18px;border:0;border-radius:14px;background:linear-gradient(135deg,#22d3ee,#2563eb);color:#fff;font-weight:800;cursor:pointer}
@media(max-width:560px){.pro-account-feedback-modal{align-items:end;padding:12px}.pro-account-feedback-card{border-radius:22px 22px 16px 16px;max-height:74vh}.pro-account-feedback-actions button{width:100%}}