/* Réponses, her app (PLM #99787). The look is prototype v4, option « Douce », approved by the Owner
   on 2026-10-23 (prototypes/life-os/plm-99787/v4.html, sha256 48d57636…), and the v6 additions
   (v6.html, sha256 abf15667…, approved 2026-10-24) further down: its tokens and component
   rules, copied unchanged, minus the review page and the two looks he did not pick. Only the frame
   changes: the app fills the phone's screen instead of a 412 × 860 drawing. */
@font-face{font-family:"Young Serif";src:url(/fonts/YoungSerif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/DMSans.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

/* TOKENS (tokens_source): no product token file exists yet; this file is it. :root holds only the neutral review shell
   (the grey page around the phone). The three looks are the .app[data-theme] blocks further down:
   colours, type, shape, spacing on a 4 px grid, all defined here. */
:root{
  --primary:#126b56; --on-primary:#ffffff; --primary-container:#a3f2d8; --on-primary-container:#005140;
  --secondary:#4b635b; --secondary-container:#cee9dd; --on-secondary-container:#344c43;
  --tertiary:#416376; --tertiary-container:#c4e7ff; --on-tertiary-container:#284b5e;
  --surface:#f5fbf6; --surface-dim:#d5dbd7; --sc-lowest:#ffffff; --sc-low:#eff5f1; --sc:#e9efeb; --sc-high:#e3eae5; --sc-highest:#dee4e0;
  --on-surface:#171d1a; --on-surface-variant:#3f4945; --outline:#6f7975; --outline-variant:#bfc9c3;
  --inverse-surface:#2b322f; --inverse-on-surface:#ecf2ee; --inverse-primary:#87d6bc;
  --shape-xs:4px; --shape-s:8px; --shape-m:12px; --shape-l:16px; --shape-xl:28px; --shape-full:999px;
  --font:system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,0,0,1);
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body{font-family:var(--font);color:var(--on-surface);background:var(--sc);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
button:disabled{opacity:.38;cursor:not-allowed}
.ico{width:24px;height:24px;fill:currentColor;flex:none}
.ico.s{width:18px;height:18px}
.ico.xs{width:16px;height:16px}

/* ---------- the app ---------- */
.app{width:412px;height:860px;background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--shape-l);position:relative;overflow:hidden}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--surface);animation:fade .28s var(--ease)}
.scr[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.body{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 16px 24px}
.topbar{display:flex;align-items:center;gap:4px;min-height:64px;padding:8px 4px 8px 4px;flex:none}
.topbar .t{flex:1;min-width:0}
.topbar .t b{display:block;font-size:22px;line-height:28px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .t span{display:flex;align-items:center;gap:6px;font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.ibtn{width:48px;height:48px;border:0;border-radius:var(--shape-full);background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--on-surface-variant);flex:none}
.ibtn:hover{background:var(--sc-high)}
.large{padding:12px 16px 8px}
.large h1{font-size:32px;line-height:40px;font-weight:400;margin:0}
.large p{margin:0;color:var(--on-surface-variant);font-size:15px}
.sec{font-size:14px;line-height:20px;font-weight:500;color:var(--on-surface-variant);margin:20px 4px 8px}
.card{background:var(--sc-low);border-radius:var(--shape-l);padding:16px}
.card.out{background:var(--sc-lowest);border:1px solid var(--outline-variant)}
.list{background:var(--sc-lowest);border-radius:var(--shape-l);overflow:hidden;border:1px solid var(--sc-high)}
.row{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;text-align:left;padding:12px 16px;min-height:72px;border-top:1px solid var(--sc-high);transition:opacity .4s var(--ease)}
.row:first-child{border-top:0}
.row:hover{background:var(--sc-low)}
.row .mid{flex:1;min-width:0}
.row .nm{font-size:16px;line-height:24px;font-weight:500;display:flex;align-items:center;gap:6px}
.row .sn{display:block;font-size:14px;line-height:20px;color:var(--on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .rt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;color:var(--on-surface-variant);font-size:14px;line-height:20px;flex:none}
.av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:16px;flex:none;background:var(--secondary-container);color:var(--on-secondary-container)}
.av.t{background:var(--tertiary-container);color:var(--on-tertiary-container)}
.av.p{background:var(--primary-container);color:var(--on-primary-container)}
.av.lg{width:56px;height:56px;font-size:22px}
.av.xl{width:72px;height:72px;font-size:28px}
.ch{display:inline-flex;align-items:center;gap:4px;color:var(--on-surface-variant);font-size:14px;line-height:20px}
.navbar{display:flex;height:80px;background:var(--sc);flex:none}
.navbar button{flex:1;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:14px;line-height:20px;font-weight:500;color:var(--on-surface-variant)}
.navbar .pill{width:64px;height:32px;border-radius:var(--shape-full);display:flex;align-items:center;justify-content:center}
.navbar button[aria-current="page"]{color:var(--on-surface)}
.navbar button[aria-current="page"] .pill{background:var(--secondary-container);color:var(--on-secondary-container)}
.fab{position:absolute;right:16px;bottom:96px;display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 20px 0 16px;border:0;border-radius:var(--shape-l);background:var(--primary-container);color:var(--on-primary-container);font-size:15px;font-weight:500;box-shadow:0 1px 3px rgba(0,0,0,.18),0 4px 8px rgba(0,0,0,.08)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--shape-full);font-size:15px;line-height:20px;font-weight:500;border:0;background:transparent;color:var(--primary)}
.btn.fill{background:var(--primary);color:var(--on-primary)}
.btn.fill:hover{box-shadow:0 1px 3px rgba(0,0,0,.25)}
.btn.tonal{background:var(--secondary-container);color:var(--on-secondary-container)}
.btn.outl{border:1px solid var(--outline);color:var(--primary)}
.btn.text:hover,.btn.outl:hover{background:var(--sc-low)}
.btn.wide{width:100%}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--shape-s);border:1px solid var(--outline-variant);background:var(--sc-lowest);font-size:14px;line-height:20px;font-weight:500;color:var(--on-surface-variant)}
.chip:hover{background:var(--sc-low)}
.chip[aria-pressed="true"]{background:var(--secondary-container);border-color:var(--secondary-container);color:var(--on-secondary-container)}
.quiet{font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.linkbtn{border:0;background:transparent;padding:8px 0;min-height:40px;color:var(--primary);font-size:14px;font-weight:500}

/* thread excerpt */
.thread{display:flex;flex-direction:column;gap:6px}
.msg{max-width:84%;padding:8px 12px;border-radius:var(--shape-l);font-size:15px;line-height:21px}
.msg.in{background:var(--sc-high);align-self:flex-start;border-bottom-left-radius:var(--shape-xs)}
.msg.me{background:var(--secondary-container);color:var(--on-secondary-container);align-self:flex-end;border-bottom-right-radius:var(--shape-xs)}
.msg time{display:block;font-size:14px;line-height:20px;color:var(--on-surface-variant);margin-top:2px}
.msg.draft{background:var(--sc-lowest);border:2px dashed var(--primary);color:var(--on-surface);align-self:flex-end;border-bottom-right-radius:var(--shape-xs);max-width:88%}
.draftlbl{align-self:flex-end;font-size:14px;line-height:20px;font-weight:500;color:var(--primary);margin-top:8px}
.draftcard{background:var(--sc-lowest);border:1px solid var(--outline-variant);border-radius:var(--shape-l);padding:16px;margin-top:12px}
.draftcard .who{font-size:14px;line-height:20px;font-weight:500;color:var(--primary);margin-bottom:2px}
.drafttext{font-size:17px;line-height:26px;margin:0;transition:opacity .35s var(--ease)}
.drafttext.busy{opacity:.35}
.verline{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--on-surface-variant)}
.verline[hidden]{display:none}
.actions{flex:none;padding:12px 16px 16px;background:var(--surface);border-top:1px solid var(--sc-high)}
.actions .row3{display:flex;gap:8px;justify-content:space-between;margin-top:8px}
.actions .row3 .btn{padding:0 12px}
.askbtn{min-height:44px;padding:0 12px;margin:8px 0 0 -4px;font-size:14px;color:var(--on-surface-variant)}
.askbtn:hover{background:var(--sc-high)}
.ctx{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ctx .av{width:32px;height:32px}
.ctx b{display:block;font-size:16px;line-height:24px;font-weight:500}
.draftcard .quote{font-size:15px;line-height:22px}
.ged{display:none;margin-top:8px}
.editing-g .ged{display:block}
.editing-g [data-askdraft]{display:none}
.spin{width:18px;height:18px;border:2px solid var(--outline-variant);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* snackbar */
.snack{position:absolute;left:12px;right:12px;bottom:92px;z-index:5;background:var(--inverse-surface);color:var(--inverse-on-surface);border-radius:var(--shape-xs);padding:6px 8px 6px 16px;min-height:48px;display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;box-shadow:0 3px 8px rgba(0,0,0,.2);transition:opacity .3s var(--ease)}
.snack[hidden]{display:none}
.snack.low{bottom:16px}
.snack.mid{bottom:144px}
.snack:not([hidden]) ~ .fab{transform:translateY(-60px)}
.fab{transition:transform .3s var(--ease)}
.snack span{flex:1}
.snack button{border:0;background:transparent;color:var(--inverse-primary);font-weight:500;min-height:40px;padding:0 10px;font-size:14px}

.quote{background:var(--sc-high);border-radius:var(--shape-l);border-bottom-left-radius:var(--shape-xs);padding:10px 14px;font-size:16px;line-height:24px;margin:0 0 14px}

/* batch */
.qhead{display:flex;align-items:center;gap:8px;padding:0 16px 8px}
.prog{height:4px;border-radius:var(--shape-full);background:var(--sc-highest);flex:1;overflow:hidden}
.prog i{display:block;height:100%;background:var(--primary);border-radius:var(--shape-full);transition:width .5s var(--ease)}
.deck{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 32px 12px 16px;scrollbar-width:none;flex:none}
.deck::-webkit-scrollbar{display:none}
.qcard{flex:0 0 calc(100% - 28px);scroll-snap-align:start;scroll-margin-left:16px;background:var(--sc-lowest);border:1px solid var(--outline-variant);border-radius:var(--shape-xl);padding:18px;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.qcard.gone{opacity:0;transform:translateY(-12px)}
.qcard .hd{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.qcard .hd b{display:block;font-size:18px;line-height:24px;font-weight:500}
.qcard .lbl{font-size:14px;line-height:20px;font-weight:500;color:var(--primary);margin:12px 0 4px}
.qcard p.d{font-size:16px;line-height:24px;margin:0}
.done{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:48px 24px;flex:1}
.done[hidden]{display:none}
.done h2{font-size:24px;line-height:32px;font-weight:400;margin:0}

/* edit */
.field{border:1px solid var(--outline);border-radius:var(--shape-xs);padding:12px 14px;background:var(--sc-lowest);position:relative;margin-top:8px}
.field:focus-within{border:2px solid var(--primary);padding:11px 13px}
.field label{position:absolute;top:-10px;left:10px;background:var(--surface);padding:0 4px;font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.field:focus-within label{color:var(--primary)}
.field textarea,.field input{width:100%;border:0;outline:0;background:transparent;font:inherit;font-size:17px;line-height:26px;color:var(--on-surface);resize:none}
.field input{font-size:16px;line-height:24px}
.ask{display:flex;gap:8px;align-items:flex-end}
.ask .field{flex:1}

/* person */
.mlist{background:var(--sc-lowest);border:1px solid var(--sc-high);border-radius:var(--shape-l);overflow:hidden}
.mlist .mem{border:0;border-radius:0;margin:0;border-top:1px solid var(--sc-high)}
.mlist .mem:first-child{border-top:0}
.swrow{display:flex;align-items:center;gap:12px;padding:14px 16px}
.swrow .mid{flex:1;min-width:0}
.swrow b{display:block;font-size:16px;line-height:24px;font-weight:500}
.swrow .mid span{display:block;font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.sw{position:relative;width:52px;height:32px;border-radius:var(--shape-full);border:2px solid var(--outline);background:var(--sc-highest);flex:none;padding:0;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.sw::after{content:"";position:absolute;top:50%;left:6px;width:16px;height:16px;border-radius:50%;background:var(--outline);transform:translateY(-50%);transition:left .2s var(--ease),width .2s var(--ease),height .2s var(--ease)}
.sw[aria-checked="true"]{background:var(--primary);border-color:var(--primary)}
.sw[aria-checked="true"]::after{left:22px;width:24px;height:24px;background:var(--on-primary)}
.mem{background:var(--sc-lowest);border:1px solid var(--sc-high);border-radius:var(--shape-l);padding:14px 16px;margin-bottom:8px;transition:opacity .4s var(--ease)}
.mem[hidden]{display:none}
.mem .k{font-size:14px;line-height:20px;font-weight:500;color:var(--on-surface-variant)}
.mem p{margin:2px 0 4px;font-size:16px;line-height:24px}
.mem .src{font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.mem .acts{display:flex;gap:4px;margin:6px -8px -6px}
.mem .acts .btn{min-height:40px;padding:0 12px;font-size:14px}
.mem .edit{display:none;margin-top:8px}
.mem.editing .edit{display:block}
.mem.editing p{display:none}

/* sent */
.sent .row{align-items:flex-start;min-height:0;padding:14px 16px}
.row .full{display:none;font-size:15px;line-height:22px;margin-top:4px;color:var(--on-surface);white-space:normal}
.row[aria-expanded="true"] .full{display:block}
.row[aria-expanded="true"] .sn{display:none}

/* ===== v4: three visual directions. All tokens live here (tokens_source). ===== */
.app{font-family:var(--font);color:var(--on-surface);--r-btn:999px;--r-chip:8px;--av-r:50%;--sh:none;--bd:1px}
.app .large h1,.app .done h2,.app .phero h2,.app .topbar .t b{font-family:var(--font-d)}
.app .btn{border-radius:var(--r-btn)}
.app .chip{border-radius:var(--r-chip)}
.app .av{border-radius:var(--av-r)}
.large{position:relative}
.deco{position:absolute;right:8px;top:2px;width:104px;height:84px;display:none;pointer-events:none}
.app[data-theme="1"] .d1{display:block}
.gcard{background:var(--sc-lowest);border-radius:var(--shape-l);padding:16px;margin-bottom:10px}
.gcard .gh{display:flex;align-items:center;gap:12px}
.gcard .gh b{display:block;font-size:17px;line-height:24px;font-weight:600}
.gcard .gsum{margin:10px 0 0;font-size:16px;line-height:24px}
.gcard .gbtn{margin-top:12px;min-height:44px;font-size:14px}
.phero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:4px 0 16px}
.phero h2{margin:8px 0 0;font-size:32px;line-height:38px;font-weight:400}
.phero p{margin:0;color:var(--on-surface-variant);font-size:14px;display:flex;gap:6px;align-items:center}
.quiet,.ch,.rt,.msg time,.mem .k,.mem .src,.verline,.draftlbl,.qcard .lbl,.navbar button{font-size:14px!important;line-height:20px!important}

/* ---------- 1 · Douce : abricot, prune, sauge ---------- */
.app[data-theme="1"]{
  --font:"DM Sans",system-ui,sans-serif;--font-d:"Young Serif",Georgia,serif;
  --surface:#FFF7F0;--sc-lowest:#FFFFFF;--sc-low:#FFF0E6;--sc:#FBE7DA;--sc-high:#F6DCCB;--sc-highest:#EFD0BC;
  --on-surface:#3A2530;--on-surface-variant:#6B4F5B;--outline:#9A7C86;--outline-variant:#EBCFC0;
  --primary:#B8472F;--on-primary:#FFFFFF;--primary-container:#E9DAF3;--on-primary-container:#4B2D5E;
  --secondary:#6A2C1B;--secondary-container:#FFDDC9;--on-secondary-container:#6A2C1B;
  --tertiary:#2F4A2A;--tertiary-container:#D9E8CF;--on-tertiary-container:#2F4A2A;
  --inverse-surface:#3A2530;--inverse-on-surface:#FFF0E6;--inverse-primary:#FFB59E;
  --shape-xs:8px;--shape-s:12px;--shape-m:18px;--shape-l:26px;--shape-xl:32px;
  --r-chip:999px;--sh:0 1px 0 rgba(150,70,40,.07),0 12px 24px -14px rgba(150,70,40,.35)}
.app[data-theme="1"] .av{--av-r:46% 54% 52% 48% / 54% 46% 54% 46%}
.app[data-theme="1"] .av.t{--av-r:54% 46% 48% 52% / 46% 54% 46% 54%}
.app[data-theme="1"] .av.p{--av-r:50% 50% 42% 58% / 56% 44% 56% 44%}
.app[data-theme="1"] .large h1{font-size:38px;line-height:44px;font-weight:400;letter-spacing:-.01em}
.app[data-theme="1"] .large p{font-size:16px;color:var(--on-surface-variant)}
.app[data-theme="1"] .topbar .t b{font-size:24px;line-height:30px}
.app[data-theme="1"] .list{border:0;background:transparent;overflow:visible;display:flex;flex-direction:column;gap:10px}
.app[data-theme="1"] .list .row{background:#fff;border:0;border-radius:26px;box-shadow:var(--sh);padding:14px 16px}
.app[data-theme="1"] .row .nm{font-size:17px;font-weight:700}
.app[data-theme="1"] .row .rt span:first-child{font-weight:700;color:var(--primary)}
.app[data-theme="1"] .gcard{background:var(--tertiary-container);box-shadow:none}
.app[data-theme="1"] .gcard .av{background:#fff}
.app[data-theme="1"] .gcard .gbtn{background:#fff;color:var(--tertiary)}
.app[data-theme="1"] .sec{font-family:var(--font-d);font-size:19px;line-height:26px;font-weight:400;color:var(--on-surface);margin:24px 4px 10px}
.app[data-theme="1"] .btn.fill{box-shadow:0 8px 16px -8px rgba(184,71,47,.7)}
.app[data-theme="1"] .btn.tonal{background:var(--secondary-container)}
.app[data-theme="1"] .btn.outl{border:1.5px solid var(--primary)}
.app[data-theme="1"] .draftcard,.app[data-theme="1"] .qcard,.app[data-theme="1"] .card.out{border:0;box-shadow:var(--sh);border-radius:30px}
.app[data-theme="1"] .draftcard .who,.app[data-theme="1"] .qcard .lbl{color:var(--primary);font-weight:700}
.app[data-theme="1"] .drafttext{font-size:18px;line-height:28px}
.app[data-theme="1"] .chip{background:var(--secondary-container);border-color:transparent;color:var(--on-secondary-container);min-height:44px;padding:0 16px}
.app[data-theme="1"] .chip[aria-pressed="true"]{background:var(--primary);color:#fff}
.app[data-theme="1"] .msg.in{background:#fff;box-shadow:var(--sh)}
.app[data-theme="1"] .msg.me{background:var(--secondary-container)}
.app[data-theme="1"] .msg.draft{border:2px dashed var(--primary)}
.app[data-theme="1"] .quote{background:#fff}
.app[data-theme="1"] .mlist,.app[data-theme="1"] .mem{border:0;box-shadow:var(--sh);border-radius:26px}
.app[data-theme="1"] .mlist .mem{box-shadow:none;border-radius:0;border-top:1px solid var(--sc)}
.app[data-theme="1"] .mlist .mem:first-child{border-top:0}
.app[data-theme="1"] .navbar{background:#fff;border-radius:28px 28px 0 0;box-shadow:0 -8px 24px -16px rgba(150,70,40,.4)}
.app[data-theme="1"] .navbar .pill{border-radius:999px}
.app[data-theme="1"] .field{border-color:var(--outline);border-radius:var(--shape-m);background:#fff}
.app[data-theme="1"] .field label{background:var(--surface)}
.app[data-theme="1"] .snack{border-radius:20px}
.app[data-theme="1"] .actions{border-top:0;background:linear-gradient(to top,var(--surface) 82%,rgba(255,247,240,0))}
.app[data-theme="1"] .phero .av.xl{width:96px;height:96px;font-size:40px;font-family:var(--font-d);background:var(--secondary-container)}
.app[data-theme="1"] .sw[aria-checked="true"]{background:var(--primary);border-color:var(--primary)}


/* ---------- v6: the Owner's decisions of 2026-10-24, drawn with v5's Douce tokens above (no new colour, font or radius) ---------- */
/* the thread: day lines, her messages on the right (.msg.me, already in v5), older messages that load as she scrolls up */
.day{align-self:center;font-size:14px;line-height:20px;color:var(--on-surface-variant);margin:12px 0 2px}
.thread .day:first-child{margin-top:4px}
.older{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.older .spin{width:16px;height:16px}
.thread .page{display:flex;flex-direction:column;gap:6px}
.start{align-self:center;margin:8px 0 0}
/* e-mails: long ones cut after a few lines, « Lire tout le mail » opens the whole mail */
.msg.mail{max-width:92%}
.msg.mail .mt p{margin:0 0 8px}
.msg.mail .mt p:last-child{margin-bottom:0}
.msg.mail .mt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.msg.mail.open .mt{display:block;-webkit-line-clamp:unset}
.msg.mail.short .more{display:none}
.msg.mail .more{display:block;min-height:44px;padding:0;font-size:14px}
.msg.mail .more + time{margin-top:0}
/* « Rien à répondre »: a quiet, closed line at the bottom of Today */
.nada{margin:20px 0 8px;border-top:1px solid var(--outline-variant);padding-top:4px}
.nadah{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;border:0;background:transparent;padding:0 4px;text-align:left;font-size:15px;line-height:22px;font-weight:500;color:var(--on-surface-variant);border-radius:var(--shape-s)}
.nadah:hover{background:var(--sc-low)}
.nadah .n{font-weight:400}
.nadah .ico{margin-left:auto;transform:rotate(90deg);transition:transform .2s var(--ease)}
.nada[aria-expanded="true"] .nadah .ico{transform:rotate(-90deg)}
.nadab{display:none}
.nada[aria-expanded="true"] .nadab{display:block}
.nadal{margin:2px 4px 10px}
.app[data-theme="1"] .nada .list .row{background:var(--sc-low);box-shadow:none;min-height:64px}
.app[data-theme="1"] .nada .row .nm{font-weight:500}
.app[data-theme="1"] .nada .row .rt span:first-child{font-weight:400;color:var(--on-surface-variant)}
.nadacard{margin-top:12px}
.app[data-theme="1"] .nadacard{background:var(--sc-lowest);box-shadow:var(--sh);border-radius:30px}
/* the feedback entry: the same quiet round icon button as the topbar's, top right of every screen */
.fbbtn.abs{position:absolute;top:4px;right:-12px;z-index:3}
.app[data-theme="1"] .scr.hasfb .large{padding-right:56px}
.app[data-theme="1"] .scr.hasfb .large .deco{right:52px;top:-6px;width:92px;height:74px}
/* « Un souci ? Une idée ? »: a sheet over the screen she was on */
.fb{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column}
.fbscrim{position:absolute;inset:0;background:rgba(58,37,48,.38)}
.fbsheet{position:relative;margin-top:28px;flex:1;min-height:0;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--shape-xl) var(--shape-xl) 0 0;box-shadow:0 -8px 24px -16px rgba(150,70,40,.4)}
.fbtop{display:flex;align-items:center;gap:4px;min-height:60px;padding:6px 4px 2px;flex:none}
.fbtop b{font-family:var(--font-d);font-weight:400;font-size:22px;line-height:28px;padding-left:4px}
.fbbody{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 16px}
.fbbody .chips{display:flex;gap:8px}
.fbcount{text-align:right;margin:4px 4px 12px}
.fbcap{margin-bottom:12px}
.fbcap.on{display:flex;gap:14px;align-items:flex-start}
.capbox{position:relative;width:112px;aspect-ratio:412/860;border-radius:var(--shape-s);overflow:hidden;border:1px solid var(--outline-variant);background:var(--sc-lowest);flex:none}
.capbox img,.capbox canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.capside{display:flex;flex-direction:column;align-items:flex-start;font-size:15px;line-height:22px}
.capside .linkbtn{min-height:44px;padding:0;font-size:15px}
.fbwhat{background:var(--sc-low);border-radius:var(--shape-m);padding:12px 16px;font-size:15px;line-height:22px}
.fbwhat .k{margin:0 0 4px;font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.fbwhat ul{margin:0;padding-left:18px}
.fberr{margin-top:12px;border:1.5px solid var(--primary);border-radius:var(--shape-m);padding:12px 16px;background:var(--sc-lowest);font-size:15px;line-height:22px}
.fberr p{margin:2px 0 0}
.fbact{flex:none;padding:12px 16px 16px}
.fbact .btn .spin{width:16px;height:16px;border-color:rgba(255,255,255,.45);border-top-color:#fff}
.btn[disabled]{opacity:.45;cursor:default}
.app[data-theme="1"] .btn.fill[disabled]{box-shadow:none}
.chip[disabled]{opacity:.55;cursor:default}
.fbdraw{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 16px 16px}
.drawwrap{flex:1;min-height:0;display:flex;justify-content:center}
.capbox.big{width:auto;height:100%;max-width:100%}
.capbox.big canvas{touch-action:none;cursor:crosshair}
.drawrow{display:flex;justify-content:flex-end;margin:4px 0 8px}
.fbdone{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 24px 48px}
.fbdone .okc{width:64px;height:64px;border-radius:50%;background:var(--tertiary-container);color:var(--tertiary);display:flex;align-items:center;justify-content:center}
.fbdone .okc .ico{width:32px;height:32px}
.fbdone h2{font-family:var(--font-d);font-weight:400;font-size:32px;line-height:38px;margin:16px 0 4px}
.fbdone p{margin:0;font-size:16px;line-height:24px;color:var(--on-surface-variant)}
.fbtop.nobtn b{padding-left:16px}
.fbact .fberr{margin:0 0 12px}

/* ---------- the real frame: the whole screen ---------- */
html,body{height:100%;overflow:hidden;background:#FFF7F0}
.app{position:fixed;inset:0;width:auto;height:auto;border:0;border-radius:0}
[hidden]{display:none!important}

/* v7 (PLM #99787, approved 2026-10-24): one view per person across her channels. Rules as drawn in prototype v7. */
.thread.multi .msg time{display:flex;align-items:center;gap:6px}
.msg time .mch{width:14px;height:14px;opacity:.85}
.chmark{align-self:stretch;display:flex;align-items:center;gap:8px;margin:8px 12px 2px;color:var(--on-surface-variant)}
.chmark::before,.chmark::after{content:"";flex:1;height:1px;background:var(--outline-variant)}
.chmark .ico{width:16px;height:16px}
.chmark[hidden]{display:none}
.msg.mail .mt p.subj7{font-weight:500;margin-bottom:6px}
.topbar .t .chset{gap:4px}
.topbar .t .chset .ico[hidden]{display:none}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-8px -6px 6px 0}
.chpick{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px 0 12px;border:1.5px solid var(--outline-variant);border-radius:var(--shape-s);background:var(--sc-lowest);font:inherit;font-size:14px;line-height:20px;font-weight:500;color:var(--on-surface);cursor:pointer}
.chpick:hover{background:var(--sc-low)}
.chpick:focus-visible,.chopt:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.chpick .chev{transform:rotate(90deg);color:var(--on-surface-variant)}
.subj{font-size:15px;line-height:22px;padding:0 0 10px;margin:0 0 10px;border-bottom:1px solid var(--outline-variant)}
.subj[hidden]{display:none}
.subj .k{color:var(--on-surface-variant);margin-right:6px}
.chs{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;justify-content:flex-end}
.chs[hidden]{display:none}
.chscrim{position:absolute;inset:0;background:rgba(58,37,48,.38)}
.chsheet{position:relative;background:var(--surface);border-radius:var(--shape-xl) var(--shape-xl) 0 0;box-shadow:0 -8px 24px -16px rgba(150,70,40,.4);padding:6px 8px 16px}
.chstop{display:flex;align-items:center;gap:4px;min-height:60px;padding:0 4px 0 12px}
.chstop b{flex:1;font-family:var(--font-d);font-weight:400;font-size:22px;line-height:28px}
.chopt{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;border:0;background:transparent;text-align:left;padding:8px 12px;border-radius:var(--shape-m);font:inherit;color:var(--on-surface);cursor:pointer}
.chopt[hidden]{display:none}
.chopt:hover{background:var(--sc-low)}
.chopt[aria-checked="true"]{background:var(--sc-low)}
.chopt .chi{width:40px;height:40px;border-radius:50%;background:var(--sc-lowest);box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;flex:none;color:var(--on-surface-variant)}
.chopt .mid{flex:1;min-width:0}
.chopt b{display:block;font-size:16px;line-height:24px;font-weight:500}
.chopt .mid span{display:block;font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.chopt .ok{color:var(--primary);visibility:hidden}
.chopt[aria-checked="true"] .ok{visibility:visible}
.chsl{margin:8px 12px 0}
.chsheet:focus{outline:none}
.phero p.chs7{flex-direction:column;gap:4px}
.phero p.chs7 .icons{display:flex;gap:6px}
.phero p.chs7 [hidden]{display:none}
.pthread{margin:0 0 4px}
.joinl{margin:10px 4px 0}
.mlist .mem[data-joined] p{margin-top:0}

/* « Ne pas répondre » from Today's list (PLM #99824): the row slides left over a calm background
   that says what the swipe does (Android's swipe-to-archive); the browser keeps vertical scrolling. */
.swp{position:relative;transition:opacity .4s var(--ease)}
.swp .row{position:relative;z-index:1;touch-action:pan-y pinch-zoom;transition:transform .22s var(--ease),opacity .4s var(--ease)}
.swp.moving .row{transition:none}
.swp-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:0 24px;border-radius:26px;background:var(--secondary-container);color:var(--on-secondary-container);font-size:15px;line-height:22px;font-weight:500;opacity:0;transition:opacity .15s var(--ease)}
.swp.moving .swp-bg,.swp.leaving .swp-bg{opacity:1}
.swp.armed .swp-bg{font-weight:700}
.swp.closing{overflow:hidden;opacity:0;margin-bottom:-10px;transition:height .2s var(--ease),margin .2s var(--ease),opacity .2s var(--ease)}
.swp-a11y{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.swp-a11y:focus-visible{z-index:2;width:auto;height:auto;margin:0;clip:auto;overflow:visible;right:12px;top:50%;transform:translateY(-50%);min-height:44px;padding:0 16px;border-radius:999px;background:var(--secondary-container);color:var(--on-secondary-container);font-size:14px;font-weight:500}
/* ---------- PLM #99831 v1: two small additions, drawn with #99787 v7's Douce tokens (no new colour, font or radius) ---------- */
/* « Tu veux dire pourquoi ? »: the line that follows « Ne pas répondre », light, with three one-tap reasons; it goes away on its own */
.why{position:absolute;left:12px;right:12px;bottom:92px;z-index:6;background:var(--sc-lowest);border:1px solid var(--outline-variant);border-radius:var(--shape-l);box-shadow:var(--sh),0 -8px 24px -16px rgba(150,70,40,.4);padding:4px 8px 14px 16px;animation:fade .28s var(--ease)}
.why.mid{bottom:144px}
.why .wt{display:flex;align-items:center;gap:8px;min-height:44px;margin:0}
.why .wt span{flex:1;font-size:15px;line-height:22px;font-weight:500;color:var(--on-surface)}
.why .wt .linkbtn{min-height:44px;padding:0 8px;font-size:15px}
.why .wq{margin:0 0 8px;font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.why .chips{gap:8px}
.app[data-theme="1"] .why .chip{min-height:44px;padding:0 14px;font-size:14px}
/* « Qui est proche ? » on Today: a calm card after the people who wait, shown once */
.kcard{background:var(--sc-lowest);border-radius:var(--shape-l);box-shadow:var(--sh);padding:16px;margin:20px 0 0;transition:opacity .4s var(--ease)}
.kcard h2{font-family:var(--font-d);font-weight:400;font-size:19px;line-height:26px;margin:10px 0 4px;color:var(--on-surface)}
.kcard p{margin:0;font-size:15px;line-height:22px;color:var(--on-surface-variant)}
.kcard .kact{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.kstack{display:flex}
.kstack .av{width:32px;height:32px;font-size:14px;box-shadow:0 0 0 2px var(--sc-lowest)}
.kstack .av + .av{margin-left:-8px}
/* the « Qui est proche ? » screen: four people at a time, Claude's guess already chosen */
.kintro{margin:4px 4px 12px}
.kp{padding:14px 16px 16px;border-top:1px solid var(--sc)}
.kp:first-child{border-top:0}
.kph{display:flex;align-items:center;gap:12px}
.kph .mid{flex:1;min-width:0}
.kph b{display:block;font-size:17px;line-height:24px;font-weight:700}
.kph .mid span{display:block;font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.kchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.app[data-theme="1"] .kchips .chip{min-height:44px;padding:0 14px;font-size:14px;background:var(--sc-lowest);border:1.5px solid var(--outline-variant);color:var(--on-surface-variant)}
.app[data-theme="1"] .kchips .chip:hover{background:var(--sc-low)}
.app[data-theme="1"] .kchips .chip[aria-checked="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.kchips .chip .ok{display:none;width:16px;height:16px}
.kchips .chip[aria-checked="true"] .ok{display:inline-block}
.kfoot{margin:14px 4px 0}
.kdone .okc{width:64px;height:64px;border-radius:50%;background:var(--tertiary-container);color:var(--tertiary);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.kdone .okc .ico{width:32px;height:32px}
.kdone p{margin:0}
/* Personnes: the way back in */
.kentry{margin:8px 0 16px}
.app[data-theme="1"] .kentry .row{background:var(--sc-lowest)}
.kentry .kic{background:var(--tertiary-container);color:var(--on-tertiary-container)}
.kentry .kchev{color:var(--on-surface-variant);flex:none}
@media (prefers-reduced-motion:reduce){.swp .row,.swp.closing{transition:none}}

/* ===== v8 (PLM #99787, prototype v8 approved 2026-10-24): beyond answers. As drawn; only the Douce variables. ===== */
/* Today: « Les voir une par une » and « Écrire » share one row */
.toprow{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.toprow .btn{margin:0}
/* a group card in Today: the whole card opens the group */
.gcard8{display:block;width:100%;text-align:left;border:0;font:inherit;color:var(--on-surface);background:var(--tertiary-container);border-radius:26px;padding:14px 16px;transition:opacity .4s var(--ease)}
.gcard8[hidden]{display:none}
.gcard8:hover{filter:brightness(.98)}
.gcard8 .gh{display:flex;align-items:center;gap:12px}
.gcard8 .gh .av{background:#fff;color:var(--tertiary)}
.gcard8 .gh .mid{flex:1;min-width:0}
.gcard8 .gh b{display:block;font-size:17px;line-height:24px;font-weight:700}
.gcard8 .gh .ch{font-size:14px;line-height:20px}
.gcard8 .gh .when{flex:none;align-self:flex-start;font-size:14px;line-height:20px;font-weight:700;color:var(--primary);margin-top:2px}
.gcard8 .gsum{margin:8px 0 0;font-size:15px;line-height:22px}
.askline{display:block;margin-top:10px;background:#fff;border-radius:18px;padding:10px 14px;font-size:15px;line-height:22px;color:var(--on-surface)}
.askline b{font-weight:700;color:var(--primary)}
.app[data-theme="1"] .list .gcard8{box-shadow:none}
/* « Tu pourrais écrire à »: quieter than who is waiting */
.nsub{margin:-6px 4px 10px}
.nrow{position:relative;transition:opacity .4s var(--ease)}
.nrow[hidden]{display:none}
.nrow .row{padding-right:56px}
.nrow .nx{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px}
.app[data-theme="1"] .nlist .row{background:var(--sc-low);box-shadow:none;align-items:flex-start;min-height:0;padding-right:56px}
.app[data-theme="1"] .nlist .row .nm{font-weight:500}
.nlist .row .sn{white-space:normal;overflow:visible}
/* « Écrire à… » */
.srch{display:flex;align-items:center;gap:10px;border-radius:999px!important;padding:10px 16px!important;margin:4px 0 4px}
.srch .ico{color:var(--on-surface-variant)}
.srch input{font-size:17px!important;line-height:26px!important}
.srch input::-webkit-search-cancel-button{display:none}
.wempty[hidden]{display:none}
.wstart .field{margin-top:10px}
.wstart .quiet{margin:8px 2px 0}
.intent{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:0 0 8px;font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.intent[hidden]{display:none}
.intent q{quotes:"«\00a0" "\00a0»";color:var(--on-surface)}
.actions .one{display:flex;justify-content:center;margin-top:4px}
/* the person page: « Écrire » next to « Voir vos messages » */
.pbtns{display:flex;gap:8px;margin:0 0 4px}
.pbtns .btn{flex:1;min-width:0;padding:0 12px}
/* why Claude proposes it */
.why8{background:var(--sc-low);border-radius:26px;padding:14px 16px;margin-top:12px}
.why8 .who{font-size:14px;line-height:20px;font-weight:700;color:var(--on-surface-variant)}
.why8 p{margin:2px 0 2px;font-size:16px;line-height:24px}
.why8 .src{font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.why8 .linkbtn{margin-top:4px;min-height:44px}
/* a group's thread: who wrote, and what she missed on top */
.snd{display:block;font-size:14px;line-height:20px;font-weight:700;color:var(--on-surface-variant);margin-bottom:1px}
.app[data-theme="1"] .msg.in.tome{box-shadow:inset 3px 0 0 var(--primary),var(--sh)}
.missed{background:var(--tertiary-container);border-radius:26px;padding:14px 16px;margin:4px 0 6px}
.missed .k{display:block;font-size:14px;line-height:20px;font-weight:700;color:var(--tertiary)}
.missed p{margin:4px 0 0;font-size:16px;line-height:24px}
.gtop .t span .ico{flex:none}
/* Groupes */
.gprop{margin-top:4px}
.gprop[hidden]{display:none}
.gprop .gph{padding:16px 16px 6px}
.gprop .gph b{display:block;font-family:var(--font-d);font-weight:400;font-size:19px;line-height:26px}
.gprop .gph p{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.gp .gpr{display:flex;align-items:center;gap:12px}
.gp .gpr b{display:block;font-size:16px;line-height:24px;font-weight:700}
.gp .acts{margin:8px -8px -6px 44px}
.gp .acts .btn.tonal{min-height:44px;padding:0 16px}
.app[data-theme="1"] .gprop{background:#fff;box-shadow:var(--sh);border-radius:30px;overflow:hidden}
.app[data-theme="1"] .gprop .mlist{box-shadow:none;border-radius:0;border-top:1px solid var(--sc)}
.glist .row .rt .ico{width:16px;height:16px}
.app[data-theme="1"] .glist .row .rt span:first-child{font-weight:400;color:var(--on-surface-variant)}
.gfoot{margin:16px 4px 0}
/* the group's page */
.phero .av.xl .ico{width:40px;height:40px}
.mrow{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--sc);font-size:16px;line-height:24px}
.mrow:first-child{border-top:0}
.mrow .av{width:36px;height:36px;font-size:15px}
.mrow .mid{flex:1}
.ginfo{margin:10px 4px 0}
/* Android: one notification */
.shnote{margin:4px 8px 0}
/* « Tes retours » */
.fbl{display:block;margin:12px auto 0}
.fbi{background:#fff;box-shadow:var(--sh);border-radius:26px;padding:14px 16px;margin-bottom:10px}
.fbi .k{font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.fbi p{margin:2px 0 6px;font-size:16px;line-height:24px}
.fbi .st{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.stp{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;font-size:14px;line-height:20px;font-weight:700}
.stp.ok{background:var(--tertiary-container);color:var(--tertiary)}
.stp.wip{background:var(--secondary-container);color:var(--on-secondary-container)}
.stp.got{background:var(--sc-high);color:var(--on-surface)}
.stp.later{background:var(--primary-container);color:var(--on-primary-container)}
/* « Merci, c'est corrigé »: once, when a fix goes live */
.fixed8{display:flex;gap:12px;align-items:flex-start;background:#fff;box-shadow:var(--sh);border-radius:26px;padding:14px 8px 8px 16px;margin:4px 0 14px;transition:opacity .4s var(--ease)}
.fixed8[hidden]{display:none}
.fixed8 .okc{width:40px;height:40px;border-radius:50%;background:var(--tertiary-container);color:var(--tertiary);display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px}
.fixed8 .mid{flex:1;min-width:0}
.fixed8 b{display:block;font-family:var(--font-d);font-weight:400;font-size:19px;line-height:26px}
.fixed8 p{margin:2px 0 0;font-size:15px;line-height:22px;color:var(--on-surface-variant)}
.fixed8 .btn{align-self:flex-end;min-height:44px;padding:0 16px}
.app [hidden]{display:none!important}

/* PLM #99836 v1 (prototype approved by the Owner 2026-10-24) · names from her phone, and « Renommer » (same Douce tokens as #99787 v8) */
.phero .nmsrc{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:6px}
.phero .nmsrc[hidden]{display:none}
.phero .nmsrc .nmline{margin:0;display:block;font-size:14px;line-height:20px;color:var(--on-surface-variant)}
.phero .nmsrc .nmacts{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.phero .nmsrc .nmacts .btn{min-height:44px;padding:0 14px;font-size:15px}
.phero .nmsrc .nmacts .btn[hidden]{display:none}
.rn .rnfield{margin:10px 12px 0}
.rn .rnl{margin:12px 12px 0}
.rn .rnl + .rnl{margin-top:6px}
.rn .rnacts{margin:16px 12px 0;display:flex}
.rn .rnacts .btn{flex:1}
.rn .field input::selection{background:var(--secondary-container)}

/* ===== PLM #99842 v1 (prototype approved by the Owner 2026-10-24): her tablet, in the same app. Only the Douce
   variables above: no new colour, font, radius or shadow. The phone does not change: every rule here waits for
   .app[data-lay], which app.js sets only on a screen at least 600 px wide and 500 px high (« col », in height: one
   column of 528 px and the rail) and at least 840 px wide (« two », in width: the list, and beside it what it opened).
   L = the lists (#today, #people, #groups, #sent); D = every other screen but the sign-in ones (#entree, #notifs). ===== */
.trail{display:none}
/* the side rail: the phone's bottom bar, turned on its side (same buttons, same pill, same white) */
.app[data-lay] .trail{position:absolute;left:0;top:0;bottom:0;width:96px;z-index:4;display:flex;flex-direction:column;justify-content:center;gap:12px;
  background:#fff;border-radius:0 28px 28px 0;box-shadow:8px 0 24px -16px rgba(150,70,40,.4)}
.app[data-lay] .trail button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:0;
  font-size:14px;line-height:20px;font-weight:500;color:var(--on-surface-variant)}
.app[data-lay] .trail .pill{width:56px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.app[data-lay] .trail button[aria-current="page"]{color:var(--on-surface)}
.app[data-lay] .trail button[aria-current="page"] .pill{background:var(--secondary-container);color:var(--on-secondary-container)}
.app[data-lay] .trail button:hover .pill{background:var(--sc-high)}
.app[data-lay] .navbar{display:none}
/* the panes: in height every screen right of the rail; in width the list (400 px), then what it opened on a slightly darker panel */
.app[data-lay] .scr{--pad:16px}
.app[data-lay="col"] .scr:not(#entree,#notifs){left:96px;--pad:max(16px,calc((100% - 528px) / 2 + 16px))}
.app[data-lay="two"] :is(#today,#people,#groups,#sent){left:96px;right:auto;width:400px}
.app[data-lay="two"] .scr:not(#today,#people,#groups,#sent,#entree,#notifs){left:496px;right:12px;top:12px;bottom:12px;border-radius:32px;background:var(--sc-low);overflow:hidden;
  --pad:max(16px,calc((100% - 528px) / 2 + 16px))}
/* the reading column of 528 px: the lists in height, and every screen they open */
.app[data-lay="col"] :is(#today,#people,#groups,#sent) .body{padding-left:var(--pad);padding-right:var(--pad)}
.app[data-lay] .scr:not(#today,#people,#groups,#sent,#entree,#notifs) :is(.body,.qhead,.actions){padding-left:var(--pad);padding-right:var(--pad)}
.app[data-lay] .scr:not(#today,#people,#groups,#sent,#entree,#notifs) .topbar{padding-left:calc(var(--pad) - 12px);padding-right:calc(var(--pad) - 12px)}
.app[data-lay] .scr:not(#today,#people,#groups,#sent,#entree,#notifs) .deck{padding-left:var(--pad);padding-right:calc(var(--pad) + 16px)}
.app[data-lay] :is(#entree,#notifs) .body{padding-left:max(16px,calc((100% - 528px) / 2 + 16px));padding-right:max(16px,calc((100% - 528px) / 2 + 16px))}
/* in width: no arrow back (the list stays beside it), the feedback button only on the open screen */
.app[data-lay="two"] .scr:not(#today,#people,#groups,#sent,#entree,#notifs) [data-back][aria-label="Retour"]{display:none}
.app[data-lay="two"] .scr:not(#today,#people,#groups,#sent,#entree,#notifs) .topbar .t{padding-left:12px}
.app[data-lay="two"] :is(#today,#people,#groups,#sent) .fbbtn{display:none}
.app[data-theme="1"][data-lay="two"] :is(#today,#people,#groups,#sent).hasfb .large{padding-right:16px}
.app[data-theme="1"][data-lay="two"] :is(#today,#people,#groups,#sent).hasfb .large .deco{right:4px}
.app[data-theme="1"][data-lay="two"] .scr:not(#today,#people,#groups,#sent,#entree,#notifs) .actions{background:linear-gradient(to top,var(--sc-low) 82%,rgba(255,240,230,0))}
.app[data-theme="1"][data-lay="two"] .scr:not(#today,#people,#groups,#sent,#entree,#notifs) .field label{background:var(--sc-low)}
.app[data-theme="1"][data-lay="col"] :is(#today,#people,#groups,#sent) .large h1{max-width:300px}
/* where she is in the list: the open row takes the colour of the rail's current tab */
.app[data-theme="1"][data-lay="two"] :is(#today,#people,#groups,#sent) :is(.list,.nlist) .row.sel{background:var(--secondary-container);box-shadow:none}
.app[data-lay="two"] :is(#today,#people,#groups,#sent) .gcard8.sel{box-shadow:inset 0 0 0 2px var(--tertiary)!important}
/* the bottom lines of a pane (no bottom bar on a tablet); over the open screen, just above its buttons */
.app[data-lay] :is(#today,#people,#groups,#sent) :is(.snack,.why){bottom:16px;left:12px;right:12px}
.app[data-lay="col"] :is(#today,#people,#groups,#sent) :is(.snack,.why){left:calc(var(--pad) - 4px);right:calc(var(--pad) - 4px)}
.app[data-lay] .scr:not(#today,#people,#groups,#sent,#entree,#notifs) :is(.snack,.why){left:calc(var(--pad) - 4px);right:calc(var(--pad) - 4px)}
.app[data-lay] :is(#draft-card,#edit,#edit8,#ask,#proches,#batch) :is(.snack,.why){bottom:148px}
/* sheets and dialogs open over the open screen, at the width of its column; the rest of the screen dims */
.app[data-lay] :is(.chs,.fb){left:96px}
.app[data-lay="two"] :is(.chs,.fb){left:496px;right:12px;top:12px;bottom:12px;border-radius:32px;overflow:hidden}
.app[data-lay] .chs{align-items:center}
.app[data-lay] .chsheet{width:min(100%,560px)}
.app[data-lay] .fb{align-items:center}
.app[data-lay] .fbsheet{width:min(100%,560px);margin-top:24px}
.app[data-lay]:has(> .chs:not([hidden]), > .fb:not([hidden])) .trail::after{content:"";position:absolute;inset:0;z-index:30;background:rgba(58,37,48,.38);border-radius:0 28px 28px 0}
.app[data-lay="two"]:has(> .chs:not([hidden]), > .fb:not([hidden])) :is(#today,#people,#groups,#sent)::after{content:"";position:absolute;inset:0;z-index:30;background:rgba(58,37,48,.38)}
/* a calm panel when nobody waits */
.dempty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.dempty h2{font-family:var(--font-d);font-weight:400;font-size:24px;line-height:32px;margin:12px 0 4px}
.dempty .okc{width:64px;height:64px;border-radius:50%;background:var(--tertiary-container);color:var(--tertiary);display:flex;align-items:center;justify-content:center}
.dempty .okc .ico{width:32px;height:32px}
/* a sent message in its conversation (Envoyés, in width) */
.msg.me.just{box-shadow:inset 0 0 0 2px var(--primary)}
.sentl{align-self:flex-end;font-size:14px;line-height:20px;color:var(--on-surface-variant);margin:2px 4px 0}

/* ===== PLM #99865 v1 (prototype approved by the Owner 2026-10-25, option A): a message that waits for its relay, on a box
   whose chats leave through send relays; his channels; « À toi de décider ». As drawn (v1.html), only the Douce variables
   above. Nothing here is drawn on a box without relays, and the pill only where the person decides (COMMS_IDEAS_DECIDED_BY=self). ===== */
/* « Pas encore partis » (Today, Envoyés): the clock, in the accent as the first of a row's right side; a calm one beside a
   channel whose relay is off (« Répondre à … par ») */
.sec.wsec{margin-bottom:4px}
.wclock{display:inline-flex;align-items:center;color:var(--on-surface-variant)}
.chopt .wt{display:inline-flex;color:var(--on-surface-variant);margin-left:auto}
.chopt .wt + .ok{margin-left:0}
.chsl .ico{vertical-align:-3px;margin-right:6px}
/* her message that waits: dashed, its clock by its time; under it what happens, and « Ne pas l'envoyer » */
.app[data-theme="1"] .msg.me.wait{color:var(--on-surface);outline:2px dashed var(--outline);outline-offset:-2px}
.thread>.older[hidden]+.day{margin-top:4px}
.msg.me.wait time{display:flex;align-items:center;gap:4px;margin-top:2px}
.waitbox{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin:4px 0 0;max-width:92%}
.waitbox .waitl{margin:0;font-size:14px;line-height:20px;color:var(--on-surface-variant);text-align:right}
.waitbox .btn.text{min-height:44px;padding:0 8px}
/* gone through its relay: « ✓ Parti sur WhatsApp à 17:52 » */
.sentl.went .ico{vertical-align:-3px;color:var(--tertiary)}
/* Envoyés: what has not left yet, on top */
.sentw{margin:0 4px 10px}
/* « Tes retours »: « À toi de décider », outlined in the accent */
.stp.decide{background:transparent;color:var(--primary);box-shadow:inset 0 0 0 2px var(--primary)}