:root{
  --bg:#1f2937;
  --bg-accent:#111827;
  --panel:#1f2937;
  --card:#273449;
  --border:#334155;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --primary:#2563eb;
  --danger:#ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius: 16px;
  --font: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

:root[data-theme="dark"]{
  --bg:#0b1220;
  --bg-accent:#050814;
  --panel:#111827;
  --card:#0f172a;
  --border:#1f2a44;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --primary:#2563eb;
  --danger:#ef4444;
}

:root[data-theme="medium"]{
  --bg:#1f2937;
  --bg-accent:#111827;
  --panel:#243041;
  --card:#2c3a4f;
  --border:#425168;
  --text:#edf2f7;
  --muted:#b8c2cf;
  --primary:#3b82f6;
  --danger:#ef4444;
}

:root[data-theme="light"]{
  --bg:#f4f7fb;
  --bg-accent:#e7edf6;
  --panel:#ffffff;
  --card:#ffffff;
  --border:#d8e0ec;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#2563eb;
  --danger:#dc2626;
}
*{box-sizing:border-box}
html,body{height:100%; overflow:hidden}
body{
  margin:0;
  background:linear-gradient(135deg, var(--bg), var(--bg-accent));
  color:var(--text);
  font-family:var(--font);
}
a{color:inherit}
.hidden{display:none !important}

/* V11: do not flash the login form while a saved Android session is being
   restored, especially when the app is opened by the "Répondre" call action. */
body.auth-booting #authPanel,
body.native-call-answer-resume #authPanel,
body.native-call-answer-resume #alertsBanner,
body.native-call-answer-resume #splash {
  display: none !important;
}
body.auth-booting #mainPanel {
  display: none !important;
}


.app{
  display:grid;
  grid-template-columns: 360px 1fr;
  height:100vh;
  height:100dvh;
}
.sidebar{
  border-right:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(10px);
  display:flex;
  flex-direction:column;
  padding:12px;
  gap:12px;
}
.brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:color-mix(in srgb, var(--card) 88%, transparent);
}
.brand-title{font-weight:700; letter-spacing:.2px}
.brand-actions{display:flex; gap:8px}
.panel{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:color-mix(in srgb, var(--card) 72%, transparent);
  padding:12px;
  box-shadow:var(--shadow);
}
.tabs{display:flex; gap:8px; margin-bottom:10px}
.tab{
  flex:1;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
.tab.active{background:color-mix(in srgb, var(--primary) 20%, transparent); border-color:color-mix(in srgb, var(--primary) 40%, transparent)}
.form{display:flex; flex-direction:column; gap:10px}
input,select,textarea{
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 72%, transparent);
  color:var(--text);
  outline:none;
}
.password-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.password-wrap input{
  width:100%;
  padding-right:44px; /* space for eye */
}
.eye-btn{
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:#123d55 !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(18,61,85,.34) !important;
  box-shadow:0 1px 5px rgba(3,30,46,.18);
  opacity:1;
}
.eye-btn:hover{
  background:#ffffff !important;
  border-color:rgba(11,127,193,.72) !important;
}
.eye-btn:focus-visible{
  outline:3px solid color-mix(in srgb, var(--primary) 38%, transparent);
  outline-offset:2px;
}
.eye-btn:active{ transform:translateY(-50%) scale(.97); }
:root[data-theme="dark"] .eye-btn,
:root[data-theme="medium"] .eye-btn,
body.theme-dark .eye-btn,
body.theme-medium .eye-btn{
  color:#eefaff !important;
  background:rgba(9,37,53,.94) !important;
  border-color:rgba(205,238,250,.48) !important;
}

input::placeholder{color:rgba(156,163,175,.7)}
.btn{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 72%, transparent);
  color:var(--text);
  cursor:pointer;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;
}
.btn.primary{background:color-mix(in srgb, var(--primary) 82%, transparent); border-color:color-mix(in srgb, var(--primary) 82%, transparent)}
.btn.danger{background:color-mix(in srgb, var(--danger) 85%, transparent); border-color:color-mix(in srgb, var(--danger) 85%, transparent)}
.icon-btn{
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 72%, transparent);
  border-radius:12px;
  padding:8px 10px;
  color:var(--text);
  cursor:pointer;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;
}
.error{
  margin-top:10px;
  padding:10px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--danger) 50%, transparent);
  background:color-mix(in srgb, var(--danger) 15%, transparent);
}
.hint{color:var(--muted); font-size:12px}
.muted{color:var(--muted); font-size:12px}

.search-row{display:flex; gap:8px; margin-bottom:10px}
.list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: calc(100vh - 360px);
  overflow:auto;
  padding-right:4px;
}
.item{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  cursor:pointer;
  background:color-mix(in srgb, var(--panel) 45%, transparent);
}
.item:hover{background:color-mix(in srgb, var(--panel) 72%, transparent)}
.item.active{border-color:color-mix(in srgb, var(--primary) 60%, transparent); background:rgba(37,99,235,.12)}
.avatar{
  width:40px;
  height:40px;
  border-radius:14px;
  background:rgba(37,99,235,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}
.item-title{font-weight:600}
.item-sub{color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px}
.sidebar-footer{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}

.main{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:rgba(17,24,39,.85);
  backdrop-filter: blur(10px);
}
.topbar-left{display:flex; align-items:center; gap:10px; min-width:0}
.back-btn{display:none}
.msg.pending{opacity:.7}

.chat-title{display:flex; flex-direction:column}
.topbar-actions{display:flex; gap:8px}

.content{
  flex:1;
  position:relative;
  padding:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.empty{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  border:1px dashed rgba(31,42,68,.8);
  border-radius:var(--radius);
  background:rgba(15,23,42,.35);
}
.empty-title{font-size:22px; font-weight:800}

.chat{flex:1; min-height:0; display:flex; flex-direction:column}
.messages{
  flex:1;
  overflow:auto;
  padding:6px;
  min-height:0;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(15,23,42,.35);
}
.msg-row{display:flex; margin:10px 0}
.msg{
  max-width:min(680px, 92%);
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(17,24,39,.7);
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}
.msg.me{
  background:rgba(37,99,235,.22);
  border-color:rgba(37,99,235,.3);
}
.msg-meta{margin-top:6px; font-size:11px; color:var(--muted)}
.msg a{color:#93c5fd; text-decoration:none}
.msg a:hover{text-decoration:underline}
.composer{
  display:flex;
  gap:8px;
  padding-top:10px;

  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
/* Multiline message composer */
#messageInput{
  flex:1;
  min-height:40px;
  max-height:140px;
  resize:none;
  overflow:auto;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(17,24,39,.7);
  color:var(--text);
  outline:none;
  line-height:1.25;
}
#messageInput:focus{ border-color: rgba(96,165,250,.65); }
.composer{ align-items:flex-end; }

.typing{margin-top:6px; color:var(--muted); font-size:12px}

.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  z-index: 1000;
}
.modal-card{
  width:min(560px, 94vw);
  border-radius:22px;
  border:1px solid var(--border);
  background:rgba(15,23,42,.95);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.modal-body{padding:14px; display:flex; flex-direction:column; gap:10px}

.modal{
  padding:16px;
  overflow-y:auto;
}
.modal-card{
  max-height:min(90vh, calc(100dvh - 32px));
  display:flex;
  flex-direction:column;
}
.modal-body{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
@media (max-width: 920px){
  .modal{
    align-items:flex-start;
    padding:12px;
  }
  .modal-card{
    width:min(100%, 94vw);
    max-height:calc(100dvh - 24px);
    margin:auto 0;
  }
}

.call{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.7);
}
.call-card{
  width:min(820px, 96vw);
  border-radius:24px;
  border:1px solid var(--border);
  background:rgba(15,23,42,.95);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.call-title{font-weight:800}
.call-media{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap:12px;
}
#remoteVideo{
  width:100%;
  border-radius:18px;
  border:1px solid var(--border);
  background:black;
  min-height:360px;
}
#localVideo{
  width:100%;
  border-radius:18px;
  border:1px solid var(--border);
  background:black;
  min-height:160px;
}
.call-actions{display:flex; justify-content:flex-end}

@media (max-width: 920px){
  /* Ensure no horizontal overflow on mobile */
  .app{ grid-template-columns: 1fr !important; width:100vw; max-width:100vw; overflow-x:hidden; }
  .sidebar, .main{ width:100%; max-width:100vw; min-width:0; }
  .content, .messages, .composer{ max-width:100vw; }
  .msg-row, .msg{ max-width:100%; }

  .app{grid-template-columns: 1fr}
  /* Mobile: WhatsApp-like navigation (list OR chat) */
  body:not(.chat-mode) .main{display:none}
  body.chat-mode .main{display:flex}
  .sidebar{position:relative; border-right:none; border-bottom:1px solid var(--border)}
  .list{max-height: 320px}
  .call-media{grid-template-columns: 1fr}
  #localVideo{min-height:200px}
}


/* Branding */
.brand-left{display:flex; align-items:center; gap:10px}
.brand-logo{width:28px; height:28px; display:block}
.sidebar-footer{
  margin-top: 10px;
  padding: 8px 6px 0;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  color: var(--muted);
  font-size: 12px;
}
.sidebar-footer a{
  color: var(--muted);
  text-decoration:none;
}
.sidebar-footer a:hover{color: var(--text); text-decoration:underline}

/* Splash screen */
.splash{
  position:fixed;
  inset:0;
  z-index:9999;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(37,99,235,.25), transparent 55%),
              radial-gradient(900px 500px at 90% 30%, rgba(34,197,94,.22), transparent 55%),
              rgba(2,6,23,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.splash-card{
  width:min(520px, 94vw);
  border:1px solid var(--border);
  border-radius: 22px;
  background: rgba(15,23,42,.65);
  box-shadow: var(--shadow);
  padding: 22px 18px;
  text-align:center;
}
.splash-logo{width:64px; height:64px; margin: 0 auto 10px; display:block}
.splash-title{font-size: 20px; font-weight: 800; margin-bottom: 6px}
.splash-sub{opacity:.9; line-height:1.55}
.splash-hint{margin-top: 14px; opacity: .7; font-size: 12px}
.splash.hide{animation: splashFade .45s ease forwards}
@keyframes splashFade{to{opacity:0; visibility:hidden}}


/* Footer legal links in sidebar */
.sidebar-legal{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.4;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  opacity: .9;
}
.sidebar-legal a{
  color: inherit;
  text-decoration: none;
}
.sidebar-legal a:hover{ text-decoration: underline; }
.sidebar-legal .sep{ opacity: .7; }


@media (max-width: 920px){
  body.chat-mode .sidebar{display:none}
  /* Mobile (chat): keep a single header (topbar) */
  body.chat-mode .topbar{display:flex}
  body.chat-mode .content{padding:10px}
  body.chat-mode .back-btn{display:inline-flex}
  body.chat-mode .topbar-actions{gap:6px}
}





/* Message deletion */
.msg-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.msg-del{
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 45%, transparent);
  color:var(--text);
  border-radius:10px;
  padding:2px 8px;
  font-size:12px;
  cursor:pointer;
}
.msg-del:active{transform:scale(.98)}

.msg-row.selected .msg{
  outline:2px solid rgba(59,130,246,.7);
}

.delete-toolbar{
  position:fixed;
  left:12px;
  right:12px;
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 50;
}
.delete-toolbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(17,24,39,.88);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.delete-count{font-size:13px; color:var(--text)}
.delete-actions{display:flex; gap:8px}

/* Slightly calmer splash hint */
.splash-hint{opacity:.85}


/* Alerts enable banner (mobile-friendly) */
.alerts-banner{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(17,24,39,0.96);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.alerts-banner .alerts-banner-text{
  font-size: 13px;
  line-height: 1.25;
}
.btn.small{
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 10px;
}
@media (min-width: 920px){
  .alerts-banner{ left: auto; right: 16px; width: 420px; }
}


body.modal-open{ overflow:hidden; }

/* Fullscreen modal on mobile for Status / Groups */
@media (max-width: 900px){
  .modal.modal--mobile-full{
    align-items: stretch;
    justify-content: stretch;
    background: rgba(0,0,0,.70);
  }
  .modal.modal--mobile-full .modal-card{
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    box-shadow: none;
    display:flex;
    flex-direction:column;
  }
  .modal.modal--mobile-full .modal-body{
    flex:1;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* Emoji picker */
.emoji-panel{
  position:fixed;
  left:0; right:0;
  bottom:56px;
  max-height:42vh;
  overflow:auto;
  background:rgba(17,24,39,.98);
  border-top:1px solid rgba(255,255,255,.08);
  padding:10px;
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:6px;
  z-index:1200;
}
@media (min-width: 820px){
  .emoji-panel{
    left:auto; right:auto;
    width:360px;
    bottom:74px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    margin-left:12px;
  }
}
.emoji-panel.hidden{display:none}
.emoji-btn{
  font-size:22px;
  line-height:1;
  padding:8px 0;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  cursor:pointer;
}
.emoji-btn:active{transform:scale(0.97)}

/* WhatsApp-like Status viewer */
.status-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.status-item{
  display:flex; align-items:center; gap:12px;
  width:100%;
  padding:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  cursor:pointer;
  text-align:left;
}
.status-avatar{
  width:46px; height:46px;
  border-radius:50%;
  position:relative;
  flex:0 0 auto;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--text) 8%, transparent);
}
.status-ring{
  position:absolute; inset:-2px;
  border-radius:50%;
  border:2px solid rgba(37,99,235,.85);
}
.status-initial{font-weight:700}
.status-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.status-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.story-viewer{
  position:fixed; inset:0;
  background:#000;
  z-index:2000;
  display:flex;
  flex-direction:column;
}
.story-viewer.hidden{display:none}
.story-top{
  padding:10px 10px 0 10px;
}
.story-progress{
  display:flex;
  gap:2px;
  width:100%;
}
.story-seg{
  flex:1 1 auto;
  height:2px;
  background:rgba(255,255,255,.25);
  border-radius:999px;
  overflow:hidden;
}
.story-seg-fill{
  height:100%;
  width:0%;
  background:#fff;
}
.story-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  color:#fff;
}
.story-user{
  font-weight:700;
  max-width:60vw;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.story-time{opacity:.75;font-size:.92em}
.story-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.story-sound{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  border-radius:12px;
  width:40px;height:34px;
}
.story-sound.hidden{display:none}
.story-close{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  border-radius:12px;
  width:40px;height:34px;
}
.story-content{
  touch-action:none;
  position:relative;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.story-media{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.story-audio{
  width:min(92vw, 520px);
}

.story-audio-card{
  width:min(92vw, 540px);
  padding:22px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(160deg, rgba(11,127,193,.35), rgba(23,184,151,.26));
  color:#fff;
  text-align:center;
  box-shadow:0 20px 70px rgba(0,0,0,.38);
}
.story-audio-icon{
  font-size:52px;
  line-height:1;
  margin-bottom:10px;
}
.story-audio-title{
  font-size:20px;
  font-weight:900;
  margin-bottom:6px;
}
.story-audio-card .muted{
  color:rgba(255,255,255,.74);
  margin-bottom:14px;
}
.story-audio-card audio{
  width:100%;
}
.field-error{
  margin:4px 0 10px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.35);
  color:#991b1b;
  font-size:12px;
  font-weight:700;
}
.story-text{
  padding:22px;
  font-size:24px;
  line-height:1.25;
  text-align:center;
  color:#fff;
  max-width:92vw;
  word-break:break-word;
}
.story-tap{
  position:absolute;
  top:0; bottom:0;
  width:40%;
}
.story-tap-left{left:0}
.story-tap-right{right:0}


/* --- Mobile width safety (avoid horizontal scroll) --- */
html, body { max-width: 100%; overflow-x: hidden; }
* { box-sizing: border-box; }
.messages { overflow-x: hidden; }
.msg, .item-title, .item-sub { overflow-wrap: anywhere; word-break: break-word; }
.composer { width: 100%; }
#messageInput { min-width: 0; }

/* --- Avatars --- */
.avatar{
  width:40px;
  height:40px;
  border-radius: 999px;
  background: rgba(148,163,184,.18);
  border: 1px solid rgba(148,163,184,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  flex:0 0 auto;
  overflow:hidden;
  user-select:none;
}
.avatar--lg{ width:42px; height:42px; }
.avatar.square{ border-radius: 12px; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar .initials{ font-size:14px; letter-spacing:.5px; }

/* --- Avatar cropper (WhatsApp-like) --- */
.cropper{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.cropper-top{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.cropper-viewport{
  width:min(280px, 80vw);
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.35);
  overflow:hidden;
  position:relative;
  touch-action:none;
}
.cropper-viewport.round{
  border-radius: 999px;
}
.cropper-viewport img{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  will-change: transform;
  max-width:none;
  max-height:none;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.cropper-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}



/* Conversation privacy/delete buttons in conversation list */
.item .item-actions{margin-left:auto;display:flex;gap:6px;align-items:center}
.item .item-del{border:1px solid #233253;background:#0f1a33;color:#e5e7eb;border-radius:10px;padding:6px 8px;cursor:pointer}
.item .item-del:active{transform:scale(0.98)}

/* Status feed avatar image */
.status-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:999px}
.status-avatar .status-initial{position:relative;z-index:1}

/* Call modal */
.call-modal{display:flex;flex-direction:column;gap:10px}
.call-title{font-weight:900;font-size:18px}
.call-sub{color:#cbd5e1}
.call-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.btn.danger{background:#b91c1c;border-color:#7f1d1d}

/* Modal without close button */
.modal.modal--no-close .modal-head{justify-content:space-between}

.chat-mobile-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.topbar-actions{display:flex;gap:8px;align-items:center}


.icon-btn.disabled{opacity:.5; cursor:not-allowed}
.icon-btn:disabled{opacity:.5; cursor:not-allowed}

@media (max-width: 920px){
  body.chat-mode .topbar{display:flex}
}



/* Splash close button (manual fallback) */
.splash-card{ position: relative; }
.splash-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.9);
  font-size: 20px;
  line-height: 28px;
  cursor: pointer;
}
.splash-close:active{ transform: scale(.98); }


/* Responsive search row (Android 11 small screens): keep Search + buttons inside frame */
.search-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.search-row input{
  flex: 1 1 220px;
  min-width: 0; /* prevent overflow in flex containers */
}
.search-row .btn{
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 420px){
  .search-row{
    gap:8px;
  }
  .search-row input{
    flex: 1 1 100%;
  }
  /* Put buttons on the next line, side by side */
  #btnNewChat{
    flex: 1 1 0;
  }
}


.msg-text-original{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  opacity: .75;
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,.12);
}


.topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.call-modal{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:56vh;
}
.call-head{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.call-title{
  font-size:1.1rem;
  font-weight:800;
}
.call-sub{
  color:var(--muted);
}

.call-stage{
  position:relative;
  min-height:320px;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.96));
  display:flex;
  align-items:center;
  justify-content:center;
}
.call-stage video{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}
.call-stage.audio-only #callRemoteVideo{
  display:none;
}
.call-remote-fallback{
  position:absolute;
  width:92px;
  height:92px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  font-weight:800;
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow);
}
.call-local-preview{
  position:absolute;
  right:14px;
  bottom:14px;
  width:116px;
  height:154px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:#000;
  box-shadow:var(--shadow);
}
.call-local-preview video{
  width:100%;
  height:100%;
  object-fit:cover;
}
.call-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.call-actions .btn.active{
  border-color:color-mix(in srgb, var(--danger) 55%, transparent);
}

@media (max-width: 640px){
  .call-modal{
    min-height:72vh;
  }
  .call-stage{
    min-height:54vh;
  }
  .call-local-preview{
    width:92px;
    height:124px;
    right:10px;
    bottom:10px;
  }
  .call-actions{
    position:sticky;
    bottom:0;
    padding-top:8px;
    background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--panel) 92%, transparent) 24%);
  }
}


