/*
Theme Name: Lchat
Theme URI: https://example.com/lchat
Author: Lolo
Author URI: https://example.com
Description: Application de messagerie chiffree de bout en bout (Lchat), integree comme theme WordPress. Une fois active, ce theme remplace l'affichage public du site par l'application de discussion.
Version: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lchat
*/

:root{
  --blue:#2563eb; --blue-2:#1d4ed8; --blue-soft:#e8effd;
  --bg:#e9eef6; --panel:#ffffff; --panel-2:#f4f7fb; --hover:#eef3fa;
  --text:#0f1b2d; --text-2:#5b6b82; --text-3:#94a3b8; --line:#e3e9f2;
  --ok:#16a34a; --bad:#dc2626;
  --r:14px;
  --shadow:0 24px 70px rgba(15,27,45,.16);
  --font:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --blue:#3b82f6; --blue-2:#2563eb; --blue-soft:#162540;
    --bg:#070c16; --panel:#0f1726; --panel-2:#162033; --hover:#18233a;
    --text:#e6edf8; --text-2:#9aa9c0; --text-3:#64748b; --line:#1e2a40;
    --shadow:0 24px 70px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.45;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
a{color:inherit}
img{display:block}
.hidden{display:none!important}
.ic{flex:none;display:block}
:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 55%,transparent);outline-offset:2px;border-radius:10px}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-3) 45%,transparent);border-radius:6px}

#error-banner{position:fixed;top:0;left:0;right:0;z-index:999;background:var(--bad);color:#fff;font-size:13px;font-weight:600;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px));display:flex;gap:12px;align-items:center;justify-content:space-between}
#error-banner button{color:#fff;display:grid;place-items:center}

/* Éléments communs */
.logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(140deg,#3b82f6,#1d4ed8);display:grid;place-items:center;flex:none;box-shadow:0 6px 18px rgba(37,99,235,.35)}
.logo.big{width:60px;height:60px;border-radius:20px}
.av{line-height:1;border-radius:50%;object-fit:cover;flex:none;display:inline-grid;place-items:center;color:#fff;font-weight:700;letter-spacing:.02em;user-select:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:11px 18px;font-weight:600;font-size:14.5px;min-height:44px;transition:background .15s,transform .1s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-2)}
.btn.ghost{background:var(--panel-2);color:var(--text)}
.btn.ghost:hover{background:var(--hover)}
.btn.block{width:100%}
.btn:disabled{opacity:.7;cursor:progress}
.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--text-2);transition:background .15s,color .15s}
.icon-btn:hover{background:var(--hover);color:var(--text)}
.icon-btn.danger{color:var(--bad)}
.spin{width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;display:inline-block}
.spin.small{width:14px;height:14px;border-width:2px}
@keyframes spin{to{transform:rotate(360deg)}}
.err{color:var(--bad);font-size:13.5px;font-weight:600}
.err.info{color:var(--blue)}
.muted{color:var(--text-2)}
.small{font-size:13px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text-2)}
.fld input,.fld textarea{width:100%;background:var(--panel-2);border:1.5px solid transparent;border-radius:12px;padding:12px 14px;font-size:15px;font-weight:500;color:var(--text);outline:none;resize:none}
.fld input:focus,.fld textarea:focus{border-color:var(--blue);background:var(--panel)}
.seg{display:flex;background:var(--panel-2);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;padding:9px 10px;border-radius:9px;font-weight:600;font-size:14px;color:var(--text-2)}
.seg button[aria-selected="true"]{background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.seg.small button{padding:6px 8px;font-size:13px}

/* Connexion */
.auth-root{height:100%;display:grid;place-items:center;padding:20px;overflow-y:auto}
.auth-card{width:100%;max-width:400px;background:var(--panel);border-radius:26px;box-shadow:var(--shadow);padding:30px 26px;display:flex;flex-direction:column;gap:20px}
.auth-top{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.auth-top h1{font-size:28px;font-weight:800;letter-spacing:-.03em;margin-top:6px}
.auth-top p{color:var(--text-2)}
.auth-body{display:flex;flex-direction:column;gap:14px}
.pass{position:relative}
.pass button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;color:var(--text-3)}
.auth-foot{font-size:12.5px;color:var(--text-3);display:flex;gap:6px;align-items:center;justify-content:center;text-align:center}

/* Coque */
.shell{height:100dvh;display:flex;background:var(--panel);overflow:hidden}
@media (min-width:900px){.shell{max-width:1260px;height:calc(100dvh - 40px);margin:20px auto;border-radius:24px;box-shadow:var(--shadow);border:1px solid var(--line)}}
.sidebar{width:100%;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--panel);min-width:0;padding-top:env(safe-area-inset-top,0px)}
@media (min-width:900px){.sidebar{width:370px;flex:none;padding-top:0}}
.main{flex:1;min-width:0;display:none;flex-direction:column;position:relative}
@media (min-width:900px){.main{display:flex}}
@media (max-width:899px){.shell.chat-open .sidebar{display:none}.shell.chat-open .main{display:flex}}

