/* Console CHATW.ME.

   Écran de travail, pas vitrine : encre sombre, densité haute, aucune animation
   d'apparition. Le contenu est peint au premier rendu et ne bouge plus.

   Deux couleurs portent du sens et rien d'autre :
     --open   la ligne répond
     --price  ceci a rapporté ou va rapporter de l'argent
   Un montant est toujours en chiffres tabulaires ambrés ; le reste est gris. */

*{box-sizing:border-box;margin:0;padding:0}

:root{
 --paper:#0B100E; --card:#121A16; --raise:#18231E; --sunk:#0E1512;
 --ink:#E4EBE7; --mute:#8A9B93; --faint:#5E6F68;
 --line:#212D28; --line-2:#2C3B34;
 --open:#22C17B; --open-d:#12301F;
 --price:#F0B429; --price-d:#2A2210;
 --hot:#FF6B4A;
 --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
 --body:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
 --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
 --rail:56px; --list:304px; --panel:328px;
}

html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.45;
 -webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--open);outline-offset:2px;border-radius:4px}
svg{display:block;flex:none}

/* barre de défilement habillée : présente en permanence pour que rien ne se
   décale quand une liste déborde */
.scroll{overflow-y:auto;scrollbar-gutter:stable;scrollbar-width:thin;
 scrollbar-color:var(--line-2) transparent}
.scroll::-webkit-scrollbar{width:10px}
.scroll::-webkit-scrollbar-track{background:transparent}
.scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px;
 border:3px solid var(--paper)}
.scroll::-webkit-scrollbar-thumb:hover{background:#3A4C44}

/* ---------- ossature ---------- */
#root{height:100%}
/* La ligne est bornée explicitement : un grid item garde min-height:auto par
   défaut et refuse alors de se réduire sous la hauteur de son contenu, ce qui
   étire toute la console au lieu de la faire défiler. */
.shell{display:grid;grid-template-columns:var(--rail) 1fr;grid-template-rows:minmax(0,1fr);
 height:100%}

.rail{background:var(--sunk);border-right:1px solid var(--line);display:flex;flex-direction:column;
 align-items:center;padding:12px 0;gap:4px}
.mark{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.08em;
 color:var(--open);writing-mode:vertical-rl;margin:4px 0 16px;user-select:none}
.rail a{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;color:var(--faint);
 position:relative;transition:color .12s ease,background .12s ease}
.rail a:hover{color:var(--mute);background:var(--card)}
.rail a.on{color:var(--ink);background:var(--raise)}
.rail a.on::before{content:'';position:absolute;left:-8px;top:9px;bottom:9px;width:2px;
 background:var(--open);border-radius:2px}
.rail .pip{position:absolute;top:5px;right:5px;min-width:15px;height:15px;padding:0 4px;
 background:var(--hot);color:#0B100E;border-radius:8px;font-family:var(--mono);font-weight:700;
 font-size:9.5px;line-height:15px;text-align:center}
.rail .spacer{flex:1}

.page{display:flex;flex-direction:column;min-width:0;min-height:0;height:100%}

/* ---------- barre de tête ---------- */
.top{height:52px;flex:none;display:flex;align-items:center;gap:14px;padding:0 16px;
 border-bottom:1px solid var(--line);background:var(--card)}
.top h1{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;
 text-transform:uppercase;color:var(--mute)}
.top .grow{flex:1}

.picker{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 6px;background:var(--raise);
 border:1px solid var(--line);border-radius:8px;cursor:pointer}
.picker:hover{border-color:var(--line-2)}
.picker .av{width:22px;height:22px;border-radius:4px;object-fit:cover;background:var(--line)}
.picker b{font-weight:600;font-size:13px}
.picker .num{font-family:var(--mono);font-size:11px;color:var(--faint)}

.live{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mute);
 font-variant-numeric:tabular-nums}
.dot{width:6px;height:6px;border-radius:50%;background:var(--open);flex:none}
.dot.off{background:var(--faint)}
.dot.warn{background:var(--price)}