/* Accessibility and usability refinements */
:root{ --accent: var(--primary); }
html{ font-size:16px; }
button, .btn, .icon-btn, input, select, textarea{ font: inherit; }
button, .btn, .icon-btn{ min-height:44px; min-width:44px; }
input, select, textarea{ min-height:44px; }
textarea{ resize: vertical; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid color-mix(in srgb, var(--primary) 72%, white);
  outline-offset:3px;
}
.btn:disabled, .btn.disabled, button:disabled{
  opacity:.62;
  cursor:not-allowed;
}
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.modal{ padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.modal-card{ max-height: min(88dvh, 760px); overflow:auto; }
.msg-text, .msg-text-original, .item-title, .item-sub{ overflow-wrap:anywhere; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}


/* Light theme readability fixes for conversations and call UI */
:root[data-theme="light"] .topbar{
  background:rgba(255,255,255,.94);
  color:#0f172a;
}
:root[data-theme="light"] .empty,
:root[data-theme="light"] .messages{
  background:#f8fafc;
  border-color:#d8e0ec;
}
:root[data-theme="light"] .msg{
  background:#ffffff;
  color:#0f172a;
  border-color:#d8e0ec;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
:root[data-theme="light"] .msg.me{
  background:#dbeafe;
  color:#082f49;
  border-color:#bfdbfe;
}
:root[data-theme="light"] .msg-meta{
  color:#475569;
}
:root[data-theme="light"] .msg a{
  color:#1d4ed8;
}
:root[data-theme="light"] .msg-text-original{
  border-top-color:rgba(15,23,42,.18);
  color:#334155;
}
:root[data-theme="light"] #messageInput{
  background:#ffffff;
  color:#0f172a;
  border-color:#cbd5e1;
}
:root[data-theme="light"] #messageInput::placeholder{
  color:#64748b;
}
:root[data-theme="light"] .modal-card{
  background:#ffffff;
  color:#0f172a;
}
:root[data-theme="light"] .emoji-panel,
:root[data-theme="light"] .delete-toolbar-inner{
  background:#ffffff;
  color:#0f172a;
  border-color:#d8e0ec;
}
:root[data-theme="light"] .call-stage{
  background:linear-gradient(180deg, #e0f2fe, #f8fafc);
}
.call-remote-fallback img{
  width:100%;
  height:100%;
  border-radius:inherit;
  object-fit:cover;
  display:block;
}


/* Messages vocaux */
#btnVoice.recording{
  background: color-mix(in srgb, var(--danger) 30%, transparent);
  border-color: color-mix(in srgb, var(--danger) 65%, transparent);
  animation: voicePulse 1.2s infinite;
}
@keyframes voicePulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
}
.voice-recorder{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  padding:8px 10px;
  border:1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-radius:14px;
  background:color-mix(in srgb, var(--danger) 12%, var(--card));
}
.voice-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--danger);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent);
  animation: voiceDot 1.2s infinite;
}
@keyframes voiceDot{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent); }
  70%{ box-shadow:0 0 0 8px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

/* Réactions aux messages */
.msg-actions{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:6px;
}
.msg-react-btn{
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 42%, transparent);
  color:var(--text);
  border-radius:10px;
  padding:2px 7px;
  font-size:12px;
  cursor:pointer;
}
.msg-react-btn:active{transform:scale(.98)}
.msg-reactions{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:7px;
}
.reaction-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background:color-mix(in srgb, var(--text) 7%, transparent);
  color:var(--text);
  border-radius:999px;
  padding:3px 7px;
  font-size:13px;
  cursor:pointer;
}
.reaction-pill.mine{
  border-color:color-mix(in srgb, var(--primary) 55%, transparent);
  background:color-mix(in srgb, var(--primary) 22%, transparent);
}
.reaction-picker{
  position:fixed;
  z-index:1300;
  display:flex;
  gap:6px;
  align-items:center;
  padding:8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:color-mix(in srgb, var(--card) 96%, transparent);
  box-shadow:var(--shadow);
}
.reaction-picker.hidden{display:none}
.reaction-picker button{
  border:0;
  background:transparent;
  color:var(--text);
  border-radius:999px;
  padding:6px 8px;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}
.reaction-picker button:hover{
  background:color-mix(in srgb, var(--text) 9%, transparent);
}
.reaction-picker .reaction-clear{
  font-size:13px;
  border-left:1px solid var(--border);
  border-radius:12px;
  padding:7px 9px;
}

/* Émojis + stickers */
.emoji-panel{
  display:block;
}
.emoji-panel.hidden{display:none}
.emoji-tabs{
  display:flex;
  gap:6px;
  margin-bottom:8px;
}
.emoji-tab{
  flex:1;
  border:1px solid var(--border);
  border-radius:999px;
  background:color-mix(in srgb, var(--panel) 55%, transparent);
  color:var(--text);
  padding:7px 10px;
  cursor:pointer;
  font-size:13px;
}
.emoji-tab.active{
  background:color-mix(in srgb, var(--primary) 25%, transparent);
  border-color:color-mix(in srgb, var(--primary) 55%, transparent);
}
.emoji-grid{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:6px;
}
.sticker-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.sticker-btn{
  min-height:56px;
  font-size:32px;
  line-height:1;
  padding:8px 0;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  cursor:pointer;
}
.sticker-btn:active{transform:scale(.97)}
.msg-sticker{
  font-size:56px;
  line-height:1.05;
  text-align:center;
  padding:4px 8px;
  min-width:80px;
}
@media (max-width: 520px){
  .emoji-grid{grid-template-columns:repeat(7, 1fr)}
  .sticker-grid{grid-template-columns:repeat(3, 1fr)}
  .msg-sticker{font-size:48px}
  .voice-recorder{flex-wrap:wrap}
}


/* Monetization / Freemium */
.money-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.money-stat,.money-card{border:1px solid var(--border);background:rgba(15,23,42,.58);border-radius:16px;padding:12px}
.money-label{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.money-value{font-weight:900;font-size:18px;margin-top:4px}
.money-section{margin-top:16px}
.money-section h3{margin:0 0 10px 0;font-size:16px}
.money-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.money-title{font-weight:900;margin-bottom:6px}
.money-price{font-size:13px;color:var(--muted);margin:8px 0}
.money-actions{display:flex;gap:8px;flex-wrap:wrap}
.money-stickers{display:flex;gap:6px;flex-wrap:wrap;font-size:24px;margin:8px 0}
.money-stickers span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.06)}
.money-mm-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.money-mm-line{display:grid;grid-template-columns:110px 1fr auto;gap:8px;align-items:center;padding:8px;border:1px solid var(--border);border-radius:12px}
.money-mm-line code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:rgba(255,255,255,.08);border-radius:8px;padding:4px 6px}
.money-field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.money-field span{font-size:12px;color:var(--muted);font-weight:700}
.money-field input,.money-field textarea{width:100%;box-sizing:border-box}
.sponsored-pill{font-size:11px;border:1px solid var(--border);border-radius:999px;padding:2px 6px;color:var(--muted);margin-left:4px}
.sticker-pack{grid-column:1/-1;border:1px solid var(--border);border-radius:14px;padding:8px;background:rgba(15,23,42,.46)}
.sticker-pack.locked{opacity:.92}
.sticker-pack-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:800;margin-bottom:8px;color:var(--muted)}
.sticker-pack-items{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.sticker-owned{font-size:11px;border:1px solid var(--border);border-radius:999px;padding:2px 6px}
.sticker-btn.locked{filter:grayscale(.25);position:relative}
.sticker-btn.locked::after{content:"🔒";font-size:12px;position:absolute;right:2px;bottom:1px}
@media(max-width:700px){
  .money-summary,.money-grid{grid-template-columns:1fr}
  .money-mm-line{grid-template-columns:1fr}
  .sticker-pack-items{grid-template-columns:repeat(4,1fr)}
}


.money-summary.subscription-required{
  border-color: rgba(239, 68, 68, .45);
  background: rgba(127, 29, 29, .18);
}
.money-card.money-card-muted{
  opacity: .82;
}
#paypal-button-container{
  min-height: 44px;
}


/* Admin access button shown only for users with role=admin */
.admin-access-btn{
  background:linear-gradient(135deg,#38bdf8,#a78bfa) !important;
  color:#06111f !important;
  border:0 !important;
  font-weight:900;
  box-shadow:0 10px 25px rgba(56,189,248,.22);
}
.admin-access-btn::before{content:"🛡️";}


/* Group replies */
.reply-composer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:6px 0 8px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-left:3px solid var(--primary);
  border-radius:12px;
  background:rgba(15,23,42,.42);
}
.reply-composer .reply-context{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.reply-context-title{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}
.reply-context-body{
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.reply-quote{
  display:block;
  max-width:100%;
  margin:0 0 6px;
  padding:6px 8px;
  border-left:3px solid var(--primary);
  border-radius:10px;
  background:rgba(255,255,255,.06);
  color:var(--muted);
  cursor:pointer;
}
.reply-quote .reply-context-title{
  color:var(--text);
}
.msg-row.reply-highlight .msg{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

/* Group member management */
.group-management{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.group-add-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.group-add-row input{
  flex:1;
  min-width:0;
}
.group-members{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:min(55vh,520px);
  overflow:auto;
  padding-right:2px;
}
.group-member-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.04);
}
.group-member-info{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.group-member-name{
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.group-member-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
}
.avatar.mini{
  width:32px;
  height:32px;
  flex:0 0 32px;
  font-size:12px;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.btn.small{
  min-height:30px;
  padding:5px 8px;
  font-size:12px;
}
@media(max-width:700px){
  .group-add-row,.group-member-row{
    align-items:stretch;
    flex-direction:column;
  }
  .group-member-actions{
    justify-content:flex-start;
  }
}


.story-viewers{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
  color:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-weight:700;
  cursor:pointer;
}
.story-viewers.hidden{display:none}

.modal.modal--over-story{z-index:2200}

.status-viewer-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.status-viewer-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.04);
}
.status-viewer-avatar{
  width:42px;
  height:42px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(96,165,250,.16);
  flex:0 0 auto;
}
.status-viewer-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.status-viewer-initial{font-weight:800}
.status-viewer-meta{min-width:0}
.status-viewer-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* V12: while the app is opened by Android's "Répondre" action, never show the
   conversation list as an intermediate screen. The overlay stays below the call
   modal but above the sidebar/main UI until the WebRTC offer is displayed. */
body.native-call-answer-resume #mainPanel,
body.native-call-answer-resume #conversationList,
body.native-call-answer-resume .sidebar-footer,
body.native-call-answer-resume .sidebar-legal,
body.native-call-answer-resume #alertsBanner,
body.native-call-answer-resume #splash {
  display: none !important;
}

.native-call-resume-overlay{
  position:fixed;
  inset:0;
  z-index:950;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(2,6,23,.92);
  backdrop-filter: blur(10px);
  padding:20px;
}
.native-call-resume-card{
  width:min(420px, 92vw);
  border:1px solid var(--border);
  border-radius:24px;
  background:rgba(15,23,42,.96);
  box-shadow:var(--shadow);
  padding:24px 20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.native-call-resume-spinner{
  width:42px;
  height:42px;
  border-radius:999px;
  border:4px solid rgba(255,255,255,.18);
  border-top-color:rgba(255,255,255,.88);
  animation:nativeCallResumeSpin .8s linear infinite;
}
.native-call-resume-title{
  font-weight:800;
  font-size:18px;
}
.native-call-resume-text{
  color:var(--muted);
  line-height:1.45;
}
@keyframes nativeCallResumeSpin{
  to{ transform:rotate(360deg); }
}


/* -------------------------------------------------------------------------
   V25 - Identité visuelle AkiliChat
   Inspirée des visuels fournis : dégradé vert/bleu, bulles de discussion,
   icône officielle et interface plus lumineuse.
   ------------------------------------------------------------------------- */
:root{
  --akili-green:#55E537;
  --akili-green-2:#16C784;
  --akili-blue:#0E72ED;
  --akili-blue-2:#0647B7;
  --akili-cyan:#1FC8DB;
  --akili-lime:#A8FF24;
  --akili-ink:#061632;
  --akili-card:rgba(255,255,255,.12);
  --akili-glass:rgba(255,255,255,.16);
  --primary:var(--akili-blue);
  --radius:20px;
  --shadow:0 18px 48px rgba(1,30,81,.25);
}

body{
  background:
    radial-gradient(900px 520px at 0% 4%, rgba(168,255,36,.28), transparent 62%),
    radial-gradient(760px 460px at 100% 12%, rgba(31,200,219,.32), transparent 60%),
    radial-gradient(760px 520px at 85% 96%, rgba(14,114,237,.34), transparent 58%),
    linear-gradient(135deg, #0B4FAA 0%, #0BAA95 48%, #62DB37 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.44;
  background:
    linear-gradient(164deg, transparent 0 26%, rgba(255,255,255,.13) 26% 31%, transparent 31% 100%),
    linear-gradient(344deg, transparent 0 60%, rgba(166,255,39,.30) 60% 73%, transparent 73% 100%),
    radial-gradient(40px 40px at 14% 77%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(26px 26px at 77% 14%, rgba(255,255,255,.18), transparent 70%);
}

.app{
  background:rgba(2,10,30,.10);
}

.sidebar{
  background:
    linear-gradient(180deg, rgba(7,86,173,.88), rgba(5,101,132,.86) 52%, rgba(21,161,111,.82)),
    url("../assets/brand/akilichat-gallery.png") center bottom / 120% auto no-repeat;
  border-right:1px solid rgba(255,255,255,.20);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.06);
}
.sidebar::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:34%;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(5,17,50,.62));
}
.sidebar > *{position:relative;z-index:1}

.brand{
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.10));
  box-shadow:0 18px 40px rgba(0,48,112,.22);
}
.brand-title{
  font-size:20px;
  font-weight:900;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,43,88,.34);
}
.brand-logo,
.splash-logo,
.landing-icon{
  border-radius:24%;
  object-fit:cover;
  box-shadow:0 12px 26px rgba(0,50,125,.30);
}
.brand-logo{width:42px;height:42px}
.brand-left{gap:12px}

.panel{
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(180deg, rgba(255,255,255,.21), rgba(255,255,255,.10));
  backdrop-filter:blur(18px);
  box-shadow:0 22px 54px rgba(1,30,81,.28);
}

input,select,textarea,
#messageInput{
  background:rgba(255,255,255,.90);
  color:#082147;
  border-color:rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70);
}
input::placeholder,
#messageInput::placeholder{color:#58708E}

.btn,.icon-btn,.tab{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.16);
  color:#fff;
}
.btn.primary,
.tab.active{
  background:linear-gradient(135deg, var(--akili-green-2), var(--akili-blue));
  border-color:rgba(255,255,255,.28);
  color:#fff;
  font-weight:800;
  box-shadow:0 12px 26px rgba(13,114,237,.26);
}
.btn.danger{
  background:linear-gradient(135deg, #EF4444, #B91C1C);
  color:#fff;
}
.icon-btn:hover,.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,57,130,.18);
}

.item{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.20);
  color:#fff;
  box-shadow:0 10px 22px rgba(0,44,112,.14);
}
.item:hover{
  background:rgba(255,255,255,.24);
  transform:translateY(-1px);
}
.item-title{font-weight:800}
.item-sub,.muted,.hint{color:rgba(232,247,255,.82)}

.avatar,
.status-avatar,
.status-viewer-avatar{
  background:linear-gradient(135deg, rgba(85,229,55,.38), rgba(14,114,237,.35));
  border-color:rgba(255,255,255,.28);
  color:#fff;
}

.topbar{
  background:linear-gradient(135deg, rgba(10,139,98,.96), rgba(8,94,188,.94));
  border-bottom:1px solid rgba(255,255,255,.18);
  color:#fff;
  box-shadow:0 12px 28px rgba(0,55,119,.18);
}
.topbar .muted{color:rgba(255,255,255,.78)}

.content{
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    radial-gradient(560px 300px at 92% 18%, rgba(85,229,55,.16), transparent 72%),
    radial-gradient(620px 360px at 8% 92%, rgba(14,114,237,.18), transparent 72%);
}
.empty{
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
  box-shadow:0 24px 64px rgba(1,30,81,.22);
  overflow:hidden;
}
.empty-brand{padding:24px}
.brand-landing{
  width:min(100%, 1080px);
  display:grid;
  grid-template-columns:minmax(280px,.7fr) minmax(360px,1.3fr);
  gap:22px;
  align-items:center;
}
.landing-copy{
  display:flex;
  align-items:center;
  gap:18px;
  text-align:left;
}
.landing-icon{
  width:94px;
  height:94px;
  flex:0 0 auto;
}
.empty-title{
  color:#fff;
  font-size:clamp(30px, 5vw, 56px);
  line-height:1.05;
  font-weight:950;
  letter-spacing:-.045em;
  text-shadow:0 4px 18px rgba(0,37,98,.24);
}
.landing-copy .muted{
  max-width:460px;
  margin-top:12px;
  line-height:1.55;
  font-size:16px;
}
.landing-hero{
  width:100%;
  height:auto;
  border-radius:22px;
  box-shadow:0 28px 70px rgba(0,39,115,.30);
  background:rgba(255,255,255,.10);
}
.landing-features{
  grid-column:1/-1;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.landing-features span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight:800;
}

