/* ═══════════════════════════════════════════════════
   HOKAY — Conversations (liste)
   Dark Cocoa · Ember désaturé · Mobile-first
═══════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --c0:#080604;--c1:#0d0b08;--c2:#121009;--c3:#18140e;--c4:#1e1912;
  --border:#251f16;--border2:#2e261b;--muted:#3d3226;
  --fog:#8a7660;--fog2:#b09a80;
  --sand:#ede0cc;--sand2:#c8b898;
  --ember:#b97a45;--ember2:#9c6638;--ember3:#cf9462;
  --green:#22c55e;--red:#ef4444;--yellow:#f59e0b;--blue:#3b82f6;
  --sidebar-w:320px;
  --head-h:56px;
  --font:'DM Sans',-apple-system,system-ui,sans-serif;
  --font-display:'Syne',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --t:.15s ease;--ts:.28s cubic-bezier(.4,0,.2,1);
}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font);background:var(--c0);color:var(--sand);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
::selection{background:var(--ember);color:var(--c0)}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--muted);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--ember)}

/* ── App Shell (page liste = sidebar pleine largeur) ── */
.app{display:flex;height:100dvh;width:100vw;overflow:hidden;position:relative}

/* ── Sidebar / Liste de conversations ── */
.sidebar{width:100%;background:var(--c1);display:flex;flex-direction:column;height:100%;flex-shrink:0}
.sb-head{height:var(--head-h);padding:0 14px;flex-shrink:0;display:flex;align-items:center;gap:8px;background:rgba(13,11,8,.95);border-bottom:1px solid var(--border)}
.sb-logo{display:flex;align-items:center;gap:6px;text-decoration:none;flex-shrink:0}
.sb-logo-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#a8763f,#8a6133);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.75rem;color:white;font-family:var(--font-display);box-shadow:0 2px 10px rgba(185,122,69,.4)}
.sb-logo-name{font-weight:900;font-size:1.08rem;letter-spacing:-.5px;color:var(--sand);font-family:var(--font-display)}
.sb-logo-dot{color:var(--ember)}
.sb-head-actions{display:flex;gap:2px;margin-left:auto}
.sb-icon{width:32px;height:32px;border-radius:9px;border:none;background:transparent;color:var(--fog);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all var(--t)}
.sb-icon:hover{background:rgba(255,255,255,.07);color:var(--sand)}
.sb-search{padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.sb-search-box{display:flex;align-items:center;background:var(--c3);border:1.5px solid var(--border2);border-radius:22px;transition:border-color var(--t);overflow:hidden}
.sb-search-box:focus-within{border-color:rgba(185,122,69,.45)}
.sb-search-box i{width:36px;text-align:center;color:var(--muted);font-size:12px;flex-shrink:0}
.sb-search-inp{flex:1;background:transparent;border:none;outline:none;padding:8px 12px 8px 0;color:var(--sand);font-size:.83rem;font-family:var(--font)}
.sb-search-inp::placeholder{color:var(--muted)}
.sb-filters{display:flex;gap:5px;padding:7px 12px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.sb-filters::-webkit-scrollbar{display:none}
.sf-btn{padding:4px 12px;border-radius:20px;flex-shrink:0;white-space:nowrap;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:var(--fog);font-size:.72rem;font-weight:600;cursor:pointer;transition:all var(--t);font-family:var(--font)}
.sf-btn:hover{border-color:rgba(185,122,69,.3);color:var(--sand)}
.sf-btn.on{background:var(--ember);border-color:var(--ember);color:white;font-weight:700;box-shadow:0 2px 10px rgba(185,122,69,.35)}
.sf-badge{background:rgba(0,0,0,.3);color:inherit;font-size:.6rem;padding:1px 4px;border-radius:8px;margin-left:3px;font-weight:800}
.conv-list{flex:1;overflow-y:auto}
.conv-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.024);transition:background var(--t);position:relative;user-select:none}
.conv-item:hover{background:rgba(255,255,255,.04)}
.conv-item.on{background:rgba(185,122,69,.1)}
.conv-item.on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;background:linear-gradient(135deg,#a8763f,#8a6133);border-radius:0 3px 3px 0;box-shadow:2px 0 8px rgba(185,122,69,.4)}
.conv-av-w{position:relative;flex-shrink:0}
.conv-av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--muted),var(--ember));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:white;overflow:hidden}
.conv-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.conv-online{position:absolute;bottom:1px;right:1px;width:11px;height:11px;border-radius:50%;background:var(--green);border:2px solid var(--c1)}
.conv-body{flex:1;min-width:0}
.conv-r1{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px}
.conv-name{font-weight:700;font-size:.87rem;color:var(--sand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px;flex:1;min-width:0}
.conv-name-txt{overflow:hidden;text-overflow:ellipsis}
.conv-time{font-size:.67rem;color:var(--fog);white-space:nowrap;flex-shrink:0;margin-left:4px}
.conv-r2{display:flex;align-items:center;justify-content:space-between}
.conv-preview{font-size:.78rem;color:var(--fog);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.conv-badges{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:5px}
.unread{background:var(--ember);color:var(--c0);font-size:.63rem;font-weight:800;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 2px 8px rgba(185,122,69,.45)}
.pin-ico,.mute-ico{color:var(--fog);font-size:9px}

/* Conv ctx menu (clic droit sur une conversation) */
.conv-ctx{position:fixed;display:none;flex-direction:column;background:var(--c3);border:1px solid var(--border2);border-radius:12px;min-width:185px;z-index:1000;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.55);animation:pop .13s ease}
.conv-ctx.on{display:flex}
.conv-ctx-item{padding:10px 14px;background:none;border:none;color:var(--fog);font-size:.83rem;text-align:left;cursor:pointer;display:flex;align-items:center;gap:9px;transition:background var(--t);font-family:var(--font)}
.conv-ctx-item:hover{background:rgba(255,255,255,.05);color:var(--sand)}
.conv-ctx-item.red{color:#f87171}
.conv-ctx-item.red:hover{background:rgba(239,68,68,.08)}
.ctx-sep{height:1px;background:var(--border)}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

/* ── Spinner ── */
.spinner-wrap{display:flex;justify-content:center;padding:36px}
.spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,.07);border-top-color:var(--ember);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Modals (création conversation / groupe / réglages) ── */
.modal-bg{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;padding:14px}
@supports(backdrop-filter:blur(1px)){.modal-bg{background:rgba(0,0,0,.62);backdrop-filter:blur(10px)}}
.modal-bg.on{display:flex}
.modal-card{background:var(--c3);border:1px solid var(--border2);border-radius:18px;width:100%;box-shadow:0 28px 72px rgba(0,0,0,.7);animation:modal-in .22s cubic-bezier(.34,1.2,.64,1);overflow:hidden;display:flex;flex-direction:column}
.modal-card.sm{max-width:400px}.modal-card.md{max-width:520px}.modal-card.lg{max-width:620px}
@keyframes modal-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.modal-head{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-weight:800;font-size:.93rem;color:var(--sand);display:flex;align-items:center;gap:7px}
.modal-title i{color:var(--ember)}
.modal-close{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.07);border:none;cursor:pointer;color:var(--fog);font-size:13px;display:flex;align-items:center;justify-content:center;transition:all var(--t)}
.modal-close:hover{background:rgba(255,255,255,.13);color:var(--sand)}
.modal-body{padding:16px 18px;overflow-y:auto;flex:1;max-height:65vh}
.modal-foot{padding:13px 18px;border-top:1px solid var(--border);display:flex;gap:7px;flex-shrink:0}
.btn-primary{padding:9px 17px;background:var(--ember);color:var(--c0);border:none;border-radius:9px;font-weight:700;font-size:.84rem;cursor:pointer;transition:background var(--t);font-family:var(--font)}
.btn-primary:hover{background:var(--ember2)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.btn-secondary{padding:9px 17px;background:var(--c3);color:var(--fog);border:1px solid var(--border2);border-radius:9px;font-weight:600;font-size:.84rem;cursor:pointer;transition:all var(--t);font-family:var(--font)}
.btn-secondary:hover{border-color:rgba(185,122,69,.3);color:var(--sand)}
.mod-inp{width:100%;background:var(--c2);border:1.5px solid var(--border2);border-radius:10px;padding:9px 13px;color:var(--sand);font-size:.86rem;outline:none;font-family:var(--font);transition:border-color var(--t)}
.mod-inp:focus{border-color:rgba(185,122,69,.5)}
.mod-inp::placeholder{color:var(--muted)}
.mod-lbl{font-size:.7rem;font-weight:700;color:var(--fog);margin-bottom:5px;display:block;text-transform:uppercase;letter-spacing:.5px}
.user-list-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-radius:11px;transition:background var(--t);margin-bottom:3px}
.user-list-item:hover{background:rgba(255,255,255,.04)}
.user-list-item.on{background:rgba(185,122,69,.09)}
.user-av-sm{width:38px;height:38px;border-radius:50%;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,var(--muted),var(--ember));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.76rem;color:white}
.user-av-sm img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.user-list-name{font-weight:600;font-size:.86rem;color:var(--sand)}
.user-list-sub{font-size:.72rem;color:var(--fog)}
.user-list-check{margin-left:auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--t)}
.user-list-item.on .user-list-check{background:var(--ember);border-color:var(--ember);color:var(--c0)}
.sel-member-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.sel-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;background:rgba(185,122,69,.1);border:1px solid rgba(185,122,69,.28);font-size:.74rem;color:var(--ember)}
.sel-tag button{background:none;border:none;cursor:pointer;color:inherit;font-size:9px;display:flex;align-items:center}

