/*
 * La boîte WhatsApp habillée comme WhatsApp Web — maquette v4 option B (tasks/nbt-crm/mockups/whatsapp-crm-v4-b.html),
 * choisie par Karim le 5 oct (PLAN-HABILLAGE-WHATSAPP-WEB). Valeurs reprises de la maquette, elle-même relevée
 * sur la capture WhatsApp Web de Karim (convertie en sRGB). Préfixe nbt-waw- ; les écrans de Paramètres gardent nbt-wa-.
 */
@import url('../fonts/roboto/index.css');

:root {
  --waw-wall: #F6F1EB; --waw-text: #0A0A0A; --waw-sub: #666; --waw-icon: #1F1F1F; --waw-line: #E9E5E1;
  --waw-search: #F6F5F4; --waw-chip-on: #F2EEEC; --waw-chip-line: #D6D2CE; --waw-hover: #F6F5F4; --waw-active: #F0EDEA;
  --waw-green: #1DAA61; --waw-green-h: #18924F; --waw-link: #1D8755; --waw-out: #D9FDD3; --waw-out-in: #D1F4CC; --waw-in: #fff; --waw-in-in: #F5F5F5;
  --waw-blue: #027EB5; --waw-read: #53BDEB; --waw-sys: #FFF5C4; --waw-sys-t: #4F4B3A; --waw-red: #EA0038; --waw-card: #F2EEEC;
  --waw-font: Roboto, "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif;
  --waw-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --waw-doodle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22320%22%20viewBox%3D%220%200%20320%20320%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23EAE2D7%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2220%22%20y%3D%2218%22%20width%3D%2234%22%20height%3D%2256%22%20rx%3D%227%22%2F%3E%3Cpath%20d%3D%22M33%2066h8%22%2F%3E%3Cpath%20d%3D%22M96%2030h40a8%208%200%200%201%208%208v20a8%208%200%200%201-8%208h-24l-12%2010v-10h-4a8%208%200%200%201-8-8V38a8%208%200%200%201%208-8z%22%2F%3E%3Cpath%20d%3D%22M190%2052c-8-8-18-14-18-24a10%2010%200%200%201%2018-6%2010%2010%200%200%201%2018%206c0%2010-10%2016-18%2024z%22%2F%3E%3Ccircle%20cx%3D%22262%22%20cy%3D%2242%22%20r%3D%2220%22%2F%3E%3Cpath%20d%3D%22M254%2038h.1M270%2038h.1M254%2049c4%205%2012%205%2016%200%22%2F%3E%3Cpath%20d%3D%22M30%20140l10-22%2010%2022-22-14h24z%22%2F%3E%3Crect%20x%3D%2290%22%20y%3D%22118%22%20width%3D%2246%22%20height%3D%2234%22%20rx%3D%226%22%2F%3E%3Ccircle%20cx%3D%22113%22%20cy%3D%22135%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M100%20118l4-7h18l4%207%22%2F%3E%3Cpath%20d%3D%22M180%20150v-34l26-6v34%22%2F%3E%3Ccircle%20cx%3D%22174%22%20cy%3D%22150%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22144%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M246%20146a14%2014%200%200%201%204-27%2018%2018%200%200%201%2034%204%2012%2012%200%200%201-2%2023z%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%22200%22%20width%3D%2242%22%20height%3D%2230%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M18%20202l21%2015%2021-15%22%2F%3E%3Ccircle%20cx%3D%22114%22%20cy%3D%22214%22%20r%3D%2220%22%2F%3E%3Cpath%20d%3D%22M114%20202v12l8%206%22%2F%3E%3Cpath%20d%3D%22M176%20196h40l-6%2034h-28z%22%2F%3E%3Cpath%20d%3D%22M216%20204h6a6%206%200%200%201%200%2012h-8%22%2F%3E%3Cpath%20d%3D%22M260%20230l6-30%2020%206-6%2030z%22%2F%3E%3Cpath%20d%3D%22M266%20206l14%204M264%20216l14%204%22%2F%3E%3Cpath%20d%3D%22M44%20290c-12%200-20-8-20-18s8-18%2018-18c2-10%2010-16%2020-16%22%2F%3E%3Cpath%20d%3D%22M100%20300l14-40%2014%2040M106%20284h16%22%2F%3E%3Cpath%20d%3D%22M172%20262l10%2010%2020-20%22%2F%3E%3Ccircle%20cx%3D%22187%22%20cy%3D%22262%22%20r%3D%2224%22%2F%3E%3Cpath%20d%3D%22M252%20270h44M274%20248v44%22%2F%3E%3Ccircle%20cx%3D%22274%22%20cy%3D%22270%22%20r%3D%229%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.nbt-waw, .nbt-waw-fil { font-family: var(--waw-font); color: var(--waw-text); -webkit-font-smoothing: antialiased; font-size: 14.6px; line-height: 1.35; }
/* Les remises à zéro sous :where() — sans poids : la moindre classe nbt-waw-* passe devant. Mais hors couche
   (@layer), elles passent aussi devant TOUT Filament, rangé en couches : les boutons d'une fenêtre Filament
   (« Passer le fil », « Annuler ») en sortaient en texte nu (preuve W3-P1, capture 04b) — la fenêtre garde les siens. */
:where(.nbt-waw, .nbt-waw-fil) * { box-sizing: border-box; }
:where(.nbt-waw, .nbt-waw-fil) button:where(:not(.fi-modal *)) { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
:where(.nbt-waw, .nbt-waw-fil) input, :where(.nbt-waw, .nbt-waw-fil) textarea { font: inherit; color: inherit; }
:where(.nbt-waw, .nbt-waw-fil) svg { display: block; }
:where(.nbt-waw, .nbt-waw-fil) a { color: inherit; text-decoration: none; }
.nbt-waw [x-cloak], .nbt-waw-fil [x-cloak] { display: none !important; }

/* ── la page plein écran ── */
.nbt-waw { position: fixed; inset: 0; display: flex; background: #fff; overflow: hidden; z-index: 1; }
.nbt-waw-rail { width: 64px; flex: 0 0 64px; background: #F7F5F3; border-right: 1px solid var(--waw-line); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 6px; }
/* D-WA77 / C2 : l'icône 📞 dans le rail — la pastille seule, le menu s'ouvre à droite du rail. */
.nbt-waw-tel .nbt-tel-icone { padding: 0 11px; }
.nbt-waw-tel .nbt-tel-icone .txt { display: none; }
.nbt-waw-tel .nbt-tel-menu { left: 48px; right: auto; top: 0; }
.nbt-waw-rail-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--waw-icon); position: relative; }
.nbt-waw-rail-btn:hover { background: #ECE8E4; }
.nbt-waw-rail-btn.nbt-waw-on { background: #E3DFDB; }
.nbt-waw-nbt { width: 40px; height: 40px; border-radius: 12px; background: #C8102E; color: #fff; font: 700 13px var(--waw-font); display: grid; place-items: center; margin-bottom: 8px; }
.nbt-waw-sp { flex: 1; }
.nbt-waw-me { width: 36px; height: 36px; border-radius: 50%; font-weight: 500; font-size: 14px; display: grid; place-items: center; }
.nbt-waw-tip { position: absolute; left: 52px; top: 50%; transform: translateY(-50%); background: #fff; color: var(--waw-text); font-size: 13px; padding: 6px 10px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); white-space: nowrap; display: none; z-index: 30; }
.nbt-waw-rail-btn:hover .nbt-waw-tip, .nbt-waw-rail-btn:focus-visible .nbt-waw-tip { display: block; }

/* liste */
.nbt-waw-list { width: clamp(330px, 30vw, 430px); flex: 0 0 auto; border-right: 1px solid var(--waw-line); display: flex; flex-direction: column; min-height: 0; background: #fff; position: relative; }
.nbt-waw-lh { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px 20px; }
.nbt-waw-h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.2px; }
.nbt-waw-acts { display: flex; align-items: center; gap: 8px; position: relative; }
.nbt-waw-ib { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--waw-icon); flex: 0 0 40px; }
.nbt-waw-ib:hover, .nbt-waw-ib.nbt-waw-on { background: var(--waw-hover); }
.nbt-waw-ib-dark { background: #0A0A0A; color: #fff; }
.nbt-waw-ib-dark:hover { background: #2A2A2A; }
.nbt-waw-srch { margin: 4px 16px 10px; display: flex; align-items: center; gap: 12px; background: var(--waw-search); border-radius: 24px; height: 40px; padding: 0 16px; color: #5E5E5E; }
.nbt-waw-srch input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 15px; color: var(--waw-text); box-shadow: none; padding: 0; }
.nbt-waw-srch input::placeholder { color: #6B6B6B; }
.nbt-waw-chips { display: flex; gap: 8px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; }
.nbt-waw-chip { height: 32px; padding: 0 13px; border-radius: 16px; border: 1px solid var(--waw-chip-line) !important; color: #595959; font-size: 14.5px; white-space: nowrap; display: flex; align-items: center; gap: 6px; background: #fff !important; }
.nbt-waw-chip:hover { background: var(--waw-hover) !important; }
.nbt-waw-chip.nbt-waw-on { background: var(--waw-chip-on) !important; border-color: #BDB8B3 !important; color: var(--waw-text); font-weight: 500; }
.nbt-waw-chip small { font-size: 12.5px; color: #777; }
.nbt-waw-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.nbt-waw-banner { margin: 4px 10px 8px; background: var(--waw-card); border-radius: 16px; padding: 14px 16px; display: flex; gap: 16px; align-items: center; }
.nbt-waw-banner b { display: block; font-size: 15.5px; font-weight: 500; margin-bottom: 3px; }
.nbt-waw-banner p { margin: 0; font-size: 14px; line-height: 1.4; color: #1F1F1F; }
.nbt-waw-banner a { color: var(--waw-link); font-weight: 700; }
.nbt-waw-rows { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 2px 0 12px; }
.nbt-waw-row { display: flex; gap: 14px; align-items: center; padding: 0 14px; margin: 0 8px; height: 72px; border-radius: 12px; cursor: pointer; width: calc(100% - 16px); text-align: left; }
.nbt-waw-row:hover { background: var(--waw-hover); }
.nbt-waw-row.nbt-waw-on { background: var(--waw-active); }
.nbt-waw-av { width: 49px; height: 49px; flex: 0 0 49px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; font-weight: 500; overflow: hidden; }
.nbt-waw-av.nbt-waw-ph { background: #DFE5E7; color: #fff; }
/* D-WA132 (maquette whatsapp-pays-v1#A) : le drapeau rond au coin de la photo, anneau blanc de 2 px ; dessiné en SVG, jamais en emoji. */
.nbt-waw-avw { position: relative; flex: 0 0 auto; display: flex; }
.nbt-waw-fl-rond { position: absolute; right: -3px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #fff; background: #fff; }
.nbt-waw-fl-rond svg { width: 30px; height: 20px; margin-left: -5px; display: block; }
.nbt-waw-rb { flex: 1; min-width: 0; }
.nbt-waw-r1, .nbt-waw-r2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nbt-waw-nm { flex: 1; min-width: 0; font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbt-waw-tm { font-size: 12px; color: var(--waw-sub); white-space: nowrap; }
.nbt-waw-row.nbt-waw-unr .nbt-waw-tm { color: var(--waw-green); font-weight: 700; }
.nbt-waw-r2 { margin-top: 3px; }
.nbt-waw-pv { flex: 1; min-width: 0; font-size: 14px; color: var(--waw-sub); white-space: nowrap; overflow: hidden; display: flex; align-items: center; gap: 3px; }
.nbt-waw-pv > span { overflow: hidden; text-overflow: ellipsis; }
.nbt-waw-pv svg { flex: 0 0 auto; color: #8A8A8A; }
.nbt-waw-who { font-weight: 500; white-space: nowrap; }
.nbt-waw-badge { min-width: 20px; height: 20px; border-radius: 10px; background: var(--waw-green); color: #fff; font-size: 12px; font-weight: 500; display: grid; place-items: center; padding: 0 6px; }
/* hors maquette (Karim 5 oct) : qui tient le lead, et le fil lu resté sans réponse */
.nbt-waw-own { flex: none; max-width: 42%; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #54656F; background: #F0F2F5; border-radius: 10px; padding: 1px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbt-waw-own .nbt-waw-dot { width: 7px; height: 7px; flex: none; }
.nbt-waw-arep { flex: none; font-size: 12px; font-weight: 500; color: #8A5300; background: #FFF1CC; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
/* chacun lit pour soi (Karim 6 oct) : le ⌄ d'une ligne au survol, qui d'autre est dans le fil */
.nbt-waw-rw { position: relative; }
.nbt-waw-badge.nbt-waw-marque { padding: 0; }
.nbt-waw-rchev { position: absolute; right: 22px; top: 38px; width: 26px; height: 24px; border-radius: 6px; display: none; place-items: center; color: var(--waw-sub); background: var(--waw-hover) !important; cursor: pointer; }
.nbt-waw-rw:hover .nbt-waw-rchev, .nbt-waw-rchev:focus-visible, .nbt-waw-rchev.nbt-waw-on { display: grid; }
.nbt-waw-rw:has(.nbt-waw-row.nbt-waw-on) .nbt-waw-rchev { background: var(--waw-active) !important; }
/* Le ⌄ du survol a sa place : la seconde ligne lui laisse 30 px, « À répondre » ne passe plus dessous. */
.nbt-waw-rw:hover:has(> .nbt-waw-rchev) .nbt-waw-r2, .nbt-waw-rw:has(> .nbt-waw-rchev.nbt-waw-on) .nbt-waw-r2, .nbt-waw-rw:has(> .nbt-waw-rchev:focus-visible) .nbt-waw-r2 { padding-right: 30px; }
.nbt-waw-pres { flex: none; background: #FFF1CC; color: #8A5300; font-size: 13px; padding: 6px 16px; text-align: center; }
.nbt-waw-chips { user-select: none; }
.nbt-waw-empty-l { padding: 30px; text-align: center; color: var(--waw-sub); font-size: 14px; }
.nbt-waw-plus { display: block; width: calc(100% - 32px); margin: 8px 16px 16px; height: 40px; border-radius: 20px; border: 1px solid var(--waw-chip-line) !important; background: #fff !important; color: var(--waw-link); font-size: 14.5px; font-weight: 500; cursor: pointer; }
.nbt-waw-plus:hover { background: var(--waw-hover) !important; }
.nbt-waw-charger { display: inline-flex; align-items: center; gap: 6px; margin: 6px 4px 2px; padding: 6px 12px; border-radius: 16px; border: 1px solid var(--waw-chip-line) !important; background: #fff !important; color: var(--waw-link); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.nbt-waw-charger:disabled { opacity: .6; cursor: wait; }

/* nouvelle discussion */
.nbt-waw-newc { position: absolute; inset: 0; background: #fff; z-index: 15; display: flex; flex-direction: column; }
.nbt-waw-newc-hd { display: flex; align-items: center; gap: 14px; padding: 16px 16px 10px; }
.nbt-waw-newc-hd b { font-size: 17px; font-weight: 500; }
.nbt-waw-cap { font-size: 13px; color: var(--waw-sub); padding: 2px 24px 10px; }
.nbt-waw-cap b { color: var(--waw-text); }
.nbt-waw-sec { font-size: 14.5px; color: var(--waw-green); padding: 10px 24px 6px; font-weight: 500; }
.nbt-waw-src { font-size: 12px; color: var(--waw-sub); border: 1px solid var(--waw-line); border-radius: 10px; padding: 1px 8px; white-space: nowrap; }

/* ── conversation ── */
.nbt-waw-pane { flex: 1; min-width: 0; display: flex; min-height: 0; }
.nbt-waw-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; background: var(--waw-wall); }
.nbt-waw-fil.nbt-waw-inl { height: 600px; border: 1px solid var(--waw-line); border-radius: 12px; overflow: hidden; display: flex; }
.nbt-waw-chh { height: 64px; flex: 0 0 64px; background: #fff; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--waw-line); z-index: 5; position: relative; }
.nbt-waw-chh .nbt-waw-av { width: 40px; height: 40px; flex-basis: 40px; font-size: 16px; cursor: pointer; }
.nbt-waw-chw { flex: 1; min-width: 0; cursor: pointer; text-align: left; }
.nbt-waw-chw b { display: block; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbt-waw-chw span { display: block; font-size: 13px; color: var(--waw-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* D-WA132 : « [drapeau] Maroc · +212 6 … » en tête du sous-titre ; le drapeau rond de la photo, plus petit qu'en liste. */
.nbt-waw-chw .nbt-waw-pays { display: inline; }
.nbt-waw-pays strong { font-weight: 600; color: #3b3843; }
.nbt-waw-fl { width: 16px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); display: inline-block; vertical-align: -1px; }
.nbt-waw-chh .nbt-waw-fl-rond { width: 17px; height: 17px; }
.nbt-waw-chh .nbt-waw-fl-rond svg { width: 26px; height: 17px; margin-left: -4.5px; }
.nbt-waw-back { display: none; }
.nbt-waw-pill { height: 40px; border: 1px solid var(--waw-chip-line) !important; border-radius: 20px; padding: 0 16px 0 12px !important; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--waw-text); background: #fff !important; white-space: nowrap; }
.nbt-waw-pill:hover { background: var(--waw-hover) !important; }
.nbt-waw-pill.nbt-waw-go { background: var(--waw-green) !important; border-color: var(--waw-green) !important; color: #fff; padding: 0 18px !important; }
.nbt-waw-pill.nbt-waw-go:hover { background: var(--waw-green-h) !important; }
.nbt-waw-pill:disabled { opacity: .6; cursor: default; }
.nbt-waw-msgs { flex: 1; overflow-y: auto; padding: 14px 7% 10px; display: flex; flex-direction: column; background-color: var(--waw-wall); background-image: var(--waw-doodle); background-size: 230px; }
.nbt-waw-sep { align-self: center; background: #fff; color: #4A4A4A; font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); margin: 12px 0 10px; }
.nbt-waw-sys { align-self: center; background: var(--waw-sys); color: var(--waw-sys-t); font-size: 12.5px; padding: 6px 12px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); margin: 6px 0 8px; max-width: 80%; text-align: center; display: flex; align-items: center; gap: 6px; }
.nbt-waw-sys svg { flex: 0 0 auto; }
.nbt-waw-more { align-self: center; background: #fff !important; color: #4A4A4A; font-size: 12.5px; font-weight: 500; padding: 6px 12px !important; border-radius: 8px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); margin: 8px 0 4px; }
.nbt-waw-m { display: flex; margin: 1px 0; }
.nbt-waw-m.nbt-waw-tl { margin-top: 8px; }
.nbt-waw-m.nbt-waw-out { justify-content: flex-end; }
.nbt-waw-b { position: relative; max-width: min(65%, 520px); border-radius: 8px; padding: 6px 9px 7px; font-size: 14.6px; line-height: 20px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); overflow-wrap: anywhere; }
.nbt-waw-in .nbt-waw-b { background: var(--waw-in); }
.nbt-waw-out .nbt-waw-b { background: var(--waw-out); }
.nbt-waw-tl.nbt-waw-in .nbt-waw-b { border-top-left-radius: 0; }
.nbt-waw-tl.nbt-waw-out .nbt-waw-b { border-top-right-radius: 0; }
.nbt-waw-tl.nbt-waw-in .nbt-waw-b::before, .nbt-waw-tl.nbt-waw-out .nbt-waw-b::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.nbt-waw-tl.nbt-waw-in .nbt-waw-b::before { left: -8px; background: var(--waw-in); clip-path: path("M8 0 L8 13 L1.2 3.4 C0.3 2.1 0.9 0 2.7 0 Z"); }
.nbt-waw-tl.nbt-waw-out .nbt-waw-b::before { right: -8px; background: var(--waw-out); clip-path: path("M0 0 L0 13 L6.8 3.4 C7.7 2.1 7.1 0 5.3 0 Z"); }
.nbt-waw-b.nbt-waw-hl { animation: nbt-waw-flash 1.6s ease-out; }
@keyframes nbt-waw-flash { 0%, 30% { box-shadow: 0 0 0 4px rgba(83, 189, 235, .55); } 100% { box-shadow: 0 1px .5px rgba(11, 20, 26, .13); } }
.nbt-waw-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 8px 0 -6px 12px; font-size: 11.5px; color: #667; white-space: nowrap; position: relative; top: 2px; }
.nbt-waw-tk { color: #8A8F8A; }
.nbt-waw-tk.nbt-waw-read { color: var(--waw-read); }
.nbt-waw-meta .nbt-waw-ph { font-style: italic; }
.nbt-waw-meta .nbt-waw-masq { font-style: italic; }
.nbt-waw-by { display: block; font-size: 12.8px; font-weight: 500; margin-bottom: 1px; }
.nbt-waw-jumbo { font-family: var(--waw-emoji); font-size: 34px; line-height: 42px; }
.nbt-waw-del { color: #666; font-style: italic; display: inline-flex; align-items: center; gap: 6px; }
.nbt-waw-origine { color: #666; font-style: italic; font-size: 12.5px; }
.nbt-waw-fail { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--waw-red); }
.nbt-waw-fail button { color: var(--waw-blue); font-weight: 500; }
.nbt-waw-quote { display: flex; background: rgba(11, 20, 26, .05); border-radius: 6px; overflow: hidden; margin: -2px -5px 6px; cursor: pointer; width: calc(100% + 10px); text-align: left; }
.nbt-waw-out .nbt-waw-quote { background: rgba(11, 20, 26, .06); }
.nbt-waw-quote i { width: 4px; flex: 0 0 4px; background: var(--waw-blue); }
.nbt-waw-quote div { padding: 6px 10px 7px; min-width: 0; flex: 1; }
.nbt-waw-quote b { display: block; color: var(--waw-blue); font-size: 13px; font-weight: 500; }
.nbt-waw-quote span { display: block; color: #5F5F5F; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbt-waw-qth { width: 52px; flex: 0 0 52px; display: grid; place-items: center; background: #E9E5E1; overflow: hidden; font-size: 20px; }
.nbt-waw-qth img { width: 100%; height: 100%; object-fit: cover; }
.nbt-waw-chev { position: absolute; top: 3px; right: 3px; width: 26px; height: 22px; border-radius: 0 6px 0 12px; display: none; place-items: center; color: #7A7A7A; z-index: 2; }
.nbt-waw-in .nbt-waw-chev { background: radial-gradient(circle at 70% 40%, #fff 55%, rgba(255, 255, 255, 0) 72%) !important; }
.nbt-waw-out .nbt-waw-chev { background: radial-gradient(circle at 70% 40%, var(--waw-out) 55%, rgba(217, 253, 211, 0) 72%) !important; }
.nbt-waw-b:hover .nbt-waw-chev, .nbt-waw-b.nbt-waw-menu-on .nbt-waw-chev, .nbt-waw-chev:focus-visible { display: grid; }
/* photo, vidéo */
.nbt-waw-b.nbt-waw-pic { padding: 3px; }
.nbt-waw-img { width: 300px; max-width: 100%; min-height: 120px; max-height: 330px; border-radius: 6px; display: block; overflow: hidden; position: relative; background: #E9E5E1; }
.nbt-waw-img img { display: block; width: 100%; height: 100%; max-height: 330px; object-fit: cover; }
.nbt-waw-img .nbt-waw-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(11, 20, 26, .55); color: #fff; display: grid; place-items: center; }
.nbt-waw-img .nbt-waw-dur { position: absolute; left: 8px; bottom: 5px; color: #fff; font-size: 11.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.nbt-waw-over { position: absolute; right: 8px; bottom: 5px; color: #fff; font-size: 11.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.nbt-waw-legende { padding: 5px 6px 2px; }
.nbt-waw-pend { color: var(--waw-sub); font-size: 13px; font-style: italic; display: block; padding: 4px 6px; }
/* document */
.nbt-waw-b.nbt-waw-docb { padding: 3px; width: 330px; }
.nbt-waw-pg { height: 110px; border-radius: 6px 6px 0 0; overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, .06); display: block; width: 100%; }
.nbt-waw-pg img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.nbt-waw-fr { display: flex; gap: 10px; align-items: center; padding: 10px; background: var(--waw-in-in); border-radius: 6px; width: 100%; text-align: left; }
.nbt-waw-pg + .nbt-waw-fr { border-radius: 0 0 6px 6px; }
.nbt-waw-out .nbt-waw-fr { background: var(--waw-out-in); }
.nbt-waw-fic { width: 30px; height: 36px; flex: 0 0 30px; border-radius: 4px; background: #D10335; color: #fff; font-size: 9.5px; font-weight: 700; display: grid; place-items: end center; padding-bottom: 5px; }
.nbt-waw-fic.nbt-waw-doc { background: #2B579A; }
.nbt-waw-fr b { display: block; font-size: 14.5px; font-weight: 400; overflow-wrap: anywhere; line-height: 19px; }
.nbt-waw-fr span { font-size: 12.5px; color: var(--waw-sub); }
.nbt-waw-ft { display: flex; align-items: center; justify-content: flex-end; padding: 3px 6px 0; }
.nbt-waw-save { display: block; border-top: 1px solid rgba(11, 20, 26, .09) !important; margin: 6px -3px -3px !important; padding: 9px 6px 8px !important; text-align: center; color: var(--waw-blue) !important; font-size: 14px; font-weight: 500; width: calc(100% + 6px); }
.nbt-waw-save:hover { background: rgba(11, 20, 26, .03) !important; }
.nbt-waw-saved { display: flex; align-items: center; justify-content: center; gap: 5px; border-top: 1px solid rgba(11, 20, 26, .09); margin: 6px -3px -3px; padding: 8px 6px 7px; color: var(--waw-link); font-size: 13.5px; }
/* vocal */
.nbt-waw-b.nbt-waw-voice { width: 340px; padding: 8px 10px 6px 8px; }
.nbt-waw-vrow { display: flex; align-items: center; gap: 10px; }
.nbt-waw-pl { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; color: #2B2B2B; }
.nbt-waw-pl:disabled { opacity: .4; cursor: default; }
.nbt-waw-wave { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 2px; height: 30px; position: relative; cursor: pointer; touch-action: pan-y; }
.nbt-waw-wave:focus-visible { outline: 2px solid var(--waw-read); outline-offset: 2px; border-radius: 4px; }
.nbt-waw-wave i { width: 3px; border-radius: 2px; background: #B4B4B4; flex: 0 1 3px; min-width: 1px; }
.nbt-waw-wave i.nbt-waw-p { background: var(--waw-read); }
.nbt-waw-thumb { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--waw-read); top: 50%; transform: translate(-50%, -50%); }
.nbt-waw-vav { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; position: relative; display: grid; place-items: center; font-weight: 500; font-size: 19px; }
.nbt-waw-vav .nbt-waw-mic { position: absolute; left: -7px; bottom: -2px; color: var(--waw-read); }
/* la case de droite : l'avatar à l'arrêt, la pastille de vitesse en cours (WhatsApp Web) ; même largeur, rien ne saute */
.nbt-waw-vslot { flex: 0 0 52px; height: 52px; display: grid; place-items: center; }
.nbt-waw-vit { width: 44px; height: 28px; border-radius: 14px; background: #6B7280; color: #fff; font-size: 14px; font-weight: 700; line-height: 28px; text-align: center; }
.nbt-waw-vit:hover { background: #5B616B; }
.nbt-waw-vit:focus-visible { outline: 2px solid var(--waw-read); outline-offset: 2px; }
/* dessous : l'écoulé sous le début de l'onde, la durée sous sa fin, puis l'heure sous la case de droite */
.nbt-waw-vmeta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: #667; padding-left: 44px; margin-top: -2px; }
.nbt-waw-vtemps { flex: 1; display: flex; justify-content: space-between; }
.nbt-waw-vmeta > .nbt-waw-meta { min-width: 52px; justify-content: flex-end; }
.nbt-waw-vretry { display: block; margin: 4px 0 0 44px; font-size: 12.5px; color: var(--waw-blue); font-weight: 500; }
.nbt-waw-vretry:hover { text-decoration: underline; }
.nbt-waw-vwarn { font-size: 12px; color: var(--waw-sub); font-style: italic; padding: 2px 6px 0 46px; }
/* localisation */
.nbt-waw-b.nbt-waw-loc { padding: 3px; width: 300px; }
.nbt-waw-map { height: 140px; border-radius: 6px 6px 0 0; overflow: hidden; display: block; position: relative; background: #E8EEF0; }
.nbt-waw-map svg { width: 100%; height: 100%; }
.nbt-waw-pin { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -100%); color: #EA4335; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.nbt-waw-tx { padding: 8px 8px 2px; }
.nbt-waw-tx b { display: block; font-size: 14.5px; font-weight: 500; }
.nbt-waw-tx span { font-size: 13px; color: var(--waw-sub); }

/* menus */
.nbt-waw-menu { position: absolute; z-index: 40; background: #fff; border-radius: 14px; box-shadow: 0 2px 5px rgba(11, 20, 26, .26), 0 8px 24px rgba(11, 20, 26, .16); padding: 8px; min-width: 230px; }
.nbt-waw-it { display: flex !important; align-items: center; gap: 14px; padding: 10px 12px !important; border-radius: 8px; font-size: 14.5px; color: var(--waw-text); width: 100%; text-align: left; white-space: nowrap; }
.nbt-waw-it:hover, .nbt-waw-it:focus-visible { background: var(--waw-hover) !important; outline: none; }
.nbt-waw-it svg { color: #555; flex: 0 0 auto; }
.nbt-waw-it.nbt-waw-red, .nbt-waw-it.nbt-waw-red svg { color: var(--waw-red); }
.nbt-waw-ar { margin-left: auto; color: #999; }
.nbt-waw-mhd { font-size: 12.5px; color: var(--waw-sub); padding: 6px 12px 4px; display: flex; align-items: center; gap: 8px; white-space: normal; }
.nbt-waw-menu hr { border: 0; border-top: 1px solid var(--waw-line); margin: 6px 4px; }

/* bas de conversation */
.nbt-waw-foot { padding: 6px 16px 14px; position: relative; z-index: 6; }
.nbt-waw-strip { margin: 0 auto 8px; max-width: 640px; background: var(--waw-sys); color: var(--waw-sys-t); font-size: 13px; border-radius: 8px; padding: 7px 12px; text-align: center; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.nbt-waw-ro { background: #fff; border-radius: 26px; padding: 15px 20px; text-align: center; color: var(--waw-sub); font-size: 14.5px; box-shadow: 0 1px 2px rgba(11, 20, 26, .08); }
.nbt-waw-cmp { display: flex; flex-direction: column; background: #fff; border-radius: 26px; box-shadow: 0 1px 2px rgba(11, 20, 26, .08); }
.nbt-waw-rq { display: flex; margin: 8px 8px 0; background: var(--waw-in-in); border-radius: 10px; overflow: hidden; align-items: center; }
.nbt-waw-rq i { width: 4px; align-self: stretch; background: var(--waw-blue); }
.nbt-waw-rq div { flex: 1; min-width: 0; padding: 7px 10px; cursor: pointer; }
.nbt-waw-rq b { display: block; color: var(--waw-blue); font-size: 13px; font-weight: 500; }
.nbt-waw-rq span { display: block; font-size: 13.5px; color: #5F5F5F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbt-waw-line { display: flex; align-items: flex-end; gap: 2px; padding: 6px; }
.nbt-waw-cmp textarea { flex: 1; min-width: 0; border: 0 !important; outline: none; resize: none; font-size: 15.5px; line-height: 21px; padding: 9px 8px !important; max-height: 140px; background: none !important; height: 39px; box-shadow: none !important; }
.nbt-waw-cmp textarea::placeholder { color: #7A7A7A; }
.nbt-waw-sendb { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; background: var(--waw-green) !important; color: #fff; display: grid; place-items: center; }
.nbt-waw-sendb:hover { background: var(--waw-green-h) !important; }
.nbt-waw-sendb:disabled { opacity: .6; cursor: default; }
.nbt-waw-recb { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 10px; }
.nbt-waw-dotr { width: 10px; height: 10px; border-radius: 50%; background: var(--waw-red); animation: nbt-waw-blink 1s infinite; flex: 0 0 10px; }
@keyframes nbt-waw-blink { 50% { opacity: .25; } }
.nbt-waw-t { font-size: 15px; min-width: 38px; }
.nbt-waw-lw { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; overflow: hidden; }
.nbt-waw-lw i { width: 3px; border-radius: 2px; background: #9A9A9A; flex: 0 0 3px; animation: nbt-waw-pulse 1.1s ease-in-out infinite; }
@keyframes nbt-waw-pulse { 50% { transform: scaleY(.45); } }
.nbt-waw-hint { font-size: 12.5px; color: var(--waw-sub); padding: 6px 18px 0; }

/* popovers */
.nbt-waw-pop { position: absolute; bottom: calc(100% - 4px); left: 16px; z-index: 30; background: #fff; border-radius: 16px; box-shadow: 0 2px 5px rgba(11, 20, 26, .26), 0 8px 24px rgba(11, 20, 26, .16); }
.nbt-waw-att { padding: 8px; min-width: 250px; }
.nbt-waw-aic { width: 26px; height: 26px; display: grid; place-items: center; }
.nbt-waw-emo { width: min(430px, calc(100vw - 32px)); height: 400px; display: flex; flex-direction: column; overflow: hidden; }
.nbt-waw-cats { display: flex; justify-content: space-between; padding: 8px 10px 0; border-bottom: 1px solid var(--waw-line); }
.nbt-waw-cats button { width: 40px; height: 40px; display: grid; place-items: center; color: #7A7A7A; border-bottom: 3px solid transparent !important; }
.nbt-waw-cats button.nbt-waw-on { color: var(--waw-green); border-bottom-color: var(--waw-green) !important; }
.nbt-waw-es { margin: 10px 12px 4px; display: flex; align-items: center; gap: 10px; background: var(--waw-search); border-radius: 20px; height: 36px; padding: 0 14px; color: #666; }
.nbt-waw-es input { flex: 1; min-width: 0; border: 0 !important; background: none !important; outline: none; font-size: 14.5px; box-shadow: none !important; padding: 0 !important; }
.nbt-waw-grid { flex: 1; overflow-y: auto; padding: 0 8px 10px; }
.nbt-waw-emo h5 { margin: 10px 6px 4px; font-size: 13px; font-weight: 500; color: var(--waw-sub); }
.nbt-waw-g { display: grid; grid-template-columns: repeat(9, 1fr); }
.nbt-waw-g button { height: 44px; font-family: var(--waw-emoji); font-size: 28px; line-height: 44px; border-radius: 8px; }
.nbt-waw-g button:hover, .nbt-waw-g button:focus-visible { background: var(--waw-hover) !important; outline: none; }
.nbt-waw-none { padding: 30px; text-align: center; color: var(--waw-sub); font-size: 14px; }
.nbt-waw-qr { width: min(560px, calc(100% - 32px)); max-height: 320px; overflow-y: auto; padding: 8px; }
.nbt-waw-qhd { font-size: 13px; color: var(--waw-sub); padding: 6px 10px; }
.nbt-waw-qi { display: block !important; width: 100%; text-align: left; padding: 9px 10px !important; border-radius: 10px; }
.nbt-waw-qi:hover, .nbt-waw-qi.nbt-waw-on { background: var(--waw-hover) !important; }
.nbt-waw-qi b { font-size: 14.5px; font-weight: 500; margin-right: 8px; }
.nbt-waw-qi span { display: block; font-size: 13.5px; color: var(--waw-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* fenêtres */
.nbt-waw-scrim { position: fixed; inset: 0; background: rgba(11, 20, 26, .45); z-index: 60; display: grid; place-items: center; }
.nbt-waw-dlg { background: #fff; border-radius: 20px; width: min(440px, calc(100vw - 32px)); padding: 22px 24px 18px; box-shadow: 0 17px 50px rgba(11, 20, 26, .19); font-family: var(--waw-font); color: var(--waw-text); }
.nbt-waw-dlg h3 { margin: 0 0 6px; font-size: 19px; font-weight: 500; }
.nbt-waw-dlg p { margin: 0 0 14px; color: var(--waw-sub); font-size: 14.5px; line-height: 1.45; }
.nbt-waw-dlg .nbt-waw-map { border-radius: 12px; height: 150px; }
.nbt-waw-dacts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.nbt-waw-btn { height: 40px; border-radius: 20px; padding: 0 20px !important; font-size: 14.5px; font-weight: 500; border: 1px solid var(--waw-chip-line) !important; color: var(--waw-link); background: #fff !important; }
.nbt-waw-btn:hover { background: var(--waw-hover) !important; }
.nbt-waw-btn.nbt-waw-pri { background: var(--waw-green) !important; border-color: var(--waw-green) !important; color: #fff; }
.nbt-waw-btn.nbt-waw-pri:hover { background: var(--waw-green-h) !important; }
.nbt-waw-btn:disabled { opacity: .6; cursor: default; }
.nbt-waw-viewer { position: fixed; inset: 0; background: rgba(255, 255, 255, .97); z-index: 60; display: flex; flex-direction: column; font-family: var(--waw-font); color: var(--waw-text); }
.nbt-waw-vh { height: 60px; flex: 0 0 60px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--waw-line); }
.nbt-waw-vh b { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbt-waw-vh small { color: var(--waw-sub); font-size: 13px; white-space: nowrap; }
.nbt-waw-vb { flex: 1; min-height: 0; display: grid; place-items: center; padding: 20px; }
.nbt-waw-vb img, .nbt-waw-vb video { max-width: min(1000px, 92vw); max-height: calc(100vh - 120px); border-radius: 6px; box-shadow: 0 4px 30px rgba(0, 0, 0, .12); }
.nbt-waw-vb iframe { width: min(900px, 92vw); height: calc(100vh - 120px); border: 0; border-radius: 6px; background: #fff; box-shadow: 0 4px 30px rgba(0, 0, 0, .12); }
.nbt-waw-vb p { color: var(--waw-sub); font-size: 15px; }

/* infos du lead */
.nbt-waw-info { width: min(400px, 32vw); flex: 0 0 auto; border-left: 1px solid var(--waw-line); background: #F7F5F3; display: flex; flex-direction: column; min-height: 0; }
.nbt-waw-ih { height: 64px; flex: 0 0 64px; display: flex; align-items: center; gap: 18px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--waw-line); }
.nbt-waw-ih b { font-size: 16px; font-weight: 500; }
.nbt-waw-ibody { flex: 1; overflow-y: auto; }
/* « Infos | 📝 Notes (N) » (D-WA129 N3, maquette notes-equipe-v1 : .itabs / .wnotes / .wcmp) ; les notes sont les .nbt-note-* de la fiche. */
.nbt-waw-itabs { display: flex; flex: none; background: #fff; border-bottom: 1px solid var(--waw-line); }
.nbt-waw-itabs button { flex: 1; min-height: 44px; padding: 11px 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--waw-sub); font-size: 14px; cursor: pointer; }
.nbt-waw-itabs button[aria-selected=true] { color: var(--waw-text); border-bottom-color: var(--waw-green); font-weight: 500; }
.nbt-waw-notes { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nbt-waw-nlist { flex: 1; min-height: 0; overflow-y: auto; background: #fff; padding: 4px 16px 8px; font-size: 13.5px; }
.nbt-waw-nlist .nbt-act-it { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
.nbt-waw-nlist .nbt-act-ic { width: 26px; height: 26px; font-size: 12px; }
.nbt-waw-nvide { margin: 16px 0; color: var(--waw-sub); text-align: center; }
.nbt-waw-ncmp { flex: none; background: #fff; border-top: 1px solid var(--waw-line); padding: 10px 14px 12px; max-height: 50%; overflow-y: auto; }
.nbt-waw-card { background: #fff; margin-bottom: 10px; padding: 16px 24px; }
.nbt-waw-card.nbt-waw-top { text-align: center; padding: 28px 24px 20px; }
.nbt-waw-card.nbt-waw-top .nbt-waw-av { width: 150px; height: 150px; flex-basis: 150px; font-size: 54px; margin: 0 auto 14px; }
.nbt-waw-card h2 { margin: 0; font-size: 22px; font-weight: 400; }
.nbt-waw-card .nbt-waw-tel { color: var(--waw-sub); font-size: 16px; margin-top: 4px; }
.nbt-waw-card h4 { margin: 0 0 10px; font-size: 14px; font-weight: 400; color: var(--waw-sub); display: flex; justify-content: space-between; align-items: center; }
.nbt-waw-kv { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 14.5px; gap: 10px; }
.nbt-waw-kv > span:first-child { color: var(--waw-sub); }
.nbt-waw-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.nbt-waw-agent { display: inline-flex; align-items: center; gap: 6px; }
.nbt-waw-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.nbt-waw-th { width: 84px; height: 84px; border-radius: 8px; overflow: hidden; position: relative; background: #EEE; display: grid; place-items: center; color: #8A8A8A; }
.nbt-waw-th img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.nbt-waw-th small { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); color: #fff; font-size: 11px; padding: 10px 6px 4px; text-align: left; }
.nbt-waw-act { display: flex !important; align-items: center; gap: 20px; padding: 13px 0 !important; font-size: 15.5px; color: var(--waw-link) !important; width: 100%; text-align: left; }
.nbt-waw-act svg { color: var(--waw-link); }

/* écrans pleins */
.nbt-waw-closed, .nbt-waw-intro { flex: 1; display: grid; place-items: center; background: #F7F5F3; text-align: center; padding: 30px; }
.nbt-waw-cic { width: 88px; height: 88px; border-radius: 50%; background: #ECE8E4; display: grid; place-items: center; margin: 0 auto 22px; color: #6B6B6B; }
.nbt-waw-closed h2 { margin: 0 0 8px; font-size: 26px; font-weight: 300; }
.nbt-waw-closed p, .nbt-waw-intro p { margin: 0; color: var(--waw-sub); font-size: 14.5px; }
.nbt-waw-intro h2 { font-weight: 300; color: #41525D; font-size: 28px; margin: 18px 0 8px; }
.nbt-waw-empty { margin: auto; text-align: center; color: var(--waw-sub); background: rgba(255, 255, 255, .85); border-radius: 12px; padding: 18px 22px; max-width: 420px; font-size: 14px; }
.nbt-waw-empty b { display: block; color: var(--waw-text); font-weight: 500; margin-bottom: 4px; }

/* fenêtres étroites, comme WhatsApp (PLAN-HABILLAGE-WHATSAPP-WEB D12) */
@media (max-width: 1279px) {
  .nbt-waw .nbt-waw-info { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100%); z-index: 20; box-shadow: -8px 0 24px rgba(11, 20, 26, .12); }
  .nbt-waw .nbt-waw-pane { position: relative; }
}
.nbt-waw-etroit { display: none; }
@media (max-width: 899px) {
  .nbt-waw-rail { display: none; }
  .nbt-waw-etroit { display: inline-block; margin-top: 16px; color: var(--waw-link); font-weight: 500; }
  .nbt-waw-list { width: 100%; border-right: 0; }
  .nbt-waw.nbt-waw-fil-ouvert .nbt-waw-list { display: none; }
  .nbt-waw:not(.nbt-waw-fil-ouvert) .nbt-waw-pane, .nbt-waw:not(.nbt-waw-fil-ouvert) .nbt-waw-intro { display: none; }
  .nbt-waw .nbt-waw-back { display: grid; }
  .nbt-waw-msgs { padding: 10px 3% 8px; }
  .nbt-waw-b { max-width: 85%; }
  .nbt-waw-pill span { display: none; }
}

/* détails des bulles et du composeur */
.nbt-waw-fail { clear: both; }
.nbt-waw-over { display: inline-flex; align-items: center; gap: 3px; }
.nbt-waw-over .nbt-waw-tk:not(.nbt-waw-read) { color: #fff; }
.nbt-waw-vmeta .nbt-waw-meta { float: none; margin: 0; top: 0; }
.nbt-waw-vn { min-width: 0; }
.nbt-waw-recp .nbt-waw-vslot { flex-basis: 44px; height: 34px; }
.nbt-waw-recp .nbt-waw-wave { gap: 1px; } /* l'aperçu est étroit : les barres se serrent pour laisser la place à la pastille */
.nbt-waw-recp .nbt-waw-vmeta { padding-right: 54px; }
.nbt-waw-qth .nbt-waw-fic { width: 26px; height: 32px; flex-basis: 26px; }
.nbt-waw-qth svg { width: 100%; height: 100%; }
.nbt-waw-rq .nbt-waw-qth { height: 46px; }
.nbt-waw-tel { color: var(--waw-sub); }
.nbt-waw-it .nbt-waw-aic svg { color: inherit; }

/* Ligne coupée (Karim 7 oct, ligne-coupee-maquette) — 1. la pastille de la ligne : les mesures de « À répondre », en gris */
.nbt-waw-coupee { flex: none; font-size: 12px; font-weight: 500; color: #5E5E5E; background: #ECE8E4; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
/* La première pastille qui peut suivre un dernier message sortant : les coches ne se tassent pas en moignon. */
.nbt-waw-pv > .nbt-waw-tk { flex: none; }
/* 2. l'avis à la place du composeur : blanc comme sa pilule, l'icône info grise, pas de rouge */
.nbt-waw-coupe { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 18px; padding: 14px 18px; box-shadow: 0 1px 2px rgba(11, 20, 26, .08); }
.nbt-waw-coupe > svg { flex: none; color: #8A8A8A; margin-top: 1px; }
.nbt-waw-coupe p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.45; color: #3B3B3B; }
.nbt-waw-coupe-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.nbt-waw-coupe .nbt-waw-pill { height: 36px; font-size: 14.5px; padding: 0 16px !important; }

/* Le point rouge, les barres et le clignotement s'arrêtent pour qui a demandé moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
  .nbt-waw-dotr, .nbt-waw-lw i, .nbt-waw-b.nbt-waw-hl { animation: none; }
}

/* Fiche modifiable (maquette fiche-modifiable, écran B, Karim 7 oct) : le stylo à côté du nom, « Modifier la fiche »
   dans « Infos du lead ». Les mesures du panneau ; la pastille « à compléter » est celle de « À répondre ». */
.nbt-waw-nomrow { display: flex; justify-content: center; align-items: center; gap: 2px; padding-left: 34px; }
.nbt-waw-nomrow.nbt-waw-sans-stylo { padding-left: 0; }
.nbt-waw-nomrow h2 { min-width: 0; overflow-wrap: anywhere; }
.nbt-waw-pen { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center; color: var(--waw-sub); }
.nbt-waw-pen:hover, .nbt-waw-pen:focus-visible { background: var(--waw-hover); color: var(--waw-icon); }
.nbt-waw-prends { margin-top: 10px; font-size: 13.5px; color: var(--waw-sub); }
.nbt-waw-prends a { color: var(--waw-link); }
.nbt-waw-card.nbt-waw-top.nbt-waw-top-mod { padding: 20px 24px 14px; }
.nbt-waw-card.nbt-waw-top.nbt-waw-top-mod .nbt-waw-av { width: 96px; height: 96px; flex-basis: 96px; font-size: 36px; margin-bottom: 10px; }
.nbt-waw-top-mod small { color: var(--waw-sub); font-size: 13.5px; }
.nbt-waw-form { display: flex; flex-direction: column; gap: 16px; padding: 18px 24px 20px; }
.nbt-waw-fld label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--waw-sub); }
.nbt-waw-fld input { display: block; width: 100%; border: 0; border-bottom: 2px solid var(--waw-line); background: none; padding: 6px 0 7px; font-size: 15.5px; outline: none; border-radius: 0; box-shadow: none; }
.nbt-waw-fld input:focus { border-bottom-color: var(--waw-green); }
.nbt-waw-fld.nbt-waw-todo input { border-bottom-color: #F5C66B; }
.nbt-waw-fld.nbt-waw-todo input:focus { border-bottom-color: var(--waw-green); }
.nbt-waw-todo-t { font-size: 12px; font-weight: 500; color: #8A5300; background: #FFF1CC; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.nbt-waw-fld.nbt-waw-err input { border-bottom-color: var(--waw-red); }
.nbt-waw-msg { font-size: 12.5px; color: var(--waw-red); margin-top: 4px; }
.nbt-waw-lock { display: flex; align-items: center; gap: 8px; padding: 6px 0 7px; font-size: 15.5px; color: var(--waw-sub); border-bottom: 2px dotted var(--waw-line); }
.nbt-waw-lock svg { color: #8A8A8A; flex: none; }
.nbt-waw-aide { font-size: 12.5px; color: var(--waw-sub); margin-top: 4px; }
.nbt-waw-form .nbt-waw-dacts { margin-top: 4px; }

/* ── Épingler + listes (maquette epingler-whatsapp, Karim 9 oct) — aucune couleur nouvelle : le gris des icônes
   d'aperçu, les couleurs de STATUTS et --waw-red de HabillageWhatsapp ── */
.nbt-waw-epingle { flex: none; display: inline-flex; color: #8A8A8A; }
.nbt-waw-ldots { flex: none; display: inline-flex; gap: 3px; }
.nbt-waw-lchip { padding: 0 4px 0 13px; }
.nbt-waw-lchip > button { display: flex; align-items: center; gap: 6px; height: 100%; }
.nbt-waw-lchev { color: var(--waw-sub); }
.nbt-waw-lnom { display: inline-flex; align-items: center; gap: 8px; }
.nbt-waw-it input[type=checkbox] { margin: 0; width: 18px; height: 18px; flex: none; accent-color: var(--waw-green); }
.nbt-waw-coul { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.nbt-waw-coul button { width: 30px; height: 30px; border-radius: 50%; outline: 2px solid transparent; outline-offset: 2px; }
.nbt-waw-coul button[aria-checked=true] { outline-color: var(--waw-text); }
.nbt-waw-coul button:focus-visible { outline-color: var(--waw-green); }
.nbt-waw-dlg .nbt-waw-fld { margin-top: 4px; }
/* Sans survol (un téléphone), le ⋮ de chaque ligne reste visible à la place du ⌄ ; la seconde ligne lui laisse sa place. */
.nbt-waw-rchev-d { display: flex; }
.nbt-waw-rchev-p { display: none; }
@media (max-width: 899px), (hover: none) {
  .nbt-waw-rchev { display: grid; background: none !important; }
  .nbt-waw-rchev-d { display: none; }
  .nbt-waw-rchev-p { display: flex; }
  .nbt-waw-rw .nbt-waw-r2 { padding-right: 30px; }
}

/* ── l'onglet Appels du rail (BRIEF-PHASE-4-LISTE-DES-APPELS) : la racine porte .nbt-lda-on, le panneau prend la place des fils ── */
.nbt-lda-panel { display: none; }
.nbt-lda-on .nbt-waw-list > :not(.nbt-lda-panel) { display: none !important; }
.nbt-lda-on .nbt-waw-list > .nbt-lda-panel { display: flex; }
.nbt-lda-badge { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: #EA0038; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }

/* D-WA112 — le potentiel d'un fil en barres, comme le réseau du téléphone (whatsapp-filtres-v2-2026-11-01, carte 3, .sig) :
   filament/whatsapp/potentiel.blade.php. Fort = 3 vertes, Moyen = 2 orange, Faible = 1 rouge. */
.nbt-waw-sig { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; padding: 0 6px 0 5px; border-radius: 6px; font-size: 10.5px; font-weight: 700; line-height: 16px; }
.nbt-waw-sig i { display: block; width: 3px; border-radius: 1px; background: #D8D4CF; }
.nbt-waw-sig i:nth-child(1) { height: 5px; }
.nbt-waw-sig i:nth-child(2) { height: 9px; }
.nbt-waw-sig i:nth-child(3) { height: 13px; }
.nbt-waw-sig b { margin-left: 4px; align-self: center; }
.nbt-waw-sig[data-potentiel="f"] { background: #E7F6EE; color: #0B7A3E; }
.nbt-waw-sig[data-potentiel="f"] i { background: #1DAA61; }
.nbt-waw-sig[data-potentiel="m"] { background: #FFF1E0; color: #B45309; }
.nbt-waw-sig[data-potentiel="m"] i:nth-child(-n+2) { background: #F08C1E; }
.nbt-waw-sig[data-potentiel="l"] { background: #FCEDF0; color: #9B1024; }
.nbt-waw-sig[data-potentiel="l"] i:nth-child(1) { background: #D0283E; }
/* D-WA117 : lead converti ou perdu — l'humain a tranché, les barres gardent leur forme et se grisent. */
.nbt-waw-sig[data-potentiel-passe="1"] { background: #F1EFEC; color: #8A8781; }
.nbt-waw-sig[data-potentiel-passe="1"] i { background: #C9C5BF; }

/* D-WA111a — les lignes « comme WhatsApp » (maquette whatsapp-lignes-2026-11-01, option A, Karim 1 nov) : deux lignes
   dans 72 px ; seul l'aperçu (et, à l'étroit, les pastilles de texte) rétrécit, rien ne sort de la ligne à 340 px. */
.nbt-waw-r1 .nbt-waw-nm { flex: 0 1 auto; }
.nbt-waw-r1 .nbt-waw-tm { margin-left: auto; flex: none; }
.nbt-waw-rb { overflow: hidden; }
.nbt-waw-star { flex: none; color: #E0A100; font-size: 13px; }
.nbt-waw-eye { flex: 0 1 auto; min-width: 0; font-size: 12px; color: #8A5300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbt-waw-tm.nbt-waw-urg, .nbt-waw-row.nbt-waw-unr .nbt-waw-tm.nbt-waw-urg { color: #9B1024; font-weight: 700; }
.nbt-waw-svc { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #54656F; border: 1px solid var(--waw-line); border-radius: 6px; padding: 0 5px; line-height: 16px; }
.nbt-waw-ag { flex: none; width: 20px; height: 20px; border-radius: 50%; font-size: 9.5px; font-weight: 700; color: #fff; display: grid; place-items: center; }
.nbt-waw-r2 .nbt-waw-coupee, .nbt-waw-r2 .nbt-waw-arep { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nbt-waw-av.nbt-waw-av-vert { box-shadow: 0 0 0 2.5px #3DB26A; }
.nbt-waw-av.nbt-waw-av-rouge { box-shadow: 0 0 0 2.5px #9B1024; }
/* D-WA111c — l'étiquette bleue « Nouveau » d'une ligne (maquette whatsapp-filtres-v2-2026-11-01). */
.nbt-waw-nv { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: #1D4ED8; background: #E6EDFD; border-radius: 6px; padding: 0 6px; line-height: 17px; }

/* D-WA111b — la barre des filtres F1 (maquette whatsapp-filtres-v2-2026-11-01, Karim 1 nov) : « Filtres » dans la
   recherche, UNE rangée de quatre pastilles qui ne défile jamais (à l'étroit, le libellé rétrécit, le compte reste),
   la rangée verte des filtres actifs, et la feuille du bas dans la colonne. */
.nbt-waw-fb { margin-left: auto; flex: none; display: flex; align-items: center; gap: 4px; color: #444; font-size: 13px; cursor: pointer; }
.nbt-waw-cnt { min-width: 18px; height: 18px; border-radius: 9px; background: var(--waw-green); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; padding: 0 5px; }
.nbt-waw-pills { gap: 4px; padding: 0 10px 8px; overflow: hidden; }
.nbt-waw-pills .nbt-waw-chip { flex: 0 1 auto; min-width: 0; padding: 0 8px; font-size: 12.8px; gap: 5px; }
.nbt-waw-pills .nbt-waw-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nbt-waw-pills .nbt-waw-chip small { flex: none; font-size: 12px; }
.nbt-waw-chip.nbt-waw-nvp { border-color: #B9CCF7 !important; color: #1D4ED8; }
.nbt-waw-chip.nbt-waw-nvp small { color: #1D4ED8; font-weight: 700; }
.nbt-waw-chip.nbt-waw-nvp.nbt-waw-on { background: #E6EDFD !important; border-color: #E6EDFD !important; }
.nbt-waw-actifs { flex-wrap: wrap; gap: 4px; padding: 0 10px 8px; }
.nbt-waw-chip.nbt-waw-x { background: #E7F6EE !important; border-color: #BFE6CF !important; color: #0B6B3A; font-weight: 600; }
/* La feuille du bas : fermée, invisible et sans clic, mais dans la page — les fenêtres de « Mes listes » (Nouvelle
   liste, « Prendre ce lead ») sont fixes et restent visibles quand on les ouvre depuis une ligne. */
.nbt-waw-sheet { position: absolute; inset: 0; z-index: 40; background: rgba(0, 0, 0, .2); display: flex; align-items: flex-end; }
.nbt-waw-sheet:not(.nbt-waw-on) { visibility: hidden; }
.nbt-waw-sheet:not(.nbt-waw-on) .nbt-waw-scrim, .nbt-waw-sheet:not(.nbt-waw-on) .fi-modal { visibility: visible; }
.nbt-waw-box { background: #fff; width: 100%; border-radius: 16px 16px 0 0; padding: 14px; max-height: 88%; overflow: auto; box-shadow: 0 -6px 24px rgba(0, 0, 0, .12); }
.nbt-waw-bx { display: flex; justify-content: space-between; align-items: center; }
.nbt-waw-bx b { font-size: 16px; }
.nbt-waw-lien { color: #0B6B3A; font-size: 13px; font-weight: 600; cursor: pointer; }
.nbt-waw-lien.nbt-waw-gris { color: #666; }
.nbt-waw-sh { margin: 12px 0 6px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #888; }
.nbt-waw-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.nbt-waw-ok { width: 100%; height: 40px; border-radius: 20px; background: #111 !important; color: #fff; font-weight: 600; margin-top: 14px; cursor: pointer; }
.nbt-waw-ok:disabled { opacity: .4; cursor: default; }

/* D-WA111d — « 🚫 Non qualifié… » (maquette whatsapp-filtres-v2-2026-11-01, carte 2) : le motif sur la ligne, le geste rouge
   des menus, la feuille du motif et le toast « Annuler ». */
.nbt-waw-nq { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: #9B1024; background: #FCEDF0; border-radius: 6px; padding: 0 6px; line-height: 17px; }
.nbt-waw-it.nbt-waw-dg { color: #9B1024; }
.nbt-waw-nqp { color: #666; font-size: 13px; margin: 6px 0 10px; }
.nbt-waw-motif { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--waw-line); border-radius: 10px; margin-bottom: 6px; width: 100%; text-align: left; cursor: pointer; }
.nbt-waw-motif.nbt-waw-on { border-color: #9B1024; background: #FDF3F5; }
.nbt-waw-motif-e { font-size: 18px; }
.nbt-waw-motif small { display: block; color: #777; font-size: 12px; }
.nbt-waw-motif-t { width: 100%; height: 38px; border: 1px solid #DDD; border-radius: 10px; padding: 0 10px; font: inherit; }
.nbt-waw-ok.nbt-waw-ok-r { background: #9B1024 !important; }
.nbt-waw-toast { position: absolute; left: 12px; right: 12px; bottom: 12px; background: #222; color: #fff; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; display: flex; align-items: center; gap: 10px; z-index: 41; }
.nbt-waw-toast button { color: #7EE2A8; font-weight: 700; margin-left: auto; cursor: pointer; }

/* D-WA128 S3 — numéro masqué : « Ajouter le numéro » et « C'est son numéro ? » (maquette whatsapp-numero-masque-v1) */
.nbt-nm-add { display: inline-flex; align-items: center; gap: 6px; background: #C8102E; color: #fff; border: 0; border-radius: 999px; padding: 8px 14px; font: 500 13.5px system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.nbt-nm-add:hover { background: #A50D26; }
.nbt-nm-veil { position: fixed; inset: 0; background: rgba(20, 18, 26, .35); display: grid; place-items: center; z-index: 60; }
.nbt-nm-dlg { width: min(440px, 92vw); background: #fff; border-radius: 14px; padding: 20px 22px; font-family: system-ui, sans-serif; color: #14121A; box-shadow: 0 24px 60px rgba(20, 18, 26, .3); }
.nbt-nm-dlg h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.nbt-nm-dlg p { margin: 0 0 14px; color: #6B6875; font-size: 13.5px; line-height: 1.45; }
.nbt-nm-dlg label { font-size: 12.5px; font-weight: 600; color: #6B6875; }
.nbt-nm-field { display: flex; align-items: center; gap: 8px; border: 1.5px solid #E7E5EA; border-radius: 10px; padding: 0 12px; height: 44px; margin: 6px 0 10px; }
.nbt-nm-field:focus-within { border-color: #C8102E; }
.nbt-nm-field span { font-weight: 600; }
.nbt-nm-field input { flex: 1; min-width: 0; border: 0; outline: none; box-shadow: none; font-size: 16px; letter-spacing: .3px; background: transparent; padding: 0; }
.nbt-nm-chk { font-size: 13px; border-radius: 9px; padding: 9px 11px; margin-bottom: 14px; line-height: 1.4; }
.nbt-nm-ok { background: #E7F7EE; color: #11733F; }
.nbt-nm-dup { background: #FEF3C7; color: #7C3E06; }
.nbt-nm-acts { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.nbt-nm-btn { border: 0; border-radius: 8px; padding: 7px 12px; font: 600 13px system-ui, sans-serif; cursor: pointer; }
.nbt-nm-p { background: #C8102E; color: #fff; }
.nbt-nm-p:hover { background: #A50D26; }
.nbt-nm-p:disabled { opacity: .45; cursor: not-allowed; }
.nbt-nm-g { background: #F1F0F3; color: #14121A; }
.nbt-nm-g:hover { background: #E6E4EA; }
.nbt-nm-sugg { align-self: flex-start; max-width: 68%; background: #fff; border: 1.5px solid #C8102E; border-radius: 10px; padding: 10px 12px; margin: 2px 0 6px; font: 13.5px system-ui, sans-serif; color: #14121A; box-shadow: 0 4px 14px rgba(200, 16, 46, .12); }
.nbt-nm-sugg .nbt-nm-acts { justify-content: flex-start; }
.nbt-nm-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A50D26; background: #FDEEF1; border-radius: 4px; padding: 1px 6px; margin-bottom: 6px; }
.nbt-nm-q { font-weight: 600; margin-bottom: 2px; }
.nbt-nm-nb { font-size: 16px; font-weight: 700; letter-spacing: .2px; margin: 2px 0 8px; }
@media (max-width: 820px) { .nbt-nm-sugg { max-width: 88%; } .nbt-nm-add .nbt-nm-lbl { display: none; } }