.messages{
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(229,255,240,.84)),
    radial-gradient(460px 240px at 100% 0%, rgba(31,200,219,.14), transparent 70%);
  border-color:rgba(255,255,255,.40);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.msg{
  background:#fff;
  color:#0B2547;
  border-color:rgba(9,72,136,.10);
  box-shadow:0 8px 20px rgba(11,37,71,.08);
}
.msg.me{
  background:linear-gradient(135deg, #4FDD56, #17C783);
  color:#fff;
  border-color:rgba(255,255,255,.22);
}
.msg-meta{color:rgba(8,33,71,.58)}
.msg.me .msg-meta{color:rgba(255,255,255,.78)}
.msg a{color:#075EEA}
.msg.me a{color:#E8F9FF}

.composer{
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.10));
}

/* Splash - visuel proche des supports AkiliChat fournis */
.splash{
  background:
    radial-gradient(900px 520px at 6% 8%, rgba(168,255,36,.30), transparent 60%),
    radial-gradient(920px 520px at 100% 0%, rgba(31,200,219,.34), transparent 62%),
    linear-gradient(135deg, #094FB1 0%, #08A7A4 54%, #61D83B 100%);
}
.splash-card{
  width:min(860px, 94vw);
  border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.10));
  backdrop-filter:blur(18px);
  border-radius:32px;
  padding:24px;
  box-shadow:0 30px 90px rgba(0,48,112,.35);
}
.splash-brand-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom:16px;
}
.splash-logo{width:76px;height:76px}
.splash-copy{text-align:left}
.splash-title{
  color:#fff;
  font-size:clamp(28px,4vw,46px);
  font-weight:950;
  line-height:1;
  letter-spacing:-.04em;
  text-shadow:0 4px 18px rgba(0,35,98,.25);
}
.splash-kicker{
  color:rgba(255,255,255,.88);
  font-size:clamp(16px,2.2vw,24px);
  margin-top:5px;
}
.splash-hero{
  display:block;
  width:100%;
  max-height:330px;
  object-fit:contain;
  border-radius:24px;
  margin:0 auto 16px;
  background:rgba(255,255,255,.08);
  box-shadow:0 18px 45px rgba(0,44,112,.22);
}
.splash-sub{
  color:#fff;
  font-size:18px;
  line-height:1.5;
}
.splash-hint{color:rgba(255,255,255,.84)}
.splash-close{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.25);
}

/* Modaux et appels */
.modal-card,
.call-card,
.native-call-resume-card{
  border-color:rgba(255,255,255,.24);
  background:linear-gradient(180deg, rgba(13,36,76,.96), rgba(6,22,52,.97));
  color:#fff;
}
.call-stage{
  background:linear-gradient(135deg, #092B69, #0E8E86);
}

/* Thème clair : garder l'identité visuelle sans perdre la lisibilité */
:root[data-theme="light"] body{
  background:
    radial-gradient(860px 520px at 0% 0%, rgba(168,255,36,.22), transparent 62%),
    radial-gradient(760px 460px at 100% 8%, rgba(31,200,219,.25), transparent 60%),
    linear-gradient(135deg, #eefaff, #f7fff0);
}
:root[data-theme="light"] .sidebar{
  background:
    linear-gradient(180deg, rgba(13,116,220,.92), rgba(12,169,125,.90)),
    url("../assets/brand/akilichat-gallery.png") center bottom / 120% auto no-repeat;
}
:root[data-theme="light"] .panel,
:root[data-theme="light"] .brand{
  background:rgba(255,255,255,.76);
  color:#0B2547;
}
:root[data-theme="light"] .brand-title,
:root[data-theme="light"] .empty-title{
  color:#0B2547;
  text-shadow:none;
}
:root[data-theme="light"] .item{
  background:rgba(255,255,255,.74);
  color:#0B2547;
}
:root[data-theme="light"] .item-sub,
:root[data-theme="light"] .muted,
:root[data-theme="light"] .hint{
  color:#47637F;
}
:root[data-theme="light"] .btn,
:root[data-theme="light"] .icon-btn,
:root[data-theme="light"] .tab{
  color:#0B2547;
  background:rgba(255,255,255,.62);
  border-color:rgba(11,37,71,.14);
}
:root[data-theme="light"] .btn.primary,
:root[data-theme="light"] .tab.active{
  color:#fff;
}

/* Mobile */
@media (max-width: 920px){
  .sidebar{
    min-height:100dvh;
    padding:12px;
    background:
      linear-gradient(180deg, rgba(9,74,177,.95), rgba(8,154,132,.92)),
      url("../assets/brand/akilichat-hero.png") center bottom / 150% auto no-repeat;
  }
  .brand{
    border-radius:24px;
  }
  .brand-logo{width:44px;height:44px}
  .brand-title{font-size:22px}
  .panel{border-radius:24px}
  .list{max-height:calc(100dvh - 350px)}
  body.chat-mode .content{padding:0}
  body.chat-mode .messages{
    border-radius:0;
    border-left:0;
    border-right:0;
  }
  .composer{
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.92));
  }
  #btnSend{
    width:48px;
    min-width:48px;
    padding:0;
    border-radius:999px;
    overflow:hidden;
    text-indent:120%;
    white-space:nowrap;
    position:relative;
  }
  #btnSend::after{
    content:"➤";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    text-indent:0;
    font-size:18px;
  }
  .brand-landing{
    grid-template-columns:1fr;
  }
  .landing-copy{
    flex-direction:column;
    text-align:center;
  }
  .landing-icon{width:82px;height:82px}
  .landing-hero{max-height:44vh;object-fit:contain}
  .empty-title{font-size:34px}
  .splash-card{padding:18px;border-radius:26px}
  .splash-brand-row{justify-content:flex-start}
  .splash-logo{width:62px;height:62px}
  .splash-hero{max-height:42vh}
  .splash-sub{font-size:15px}
}

@media (max-width: 460px){
  .sidebar-footer .btn{flex:1 1 calc(50% - 8px)}
  .landing-features{display:none}
  .splash-copy{text-align:left}
  .splash-title{font-size:28px}
  .splash-kicker{font-size:16px}
}


/* V25 micro-ajustements de lisibilité */
.sidebar{position:relative;overflow:hidden}
.composer .icon-btn{
  color:#0B2547;
  background:rgba(255,255,255,.88);
  border-color:rgba(8,33,71,.12);
}
.composer .icon-btn:hover{background:#fff}
.composer #btnSend{
  color:#fff;
}
.modal .btn,.modal .icon-btn,
.call .btn,.call .icon-btn,
.native-call-resume-card .btn{
  color:#fff;
}
.modal input,.modal select,.modal textarea{
  background:rgba(255,255,255,.92);
  color:#082147;
}


/* -------------------------------------------------------------------------
   V26 - Correction définitive des thèmes Apparence + contrastes
   - Sombre applique maintenant un vrai habillage sombre.
   - Clair garde l'identité AkiliChat mais force les textes et boutons lisibles.
   - Médium augmente le contraste des conversations.
   - Les boutons de navigation admin ne débordent plus en portrait mobile.
   ------------------------------------------------------------------------- */

:root[data-theme="dark"]{
  --bg:#04101f;
  --bg-accent:#010713;
  --panel:#071528;
  --card:#0b1e35;
  --border:#203a59;
  --text:#f8fafc;
  --muted:#b8c7da;
  --primary:#20d3c2;
  --danger:#f05252;
  color-scheme:dark;
}
:root[data-theme="medium"]{
  --bg:#0b4faa;
  --bg-accent:#0aa88f;
  --panel:#113c63;
  --card:#164c72;
  --border:#4583a2;
  --text:#f8fafc;
  --muted:#d6edf7;
  --primary:#0e72ed;
  --danger:#ef4444;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f8fcff;
  --bg-accent:#eef8f3;
  --panel:#ffffff;
  --card:#ffffff;
  --border:#cbd8e7;
  --text:#082147;
  --muted:#49647f;
  --primary:#0e72ed;
  --danger:#dc2626;
  color-scheme:light;
}

/* L'ancien design V25 utilisait un fond global sans tenir compte du thème.
   Les règles ci-dessous sont volontairement en fin de fichier pour reprendre
   la priorité CSS au moment où l'utilisateur change Apparence. */
:root[data-theme="dark"] body{
  color:var(--text);
  background:
    radial-gradient(820px 520px at 6% 2%, rgba(32,211,194,.15), transparent 62%),
    radial-gradient(780px 520px at 100% 8%, rgba(14,114,237,.20), transparent 62%),
    radial-gradient(720px 520px at 70% 100%, rgba(85,229,55,.10), transparent 60%),
    linear-gradient(135deg, #020617 0%, #06111f 52%, #081a2f 100%) !important;
}
:root[data-theme="medium"] body{
  color:var(--text);
  background:
    radial-gradient(900px 520px at 0% 4%, rgba(168,255,36,.24), transparent 62%),
    radial-gradient(760px 460px at 100% 12%, rgba(31,200,219,.28), transparent 60%),
    linear-gradient(135deg, #084aa6 0%, #0aa391 52%, #46c83b 100%) !important;
}
:root[data-theme="light"] body{
  color:var(--text);
  background:
    radial-gradient(860px 520px at 0% 0%, rgba(168,255,36,.20), transparent 62%),
    radial-gradient(760px 460px at 100% 8%, rgba(31,200,219,.23), transparent 60%),
    linear-gradient(135deg, #f7fbff 0%, #f7fff0 100%) !important;
}

:root[data-theme="dark"] .sidebar{
  background:
    linear-gradient(180deg, rgba(3,12,27,.98), rgba(6,26,47,.97) 54%, rgba(7,54,55,.96)),
    url("../assets/brand/akilichat-gallery.png") center bottom / 125% auto no-repeat !important;
  border-right-color:rgba(148,163,184,.20);
}
:root[data-theme="medium"] .sidebar{
  background:
    linear-gradient(180deg, rgba(7,86,173,.91), rgba(5,101,132,.88) 52%, rgba(21,161,111,.84)),
    url("../assets/brand/akilichat-gallery.png") center bottom / 120% auto no-repeat !important;
}
:root[data-theme="light"] .sidebar{
  background:
    linear-gradient(180deg, rgba(13,116,220,.92), rgba(12,169,125,.90)),
    url("../assets/brand/akilichat-gallery.png") center bottom / 120% auto no-repeat !important;
}

/* Composants généraux par thème */
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .brand,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .call-card,
:root[data-theme="dark"] .native-call-resume-card{
  background:linear-gradient(180deg, rgba(8,21,39,.96), rgba(3,10,24,.98)) !important;
  color:#f8fafc !important;
  border-color:rgba(148,163,184,.22) !important;
}
:root[data-theme="medium"] .panel,
:root[data-theme="medium"] .brand{
  color:#ffffff;
}
:root[data-theme="light"] .panel,
:root[data-theme="light"] .brand,
:root[data-theme="light"] .modal-card{
  background:rgba(255,255,255,.96) !important;
  color:#082147 !important;
  border-color:rgba(11,37,71,.14) !important;
}
:root[data-theme="light"] .modal-head{
  border-bottom-color:#d6e3f2 !important;
}
:root[data-theme="light"] .modal-body,
:root[data-theme="light"] .modal-body *{
  color:inherit;
}
:root[data-theme="light"] .brand-title{
  color:#082147 !important;
  text-shadow:none !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] #messageInput{
  background:rgba(2,6,23,.86) !important;
  color:#f8fafc !important;
  border-color:rgba(148,163,184,.28) !important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder,
:root[data-theme="dark"] #messageInput::placeholder{
  color:#94a3b8 !important;
}
:root[data-theme="medium"] input,
:root[data-theme="medium"] select,
:root[data-theme="medium"] textarea,
:root[data-theme="medium"] #messageInput{
  background:#ffffff !important;
  color:#082147 !important;
  border-color:rgba(8,33,71,.14) !important;
}
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] #messageInput{
  background:#ffffff !important;
  color:#082147 !important;
  border-color:#cbd8e7 !important;
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder,
:root[data-theme="light"] #messageInput::placeholder{
  color:#60758e !important;
}

/* Boutons : empêcher le thème clair de transformer les boutons importants en blanc illisible. */
:root[data-theme="light"] .btn,
:root[data-theme="light"] .icon-btn,
:root[data-theme="light"] .tab{
  color:#082147 !important;
  background:#ffffff !important;
  border-color:#cbd8e7 !important;
  text-shadow:none !important;
}
:root[data-theme="light"] .btn.primary,
:root[data-theme="light"] .tab.active,
:root[data-theme="light"] #btnSend,
:root[data-theme="light"] .modal .btn.primary{
  color:#ffffff !important;
  background:linear-gradient(135deg, #16c784 0%, #0e72ed 100%) !important;
  border-color:rgba(14,114,237,.48) !important;
  box-shadow:0 10px 24px rgba(14,114,237,.22) !important;
}
:root[data-theme="light"] .btn.danger,
:root[data-theme="light"] .modal .btn.danger{
  color:#ffffff !important;
  background:linear-gradient(135deg, #ef4444, #b91c1c) !important;
  border-color:rgba(185,28,28,.38) !important;
}
:root[data-theme="light"] .composer .icon-btn{
  color:#082147 !important;
  background:#ffffff !important;
}
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .tab{
  color:#f8fafc !important;
  background:rgba(15,23,42,.76) !important;
  border-color:rgba(148,163,184,.26) !important;
}
:root[data-theme="dark"] .btn.primary,
:root[data-theme="dark"] .tab.active,
:root[data-theme="dark"] #btnSend{
  color:#ffffff !important;
  background:linear-gradient(135deg, #0f766e, #0e72ed) !important;
  border-color:rgba(32,211,194,.35) !important;
}
:root[data-theme="medium"] .btn.primary,
:root[data-theme="medium"] .tab.active,
:root[data-theme="medium"] #btnSend{
  color:#ffffff !important;
  background:linear-gradient(135deg, #16c784, #0e72ed) !important;
}

/* Conversations : contraste garanti pour sombre, médium et clair */
:root[data-theme="dark"] .topbar{
  background:linear-gradient(135deg, rgba(4,16,31,.98), rgba(9,45,78,.96)) !important;
  color:#f8fafc !important;
  border-bottom-color:rgba(148,163,184,.22) !important;
}
:root[data-theme="medium"] .topbar{
  background:linear-gradient(135deg, rgba(9,126,103,.96), rgba(8,94,188,.94)) !important;
  color:#ffffff !important;
}
:root[data-theme="light"] .topbar{
  background:rgba(255,255,255,.96) !important;
  color:#082147 !important;
  border-bottom-color:#d6e3f2 !important;
}
:root[data-theme="light"] .topbar .muted{
  color:#49647f !important;
}

:root[data-theme="dark"] .content{
  background:
    radial-gradient(560px 320px at 96% 6%, rgba(32,211,194,.10), transparent 70%),
    linear-gradient(180deg, rgba(2,6,23,.28), rgba(3,10,24,.45)) !important;
}
:root[data-theme="medium"] .content{
  background:
    radial-gradient(560px 300px at 92% 18%, rgba(85,229,55,.14), transparent 72%),
    radial-gradient(620px 360px at 8% 92%, rgba(14,114,237,.18), transparent 72%) !important;
}
:root[data-theme="light"] .content{
  background:
    radial-gradient(560px 300px at 92% 18%, rgba(22,199,132,.12), transparent 72%),
    radial-gradient(620px 360px at 8% 92%, rgba(14,114,237,.10), transparent 72%),
    #f8fbff !important;
}

:root[data-theme="dark"] .messages{
  background:
    radial-gradient(520px 280px at 100% 0%, rgba(32,211,194,.10), transparent 70%),
    #07111f !important;
  color:#f8fafc !important;
  border-color:rgba(148,163,184,.23) !important;
}
:root[data-theme="medium"] .messages{
  background:
    radial-gradient(520px 280px at 100% 0%, rgba(31,200,219,.14), transparent 70%),
    linear-gradient(180deg, #ecfeff, #f0fdf4) !important;
  color:#082147 !important;
  border-color:rgba(255,255,255,.45) !important;
}
:root[data-theme="light"] .messages{
  background:
    radial-gradient(520px 280px at 100% 0%, rgba(31,200,219,.10), transparent 70%),
    #f8fafc !important;
  color:#082147 !important;
  border-color:#d6e3f2 !important;
}

:root[data-theme="dark"] .msg{
  background:#0f1e33 !important;
  color:#f8fafc !important;
  border-color:rgba(148,163,184,.20) !important;
}
:root[data-theme="dark"] .msg.me{
  background:linear-gradient(135deg, #0f766e, #075e9f) !important;
  color:#ffffff !important;
  border-color:rgba(32,211,194,.34) !important;
}
:root[data-theme="medium"] .msg,
:root[data-theme="light"] .msg{
  background:#ffffff !important;
  color:#082147 !important;
  border-color:#d6e3f2 !important;
  box-shadow:0 8px 18px rgba(11,37,71,.08) !important;
}
:root[data-theme="medium"] .msg.me{
  background:linear-gradient(135deg, #c9f7d2, #dbeafe) !important;
  color:#052e2b !important;
  border-color:#a7e7d6 !important;
}
:root[data-theme="light"] .msg.me{
  background:linear-gradient(135deg, #dcfce7, #dbeafe) !important;
  color:#052e2b !important;
  border-color:#bdebd0 !important;
}
:root[data-theme="medium"] .msg *,
:root[data-theme="light"] .msg *{
  color:inherit;
}
:root[data-theme="medium"] .msg-meta,
:root[data-theme="light"] .msg-meta,
:root[data-theme="medium"] .msg .muted,
:root[data-theme="light"] .msg .muted{
  color:#49647f !important;
}
:root[data-theme="medium"] .msg.me .msg-meta,
:root[data-theme="light"] .msg.me .msg-meta{
  color:#31576f !important;
}
:root[data-theme="dark"] .msg-meta,
:root[data-theme="dark"] .msg .muted{
  color:#b8c7da !important;
}
:root[data-theme="medium"] .msg a,
:root[data-theme="light"] .msg a{
  color:#075eea !important;
}
:root[data-theme="dark"] .msg a{
  color:#7dd3fc !important;
}
:root[data-theme="medium"] .msg-text-original,
:root[data-theme="light"] .msg-text-original{
  border-top-color:#d6e3f2 !important;
  opacity:1 !important;
}
:root[data-theme="dark"] .msg-text-original{
  border-top-color:rgba(255,255,255,.15) !important;
  opacity:.9 !important;
}
:root[data-theme="medium"] .reply-quote,
:root[data-theme="light"] .reply-quote,
:root[data-theme="medium"] .reply-composer,
:root[data-theme="light"] .reply-composer{
  background:#f1f7fe !important;
  color:#082147 !important;
  border-color:#0e72ed !important;
}
:root[data-theme="dark"] .reply-quote,
:root[data-theme="dark"] .reply-composer{
  background:rgba(15,30,51,.88) !important;
  color:#e2e8f0 !important;
  border-color:#20d3c2 !important;
}
:root[data-theme="medium"] .reaction-pill,
:root[data-theme="light"] .reaction-pill,
:root[data-theme="medium"] .msg-react-btn,
:root[data-theme="medium"] .msg-reply-btn,
:root[data-theme="medium"] .msg-report-btn,
:root[data-theme="medium"] .msg-del,
:root[data-theme="light"] .msg-react-btn,
:root[data-theme="light"] .msg-reply-btn,
:root[data-theme="light"] .msg-report-btn,
:root[data-theme="light"] .msg-del{
  color:#082147 !important;
  background:#eef6ff !important;
  border-color:#cbd8e7 !important;
}

/* Boutique / monétisation en thème clair : tous les textes restent sombres sur fond clair. */
:root[data-theme="light"] .money-summary,
:root[data-theme="light"] .money-section,
:root[data-theme="light"] .money-grid,
:root[data-theme="light"] .money-card,
:root[data-theme="light"] .money-stat{
  color:#082147 !important;
}
:root[data-theme="light"] .money-card,
:root[data-theme="light"] .money-stat,
:root[data-theme="light"] .money-mm-line{
  background:#ffffff !important;
  border-color:#d6e3f2 !important;
  box-shadow:0 8px 18px rgba(11,37,71,.06);
}
:root[data-theme="light"] .money-title,
:root[data-theme="light"] .money-value,
:root[data-theme="light"] .money-section h3,
:root[data-theme="light"] .money-card label,
:root[data-theme="light"] .money-card span{
  color:#082147 !important;
}
:root[data-theme="light"] .money-label,
:root[data-theme="light"] .money-price,
:root[data-theme="light"] .money-card .muted,
:root[data-theme="light"] .money-section .muted{
  color:#49647f !important;
}
:root[data-theme="light"] .money-stickers span{
  background:#eef6ff !important;
  color:#082147 !important;
}

/* États vides, listes et statuts : contraste renforcé */
:root[data-theme="light"] .empty{
  background:rgba(255,255,255,.78) !important;
  color:#082147 !important;
  border-color:#d6e3f2 !important;
}
:root[data-theme="light"] .empty-title,
:root[data-theme="light"] .landing-features span{
  color:#082147 !important;
  text-shadow:none !important;
}
:root[data-theme="light"] .landing-features span{
  background:#ffffff !important;
  border-color:#d6e3f2 !important;
}
:root[data-theme="light"] .item{
  color:#082147 !important;
  background:rgba(255,255,255,.84) !important;
  border-color:rgba(11,37,71,.14) !important;
}
:root[data-theme="light"] .item-sub,
:root[data-theme="light"] .muted,
:root[data-theme="light"] .hint{
  color:#49647f !important;
}
:root[data-theme="dark"] .item{
  background:rgba(15,30,51,.72) !important;
  color:#f8fafc !important;
  border-color:rgba(148,163,184,.20) !important;
}
:root[data-theme="dark"] .item-sub,
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .hint{
  color:#b8c7da !important;
}

/* Barre de saisie et bouton Envoyer sur mobile/desktop */
#btnSend{
  font-weight:900;
  white-space:nowrap;
}
:root[data-theme="light"] .composer{
  background:linear-gradient(180deg, rgba(248,251,255,.72), rgba(255,255,255,.96)) !important;
}
:root[data-theme="dark"] .composer{
  background:linear-gradient(180deg, transparent, rgba(2,6,23,.66)) !important;
}
:root[data-theme="medium"] .composer{
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.70)) !important;
}

/* Sidebar en mode portrait : les boutons restent dans le cadre, y compris Administration. */
#mainPanel{
  min-height:0;
}
#mainPanel.panel:not(.hidden){
  display:flex !important;
  flex-direction:column;
}
#conversationList{
  flex:1 1 auto;
  min-height:0;
}
.sidebar-footer{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px !important;
  align-items:stretch;
}
.sidebar-footer .btn{
  min-width:0 !important;
  width:100%;
  max-width:100%;
  justify-content:center;
  align-items:center;
  text-align:center;
  white-space:normal;
  line-height:1.15;
  overflow-wrap:anywhere;
}
#adminLink.admin-access-btn{
  grid-column:1 / -1;
  display:inline-flex !important;
}
@media (max-width: 920px){
  .sidebar{
    min-height:100dvh;
    height:100dvh;
    overflow:hidden;
  }
  .sidebar .panel{
    min-height:0;
  }
  #mainPanel.panel:not(.hidden){
    flex:1 1 auto;
  }
  #conversationList.list{
    max-height:none !important;
    overflow:auto;
  }
  .sidebar-footer{
    flex:0 0 auto;
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .sidebar-footer .btn{
    min-height:40px;
    padding:8px 6px;
    font-size:13px;
  }
  #adminLink.admin-access-btn{
    min-height:40px;
  }
  .sidebar-legal{
    flex:0 0 auto;
    font-size:11px;
    gap:4px;
    padding-top:7px;
    margin-top:7px;
  }
}
@media (max-width: 380px){
  .sidebar-footer .btn{
    font-size:12px;
    padding:7px 5px;
  }
  .brand-title{
    font-size:18px;
  }
}