/* ---------- boîte de réception : trois colonnes ---------- */
/* La ligne de la grille est bornée à la hauteur disponible. Sans cela elle se
   dimensionne sur son contenu : un fil de deux cents messages étire la colonne,
   pousse la mise en page hors de l'écran et plus rien ne défile. */
.inbox{flex:1;min-height:0;display:grid;grid-template-columns:var(--list) 1fr var(--panel);
 grid-template-rows:minmax(0,1fr)}
.col{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.col+.col{border-left:1px solid var(--line)}

/* filtres */
.filters{flex:none;padding:10px 12px;border-bottom:1px solid var(--line);display:flex;gap:6px}
.search{flex:1;background:var(--sunk);border:1px solid var(--line);border-radius:8px;
 padding:7px 10px;font-size:13px;color:var(--ink)}
.search::placeholder{color:var(--faint)}
.search:focus{border-color:var(--line-2);outline:none}
.chips{flex:none;display:flex;gap:5px;padding:8px 12px;border-bottom:1px solid var(--line);
 overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{padding:4px 9px;border-radius:6px;background:transparent;border:1px solid var(--line);
 color:var(--mute);font-size:11.5px;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip.on{background:var(--raise);border-color:var(--line-2);color:var(--ink)}

/* fil des conversations */
.threads{flex:1;min-height:0}
.th{display:grid;grid-template-columns:34px 1fr auto;gap:10px;padding:11px 12px;cursor:pointer;
 border-bottom:1px solid var(--line);align-items:start}
.th:hover{background:var(--card)}
.th.on{background:var(--raise)}
.th.on .th-name{color:var(--ink)}
.th-av{width:34px;height:34px;border-radius:7px;background:var(--line);display:grid;place-items:center;
 font-family:var(--display);font-weight:700;font-size:13px;color:var(--mute);object-fit:cover}
.th-mid{min-width:0}
.th-name{font-weight:600;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis}
.th-last{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 margin-top:2px}
.th-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.th-time{font-family:var(--mono);font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.th-spent{font-family:var(--mono);font-weight:700;font-size:11.5px;color:var(--price);
 font-variant-numeric:tabular-nums}
.th-unread{min-width:17px;height:17px;padding:0 5px;background:var(--open);color:#08150F;
 border-radius:9px;font-family:var(--mono);font-weight:700;font-size:10px;line-height:17px;
 text-align:center}
.stage{width:5px;height:5px;border-radius:50%;flex:none;margin-top:6px}
.stage.new{background:var(--faint)} .stage.warm{background:#5AA9E6}
.stage.spender{background:var(--price)} .stage.whale{background:var(--hot)}
.stage.cold{background:#4A5B54} .stage.lost{background:#3A4A44}

/* ---------- conversation ---------- */
.conv{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--sunk)}
.conv-top{flex:none;height:52px;display:flex;align-items:center;gap:12px;padding:0 16px;
 border-bottom:1px solid var(--line);background:var(--card)}
.conv-top b{font-size:14px}
.conv-top .num{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.conv-top .acts{margin-left:auto;display:flex;gap:4px}
.iconbtn{width:30px;height:30px;display:grid;place-items:center;border-radius:7px;background:transparent;
 border:1px solid transparent;color:var(--mute);cursor:pointer}
.iconbtn:hover{background:var(--raise);color:var(--ink)}
.iconbtn.on{background:var(--raise);color:var(--open);border-color:var(--line)}

.feed{flex:1;min-height:0;padding:18px 20px 8px;display:flex;flex-direction:column;gap:3px}
.day{align-self:center;margin:14px 0 10px;padding:3px 10px;background:var(--card);border-radius:20px;
 font-size:10.5px;color:var(--faint);letter-spacing:.04em;text-transform:uppercase}

/* bulle : coin réduit du côté de l'émetteur, sans queue — on évoque la
   messagerie sans la décalquer */
.bub{max-width:min(560px,72%);padding:8px 11px 6px;border-radius:13px;font-size:13.5px;
 line-height:1.42;word-wrap:break-word;position:relative}
/* Qui parle doit se lire sans effort : le client en gris neutre, nous en vert
   sourd. C'est la seule distinction que l'œil fait mille fois par journée. */
.bub.in{align-self:flex-start;background:var(--raise);border-bottom-left-radius:4px}
.bub.out{align-self:flex-end;background:#123528;border-bottom-right-radius:4px}
.bub.out .meta{color:#6E9683}
.bub+.bub.in{margin-top:1px} .bub.in+.bub.out,.bub.out+.bub.in{margin-top:9px}
.meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:3px;
 font-family:var(--mono);font-size:9.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.ck{letter-spacing:-2.5px;font-size:11px;color:var(--faint)}
.ck.read{color:var(--open)}
.ck.failed{color:var(--hot);letter-spacing:0}
.bub.sys{align-self:center;background:var(--open-d);color:var(--open);font-size:11.5px;
 padding:5px 12px;border-radius:20px;border:1px solid #1C4432;max-width:none}

/* média payant */
.ppv{padding:0;overflow:hidden;background:var(--card)}
.ppv-shade{width:260px;height:170px;background:linear-gradient(135deg,#1D2A24,#0F1714);
 display:grid;place-items:center;gap:8px;position:relative}
.ppv-shade .lock{color:var(--price)}
.ppv-bar{display:flex;align-items:center;gap:10px;padding:9px 11px;border-top:1px solid var(--line)}
.ppv-price{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--price);
 font-variant-numeric:tabular-nums}
.ppv-bar .cap{flex:1;font-size:12.5px;color:var(--mute);min-width:0;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.btn-unlock{padding:5px 10px;border-radius:6px;background:var(--price);border:0;color:#1B1405;
 font-weight:600;font-size:11.5px;cursor:pointer;white-space:nowrap}
.btn-unlock:hover{filter:brightness(1.08)}
.paid{font-size:11px;color:var(--open);font-weight:600;white-space:nowrap}
.ppv img{display:block;width:260px;height:170px;object-fit:cover}

.typing{align-self:flex-start;display:flex;gap:3px;padding:10px 12px;background:var(--card);
 border-radius:13px;border-bottom-left-radius:4px;margin-top:9px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--faint);
 animation:blink 1.3s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.28}30%{opacity:1}}

/* ---------- zone de saisie ---------- */
.composer{flex:none;border-top:1px solid var(--line);background:var(--card);padding:10px 14px 12px}
.composer-row{display:flex;align-items:flex-end;gap:8px}
.composer textarea{flex:1;background:var(--sunk);border:1px solid var(--line);border-radius:10px;
 padding:9px 12px;font-size:13.5px;line-height:1.4;resize:none;max-height:150px;min-height:38px}
.composer textarea:focus{border-color:var(--line-2);outline:none}
.send{width:38px;height:38px;border-radius:10px;background:var(--open);border:0;color:#08150F;
 display:grid;place-items:center;cursor:pointer;flex:none}
.send:hover{filter:brightness(1.08)}
.send:disabled{background:var(--line);color:var(--faint);cursor:default;filter:none}
.snips{display:flex;gap:5px;margin-bottom:8px;overflow-x:auto;scrollbar-width:none}
.snips::-webkit-scrollbar{display:none}
.snip{padding:3px 9px;border-radius:14px;background:var(--sunk);border:1px solid var(--line);
 color:var(--mute);font-size:11.5px;cursor:pointer;white-space:nowrap}
.snip:hover{color:var(--ink);border-color:var(--line-2)}
.attach{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:8px;
 background:var(--price-d);border:1px solid #453515;border-radius:9px;font-size:12.5px}
.attach .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach input{width:74px;background:var(--sunk);border:1px solid var(--line);border-radius:6px;
 padding:4px 7px;font-family:var(--mono);font-size:12px;text-align:right}

/* ---------- fiche client ---------- */
.panel{flex:1;min-height:0;background:var(--card)}
.panel-head{padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.panel-head h2{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.01em;
 text-transform:uppercase;font-stretch:108%}
.panel-head .num{font-family:var(--mono);font-size:12px;color:var(--mute);margin-top:4px}
.tot{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.tot b{font-family:var(--mono);font-weight:700;font-size:24px;color:var(--price);
 font-variant-numeric:tabular-nums}
.tot span{font-size:11.5px;color:var(--faint)}
.pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
.pill{padding:3px 8px;border-radius:5px;background:var(--raise);border:1px solid var(--line);
 font-size:11px;color:var(--mute);cursor:pointer}
.pill:hover{border-color:var(--line-2);color:var(--ink)}
.pill.add{border-style:dashed;color:var(--faint)}

.sect{border-bottom:1px solid var(--line);padding:14px 16px}
.sect h3{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
 margin-bottom:10px;display:flex;align-items:center;gap:7px}
.sect h3 .grow{flex:1}
.sect h3 button{background:none;border:0;color:var(--mute);font-size:11px;cursor:pointer;
 text-transform:none;letter-spacing:0}
.sect h3 button:hover{color:var(--open)}

.field{display:grid;grid-template-columns:88px 1fr;gap:8px;align-items:baseline;
 padding:5px 0;border-bottom:1px dashed var(--line)}
.field:last-child{border-bottom:0}
.field label{font-size:11.5px;color:var(--faint)}
.field .val{font-size:12.5px;min-height:18px;cursor:text;border-radius:4px;padding:1px 4px;
 margin:-1px -4px;overflow-wrap:anywhere}
.field .val:hover{background:var(--raise)}
.field .val:empty::before{content:'—';color:var(--faint)}
.field .val:focus{background:var(--sunk);outline:1px solid var(--line-2)}

.note{padding:9px 30px 9px 10px;background:var(--sunk);border-radius:8px;margin-bottom:7px;
 font-size:12.5px;line-height:1.45;position:relative;border-left:2px solid var(--line-2);
 overflow-wrap:anywhere}
.note time{display:block;font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:5px}
.note-add{width:100%;background:var(--sunk);border:1px solid var(--line);border-radius:8px;
 padding:8px 10px;font-size:12.5px;resize:vertical;min-height:56px}

.led{display:flex;align-items:baseline;gap:8px;padding:5px 0;font-size:12px;border-bottom:1px dashed var(--line)}
.led:last-child{border-bottom:0}
.led .grow{flex:1;color:var(--mute);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.led b{font-family:var(--mono);font-weight:600;color:var(--price);font-variant-numeric:tabular-nums}
.led time{font-family:var(--mono);font-size:10px;color:var(--faint)}

/* ---------- pages simples ---------- */
.body{flex:1;min-height:0;overflow:hidden;padding:22px 26px}
.grid{display:grid;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.card h3{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.07em;
 text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.stat{display:flex;flex-direction:column;gap:5px}
.stat b{font-family:var(--mono);font-weight:700;font-size:26px;font-variant-numeric:tabular-nums}
.stat b.money{color:var(--price)}
.stat span{font-size:11.5px;color:var(--faint)}

.btn{padding:8px 14px;border-radius:8px;background:var(--raise);border:1px solid var(--line);
 color:var(--ink);font-size:13px;font-weight:500;cursor:pointer}
.btn:hover{border-color:var(--line-2)}
.btn.primary{background:var(--open);border-color:var(--open);color:#08150F;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--mute)}
.btn.ghost:hover{color:var(--ink);background:var(--raise)}
.btn.danger:hover{border-color:var(--hot);color:var(--hot)}

.inp{width:100%;background:var(--sunk);border:1px solid var(--line);border-radius:8px;
 padding:8px 11px;font-size:13.5px}
.inp:focus{border-color:var(--line-2);outline:none}
.row{display:flex;gap:10px;align-items:center}
.lab{font-size:11.5px;color:var(--faint);margin-bottom:5px;display:block}

/* éditeur de la page publique */
.links{display:grid;grid-template-columns:1fr 372px;gap:24px;height:100%;min-height:0}
.link-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
 border-radius:10px;padding:12px 14px;margin-bottom:8px;cursor:grab}
.link-row.drag{opacity:.4}
.link-row .grip{color:var(--faint);cursor:grab}
.link-row .grow{flex:1;min-width:0}
.link-row b{font-weight:600;font-size:13.5px;display:block}
.link-row span{font-size:12px;color:var(--faint)}
.link-row .price{font-family:var(--mono);font-weight:700;color:var(--price);font-variant-numeric:tabular-nums}
.kindtag{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
 border:1px solid var(--line);border-radius:4px;padding:2px 5px}

/* aperçu du téléphone : la page publique telle qu'elle sera vue */
.phone{position:sticky;top:0;background:#F4F6F5;border-radius:20px;border:1px solid var(--line-2);
 overflow:hidden;height:min(720px,calc(100vh - 140px))}
.phone iframe{width:100%;height:100%;border:0;display:block}

/* coffre */
.vault{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer}
.tile:hover{border-color:var(--line-2)}
.tile.on{border-color:var(--open)}
.tile .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#1D2A24,#0F1714);display:grid;
 place-items:center;color:var(--faint);position:relative}
.tile .dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.62);border-radius:4px;
 padding:1px 5px;font-family:var(--mono);font-size:10px;color:#DDE7E2}
.tile .foot{padding:8px 10px;display:flex;align-items:baseline;gap:8px}
.tile .foot span{flex:1;font-size:11.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;
 white-space:nowrap}
.tile .foot b{font-family:var(--mono);font-weight:700;font-size:12px;color:var(--price)}

/* état vide : une invitation, jamais une excuse */
.empty{display:grid;place-items:center;height:100%;text-align:center;padding:40px;gap:10px;
 align-content:center}
.empty h3{font-family:var(--display);font-weight:700;font-size:15px;color:var(--mute)}
.empty p{font-size:13px;color:var(--faint);max-width:34ch}

/* connexion */
.login{height:100%;display:grid;place-items:center;padding:24px}
.login .box{width:100%;max-width:340px}
.login .mark{writing-mode:horizontal-tb;font-size:13px;letter-spacing:.14em;margin-bottom:26px}
.login h2{font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;
 font-stretch:110%;margin-bottom:22px}
.login .inp{margin-bottom:9px}
.login .btn{width:100%;margin-top:8px}
.err{color:var(--hot);font-size:12.5px;margin-top:10px;min-height:18px}

/* fenêtre */
.mask{position:fixed;inset:0;background:rgba(6,10,9,.72);display:grid;place-items:center;
 padding:24px;z-index:50}
.modal{background:var(--card);border:1px solid var(--line-2);border-radius:14px;width:100%;
 max-width:460px;box-shadow:0 24px 60px -20px rgba(0,0,0,.8)}
.modal header{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.modal header h3{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.07em;
 text-transform:uppercase;flex:1}
.modal .in{padding:18px}
.modal footer{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:8px;
 justify-content:flex-end}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--raise);
 border:1px solid var(--line-2);border-radius:9px;padding:10px 16px;font-size:13px;z-index:60;
 box-shadow:var(--shadow,0 12px 32px -16px rgba(0,0,0,.8))}
.toast.bad{border-color:var(--hot);color:var(--hot)}

/* ═══════════════════════════════════════════════════════════════════════
   Sur téléphone, la console cesse d'être trois colonnes et devient une pile
   d'écrans avec une barre d'onglets en bas — la grammaire d'iOS, parce que
   c'est celle que la main attend. Les couleurs, les fontes et les montants
   ambrés ne changent pas : c'est la navigation qui s'adapte, pas l'identité.
   ═══════════════════════════════════════════════════════════════════════ */

/* Ces pièces n'existent qu'en mobile ; en grand écran elles n'ont rien à dire. */
.tabbar,.retour,.voile,.poignee{display:none}

/* Tablette en paysage : la fiche cède, les deux colonnes utiles restent. */
@media (max-width:1180px) and (min-width:841px){
 .inbox{grid-template-columns:var(--list) minmax(0,1fr)}
 .panel-col{display:none}
}

@media (max-width:840px){
 :root{--nav:46px;--tab:50px}

 /* dvh plutôt que vh : sur mobile la barre d'adresse se rétracte, et vh
    laisserait la zone de saisie sous le pli une fois sur deux. */
 html,body{height:100dvh;overscroll-behavior:none}
 body{font-size:15px}
 /* Un appui ne doit pas laisser de halo gris ni sélectionner du texte :
    c'est ce qui trahit une page web déguisée en application. */
 *{-webkit-tap-highlight-color:transparent}
 .rail,.th,.tabbar,.conv-top,.top,.chips,.snips{-webkit-user-select:none;user-select:none}
 .scroll{-webkit-overflow-scrolling:touch}

 /* Le rail vertical vole de la largeur à un écran qui n'en a pas : la barre
    d'onglets le remplace. */
 .rail{display:none}
 .shell{grid-template-columns:1fr}
 .page{padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}

 /* ---- barre de navigation, façon iOS ----
    Une seule rangée : titre au centre, ligne courante à droite. Le titre en
    position absolue et le sélecteur dans le flux se chevauchaient dès qu'une
    encoche poussait la barre vers le bas. */
 .top{height:auto;min-height:var(--nav);position:relative;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 8px) 12px 9px;gap:8px}
 .top h1{position:static;transform:none;font-size:12.5px;letter-spacing:.07em;color:var(--ink)}
 .top .grow,.top .live{display:none}
 /* Ancré au BAS de la barre : le haut varie avec l'encoche, le bas non. Aligné
    sur le titre quelle que soit la marge de sécurité de l'appareil. */
 .top .picker{position:absolute;right:10px;bottom:6px;
  padding:4px 7px 4px 4px;max-width:44%}
 .top .picker .num{display:none}
 .top .picker b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

 /* Les filtres ne doivent pas manger la moitié de l'écran avant la première
    conversation. */
 .filters{padding:7px 12px}
 .chips{padding:6px 12px}

 /* ---- la pile : un écran à la fois ---- */
 .inbox{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 .col+.col{border-left:0}
 .list-col,.conv-col{display:none}
 .inbox[data-ecran="list"] .list-col{display:flex}
 .inbox[data-ecran="conv"] .conv-col,
 .inbox[data-ecran="fiche"] .conv-col{display:flex}
 /* La barre du haut ne sert que la liste : dans une conversation, c'est
    conv-top qui fait office de barre de navigation, et empiler les deux
    mangerait 100 px de hauteur pour rien. */
 .inbox[data-ecran="conv"] ~ .top,.inbox[data-ecran="fiche"] ~ .top{display:none}
 .page:has(.inbox[data-ecran="conv"]) .top,
 .page:has(.inbox[data-ecran="fiche"]) .top{display:none}

 /* ---- conversation ---- */
 .conv-top{height:auto;min-height:var(--nav);padding:env(safe-area-inset-top) 10px 8px;gap:9px}
 .retour{display:flex;align-items:center;gap:1px;background:none;border:0;color:var(--open);
  font-size:15px;padding:6px 4px 6px 0;margin-left:-4px;cursor:pointer;flex:none}
 .retour svg{transform:rotate(90deg)}
 .retour span{font-size:15px}
 .conv-top .num{display:none}
 .conv-top .th-av{width:30px;height:30px}
 .conv-top b{font-size:15px}
 .conv-top .acts{gap:0}
 /* Cible tactile : 44 px, la mesure d'Apple, sinon on rate le bouton. */
 .iconbtn{width:44px;height:44px}
 .feed{padding:12px 12px 6px}
 .bub{max-width:82%;font-size:15px}

 /* ---- zone de saisie : elle suit le clavier ---- */
 .composer{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
 /* 16 px pile : en dessous, iOS zoome sur le champ au premier appui et ne
    revient jamais en arrière. */
 .composer textarea,.search,.inp,.note-add{font-size:16px}
 .composer textarea{min-height:40px}
 .send{width:42px;height:42px}
 .snips{margin-bottom:7px}
 .snip,.chip{padding:7px 12px;font-size:13px}

 /* ---- fiche client : une feuille qui monte ---- */
 .panel-col{display:block;position:fixed;inset:0;z-index:40;border:0;background:none;
  pointer-events:none;opacity:0;transition:opacity .18s ease}
 .inbox[data-ecran="fiche"] .panel-col{pointer-events:auto;opacity:1}
 .voile{display:block;position:absolute;inset:0;background:rgba(4,8,7,.55)}
 .panel{position:absolute;left:0;right:0;bottom:0;height:88dvh;border-radius:16px 16px 0 0;
  border-top:1px solid var(--line-2);transform:translateY(14px);transition:transform .22s ease;
  padding-bottom:env(safe-area-inset-bottom)}
 .inbox[data-ecran="fiche"] .panel{transform:translateY(0)}
 /* La poignée : on la voit, on comprend que ça se tire vers le bas. */
 .poignee{display:block;width:100%;height:22px;background:none;border:0;cursor:pointer;
  position:relative;flex:none}
 .poignee::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:36px;height:4px;border-radius:2px;background:var(--line-2)}

 /* ---- liste des fils : plus haute, plus lisible au pouce ---- */
 .th{padding:12px;grid-template-columns:40px 1fr auto;gap:11px}
 .th-av{width:40px;height:40px;font-size:15px}
 .th-name{font-size:15px}
 .th-last{font-size:13.5px}

 /* ---- barre d'onglets ---- */
 .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;
  height:calc(var(--tab) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(14,21,18,.92);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line)}
 .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:var(--faint);padding-top:5px}
 .tabbar a.on{color:var(--open)}
 .tb-ic{position:relative;display:block;line-height:0}
 .tb-lb{font-size:10px;letter-spacing:.01em}
 .tb-pip{position:absolute;top:-4px;right:-8px;min-width:16px;height:16px;padding:0 4px;
  background:var(--hot);color:#0B100E;border-radius:8px;font-family:var(--mono);
  font-weight:700;font-size:10px;line-height:16px;text-align:center}
 /* Dans une conversation, la barre d'onglets s'efface : l'écran appartient au
    fil et à la saisie, comme dans toute messagerie. */
 .page:has(.inbox[data-ecran="conv"]) ~ .tabbar,
 .page:has(.inbox[data-ecran="fiche"]) ~ .tabbar{display:none}
 .page:has(.inbox[data-ecran="conv"]),
 .page:has(.inbox[data-ecran="fiche"]){padding-bottom:0}

 /* ---- pages secondaires ---- */
 .body{padding:16px 14px}
 .links{grid-template-columns:1fr}
 .phone{display:none}
 .vault{grid-template-columns:repeat(auto-fill,minmax(46%,1fr));gap:10px}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .modal{max-width:100%;border-radius:16px 16px 0 0;position:fixed;left:0;right:0;bottom:0}
 .mask{padding:0;align-items:flex-end}
 .modal footer{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
 .btn,.btn.primary{min-height:44px}
 .login .box{max-width:100%}
 .login .inp{font-size:16px;min-height:46px}
}

/* Sur un écran vraiment étroit, le nom des onglets gêne plus qu'il n'aide. */
@media (max-width:360px){
 .tb-lb{display:none}
 .tabbar a{padding-top:0}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}