/* Notifications */
.notif-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.04)}
.notif-row:last-child{border-bottom:none}
.notif-lbl{font-size:.85rem;font-weight:600;color:var(--sand)}
.notif-sub{font-size:.73rem;color:var(--fog);margin-top:2px}
.toggle-sw{position:relative;width:42px;height:23px}
.toggle-sw input{opacity:0;width:0;height:0}
.toggle-sw-track{position:absolute;inset:0;background:var(--muted);border-radius:12px;transition:background var(--t);cursor:pointer}
.toggle-sw-track::before{content:'';position:absolute;width:17px;height:17px;border-radius:50%;background:white;top:3px;left:3px;transition:transform var(--t);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.toggle-sw input:checked+.toggle-sw-track{background:var(--ember)}
.toggle-sw input:checked+.toggle-sw-track::before{transform:translateX(19px)}

/* Settings */
.settings-ov{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center}
.settings-ov.on{display:flex}
.settings-card{background:var(--c3);border:1px solid var(--border2);border-radius:18px;width:min(470px,95vw);max-height:88vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.6)}
.settings-section{padding:18px;border-bottom:1px solid var(--border)}
.settings-section:last-child{border-bottom:none}
.settings-section-title{font-size:.7rem;font-weight:800;color:var(--fog);text-transform:uppercase;letter-spacing:.7px;margin-bottom:13px;display:flex;align-items:center;gap:7px}
.settings-section-title::after{content:'';flex:1;height:1px;background:var(--border)}

/* Toast */
#toastEl{position:fixed;bottom:22px;right:18px;z-index:99999;background:var(--c3);border:1px solid var(--border2);border-radius:13px;padding:11px 16px;display:none;align-items:center;gap:9px;max-width:300px;min-width:190px;box-shadow:0 10px 36px rgba(0,0,0,.55);pointer-events:none}
#toastEl.on{display:flex;animation:toast-in .28s cubic-bezier(.34,1.56,.64,1) both}
#toastEl.success{border-left:3px solid var(--green)}
#toastEl.error{border-left:3px solid var(--red)}
#toastEl.warning{border-left:3px solid var(--yellow)}
#toastEl.info{border-left:3px solid var(--ember)}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ── Responsive ── */
@media(max-width:640px){
  .conv-ctx{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100%!important;border-radius:18px 18px 0 0;min-width:unset;padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .conv-ctx-item{padding:13px 18px;font-size:.88rem}
  #toastEl{left:10px;right:10px;bottom:14px;max-width:none}
  .modal-bg{align-items:flex-end;padding:0}
  .modal-card{border-radius:20px 20px 0 0;max-width:100%;max-height:92dvh;overflow-y:auto}
}