/* === AkiliChat v27: appels, médias, hors connexion et IA locale === */
.offline-banner{
  position:fixed;left:50%;top:8px;transform:translateX(-50%);z-index:1300;
  display:flex;gap:12px;align-items:center;justify-content:center;
  max-width:min(92vw,760px);padding:9px 12px;border-radius:14px;
  background:rgba(18,28,42,.96);color:#fff;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 30px rgba(0,0,0,.28);font-size:13px
}
.offline-banner.has-queue{background:linear-gradient(135deg,#664800,#8a5d00)}
.offline-banner.hidden{display:none!important}

.composer{flex-wrap:wrap}
.composer #messageInput{min-width:120px;flex:1 1 180px}
.composer .icon-btn{flex:0 0 auto}
#btnViewOnce{font-weight:900;font-size:18px}
#btnCustomSticker{font-size:17px}

.msg-link{color:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.msg-media-img,.msg-media-video{max-width:100%;width:auto;border-radius:14px;border:1px solid color-mix(in srgb,var(--border) 80%,transparent)}
.msg-media-video{width:100%}
.msg-media-audio{width:100%}
.msg-media-wrap{margin-top:8px}
.custom-sticker-message{background:transparent}
.custom-sticker-img{display:block;width:min(180px,48vw);height:min(180px,48vw);object-fit:contain;border:0;filter:drop-shadow(0 8px 12px rgba(0,0,0,.18))}
.view-once-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;margin-bottom:6px;border-radius:999px;background:rgba(0,0,0,.35);color:#fff;font-size:11px;font-weight:800}
.view-once-open{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--card) 85%,transparent);color:var(--text);text-align:left}
.view-once-open small{display:block;margin-top:3px;color:var(--muted)}
.view-once-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--primary);color:#fff;font-size:23px;font-weight:900}
.view-once-consumed{display:flex;gap:10px;align-items:center;padding:12px;border:1px dashed var(--border);border-radius:14px;color:var(--muted)}
.view-once-consumed span{font-size:24px}
.view-once-overlay{position:fixed;inset:0;z-index:5000;background:#050708;display:flex;align-items:center;justify-content:center;padding:44px 12px 20px}
.view-once-stage{width:100%;height:100%;display:grid;place-items:center}
.view-once-stage img,.view-once-stage video{max-width:100%;max-height:100%;object-fit:contain}
.view-once-close{position:absolute;right:14px;top:14px;border:0;border-radius:50%;width:42px;height:42px;background:rgba(255,255,255,.14);color:#fff;font-size:22px}
.view-once-warning{position:absolute;left:50%;top:14px;transform:translateX(-50%);max-width:72vw;color:#fff;background:rgba(0,0,0,.55);padding:8px 12px;border-radius:999px;font-size:12px;text-align:center}
.offline-pending{opacity:.82;border-style:dashed!important}
.msg-row[data-offline="1"] .msg-meta{color:#d5a100}

.sticker-library-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.custom-sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px}
.custom-sticker-item{position:relative;aspect-ratio:1;background:color-mix(in srgb,var(--card) 90%,transparent);border:1px solid var(--border);border-radius:16px;padding:6px}
.custom-sticker-item>button:first-child{width:100%;height:100%;border:0;background:transparent;padding:0}
.custom-sticker-item img{width:100%;height:100%;object-fit:contain}
.sticker-delete{position:absolute;right:-5px;top:-5px;border:0;border-radius:50%;width:24px;height:24px;background:#c62828;color:#fff;font-weight:900}
.empty-local{padding:24px;text-align:center}

.call-volume-control{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:10px 12px;margin:8px 0 12px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--card) 82%,transparent)}
.call-volume-control input[type="range"]{width:100%;min-width:110px}
#callVolumeValue{font-variant-numeric:tabular-nums;font-size:12px;font-weight:800;min-width:42px;text-align:right}

.story-reactions{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:8;display:flex;gap:10px}
.story-reaction-btn{border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.42);color:#fff;border-radius:999px;padding:9px 14px;font-weight:800;backdrop-filter:blur(8px)}
.story-reaction-btn.active{background:#0fb780;border-color:#5bf0bd}

.settings-feature-card{display:grid;gap:9px}
.settings-toggle-row,.settings-select-row{display:flex;gap:10px;align-items:center;margin-top:4px}
.settings-select-row{justify-content:space-between}
.settings-button-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.camera-choice,.ai-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.offline-center-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.offline-items{display:grid;gap:8px}
.offline-item{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:10px;border:1px solid var(--border);border-radius:12px}
.offline-item small{display:block;color:var(--muted);margin:3px 0}
.local-exchange{display:grid;gap:10px}
.local-decrypted{white-space:pre-wrap;word-break:break-word;min-height:60px;padding:10px;border-radius:10px;background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid var(--border)}
.model-pack{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px;border:1px solid var(--border);border-radius:14px;margin-bottom:10px}
.model-pack small{display:block;color:var(--muted);margin-top:4px}
.ai-local-banner{padding:10px;border-radius:12px;background:color-mix(in srgb,var(--primary) 14%,var(--card));border:1px solid color-mix(in srgb,var(--primary) 45%,var(--border));margin-bottom:12px}
.ai-action-grid{margin-bottom:12px}
.ai-result{white-space:pre-wrap;min-height:120px;max-height:38vh;overflow:auto;padding:12px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--card) 88%,transparent);margin-top:12px}
.ai-confidence{margin-top:8px;color:var(--muted);font-size:12px}
.ai-transcribe{display:grid;gap:4px;margin-top:10px}
.low-power-mode *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
.low-power-mode .landing-hero,.low-power-mode .splash-hero{display:none!important}
.low-data-mode video{max-height:52vh}

@media (max-width:640px){
  .offline-banner{top:4px;width:calc(100vw - 12px);font-size:12px}
  .composer{gap:6px}
  .composer .icon-btn{width:38px;height:38px}
  .camera-choice,.ai-action-grid{grid-template-columns:1fr}
  .call-volume-control{grid-template-columns:auto 1fr auto}
  #callVolumeValue{grid-column:1/-1;text-align:center}
  .story-reactions{bottom:max(14px,env(safe-area-inset-bottom))}
}


/* Enregistreur vidéo instantanée v27 */
.instant-recorder{display:grid;gap:12px}
.instant-recorder video{display:block;width:100%;max-height:62vh;object-fit:contain;background:#05070a;border-radius:16px}
.instant-recorder-time{text-align:center;font-size:1.15rem;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.08em}


/* v28 — sélection de conversation pour l’assistant local */
.ai-conversation-prompt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--primary) 48%,var(--border));
  border-radius:14px;
  background:color-mix(in srgb,var(--primary) 14%,var(--card));
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.ai-conversation-prompt>div{min-width:0;display:grid;gap:2px}
.ai-conversation-prompt strong{font-weight:900}
.ai-conversation-prompt span{font-size:12px;color:var(--muted);line-height:1.35}
body.ai-selecting-conversation #conversationList .item{
  outline-offset:-2px;
}
body.ai-selecting-conversation #conversationList .item:hover,
body.ai-selecting-conversation #conversationList .item:focus-within{
  outline:2px solid color-mix(in srgb,var(--primary) 72%,transparent);
}

/* v28 — vues, mentions J’aime/Je n’aime pas et contact depuis un statut */
.status-audience-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
.status-audience-summary>div{
  display:grid;
  place-items:center;
  gap:2px;
  padding:10px 6px;
  border:1px solid var(--border);
  border-radius:13px;
  background:color-mix(in srgb,var(--card) 90%,transparent);
}
.status-audience-summary strong{font-size:1.15rem;font-variant-numeric:tabular-nums}
.status-audience-summary span{font-size:11px;color:var(--muted)}
.status-viewer-row{min-width:0}
.status-viewer-meta{flex:1 1 auto}
.status-viewer-activity{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:4px;
  font-size:12px;
}
.status-reaction-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:3px 7px;
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
  border:1px solid var(--border);
}
.status-reaction-badge.is-like{
  color:#087a56;
  background:rgba(15,183,128,.14);
  border-color:rgba(15,183,128,.36);
}
.status-reaction-badge.is-dislike{
  color:#a12626;
  background:rgba(220,65,65,.12);
  border-color:rgba(220,65,65,.32);
}
.status-reaction-badge.is-view{
  color:var(--text);
  background:color-mix(in srgb,var(--card) 82%,transparent);
}
.status-viewer-message{flex:0 0 auto}
.status-audience-empty{padding:18px 10px;text-align:center}

@media (max-width:520px){
  .ai-conversation-prompt{align-items:flex-start}
  .status-viewer-row{align-items:flex-start;flex-wrap:wrap}
  .status-viewer-meta{width:calc(100% - 54px)}
  .status-viewer-message{margin-left:52px}
}


/* =========================================================================
   AKILICHAT V29 — INTERFACE MOBILE PREMIUM
   Référence visuelle : en-tête bleu/turquoise, surfaces claires, cartes
   arrondies, navigation par tuiles et hiérarchie typographique renforcée.
   ========================================================================= */
:root{
  --v29-page:#f2f4f8;
  --v29-page-alt:#e9edf4;
  --v29-surface:#ffffff;
  --v29-surface-soft:#f8f9fc;
  --v29-text:#101522;
  --v29-subtext:#626978;
  --v29-line:rgba(20,35,62,.10);
  --v29-header-a:#0b56c9;
  --v29-header-b:#0aa8bf;
  --v29-header-c:#19c98f;
  --v29-green:#19bd63;
  --v29-blue:#2672e8;
  --v29-purple:#7048e8;
  --v29-shadow:0 14px 34px rgba(24,39,75,.13);
  --v29-shadow-soft:0 8px 22px rgba(24,39,75,.09);
  --v29-radius-xl:28px;
  --v29-radius-lg:22px;
  --v29-radius-md:17px;
}
:root[data-theme="medium"]{
  --v29-page:#e8f1f4;
  --v29-page-alt:#dcebef;
  --v29-surface:#f9fdff;
  --v29-surface-soft:#edf7f8;
  --v29-text:#08263a;
  --v29-subtext:#456676;
  --v29-line:rgba(8,63,82,.13);
}
:root[data-theme="dark"]{
  --v29-page:#07111e;
  --v29-page-alt:#0b1726;
  --v29-surface:#101d2e;
  --v29-surface-soft:#14243a;
  --v29-text:#f7fafc;
  --v29-subtext:#aab8ca;
  --v29-line:rgba(202,221,243,.12);
  --v29-shadow:0 18px 42px rgba(0,0,0,.32);
  --v29-shadow-soft:0 10px 26px rgba(0,0,0,.22);
}

/* État de page ajouté par app.js afin de distinguer proprement
   l'écran d'authentification de la liste des conversations. */
body.is-authenticated,
body.is-auth-screen{
  background:var(--v29-page) !important;
}

/* En-tête de marque */
.brand{
  min-height:74px;
  border:0 !important;
  border-radius:0 0 var(--v29-radius-xl) var(--v29-radius-xl) !important;
  background:linear-gradient(120deg,var(--v29-header-a) 0%,var(--v29-header-b) 56%,var(--v29-header-c) 100%) !important;
  color:#fff !important;
  box-shadow:0 14px 34px rgba(11,86,201,.22) !important;
  overflow:hidden;
  isolation:isolate;
}
.brand::before{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-90px;
  top:-150px;
  border-radius:50%;
  border:28px solid rgba(255,255,255,.08);
  pointer-events:none;
  z-index:-1;
}
.brand::after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  left:38%;
  bottom:-72px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  pointer-events:none;
  z-index:-1;
}
.brand-title{
  color:#fff !important;
  font-weight:900 !important;
  letter-spacing:-.035em;
  text-shadow:0 3px 12px rgba(0,42,98,.24) !important;
}
.brand-logo{
  border-radius:13px !important;
  border:3px solid rgba(255,255,255,.92);
  background:#fff;
  box-shadow:0 8px 18px rgba(0,43,105,.22) !important;
}
.brand-actions{
  align-items:center;
  gap:8px !important;
}
.brand-actions .icon-btn{
  width:42px;
  height:42px;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.26) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  box-shadow:none !important;
  display:grid;
  place-items:center;
}
#btnSettings,
#btnLogout{
  font-size:0 !important;
}
#btnSettings::before,
#btnLogout::before{
  content:"";
  width:21px;
  height:21px;
  display:block;
  background:currentColor;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
}
#btnSettings::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94c.04-.31.06-.63.06-.94s-.02-.63-.07-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.61-.22l-2.39.96a7.13 7.13 0 0 0-1.63-.95L14.37 2.8a.49.49 0 0 0-.49-.4h-3.84a.49.49 0 0 0-.49.4l-.36 2.52c-.58.24-1.12.56-1.63.95L5.17 5.3a.49.49 0 0 0-.61.22L2.64 8.84a.5.5 0 0 0 .12.64l2.03 1.58c-.05.31-.08.64-.08.96 0 .31.03.62.07.92l-2.03 1.59a.5.5 0 0 0-.12.64l1.92 3.32c.13.23.4.32.63.22l2.38-.96c.5.39 1.05.71 1.63.95l.36 2.52c.04.24.24.41.49.41h3.84c.25 0 .45-.17.49-.41l.36-2.52c.58-.24 1.13-.56 1.63-.95l2.38.96c.23.1.5.01.63-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.02-1.59ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94c.04-.31.06-.63.06-.94s-.02-.63-.07-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.61-.22l-2.39.96a7.13 7.13 0 0 0-1.63-.95L14.37 2.8a.49.49 0 0 0-.49-.4h-3.84a.49.49 0 0 0-.49.4l-.36 2.52c-.58.24-1.12.56-1.63.95L5.17 5.3a.49.49 0 0 0-.61.22L2.64 8.84a.5.5 0 0 0 .12.64l2.03 1.58c-.05.31-.08.64-.08.96 0 .31.03.62.07.92l-2.03 1.59a.5.5 0 0 0-.12.64l1.92 3.32c.13.23.4.32.63.22l2.38-.96c.5.39 1.05.71 1.63.95l.36 2.52c.04.24.24.41.49.41h3.84c.25 0 .45-.17.49-.41l.36-2.52c.58-.24 1.13-.56 1.63-.95l2.38.96c.23.1.5.01.63-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.02-1.59ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E");
}
#btnLogout::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 17v-2h4V9h-4V7l-5 5 5 5Zm9-14H9a2 2 0 0 0-2 2v3h2V5h10v14H9v-3H7v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 17v-2h4V9h-4V7l-5 5 5 5Zm9-14H9a2 2 0 0 0-2 2v3h2V5h10v14H9v-3H7v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z'/%3E%3C/svg%3E");
}

