/* =====================================================================
   NEXION — feuille de style
   Thème sombre / futuriste. Toutes les classes existantes sont
   conservées à l'identique pour rester compatibles avec le HTML et le
   JavaScript déjà en place — seule l'apparence change.
   ===================================================================== */

/* ===================== TOKENS ===================== */
:root{
  --bg: #090d15;
  --bg-alt: #0d1320;
  --panel: #121a2a;
  --panel-2: #17213380;
  --panel-solid: #17213a;
  --border: #22304a;
  --border-soft: #1a2438;
  --cyan: #4ee1ff;
  --cyan-dim: #2fb8d9;
  --violet: #8b6bff;
  --text: #eef1f8;
  --text-dim: #9aa7c2;
  --text-faint: #5c6b87;
  --danger: #ff6b7a;
  --success: #4eeba0;
  --warning: #ffbe50;

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 50px rgba(78,225,255,0.10);
  --shadow-focus: 0 0 0 3px rgba(78,225,255,0.18);

  --ease: cubic-bezier(.4,0,.2,1);
  --fast: .15s var(--ease);
  --normal: .25s var(--ease);
}

/* ===================== RESET / BASE ===================== */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3{ font-family: var(--font-display); margin:0; letter-spacing: -0.01em; }
p{ margin:0; }
a{ color: var(--cyan); text-decoration: none; transition: color var(--fast); }
a:hover{ color:#fff; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
input, textarea{ font-family: inherit; }
img{ max-width:100%; display:block; }
hr{ border:none; }

::selection{ background: var(--violet); color: #fff; }

:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

/* Défilement discret et cohérent avec le thème (navigateurs WebKit) */
*::-webkit-scrollbar{ width: 9px; height: 9px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover{ background: var(--cyan-dim); }

/* Le sélecteur natif [hidden] a une spécificité trop faible face à des
   classes qui posent display:flex — on le renforce pour que hidden=true
   masque vraiment l'élément (corrige le chevauchement chat vide/actif). */
[hidden]{ display: none !important; }

/* ===================== LAYOUT / VIEWS ===================== */
.view{ display:none; }
.view.is-visible{ display:block; animation: fadeIn var(--normal); }
.view--center.is-visible{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:40px 20px; }
.view--app.is-visible{ display:block; }

@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform:none; } }

/* ===================== TOPBAR ===================== */
.topbar{
  position: sticky; top:0; z-index: 50;
  background: rgba(9,13,21,0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
}
.topbar.is-hidden{ display:none; }
.topbar__inner{
  max-width: 1120px; margin:0 auto; padding: 16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand__mark{
  width:22px; height:22px; border-radius:6px;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  box-shadow: 0 0 18px rgba(78,225,255,0.55);
  transition: transform var(--fast);
}
.brand:hover .brand__mark{ transform: scale(1.08) rotate(-4deg); }
.brand__name{ font-family: var(--font-display); font-weight:600; font-size:1.18rem; letter-spacing: 0.01em; color: var(--text); }
.topbar__links{ display:flex; align-items:center; gap:18px; flex-wrap: wrap; }
.topbar__links.is-hidden{ display:none; }
.topbar__links a{ color: var(--text-dim); font-size:0.92rem; }
.topbar__links a:hover{ color: var(--text); }

/* ===================== MENU HAMBURGER (mobile) ===================== */
.hamburger{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:38px; height:38px; background:transparent; border:1px solid var(--border); border-radius: var(--radius-sm);
  flex-shrink:0; transition: border-color var(--fast), background var(--fast);
}
.hamburger span{ width:16px; height:2px; background: var(--text); border-radius:2px; transition: transform var(--fast), opacity var(--fast); }
.hamburger:hover{ border-color: var(--cyan); background: rgba(78,225,255,0.06); }
.hamburger.is-hidden{ display:none !important; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 640px){
  .hamburger{ display:flex; }
  .topbar__links{
    position:absolute; top:100%; left:0; right:0; z-index:49;
    flex-direction:column; align-items:stretch; gap:14px;
    background: var(--panel-solid); border-bottom:1px solid var(--border);
    padding: 0 20px; max-height:0; overflow:hidden; opacity:0;
    transition: max-height var(--normal), opacity var(--normal), padding var(--normal);
  }
  .topbar__links.is-open{ max-height:260px; opacity:1; padding: 18px 20px 22px; }
  .topbar__links a{ font-size:1rem; }
}

/* ===================== BUTTONS ===================== */
.btn{
  border-radius: var(--radius-sm); border: 1px solid transparent;
  padding: 10px 18px; font-size:0.92rem; font-weight:600;
  transition: transform var(--fast), background var(--fast), border-color var(--fast), box-shadow var(--fast), color var(--fast);
  white-space: nowrap;
}
.btn:active{ transform: scale(0.97); }
.btn--primary{
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  color:#08101c; box-shadow: 0 4px 16px rgba(78,225,255,0.18);
}
.btn--primary:hover{ filter: brightness(1.08); box-shadow: 0 6px 20px rgba(78,225,255,0.28); }
.btn--ghost{ background: transparent; border-color: var(--border); color: var(--text); }
.btn--ghost:hover{ border-color: var(--cyan); background: rgba(78,225,255,0.06); }
.btn--outline{ background: transparent; border-color: var(--border); color: var(--text-dim); }
.btn--outline:hover{ border-color: var(--cyan); color: var(--text); background: rgba(78,225,255,0.05); }
.btn--lg{ padding: 14px 28px; font-size: 1rem; border-radius: var(--radius-sm); }
.btn--block{ width:100%; }
.btn--approve{ background: rgba(78,235,160,0.12); border:1px solid var(--success); color: var(--success); }
.btn--approve:hover{ background: rgba(78,235,160,0.2); }
.btn--reject{ background: rgba(255,107,122,0.12); border:1px solid var(--danger); color: var(--danger); }
.btn--reject:hover{ background: rgba(255,107,122,0.2); }
.btn--danger{ background: rgba(255,107,122,0.12); border:1px solid var(--danger); color: var(--danger); }
.btn--danger:hover{ background: rgba(255,107,122,0.22); }
.btn--view{ background: transparent; border:1px solid var(--cyan); color: var(--cyan); }
.btn--view:hover{ background: rgba(78,225,255,0.08); }

/* ===================== HERO ===================== */
.hero{
  position: relative; overflow:hidden;
  padding: 130px 24px 100px;
  background:
    radial-gradient(ellipse 700px 420px at 15% -10%, rgba(78,225,255,0.14), transparent 60%),
    radial-gradient(ellipse 600px 500px at 100% 10%, rgba(139,107,255,0.14), transparent 55%),
    var(--bg);
}
.hero__scan{
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}
.hero__content{ max-width: 760px; margin: 0 auto; text-align:center; position:relative; }
.hero__kicker{
  display:inline-block; color: var(--cyan); font-size: 0.8rem; letter-spacing: 0.06em; font-weight:600;
  text-transform: uppercase; margin-bottom: 20px; padding: 6px 14px; border-radius: 999px;
  background: rgba(78,225,255,0.08); border: 1px solid rgba(78,225,255,0.25);
}
.hero__title{ font-size: clamp(2.3rem, 5.2vw, 3.6rem); line-height:1.12; color:#fff; margin-bottom: 24px; }
.hero__lead{ color: var(--text-dim); font-size: 1.08rem; max-width: 560px; margin: 0 auto 36px; }
.hero__actions{ display:flex; gap: 14px; justify-content:center; flex-wrap: wrap; }

/* ===================== SECTIONS ===================== */
.section{ padding: 88px 24px; }
.section--alt{ background: var(--bg-alt); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
.section__inner{ max-width: 1120px; margin:0 auto; }
.section__inner--split{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items:start; }
.section__title{ font-size: 1.9rem; color:#fff; margin-bottom: 22px; }
.section__text{ color: var(--text-dim); margin-bottom: 16px; max-width: 60ch; }

.fact-list{ display:flex; flex-direction:column; gap: 18px; }
.fact-list li{ display:flex; align-items:center; gap:16px; color: var(--text); font-size:0.98rem; border-bottom: 1px solid var(--border-soft); padding-bottom: 16px; }
.fact-list__num{ font-family: var(--font-display); color: var(--violet); font-size:0.85rem; }

.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.step{
  background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); padding: 28px;
  transition: transform var(--normal), border-color var(--normal), box-shadow var(--normal);
}
.step:hover{ transform: translateY(-4px); border-color: rgba(78,225,255,0.35); box-shadow: var(--shadow-md); }
.step__index{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background: rgba(78,225,255,0.1); color: var(--cyan);
  font-family: var(--font-display); font-weight:600; margin-bottom:16px;
}
.step h3{ font-size: 1.08rem; margin-bottom: 8px; color:#fff; }
.step p{ color: var(--text-dim); font-size: 0.92rem; }

.footer{ text-align:center; padding: 34px; color: var(--text-faint); font-size: 0.85rem; border-top:1px solid var(--border-soft); }

/* ===================== MODALS ===================== */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background: rgba(4,6,12,0.72); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; padding: 20px;
  opacity:0; visibility:hidden; transition: opacity var(--normal), visibility var(--normal);
}
.modal-overlay.is-visible{ opacity:1; visibility:visible; }
.modal{
  position:relative; width:100%; max-width: 420px; max-height: 88vh; overflow-y:auto;
  background: var(--panel-solid); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 36px 32px; box-shadow: var(--shadow-md), var(--shadow-glow);
  transform: translateY(10px) scale(0.98); transition: transform var(--normal);
}
.modal-overlay.is-visible .modal{ transform: translateY(0) scale(1); }
.modal--wide{ max-width: 580px; }
.modal__title{ font-size:1.45rem; color:#fff; margin-bottom: 26px; }
.modal__close{
  position:absolute; top:16px; right:16px; background:none; border:none;
  color: var(--text-faint); font-size: 1.5rem; line-height:1; width:32px; height:32px;
  border-radius: 50%; display:flex; align-items:center; justify-content:center;
  transition: background var(--fast), color var(--fast);
}
.modal__close:hover{ color: var(--text); background: var(--panel-2); }

/* ===================== FORMS ===================== */
.form{ display:flex; flex-direction:column; gap: 18px; }
.form__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field{ display:flex; flex-direction:column; gap:7px; font-size:0.85rem; color: var(--text-dim); font-weight:500; }
.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field input[type="date"],
.field textarea{
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; color: var(--text); font-size: 0.95rem; font-weight:400;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--text-faint); }
.field input:focus, .field textarea:focus{
  outline: none; border-color: var(--cyan); box-shadow: var(--shadow-focus);
}
.field textarea{ resize: vertical; line-height:1.5; }
.field--checkbox{ flex-direction:row; align-items:center; gap:10px; color: var(--text); font-weight:400; }
.field--checkbox input{ width:17px; height:17px; accent-color: var(--cyan); cursor:pointer; }
.field input[type="file"]{ color: var(--text-dim); font-size: 0.85rem; }
.field input[type="file"]::file-selector-button{
  background: var(--panel-2); color: var(--text); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 12px; margin-right: 10px; cursor:pointer; transition: border-color var(--fast);
}
.field input[type="file"]::file-selector-button:hover{ border-color: var(--cyan); }
.field__hint{ font-size: 0.78rem; color: var(--text-faint); }
.field__hint-inline{ font-weight:400; color: var(--text-faint); font-size:0.78rem; }
.form__error{ color: var(--danger); font-size: 0.85rem; min-height: 1em; font-weight:500; }
.form__success{ color: var(--success); font-size: 0.85rem; min-height: 1em; font-weight:500; }
.form__switch{ text-align:center; font-size: 0.88rem; color: var(--text-dim); }

@media (max-width: 520px){
  .form__grid{ grid-template-columns: 1fr; }
}

/* ===================== PENDING VIEW ===================== */
.pending-card{
  max-width: 460px; width:100%; background: var(--panel); border:1px solid var(--border);
  border-radius: var(--radius-lg); padding: 44px 36px; text-align:center; box-shadow: var(--shadow-md);
}
.pending-card__icon{ font-size: 2.4rem; margin-bottom: 16px; }
.pending-card h2{ color:#fff; font-size:1.45rem; margin-bottom: 14px; }
.pending-card p{ color: var(--text-dim); margin-bottom: 24px; font-size: 0.95rem; }
.pending-card .form{ text-align:left; }

/* ===================== APP (DASHBOARD) ===================== */
.app{ display:flex; height:100vh; height:100dvh; }
.app__sidebar{
  width: 300px; flex-shrink:0; background: var(--panel);
  border-right: 1px solid var(--border-soft); display:flex; flex-direction:column; padding: 20px;
}
.app__user{
  display:flex; align-items:center; gap:12px; padding: 10px; border-radius: var(--radius-sm);
  border-bottom:1px solid var(--border-soft); margin-bottom: 18px; padding-bottom: 20px;
  transition: background var(--fast);
}
.app__user:hover{ background: var(--panel-2); }
.avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#08101c;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.avatar--admin{ background: linear-gradient(135deg, var(--violet), #ff6b7a); }
.app__user-name{ font-weight:600; font-size:0.94rem; color:#fff; }
.app__user-tag{ font-size:0.78rem; color: var(--success); display:flex; align-items:center; gap:5px; }
.app__user-tag::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--success); box-shadow: 0 0 6px var(--success); }
.icon-btn{
  margin-left:auto; background: transparent; border:1px solid var(--border); border-radius:var(--radius-sm);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color: var(--text-dim); font-size:1rem; transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.icon-btn:hover{ border-color: var(--danger); color: var(--danger); background: rgba(255,107,122,0.08); }

/* Bouton de déconnexion en texte plutôt qu'un glyphe (⏻ ne s'affiche
   pas de façon fiable sur toutes les polices système mobiles). */
.btn--logout{
  margin-left:auto; flex-shrink:0; padding: 8px 14px; font-size:0.82rem;
}
.btn--logout:hover{ border-color: var(--danger); color: var(--danger); background: rgba(255,107,122,0.08); }

/* Bouton retour dans l'en-tête du chat : uniquement utile sur mobile,
   quand la liste des conversations et le chat ne sont pas côte à côte. */
.chat__back{ display:none; margin-right:6px; }
.app__section-label{ font-size: 0.74rem; text-transform: uppercase; letter-spacing:0.07em; font-weight:600; color: var(--text-faint); margin: 18px 0 10px 4px; }

#btn-open-search{ margin-top:2px; }

.conv-list{ display:flex; flex-direction:column; gap: 3px; overflow-y:auto; flex:1; }
.conv-item{
  display:flex; align-items:center; gap:10px; padding: 11px 10px; border-radius:var(--radius-sm);
  color: var(--text-dim); font-size:0.9rem; cursor:pointer; position:relative;
  transition: background var(--fast), color var(--fast);
}
.conv-item:hover{ background: var(--panel-2); }
.conv-item.active{ background: rgba(78,225,255,0.10); color: var(--text); }
.conv-item.active::before{
  content:""; position:absolute; left:-6px; top:50%; transform: translateY(-50%);
  width:3px; height:60%; border-radius:2px; background: linear-gradient(180deg, var(--cyan), var(--violet));
}
.conv-item__meta{ display:flex; flex-direction:column; overflow:hidden; flex:1; min-width:0; gap:1px; }
.conv-item__name{ font-weight:600; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-item__preview{ font-size:0.78rem; color: var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.badge{ background: var(--violet); color:#fff; font-size:0.72rem; border-radius: 10px; padding: 1px 8px; margin-left:auto; font-weight:600; }

.app__chat{ flex:1; display:flex; flex-direction:column; background: var(--bg); overflow:hidden; position:relative; }
.chat__empty{ flex:1; display:flex; align-items:center; justify-content:center; color: var(--text-faint); font-size:0.95rem; text-align:center; padding:0 40px; }
.chat__active{ flex:1; display:flex; flex-direction:column; min-height:0; }
.chat__header{
  padding: 18px 26px; border-bottom:1px solid var(--border-soft); font-weight:600; color:#fff;
  background: rgba(255,255,255,0.015);
}
.chat__messages{ flex:1; overflow-y:auto; padding: 22px 26px; display:flex; flex-direction:column; gap: 12px; }

.msg{ max-width: 62%; padding: 11px 15px; border-radius: var(--radius); font-size: 0.92rem; line-height:1.45; box-shadow: var(--shadow-sm); }
.msg--in{ align-self:flex-start; background: var(--panel); color: var(--text); border-bottom-left-radius: 4px; }
.msg--out{ align-self:flex-end; background: linear-gradient(135deg, var(--cyan), var(--violet)); color:#08101c; border-bottom-right-radius: 4px; }
.msg img, .msg video{ max-width: 240px; border-radius: var(--radius-sm); display:block; }
.msg time{ display:block; font-size:0.68rem; opacity:0.65; margin-top: 5px; }
.msg__sender{ font-size:0.7rem; color: var(--violet); margin-bottom:3px; font-weight:600; }

.chat__composer{ display:flex; align-items:center; gap: 10px; padding: 16px 26px; border-top:1px solid var(--border-soft); }
.chat__composer input[type="text"]{
  flex:1; background: var(--panel); border:1px solid var(--border); border-radius: 999px;
  padding: 12px 18px; color: var(--text); font-size:0.92rem; transition: border-color var(--fast), box-shadow var(--fast);
}
.chat__composer input[type="text"]:focus{ outline:none; border-color: var(--cyan); box-shadow: var(--shadow-focus); }
.icon-btn--attach{ margin-left:0; cursor:pointer; }
.icon-btn--attach:hover{ border-color: var(--cyan); color: var(--cyan); background: rgba(78,225,255,0.08); }

/* ===================== ADMIN ===================== */
.app__chat--admin{ padding: 32px 36px; overflow-y:auto; }
.admin-panel__title{ color:#fff; font-size:1.45rem; margin-bottom: 24px; }
.admin-cards{ display:flex; flex-direction:column; gap: 14px; }
.admin-card{
  background: var(--panel); border:1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; display:flex; align-items:flex-start; gap: 16px; flex-wrap: wrap;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.admin-card:hover{ border-color: var(--border); box-shadow: var(--shadow-sm); }
.admin-card__info{ flex:1; min-width:220px; }
.admin-card__info p{ margin-bottom: 5px; font-size: 0.88rem; color: var(--text-dim); }
.admin-card__info p strong{ color:#fff; }
.admin-card__actions{ display:flex; gap:10px; flex-shrink:0; flex-wrap: wrap; justify-content:flex-end; }
.admin-card__actions .btn{ padding: 8px 14px; font-size:0.82rem; }
.status-tag{ font-size: 0.72rem; padding: 3px 10px; border-radius: 999px; display:inline-block; margin-left: 8px; font-weight:600; }
.status-tag--pending{ background: rgba(255,190,80,0.15); color: var(--warning); }
.status-tag--approved{ background: rgba(78,235,160,0.15); color: var(--success); }
.status-tag--blocked{ background: rgba(255,107,122,0.15); color: var(--danger); }
.empty-note{ color: var(--text-faint); font-size:0.9rem; padding: 6px 2px; }

.admin-conv-columns{ display:flex; flex-direction:column; gap: 26px; }
.admin-conv-block{ background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.admin-conv-block h3{ font-size: 0.95rem; color:#fff; margin-bottom: 12px; }
.admin-conv-block .chat__messages{ padding:0; max-height: 260px; }

/* ===================== NAVIGATION ADMIN PAR NIVEAUX ===================== */
.admin-back{ margin-bottom: 22px; }
.admin-back::before{ content:""; }
.conv-list--admin .conv-item{ cursor:pointer; }
.admin-panel--chat{ display:flex; flex-direction:column; height:100%; padding:0; margin: -32px -36px; }
.admin-panel--chat .admin-back{ margin: 20px 26px 0; align-self:flex-start; }
.admin-panel--chat .chat__header{ margin-top: 6px; }

/* ===================== PROFIL ===================== */
.app__user{ cursor: pointer; }
.app__user .icon-btn{ cursor: default; }
.profile-avatar-row{ display:flex; align-items:center; gap:18px; margin-bottom: 4px; }
.avatar--lg{ width:68px; height:68px; font-size:1.4rem; }
.avatar img, .avatar--lg img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }

/* ===================== RECHERCHE ===================== */
.search-input{
  width:100%; background: var(--bg-alt); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 15px; color: var(--text); font-size:0.95rem; margin-bottom: 18px;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.search-input:focus{ outline:none; border-color: var(--cyan); box-shadow: var(--shadow-focus); }
.search-results{ display:flex; flex-direction:column; gap: 10px; max-height: 360px; overflow-y:auto; }
.search-result{
  display:flex; align-items:center; gap:14px; padding: 13px 15px;
  background: var(--panel); border:1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color var(--fast);
}
.search-result:hover{ border-color: rgba(78,225,255,0.3); }
.search-result--pinned{ border-color: rgba(139,107,255,0.4); background: rgba(139,107,255,0.06); }
.search-result__info{ flex:1; min-width:0; }
.search-result__checkbox{ width:18px; height:18px; accent-color: var(--cyan); cursor:pointer; flex-shrink:0; }

/* ===================== ONGLETS RECHERCHE / GROUPE ===================== */
.search-mode-tabs{ display:flex; gap:8px; margin-bottom:18px; }
.search-mode-tab{
  flex:1; padding:9px 14px; border-radius: var(--radius-sm); border:1px solid var(--border);
  background: transparent; color: var(--text-dim); font-size:0.85rem; font-weight:600;
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.search-mode-tab.active{ border-color: var(--cyan); color: var(--text); background: rgba(78,225,255,0.08); }
.avatar--group{ background: linear-gradient(135deg, var(--violet), var(--cyan)); }
.search-result__name{ font-weight:600; color:#fff; font-size:0.92rem; }
.search-result__desc{ font-size:0.8rem; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===================== PAGINATION MESSAGES ===================== */
.btn--load-more{ align-self:center; margin-bottom: 16px; font-size:0.82rem; padding: 8px 18px; }

/* ===================== INDICATEUR NON LU ===================== */
.unread-dot{
  width:9px; height:9px; border-radius:50%; background: var(--cyan); flex-shrink:0;
  box-shadow: 0 0 6px rgba(78,225,255,0.7); animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.5; } }

/* ===================== RECHERCHE ADMIN ===================== */
.admin-search-results{ margin-bottom: 24px; }
.admin-search__subtitle{ font-size:0.95rem; color: var(--text-dim); margin: 18px 0 10px; font-weight:600; }
.admin-search__subtitle:first-child{ margin-top:0; }
.admin-card--message{ cursor:pointer; }
.admin-card--message:hover{ border-color: var(--cyan); }

/* ===================== ADMIN : ACTIONS SUR UN COMPTE ===================== */
.modal__subtitle{ color: var(--text-dim); font-size:0.88rem; margin: -12px 0 22px; }

/* ===================== FICHE UTILISATEUR (ADMIN) ===================== */
.record-header{ display:flex; align-items:center; gap:18px; margin-bottom:24px; }
.record-header__ref{ font-family: var(--font-display); color:#fff; font-size:1.02rem; margin-bottom:7px; }
.record-header__identifiant{ color: var(--text-dim); font-size:0.85rem; margin-bottom:7px; }
.record-header__identifiant strong{ color: var(--text); }
.record-header__status{ margin:0; }
.record-divider{ border-top:1px solid var(--border-soft); margin: 28px 0 22px; }
.record-section__title{ font-size:1.02rem; color:#fff; margin-bottom:16px; }
.record-status-desc{ color: var(--text-dim); font-size:0.88rem; margin-bottom:16px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 860px){
  .section__inner--split, .steps{ grid-template-columns: 1fr; }
  .app{ flex-direction: column; height:auto; min-height:100vh; min-height:100dvh; }
  .app__sidebar{ width:100%; border-right:none; border-bottom:1px solid var(--border-soft); max-height: 46vh; }
  .app__chat{ min-height: 54vh; }
  .admin-panel--chat{ margin: -32px -20px; }

  /* Dashboard utilisateur : un seul panneau plein écran à la fois sur
     mobile — d'abord la liste des conversations, puis le chat en entier
     une fois une conversation ouverte — pour ne pas encombrer l'écran
     et garder la zone de saisie toujours visible en bas. */
  #dashboard-app{ height:100vh; height:100dvh; min-height:0; overflow:hidden; }
  #dashboard-app .app__sidebar{ width:100%; max-height:none; height:100%; border-bottom:none; }
  #dashboard-app .app__chat{ display:none; min-height:0; height:100%; }
  #dashboard-app.is-chat-active .app__sidebar{ display:none; }
  #dashboard-app.is-chat-active .app__chat{ display:flex; }
  .chat__back{ display:flex; }
}

@media (max-width: 640px){
  .topbar__inner{ padding: 14px 18px; }
  .topbar__links{ gap:12px; }
  .hero{ padding: 100px 18px 70px; }
  .section{ padding: 60px 18px; }
  .modal{ padding: 28px 22px; }
  .app__chat--admin{ padding: 22px 18px; }
  .chat__messages, .chat__composer, .chat__header{ padding-left: 16px; padding-right: 16px; }
  .msg{ max-width: 80%; }
  .admin-card{ flex-direction: column; }
  .admin-card__actions{ width:100%; justify-content:flex-start; }
}

@media (max-width: 420px){
  .hero__title{ font-size: 2rem; }
  .hero__actions{ flex-direction: column; align-items:stretch; }
  .modal--wide{ max-width: 100%; }
}