/* Barre latérale */
.sb-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px 18px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.03em}
.head-actions{display:flex;align-items:center;gap:2px}
.me-btn{margin-left:6px;border-radius:50%;padding:2px;box-shadow:0 0 0 2px var(--blue)}
.menu{position:absolute;top:58px;right:14px;z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:6px;min-width:270px}
.menu button{width:100%;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;font-size:14.5px;font-weight:500;text-align:left;color:var(--text)}
.menu button:hover{background:var(--hover)}
.menu .danger{color:var(--bad)}
.search{margin:4px 14px 10px;display:flex;align-items:center;gap:8px;background:var(--panel-2);border-radius:12px;padding:0 12px;color:var(--text-3)}
.search input{flex:1;border:0;background:none;outline:none;padding:11px 0;font-size:14.5px;color:var(--text)}
.list{flex:1;overflow-y:auto;padding:0 8px 12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.list-empty{padding:30px 18px;text-align:center;color:var(--text-2);display:flex;flex-direction:column;gap:8px;align-items:center}
.list-empty .btn{margin-top:8px}
.conv{width:100%;display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;text-align:left;transition:background .12s}
.conv:hover{background:var(--hover)}
.conv.active{background:var(--blue-soft)}
.av-wrap{position:relative;flex:none}
.dot{position:absolute;right:1px;bottom:1px;width:14px;height:14px;border-radius:50%;background:#2563eb;border:2.5px solid var(--panel);box-shadow:0 0 0 0 rgba(37,99,235,.5);animation:online 2.4s ease-out infinite}
@keyframes online{0%{box-shadow:0 0 0 0 rgba(37,99,235,.45)}70%,100%{box-shadow:0 0 0 7px rgba(37,99,235,0)}}
.conv-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.conv-name{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-sub{color:var(--text-2);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv.unread .conv-sub{color:var(--text);font-weight:600}
.conv-end{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.conv-time{font-size:12px;color:var(--text-3)}
.conv.unread .conv-time{color:var(--blue);font-weight:700}
.badge{min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:var(--blue);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.pin{color:var(--text-3)}

/* Accueil sans conversation */
.welcome{margin:auto;text-align:center;max-width:380px;padding:30px;display:flex;flex-direction:column;align-items:center;gap:12px}
.welcome h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-top:8px}
.welcome p{color:var(--text-2)}

/* En-tête de conversation */
.chat-head{display:flex;align-items:center;gap:6px;padding:10px 10px;padding-top:calc(10px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line);background:var(--panel);z-index:2}
@media (min-width:900px){.chat-head{padding-top:10px}.back{display:none!important}}
.chat-id{display:flex;align-items:center;gap:11px;min-width:0;flex:1;text-align:left;padding:4px 6px;border-radius:12px}
.chat-id:hover{background:var(--hover)}
.chat-id>span:not(.av){display:flex;flex-direction:column;min-width:0}
.chat-name{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-status{font-size:12.5px;color:var(--text-3)}
.chat-status.on{color:var(--blue);font-weight:600}
.chat-status.bad{color:var(--bad);font-weight:600}
.e2e{color:var(--text-3);display:grid;place-items:center;padding:0 4px}

/* Messages */
.main{--chat-bg:#eef3fb;--me:#2563eb;--me-text:#fff;--them:#fff;--them-text:#1e293b}
.msgs-wrap{flex:1;position:relative;min-height:0;background:var(--chat-bg)}
.msgs{position:absolute;inset:0;overflow-y:auto;padding:14px 14px 10px;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain}
@media (min-width:900px){.msgs{padding:18px 28px 12px}}
.loading,.chat-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-2);text-align:center;max-width:340px;font-size:14px;background:color-mix(in srgb,var(--panel) 75%,transparent);padding:16px 20px;border-radius:16px}
.chat-dark .loading,.chat-dark .chat-empty{color:#cbd5e1;background:rgba(255,255,255,.06)}
.day{align-self:center;margin:14px 0 8px;font-size:12px;font-weight:600;color:var(--text-2);background:color-mix(in srgb,var(--panel) 85%,transparent);padding:5px 12px;border-radius:10px;text-transform:none}
.chat-dark .day{background:rgba(255,255,255,.08);color:#cbd5e1}
.day span::first-letter{text-transform:uppercase}
.row{display:flex;margin-top:8px}
.row.grouped{margin-top:2px}
.row.me{justify-content:flex-end}
.mcol{display:flex;flex-direction:column;align-items:flex-start;max-width:min(78%,560px);min-width:0}
.row.me .mcol{align-items:flex-end}
.bubble{max-width:100%;background:var(--them);color:var(--them-text);padding:8px 12px 6px;border-radius:18px;box-shadow:0 1px 1.5px rgba(15,27,45,.08);position:relative;word-wrap:break-word;overflow-wrap:anywhere}
.row:not(.me):not(.grouped) .bubble{border-top-left-radius:6px}
.row.me .bubble{background:var(--me);color:var(--me-text)}
.row.me:not(.grouped) .bubble{border-top-right-radius:6px}
.bubble .txt{font-size:15px;line-height:1.42}
.bubble a{text-decoration:underline}
.foot{float:right;display:inline-flex;align-items:center;gap:3px;font-size:11px;opacity:.72;margin:6px 0 -2px 10px;line-height:1}
.foot.plain{float:none;margin:4px 0 0;opacity:.6;color:var(--text-2)}
.tk{display:inline-flex}
.tk.read{color:#7dd3fc;opacity:1}
.row:not(.me) .tk.read{color:var(--blue)}
.tk.bad{color:#fecaca;font-weight:800}
.bubble.emoji{background:none!important;box-shadow:none;padding:0 2px}
.bubble.emoji .txt{font-size:40px;line-height:1.15}
.bubble.emoji .foot{color:var(--text-2);float:none;display:flex;justify-content:flex-end}
.bubble.deleted{font-style:italic;opacity:.75;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bubble.deleted .foot{margin-left:auto}
.bubble.img{padding:4px}
.bubble.img img{max-width:min(320px,100%);max-height:380px;border-radius:14px;cursor:zoom-in;object-fit:cover}
.bubble.img .foot{position:absolute;right:12px;bottom:10px;margin:0;background:rgba(0,0,0,.45);color:#fff;padding:3px 7px;border-radius:9px;opacity:1}
.sticker{font-size:58px;line-height:1.1;display:flex;flex-direction:column;align-items:flex-end}
.row:not(.me) .sticker{align-items:flex-start}
.audio{display:flex;align-items:center;gap:10px;min-width:210px}
.audio .play{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,currentColor 18%,transparent);flex:none}
.audio .bar{flex:1;height:4px;border-radius:2px;background:color-mix(in srgb,currentColor 25%,transparent);overflow:hidden}
.audio .bar i{display:block;height:100%;width:0;background:currentColor;transition:width .2s linear}
.audio .dur{font-size:12px;font-variant-numeric:tabular-nums;opacity:.85}
.to-bottom{position:absolute;right:16px;bottom:14px;height:40px;min-width:40px;padding:0 10px;border-radius:20px;background:var(--panel);color:var(--text);box-shadow:0 6px 20px rgba(0,0,0,.18);display:flex;align-items:center;gap:4px;font-weight:700;font-size:13px}
.to-bottom span:empty{display:none}

/* Saisie */
#composer{background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.bar{display:flex;align-items:flex-end;gap:4px;padding:8px 10px;position:relative}
.bar textarea{flex:1;background:var(--panel-2);border:0;outline:none;border-radius:20px;padding:10px 15px;font-size:15px;line-height:1.4;resize:none;max-height:132px;min-height:42px;color:var(--text)}
.bar .icon-btn{margin-bottom:1px}
.send{width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex:none;transition:background .15s,transform .1s}
.send:hover{background:var(--blue-2)}
.send:active{transform:scale(.92)}
.bar.rec{align-items:center}
.rec-info{flex:1;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2)}
.rec-info b{color:var(--text);font-variant-numeric:tabular-nums}
.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--bad);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.blocked{padding:16px;text-align:center;font-size:14px;color:var(--text-2)}
.blocked button{color:var(--blue);font-weight:700;margin-left:6px}
.picker{position:absolute;bottom:calc(100% + 6px);left:10px;width:min(330px,calc(100vw - 20px));background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:10px;z-index:20;display:flex;flex-direction:column;gap:10px}
.pgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:220px;overflow-y:auto}
.pgrid button{font-size:24px;padding:5px 0;border-radius:10px}
.pgrid button:hover{background:var(--hover)}
.pgrid.sticker{grid-template-columns:repeat(4,1fr)}
.pgrid.sticker button{font-size:30px;padding:8px 0}

/* Fenêtres */
.overlay{position:fixed;inset:0;z-index:220;background:rgba(5,10,20,.55);display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .15s ease}
@keyframes fade{from{opacity:0}}
.modal{width:100%;max-width:420px;max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--panel);border-radius:22px;box-shadow:var(--shadow);animation:up .22s cubic-bezier(.2,.85,.2,1)}
@keyframes up{from{opacity:0;transform:translateY(18px)}}
@media (max-width:560px){.overlay{align-items:flex-end;padding:0}.modal{max-width:none;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}}
.modal.sheet{max-width:360px}
.m-head{display:flex;align-items:center;justify-content:space-between;padding:16px 14px 6px 20px}
.m-head h3{font-size:18px;font-weight:800;letter-spacing:-.02em}
.m-body{padding:12px 20px 20px;display:flex;flex-direction:column;gap:14px}
.m-body.center{align-items:center;text-align:center;gap:8px}
.m-body.actions{gap:4px;padding-top:4px}
.m-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.copybox{background:var(--panel-2);border-radius:12px;padding:12px 14px;font-size:13px;word-break:break-all;color:var(--text-2)}
.row-btns{display:flex;gap:8px;flex-wrap:wrap}
.copyrow{display:flex;gap:8px}
.copyrow input{font-size:12.5px!important;color:var(--text-2)!important}
.copyrow .btn{flex:none}
.av-edit{align-self:center;position:relative;border-radius:50%}
.av-edit span{position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;opacity:0;transition:opacity .15s}
.av-edit:hover span,.av-edit:focus-visible span{opacity:1}
@media (hover:none){.av-edit span{opacity:1;inset:auto 0 0 0;height:30px;border-radius:0 0 50px 50px}}
.p-name{font-size:21px;font-weight:800;margin-top:6px}
.e2e-card{display:flex;gap:10px;align-items:center;background:var(--blue-soft);color:var(--text);border-radius:14px;padding:12px 14px;font-size:13.5px;text-align:left;margin-top:8px}
.e2e-card .ic{color:var(--blue)}
.act{display:flex;align-items:center;gap:12px;width:100%;padding:13px 12px;border-radius:12px;font-weight:600;font-size:15px;text-align:left}
.act:hover{background:var(--hover)}
.act.danger{color:var(--bad)}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.theme{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px;border-radius:14px;border:2px solid transparent;font-size:12.5px;font-weight:600}
.theme span{width:52px;height:52px;border-radius:16px}
.theme.on{border-color:var(--blue);background:var(--blue-soft)}
.priv{display:flex;gap:12px;align-items:flex-start}
.priv .ic{color:var(--blue);margin-top:2px}
.priv p{color:var(--text-2);font-size:13.5px;margin-top:2px}
.lightbox{position:fixed;inset:0;z-index:240;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:20px;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px}
.lightbox .icon-btn{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;color:#fff;background:rgba(255,255,255,.12)}

.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:300;background:var(--text);color:var(--panel);padding:11px 18px;border-radius:14px;font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:up .2s ease;max-width:calc(100vw - 32px);text-align:center}
.toast.bad{background:var(--bad);color:#fff}
@media (max-width:899px){.toast{bottom:auto;top:calc(14px + env(safe-area-inset-top,0px))}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}

/* ── Onglets ── */
.tabs{display:flex;gap:4px;margin:0 14px 8px;background:var(--panel-2);border-radius:12px;padding:4px}
.tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 8px;border-radius:9px;font-weight:600;font-size:14px;color:var(--text-2);position:relative}
.tabs button[aria-selected="true"]{background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.tab-badge:not(:empty){min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center}
.tab-dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.conv-sub.typing{color:var(--blue);font-weight:600;font-style:italic}

/* ── Anneaux de statut ── */
.av-wrap.ring{padding:3px;border-radius:50%}
.av-wrap.ring .av{border:2px solid var(--panel)}
.av-wrap.ring.new{background:conic-gradient(#22c55e,#2563eb,#22c55e)}
.av-wrap.ring.seen{background:var(--line)}
.av-wrap.ring.mine{background:conic-gradient(#2563eb,#60a5fa,#2563eb)}
.av-wrap .plus{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;border:2.5px solid var(--panel);display:grid;place-items:center}
.st-me{padding:2px 0 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.st-add{display:flex;gap:8px;padding:4px 10px 6px}
.st-add .btn{flex:1;min-height:40px;padding:8px 12px}
.st-h{font-size:12.5px;font-weight:700;color:var(--text-3);padding:12px 10px 4px}

/* ── Éditeur de statut ── */
.st-editor{position:fixed;inset:0;z-index:180;display:flex;flex-direction:column;color:#fff;transition:background .25s;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.st-editor.photo{background:#000}
.st-ed-top{display:flex;align-items:center;justify-content:space-between;padding:12px}
.icon-btn.light{color:#fff;background:rgba(255,255,255,.14)}
.icon-btn.light:hover{background:rgba(255,255,255,.24);color:#fff}
.st-colors{display:flex;gap:8px}
.st-colors button{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.85)}
.st-editor textarea{flex:1;background:none;border:0;outline:none;resize:none;color:#fff;text-align:center;font-weight:700;font-size:34px;line-height:1.3;padding:10vh 8vw 20px;letter-spacing:-.01em}
.st-editor textarea::placeholder{color:rgba(255,255,255,.6)}
.st-ed-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px}
.st-ed-foot span{font-size:13px;opacity:.8}
.st-ed-foot input{flex:1;background:rgba(255,255,255,.14);border:0;outline:none;border-radius:22px;padding:12px 16px;color:#fff;font-size:15px}
.st-ed-foot input::placeholder{color:rgba(255,255,255,.65)}
.send.big{width:52px;height:52px}
.st-photo{flex:1;min-height:0;display:grid;place-items:center;padding:0 10px}
.st-photo img{max-width:100%;max-height:100%;border-radius:10px}

/* ── Lecteur de statuts ── */
.sv{position:fixed;inset:0;z-index:190;background:#000;color:#fff;display:flex;flex-direction:column;user-select:none;transition:background .3s}
@media (min-width:900px){.sv{inset:20px calc(50% - 260px);border-radius:22px;overflow:hidden;box-shadow:0 0 0 100vmax rgba(0,0,0,.85)}}
.sv-bars{display:flex;gap:4px;padding:calc(10px + env(safe-area-inset-top,0px)) 10px 0;position:relative;z-index:3}
.sv-bars span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.sv-bars i{display:block;height:100%;width:0;background:#fff}
.sv-top{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 6px 14px;position:relative;z-index:3}
.sv-top #sv-who{display:flex;align-items:center;gap:10px}
.sv-top #sv-who span:not(.av){display:flex;flex-direction:column}
.sv-top small{font-size:12px;opacity:.8}
.sv-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;position:relative}
.sv-body img{max-width:100%;max-height:calc(100% - 60px);object-fit:contain}
.sv-text{font-weight:700;text-align:center;line-height:1.3;padding:0 8%;white-space:pre-wrap;overflow-wrap:anywhere}
.sv-text.small{font-size:16px;font-weight:500}
.sv-text a{color:#fff}
.sv-cap{margin-top:12px;text-align:center;font-size:15px;background:rgba(0,0,0,.45);padding:8px 14px;border-radius:12px;max-width:90%}
.sv-tap{position:absolute;top:90px;bottom:80px;z-index:2;background:none}
.sv-tap.prev{left:0;width:30%}
.sv-tap.next{right:0;width:70%}
.sv-foot{position:relative;z-index:3;display:flex;justify-content:center;gap:10px;padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px))}
.sv-btn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);color:#fff;padding:10px 16px;border-radius:20px;font-weight:600;font-size:14px}
.sv-reply{display:flex;gap:8px;width:100%}
.sv-reply input{flex:1;background:rgba(255,255,255,.16);border:0;outline:none;border-radius:22px;padding:11px 16px;color:#fff;font-size:15px}
.sv-reply input::placeholder{color:rgba(255,255,255,.7)}
.viewers .m-body{gap:6px}
.viewer{display:flex;align-items:center;gap:12px;padding:6px 0}
.viewer span:not(.av){display:flex;flex-direction:column}
.viewer small{color:var(--text-3);font-size:12.5px}
.center-txt{text-align:center;padding:10px 0}

/* ── Réponses ── */
.reply-bar{display:flex;align-items:center;gap:10px;margin:8px 10px 0;padding:8px 6px 8px 12px;border-radius:12px;background:var(--panel-2);border-left:4px solid var(--blue);color:var(--blue)}
.reply-bar div{flex:1;min-width:0;display:flex;flex-direction:column;color:var(--text)}
.reply-bar b{font-size:13px;color:var(--blue)}
.reply-bar span{font-size:13.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quote{display:flex;flex-direction:column;width:100%;text-align:left;border-left:3.5px solid currentColor;background:color-mix(in srgb,currentColor 10%,transparent);border-radius:8px;padding:5px 9px;margin:2px 0 6px;font-size:13px;min-width:140px}
.quote b{font-size:12.5px}
.quote span{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.quote.st::before{content:"Réponse à un statut";font-size:11px;opacity:.7;font-weight:600}
.row.flash .bubble{animation:flash 1.2s ease}
@keyframes flash{0%,40%{box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 45%,transparent)}}

/* ── Photo de profil ── */
.onboard h3{font-size:20px;font-weight:800;margin-top:10px}
.av-pick{position:relative;border-radius:50%;margin-top:10px}
.av-pick .cam{position:absolute;right:2px;bottom:2px;width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;border:3px solid var(--panel)}
.m-foot.full{width:100%;justify-content:stretch}
.m-foot.full .btn{flex:1}
.row-btns.center{justify-content:center}
.small-btn{min-height:36px;padding:7px 12px;font-size:13.5px}
.av-big{border-radius:50%}
.av-big:disabled{cursor:default}

/* ── Connexion / diagnostic ── */
.conn{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:260;background:#b45309;color:#fff;font-size:13px;font-weight:600;padding:9px 14px;border-radius:14px;display:flex;gap:10px;align-items:center;max-width:calc(100vw - 24px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.conn button{background:#fff;color:#b45309;border-radius:9px;padding:5px 10px;font-weight:700;flex:none}
.diag{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.diag dt{color:var(--text-2)}
.diag dd{margin:0;font-weight:600}
.diag-err{background:var(--panel-2);border-radius:12px;padding:10px 12px;font-size:12.5px;max-height:160px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.diag-err b{font-variant-numeric:tabular-nums}

.steps-in{margin:0 0 0 20px;display:flex;flex-direction:column;gap:8px;font-size:14.5px}

/* ── Groupes ── */
.av.ng{background:var(--blue-soft)!important;color:var(--blue)}
.conv.newgroup .conv-name{color:var(--blue)}
.row.sysrow{justify-content:center;margin:10px 0}
.sys{font-size:12.5px;font-weight:600;color:var(--text-2);background:color-mix(in srgb,var(--panel) 85%,transparent);padding:6px 12px;border-radius:10px;text-align:center;max-width:85%}
.chat-dark .sys{background:rgba(255,255,255,.08);color:#cbd5e1}
.sender{display:block;font-size:12.5px;font-weight:700;margin-bottom:2px}
.sticker .sender{font-size:12.5px;line-height:1.2}
.bubble.img .sender{padding:4px 8px 2px}
.pick-list{display:flex;flex-direction:column;gap:2px;max-height:min(46vh,380px);overflow-y:auto;margin:0 -8px}
.pick{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;cursor:pointer;font-weight:600}
.pick:hover{background:var(--hover)}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick span{flex:1}
.pick .tick{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:transparent}
.pick.on .tick{background:var(--blue);border-color:var(--blue);color:#fff}
.pick:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--blue) 55%,transparent)}
.members{display:flex;flex-direction:column;gap:2px}
.member{display:flex;align-items:center;gap:12px;padding:6px 0}
.mb-name{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.mb-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge-admin{font-size:11px;font-weight:700;color:var(--blue);background:var(--blue-soft);padding:2px 8px;border-radius:8px}
.gi-name{display:flex;align-items:center;gap:4px;justify-content:center}
.av-pick:disabled{cursor:default}
.m-foot #ng-count{margin-right:auto;align-self:center}

/* ── Lueurs ✨ ── */
.spark{position:absolute;top:-4px;right:-4px;font-size:14px;font-style:normal;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));opacity:.65}
.spark.new{opacity:1;animation:sparkle 1.8s ease-in-out infinite}
@keyframes sparkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(12deg)}}
.spark-btn{font-size:18px;opacity:.8}
.spark-btn.new{opacity:1;animation:sparkle 1.8s ease-in-out infinite}
.spark-ic{font-style:normal;margin-right:2px}
.mi-spark{width:18px;text-align:center}
.whisper{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:170;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 24px);
  background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(10px);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px;font-size:13.5px;
  box-shadow:0 10px 30px rgba(15,27,45,.18);animation:whisperIn .45s cubic-bezier(.2,.9,.3,1.2);transition:opacity .4s,transform .4s}
.whisper.out{opacity:0;transform:translate(-50%,-10px)}
.whisper .w-go{color:var(--blue);margin-left:4px}
@keyframes whisperIn{from{opacity:0;transform:translate(-50%,-14px) scale(.96)}}
.lueur-chip{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:6px;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(90deg,#fff7d6,#ffe9f2);color:#5b3b00;border:1px solid #ffe08a;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;box-shadow:0 6px 18px rgba(245,180,0,.18)}
.lueur-chip b{color:#c2410c;flex:none}
.lueur-chip .lc-txt{overflow:hidden;text-overflow:ellipsis;min-width:0}
.chat-dark .lueur-chip{background:linear-gradient(90deg,#3a2f0b,#3b1630);color:#ffe7a3;border-color:#6b5310}
.dur-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;color:#fff;padding:0 12px}
.dur-chips button{background:rgba(255,255,255,.16);color:#fff;border-radius:999px;padding:7px 12px;font-weight:700;font-size:13px}
.dur-chips button.on{background:#fff;color:#111827}
.st-ed-top .dur-chips{flex:1;justify-content:flex-end}
.lueur-hint{color:#fff;text-align:center;font-size:13px;opacity:.9;margin:0 16px 8px}
.lueur-title{font-weight:700;font-size:14px;margin-top:6px}
.lueur-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 6px;max-width:100%;justify-content:flex-start}
.m-body.center .lueur-strip{justify-content:center}
.lueur-tile{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;width:76px}
.lt-prev{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:11px;line-height:1.15;padding:8px;text-align:center;overflow:hidden;
  box-shadow:0 0 0 3px var(--panel),0 0 0 5px #f5b400}
.lueur-tile.new .lt-prev{box-shadow:0 0 0 3px var(--panel),0 0 0 5px #ff4f8b;animation:glow 2s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 3px var(--panel),0 0 0 5px #f5b400,0 0 16px 4px rgba(255,79,139,.35)}}
.lueur-tile small{font-size:11.5px;color:var(--text-2);text-align:center;line-height:1.2}
.my-lueurs{background:var(--panel-2);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px}
.ml-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lueur-choice{display:flex;gap:10px}
.lueur-choice .btn{flex:1}
.quote.st.lu::before{content:"Réponse à une lueur ✨"}

/* ── Iconics ── */
.iconic{display:block;overflow:visible}
.iconic-msg .iconic{filter:drop-shadow(0 4px 8px rgba(15,27,45,.15))}
.pgrid.ic-grid{grid-template-columns:repeat(4,1fr);gap:4px;max-height:270px}
.pgrid.ic-grid button{padding:4px;display:grid;place-items:center;border-radius:14px}
.pgrid.ic-grid button:hover .iconic .ic-body{animation:icBounce .6s ease}
.ia-bounce .ic-body{animation:icBounce 2.2s ease-in-out infinite;transform-origin:60px 107px}
.ia-shake .ic-body{animation:icShake 1.6s ease-in-out infinite;transform-origin:60px 107px}
.ia-beat .ic-body{animation:icBeat 1.3s ease-in-out infinite;transform-origin:60px 70px}
.ia-sink .ic-body{animation:icSink 3s ease-in-out infinite;transform-origin:60px 107px}
.ia-tilt .ic-body{animation:icTilt 3s ease-in-out infinite;transform-origin:60px 107px}
.ia-pop .ic-body{animation:icPop 2s ease-in-out infinite;transform-origin:60px 70px}
.ia-breathe .ic-body{animation:icBreathe 3.4s ease-in-out infinite;transform-origin:60px 107px}
.ia-bow .ic-body{animation:icBow 2.6s ease-in-out infinite;transform-origin:60px 107px}
.ia-run .ic-body{animation:icRun .5s ease-in-out infinite;transform-origin:60px 107px}
.icp-wave{animation:icWave 1s ease-in-out infinite;transform-origin:100px 50px}
.icp-float{animation:icFloat 2.4s ease-in-out infinite}
.icp-beat{animation:icBeat 1.3s ease-in-out infinite;transform-origin:60px 96px}
.icp-twinkle{animation:icTwinkle 1.6s ease-in-out infinite}
.icp-shake{animation:icShake .9s ease-in-out infinite;transform-origin:60px 20px}
.icp-pop{animation:icPop 1.8s ease-in-out infinite;transform-origin:95px 95px}
.icp-flicker{animation:icFlicker .9s ease-in-out infinite;transform-origin:60px 34px}
.icp-dash{animation:icDash .5s linear infinite}
@keyframes icBounce{0%,100%{transform:translateY(0) scale(1,1)}40%{transform:translateY(-7px) scale(.98,1.02)}60%{transform:translateY(0) scale(1.03,.97)}}
@keyframes icShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
@keyframes icBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.1)}30%{transform:scale(.97)}45%{transform:scale(1.06)}}
@keyframes icSink{0%,100%{transform:translateY(0)}50%{transform:translateY(3px) scale(1.02,.97)}}
@keyframes icTilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes icPop{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes icBreathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,.97)}}
@keyframes icBow{0%,100%{transform:rotate(0)}40%,60%{transform:rotate(9deg) translateY(2px)}}
@keyframes icRun{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes icWave{0%,100%{transform:rotate(0)}50%{transform:rotate(22deg)}}
@keyframes icFloat{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-6px);opacity:.75}}
@keyframes icTwinkle{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes icFlicker{0%,100%{transform:scale(1,1)}50%{transform:scale(.92,1.08)}}
@keyframes icDash{from{transform:translateX(4px);opacity:1}to{transform:translateX(-6px);opacity:.2}}
.msgs-wrap.has-chip .msgs{padding-top:56px}

/* ══ 5.0 ══ */
/* Menu + discret */
.more-pop{position:absolute;bottom:calc(100% + 6px);left:52px;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:6px;min-width:220px;display:flex;flex-direction:column}
.more-pop button{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;font-weight:600;font-size:14.5px;text-align:left}
.more-pop button:hover{background:var(--hover)}
.more-pop .mi{width:18px;text-align:center}
.mode-row{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px 0}
.mode-chip{display:inline-flex;align-items:center;gap:6px;background:var(--blue-soft);color:var(--blue);border-radius:999px;padding:5px 6px 5px 11px;font-size:13px;font-weight:700}
.mode-chip.gift{background:#ffe4ef;color:#c2185b}
.mode-chip.sched{background:#e7f6ec;color:#15803d}
.mode-chip.edit{background:#fff4d6;color:#a16207}
.mode-chip button{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.06);color:inherit}
.sched-chip{display:flex;align-items:center;gap:6px;margin:8px 12px 0;font-size:13px;font-weight:700;color:#15803d;background:#e7f6ec;border-radius:999px;padding:5px 12px}
.sched-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.sched-item div{flex:1;min-width:0;display:flex;flex-direction:column}
.sched-item b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched-item small{color:var(--text-2);display:flex;gap:4px;align-items:center;font-size:12.5px}
.sched-opts{display:flex;flex-direction:column;gap:2px}
/* Mentions */
.mention-pop{position:absolute;bottom:calc(100% + 6px);left:12px;right:12px;z-index:21;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:6px;max-height:240px;overflow-y:auto}
.mention-pop button{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:10px;font-weight:600;text-align:left}
.mention-pop button:hover,.mention-pop button:first-child{background:var(--hover)}
.mention{font-weight:700;color:var(--blue)}
.row.me .mention{color:inherit;text-decoration:underline;text-underline-offset:2px}
.mention.me{background:color-mix(in srgb,var(--blue) 15%,transparent);border-radius:6px;padding:0 3px}
.badge.at{background:#f59e0b}
.role-tag{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;padding:1px 7px;border-radius:7px;background:color-mix(in srgb,currentColor 12%,transparent);vertical-align:1px}
.mb-name .role-tag{color:var(--text-2)}
.pill-btn{background:var(--panel-2);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600}
.pill-btn:hover{background:var(--hover)}
.role-ideas{display:flex;flex-wrap:wrap;gap:6px}
/* Modifié, étiquettes */
.edited{font-style:italic;margin-right:4px;opacity:.85}
.x-tag{display:block;font-size:11.5px;font-weight:700;opacity:.75;margin-bottom:2px}
/* Flou */
.bubble.blurred{position:relative;cursor:pointer}
.bubble.blurred .txt{filter:blur(7px);user-select:none}
.bubble.img.blurred img{filter:blur(22px) saturate(1.2);transform:scale(1.04)}
.bubble.img{overflow:hidden}
.blur-cover{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none}
.bubble:not(.img).blurred .blur-cover{color:inherit;text-shadow:none;background:color-mix(in srgb,var(--them) 30%,transparent)}
.row.me .bubble:not(.img).blurred .blur-cover{background:color-mix(in srgb,var(--me) 30%,transparent)}
.bubble[data-reveal]:not(.blurred) .txt{animation:unblur .35s ease}
@keyframes unblur{from{filter:blur(7px)}}
/* Surprise 🎁 */
.bubble.gift{display:flex;align-items:center;gap:12px;cursor:pointer;padding:10px 14px 8px;background:linear-gradient(135deg,#fff,#ffeef6)!important;color:#7a1f47!important;border:1.5px dashed #ff9ec3}
.chat-dark .bubble.gift{background:linear-gradient(135deg,#2a1730,#3b1630)!important;color:#ffd1e3!important}
.gift-box{animation:giftWiggle 2.2s ease-in-out infinite;display:block}
.gift-label{display:flex;flex-direction:column}
.gift-label small{opacity:.75;font-size:12.5px}
.bubble.gift .foot{align-self:flex-end}
.bubble.gift.opening .gift-box{animation:giftOpen .75s ease forwards}
.bubble.gift.opening .gift-lid{animation:lidPop .6s ease forwards}
@keyframes giftWiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}95%{transform:rotate(-4deg)}}
@keyframes giftOpen{40%{transform:scale(1.15) rotate(-6deg)}100%{transform:scale(.2);opacity:0}}
@keyframes lidPop{to{transform:translateY(-14px) rotate(-18deg);opacity:0}}
.just-opened{animation:openPop .6s cubic-bezier(.2,.9,.3,1.3)}
@keyframes openPop{from{transform:scale(.6);opacity:0}}
.confetti{position:fixed;width:0;height:0;z-index:300;pointer-events:none}
.confetti i{position:absolute;width:8px;height:12px;border-radius:2px;animation:conf 1.1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes conf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 60px)) rotate(540deg);opacity:0}}
/* Réactions */
.reacts{display:flex;gap:4px;flex-wrap:wrap;margin-top:-6px;padding:0 8px;position:relative;z-index:1}
.react{display:inline-flex;align-items:center;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:1px 6px 1px 3px;box-shadow:0 2px 6px rgba(15,27,45,.08);font-size:12px;font-weight:700;color:var(--text)}
.react.mine{border-color:var(--blue);background:var(--blue-soft)}
.react .iconic{width:20px;height:22px}
.react.pop{animation:openPop .4s ease}
.react-bar{display:flex;justify-content:space-between;gap:2px;padding:2px 2px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.react-bar button{border-radius:14px;padding:2px;transition:transform .15s}
.react-bar button:hover{transform:translateY(-3px) scale(1.08)}
.react-bar button.on{background:var(--blue-soft)}
/* Fonds d'écran */
.msgs-wrap{background-repeat:repeat;background-size:auto;background-position:center}
.walls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wall{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-radius:14px;border:2px solid transparent;font-size:12.5px;font-weight:600}
.wall span{width:64px;height:64px;border-radius:14px;border:1px solid var(--line);display:grid;place-items:center;color:var(--text-2);background-repeat:repeat}
.wall.on{border-color:var(--blue);background:var(--blue-soft)}
/* Mon Lumi */
.my-lumi{background:var(--panel-2);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px}
.lumi-row{display:flex;align-items:center;gap:10px}
.lumi-swatches{display:flex;flex-wrap:wrap;gap:6px}
.lumi-swatches button{width:28px;height:28px;border-radius:50%;border:3px solid var(--panel);box-shadow:0 0 0 1px var(--line);display:grid;place-items:center;font-size:13px;background:var(--panel)}
.lumi-swatches button.on{box-shadow:0 0 0 2px var(--blue)}
.mi-lumi{width:22px;display:grid;place-items:center}
/* Lumi l'assistant */
.modal.lumi-modal{max-width:440px;display:flex;flex-direction:column;height:min(640px,calc(100dvh - 32px));overflow:hidden}
.lumi-head{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 16px;border-bottom:1px solid var(--line)}
.lumi-head div{flex:1;display:flex;flex-direction:column}
.lumi-head small{color:var(--text-2);font-size:12.5px}
.lumi-chat{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--panel-2)}
.lb{max-width:88%;padding:10px 13px;border-radius:16px;font-size:14.5px;line-height:1.45}
.lb.lumi{background:var(--panel);align-self:flex-start;border-top-left-radius:6px;display:flex;gap:8px;align-items:flex-start;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.lb.you{background:var(--blue);color:#fff;align-self:flex-end;border-top-right-radius:6px;font-weight:600}
.lb-ic{flex:none;margin:-6px 0 -8px -4px}
.lb.typing{display:flex;gap:4px;padding:14px}
.lb.typing span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:typingDot 1s infinite}
.lb.typing span:nth-child(2){animation-delay:.15s}.lb.typing span:nth-child(3){animation-delay:.3s}
@keyframes typingDot{50%{transform:translateY(-4px);opacity:.5}}
.lumi-go{align-self:flex-start;margin-left:6px}
.lumi-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));max-height:170px;overflow-y:auto;border-top:1px solid var(--line)}
.lumi-hello .iconic{margin:-6px 0}
/* Lumi : bras et pieds */
.iconic .ic-arm{transform-box:fill-box}
.iconic .ic-arm-l{transform-origin:100% 0%}
.iconic .ic-arm-r{transform-origin:0% 0%}
.iconic .ic-foot{transform-box:fill-box;transform-origin:50% 100%}
.ia-hello .ic-arm-r{animation:armWave 1s ease-in-out infinite}
.ia-hello .ic-body{animation:icBounce 2.2s ease-in-out infinite;transform-origin:60px 107px}
.iconic .ic-arm-l{animation:armIdleL 3.2s ease-in-out infinite}
.iconic:not(.ia-hello) .ic-arm-r{animation:armIdleR 3.2s ease-in-out infinite}
.iconic{cursor:pointer}
.iconic.dance .ic-body{animation:danceBody .35s ease-in-out 4 alternate!important;transform-origin:60px 107px}
.iconic.dance .ic-arm-l{animation:danceArmL .35s ease-in-out 4 alternate!important}
.iconic.dance .ic-arm-r{animation:danceArmR .35s ease-in-out 4 alternate!important}
.iconic.dance .ic-foot-l{animation:danceFoot .35s ease-in-out 4 alternate!important}
.iconic.dance .ic-foot-r{animation:danceFoot .35s ease-in-out 4 alternate-reverse!important}
@keyframes armWave{0%,100%{transform:rotate(-120deg)}50%{transform:rotate(-150deg)}}
@keyframes armIdleL{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}
@keyframes armIdleR{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
@keyframes danceBody{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-10px) rotate(6deg)}}
@keyframes danceArmL{from{transform:rotate(20deg)}to{transform:rotate(130deg)}}
@keyframes danceArmR{from{transform:rotate(-130deg)}to{transform:rotate(-20deg)}}
@keyframes danceFoot{from{transform:translateY(0)}to{transform:translateY(-6px) rotate(-12deg)}}
@media (prefers-reduced-motion:reduce){.iconic *{animation:none!important}}
.foot{white-space:nowrap}
@media (max-width:899px){.whisper{top:calc(66px + env(safe-area-inset-top,0px))}}

/* ══ 6.0 ══ */
/* Bienvenue */
.welcome-screen{position:fixed;inset:0;z-index:230;background:radial-gradient(circle at 20% 0%,rgba(59,130,246,.35),transparent 55%),radial-gradient(circle at 100% 100%,rgba(124,58,237,.35),transparent 55%),#070c1c;display:grid;place-items:center;padding:20px;animation:fade .3s ease;transition:opacity .35s}
.welcome-screen.out{opacity:0}
.ws-card{width:100%;max-width:440px;background:var(--panel);border-radius:28px;padding:30px 24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;animation:up .45s cubic-bezier(.2,.9,.3,1.2)}
.ws-card h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-top:6px}
.ws-logo{animation:wsLogo 1.6s ease-in-out infinite alternate}
@keyframes wsLogo{to{transform:translateY(-4px) rotate(-3deg)}}
.ws-points{display:flex;flex-direction:column;gap:10px;width:100%;margin:10px 0 8px;text-align:left}
.ws-p{display:flex;gap:12px;align-items:flex-start;background:var(--panel-2);border-radius:16px;padding:12px 14px;opacity:0;animation:wsIn .45s ease var(--d) forwards}
@keyframes wsIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ws-p>span{font-size:24px}
.ws-p b{display:block}.ws-p small{color:var(--text-2);font-size:13px;line-height:1.4}
.ws-lumi{position:fixed;right:max(16px,calc(50% - 330px));bottom:24px;pointer-events:none}
@media (max-width:640px){.ws-lumi{display:none}}
.welcome{position:relative}
.wl-lumi{display:block;margin-bottom:-6px}
.welcome .row-btns{margin-top:8px}
/* Bien démarrer */
.steps-card{margin:2px 6px 10px;background:linear-gradient(135deg,var(--blue-soft),var(--panel-2));border:1px solid var(--line);border-radius:18px;padding:10px 12px 12px}
.sc-head{display:flex;align-items:center;gap:8px}
.sc-head div{flex:1;display:flex;flex-direction:column}
.sc-head small{color:var(--text-2);font-size:12.5px}
.sc-list{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.sc-step{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--panel);font-weight:600;font-size:14px;text-align:left}
.sc-step i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:13px;color:#fff;flex:none}
.sc-step.ok{opacity:.65;text-decoration:line-through}
.sc-step.ok i{background:var(--ok);border-color:var(--ok)}
.conv.hint{animation:hint 1.2s ease 2}
@keyframes hint{50%{background:var(--blue-soft)}}
/* Invitations */
.inv-card{display:flex;align-items:center;gap:12px;background:var(--blue-soft);border-radius:18px;padding:12px 14px;text-align:left;animation:up .4s ease}
.inv-card div{flex:1;display:flex;flex-direction:column}
.inv-card small{color:var(--text-2);font-size:12.5px}
.ref{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#fff7d6,#ffeef6);color:#4a2b00;border-radius:18px;padding:12px 14px}
.chat-dark .ref,.ref{border:1px solid #ffe08a}
.ref div{flex:1;display:flex;flex-direction:column;gap:3px}
.ref small{font-size:12.5px;opacity:.85}
.ref-bar{height:8px;border-radius:5px;background:rgba(0,0,0,.08);overflow:hidden;margin-top:4px}
.ref-bar i{display:block;height:100%;background:linear-gradient(90deg,#f5b400,#ff4f8b);border-radius:5px}
.ref.done{background:linear-gradient(135deg,#e7f6ec,#fff7d6)}
.qrbox{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0}
.qr{position:relative;width:210px;height:210px;background:#fff;border-radius:18px;padding:10px;box-shadow:0 6px 20px rgba(15,27,45,.12)}
.qr svg{width:100%;height:100%}
.qr-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:11px;background:linear-gradient(140deg,#3b82f6,#1d4ed8);display:grid;place-items:center;border:3px solid #fff}
.qrbox small{color:var(--text-2);font-size:12.5px}
/* Lumi : bonnet, verrous, couleurs rares */
.beanie-tg{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;cursor:pointer}
.beanie-tg input{accent-color:var(--blue);width:18px;height:18px}
.lumi-swatches button.rare{background-image:linear-gradient(135deg,rgba(255,255,255,.55),transparent 60%)!important}
.lumi-swatches button.locked{font-size:11px;filter:saturate(.6)}
.pgrid.ic-grid button{position:relative}
.pgrid.ic-grid button.locked .iconic{filter:grayscale(.7) opacity(.55)}
.pgrid.ic-grid .lockb{position:absolute;right:6px;bottom:6px;font-style:normal;font-size:14px}
/* Recadrage photo */
.crop-stage{position:relative;width:280px;height:280px;border-radius:18px;overflow:hidden;background:#000;touch-action:none;cursor:grab;user-select:none}
.crop-stage img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none}
.crop-mask{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 400px rgba(0,0,0,.55);pointer-events:none;outline:2px solid rgba(255,255,255,.8);outline-offset:-2px}
#cr-z{width:240px;accent-color:var(--blue)}
/* Notes vocales */
.bubble.vbub{min-width:250px}
.vnote{display:flex;align-items:center;gap:10px}
.vnote .play{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.35);transition:transform .15s}
.row.me .vnote .play{background:#fff;color:var(--me)}
.vnote .play:active{transform:scale(.92)}
.wave{flex:1;display:flex;align-items:center;gap:2px;height:34px;cursor:pointer;min-width:120px}
.wave i{flex:1;min-width:2px;border-radius:2px;background:color-mix(in srgb,currentColor 30%,transparent);transition:background .15s}
.wave i.on{background:var(--blue)}
.row.me .wave i.on{background:#fff}
.vnote.playing .wave i.on:last-of-type{animation:none}
.vmeta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.vmeta .dur{font-size:12px;font-variant-numeric:tabular-nums;opacity:.85}
.speed{font-size:11px;font-weight:800;padding:2px 7px;border-radius:8px;background:color-mix(in srgb,currentColor 14%,transparent)}
.rec-info{gap:10px}
.rec-wave{flex:1;display:flex;align-items:center;justify-content:center;gap:3px;height:30px;overflow:hidden}
.rec-wave i{flex:none;width:3px;height:12%;min-height:3px;border-radius:2px;background:var(--bad);opacity:.8;transition:height .08s linear}
.rec-info small{color:var(--text-3)}
/* Glisser pour répondre */
.row{position:relative}
.row::before{content:"";position:absolute;left:8px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10a6 6 0 0 1 6 6v5'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 2px 8px rgba(0,0,0,.15);opacity:0;transform:scale(.5);transition:opacity .15s,transform .15s;pointer-events:none}
.row.swiping::before{opacity:var(--sw,0);transform:scale(calc(.5 + var(--sw,0) * .5))}
.row.me::before{left:auto;right:auto;left:8px}
/* Groupes : photo à côté du message */
.row.gav{gap:6px;align-items:flex-start}
.row-av{width:30px;flex:none;margin-top:2px}
.row-av .av{display:inline-grid}
.row.gav .mcol{max-width:min(74%,540px)}
/* Attente de clé */
.key-chip{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;max-width:calc(100% - 24px);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 14px;font-size:13px;font-weight:600;text-align:center;box-shadow:0 6px 18px rgba(15,27,45,.12)}

/* ══ 7.0 ══ */
.msgs-wrap{overflow:hidden}
.wall-layer{position:absolute;inset:0;z-index:0;pointer-events:none;background-repeat:repeat;background-position:center}
.msgs{z-index:1}
/* Vidéos */
.bubble.vid{padding:4px 4px 6px;min-width:220px;max-width:280px}
.vthumb{position:relative;display:block;width:100%;aspect-ratio:16/9;max-height:360px;border-radius:14px;background:#0f172a center/cover no-repeat;cursor:pointer;overflow:hidden}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(15,23,42,.55);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;font-style:normal;border:2px solid rgba(255,255,255,.7)}
.vdur{position:absolute;left:8px;bottom:8px;font-style:normal;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);border-radius:8px;padding:2px 7px}
.vexp{display:block;font-size:12px;font-weight:600;opacity:.8;margin:6px 6px 0}
.bubble.vid .foot{margin:0 6px}
.vid.pend .vthumb{cursor:default}
.vprog{position:absolute;left:12px;right:12px;bottom:40px;height:6px;border-radius:4px;background:rgba(255,255,255,.3);overflow:hidden}
.vprog i{display:block;height:100%;background:#fff;border-radius:4px;transition:width .25s}
.vstage{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:#fff;font-style:normal;font-weight:700;font-size:13px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.vplayer,.once-view{position:fixed;inset:0;z-index:240;background:rgba(2,6,18,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:calc(56px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));animation:fade .2s ease}
.vp-x{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px}
.vp-box{position:relative;width:100%;max-width:720px;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.vp-box video,.vp-box img,.once-body img{max-width:100%;max-height:100%;border-radius:12px;object-fit:contain}
.vp-poster{filter:blur(6px) brightness(.6)}
.vp-spin{position:absolute;left:50%;top:50%;margin:-14px 0 0 -14px}
.once-top{color:#fff;font-weight:700;font-size:14px;background:rgba(255,255,255,.1);border-radius:999px;padding:7px 14px;position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);white-space:nowrap;max-width:calc(100% - 80px);overflow:hidden;text-overflow:ellipsis}
.once-body{flex:1;min-height:0;width:100%;max-width:720px;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden}
.once-body p{font-size:26px;line-height:1.4;text-align:center;max-width:560px}
.once-note{color:rgba(255,255,255,.6);font-size:12.5px;text-align:center}
/* Vue unique */
.bubble.once{display:flex;align-items:center;gap:10px;padding:10px 14px 8px;flex-wrap:wrap}
.bubble.once>span:nth-of-type(2){display:flex;flex-direction:column}
.bubble.once small{font-size:12.5px;opacity:.75}
.bubble.once .foot{width:100%;text-align:right}
.once-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,currentColor 12%,transparent);font-size:18px;flex:none}
.bubble.once.ready{cursor:pointer;border:1.5px dashed color-mix(in srgb,var(--blue) 55%,transparent)}
.once-ic.pulse{animation:onceP 1.8s ease-in-out infinite}
@keyframes onceP{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 18%,transparent)}}
.bubble.once.done{opacity:.75}
.bubble.once[data-once-who]{cursor:pointer}
.mode-chip.once{background:#ede9fe;color:#6d28d9}
.more-pop small{font-weight:500;color:var(--text-3);font-size:11.5px}
/* Statuts vidéo */
.sv-body video{max-width:100%;max-height:calc(100% - 20px);border-radius:12px}
.sv-poster{filter:blur(4px) brightness(.7)}
.pm-bar{width:240px;height:8px;border-radius:5px;background:var(--panel-2);overflow:hidden;margin:10px auto 6px}
.pm-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3b82f6,#a78bfa);transition:width .25s}
/* Éditeur de fond d'écran */
.wp-prev{position:relative;height:280px;border-radius:18px;overflow:hidden;border:1px solid var(--line);touch-action:none;cursor:grab}
.wp-chat{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;gap:8px;padding:16px;justify-content:center}
.wb{max-width:72%;padding:8px 12px;border-radius:16px;font-size:13.5px;background:var(--them);color:var(--them-text);align-self:flex-start;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.wb.me{align-self:flex-end;background:var(--me);color:var(--me-text)}
.wp-hint{position:absolute;z-index:2;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600;border-radius:999px;padding:4px 12px;pointer-events:none}
.fld input[type=range]{accent-color:var(--blue);width:100%}

/* ══ 8.0 : appels ══ */
.call-ui{position:fixed;inset:0;z-index:300;background:radial-gradient(circle at 50% 30%,#1e3a8a,#020617 75%);color:#fff;display:flex;flex-direction:column;align-items:center;animation:fade .2s ease;overflow:hidden}
.call-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.call-ui.video.has-remote .call-remote{opacity:1}
.call-ui audio{display:none}
.call-bg{position:absolute;top:28%;left:50%;transform:translate(-50%,-50%)}
.call-bg .av{box-shadow:0 0 0 10px rgba(255,255,255,.06),0 0 0 22px rgba(255,255,255,.04)}
.call-ui.ringing .call-bg .av,.call-ui.calling .call-bg .av{animation:callPulse 1.6s ease-out infinite}
@keyframes callPulse{0%{box-shadow:0 0 0 0 rgba(96,165,250,.55)}100%{box-shadow:0 0 0 40px rgba(96,165,250,0)}}
.call-ui.video.has-remote .call-bg{display:none}
.call-top{position:relative;z-index:2;text-align:center;margin-top:calc(46vh + env(safe-area-inset-top,0px));text-shadow:0 1px 6px rgba(0,0,0,.5)}
.call-ui.video.has-remote .call-top{margin-top:calc(24px + env(safe-area-inset-top,0px))}
.call-top h2{font-size:28px;font-weight:800;margin:8px 0 4px}
.call-top p{opacity:.85;font-size:16px;font-variant-numeric:tabular-nums}
.call-lock{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;background:rgba(255,255,255,.12);border-radius:999px;padding:4px 11px;opacity:.9}
.call-local{position:absolute;z-index:3;right:16px;top:calc(16px + env(safe-area-inset-top,0px));width:110px;height:150px;object-fit:cover;border-radius:16px;border:2px solid rgba(255,255,255,.6);background:#0f172a;transform:scaleX(-1);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.call-bar{position:absolute;z-index:3;bottom:calc(40px + env(safe-area-inset-bottom,0px));left:0;right:0;display:flex;justify-content:center;gap:22px}
.cb{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);color:#fff;transition:transform .15s}
.cb:active{transform:scale(.92)}
.cb.on{background:#fff;color:#0f172a}
.cb.decline{background:#ef4444}
.cb.accept{background:#22c55e;animation:acceptWig 1.2s ease-in-out infinite}
@keyframes acceptWig{0%,100%{transform:rotate(0)}10%,30%{transform:rotate(-12deg)}20%,40%{transform:rotate(12deg)}50%{transform:rotate(0)}}
.call-ui.ringing .call-bar{gap:90px}
body.in-call .whisper{display:none}
.bubble.call-log{display:flex;align-items:center;gap:10px;cursor:pointer;flex-wrap:wrap}
.bubble.call-log>span:nth-of-type(2){display:flex;flex-direction:column}
.bubble.call-log small{font-size:12px;opacity:.7}
.bubble.call-log .foot{width:100%;text-align:right}
.cl-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,currentColor 12%,transparent)}
.bubble.call-log.miss .cl-ic{color:#ef4444}
.push-card{display:flex;align-items:center;gap:10px;margin:2px 6px 10px;background:linear-gradient(135deg,#fff7d6,var(--panel-2));border:1px solid #ffe08a;border-radius:18px;padding:10px 10px 10px 14px}
.push-card>span{font-size:22px}
.push-card div{flex:1;display:flex;flex-direction:column}
.push-card small{font-size:12.5px;color:var(--text-2)}

/* ══ Barre défilante (Discussions, Non lues, Groupes, Favoris, Statuts, Appels) ══ */
.chips-wrap{position:relative;margin:0 0 8px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 14px 6px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font-weight:600;font-size:14px;color:var(--text-2);background:var(--panel-2);border:1px solid var(--line);scroll-snap-align:center;transition:background .2s,color .2s,transform .15s}
.chips button:active{transform:scale(.96)}
.chips button[aria-selected="true"]{background:var(--blue-soft);color:var(--blue);border-color:color-mix(in srgb,var(--blue) 35%,transparent)}
.chips .tab-badge,.chips .chip-n{position:static;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:11px;line-height:18px;text-align:center;background:var(--blue);color:#fff}
.chips .chip-n:empty,.chips .tab-badge:empty{display:none}
.chips .tab-badge.miss{background:#ef4444}
.chips .tab-dot{position:static}
.list.fade-in{animation:listIn .25s ease}
@keyframes listIn{from{opacity:.3;transform:translateY(6px)}}
/* Journal d'appels */
.call-row{display:flex;align-items:center;gap:4px;padding-right:8px}
.call-row .conv{flex:1;min-width:0}
.conv.static{display:flex;align-items:center;gap:12px;padding:8px 6px;cursor:default}
.conv-name.miss{color:#ef4444}
.carrow{font-weight:900}.carrow.ok{color:var(--ok)}.carrow.ko{color:#ef4444}
.conv-sub .ic{vertical-align:-2px}
.ci-acts{display:flex;gap:12px;justify-content:center;margin-top:10px}
.ci-b{display:flex;flex-direction:column;align-items:center;gap:4px;width:84px;padding:12px 6px;border-radius:16px;background:var(--panel-2);color:var(--blue);font-weight:600}
.ci-b small{color:var(--text-2)}
.co-head{display:flex;align-items:center;gap:12px;padding:6px 6px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.co-head div{display:flex;flex-direction:column}.co-head small{color:var(--text-2);font-size:12.5px}
.st-act{color:var(--blue)}
/* Réactions dans le lecteur de statuts / lueurs */
.sv-row{display:flex;align-items:center;gap:8px;width:100%;max-width:520px;margin:0 auto}
.sv-row .sv-reply{flex:1;min-width:0}
.sv-react{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:21px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);transition:transform .15s,background .2s}
.sv-react:active{transform:scale(.85)}
.sv-react.on{background:rgba(255,255,255,.32);transform:scale(1.08)}
.sv-react.heart.on{animation:heartPop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes heartPop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1.08)}}
.heart-burst{position:absolute;left:50%;top:50%;font-size:110px;transform:translate(-50%,-50%);pointer-events:none;animation:burst .9s ease forwards;filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}70%{opacity:1;transform:translate(-50%,-60%) scale(1)}100%{opacity:0;transform:translate(-50%,-90%) scale(.9)}}
.v-react{margin-left:auto;font-style:normal;font-size:20px}
.viewer{display:flex;align-items:center;gap:10px}
#sv-who{cursor:pointer}

/* ══ Effet verre liquide (Liquid Glass) ══ */
body.glass{--glass-bg:rgba(255,255,255,.58);--glass-bg-2:rgba(255,255,255,.34);--glass-line:rgba(255,255,255,.75);--glass-shadow:0 10px 30px rgba(15,27,45,.12);
  background:radial-gradient(circle at 12% 8%,rgba(96,165,250,.55),transparent 42%),radial-gradient(circle at 88% 18%,rgba(244,114,182,.42),transparent 40%),radial-gradient(circle at 70% 95%,rgba(167,139,250,.5),transparent 45%),radial-gradient(circle at 15% 90%,rgba(45,212,191,.38),transparent 40%),#eaf0fb;background-attachment:fixed}
@media (prefers-color-scheme:dark){body.glass{--glass-bg:rgba(22,30,50,.55);--glass-bg-2:rgba(30,41,66,.38);--glass-line:rgba(255,255,255,.16);--glass-shadow:0 10px 30px rgba(0,0,0,.45);
  background:radial-gradient(circle at 12% 8%,rgba(37,99,235,.45),transparent 42%),radial-gradient(circle at 88% 18%,rgba(219,39,119,.32),transparent 40%),radial-gradient(circle at 70% 95%,rgba(124,58,237,.42),transparent 45%),radial-gradient(circle at 15% 90%,rgba(13,148,136,.3),transparent 40%),#070b16}}
.glass .shell{background:transparent}
.glass .sidebar{background:var(--glass-bg-2);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);border-right:1px solid var(--glass-line)}
.glass .chips button,.glass .search,.glass .conv.active,.glass .steps-card,.glass .push-card,.glass .icon-btn.lg,.glass .menu,.glass .more-pop,.glass .picker,.glass .mention-pop,.glass .whisper,.glass .react,.glass .lueur-chip,.glass .key-chip{
  background:linear-gradient(135deg,var(--glass-bg),var(--glass-bg-2));backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.12),var(--glass-shadow)}
.glass .chips button[aria-selected="true"]{background:linear-gradient(135deg,rgba(59,130,246,.85),rgba(29,78,216,.78));color:#fff;border-color:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 18px rgba(37,99,235,.35)}
.glass .chips button[aria-selected="true"] .tab-badge,.glass .chips button[aria-selected="true"] .chip-n{background:#fff;color:var(--blue)}
.glass .chips button{position:relative;overflow:hidden}
.glass .chips button::before,.glass .whisper::before,.glass .modal::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 68%,rgba(255,255,255,.18) 100%);mix-blend-mode:soft-light}
/* Conversation : en-tête et clavier flottants au-dessus des messages */
.glass .main{background:transparent}
.glass .msgs-wrap{position:absolute;inset:0}
.glass .chat-head{position:absolute;top:10px;left:10px;right:10px;z-index:6;border-radius:22px;padding-top:calc(8px + env(safe-area-inset-top,0px));
  background:linear-gradient(135deg,var(--glass-bg),var(--glass-bg-2));backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--glass-shadow)}
.glass #composer{position:absolute;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:6;border-radius:26px;padding-bottom:0;
  background:linear-gradient(135deg,var(--glass-bg),var(--glass-bg-2));backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--glass-shadow)}
.glass #composer textarea{background:rgba(255,255,255,.45)}
@media (prefers-color-scheme:dark){.glass #composer textarea{background:rgba(255,255,255,.08)}}
.glass .msgs{padding-top:86px;padding-bottom:96px}
.glass .msgs-wrap.has-chip .msgs{padding-top:132px}
.glass .lueur-chip,.glass .key-chip{top:84px}
.glass .jump{bottom:100px}
.glass .welcome{background:transparent}
.glass .modal{position:relative;background:linear-gradient(160deg,var(--glass-bg),var(--glass-bg-2));backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 24px 60px rgba(15,27,45,.25)}
.glass .overlay{background:rgba(5,10,20,.32)}
.glass .bubble{box-shadow:0 1px 2px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.35)}
.glass .send{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px rgba(37,99,235,.35)}
.glass .cb{border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
@media (max-width:899px){.glass .chat-head{top:calc(6px + env(safe-area-inset-top,0px));left:8px;right:8px;padding-top:8px}.glass #composer{left:8px;right:8px}}
.call-row .conv-sub{display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-row .conv-sub .ic{flex:none}
@media (max-width:520px){.chat-head .e2e{display:none}.chat-head .icon-btn{width:34px;height:34px;min-width:34px}.chat-head .spark-btn{font-size:16px}}

/* ══ Onglets du haut : cadre d'origine, défilant à l'intérieur ══ */
.tabs.scroll{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;flex-wrap:nowrap}
.tabs.scroll::-webkit-scrollbar{display:none}
.tabs.scroll button[role=tab]{flex:1 0 auto;padding:9px 12px;scroll-snap-align:start;white-space:nowrap}
.tabs.scroll .tab-plus{flex:0 0 40px;display:grid;place-items:center;border-radius:9px;color:var(--text-2);border:1.5px dashed var(--line)}
.tabs.scroll .tab-plus:hover{color:var(--blue);border-color:var(--blue)}
.tabs .tab-badge.miss{background:#ef4444}
.tabs .tab-badge:empty{display:none}
.tab-opt{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.tab-opt span:nth-child(2){flex:1;display:flex;flex-direction:column}
.tab-opt small{color:var(--text-2);font-size:12.5px}
.to-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue)}
.tab-opt input{width:20px;height:20px;accent-color:var(--blue)}
/* Signalement */
.rep-list{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.rep-r{display:flex;align-items:center;gap:10px;padding:9px 4px;border-radius:10px;font-weight:600;font-size:14.5px;cursor:pointer}
.rep-r:hover{background:var(--hover)}
.rep-r input{accent-color:#dc2626;width:18px;height:18px}
.btn.danger-btn{background:#dc2626;color:#fff}
.tabs.scroll{gap:4px}
.tabs.scroll button[role=tab]{padding:9px 10px;font-size:13.5px;gap:6px}
.tabs.scroll button[role=tab] .ic{display:none}


/* ══════ Chaque Lumi a son propre mouvement ══════ */
.iconic .ic-all,.iconic .icx{transform-box:view-box}
.iconic .ic-all{transform-origin:60px 107px}
/* Dodo : il bâille, s'allonge, met son drap, dort, puis se relève */
[data-iconic=dodo] .ic-all{animation:kDodoAll 8s ease-in-out infinite;transform-origin:60px 100px}
[data-iconic=dodo] .ic-body{animation:kSleepBreath 8s ease-in-out infinite;transform-origin:60px 107px}
[data-iconic=dodo] .ic-arm{animation:none}
[data-iconic=dodo] .icx-blanket{animation:kBlanket 8s ease-in-out infinite;transform-origin:118px 90px}
[data-iconic=dodo] .icx-zzz{animation:kZzz 8s ease-in-out infinite}
@keyframes kDodoAll{0%,10%{transform:none}5%{transform:scale(1.04,.96)}20%,86%{transform:translate(18px,-20px) rotate(-86deg) scale(.8)}94%,100%{transform:none}}
@keyframes kSleepBreath{0%,30%,86%,100%{transform:none}45%,65%{transform:scale(1.03,.97)}55%,75%{transform:scale(.99,1.01)}}
@keyframes kBlanket{0%,20%{transform:scaleX(0);opacity:0}21%{opacity:1}32%,84%{transform:scaleX(1);opacity:1}92%,100%{transform:scaleX(0);opacity:0}}
@keyframes kZzz{0%,32%{opacity:0;transform:translate(-74px,22px)}42%{opacity:1;transform:translate(-72px,14px)}60%{opacity:.6;transform:translate(-68px,6px)}78%{opacity:1;transform:translate(-72px,14px)}86%,100%{opacity:0;transform:translate(-74px,22px)}}
/* Bonne nuit : il se berce doucement */
[data-iconic=bonnenuit] .ic-all{animation:kRock 4s ease-in-out infinite}
@keyframes kRock{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
/* MDR : il se tord de rire */
[data-iconic=mdr] .ic-all{animation:kMdr .7s ease-in-out infinite}
@keyframes kMdr{0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(9deg) translateY(-5px)}}
/* Bisou : il se penche et le cœur s'envole */
[data-iconic=bisou] .ic-all{animation:kLean 2.4s ease-in-out infinite}
[data-iconic=bisou] .icx-kissheart>g{animation:kKissFly 2.4s ease-out infinite}
@keyframes kLean{0%,100%{transform:rotate(0)}30%,50%{transform:rotate(8deg) translateX(3px)}}
@keyframes kKissFly{0%,30%{transform:translate(-14px,-6px) scale(.4);opacity:0}45%{opacity:1}100%{transform:translate(18px,-56px) scale(1.3);opacity:0}}
/* Triste : les larmes coulent */
[data-iconic=triste] .icx-tear{animation:kTear 1.6s ease-in infinite}
@keyframes kTear{0%{transform:translateY(0);opacity:1}80%{transform:translateY(26px);opacity:.9}100%{transform:translateY(32px);opacity:0}}
/* Colère : il tape du pied */
[data-iconic=colere] .ic-all{animation:kStomp .5s ease-in-out infinite}
[data-iconic=colere] .ic-foot-l{animation:kFootUp .5s ease-in-out infinite}
@keyframes kStomp{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px) rotate(-2deg)}75%{transform:translateX(2px) rotate(2deg)}}
@keyframes kFootUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* Wow : grand saut */
[data-iconic=wow] .ic-all,[data-iconic=etonne] .ic-all{animation:kJump 1.6s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes kJump{0%,100%{transform:translateY(0) scale(1,1)}15%{transform:translateY(2px) scale(1.08,.9)}40%{transform:translateY(-18px) scale(.95,1.06)}60%{transform:translateY(0) scale(1.05,.95)}75%{transform:none}}
/* La fête : il saute et fait une pirouette */
[data-iconic=fete] .ic-all{animation:kParty 2.6s ease-in-out infinite;transform-origin:60px 70px}
@keyframes kParty{0%,100%{transform:none}20%{transform:translateY(-10px)}40%{transform:translateY(-14px) rotate(360deg)}55%{transform:rotate(360deg)}}
/* Café : il souffle sur son café */
[data-iconic=cafe] .ic-all{animation:kSip 3s ease-in-out infinite}
@keyframes kSip{0%,100%{transform:none}40%,60%{transform:rotate(-6deg) translateY(-2px)}}
/* J'arrive : il court d'un côté à l'autre */
[data-iconic=jarrive] .ic-all,[data-iconic=voyageur] .ic-all{animation:kRunAcross 2.4s ease-in-out infinite}
@keyframes kRunAcross{0%,100%{transform:translateX(-10px) translateY(0)}12%,37%,62%,87%{transform:translateX(-5px) translateY(-4px)}25%,75%{transform:translateX(0)}50%{transform:translateX(10px) translateY(0)}}
[data-iconic=jarrive] .ic-foot-l,[data-iconic=voyageur] .ic-foot-l,[data-iconic=athlete] .ic-foot-l,[data-iconic=medieval] .ic-foot-l{animation:kStep .4s ease-in-out infinite}
[data-iconic=jarrive] .ic-foot-r,[data-iconic=voyageur] .ic-foot-r,[data-iconic=athlete] .ic-foot-r,[data-iconic=medieval] .ic-foot-r{animation:kStep .4s ease-in-out infinite reverse}
@keyframes kStep{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* Oups : il glisse et se rattrape */
[data-iconic=oups] .ic-all{animation:kSlip 2.2s ease-in-out infinite}
@keyframes kSlip{0%,60%,100%{transform:none}70%{transform:rotate(-14deg) translateX(-4px)}80%{transform:rotate(8deg)}90%{transform:rotate(-3deg)}}
/* Câlin : il serre dans ses bras */
[data-iconic=calin] .ic-arm-l{animation:kHugL 2s ease-in-out infinite}
[data-iconic=calin] .ic-arm-r{animation:kHugR 2s ease-in-out infinite}
[data-iconic=calin] .ic-all{animation:kSqueeze 2s ease-in-out infinite}
@keyframes kHugL{0%,100%{transform:rotate(0)}40%,70%{transform:rotate(-70deg)}}
@keyframes kHugR{0%,100%{transform:rotate(0)}40%,70%{transform:rotate(70deg)}}
@keyframes kSqueeze{0%,100%{transform:none}50%{transform:scale(1.05,.95)}}
/* Courage, Sportif : bras levés */
[data-iconic=courage] .ic-arm-l,[data-iconic=sportif] .ic-arm-l{animation:kArmUpL 1s ease-in-out infinite}
[data-iconic=courage] .ic-arm-r,[data-iconic=sportif] .ic-arm-r{animation:kArmUpR 1s ease-in-out infinite}
[data-iconic=sportif] .ic-all{animation:kJack 1s ease-in-out infinite}
@keyframes kArmUpL{0%,100%{transform:rotate(0)}50%{transform:rotate(130deg)}}
@keyframes kArmUpR{0%,100%{transform:rotate(0)}50%{transform:rotate(-130deg)}}
@keyframes kJack{0%,100%{transform:none}50%{transform:translateY(-8px)}}
/* Le roi : il bombe le torse */
[data-iconic=roi] .ic-all{animation:kProud 2.6s ease-in-out infinite}
@keyframes kProud{0%,100%{transform:none}50%{transform:scale(1.06) translateY(-3px)}}
/* Grand Art : statue figée qui tourne sur son socle */
[data-iconic=sculpture] .ic-arm{animation:none}
[data-iconic=sculpture] .ic-body{animation:kStatue 5s ease-in-out infinite;transform-origin:60px 107px}
@keyframes kStatue{0%,40%,100%{transform:scaleX(1)}55%{transform:scaleX(.15)}70%{transform:scaleX(-1)}85%{transform:scaleX(.15)}}
/* DJ : il hoche la tête au rythme */
[data-iconic=dj] .ic-body{animation:kNod .45s ease-in-out infinite;transform-origin:60px 107px}
[data-iconic=dj] .ic-arm-r{animation:kScratch .45s ease-in-out infinite}
@keyframes kNod{0%,100%{transform:none}50%{transform:translateY(3px) rotate(3deg)}}
@keyframes kScratch{0%,100%{transform:rotate(0)}50%{transform:rotate(25deg)}}
/* Photographe : flash ! */
[data-iconic=photographe] .icx-flash{animation:kFlash 2.4s ease-out infinite;transform-origin:78px 58px}
@keyframes kFlash{0%,60%,100%{opacity:0;transform:scale(.2)}63%{opacity:.95;transform:scale(1)}80%{opacity:0;transform:scale(1.4)}}
/* Planète : elle tourne sur elle-même */
[data-iconic=planete] .ic-all{animation:kOrbit 6s ease-in-out infinite;transform-origin:60px 66px}
@keyframes kOrbit{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-5px)}}
/* L'Artiste : il peint */
[data-iconic=artiste] .icx-palette>path,[data-iconic=artiste] .icx-palette>path+path{animation:kBrush 1.2s ease-in-out infinite;transform-origin:18px 98px;transform-box:view-box}
@keyframes kBrush{0%,100%{transform:rotate(0)}50%{transform:rotate(-24deg)}}
/* Le Musicien : il gratte la guitare en se balançant */
[data-iconic=musicien] .ic-all{animation:kSway 1.4s ease-in-out infinite}
[data-iconic=musicien] .ic-arm-r{animation:kStrum .35s ease-in-out infinite}
@keyframes kSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes kStrum{0%,100%{transform:rotate(0)}50%{transform:rotate(30deg)}}
/* Ingénieur, Philosophe : il hoche la tête */
[data-iconic=ingenieur] .ic-body,[data-iconic=philosophe] .ic-body{animation:kNodSlow 2.4s ease-in-out infinite;transform-origin:60px 107px}
@keyframes kNodSlow{0%,100%{transform:none}30%,40%{transform:rotate(4deg) translateY(2px)}60%,70%{transform:rotate(-2deg)}}
/* L'Athlète : sprint */
[data-iconic=athlete] .ic-all{animation:kSprint .35s ease-in-out infinite}
@keyframes kSprint{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-6px) rotate(6deg)}}
/* Le Chef : il étale la pâte */
[data-iconic=chef] .icx-rollingpin{animation:kRoll 1s ease-in-out infinite}
@keyframes kRoll{0%,100%{transform:translateX(-8px)}50%{transform:translateX(8px)}}
/* Astronaute, Zéro gravité : il flotte dans l'espace */
[data-iconic=astronaute] .ic-all{animation:kDrift 5s ease-in-out infinite;transform-origin:60px 66px}
[data-iconic=zerog] .ic-all{animation:kSpin 8s linear infinite;transform-origin:60px 66px}
@keyframes kDrift{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-10px) rotate(6deg)}}
@keyframes kSpin{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(180deg)}100%{transform:translateY(0) rotate(360deg)}}
/* Robo-Tête : mouvements de robot */
[data-iconic=robot] .ic-all{animation:kRobot 2s steps(1) infinite}
[data-iconic=robot] .ic-arm-l{animation:kRobotArm 2s steps(1) infinite}
@keyframes kRobot{0%{transform:rotate(0)}25%{transform:rotate(-8deg)}50%{transform:rotate(0)}75%{transform:rotate(8deg)}}
@keyframes kRobotArm{0%,50%{transform:rotate(0)}25%{transform:rotate(60deg)}75%{transform:rotate(-20deg)}}
/* Tête Tempête : il gronde, éclairs et pluie */
[data-iconic=meteo] .ic-all{animation:icShake .8s ease-in-out infinite}
[data-iconic=meteo] .icx-storm>g:first-child{animation:kBolt 1.4s steps(1) infinite}
@keyframes kBolt{0%,100%{opacity:1}30%{opacity:0}40%{opacity:1}50%{opacity:0}70%{opacity:1}}
/* Chasseur de trésor : il regarde partout */
[data-iconic=tresor] .ic-body{animation:kLook 3s ease-in-out infinite;transform-origin:60px 107px}
@keyframes kLook{0%,100%{transform:none}25%{transform:translateX(-4px) rotate(-6deg)}50%{transform:none}75%{transform:translateX(4px) rotate(6deg)}}
/* Masque animal : il bondit comme un chat */
[data-iconic=masque] .ic-all{animation:kPounce 2s ease-in-out infinite}
@keyframes kPounce{0%,100%{transform:none}30%{transform:scale(1.06,.9) translateY(4px)}50%{transform:translateY(-14px) rotate(-6deg)}70%{transform:none}}
/* Médiéval : il marche au pas */
[data-iconic=medieval] .ic-all{animation:kMarch .8s ease-in-out infinite}
@keyframes kMarch{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* La Scientifique : la fiole bouillonne et elle saute de joie */
[data-iconic=scientifique] .icx-flask{animation:icShake .5s ease-in-out infinite;transform-origin:96px 110px}
[data-iconic=scientifique] .ic-all{animation:kJump 2.4s ease-in-out infinite}
/* L'Écrivain : il tape à toute vitesse */
[data-iconic=ecrivain] .ic-body{animation:kType .25s ease-in-out infinite;transform-origin:60px 107px}
[data-iconic=ecrivain] .ic-arm-l,[data-iconic=ecrivain] .ic-arm-r{animation:kTap .25s ease-in-out infinite}
@keyframes kType{0%,100%{transform:none}50%{transform:translateY(2px)}}
@keyframes kTap{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
/* Le Jardinier : la plante pousse */
[data-iconic=jardinier] .icx-trowel>g{animation:kGrow 3s ease-in-out infinite;transform-origin:18px 106px;transform-box:view-box}
@keyframes kGrow{0%{transform:scale(0)}40%,85%{transform:scale(1.3)}100%{transform:scale(0)}}
/* La Designer : elle dessine */
[data-iconic=designer] .icx-tablet>path{animation:kDraw 1.6s ease-in-out infinite;transform-box:view-box}
@keyframes kDraw{0%,100%{transform:translate(0,0)}25%{transform:translate(-10px,4px)}50%{transform:translate(-4px,10px)}75%{transform:translate(4px,4px)}}
/* Le Magicien : coup de baguette */
[data-iconic=magicien] .icx-wand{animation:kWand 1.6s ease-in-out infinite;transform-origin:100px 108px}
@keyframes kWand{0%,100%{transform:rotate(0)}30%{transform:rotate(-30deg)}50%{transform:rotate(10deg)}}
/* Réflexion : il penche la tête, les bulles de pensée apparaissent */
[data-iconic=reflexion] .ic-body{animation:kThink 3s ease-in-out infinite;transform-origin:60px 107px}
[data-iconic=reflexion] .icx-chinhand>g+g circle{animation:kDot 3s ease-in-out infinite}
[data-iconic=reflexion] .icx-chinhand>g+g circle:nth-child(2){animation-delay:.4s}
[data-iconic=reflexion] .icx-chinhand>g+g circle:nth-child(3){animation-delay:.8s}
@keyframes kThink{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes kDot{0%,15%{opacity:0}35%,80%{opacity:1}100%{opacity:0}}
/* Pixel Art : saut en 8 bits */
[data-iconic=pixel] .ic-body{animation:kPixel 1s steps(2) infinite;transform-origin:60px 107px}
@keyframes kPixel{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* Néon : il grésille */
[data-iconic=neon] .ic-body{animation:kNeon 3s linear infinite}
@keyframes kNeon{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.35}}
/* Verre soufflé : il ondule comme de la gelée */
[data-iconic=verre] .ic-all{animation:kJelly 1.8s ease-in-out infinite}
@keyframes kJelly{0%,100%{transform:scale(1,1)}25%{transform:scale(1.07,.93)}50%{transform:scale(.95,1.05)}75%{transform:scale(1.02,.98)}}
/* Céleste : il flotte et change de couleurs */
[data-iconic=celeste] .ic-all{animation:kCeleste 6s ease-in-out infinite}
@keyframes kCeleste{0%,100%{transform:translateY(0);filter:hue-rotate(0)}50%{transform:translateY(-6px);filter:hue-rotate(60deg)}}
/* Le Danseur : il danse, bras en l'air */
[data-iconic=danseur] .ic-all{animation:kDance .8s ease-in-out infinite}
[data-iconic=danseur] .ic-arm-l{animation:kDanceArmL .8s ease-in-out infinite}
[data-iconic=danseur] .ic-arm-r{animation:kDanceArmR .8s ease-in-out infinite}
[data-iconic=danseur] .ic-foot-l{animation:kStep .4s ease-in-out infinite}
[data-iconic=danseur] .ic-foot-r{animation:kStep .4s ease-in-out infinite reverse}
[data-iconic=danseur] .icx-notes{animation:icFloat 1.6s ease-in-out infinite}
@keyframes kDance{0%,100%{transform:rotate(-10deg) translateX(-4px)}50%{transform:rotate(10deg) translateX(4px) translateY(-6px)}}
@keyframes kDanceArmL{0%,100%{transform:rotate(140deg)}50%{transform:rotate(20deg)}}
@keyframes kDanceArmR{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(-140deg)}}
/* Remue-fesses : il remue son derrière */
[data-iconic=remue] .ic-body{animation:kBooty .3s ease-in-out infinite;transform-origin:60px 40px}
[data-iconic=remue] .icx-booty{animation:kBooty .3s ease-in-out infinite;transform-origin:60px 40px}
[data-iconic=remue] .ic-foot-l{animation:kStep .3s ease-in-out infinite}
[data-iconic=remue] .ic-foot-r{animation:kStep .3s ease-in-out infinite reverse}
[data-iconic=remue] .icx-wiggle{animation:icTwinkle .3s ease-in-out infinite}
[data-iconic=remue] .ic-arm-l{animation:kArmUpL 1.2s ease-in-out infinite}
@keyframes kBooty{0%,100%{transform:rotate(-12deg) translateX(-3px)}50%{transform:rotate(12deg) translateX(3px)}}
/* Lolo : il fait le cool avec sa casquette */
[data-iconic=lolo] .ic-body{animation:kCool 1.6s ease-in-out infinite;transform-origin:60px 107px}
[data-iconic=lolo] .ic-arm-r{animation:kPoint 1.6s ease-in-out infinite}
@keyframes kCool{0%,100%{transform:none}50%{transform:rotate(-5deg) translateY(-2px)}}
@keyframes kPoint{0%,100%{transform:rotate(0)}40%,60%{transform:rotate(-100deg)}}
@media (prefers-reduced-motion:reduce){.iconic *{animation:none!important}}

/* ══ Touche galaxie, très légère, dans les conversations ══ */
.msgs-wrap::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 12% 18%,rgba(139,92,246,.10),transparent 38%),radial-gradient(circle at 88% 78%,rgba(34,211,238,.08),transparent 40%),radial-gradient(circle at 70% 12%,rgba(236,72,153,.05),transparent 30%)}
.msgs-wrap::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(1.2px 1.2px at 8% 22%,rgba(167,139,250,.9),transparent 60%),radial-gradient(1px 1px at 26% 64%,rgba(125,211,252,.9),transparent 60%),radial-gradient(1.4px 1.4px at 47% 14%,rgba(196,181,253,.9),transparent 60%),radial-gradient(1px 1px at 63% 48%,rgba(165,243,252,.8),transparent 60%),radial-gradient(1.2px 1.2px at 82% 30%,rgba(244,114,182,.8),transparent 60%),radial-gradient(1px 1px at 92% 70%,rgba(167,139,250,.8),transparent 60%),radial-gradient(1.3px 1.3px at 36% 88%,rgba(125,211,252,.8),transparent 60%),radial-gradient(1px 1px at 74% 92%,rgba(196,181,253,.8),transparent 60%);
  background-size:420px 420px}
@keyframes galaxyTwinkle{0%,100%{opacity:.35}50%{opacity:.6}}
@media (prefers-color-scheme:dark){.msgs-wrap::before{background:radial-gradient(circle at 12% 18%,rgba(139,92,246,.16),transparent 40%),radial-gradient(circle at 88% 78%,rgba(34,211,238,.10),transparent 42%),radial-gradient(circle at 70% 12%,rgba(236,72,153,.07),transparent 30%)}.msgs-wrap::after{opacity:.7}}
.msgs-wrap .to-bottom{z-index:2}
.msg.mine .bubble:not(.sticker):not(.iconic-msg):not(.call-log){box-shadow:0 2px 10px rgba(124,58,237,.14)}
@media (prefers-reduced-motion:reduce){.msgs-wrap::after{animation:none}}

/* ══ Carte de contact partagé ══ */
.bubble.contact-card{min-width:220px}
.cc-top{display:flex;align-items:center;gap:10px;padding:2px 0 8px}
.cc-top span{display:flex;flex-direction:column}.cc-top small{opacity:.7;font-size:12px}
.cc-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;border-radius:12px;font-weight:700;font-size:13.5px;background:rgba(37,99,235,.1);color:var(--blue)}
.row.me .cc-btn{background:rgba(255,255,255,.2);color:inherit}
.cc-btn.wait{opacity:.75}
.cc-note{display:block;opacity:.75;font-size:12.5px;padding-bottom:2px}
/* ══ Demandes de discussion ══ */
.rq-card{display:flex;align-items:center;gap:12px;width:calc(100% - 12px);margin:2px 6px 10px;padding:10px 12px;border-radius:18px;background:linear-gradient(135deg,#e0f2fe,var(--panel-2));border:1px solid #bae6fd;text-align:left}
.rq-card .ic{transform:rotate(180deg);color:var(--text-3)}
.rq-av{position:relative}.rq-av i{position:absolute;right:-6px;bottom:-4px;background:var(--blue);color:#fff;font-style:normal;font-size:11px;font-weight:800;border-radius:10px;padding:1px 6px;border:2px solid var(--panel)}
.rq-mid{flex:1;display:flex;flex-direction:column}.rq-mid small{color:var(--text-2);font-size:12.5px}
.rq-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rq-txt{flex:1;min-width:140px;display:flex;flex-direction:column}.rq-txt small{color:var(--text-2);font-size:12.5px}
.rq-acts{display:flex;gap:8px}
/* ══ Vue unique : nette, cachée seulement quand on quitte l'appli ══ */
.once-protect .once-body{position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.once-protect .once-content img{pointer-events:none;image-rendering:auto}
.once-protect:not(.show) .once-content,.vplayer.once-protect:not(.show) video{visibility:hidden}
.once-wm{position:absolute;right:10px;bottom:8px;pointer-events:none}
.once-wm span{color:rgba(255,255,255,.55);font-weight:700;font-size:11px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.vplayer.once-protect .once-wm{z-index:2;bottom:70px;right:16px}



/* ══ Stabilité ══ */
html,body{overscroll-behavior:none;overflow-x:hidden;touch-action:manipulation}
@media (max-width:899px){input,textarea,select,.bar textarea,.fld input,.fld textarea{font-size:16px!important}}
/* Iconics : ils bougent à l'arrivée puis se posent ; ils rejouent quand on les touche */
.msgs .iconic *,.msgs .iconic{animation-iteration-count:2!important}
.ic-grid .iconic *,.ic-grid .iconic{animation-play-state:paused!important}
.ic-grid button:hover .iconic *,.ic-grid button:focus-visible .iconic *{animation-play-state:running!important}
.list.fade-in{animation:none}
/* ══ Lueurs en haut de la liste ══ */
.lueurs-top{display:flex;gap:12px;overflow-x:auto;padding:4px 12px 12px;scrollbar-width:none}
.lueurs-top::-webkit-scrollbar{display:none}
.lt-orb{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;width:62px}
.lt-orb small{font-size:12px;font-weight:600;color:var(--text-2);max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-ring{position:relative;padding:3px;border-radius:50%;background:linear-gradient(135deg,#94a3b8,#cbd5e1)}
.lt-orb.new .lt-ring{background:conic-gradient(#22d3ee,#a855f7,#ec4899,#f59e0b,#22d3ee);box-shadow:0 0 14px rgba(168,85,247,.45)}
.lt-ring .av{border:3px solid var(--panel);display:block}
.lt-ring.empty{background:transparent;border:2px dashed var(--line);padding:2px}
.lt-plus{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;border:2px solid var(--panel)}
.lt-empty{align-self:center;font-size:12.5px;color:var(--text-3);margin:0 0 0 4px;white-space:nowrap}