/* Surfaces générales */
.sidebar{
  color:var(--v29-text) !important;
}
.panel{
  color:var(--v29-text);
}
.search-row input,
.form input,
.form select,
.form textarea{
  color:var(--v29-text) !important;
  background:var(--v29-surface-soft) !important;
  border:1px solid var(--v29-line) !important;
  box-shadow:inset 0 1px 2px rgba(20,35,62,.04) !important;
}
.search-row input::placeholder,
.form input::placeholder{
  color:var(--v29-subtext) !important;
}

/* Écran d'authentification inspiré de la maquette fournie */
body.is-auth-screen .sidebar,
body.auth-booting .sidebar{
  padding:0 16px 24px !important;
  align-items:center;
  overflow:auto !important;
  background:
    radial-gradient(480px 320px at 8% 14%,rgba(255,255,255,.14),transparent 68%),
    radial-gradient(520px 360px at 100% 75%,rgba(64,255,183,.22),transparent 70%),
    linear-gradient(145deg,#174ac4 0%,#0b7fc1 46%,#13bd95 100%) !important;
}
body.is-auth-screen .sidebar::before,
body.auth-booting .sidebar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(160px 160px at -10% 86%,transparent 59%,rgba(255,255,255,.08) 60% 73%,transparent 74%),
    radial-gradient(240px 240px at 110% 8%,transparent 58%,rgba(255,255,255,.07) 59% 70%,transparent 71%);
}
body.is-auth-screen .sidebar::after,
body.auth-booting .sidebar::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;
  width:min(520px,94vw);
  height:176px;
  transform:translateX(-50%);
  opacity:.88;
  pointer-events:none;
  background:url("../assets/brand/akilichat-gallery.png") center bottom/contain no-repeat;
}
body.is-auth-screen .brand,
body.auth-booting .brand{
  width:min(540px,100%);
  flex:0 0 auto;
  margin:0 auto;
  padding:calc(16px + env(safe-area-inset-top)) 10px 12px !important;
  min-height:86px;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
body.is-auth-screen .brand::before,
body.is-auth-screen .brand::after,
body.auth-booting .brand::before,
body.auth-booting .brand::after{
  display:none;
}
body.is-auth-screen #authPanel,
body.auth-booting #authPanel{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  width:min(480px,100%);
  margin:clamp(22px,7vh,72px) auto 172px;
  padding:22px !important;
  border:1px solid rgba(255,255,255,.70) !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 24px 64px rgba(0,42,105,.27) !important;
  color:#142033 !important;
  backdrop-filter:blur(16px);
}
body.is-auth-screen #authPanel .tabs,
body.auth-booting #authPanel .tabs{
  gap:0;
  border-bottom:1px solid #e4e8ef;
}
body.is-auth-screen #authPanel .tab,
body.auth-booting #authPanel .tab{
  position:relative;
  border:0 !important;
  border-radius:0 !important;
  padding:14px 8px !important;
  color:#4c5260 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-weight:750;
}
body.is-auth-screen #authPanel .tab.active,
body.auth-booting #authPanel .tab.active{
  color:#159b55 !important;
}
body.is-auth-screen #authPanel .tab.active::after,
body.auth-booting #authPanel .tab.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:3px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,#1bbc61,#16a0a1);
}
body.is-auth-screen #authPanel .form,
body.auth-booting #authPanel .form{
  gap:16px;
  padding:20px 4px 2px;
}
body.is-auth-screen #authPanel input,
body.auth-booting #authPanel input{
  min-height:58px;
  border-radius:14px !important;
  border:1px solid #ccd3de !important;
  background:#f8f9fb !important;
  color:#172033 !important;
  font-size:16px;
}
body.is-auth-screen #authPanel input:focus,
body.auth-booting #authPanel input:focus{
  border-color:#2c84d8 !important;
  box-shadow:0 0 0 3px rgba(44,132,216,.12) !important;
}
body.is-auth-screen #authPanel .btn.primary,
body.auth-booting #authPanel .btn.primary{
  min-height:56px;
  border:0 !important;
  border-radius:14px !important;
  background:linear-gradient(100deg,#22c96d,#0aa976) !important;
  color:#fff !important;
  font-size:17px;
  font-weight:900;
  box-shadow:0 12px 24px rgba(18,170,102,.24) !important;
}

/* Liste des conversations */
body.is-authenticated .sidebar{
  background:linear-gradient(180deg,var(--v29-page),var(--v29-page-alt)) !important;
}
body.is-authenticated #mainPanel{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
body.is-authenticated .search-row{
  position:relative;
  gap:10px;
  margin:0 0 14px;
}
body.is-authenticated .search-row::before{
  content:"";
  position:absolute;
  z-index:2;
  left:17px;
  top:50%;
  width:21px;
  height:21px;
  transform:translateY(-50%);
  background:var(--v29-subtext);
  opacity:.8;
  pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m21.5 20.1-5.2-5.2a8 8 0 1 0-1.4 1.4l5.2 5.2 1.4-1.4ZM4 10a6 6 0 1 1 12 0 6 6 0 0 1-12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m21.5 20.1-5.2-5.2a8 8 0 1 0-1.4 1.4l5.2 5.2 1.4-1.4ZM4 10a6 6 0 1 1 12 0 6 6 0 0 1-12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.is-authenticated #searchConversations{
  width:100%;
  min-width:0;
  height:52px;
  padding:0 54px 0 48px !important;
  border:1px solid var(--v29-line) !important;
  border-radius:18px !important;
  background:var(--v29-surface) !important;
  color:var(--v29-text) !important;
  font-size:16px;
  box-shadow:var(--v29-shadow-soft) !important;
}
body.is-authenticated #btnNewChat{
  flex:0 0 52px;
  width:52px;
  height:52px;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  color:#fff !important;
  background:linear-gradient(145deg,#2d6fe6,#14c6a0) !important;
  box-shadow:0 10px 22px rgba(32,112,205,.27) !important;
  font-size:0 !important;
}
body.is-authenticated #btnNewChat::before{
  content:"";
  display:block;
  width:24px;
  height:24px;
  margin:auto;
  background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.7 2.3a2.4 2.4 0 0 1 3 3L9 18l-5.5 1.5L5 14 18.7 2.3ZM4 21h17v2H2v-2h2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.7 2.3a2.4 2.4 0 0 1 3 3L9 18l-5.5 1.5L5 14 18.7 2.3ZM4 21h17v2H2v-2h2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.is-authenticated .list{
  gap:11px !important;
  padding:2px 3px 10px !important;
}
body.is-authenticated .item{
  position:relative;
  min-height:84px;
  padding:12px 13px !important;
  gap:13px !important;
  border:1px solid var(--v29-line) !important;
  border-radius:20px !important;
  background:var(--v29-surface) !important;
  color:var(--v29-text) !important;
  box-shadow:var(--v29-shadow-soft) !important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
body.is-authenticated .item:hover,
body.is-authenticated .item:active{
  transform:translateY(-1px);
  border-color:rgba(31,139,215,.28) !important;
  box-shadow:0 12px 28px rgba(24,39,75,.14) !important;
}
body.is-authenticated .item.active{
  border-color:rgba(26,189,99,.42) !important;
  box-shadow:0 0 0 2px rgba(26,189,99,.10),var(--v29-shadow-soft) !important;
}
body.is-authenticated .item .avatar{
  position:relative;
  flex:0 0 54px;
  width:54px;
  height:54px;
  border-radius:50% !important;
  overflow:visible;
  border:0 !important;
  color:#fff;
  background:linear-gradient(145deg,#1f7be0,#18bf8a) !important;
  box-shadow:0 5px 14px rgba(24,68,121,.17);
}
body.is-authenticated .item .avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  border:2px solid var(--v29-surface);
}
body.is-authenticated .item.is-online .avatar::after{
  content:"";
  position:absolute;
  right:-1px;
  bottom:1px;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#24c765;
  border:3px solid var(--v29-surface);
}
body.is-authenticated .item-title{
  color:var(--v29-text) !important;
  font-size:17px;
  font-weight:900 !important;
  line-height:1.25;
}
body.is-authenticated .item-sub{
  max-width:min(52vw,260px);
  margin-top:4px;
  color:var(--v29-subtext) !important;
  font-size:14px;
  line-height:1.3;
}
body.is-authenticated .item-actions{
  margin-left:auto;
}
body.is-authenticated .item-del{
  width:48px;
  height:48px;
  border:0 !important;
  border-radius:15px !important;
  background:#111827 !important;
  color:#fff !important;
  box-shadow:0 8px 17px rgba(17,24,39,.16);
  font-size:20px;
}

/* Navigation en tuiles */
body.is-authenticated .sidebar-footer{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:8px !important;
  padding:10px 0 0 !important;
}
body.is-authenticated .sidebar-footer .btn{
  min-width:0 !important;
  min-height:94px !important;
  width:100% !important;
  padding:12px 6px 10px !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--v29-line) !important;
  border-radius:20px !important;
  background:var(--v29-surface) !important;
  color:var(--v29-text) !important;
  box-shadow:var(--v29-shadow-soft) !important;
  font-size:12px !important;
  font-weight:800;
  line-height:1.08 !important;
  overflow:visible !important;
}
body.is-authenticated .sidebar-footer .btn::before{
  content:"";
  display:block;
  width:34px;
  height:34px;
  flex:0 0 34px;
  background:currentColor;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
}
body.is-authenticated #btnNewGroup{color:#202735 !important}
body.is-authenticated #btnNewGroup::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5Z'/%3E%3C/svg%3E");
}
body.is-authenticated #btnOnlineUsers{color:#3477df !important}
body.is-authenticated #btnOnlineUsers::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm8-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM8 13c-4.4 0-7 2.2-7 5v2h14v-2c0-2.8-2.6-5-7-5Zm8.2-.8c-.7 0-1.4.1-2 .2 1.7 1.3 2.8 3.2 2.8 5.6v2h6v-1.6c0-3.7-3-6.2-6.8-6.2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm8-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM8 13c-4.4 0-7 2.2-7 5v2h14v-2c0-2.8-2.6-5-7-5Zm8.2-.8c-.7 0-1.4.1-2 .2 1.7 1.3 2.8 3.2 2.8 5.6v2h6v-1.6c0-3.7-3-6.2-6.8-6.2Z'/%3E%3C/svg%3E");
}
body.is-authenticated #btnStories{color:#252d3a !important}
body.is-authenticated #btnStories::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 3 6.2 5H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.2L16 3H8Zm4 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-2.2a2.8 2.8 0 1 0 0-5.6 2.8 2.8 0 0 0 0 5.6Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 3 6.2 5H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.2L16 3H8Zm4 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-2.2a2.8 2.8 0 1 0 0-5.6 2.8 2.8 0 0 0 0 5.6Z'/%3E%3C/svg%3E");
}
body.is-authenticated #btnMonetization{
  color:#13a876 !important;
  background:linear-gradient(145deg,#f8fffb,#eefaf6) !important;
}
body.is-authenticated #btnMonetization::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h16l-1 14H5L4 3Zm2 16h12v2H6v-2Zm3-11h6v2H9V8Zm0 4h4v2H9v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h16l-1 14H5L4 3Zm2 16h12v2H6v-2Zm3-11h6v2H9V8Zm0 4h4v2H9v-2Z'/%3E%3C/svg%3E");
}
body.is-authenticated #adminLink.admin-access-btn{
  grid-column:1/-1 !important;
  min-height:66px !important;
  flex-direction:row !important;
  gap:12px;
  border:0 !important;
  border-radius:20px !important;
  color:#fff !important;
  background:linear-gradient(105deg,#7147e9 0%,#276bdc 48%,#16b7c0 100%) !important;
  box-shadow:0 13px 30px rgba(65,83,205,.28) !important;
  font-size:18px !important;
  font-weight:900 !important;
}
body.is-authenticated #adminLink.admin-access-btn::before{
  width:27px;
  height:27px;
  flex-basis:27px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 3 6v6c0 5.6 3.8 9.8 9 11 5.2-1.2 9-5.4 9-11V6l-9-4Zm1 6h3v2h-3v7h-2v-7H8V8h3V5h2v3Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 3 6v6c0 5.6 3.8 9.8 9 11 5.2-1.2 9-5.4 9-11V6l-9-4Zm1 6h3v2h-3v7h-2v-7H8V8h3V5h2v3Z'/%3E%3C/svg%3E");
}
body.is-authenticated .sidebar-legal{
  color:var(--v29-subtext) !important;
  border-top-color:var(--v29-line) !important;
}

/* Fenêtre de conversation cohérente avec le nouvel habillage */
.topbar{
  min-height:72px;
  background:linear-gradient(120deg,var(--v29-header-a),var(--v29-header-b) 58%,var(--v29-header-c)) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 10px 28px rgba(16,82,172,.20) !important;
}
.topbar .icon-btn{
  color:#fff !important;
  border-color:rgba(255,255,255,.22) !important;
  background:rgba(255,255,255,.10) !important;
}
.topbar .muted{color:rgba(255,255,255,.78) !important}
.avatar--lg{
  border-radius:50% !important;
}
.content{
  background:
    radial-gradient(520px 290px at 100% 0%,rgba(30,199,169,.09),transparent 70%),
    linear-gradient(180deg,var(--v29-page),var(--v29-page-alt)) !important;
}
.messages{
  border:1px solid var(--v29-line) !important;
  background:
    radial-gradient(420px 250px at 100% 0%,rgba(25,201,143,.09),transparent 70%),
    var(--v29-surface-soft) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5) !important;
}
:root[data-theme="dark"] .messages{
  box-shadow:none !important;
}
.composer{
  border-top:1px solid var(--v29-line);
  background:var(--v29-surface) !important;
}
#messageInput{
  border:1px solid var(--v29-line) !important;
  background:var(--v29-surface-soft) !important;
  color:var(--v29-text) !important;
}
.composer .icon-btn{
  border-color:var(--v29-line) !important;
  background:var(--v29-surface-soft) !important;
  color:var(--v29-text) !important;
}
#btnSend{
  border:0 !important;
  color:#fff !important;
  background:linear-gradient(145deg,#2a70e4,#13c39a) !important;
  box-shadow:0 8px 18px rgba(31,112,205,.24) !important;
}

/* États vides et modaux */
.empty{
  border:1px solid var(--v29-line) !important;
  background:var(--v29-surface) !important;
  color:var(--v29-text) !important;
  box-shadow:var(--v29-shadow) !important;
}
.empty-title{color:var(--v29-text) !important;text-shadow:none !important}
.modal-card{
  border:1px solid var(--v29-line) !important;
  border-radius:24px !important;
  background:var(--v29-surface) !important;
  color:var(--v29-text) !important;
  box-shadow:0 24px 80px rgba(3,17,39,.32) !important;
}
.modal-head{
  background:linear-gradient(120deg,var(--v29-header-a),var(--v29-header-b),var(--v29-header-c));
  color:#fff;
}
.modal-head .icon-btn{color:#fff !important;background:rgba(255,255,255,.12) !important}
.modal-body .btn:not(.primary):not(.danger){
  color:var(--v29-text) !important;
  background:var(--v29-surface-soft) !important;
  border-color:var(--v29-line) !important;
}

/* Bureau et tablette */
@media (min-width:921px){
  .app{grid-template-columns:390px 1fr !important}
  .sidebar{
    padding:0 14px 14px !important;
    background:linear-gradient(180deg,var(--v29-page),var(--v29-page-alt)) !important;
  }
  .brand{
    margin:0 -14px 0;
    padding:18px 20px !important;
  }
  #mainPanel{
    margin-top:14px;
    min-height:0;
    padding:14px !important;
    border:1px solid var(--v29-line) !important;
    border-radius:24px !important;
    background:rgba(255,255,255,.34) !important;
    box-shadow:none !important;
  }
  :root[data-theme="dark"] #mainPanel{background:rgba(16,29,46,.54) !important}
  body.is-auth-screen .sidebar{
    grid-column:1/-1;
    width:100%;
  }
  body.is-auth-screen .main{display:none}
}

/* Mobile portrait : organisation fidèle aux maquettes */
@media (max-width:920px){
  html,body{background:var(--v29-page) !important}
  .app{
    width:100%;
    min-height:100dvh;
    background:var(--v29-page) !important;
  }
  .sidebar{
    width:100% !important;
    height:100dvh !important;
    min-height:100dvh !important;
    padding:0 12px 10px !important;
    overflow:hidden !important;
  }
  .brand{
    flex:0 0 auto;
    margin:0 -12px;
    min-height:94px;
    padding:calc(12px + env(safe-area-inset-top)) 20px 14px !important;
  }
  .brand-logo{width:48px !important;height:48px !important}
  .brand-title{font-size:26px !important}
  #mainPanel.panel:not(.hidden){
    flex:1 1 auto;
    min-height:0;
    margin:0;
    padding:15px 0 0 !important;
    overflow:hidden;
  }
  #conversationList.list{
    flex:1 1 auto;
    max-height:none !important;
    min-height:80px;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  body.is-authenticated .sidebar-footer{
    flex:0 0 auto;
  }
  body.is-authenticated .sidebar-legal{
    flex:0 0 auto;
    justify-content:center;
    max-height:34px;
    overflow:hidden;
    margin-top:6px !important;
    padding-top:6px !important;
    font-size:9.5px !important;
    line-height:1.15;
  }
  body.chat-mode .topbar{
    min-height:68px;
    padding-top:calc(10px + env(safe-area-inset-top));
  }
  body.chat-mode .content{
    background:var(--v29-page) !important;
  }
  body.chat-mode .messages{
    border:0 !important;
    border-radius:0 !important;
  }
  body.chat-mode .composer{
    padding:8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
  }
}

/* Petits téléphones : conserver quatre tuiles sans couper les libellés. */
@media (max-width:430px){
  body.is-authenticated .sidebar-footer{
    gap:7px !important;
  }
  body.is-authenticated .sidebar-footer .btn{
    min-height:86px !important;
    padding:10px 3px 8px !important;
    border-radius:17px !important;
    font-size:10.5px !important;
  }
  body.is-authenticated .sidebar-footer .btn::before{
    width:29px;
    height:29px;
    flex-basis:29px;
  }
  body.is-authenticated #adminLink.admin-access-btn{
    min-height:56px !important;
    font-size:16px !important;
  }
  body.is-authenticated .item{
    min-height:76px;
    padding:10px 11px !important;
  }
  body.is-authenticated .item .avatar{
    width:48px;
    height:48px;
    flex-basis:48px;
  }
  body.is-authenticated .item-title{font-size:16px}
  body.is-authenticated .item-sub{font-size:13px}
  body.is-authenticated .item-del{
    width:43px;
    height:43px;
  }
}

/* Très faible hauteur : priorité aux conversations et navigation utile. */
@media (max-height:700px) and (max-width:920px){
  .brand{min-height:78px}
  .brand-logo{width:41px !important;height:41px !important}
  .brand-title{font-size:23px !important}
  body.is-authenticated .sidebar-footer .btn{
    min-height:72px !important;
  }
  body.is-authenticated .sidebar-footer .btn::before{
    width:25px;
    height:25px;
    flex-basis:25px;
  }
  body.is-authenticated #adminLink.admin-access-btn{
    min-height:48px !important;
  }
  body.is-authenticated .sidebar-legal{display:none !important}
  body.is-auth-screen #authPanel{margin-top:12px}
  body.is-auth-screen .sidebar::after{height:118px}
  body.is-auth-screen #authPanel{margin-bottom:112px}
}


/* =========================================================================
   AKILICHAT V30 — CONTRASTE DES FENÊTRES EN THÈME MÉDIUM
   Le thème Médium utilise désormais des surfaces claires : les anciennes
   variables sombres rendaient plusieurs descriptions presque blanches.
   ========================================================================= */
:root[data-theme="medium"]{
  --bg:#e8f1f4;
  --bg-accent:#dcebef;
  --panel:#f9fdff;
  --card:#edf7f8;
  --border:#b9cdd5;
  --text:#08263a;
  --muted:#456676;
  --primary:#176fcb;
  --danger:#c62828;
}

/* Texte principal et descriptif des boîtes de dialogue. */
:root[data-theme="medium"] .modal-card,
:root[data-theme="medium"] .modal-body{
  color:#08263a !important;
}
:root[data-theme="medium"] .modal-body :where(
  p,
  label,
  legend,
  .dialog-description,
  .call-title,
  .settings-feature-card,
  .settings-toggle-row,
  .settings-select-row,
  .status-name,
  .status-viewer-name,
  .status-viewer-meta,
  .status-meta,
  .online-user-name,
  .legal-note
){
  color:#08263a !important;
  text-shadow:none !important;
}
:root[data-theme="medium"] .modal-body :where(
  .muted,
  .hint,
  small,
  .call-sub,
  .item-sub,
  .status-time,
  .status-viewer-activity,
  .status-audience-summary span,
  .ai-conversation-prompt .muted,
  .legal-note .muted
){
  color:#365b6d !important;
  opacity:1 !important;
  text-shadow:none !important;
}

/* Cartes et listes intégrées aux fenêtres : Utilisateurs, Statuts, IA, etc. */
:root[data-theme="medium"] .modal-body :where(
  .item,
  .status-item,
  .status-viewer-row,
  .settings-feature-card,
  .legal-note,
  .ai-conversation-prompt
){
  background:#ffffff !important;
  color:#08263a !important;
  border-color:#c5d7de !important;
}
:root[data-theme="medium"] .modal-body .item-title,
:root[data-theme="medium"] .modal-body .status-name,
:root[data-theme="medium"] .modal-body .status-viewer-name{
  color:#08263a !important;
}
:root[data-theme="medium"] .modal-body .item-sub{
  color:#365b6d !important;
}

/* Champs et contrôles dans Paramètres, création de groupe et recherche. */
:root[data-theme="medium"] .modal-body :where(input,select,textarea){
  background:#ffffff !important;
  color:#08263a !important;
  border-color:#a9c2cd !important;
  caret-color:#0b67c2;
}
:root[data-theme="medium"] .modal-body :where(input,textarea)::placeholder{
  color:#587482 !important;
  opacity:1 !important;
}
:root[data-theme="medium"] .modal-body option{
  background:#ffffff;
  color:#08263a;
}

/* Les boutons neutres restent foncés sur fond clair ; les actions fortes
   conservent un libellé blanc nettement lisible. */
:root[data-theme="medium"] .modal-body .btn:not(.primary):not(.danger),
:root[data-theme="medium"] .modal-body .icon-btn{
  color:#08263a !important;
  background:#edf7f8 !important;
  border-color:#b9cdd5 !important;
}
:root[data-theme="medium"] .modal-body .btn.primary,
:root[data-theme="medium"] .modal-body .btn.danger{
  color:#ffffff !important;
}
:root[data-theme="medium"] .call-volume-control,
:root[data-theme="medium"] .call-volume-control span{
  color:#08263a !important;
}
:root[data-theme="medium"] .call-volume-control .icon-btn{
  color:#08263a !important;
  background:#ffffff !important;
  border-color:#b9cdd5 !important;
}

/* Les en-têtes des fenêtres restent sur le dégradé de marque. */
:root[data-theme="medium"] .modal-head,
:root[data-theme="medium"] .modal-head *,
:root[data-theme="medium"] .modal-head .icon-btn{
  color:#ffffff !important;
}

/* Confirmation Supprimer / Quitter. */
:root[data-theme="medium"] .dialog-description{
  color:#08263a !important;
  font-size:15px;
  line-height:1.55;
}

/* Le bandeau d’activation automatique des notifications a été supprimé.
   Cette règle protège aussi les installations ayant conservé un ancien HTML. */
#alertsBanner{
  display:none !important;
}


/* =========================================================================
   AKILICHAT V31 — CONSENTEMENT LÉGAL, CONTRASTES ET CORRECTIFS D’INTERFACE
   ========================================================================= */

/* 1. Écran de démarrage : l'accès à la connexion exige l'acceptation des
   conditions d'utilisation et de la politique de confidentialité. */
body.legal-consent-required #app{
  pointer-events:none !important;
  user-select:none;
}
.legal-consent-gate{
  overflow:auto;
  overscroll-behavior:contain;
  background:
    radial-gradient(800px 460px at 10% 0%,rgba(29,205,157,.32),transparent 62%),
    radial-gradient(900px 520px at 100% 0%,rgba(38,105,224,.42),transparent 62%),
    linear-gradient(145deg,#073d9e 0%,#0794b6 52%,#13b978 100%) !important;
}
.legal-consent-card{
  width:min(640px,calc(100vw - 28px)) !important;
  max-height:calc(100dvh - 28px);
  overflow:auto;
  padding:22px !important;
  border:1px solid rgba(255,255,255,.34) !important;
  background:rgba(7,35,77,.38) !important;
  color:#fff !important;
  box-shadow:0 28px 90px rgba(1,19,47,.38) !important;
}
.legal-consent-card .splash-brand-row{
  margin-bottom:12px;
}
.legal-consent-card .splash-sub{
  margin:0 auto 16px;
  max-width:520px;
  color:rgba(255,255,255,.94) !important;
}
.legal-consent-panel{
  display:grid;
  gap:12px;
  padding:18px;
  border:1px solid rgba(255,255,255,.56);
  border-radius:22px;
  background:#ffffff;
  color:#0b2138;
  text-align:left;
  box-shadow:0 14px 38px rgba(5,31,70,.20);
}
.legal-consent-panel h2{
  margin:0;
  color:#08244b;
  font-size:21px;
  line-height:1.2;
}
.legal-consent-panel p{
  margin:0;
  color:#425b72;
  font-size:14px;
  line-height:1.5;
}
.legal-document-row{
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid #d5e1eb;
  border-radius:15px;
  background:#f7fbff;
}
.legal-document-row > a{
  width:max-content;
  max-width:100%;
  color:#075fc5;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}
.legal-document-row > a:focus-visible{
  outline:3px solid rgba(16,109,204,.28);
  outline-offset:3px;
  border-radius:5px;
}
.legal-check-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#112d46;
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  cursor:pointer;
}
.legal-check-row input{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:0;
  padding:0;
  accent-color:#12ac73;
}
.legal-consent-continue{
  width:100%;
  min-height:50px;
  margin-top:2px;
  border:0 !important;
  border-radius:14px !important;
  color:#fff !important;
  background:linear-gradient(105deg,#176de0,#13b983) !important;
  font-weight:900;
  box-shadow:0 10px 22px rgba(20,104,190,.22);
}
.legal-consent-continue:disabled{
  cursor:not-allowed;
  color:#657586 !important;
  background:#d8e0e7 !important;
  box-shadow:none !important;
  opacity:1 !important;
}
.legal-consent-error{
  padding:10px 12px;
  border:1px solid #f2a7ad;
  border-radius:12px;
  background:#fff1f2;
  color:#8b1722;
  font-size:13px;
  font-weight:750;
  line-height:1.4;
}
@media (max-width:520px){
  .legal-consent-gate{padding:10px !important;align-items:flex-start}
  .legal-consent-card{
    width:100% !important;
    max-height:calc(100dvh - 20px);
    padding:15px !important;
    border-radius:24px !important;
  }
  .legal-consent-card .splash-brand-row{justify-content:flex-start}
  .legal-consent-card .splash-logo{width:54px !important;height:54px !important}
  .legal-consent-card .splash-title{font-size:26px !important}
  .legal-consent-card .splash-kicker{font-size:14px !important}
  .legal-consent-card .splash-sub{font-size:14px !important}
  .legal-consent-panel{padding:14px;border-radius:18px}
  .legal-consent-panel h2{font-size:18px}
}

/* 2. Messages d'erreur et notifications contextuelles toujours lisibles.
   La surface reste claire, même avec le thème sombre. */
.error,
.modal-body .error,
#authError{
  color:#861722 !important;
  background:#fff1f2 !important;
  border:1px solid #eea6ad !important;
  box-shadow:0 8px 20px rgba(111,20,31,.10) !important;
  font-weight:700;
  line-height:1.45;
  text-shadow:none !important;
}
.app-toast{
  position:fixed;
  z-index:10050;
  left:50%;
  bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));
  width:max-content;
  max-width:min(92vw,560px);
  padding:12px 16px;
  border:1px solid #b9cad8;
  border-radius:15px;
  background:#ffffff;
  color:#10263a;
  box-shadow:0 16px 42px rgba(5,30,58,.24);
  font-size:14px;
  font-weight:750;
  line-height:1.4;
  text-align:center;
  opacity:0;
  transform:translate(-50%,12px);
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
.app-toast.is-visible{
  opacity:1;
  transform:translate(-50%,0);
}

/* 3. Boutique : palette cohérente et textes descriptifs lisibles dans les
   thèmes Clair, Médium et Sombre. */
.modal-body .money-summary,
.modal-body .money-section,
.modal-body .money-grid{
  color:var(--v29-text) !important;
}
.modal-body .money-stat,
.modal-body .money-card,
.modal-body .money-mm-line{
  border-color:var(--v29-line) !important;
  background:var(--v29-surface-soft) !important;
  color:var(--v29-text) !important;
  box-shadow:0 7px 18px rgba(17,45,76,.07);
}
:root[data-theme="dark"] .modal-body .money-stat,
:root[data-theme="dark"] .modal-body .money-card,
:root[data-theme="dark"] .modal-body .money-mm-line{
  box-shadow:none;
}
.modal-body .money-section h3,
.modal-body .money-title,
.modal-body .money-value,
.modal-body .money-card > b,
.modal-body .money-card > strong,
.modal-body .money-mm-line b,
.modal-body .money-mm-line span,
.modal-body .money-field label{
  color:var(--v29-text) !important;
  opacity:1 !important;
  text-shadow:none !important;
}
.modal-body .money-label,
.modal-body .money-price,
.modal-body .money-card .muted,
.modal-body .money-section .muted,
.modal-body .money-field span,
.modal-body .money-card small{
  color:var(--v29-subtext) !important;
  opacity:1 !important;
  text-shadow:none !important;
}
.modal-body .money-stickers span,
.modal-body .money-mm-line code{
  border:1px solid var(--v29-line);
  background:var(--v29-surface) !important;
  color:var(--v29-text) !important;
}
.modal-body .money-field input,
.modal-body .money-field textarea,
.modal-body .money-field select{
  border-color:var(--v29-line) !important;
  background:var(--v29-surface) !important;
  color:var(--v29-text) !important;
}
.modal-body .money-actions .btn:not(.primary):not(.danger){
  border-color:var(--v29-line) !important;
  background:var(--v29-surface) !important;
  color:var(--v29-text) !important;
}
.modal-body .money-actions .btn.primary{
  color:#fff !important;
}
.modal-body .money-summary.subscription-required{
  border:1px solid #e6a1a7 !important;
  background:#fff0f1 !important;
}
.modal-body .money-summary.subscription-required :where(.money-label,.money-value){
  color:#7e1b24 !important;
}
:root[data-theme="dark"] .modal-body .money-summary.subscription-required{
  border-color:#81434b !important;
  background:#351c24 !important;
}
:root[data-theme="dark"] .modal-body .money-summary.subscription-required :where(.money-label,.money-value){
  color:#ffd7dc !important;
}

/* 4. Le bouton Administration reste strictement réservé au rôle admin.
   [hidden] l'emporte sur les anciennes règles visuelles !important. */
#adminLink[hidden],
#adminLink.hidden,
body.is-authenticated #adminLink[hidden],
body.is-authenticated #adminLink.hidden{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* 5. Bouton afficher/masquer le mot de passe : géométrie fixe. */
.password-wrap{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
}
.password-wrap input{
  width:100% !important;
  padding-right:50px !important;
}
.password-wrap .eye-btn{
  position:absolute !important;
  z-index:3;
  top:50% !important;
  right:8px !important;
  bottom:auto !important;
  left:auto !important;
  width:36px !important;
  min-width:36px !important;
  max-width:36px !important;
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:10px !important;
  display:grid !important;
  place-items:center !important;
  line-height:1 !important;
  transform:translateY(-50%) !important;
  transform-origin:center !important;
  overflow:hidden;
}
.password-wrap .eye-btn:hover,
.password-wrap .eye-btn:focus,
.password-wrap .eye-btn:active{
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
}
.eye-glyph{
  display:block;
  width:21px;
  height:21px;
  flex:0 0 21px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c5.5 0 9.5 4.6 10.7 6.2a1.3 1.3 0 0 1 0 1.6C21.5 14.4 17.5 19 12 19S2.5 14.4 1.3 12.8a1.3 1.3 0 0 1 0-1.6C2.5 9.6 6.5 5 12 5Zm0 2C8 7 4.8 10.1 3.3 12 4.8 13.9 8 17 12 17s7.2-3.1 8.7-5C19.2 10.1 16 7 12 7Zm0 2.2A2.8 2.8 0 1 1 12 14.8a2.8 2.8 0 0 1 0-5.6Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c5.5 0 9.5 4.6 10.7 6.2a1.3 1.3 0 0 1 0 1.6C21.5 14.4 17.5 19 12 19S2.5 14.4 1.3 12.8a1.3 1.3 0 0 1 0-1.6C2.5 9.6 6.5 5 12 5Zm0 2C8 7 4.8 10.1 3.3 12 4.8 13.9 8 17 12 17s7.2-3.1 8.7-5C19.2 10.1 16 7 12 7Zm0 2.2A2.8 2.8 0 1 1 12 14.8a2.8 2.8 0 0 1 0-5.6Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.eye-btn.is-visible .eye-glyph{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3.3 2 18.7 18.7-1.3 1.3-3.2-3.2A11.9 11.9 0 0 1 12 20C6.5 20 2.5 15.4 1.3 13.8a1.3 1.3 0 0 1 0-1.6 18.7 18.7 0 0 1 4-4.1L2 4.7 3.3 2Zm3.5 7.5A14.4 14.4 0 0 0 3.3 13c1.5 1.9 4.7 5 8.7 5 1.4 0 2.7-.4 3.9-.9l-2-2A4 4 0 0 1 9 10.2l-2.2-.7ZM12 6c5.5 0 9.5 4.6 10.7 6.2a1.3 1.3 0 0 1 0 1.6 19 19 0 0 1-2.2 2.5l-1.4-1.4c.7-.7 1.2-1.3 1.6-1.9C19.2 11.1 16 8 12 8c-.6 0-1.2.1-1.8.2L8.5 6.5A12 12 0 0 1 12 6Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3.3 2 18.7 18.7-1.3 1.3-3.2-3.2A11.9 11.9 0 0 1 12 20C6.5 20 2.5 15.4 1.3 13.8a1.3 1.3 0 0 1 0-1.6 18.7 18.7 0 0 1 4-4.1L2 4.7 3.3 2Zm3.5 7.5A14.4 14.4 0 0 0 3.3 13c1.5 1.9 4.7 5 8.7 5 1.4 0 2.7-.4 3.9-.9l-2-2A4 4 0 0 1 9 10.2l-2.2-.7ZM12 6c5.5 0 9.5 4.6 10.7 6.2a1.3 1.3 0 0 1 0 1.6 19 19 0 0 1-2.2 2.5l-1.4-1.4c.7-.7 1.2-1.3 1.6-1.9C19.2 11.1 16 8 12 8c-.6 0-1.2.1-1.8.2L8.5 6.5A12 12 0 0 1 12 6Z'/%3E%3C/svg%3E");
}


/* =========================================================================
   AKILICHAT V32 — AFFICHAGE FIABLE DU BOUTON ADMINISTRATION
   L'identité est validée côté serveur. Une fois le rôle admin confirmé,
   ces règles annulent explicitement les protections de masquage appliquées
   pendant le démarrage de l'application.
   ========================================================================= */
body.is-authenticated #adminLink.admin-access-btn:not([hidden]):not(.hidden){
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}


/* ==========================================================================
   Correctif v34 — barre de recherche toujours sur une seule ligne
   Empêche l'icône de recherche, le champ et le bouton Nouveau chat de se
   décaler sur les écrans Android étroits.
   ========================================================================== */
body.is-authenticated #mainPanel .search-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 52px !important;
  grid-template-rows:52px !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

body.is-authenticated #mainPanel .search-row::before{
  left:17px !important;
  top:26px !important;
  transform:translateY(-50%) !important;
}

body.is-authenticated #mainPanel #searchConversations{
  grid-column:1 !important;
  grid-row:1 !important;
  align-self:stretch !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:52px !important;
  flex:none !important;
  box-sizing:border-box !important;
  padding:0 14px 0 48px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

body.is-authenticated #mainPanel #btnNewChat{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:center !important;
  justify-self:center !important;
  flex:0 0 52px !important;
  width:52px !important;
  min-width:52px !important;
  max-width:52px !important;
  height:52px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

@media (max-width:360px){
  body.is-authenticated #mainPanel .search-row{
    grid-template-columns:minmax(0,1fr) 46px !important;
    grid-template-rows:46px !important;
    gap:7px !important;
  }

  body.is-authenticated #mainPanel .search-row::before{
    left:14px !important;
    top:23px !important;
    width:18px !important;
    height:18px !important;
  }

  body.is-authenticated #mainPanel #searchConversations{
    height:46px !important;
    padding:0 10px 0 41px !important;
    border-radius:16px !important;
    font-size:14px !important;
  }

  body.is-authenticated #mainPanel #btnNewChat{
    flex-basis:46px !important;
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    height:46px !important;
  }

  body.is-authenticated #mainPanel #btnNewChat::before{
    width:21px !important;
    height:21px !important;
  }
}

@media (max-width:300px){
  body.is-authenticated #mainPanel .search-row{
    grid-template-columns:minmax(0,1fr) 42px !important;
    grid-template-rows:44px !important;
    gap:6px !important;
  }

  body.is-authenticated #mainPanel .search-row::before{
    left:12px !important;
    top:22px !important;
    width:17px !important;
    height:17px !important;
  }

  body.is-authenticated #mainPanel #searchConversations{
    height:44px !important;
    padding-left:36px !important;
    font-size:13px !important;
  }

  body.is-authenticated #mainPanel #btnNewChat{
    flex-basis:42px !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
  }
}

/* ==========================================================================
   Correctif v35 — recherche « Utilisateurs en ligne » sur une seule ligne
   Le champ se contracte sur les écrans étroits tandis que l'icône de recherche
   reste centrée dans le champ et que le bouton d'actualisation ne descend pas.
   ========================================================================== */
body.is-authenticated #modalBody .online-users-search-row{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-rows:48px !important;
  align-items:center !important;
  column-gap:8px !important;
  row-gap:0 !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

body.is-authenticated #modalBody .online-users-search-row::before{
  left:14px !important;
  top:24px !important;
  width:19px !important;
  height:19px !important;
  transform:translateY(-50%) !important;
}

body.is-authenticated #modalBody .online-users-search-row #onlineSearch{
  grid-column:1 !important;
  grid-row:1 !important;
  align-self:stretch !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:48px !important;
  flex:none !important;
  box-sizing:border-box !important;
  padding:0 12px 0 42px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

body.is-authenticated #modalBody .online-users-search-row #onlineRefresh{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:center !important;
  justify-self:end !important;
  flex:none !important;
  min-width:0 !important;
  height:44px !important;
  margin:0 !important;
  padding:0 14px !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

@media (max-width:420px){
  body.is-authenticated #modalBody .online-users-search-row{
    grid-template-columns:minmax(0,1fr) 44px !important;
    grid-template-rows:46px !important;
    gap:7px !important;
  }

  body.is-authenticated #modalBody .online-users-search-row::before{
    left:13px !important;
    top:23px !important;
    width:18px !important;
    height:18px !important;
  }

  body.is-authenticated #modalBody .online-users-search-row #onlineSearch{
    height:46px !important;
    padding:0 9px 0 39px !important;
    border-radius:15px !important;
    font-size:14px !important;
  }

  body.is-authenticated #modalBody .online-users-search-row #onlineRefresh{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    padding:0 !important;
    border-radius:14px !important;
    display:grid !important;
    place-items:center !important;
    font-size:0 !important;
  }

  body.is-authenticated #modalBody .online-users-search-row #onlineRefresh::before{
    content:"";
    display:block;
    width:20px;
    height:20px;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.7 6.3A8 8 0 1 0 20 12h-2a6 6 0 1 1-1.8-4.3L13 11h8V3l-3.3 3.3Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.7 6.3A8 8 0 1 0 20 12h-2a6 6 0 1 1-1.8-4.3L13 11h8V3l-3.3 3.3Z'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  body.is-authenticated #modalBody .online-users-search-row .online-refresh-label{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }
}

@media (max-width:300px){
  body.is-authenticated #modalBody .online-users-search-row{
    grid-template-columns:minmax(0,1fr) 40px !important;
    grid-template-rows:44px !important;
    gap:6px !important;
  }

  body.is-authenticated #modalBody .online-users-search-row::before{
    left:11px !important;
    top:22px !important;
    width:17px !important;
    height:17px !important;
  }

  body.is-authenticated #modalBody .online-users-search-row #onlineSearch{
    height:44px !important;
    padding-left:35px !important;
    font-size:13px !important;
  }

  body.is-authenticated #modalBody .online-users-search-row #onlineRefresh{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
  }
}



/* =========================================================================
   V36 — Modules Jeux et Actualités
   ========================================================================= */

.auth-only-action{ display:none !important; }
body.is-authenticated .auth-only-action{ display:inline-flex !important; }

.brand-actions{
  flex:0 0 auto;
  min-width:0;
}
.brand-actions .header-module-btn{
  font-size:18px;
}

.akili-hub{
  display:flex;
  flex-direction:column;
  gap:16px;
  color:var(--text);
}
.akili-hub h2,
.akili-hub h3,
.akili-hub p{ margin:0; }

.akili-hub-hero{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius:20px;
  background:
    radial-gradient(circle at 92% 8%, rgba(34,197,94,.22), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, var(--card)), color-mix(in srgb, #15a371 14%, var(--card)));
}
.akili-hub-hero h2{
  font-size:clamp(20px, 5vw, 28px);
  line-height:1.15;
}
.akili-hub-hero p{
  margin-top:5px;
  color:var(--muted);
  line-height:1.45;
}
.hub-hero-icon{
  flex:0 0 auto;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  font-size:29px;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 28px rgba(4,54,107,.16);
}

.game-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.game-card{
  min-width:0;
  min-height:132px;
  padding:15px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  text-align:left;
  border:1px solid var(--border);
  border-radius:18px;
  color:var(--text);
  background:color-mix(in srgb, var(--card) 92%, var(--primary) 8%);
  box-shadow:0 10px 26px rgba(6,41,83,.08);
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.game-card:hover,
.game-card:focus-visible{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--primary) 52%, var(--border));
  box-shadow:0 14px 32px rgba(6,70,150,.15);
}
.game-card-icon{
  width:44px;
  height:44px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:24px;
  background:linear-gradient(145deg, rgba(255,255,255,.94), rgba(229,243,255,.94));
}
.game-card-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.game-card-copy strong{
  font-size:16px;
  color:var(--text);
}
.game-card-copy small{
  color:var(--muted);
  line-height:1.35;
}
.game-card-copy em{
  font-style:normal;
  font-size:12px;
  font-weight:800;
  color:var(--primary);
}

.hub-privacy-note{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  border:1px solid color-mix(in srgb, #15a371 28%, var(--border));
  border-radius:15px;
  background:color-mix(in srgb, #15a371 9%, var(--card));
  color:var(--text);
}
.hub-privacy-note > span{
  width:30px;
  height:30px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#15a371;
  color:#fff;
  font-weight:900;
}
.hub-privacy-note small{
  color:var(--muted);
  line-height:1.4;
}

.akili-game-screen{
  display:flex;
  flex-direction:column;
  gap:15px;
}
.game-screen-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.game-screen-head > div{ min-width:0; }
.game-screen-head h2{
  margin:0;
  font-size:21px;
  color:var(--text);
}
.game-screen-head p{
  margin:3px 0 0;
  color:var(--muted);
}
.game-back{ flex:0 0 auto; }

.game-stage{
  min-height:360px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:20px;
  background:color-mix(in srgb, var(--card) 95%, var(--primary) 5%);
}
.game-scorebar{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.game-scorebar > span{
  padding:8px 11px;
  border-radius:12px;
  background:color-mix(in srgb, var(--primary) 10%, var(--card));
  color:var(--muted);
  font-size:13px;
}
.game-scorebar strong{ color:var(--text); }

.memory-board{
  width:min(100%, 470px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
.memory-card{
  position:relative;
  aspect-ratio:1;
  min-width:0;
  min-height:0;
  border:0;
  border-radius:15px;
  overflow:hidden;
  padding:0;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(145deg,#0d74dc,#0ba57e);
  box-shadow:0 7px 16px rgba(4,57,119,.16);
}
.memory-card > span{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  backface-visibility:hidden;
  transition:transform .28s ease, opacity .28s ease;
}
.memory-front{
  font-weight:900;
  font-size:22px;
}
.memory-back{
  background:#fff;
  color:#082147;
  font-size:clamp(22px,7vw,34px);
  opacity:0;
  transform:rotateY(180deg);
}
.memory-card.is-open .memory-front{
  opacity:0;
  transform:rotateY(180deg);
}
.memory-card.is-open .memory-back{
  opacity:1;
  transform:rotateY(0);
}
.memory-card.is-matched .memory-back{
  background:#dcfce7;
  box-shadow:inset 0 0 0 3px #22c55e;
}

.game-result{
  margin-top:14px;
  padding:13px;
  border-radius:14px;
  text-align:center;
  background:color-mix(in srgb, #22c55e 14%, var(--card));
  color:var(--text);
}
.game-status{
  min-height:24px;
  margin:10px 0;
  text-align:center;
  color:var(--muted);
  font-weight:700;
}

.ttt-board{
  width:min(100%,340px);
  margin:10px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.ttt-cell{
  aspect-ratio:1;
  min-width:0;
  min-height:0;
  border:1px solid var(--border);
  border-radius:17px;
  background:var(--card);
  color:var(--text);
  font-size:clamp(34px,13vw,60px);
  font-weight:900;
  cursor:pointer;
}
.ttt-cell.is-x{ color:#0d74dc; }
.ttt-cell.is-o{ color:#0c9b70; }
.ttt-cell.is-win{
  background:#dcfce7;
  border-color:#22c55e;
  transform:scale(1.03);
}

.quiz-wrap{
  width:min(100%,650px);
  margin:0 auto;
}
.quiz-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:13px;
}
.quiz-top strong{ color:var(--text); }
.quiz-progress{
  height:8px;
  margin:9px 0 18px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb, var(--border) 70%, transparent);
}
.quiz-progress span{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#0d74dc,#12ae77);
  transition:width .22s ease;
}
.quiz-question{
  margin:8px 0 15px;
  color:var(--text);
  font-size:clamp(18px,4.5vw,23px);
  font-weight:900;
  line-height:1.35;
}
.quiz-answers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.quiz-answer{
  min-height:54px;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.quiz-answer:hover{ border-color:var(--primary); }
.quiz-answer.is-correct{
  background:#dcfce7 !important;
  color:#14532d !important;
  border-color:#22c55e !important;
}
.quiz-answer.is-wrong{
  background:#fee2e2 !important;
  color:#7f1d1d !important;
  border-color:#ef4444 !important;
}
.quiz-final{
  min-height:300px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:9px;
  text-align:center;
}
.quiz-final-icon{ font-size:60px; }
.quiz-final h3{ font-size:36px; color:var(--text); }
.quiz-final p{ color:var(--muted); }

.g2048-board{
  width:min(100%,430px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:9px;
  border-radius:17px;
  outline:none;
  background:#b6c7d8;
  touch-action:none;
}
.g2048-cell{
  aspect-ratio:1;
  min-width:0;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:rgba(255,255,255,.52);
  color:#15324f;
  font-size:clamp(18px,6vw,34px);
  font-weight:900;
}
.g2048-cell.n2{background:#eef6fb}
.g2048-cell.n4{background:#dfeefa}
.g2048-cell.n8{background:#ffdf9e;color:#5c3600}
.g2048-cell.n16{background:#ffc875;color:#5c2a00}
.g2048-cell.n32{background:#ff9a73;color:#fff}
.g2048-cell.n64{background:#f66d5f;color:#fff}
.g2048-cell.n128{background:#5cd3b1;color:#053e34;font-size:clamp(16px,5vw,28px)}
.g2048-cell.n256{background:#34b99b;color:#fff;font-size:clamp(16px,5vw,28px)}
.g2048-cell.n512{background:#168fba;color:#fff;font-size:clamp(16px,5vw,28px)}
.g2048-cell.n1024{background:#1668bc;color:#fff;font-size:clamp(13px,4vw,24px)}
.g2048-cell.n2048{background:#633db8;color:#fff;font-size:clamp(13px,4vw,24px)}
.g2048-help{
  margin-top:10px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}

/* Actualités */
.news-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.news-filters{
  display:flex;
  gap:7px;
  overflow:auto;
  scrollbar-width:none;
}
.news-filters::-webkit-scrollbar{ display:none; }
.news-filter{
  flex:0 0 auto;
  min-width:auto;
  min-height:38px;
  padding:7px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--card);
  color:var(--text);
  font-size:13px;
  cursor:pointer;
}
.news-filter.is-active{
  background:linear-gradient(135deg,#0d74dc,#0ca77a);
  border-color:transparent;
  color:#fff;
}
.news-status{
  min-height:22px;
  padding:8px 10px;
  border-radius:11px;
  color:var(--muted);
  background:color-mix(in srgb, var(--primary) 7%, var(--card));
  font-size:12px;
}
.news-status.is-warning{
  color:#7c4a03;
  background:#fff3cd;
}
.news-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.news-card{
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--card);
  color:var(--text);
  box-shadow:0 9px 24px rgba(5,52,106,.08);
}
.news-image{
  width:100%;
  aspect-ratio:16/8.5;
  object-fit:cover;
  background:#dbeafe;
}
.news-card-body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:9px;
  padding:14px;
}
.news-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:11px;
}
.news-source{
  max-width:55%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:4px 8px;
  border-radius:999px;
  background:color-mix(in srgb, var(--primary) 11%, var(--card));
  color:var(--primary);
  font-weight:900;
}
.news-card h3{
  color:var(--text);
  font-size:16px;
  line-height:1.34;
}
.news-card p{
  color:var(--muted);
  font-size:13px;
  line-height:1.48;
}
.news-read{
  width:max-content;
  min-width:0;
  min-height:38px;
  margin-top:auto;
  padding:7px 11px;
  border:0;
  border-radius:11px;
  background:color-mix(in srgb, var(--primary) 12%, var(--card));
  color:var(--primary);
  font-weight:900;
  cursor:pointer;
}
.news-read:hover{ background:color-mix(in srgb, var(--primary) 20%, var(--card)); }

.news-empty{
  grid-column:1/-1;
  min-height:250px;
  padding:25px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  text-align:center;
  border:1px dashed var(--border);
  border-radius:18px;
  color:var(--muted);
}
.news-empty span{ font-size:45px; }
.news-empty strong{ color:var(--text); }
.news-empty p{ margin:0; }

.news-skeleton{
  grid-column:1/-1;
  display:grid;
  gap:10px;
}
.news-skeleton span{
  display:block;
  height:82px;
  border-radius:15px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--border) 45%, transparent),
    color-mix(in srgb, var(--card) 80%, white),
    color-mix(in srgb, var(--border) 45%, transparent));
  background-size:220% 100%;
  animation:akiliNewsPulse 1.2s linear infinite;
}
@keyframes akiliNewsPulse{to{background-position:-220% 0}}

:root[data-theme="dark"] .game-card,
:root[data-theme="dark"] .game-stage,
:root[data-theme="dark"] .quiz-answer,
:root[data-theme="dark"] .ttt-cell,
:root[data-theme="dark"] .news-card,
:root[data-theme="dark"] .news-filter,
:root[data-theme="dark"] .news-read{
  background:#0b1c31;
  color:#f8fafc;
}
:root[data-theme="dark"] .game-card-copy strong,
:root[data-theme="dark"] .game-screen-head h2,
:root[data-theme="dark"] .quiz-question,
:root[data-theme="dark"] .news-card h3,
:root[data-theme="dark"] .news-empty strong{
  color:#f8fafc;
}
:root[data-theme="dark"] .akili-hub-hero,
:root[data-theme="dark"] .hub-privacy-note{
  background:#0a1b30;
}
:root[data-theme="dark"] .news-status.is-warning{
  color:#fde68a;
  background:#4a3107;
}
:root[data-theme="medium"] .akili-hub,
:root[data-theme="light"] .akili-hub{
  color:#082147;
}
:root[data-theme="medium"] .game-card,
:root[data-theme="medium"] .game-stage,
:root[data-theme="medium"] .quiz-answer,
:root[data-theme="medium"] .ttt-cell,
:root[data-theme="medium"] .news-card,
:root[data-theme="medium"] .news-filter,
:root[data-theme="light"] .game-card,
:root[data-theme="light"] .game-stage,
:root[data-theme="light"] .quiz-answer,
:root[data-theme="light"] .ttt-cell,
:root[data-theme="light"] .news-card,
:root[data-theme="light"] .news-filter{
  background:#fff;
  color:#082147;
}
:root[data-theme="medium"] .game-card-copy strong,
:root[data-theme="medium"] .game-screen-head h2,
:root[data-theme="medium"] .quiz-question,
:root[data-theme="medium"] .news-card h3,
:root[data-theme="light"] .game-card-copy strong,
:root[data-theme="light"] .game-screen-head h2,
:root[data-theme="light"] .quiz-question,
:root[data-theme="light"] .news-card h3{
  color:#082147;
}
:root[data-theme="medium"] .akili-hub-hero,
:root[data-theme="medium"] .hub-privacy-note,
:root[data-theme="light"] .akili-hub-hero,
:root[data-theme="light"] .hub-privacy-note{
  color:#082147;
}

@media (max-width:920px){
  .brand{
    gap:7px;
    padding:9px 10px;
  }
  .brand-left{
    min-width:0;
    gap:7px;
  }
  .brand-actions{
    gap:5px !important;
  }
  .brand-actions .icon-btn{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    font-size:16px;
  }
  .brand-title{
    font-size:clamp(16px,5.2vw,22px) !important;
    white-space:nowrap;
  }
  .brand-logo{
    width:38px !important;
    height:38px !important;
    flex:0 0 auto;
  }
}

@media (max-width:620px){
  .game-grid,
  .news-list{
    grid-template-columns:1fr;
  }
  .game-card{
    min-height:105px;
  }
  .quiz-answers{
    grid-template-columns:1fr;
  }
  .akili-hub-hero{
    align-items:flex-start;
    padding:14px;
  }
  .hub-hero-icon{
    width:49px;
    height:49px;
    border-radius:15px;
    font-size:24px;
  }
  .game-stage{
    padding:10px;
  }
}

@media (max-width:360px){
  .brand-actions{
    gap:3px !important;
  }
  .brand-actions .icon-btn{
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    font-size:14px;
  }
  .brand-logo{
    width:34px !important;
    height:34px !important;
  }
  .brand-title{
    font-size:16px !important;
  }
  .memory-board{
    gap:6px;
  }
  .memory-card{
    border-radius:11px;
  }
  .game-screen-head{
    align-items:flex-start;
  }
  .game-back{
    min-width:42px;
    padding:7px 8px;
    font-size:12px;
  }
}


/* -------------------------------------------------------------------------
   AkiliChat v37 — Échecs et mots croisés
   ------------------------------------------------------------------------- */
.chess-toolbar,
.crossword-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.chess-mode-label{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:min(100%,250px);
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}
.chess-mode-label .input{
  min-width:0;
  min-height:40px;
  flex:1 1 auto;
  padding:7px 10px;
  color:var(--text);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:11px;
}
.chess-status{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
  padding:9px 12px;
  border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));
  border-radius:13px;
  color:var(--text);
  background:color-mix(in srgb,var(--primary) 8%,var(--card));
}
.chess-status span{
  color:var(--muted);
  font-size:12px;
  text-align:right;
}
.chess-board{
  width:min(100%,520px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  overflow:hidden;
  border:3px solid #17375f;
  border-radius:13px;
  box-shadow:0 13px 30px rgba(6,39,78,.18);
  outline:none;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
.chess-cell{
  position:relative;
  min-width:0;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:0;
  cursor:pointer;
  line-height:1;
}
.chess-cell.is-light{background:#e8f2dc}
.chess-cell.is-dark{background:#5e9a75}
.chess-cell:focus-visible{
  z-index:2;
  outline:3px solid #fbbf24;
  outline-offset:-3px;
}
.chess-piece{
  position:relative;
  z-index:2;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif;
  font-size:clamp(25px,7.5vw,48px);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));
  transform:translateY(-1px);
}
.chess-cell.is-selected::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:1;
  border:3px solid #fbbf24;
  border-radius:8px;
  box-shadow:0 0 0 2px rgba(255,255,255,.45);
}
.chess-cell.is-legal::after{
  content:"";
  position:absolute;
  z-index:3;
  width:24%;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(8,70,130,.55);
  pointer-events:none;
}
.chess-cell.is-capture::after{
  width:auto;
  inset:6px;
  border:4px solid rgba(197,38,38,.72);
  background:transparent;
}
.chess-cell.is-check{
  background:#ef7777 !important;
  box-shadow:inset 0 0 0 4px rgba(119,10,10,.72);
}
.chess-board.is-thinking{
  opacity:.82;
  pointer-events:none;
}
.chess-board.is-finished .chess-cell{
  cursor:default;
}
.chess-rank,
.chess-file{
  position:absolute;
  z-index:4;
  color:rgba(9,41,32,.72);
  font-size:9px;
  font-weight:900;
  pointer-events:none;
}
.chess-rank{top:2px;left:3px}
.chess-file{right:3px;bottom:2px}
.chess-legend{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:10px;
  color:var(--muted);
  font-size:11px;
}
.chess-legend span{display:flex;align-items:center;gap:5px}
.chess-dot{
  width:10px;
  height:10px;
  display:inline-block;
  border-radius:50%;
}
.chess-dot.legal{background:rgba(8,70,130,.65)}
.chess-dot.capture{border:2px solid #c52626;background:transparent}

.crossword-meta{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.crossword-meta > span{
  padding:7px 10px;
  border-radius:11px;
  color:var(--muted);
  background:color-mix(in srgb,var(--primary) 8%,var(--card));
  font-size:12px;
}
.crossword-meta strong{color:var(--text)}
.crossword-layout{
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(220px,.72fr);
  gap:16px;
  align-items:start;
}
.crossword-grid{
  width:min(100%,540px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(var(--cw-cols),minmax(0,1fr));
  grid-template-rows:repeat(var(--cw-rows),minmax(0,1fr));
  gap:2px;
  padding:5px;
  border:2px solid #17375f;
  border-radius:10px;
  background:#17375f;
  box-shadow:0 10px 24px rgba(5,45,90,.15);
}
.crossword-block,
.crossword-cell{
  min-width:0;
  aspect-ratio:1;
}
.crossword-block{
  background:#17375f;
}
.crossword-cell{
  position:relative;
  display:block;
  overflow:hidden;
  background:#fff;
  transition:background .14s ease,box-shadow .14s ease;
}
.crossword-cell small{
  position:absolute;
  top:1px;
  left:2px;
  z-index:2;
  color:#24415e;
  font-size:clamp(7px,1.7vw,10px);
  font-weight:900;
  line-height:1;
  pointer-events:none;
}
.crossword-cell input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-width:0;
  padding:clamp(5px,1.4vw,10px) 0 0;
  border:0;
  outline:0;
  border-radius:0;
  text-align:center;
  text-transform:uppercase;
  color:#082147;
  background:transparent;
  font-size:clamp(15px,4.2vw,27px);
  font-weight:900;
  caret-color:#0d74dc;
}
.crossword-cell.is-active{
  background:#fff5b9;
  box-shadow:inset 0 0 0 2px #e4a500;
}
.crossword-cell:focus-within{
  z-index:3;
  background:#dff1ff;
  box-shadow:inset 0 0 0 3px #0d74dc;
}
.crossword-cell.is-wrong{
  background:#fee2e2;
  box-shadow:inset 0 0 0 2px #dc2626;
}
.crossword-cell.is-correct{
  background:#dcfce7;
}
.crossword-cell.is-hint{
  background:#e9ddff;
}
.crossword-actions{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.crossword-clues{
  max-height:560px;
  overflow:auto;
  display:grid;
  gap:13px;
  padding-right:3px;
}
.crossword-clues section{
  border:1px solid var(--border);
  border-radius:15px;
  overflow:hidden;
  background:var(--card);
}
.crossword-clues h3{
  margin:0;
  padding:10px 12px;
  color:var(--text);
  background:color-mix(in srgb,var(--primary) 10%,var(--card));
  font-size:14px;
}
.crossword-clue-list{
  margin:0;
  padding:6px;
  list-style:none;
}
.crossword-clue-list li{margin:0}
.crossword-clue-list button{
  width:100%;
  min-height:0;
  display:block;
  padding:9px 10px;
  border:0;
  border-radius:10px;
  text-align:left;
  color:var(--text);
  background:transparent;
  cursor:pointer;
  line-height:1.35;
}
.crossword-clue-list button:hover,
.crossword-clue-list button.is-active{
  background:color-mix(in srgb,var(--primary) 13%,var(--card));
}
.crossword-clue-list button strong{color:var(--primary)}
.crossword-clue-list button small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}

:root[data-theme="dark"] .chess-mode-label .input,
:root[data-theme="dark"] .crossword-clues section{
  color:#f8fafc;
  background:#0b1c31;
}
:root[data-theme="dark"] .crossword-clues h3,
:root[data-theme="dark"] .crossword-clue-list button{
  color:#f8fafc;
}
:root[data-theme="medium"] .chess-mode-label .input,
:root[data-theme="light"] .chess-mode-label .input,
:root[data-theme="medium"] .crossword-clues section,
:root[data-theme="light"] .crossword-clues section{
  color:#082147;
  background:#fff;
}

@media (max-width:760px){
  .crossword-layout{
    grid-template-columns:1fr;
  }
  .crossword-clues{
    max-height:none;
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:520px){
  .chess-status{
    align-items:flex-start;
    flex-direction:column;
  }
  .chess-status span{text-align:left}
  .crossword-clues{
    grid-template-columns:1fr;
  }
  .crossword-grid{
    gap:1px;
    padding:3px;
  }
  .crossword-actions .btn{
    flex:1 1 30%;
    min-width:82px;
  }
}
@media (max-width:360px){
  .chess-board{border-width:2px}
  .chess-cell.is-capture::after{inset:3px;border-width:3px}
  .crossword-meta > span{padding:6px 7px;font-size:11px}
}


/* =========================================================================
   V38 — Correctifs d'affichage Jeux/Actualités et contraste de l'accueil
   ========================================================================= */

/* Les règles d'authentification forçaient display:inline-flex sans centrer le
   contenu. Les pictogrammes SVG restent désormais exactement au centre. */
body.is-authenticated .brand-actions .auth-only-action{
  align-items:center !important;
  justify-content:center !important;
}
.brand-actions .header-module-btn,
body.is-authenticated .brand-actions .header-module-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  line-height:1 !important;
  text-align:center;
}
.header-module-svg{
  display:block;
  width:21px;
  height:21px;
  flex:0 0 21px;
  margin:auto;
  overflow:visible;
  pointer-events:none;
}

/* Sur ordinateur, les cartes des modules ont besoin d'une fenêtre plus large
   que les boîtes de dialogue ordinaires. */
.modal.modal--wide .modal-card{
  width:min(960px, 94vw);
}
.modal.modal--wide .modal-body{
  padding:18px;
}
.modal.modal--wide .akili-hub{
  width:100%;
  min-width:0;
}
.modal.modal--wide .game-card,
.modal.modal--wide .news-card{
  width:100%;
}
.game-card-icon,
.hub-hero-icon{
  line-height:1;
  text-align:center;
}

/* Le thème médium emploie désormais des surfaces claires. Ces textes ne
   doivent donc plus hériter de l'ancien blanc translucide. */
:root[data-theme="medium"] .empty-brand .landing-copy .muted,
:root[data-theme="light"] .empty-brand .landing-copy .muted{
  color:#365b6d !important;
  opacity:1 !important;
  text-shadow:none !important;
}
:root[data-theme="medium"] .empty-brand .landing-features span,
:root[data-theme="light"] .empty-brand .landing-features span{
  color:#082147 !important;
  background:rgba(255,255,255,.94) !important;
  border-color:#cbd8e7 !important;
  text-shadow:none !important;
}

/* Contrastes explicites des cartes sur navigateur de bureau, y compris les
   moteurs ne prenant pas encore complètement en charge color-mix(). */
:root[data-theme="medium"] .akili-hub-hero,
:root[data-theme="medium"] .hub-privacy-note,
:root[data-theme="medium"] .game-card,
:root[data-theme="medium"] .game-stage,
:root[data-theme="medium"] .news-card,
:root[data-theme="light"] .akili-hub-hero,
:root[data-theme="light"] .hub-privacy-note,
:root[data-theme="light"] .game-card,
:root[data-theme="light"] .game-stage,
:root[data-theme="light"] .news-card{
  background:#ffffff;
  border-color:#c5d7de;
}
:root[data-theme="medium"] .akili-hub :where(h2,h3,strong),
:root[data-theme="light"] .akili-hub :where(h2,h3,strong){
  color:#082147;
}
:root[data-theme="medium"] .akili-hub :where(p,small,.game-status,.news-meta),
:root[data-theme="light"] .akili-hub :where(p,small,.game-status,.news-meta){
  color:#365b6d;
}

@media (max-width:900px){
  .modal.modal--wide .modal-card{
    width:100%;
  }
  .modal.modal--wide .modal-body{
    padding:14px;
  }
}


/* AkiliChat v41 — récupération de compte et contraste des commandes d'authentification */
.auth-text-button{
  align-self:center;
  padding:5px 8px;
  border:0;
  background:transparent;
  color:color-mix(in srgb, var(--primary) 82%, var(--text));
  font:inherit;
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.auth-text-button:hover{ text-decoration-thickness:2px; }
.auth-text-button:focus-visible{
  outline:3px solid color-mix(in srgb, var(--primary) 35%, transparent);
  outline-offset:2px;
  border-radius:7px;
}
.auth-form-heading h2{
  margin:0 0 6px;
  font-size:1.1rem;
}
.auth-form-heading p,
.auth-hint{
  margin:0;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.45;
}
.password-recovery-form{
  padding-top:2px;
}
.auth-status{
  padding:10px 12px;
  border-radius:11px;
  border:1px solid color-mix(in srgb, #18a472 45%, var(--border));
  background:color-mix(in srgb, #18a472 13%, transparent);
  color:var(--text);
  font-size:.86rem;
  line-height:1.4;
}
.auth-status.is-error{
  border-color:color-mix(in srgb, var(--danger) 52%, var(--border));
  background:color-mix(in srgb, var(--danger) 14%, transparent);
}
.eye-glyph{
  color:inherit;
  opacity:1;
}



/* v44 — l'illustration d'accueil ne doit pas apparaître sous le formulaire
   d'authentification. Elle reste disponible après connexion comme état vide. */
body.auth-booting .main,
body.is-auth-screen .main {
  display: none !important;
}
body.auth-booting #emptyState,
body.is-auth-screen #emptyState {
  display: none !important;
}
@media (min-width: 921px) {
  body.auth-booting .sidebar,
  body.is-auth-screen .sidebar {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* =========================================================================
   AKILICHAT V45 — suppression de l'illustration sous l'authentification
   L'ancienne galerie était injectée par .sidebar::after. Elle est supprimée
   sur tout l'écran de connexion ; le fond dégradé de marque reste inchangé.
   ========================================================================= */
body.auth-booting .sidebar::after,
body.is-auth-screen .sidebar::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
}

body.auth-booting #authPanel,
body.is-auth-screen #authPanel {
  margin-bottom: 32px !important;
}

@media (max-height: 700px) and (max-width: 920px) {
  body.auth-booting #authPanel,
  body.is-auth-screen #authPanel {
    margin-bottom: 20px !important;
  }
}



/* V48: la Boutique n'expose plus le paiement Mobile Money.
   Ces règles protègent aussi les utilisateurs dont un ancien gabarit JS serait encore en mémoire. */
.money-mm-package,
.money-plan-mm,
.money-pack-mm,
#btnBusinessMM,
.sponsor-mm{
  display:none !important;
}
.money-paypal-package,
.money-paypal-plan,
.money-paypal-pack,
.money-paypal-business,
.sponsor-paypal{
  background:color-mix(in srgb, var(--primary) 82%, transparent);
  border-color:color-mix(in srgb, var(--primary) 82%, transparent);
}


/* V49 — GPS location messages and long status videos */
.location-btn.loading {
  opacity: .72;
  cursor: progress;
}

.msg-location-card {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: min(270px, 78vw);
  max-width: 360px;
  padding: 12px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background: rgba(14, 165, 233, .12);
  border: 1px solid rgba(14, 165, 233, .25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.msg-location-card:hover,
.msg-location-card:focus-visible {
  text-decoration: none;
  background: rgba(14, 165, 233, .18);
  outline: none;
}

.msg-location-pin {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 26px;
  background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(14,165,233,.95));
  color: #fff;
  box-shadow: 0 8px 20px rgba(14, 165, 233, .22);
}

.msg-location-body {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.msg-location-body strong {
  font-size: .98rem;
}

.msg-location-body span,
.msg-location-accuracy {
  font-size: .82rem;
  opacity: .82;
}

.msg-location-body em {
  margin-top: 2px;
  font-style: normal;
  font-weight: 800;
  color: var(--brand-blue, #0b77d5);
}

.story-viewer video.story-media {
  max-height: calc(100vh - 150px);
}


/* V51: Friend-request visibility and conversation privacy actions */
.friend-request-hint{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  margin:2px 0 10px;
  border:1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
  border-radius:14px;
  background:color-mix(in srgb, var(--primary) 14%, var(--card));
  box-shadow:0 10px 24px rgba(37,99,235,.12);
}
.friend-request-hint span{
  font-weight:750;
  font-size:13px;
  line-height:1.25;
}
.friend-requests-btn{
  position:relative;
  gap:8px;
}
.friend-request-badge{
  display:inline-flex;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  color:#fff;
  background:var(--danger);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--card) 80%, transparent);
}
.item.is-blocked .item-title::after{
  content:" • bloqué";
  color:var(--danger);
  font-size:11px;
  font-weight:800;
}
.item .item-privacy{
  border:1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  background:color-mix(in srgb, var(--danger) 12%, var(--card));
  color:var(--text);
  border-radius:10px;
  padding:6px 8px;
  cursor:pointer;
}
.item .item-privacy:active{transform:scale(.98)}
.topbar-actions #btnBlockUser.is-blocked{
  color:#fff;
  background:var(--danger);
  border-color:color-mix(in srgb, var(--danger) 70%, #000);
}
@media (max-width: 920px){
  .friend-request-hint{
    flex-direction:column;
    align-items:stretch;
  }
  .friend-request-hint .btn{
    width:100%;
  }
  .sidebar-footer .friend-requests-btn{
    flex:1 1 100%;
    justify-content:center;
  }
}


/* =========================================================================
   AKILICHAT V52 — NAVIGATION LATÉRALE : BOUTIQUE PLEINE LARGEUR
   Le bouton Boutique occupe toute la rangée sous les quatre autres tuiles.
   Les cinq boutons de navigation sont aussi moins hauts.
   ========================================================================= */
body.is-authenticated .sidebar-footer{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  align-items:stretch !important;
}
body.is-authenticated .sidebar-footer .btn:not(#adminLink){
  min-height:74px !important;
  padding:8px 5px 7px !important;
  gap:5px !important;
  border-radius:16px !important;
  line-height:1.05 !important;
}
body.is-authenticated .sidebar-footer .btn:not(#adminLink)::before{
  width:28px !important;
  height:28px !important;
  flex-basis:28px !important;
}
body.is-authenticated #btnMonetization{
  grid-column:1/-1 !important;
  min-height:58px !important;
  padding:8px 12px !important;
  flex-direction:row !important;
  justify-content:center !important;
  gap:10px !important;
  border-radius:16px !important;
  font-size:15px !important;
}
body.is-authenticated #btnMonetization::before{
  width:26px !important;
  height:26px !important;
  flex-basis:26px !important;
}
body.is-authenticated .sidebar-footer #adminLink.admin-access-btn{
  grid-column:1/-1 !important;
}

@media (max-width:430px){
  body.is-authenticated .sidebar-footer{
    gap:7px !important;
  }
  body.is-authenticated .sidebar-footer .btn:not(#adminLink){
    min-height:66px !important;
    padding:7px 3px 6px !important;
    border-radius:15px !important;
    font-size:10px !important;
    gap:4px !important;
  }
  body.is-authenticated .sidebar-footer .btn:not(#adminLink)::before{
    width:25px !important;
    height:25px !important;
    flex-basis:25px !important;
  }
  body.is-authenticated #btnMonetization{
    min-height:52px !important;
    padding:7px 10px !important;
    font-size:14px !important;
    gap:9px !important;
  }
  body.is-authenticated #btnMonetization::before{
    width:24px !important;
    height:24px !important;
    flex-basis:24px !important;
  }
}

@media (max-height:700px) and (max-width:920px){
  body.is-authenticated .sidebar-footer .btn:not(#adminLink){
    min-height:60px !important;
    padding:6px 3px 5px !important;
  }
  body.is-authenticated .sidebar-footer .btn:not(#adminLink)::before{
    width:23px !important;
    height:23px !important;
    flex-basis:23px !important;
  }
  body.is-authenticated #btnMonetization{
    min-height:46px !important;
    padding:6px 10px !important;
  }
}



/* AkiliChat v55 — majorité, pays et présence vidéo dans la conversation */
.auth-field-label{
  display:block;
  margin:2px 2px -3px;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}

.avatar-with-profile-icons{
  position:relative;
  overflow:visible !important;
}

.profile-icon-badges{
  position:absolute;
  right:-7px;
  bottom:-5px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:2px;
  pointer-events:none;
}

.profile-icon-badge{
  display:grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 3px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;
  background:#ffffff;
  color:#082147;
  font-size:12px;
  font-weight:900;
  line-height:1;
  box-shadow:0 2px 7px rgba(3,17,39,.28);
}

.profile-icon-badge.profile-country{
  font-size:13px;
}

.conversation-video-dock{
  flex:0 0 auto;
  padding:8px 10px 0;
}

.conversation-video-dock.hidden{
  display:none !important;
}

.conversation-video-shell{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface, rgba(7,24,52,.96));
  box-shadow:0 10px 28px rgba(3,17,39,.18);
}

.conversation-video-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
}

.conversation-video-head > div:first-child{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.conversation-video-head strong,
.conversation-video-head #callStatus{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.conversation-video-head #callStatus{
  color:var(--muted);
  font-size:12px;
}

.conversation-video-stage{
  height:clamp(150px, 25vh, 250px);
  min-height:0 !important;
  border:0;
  border-radius:0;
}

.conversation-video-stage .call-local-preview{
  width:min(30%, 150px);
  height:min(42%, 105px);
  right:10px;
  bottom:10px;
}

@media (max-width:640px){
  .conversation-video-dock{
    padding:5px 6px 0;
  }
  .conversation-video-shell{
    border-radius:14px;
  }
  .conversation-video-head{
    padding:6px 8px;
  }
  .conversation-video-head .btn.small{
    min-height:34px;
    padding:5px 8px;
    font-size:12px;
  }
  .conversation-video-stage{
    height:150px;
  }
  .conversation-video-stage .call-local-preview{
    width:92px;
    height:68px;
    right:7px;
    bottom:7px;
  }
}