/* ============================================================================
   TurnOrder — STILURILE CONVERSAȚIILOR (chat club + mesaje private)
   ----------------------------------------------------------------------------
   RO: Locul unic al CSS-ului de chat v9 (decizia D2). Se încarcă BLOCANT, imediat
       după `style.css`, nu leneș: o conversație deschisă direct dintr-o notificare
       push trebuie să apară deja stilată, fără clipire.
       ⚠ CASCADA: fiind încărcat DUPĂ `style.css`, la specificitate egală regulile
       de aici câștigă. Regulile vechi de chat se mută aici din `style.css` doar
       într-un batch de MUTARE separat, verificat mecanic (stilul calculat identic
       înainte/după, la 320/375/768/1024/1440 px).
   EN: Single home for v9 chat CSS. Loaded render-blocking right after style.css so
       a conversation opened from a push notification is styled on first paint.
       Later in the cascade, its rules win on equal specificity, so old rules move
       here only in dedicated, mechanically verified move batches.
   ============================================================================ */

/* ── Câmpul de scriere pe mai multe rânduri (8.1bis) ─────────────────────────
   RO: `#chatInput` (club) și `#dmInput` (mesaje private) sunt `<textarea>` care cresc
       odată cu textul; logica e în chat-core.js (`TO_CHAT.composer`).
       • Restul aspectului vine NESCHIMBAT din `.chat-input` (style.css), inclusiv
         regulile `!important` de pe telefon (font 16 px — sub 16 px iOS mărește
         pagina la focus).
       • `line-height` era `normal`, ca un rând să aibă exact înălțimea vechiului
         `<input>`; din 8.1-e e fix (1,375), odată cu fontul sistemului (blocul
         8.1-e de la final).
       • Înălțimea maximă (6 / 10 rânduri, cel mult 40% din ecranul vizibil) o pune
         chat-core.js, fiindcă depinde de tastatură.
   EN: the message field is a growing textarea; sizing logic lives in chat-core.js. */
textarea.chat-input {
  resize: none;
  overflow-y: auto;          /* peste limită derulează în interior */
  scrollbar-width: thin;
}

/* Creșterea nativă — clasa e pusă de chat-core.js DOAR unde browserul o suportă
   (Chrome/Edge 123+, Firefox 152+, Safari 26.2+); în rest, înălțimea o pune JS.
   Fără chat-core.js, câmpul rămâne pe un rând, ca înainte. */
textarea.chat-input.ci-fs { field-sizing: content; }

/* De la al doilea rând, butoanele coboară lângă ultimul rând scris, ca în
   WhatsApp. Pe un singur rând (fără `ci-multi`) totul rămâne centrat, deci
   identic cu înainte. `--ci-h1` = înălțimea unui rând, pusă de chat-core.js. */
.chat-input-area.ci-multi,
.chat-input-wrap.ci-multi { align-items: flex-end; }
.chat-input-wrap.ci-multi > :not(textarea) {
  margin-bottom: calc((var(--ci-h1, 46px) - 36px) / 2);   /* 36px = .chat-inline-btn */
}

/* ── Antetul chatului de club (8.1-a): [←] [⤢] [⋮] ────────────────────────── */
/* Titlul nu împinge butoanele afară pe ecranele înguste (320 px): se scurtează. */
#chatCard .chat-head .card-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chatCard .chat-head-actions { flex: 0 0 auto; gap: 2px; }
/* 8.1-b2: butoane-iconiță fără chenar și fără fundal (ca în WhatsApp/Telegram);
   fundalul apare doar la trecerea mouse-ului / apăsare. Contrast iconiță/fundal
   ≈ 7,7:1. EN: borderless icon buttons. */
#chatCard .chat-head-btn,
.dm-head .chat-head-btn,
.dm-head .user-menu-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.05rem;
  opacity: 1;
  margin: 0;
  transition: background-color .12s, color .12s;
}
#chatCard .chat-head-btn:hover,
.dm-head .chat-head-btn:hover,
.dm-head .user-menu-btn:hover { background: rgba(255, 255, 255, .07); color: var(--text-primary); }
#chatCard .chat-head-btn:active,
.dm-head .chat-head-btn:active,
.dm-head .user-menu-btn:active { background: rgba(255, 255, 255, .12); }
#chatCard .chat-head-btn.active { color: var(--accent-primary, #ff6b35); }
#chatCard .chat-head-btn:focus-visible,
.dm-head .chat-head-btn:focus-visible,
.dm-head .user-menu-btn:focus-visible { outline: 2px solid var(--accent-primary, #ff6b35); outline-offset: 1px; }
/* Ținte de atingere ≥ 44 px pe telefon/tabletă (pe desktop 40 px). */
@media (pointer: coarse) {
  #chatCard .chat-head-btn,
  .dm-head .chat-head-btn,
  .dm-head .user-menu-btn { width: 44px; height: 44px; }
}
/* Meniul ⋮ din antet: peste chatul pe ecran complet (9000), ca meniurile mesajelor. */
#chatHeadMenuModal { z-index: 9500; }
.msg-menu-preview.is-title { font-style: normal; font-weight: 700; color: var(--text-primary); }

/* Butonul plutitor „+" NU apare în chat (cerință 8.1): se suprapunea peste butonul
   de trimitere. Până acum dispărea doar pe ecran complet sau cu tastatura
   deschisă. `:has` lipsește doar pe browsere foarte vechi ⇒ acolo „+" rămâne, ca azi. */
body:has(#tab-chat.active) .to-fab,
body:has(#tab-chat.active) .to-fabmenu { display: none !important; }
/* Bara „← Club" (nav.js) dubla butonul ← din antet ⇒ ascunsă doar în chat. */
#tab-chat > #toBackBar { display: none; }

/* ── Chatul de club fără rame (8.1-b1) ─────────────────────────────────────────
   RO: Înainte era „cutie în cutie": cardul (ramă 2 px + 20 px spațiu interior) și,
       înăuntru, încă o ramă rotunjită în jurul conversației ⇒ la 375 px conversația
       avea 307 px lățime (măsurat). Acum e UN singur panou: antetul, căutarea,
       conversația și zona de scriere merg de la o margine la alta a lui.
       • Telefon/tabletă portret (≤ 768 px): panoul ocupă tot ecranul pe lățime,
         fără ramă (375 / 375 px).
       • Desktop: o singură ramă rotunjită (decizia D-b1 = A), fără „săritura" de
         5 px a cardurilor la trecerea mouse-ului (`.card:hover`, style.css).
       • Înălțimea rămâne cea de azi; umplerea ecranului pe înălțime vine în 8.1-b2.
   EN: one frameless panel instead of a framed card holding a framed container;
       edge to edge on phones, a single rounded frame on desktop. */
#chatCard { padding: 0; }
#chatCard:hover { transform: none; border-color: var(--border); }
#chatCard::before { display: none; }
/* 8.1-b2: bara de sus are culoarea barei aplicației (`.app-header`), deci pe telefon
   cele două se citesc ca un singur bloc; titlul e mai mic și fără umbră. */
#chatCard .chat-head {
  margin: 0;
  min-height: 56px;
  padding: 6px 6px 6px 16px;
  background: rgba(13, 16, 38, .92);
  border-bottom: 1px solid var(--border);
}
/* ⚠ Sub 480 px, style.css impune `.card-title { margin-bottom: 15px !important;
   font-size: 1em !important }`, care bătea `margin:0` din HTML ⇒ titlul stătea cu
   ~8 px mai sus decât butoanele. */
#chatCard .chat-head .card-title { margin: 0 !important; font-size: .9em !important; text-shadow: none; }
#chatCard .chat-container { border: none; border-radius: 0; background: var(--bg-primary); }
@media (max-width: 768px) {
  /* `margin: 0 -10px` anulează `padding: 10px` al `.container` (style.css, același
     prag) ⇒ de la o margine la alta. Doar în tab: pe ecran complet cardul e mutat
     în <body> și are regulile lui. */
  #tab-chat > #chatCard {
    margin: 0 -10px;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Ecranul complet, ca în WhatsApp (8.1-b1). Simptom reparat: pe telefoanele cu
   colțuri rotunjite, rama de 2 px de pe marginile ecranului și rama rotunjită a
   conversației (la 10 px deasupra marginii de jos) erau tăiate de colțuri ⇒ baza
   părea „decupată" (Samsung, ca la foaia meniului din 8.2-b). Acum nu mai există
   nicio ramă: fundalul merge până la margini, iar spațiul pentru decupajul camerei
   (sus, lateral în peisaj) și pentru bara de gesturi (jos) e păstrat de antet și de
   zona de scriere, nu de o ramă.
   EN: fullscreen chat without any frame; safe-area insets are kept by the header
       and the composer, so rounded screen corners only clip background. */
#chatCard.chat-fullscreen {
  border: none;
  box-shadow: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
}
#chatCard.chat-fullscreen .chat-container { border-radius: 0; }
/* `!important`: sub 768 px style.css impune `.chat-input-area { padding: 10px 12px !important }`. */
#chatCard.chat-fullscreen .chat-input-area { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
/* Cu tastatura deschisă: ACEEAȘI logică din style.css (`body.kb-open
   #chatCard.chat-fullscreen`, §59.5 iOS: `--vv-top`, `bottom: auto`, `--app-vh`
   rămân de acolo), doar mutată de pe card pe antet / zona de scriere:
     • sus, decalajul deja coborât cu `--vv-top` se scade din inset (fără +12 px:
       antetul are acum spațiul lui de 10 px);
     • jos, rezerva pentru bara de gesturi dispare (tastatura e peste ea). */
body.kb-open #chatCard.chat-fullscreen {
  padding-top: max(0px, env(safe-area-inset-top, 0px) - var(--vv-top, 0px));
  padding-bottom: 0;
}
body.kb-open #chatCard.chat-fullscreen .chat-input-area { padding-bottom: 10px !important; }

/* ── Chatul pe toată înălțimea, în tab (8.1-b2) ───────────────────────────────
   RO: Cerința: chatul se întinde de la bara de sus (cu selectorul de cluburi) până
       la bara de navigare de jos. Înainte, conversația avea înălțime FIXĂ: 420 px pe
       orice telefon (`min-height: 420px !important` din style.css bătea `height`),
       500 px pe desktop ⇒ dedesubt rămânea gol, iar pagina derula.
       `--chat-fill` e MĂSURATĂ de chat-core.js (documentul = exact înălțimea
       ferestrei). Cu tastatura deschisă câștigă în continuare `--chat-avail`
       (modulul de tastatură din app-core.js, §59), neatins.
   EN: the chat tab fills the viewport height; measured in chat-core.js. */
#tab-chat > #chatCard { margin-bottom: 0; }
/* Balonul de indicii (`#global-tooltip`, app-modules-3.js) e `position: absolute`
   fără `top/left` până la prima folosire ⇒ stătea sub conținut și lungea pagina cu
   19 px (măsurat pe desktop, cu chatul pe toată înălțimea ⇒ pagina derula). În
   repaus îl ținem sus-stânga; e oricum invizibil (`opacity: 0`) și nu primește
   clicuri. La folosire, JS-ul lui scrie `top/left` direct pe element și câștigă. */
#global-tooltip { top: 0; left: 0; }
#tab-chat > #chatCard.chat-fill .chat-container { height: var(--chat-fill) !important; min-height: 0 !important; }
@media (max-width: 768px) {
  body.kb-open #tab-chat > #chatCard.chat-fill .chat-container { height: var(--chat-avail, calc(100dvh - 92px)) !important; }
  /* Spațiile dintre bara de sus și chat (24 px sub antet + 30 px sub rândul de
     taburi, care se suprapun ⇒ 30 px) și de sub chat (20 px + 12 px peste bara de
     jos) dispar DOAR în chat. Rezerva pentru bara de jos rămâne exact cât bara.
     Fără `:has` (browsere foarte vechi) spațiile rămân, ca azi. Cu tastatura
     deschisă regulile `!important` din style.css câștigă, ca azi. */
  body:has(#tab-chat.active) .app-header { margin-bottom: 0; }
  body:has(#tab-chat.active) .tabs-container { margin-bottom: 0; }
  body:has(#tab-chat.active) #mainContainer { padding-bottom: 0; }
  body.to-nav-on:has(#tab-chat.active) { padding-bottom: calc(var(--to-nav-h, 58px) + env(safe-area-inset-bottom, 0px)); }
}

/* ── Zona de scriere plutitoare + câmp unitar (8.1-b2) ─────────────────────────
   RO: Ca în WhatsApp: fără bară de fundal sub câmp; câmpul și butonul ➤ plutesc
       peste conversație. Câmpul are EXACT înălțimea butonului ➤ și capete complet
       rotunde (raza = jumătate din înălțime): 48 px pe telefon, 46 px pe desktop.
       Înainte: câmp ~58 px cu raza 22 px lângă un buton de 44 px (captura Samsung).
       • Mărimea și raza se aplică și în mesajele private (aceleași clase); culorile
         și transparența, doar în chatul de club (DM-ul se reface în 8.1-c).
       • `!important` pe padding-ul câmpului: style.css impune pe telefon
         `.chat-input { padding: 16px 14px !important }`.
       • Fontul rămâne 16 px pe telefon (sub 16 px iOS mărește pagina la focus).
   EN: floating composer; the field matches the send button's height and radius. */
.chat-input-area { --ci-size: 46px; }
@media (max-width: 768px) { .chat-input-area { --ci-size: 48px; } }
.chat-input-wrap {
  min-height: var(--ci-size);
  border-width: 1px;
  border-radius: calc(var(--ci-size) / 2);
}
.chat-input-wrap > .chat-input {
  min-height: 0;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.chat-input-area .chat-send-btn {
  width: var(--ci-size) !important;
  height: var(--ci-size) !important;
  min-height: 0;
}
#chatCard .chat-input-area,
#dmModal .chat-input-area {
  background: transparent;
  border-top: none;
  gap: 8px;
  padding: 4px 10px 10px !important;
}
#chatCard .chat-input-wrap,
#dmModal .chat-input-wrap {
  background: var(--bg-secondary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
#chatCard .chat-send-btn,
#dmModal .chat-send-btn { box-shadow: 0 2px 10px rgba(255, 107, 53, .35); }
/* Bara „Răspunde lui…" plutește și ea, deasupra câmpului. */
#chatCard .chat-reply-bar,
#dmModal .chat-reply-bar {
  margin: 6px 10px 0;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-primary, #ff6b35);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

/* ── Căutarea plutitoare (8.1-b2) ──────────────────────────────────────────────
   RO: Înainte: un câmp lipit între antet și conversație, cu 🔍 în textul de
       umplere (nu se potrivea cu iconițele aplicației) și fără buton de închidere
       ⇒ părea decupat (captura Samsung). Acum: o capsulă care plutește deasupra
       mesajelor, cu lupa aplicației la stânga și ✕ la dreapta (chat-core.js leagă
       ✕ și Escape). Font 16 px pe ecranele tactile (iOS mărea pagina la focus cu
       vechiul 13 px).
   EN: floating search pill with the app's icon set and an inline close button. */
#chatCard .chat-search-bar,
#dmModal .chat-search-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  /* 8.1-b3: fâșie de fundal sub capsulă — cu 0 px, rama portocalie (focus) atingea
     bulele portocalii derulate dedesubt și păreau lipite (captura Samsung).
     8.1-c1: 5 px (10 px i s-au părut lui Alex prea mult). */
  margin: 8px 10px 5px;
  padding: 0 2px 0 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
#chatCard .chat-search-bar[hidden],
#dmModal .chat-search-bar[hidden] { display: none; }
#chatCard .chat-search-bar:focus-within,
#dmModal .chat-search-bar:focus-within { border-color: var(--accent-primary, #ff6b35); }
#chatCard .chat-search-bar > .fa-search,
#dmModal .chat-search-bar > .fa-search { flex: 0 0 auto; color: var(--text-secondary); font-size: .9em; }
#chatCard .chat-search-input,
#chatCard .chat-search-input:focus,
#dmModal .chat-search-input,
#dmModal .chat-search-input:focus {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 10px 6px;
  border: none;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  font-size: 14px;
}
.chat-search-x {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  font-size: .95em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-search-x:hover { color: var(--text-primary); background: rgba(255, 255, 255, .07); }
.chat-search-x:focus-visible { outline: 2px solid var(--accent-primary, #ff6b35); outline-offset: -2px; }
@media (pointer: coarse) {
  #chatCard .chat-search-input,
  #chatCard .chat-search-input:focus,
  #dmModal .chat-search-input,
  #dmModal .chat-search-input:focus { font-size: 16px; }
  .chat-search-x { width: 44px; height: 44px; }
}

/* ── Bare de derulare subțiri și discrete (8.1-b3, club + DM) ─────────────────
   RO: Înainte: bara globală a aplicației (12 px, portocalie, style.css ~2371),
       foarte vizibilă lângă mesaje. Ca în WhatsApp: subțire, gri translucid, fără
       șină. `scrollbar-width/-color` (Chrome/Edge 121+, Firefox, Safari 26+) au
       prioritate; `::-webkit-scrollbar` rămâne pentru browserele mai vechi.
       Doar în liste de mesaje și în câmpul de scriere; restul aplicației, neschimbat.
   EN: thin, subtle scrollbars in message lists and the composer only. */
#chatMessages,
#dmThread,
textarea.chat-input {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
#chatMessages::-webkit-scrollbar,
#dmThread::-webkit-scrollbar,
textarea.chat-input::-webkit-scrollbar { width: 6px; height: 6px; }
#chatMessages::-webkit-scrollbar-track,
#dmThread::-webkit-scrollbar-track,
textarea.chat-input::-webkit-scrollbar-track { background: transparent; }
#chatMessages::-webkit-scrollbar-thumb,
#dmThread::-webkit-scrollbar-thumb,
textarea.chat-input::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border: none; border-radius: 3px; }
#chatMessages::-webkit-scrollbar-thumb:hover,
#dmThread::-webkit-scrollbar-thumb:hover,
textarea.chat-input::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .35); }

/* ── Avatarul deschide profilul (8.1-b3) ──────────────────────────────────────
   Învelișul (`.chat-avatar-hit`, app-modules-2.js) are 44 px (32 + 2×6), iar
   marginile negative egale îl țin pe loc ⇒ avatarul nu se mută, doar ținta crește
   (6 px intră în spațiul de 8 px dintre avatar și bulă, fără s-o atingă). */
.chat-avatar-hit {
  flex: 0 0 auto;
  padding: 6px;
  margin: -6px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-avatar-hit:focus-visible { outline: 2px solid var(--accent-primary, #ff6b35); outline-offset: -4px; }
/* Poza nu mai mărește la clic în chat (chat-core.js) ⇒ fără cursorul de „zoom"
   din stilul inline al pozei (`avatarHtml`), de unde `!important`. */
.chat-avatar-hit .chat-avatar img { cursor: pointer !important; }

/* ── Meniul mesajului (8.2) — construit de chat-core.js (`TO_CHAT.menu`) ─────
   Simptom reparat: la apăsarea lungă, degetul selecta textul butoanelor din
   meniu. Restul aspectului vine din `.msg-menu*` (style.css). */
.msg-menu,
.msg-menu * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.msg-menu-head {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  border-bottom: 1px solid var(--border);
}
.msg-menu-head .msg-menu-preview { flex: 1 1 auto; min-width: 0; border-bottom: none; }
.msg-menu-x {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 2px 2px 0 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.05em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-menu-x:hover { color: var(--text-primary); background: var(--bg-secondary); }
.msg-menu-item { min-height: 44px; }                       /* țintă de atingere ≥ 44 px */
.msg-menu-item:focus-visible,
.msg-menu-x:focus-visible { outline: 2px solid var(--accent-primary, #ff6b35); outline-offset: -2px; }
/* Inert cât timp degetul care a deschis meniul e încă pe ecran (chat-core.js). */
.msg-menu.is-inert .msg-menu-item,
.msg-menu.is-inert .msg-menu-x { pointer-events: none; }
/* Bara de prindere există doar pe foaia de jos (dispozitive de atingere, mai jos). */
.msg-menu-grip { display: none; }

/* D1: pe dispozitivele de atingere, meniul urcă de jos (la îndemâna degetului
   mare), respectând zona de jos a telefoanelor fără buton (safe-area). */
@media (pointer: coarse) {
  .modal.msg-menu-modal { align-items: flex-end; padding: 0; }
  /* ⚠ Sub 768 px, style.css impune tuturor ferestrelor `width/max-width: 95%` și
     `margin: 10px` cu `!important` (~2505) ⇒ foaia ieșea îngustă (355 px din 375)
     și dezlipită de jos cu 10 px (măsurat). Suprascriem DOAR pentru acest meniu. */
  /* 8.2-b: fără chenare laterale/jos — pe ecranele cu colțuri rotunjite, chenarele
     care coborau până la marginea de jos erau tăiate de colțuri și foaia părea
     „decupată" (captura de pe Samsung). Ca în aplicațiile native: foaia merge de la
     o margine la alta, doar marginea de sus e rotunjită. */
  .msg-menu-modal .modal-content.msg-menu {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    border-radius: 18px 18px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    max-height: 85vh;
    overflow-y: auto;
  }
  /* Bara de prindere de sus (8.2-d): tragi foaia în jos ca s-o închizi (chat-core.js).
     Element real (nu `::before`), ca să primească atingerea; înalt de 20 px pentru
     o țintă comodă, desenat ca o bară de 40×4. Împreună cu rândul cu textul și ✕
     formează zona de tras: `touch-action: none` ⇒ browserul nu derulează și nu
     face „trage pentru reîncărcare" acolo. */
  .msg-menu-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    margin-bottom: 2px;
  }
  .msg-menu-grip::after {
    content: '';
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
  }
  .msg-menu-grip,
  .msg-menu-modal .msg-menu-head { touch-action: none; }
  /* Revenirea la loc / alunecarea la închidere (setate din JS pe `transform`). */
  .msg-menu-modal .msg-menu { transition: transform .2s ease; }
  /* Spațiu de respirație jos (ultima opțiune nu mai stă în zona colțurilor
     rotunjite) + zona barei de gesturi a telefoanelor fără buton fizic. Element
     separat, fiindcă `padding`-ul ferestrei e impus cu `!important` sub 768 px. */
  .msg-menu-modal .msg-menu::after { content: ''; display: block; height: calc(16px + env(safe-area-inset-bottom, 0px)); }
  /* D2: în bule, textul nu se mai selectează la apăsarea lungă (pornea selecția
     telefonului odată cu meniul); copierea se face din „Copiază", ca în WhatsApp.
     Pe desktop textul rămâne selectabil cu mouse-ul; câmpul de scriere, oriunde.
     8.8-c: TOATĂ lista (separatorul de zi, bara „necitite"…), nu doar bulele —
     telefonul selecta cel mai apropiat text selectabil (Alex: „uneori"). */
  #chatMessages,
  #dmThread,
  .chat-message .chat-text,
  .dm-msg > div {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .msg-menu-modal,
  .msg-menu-modal .msg-menu { animation: none; transition: none; }
}

/* ── DM cu tastatura deschisă: butonul ➤ rămâne în fereastră (8.1bis-B2) ────
   Fereastra DM e un `.modal` (82% din înălțime, cu derulare internă), iar firul
   conversației are `min-height: 200px` (stil inline în `openDM`). Cu tastatura
   deschisă și câmpul crescut, conținutul depășea fereastra ⇒ butonul ➤ ajungea sub
   marginea ei (confirmat pe Samsung, 6 rânduri). Doar cât e tastatura deschisă
   (`body.kb-open`, pus de modulul de tastatură din app-core.js):
     • firul poate coborî sub 200 px, ca să facă loc câmpului;
     • fereastra folosește toată înălțimea VIZIBILĂ (`--app-vh`), minus marginile.
   `!important` e necesar: valorile de bază sunt stiluri inline. Fără tastatură
   (și pe desktop) nu se schimbă nimic. Soluția completă: DM pe ecran complet (8.1).
   EN: with the keyboard open, let the DM thread shrink and the dialog use the
       visible height, so the grown field never pushes the send button out. */
body.kb-open #dmThread { min-height: 0 !important; }
body.kb-open #dmModal .modal-content { max-height: calc(var(--app-vh, 100vh) - 40px) !important; }

/* ── Conversația privată ca ECRAN (8.1-c1) ────────────────────────────────────
   RO: Înainte: o fereastră de 520 px × 82% (H9), cu titlul în antet și ✕. Acum,
       aceeași structură ca chatul de club (social.js, `openDM`, clasa `.dm-screen`):
       • bara de sus: [avatar + nume + @tag → profil public] … [←] [⋮ persoana];
       • firul de mesaje pe tot spațiul rămas, fundal `--bg-primary`;
       • zona de scriere plutitoare (regulile comune de mai jos, cu `#chatCard`).
       Telefon (≤ 768 px): tot ecranul, fără ramă, cu zonele sigure (decupaj sus,
       bara de gesturi jos); cu tastatura, aceeași logică iOS ca la chatul de club
       pe ecran complet (`--vv-top`, `--app-vh`, §59.5). Desktop: panou lat (720 px,
       85% din înălțime), centrat, fără ⤢ (decizia D-c1).
       `!important` doar unde style.css impune pe telefon tuturor ferestrelor
       `width/max-width: 95%`, `margin: 10px`, `padding: 15px` (~2503).
   EN: the DM becomes a full screen on phones and a wide panel on desktop. */
#dmModal .dm-panel {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
  background: var(--bg-primary);
}
.dm-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding: 6px 6px 6px 8px;
  background: rgba(13, 16, 38, .92);
  border-bottom: 1px solid var(--border);
}
/* Avatar + nume + @tag = un singur buton (țintă mare), care deschide profilul. */
.dm-who {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 2px 10px 2px 4px;
  border: none;
  border-radius: 24px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dm-who:hover { background: rgba(255, 255, 255, .05); }
.dm-who:focus-visible { outline: 2px solid var(--accent-primary, #ff6b35); outline-offset: 1px; }
.dm-who-av {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
}
/* Poza nu mai mărește la clic aici (social.js) ⇒ fără cursorul de „zoom" inline. */
.dm-who-av img { cursor: pointer !important; }
.dm-who-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dm-who-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-head-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
#dmModal #dmThread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;      /* derularea nu „trece" în pagina de dedesubt */
  padding: 12px 10px;
}
#dmModal .dm-blocked-bar { margin: 8px 10px 10px; }
@media (max-width: 768px) {
  #dmModal.dm-screen {
    padding: 0;
    background: var(--bg-primary);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #dmModal.dm-screen .dm-panel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: 100%;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px) !important;
  }
  #dmModal.dm-screen .chat-input-area { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
  #dmModal.dm-screen .dm-blocked-bar { margin-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* Tastatura: stratul se ancorează de zona VIZIBILĂ (iOS derulează viewportul
     vizual, nu-l micșorează pe cel de aspect); pe Android `--vv-top` e 0. */
  body.kb-open #dmModal.dm-screen { top: var(--vv-top, 0px); bottom: auto; height: var(--app-vh, 100%); }
  body.kb-open #dmModal.dm-screen .dm-panel {
    max-height: none !important;
    padding-top: max(0px, env(safe-area-inset-top, 0px) - var(--vv-top, 0px)) !important;
  }
  body.kb-open #dmModal.dm-screen .chat-input-area { padding-bottom: 10px !important; }
}
@media (min-width: 769px) {
  #dmModal.dm-screen .dm-panel {
    width: 720px;
    max-width: 100%;
    height: min(85vh, 860px);
    max-height: none;
    border-radius: 16px;
  }
}

/* ── Bulele DM (8.1-e, E0): mutate NESCHIMBATE din stilurile scrise în HTML
   (social.js); stilul calculat verificat identic. Stilul scris direct bătea CSS-ul.
   EN: DM bubble styles moved verbatim from inline styles. */
.dm-msg { display: flex; justify-content: flex-start; margin: 4px 0; }
.dm-msg[data-mine="1"] { justify-content: flex-end; }
.dm-bubble {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 14px;
  cursor: pointer;
  background: var(--bg-secondary, #181826);
  border: 1px solid var(--border, #333);
  border-bottom-left-radius: 4px;
}
.dm-msg[data-mine="1"] .dm-bubble {
  background: var(--cp-bub, var(--gradient-primary, #ff6b35));   /* 8.8-b: tema + cerneala */
  color: var(--ob-ink, #fff);
  border: none;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}
.dm-reply-quote {
  border-left: 3px solid rgba(255, 255, 255, .5);
  padding: 2px 8px;
  margin-bottom: 5px;
  font-size: 0.78em;
  opacity: 0.85;
  border-radius: 4px;
  background: rgba(0, 0, 0, .12);
}
.dm-reply-quote.is-link { cursor: pointer; }
.dm-reply-quote > .fa-reply { opacity: .7; }
.dm-text { white-space: pre-wrap; word-break: break-word; }
.dm-meta { font-size: 0.66em; margin-top: 3px; text-align: right; }
.dm-time { opacity: 0.7; }

/* ── Textul din bule păstrează rândurile (8.1bis, H13) ───────────────────────
   Fără asta, un mesaj scris pe mai multe rânduri apărea lipit pe unul singur.
   Ruperea cuvintelor foarte lungi (URL-uri) o face deja `.chat-message`
   (`word-break: break-word`). Verificat înainte de schimbare: niciun mesaj
   existent nu conținea rânduri noi sau spații duble ⇒ nimic nu arată altfel. */
.chat-text { white-space: pre-wrap; }

/* ── „Citește tot" la mesajele lungi (8.1bis-A2) ────────────────────────────
   Bula arată cel mult 12 rânduri (cum apar pe ecran), cu „…" pus de browser.
   `-webkit-line-clamp` merge în Chrome, Safari și Firefox (cu prefixul -webkit-).
   Butonul e ascuns până când chat-core.js vede că textul chiar depășește. */
.chat-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 12;
  line-clamp: 12;
  overflow: hidden;
}
.chat-clamp.is-open {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
}

/* Buton-text sub textul scurtat, ca în WhatsApp. Ținta de atingere are ~45 px
   înălțime (padding 12 px sus/jos), iar marginile negative egale o țin în rând,
   fără să mărească bula. Contrast: portocaliul pe bula altcuiva = 5,7:1 (WCAG
   AA); pe bula proprie moștenește culoarea textului mesajului. */
.chat-more[hidden] { display: none; }
.chat-more {
  display: inline-block;
  padding: 12px 4px;
  margin: -12px -4px;
  background: none;
  border: none;
  font: inherit;
  font-weight: 700;
  color: var(--accent-primary, #ff6b35);
  text-decoration: underline;
  cursor: pointer;
}
.chat-message.own .chat-more,
.dm-msg[data-mine="1"] .chat-more { color: inherit; }   /* bula proprie e portocalie: portocaliu pe portocaliu nu s-ar vedea */
.chat-more:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }

/* ── Separatorul de zi (8.1-c1bis, club + DM) ─────────────────────────────────
   RO: „Azi" / „Ieri" / ziua / data, între mesajele din zile diferite
       (chat-core.js, `TO_CHAT.day`). Discret, la cererea lui Alex: text mic, gri,
       pe o capsulă abia vizibilă; nu reacționează la atingere (nu e buton).
       Contrast text/fundal ≈ 7:1 (WCAG AA).
   EN: subtle day separator between messages from different days. */
.chat-day {
  display: flex;
  justify-content: center;
  margin: 6px 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.chat-day > span {
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: var(--text-secondary);
  font-size: .72em;
  letter-spacing: .02em;
}

/* ── Bara „N mesaje necitite" (8.1-c2a, club + DM) ────────────────────────────
   Ca în WhatsApp: o fâșie pe toată lățimea, ceva mai vizibilă decât separatorul
   de zi (tentă portocalie), deasupra primului mesaj necitit. Contrast ≈ 7:1. */
.chat-unread {
  display: flex;
  justify-content: center;
  margin: 4px -20px;            /* pe toată lățimea listei (anulează spațiul ei lateral) */
  padding: 5px 0;
  background: rgba(255, 107, 53, .10);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
#dmModal .chat-unread { margin-left: -10px; margin-right: -10px; }
.chat-unread > span {
  color: var(--accent-secondary, #f7931e);
  font-size: .74em;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ── Butonul ↓ „la ultimele mesaje" (8.1-c2a, club + DM) ──────────────────────
   Mic (36 px), rotund, fundal semitransparent + estompare, deasupra butonului ➤
   și centrat pe aceeași verticală (➤ are 48/46 px la 10 px de margine ⇒ centru la
   ~34 px ⇒ `right: 16px`). `bottom` îl pune chat-core.js, chiar deasupra zonei de
   scriere. Ținta de atingere crește la 44 px printr-un `::before` invizibil. */
#chatCard .chat-container,
#dmModal .dm-panel { position: relative; }
.chat-down {
  position: absolute;
  right: 16px;
  bottom: 80px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(26, 31, 58, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text-primary);
  font-size: .9em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  padding: 0;
}
.chat-down[hidden] { display: none; }
/* 8.1-c2b: câte mesaje noi au sosit cât citeai mai sus (ca în WhatsApp). Pe
   portocaliul aplicației, text ÎNCHIS (`--bg-primary`): contrast 6,7:1 (calculat, WCAG AA);
   albul ar fi dat doar 2,84:1 la 11 px. */
.chat-down-badge {
  position: absolute;
  top: -7px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent-primary, #ff6b35);
  color: var(--bg-primary, #0a0e27);
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.chat-down-badge[hidden] { display: none; }
.chat-down::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
.chat-down:hover { background: rgba(37, 43, 74, .9); }
.chat-down:focus-visible { outline: 2px solid var(--accent-primary, #ff6b35); outline-offset: 2px; }

/* ── Bifele de „văzut" (8.1-c2c, club + DM) ──────────────────────────────────
   ✓ trimis · ✓✓ văzut (ca înainte) · ✓✓ ALBASTRU ÎNCHIS = văzut de toți (club) /
   citit (DM), ca în WhatsApp. Pe bula proprie portocalie, #17306b are contrast
   4,4–5,5:1 (calculat pe ambele capete ale gradientului; minimul pentru elemente
   grafice e 3:1). ⚠ Bifele albe de până acum au doar 2,1–2,8:1 — lăsate cum
   erau, la cererea lui Alex. */
.chat-message.own .chat-seen.all,
.dm-msg[data-mine="1"] .chat-seen.all { color: var(--ob-tick-all); opacity: 1; }   /* 8.8-b: și pe bulele închise (#17306b era invizibil acolo) */
/* În DM bifele stau în rândul orei (deja la 0,66em) ⇒ fără micșorarea a doua din style.css. */
.dm-msg .chat-seen { font-size: 1em; margin-left: 4px; }
.dm-msg[data-mine="1"] .chat-seen { color: var(--ob-tick); }

/* ── Mesaj șters cu urmă + „Redirecționat" (B2a, club + DM) ──────────────────
   Urma e cursivă, cu iconița 🚫, ca în WhatsApp. Pe bula altcuiva: culoarea
   secundară (#a0a8b8 pe #1a1f3a = 6,75:1, AA). Pe bula proprie: albul textului
   obișnuit (contrastul bulei portocalii e cel de dinainte, neschimbat).
   Fără `opacity`: ar scădea contrastul sub pragul AA. */
.chat-deleted { font-style: italic; color: var(--text-secondary, #a0a8b8); }
.chat-message.own .chat-deleted,
.dm-msg[data-mine="1"] .chat-deleted { color: inherit; }
.chat-deleted .fa-ban { margin-right: 2px; }
.chat-fwd { font-size: .78em; font-style: italic; color: var(--text-secondary, #a0a8b8); margin-bottom: 3px; }
.dm-msg[data-mine="1"] .chat-fwd { color: var(--ob-ink); }

/* ── Bara „nu poți trimite mesaje" comutată pe loc (B2b, H24) ─────────────────
   Bara și zona de scriere sunt amândouă în pagină; una are `hidden` (social.js,
   `_dmSyncBlock`). `!important`: `.chat-input-area` are `display: flex`, care altfel
   bate atributul `hidden`. */
#dmModal .dm-blocked-bar[hidden],
#dmModal .chat-input-area[hidden] { display: none !important; }

/* ── „Se încarcă mesajele mai vechi…" (8.1-c3a) ──────────────────────────────
   Capsulă discretă sus, peste listă (nu în ea, ca să nu mute rândurile), cât vine
   pagina de pe server. Același fundal semitransparent ca butonul ↓. */
.chat-older {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 5px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(26, 31, 58, .85);
  color: var(--text-primary);
  font-size: .78em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.chat-older[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .chat-older .fa-spin { animation: none; } }

/* ── Pozele din mesaj, în colaj (8.1-p, club + DM) ───────────────────────────
   Cerut de Alex: ca în WhatsApp — pozele sus, textul dedesubt, mai multe poze
   grupate ca să nu umple ecranul (înainte: pătrate de 120 px unul după altul).
   1 = o poză mare (4:3) · 2 = alăturate · 3 = una lată sus + două · 4 = 2×2.
   Raport de aspect FIX ⇒ bula își știe înălțimea înainte să vină poza (nu sare
   lista). Bate `.chat-photos` din style.css (același selector, încărcat după). */
.chat-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 260px;
  max-width: 100%;
  margin: 2px 0 6px;
  border-radius: 12px;
  overflow: hidden;
}
.chat-photos img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  cursor: zoom-in;
}
.chat-photos.n1 { grid-template-columns: 1fr; }
.chat-photos.n1 img { aspect-ratio: 4 / 3; }
.chat-photos.n3 img:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.chat-photos img:nth-child(n+5) { display: none; }
.chat-photos-more {
  grid-area: 2 / 2 / 3 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 1.5em;
  font-weight: 700;
  pointer-events: none;
}
/* Browsere fără `aspect-ratio` (iOS sub 15): înălțimi fixe, ca înainte. */
@supports not (aspect-ratio: 1 / 1) {
  .chat-photos img { height: 120px; }
  .chat-photos.n1 img { height: 195px; }
}
/* Mesaj doar cu poze: fără rând gol de text sub ele. */
.chat-message .chat-text:empty { display: none; }

/* ── Trimiterea cu stare (8.1-s, club + DM) ──────────────────────────────────
   🕓 cât se trimite; la eșec, sub bulă: „Nu s-a trimis · Atinge pentru a
   reîncerca" (buton, ≥ 44 px înălțime). Fundal 35 % negru peste bula portocalie:
   albul are ≥ 5:1 pe ambele capete ale gradientului (#a64622 / #a16014). */
.chat-seen.pending { opacity: .9; }
.chat-seen.pending .fa-clock { font-size: .95em; }
.chat-retry {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 6px 0 0 auto;
  padding: 6px 12px;
  border: none;
  border-radius: 12px;
  background: var(--ob-retry-bg, rgba(0, 0, 0, .35));   /* 8.8-b: mai închis pe bulele cu text închis */
  color: #fff;
  font: inherit;
  font-size: .8em;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.chat-retry .fa-circle-exclamation { color: #ffe1dc; }
.chat-retry:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chat-photos.is-local img { opacity: .8; cursor: default; }

/* ══ 8.1-e — BULELE CA ÎN WHATSAPP (club + DM; D20–D23, 15 oct.) ══════════════
   Doar pe `#chatMessages` / `#dmThread`. Pe telefon style.css impune bulei de club
   `max-width: 90%; padding: 12px` cu `!important` (~2601) ⇒ aici tot `!important`,
   cu specificitate mai mare (lecția 8.2-a). EN: WhatsApp-like bubbles. */

/* E1 (D21): fontul sistemului în conversații, 0 kB. `Space Mono` dădea ~23 de
   caractere pe rând pe telefon ⇒ bule foarte înalte. Titlurile rămân retro.
   `line-height` fix: înălțimea „normală" diferă între Roboto / Segoe UI / SF; în
   câmp 22 px la 16 px (vechiul rând: 23,7 px). EN: system font, fixed line height. */
:root {
  --chat-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}
#chatMessages,
#dmThread,
textarea.chat-input,
#chatCard .chat-search-input,
#dmModal .chat-search-input,
#chatCard .chat-reply-bar,
#dmModal .chat-reply-bar,
.msg-menu-preview,
.chat-day-float { font-family: var(--chat-font); }
#chatMessages .chat-message,
#dmThread .dm-bubble { line-height: 1.35; }
textarea.chat-input { line-height: 1.375; }

/* E2 (D20): grupare. Clasele le pune chat-core.js (`TO_CHAT.group`) după desenare:
   `g-cont` = continuă grupul de deasupra; `g-sub` = fără nume / avatar. 10 px între
   grupuri, 2 px în grup (înainte 15 px). Avatarul ascuns păstrează locul și iese din
   ordinea Tab; numele e ascuns doar vizual (cititorul de ecran îl citește). Fără
   clase, totul arată ca înainte. EN: grouping via classes toggled after render. */
#chatMessages { gap: 10px; }
#chatMessages > .chat-row.g-cont { margin-top: -8px; }
#chatMessages > .chat-row:not(.own):not(.system) { align-items: flex-start; }
#chatMessages .chat-row.g-sub .chat-avatar-hit { visibility: hidden; }
#chatMessages .chat-row.g-sub .chat-sender {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Coada bulei, sus: la ceilalți lângă avatar, la mesajele proprii pe primul din grup. */
#chatMessages .chat-row:not(.system) > .chat-message { border-radius: 4px 14px 14px 14px; }
#chatMessages .chat-row:not(.system) > .chat-message.own { border-radius: 14px 4px 14px 14px; }
#chatMessages .chat-row.g-sub:not(.own) > .chat-message,
#chatMessages .chat-row.own.g-cont > .chat-message { border-radius: 14px; }
/* DM: doar spațierea și coada; doar margini de sus (nu se mai „topesc" între ele). */
#dmThread .dm-msg { margin: 8px 0 0; }
#dmThread .dm-msg.g-cont { margin-top: 2px; }
#dmThread .dm-bubble { border-radius: 4px 14px 14px 14px; }
#dmThread .dm-msg[data-mine="1"] .dm-bubble { border-radius: 14px 4px 14px 14px; }
#dmThread .dm-msg.g-cont .dm-bubble { border-radius: 14px; }

/* E3a: colajul la 3 px de marginea bulei (colțuri 14 − 3 = 11 px); restul păstrează
   12 px (9 + 3). Bula = lățimea colajului (266 px), textul se rupe sub poze.
   EN: 3 px inset collage; bubble as wide as the collage. */
#chatMessages .chat-row:not(.system) > .chat-message.has-photos,
#dmThread .dm-bubble.has-photos { width: 266px; padding: 3px 3px 5px; }
@media (max-width: 768px) {
  #chatMessages .chat-row:not(.system) > .chat-message.has-photos { padding: 3px 3px 5px !important; }
}
#chatMessages .chat-message.has-photos > .chat-photos,
#dmThread .dm-bubble.has-photos > .chat-photos { width: auto; margin: 0; border-radius: 11px; }
#chatMessages .chat-message.has-photos > .chat-sender,
#chatMessages .chat-message.has-photos > .chat-reply-quote,
#chatMessages .chat-message.has-photos > .chat-text,
#chatMessages .chat-message.has-photos > .chat-meta,
#dmThread .dm-bubble.has-photos > .chat-fwd,
#dmThread .dm-bubble.has-photos > .dm-reply-quote,
#dmThread .dm-bubble.has-photos > .dm-text,
#dmThread .dm-bubble.has-photos > .dm-meta { margin-left: 9px; margin-right: 9px; }
#chatMessages .chat-message.has-photos > .chat-sender,
#chatMessages .chat-message.has-photos > .chat-reply-quote,
#dmThread .dm-bubble.has-photos > .chat-fwd,
#dmThread .dm-bubble.has-photos > .dm-reply-quote { margin-top: 3px; }
#chatMessages .chat-message.has-photos > .chat-photos + .chat-text,
#dmThread .dm-bubble.has-photos > .chat-photos + .dm-text { margin-top: 5px; }
#dmThread .dm-bubble.has-photos > .dm-text:empty { display: none; }
#chatMessages .chat-message.has-photos > .chat-retry,
#dmThread .dm-bubble.has-photos > .chat-retry { margin-right: 3px; }

/* E3b (D22): urma ștearsă = bulă transparentă cu contur, fără nume / avatar (`g-sub`).
   Se estompează BULA, nu textul: #a0a8b8 pe #0a0e27 = 7,95:1; ora fără transparență
   (cu 0,7 ar fi ~4,3:1, sub AA). EN: outlined trace, readable text. */
#chatMessages .chat-row > .chat-message.is-deleted,
#dmThread .dm-bubble.is-deleted {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  box-shadow: none;
}
#chatMessages .chat-message.is-deleted .chat-time,
#dmThread .dm-bubble.is-deleted .dm-time { opacity: 1; }

/* E4 (D23): inițiale colorate (chat-core.js, `TO_CHAT.initials`), culoarea din id;
   alb pe fiecare culoare ≥ 5:1 (calculat). EN: initials; white ≥ 5:1 on each colour. */
.to-ini {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-family: var(--chat-font);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  -webkit-user-select: none;
  user-select: none;
}
.to-ini-c0 { background: #c62828; }   /* 5,62:1 */
.to-ini-c1 { background: #b45309; }   /* 5,02:1 */
.to-ini-c2 { background: #2e7d32; }   /* 5,13:1 */
.to-ini-c3 { background: #00796b; }   /* 5,32:1 */
.to-ini-c4 { background: #1565c0; }   /* 5,75:1 */
.to-ini-c5 { background: #4338ca; }   /* 7,90:1 */
.to-ini-c6 { background: #7b1fa2; }   /* 8,20:1 */
.to-ini-c7 { background: #ad1457; }   /* 6,97:1 */

/* E5a: ziua de sus, într-o capsulă, cât derulezi (chat-core.js); în afara listei,
   fără atingeri, ascunsă cititorului de ecran. #e0e6ed pe #1a1f3a = 12,8:1.
   EN: floating day pill while scrolling. */
.chat-day-float {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.chat-day-float.is-on { opacity: 1; visibility: visible; }
.chat-day-float > span {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(26, 31, 58, .92);
  color: var(--text-primary);
  font-size: .72em;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
@media (prefers-reduced-motion: reduce) { .chat-day-float { transition: none; } }

/* E5b: lățimea bulelor — desktop max 70% / 600 px (înainte 78%, peste 800 px pe
   ecran lat); telefon 85% (înainte 90% club / 78% DM); spațiul din bula de club pe
   telefon 8 × 12 px, ca în rest (înainte 12 px). EN: bubble widths and padding. */
#chatMessages .chat-row:not(.system) > .chat-message,
#dmThread .dm-bubble { max-width: 70%; max-width: min(70%, 600px); }
@media (max-width: 768px) {
  #chatMessages .chat-row:not(.system) > .chat-message { max-width: 85% !important; padding: 8px 12px !important; }
  #dmThread .dm-bubble { max-width: 85%; }
}

/* ══ 8.1-f — ORA ÎN LINIE, FORMATARE, @MENȚIUNI (club + DM, 16 oct.) ══════════ */

/* Ora în colțul ultimului rând (`meta-in`): textul se termină cu un loc invizibil cât
   ora (+ bifele, `.chat-meta-sp`); dacă rândul are loc, ora stă alături, altfel
   locul coboară singur pe un rând nou. Un „yo" ocupă un rând, nu două.
   EN: WhatsApp-style inline time via an invisible spacer. */
#dmThread .dm-bubble { position: relative; }
#chatMessages .chat-message.meta-in > .chat-meta,
#dmThread .dm-bubble.meta-in > .dm-meta {
  position: absolute;
  right: 12px;
  bottom: 6px;
  margin: 0;
  line-height: 1;
}
#chatMessages .chat-message.meta-in > .chat-meta > *,
#chatMessages .chat-message.meta-photo > .chat-meta > * { margin-top: 0; }
#chatMessages .chat-message.has-photos.meta-in > .chat-meta,
#dmThread .dm-bubble.has-photos.meta-in > .dm-meta { right: 12px; bottom: 4px; margin: 0; }
.chat-meta-sp {
  display: inline-block;
  visibility: hidden;
  padding-left: 8px;
  font-size: .7em;
  line-height: 1;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.chat-meta-sp.has-tick::after { content: '\2713\2713'; margin-left: 6px; font-size: .886em; }
#dmThread .chat-meta-sp { font-size: .66em; }
#dmThread .chat-meta-sp.has-tick::after { margin-left: 4px; font-size: 1em; }

/* Mesaj doar cu poze: ora și bifele peste colțul pozei, pe o pastilă închisă (alb pe
   60% negru = 5,74:1 chiar peste o poză albă; bifele „văzut de toți" #bdeeff = 4,6:1).
   Nu primește atingeri ⇒ apăsarea ajunge la poză (galeria). EN: time over the photo. */
#chatMessages .chat-row:not(.system) > .chat-message.meta-photo,
#dmThread .dm-bubble.meta-photo { padding: 3px; }
@media (max-width: 768px) {
  #chatMessages .chat-row:not(.system) > .chat-message.has-photos.meta-photo { padding: 3px !important; }
}
#chatMessages .chat-message.meta-photo > .chat-meta,
#dmThread .dm-bubble.meta-photo > .dm-meta {
  position: absolute;
  right: 9px;
  bottom: 9px;
  margin: 0;
  padding: 3px 7px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  line-height: 1;
  pointer-events: none;
}
#chatMessages .chat-message.meta-photo .chat-time,
#dmThread .dm-bubble.meta-photo .dm-time { opacity: 1; }
#chatMessages .chat-message.meta-photo .chat-seen,
#dmThread .dm-bubble.meta-photo .chat-seen { color: #fff; opacity: 1; }
#chatMessages .chat-message.meta-photo .chat-seen.all,
#dmThread .dm-bubble.meta-photo .chat-seen.all { color: #bdeeff; }

/* Mesaj șters pe un singur rând (🚫 text · ora), mai compact. */
#chatMessages .chat-row > .chat-message.is-deleted,
#dmThread .dm-bubble.is-deleted { padding: 6px 10px; }
@media (max-width: 768px) {
  #chatMessages .chat-row:not(.system) > .chat-message.is-deleted { padding: 6px 10px !important; }
}
#chatMessages .chat-message.is-deleted.meta-in > .chat-meta,
#dmThread .dm-bubble.is-deleted.meta-in > .dm-meta { right: 10px; bottom: 5px; }

/* Formatarea ca în WhatsApp (chat-core.js, `TO_CHAT.fmt`). Citatul „> " și listele
   sunt blocuri pe toată lățimea bulei, dar rămân în fluxul textului (`pre-wrap`). */
#chatMessages .chat-code,
#dmThread .chat-code,
#chatMessages .chat-pre,
#dmThread .chat-pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .9em; }
#chatMessages .chat-code,
#dmThread .chat-code { padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, .25); }
#chatMessages .chat-message.own .chat-code,
#dmThread .dm-msg[data-mine="1"] .chat-code { background: var(--ob-code-bg); }   /* 8.8-b */
.chat-fq,
.chat-li { display: inline-block; width: 100%; box-sizing: border-box; }
.chat-fq { padding-left: 8px; border-left: 3px solid rgba(255, 255, 255, .35); }
.chat-li { padding-left: 1.1em; text-indent: -1.1em; }

/* @mențiunile din bule: portocaliu pe bula altcuiva (5,69:1); pe bula proprie,
   culoarea textului + subliniere; pe tine — fundal colorat, text #ffb08f (6,87:1). */
.chat-mention { font-weight: 600; color: var(--accent-primary, #ff6b35); cursor: pointer; }
.chat-message.own .chat-mention { color: inherit; text-decoration: underline; }
.chat-mention.is-me { color: #ffb08f; background: rgba(255, 107, 53, .2); border-radius: 4px; padding: 0 2px; }
.chat-message.own .chat-mention.is-me { color: inherit; background: var(--ob-mention-bg); }

/* Lista „@" deasupra câmpului de scriere (chat-core.js). Ținte de 44 px; copiii nu
   primesc clicuri ⇒ poza de profil din listă nu deschide galeria. */
.chat-mention-box {
  position: absolute;
  left: 10px;
  right: 10px;
  z-index: 4;
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  font-family: var(--chat-font);
}
.chat-mention-box[hidden] { display: none; }
.chat-mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px;
  color: var(--text-primary);
  cursor: pointer;
}
.chat-mention-item * { pointer-events: none; }
.chat-mention-item[aria-selected="true"],
.chat-mention-item:hover { background: rgba(255, 255, 255, .08); }
.chat-mention-av {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-mention-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 769px) { .chat-mention-box { right: auto; width: 320px; } }

/* ══ 8.1-g — POZA ÎN CITAT, TRAS PENTRU RĂSPUNS, SELECȚIE, FORMATARE ÎN CÂMP ════ */

/* Miniatura pozei din mesajul citat (bulă + bara „Răspunde"), ca în WhatsApp. */
.chat-reply-quote.has-ph,
.dm-reply-quote.has-ph { position: relative; padding-right: 52px; min-height: 48px; }
.chat-quote-ph {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  pointer-events: none;
}
.chat-reply-bar-ph {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
}

/* Tragi de un mesaj spre dreapta ⇒ răspuns (chat-core.js). `pan-y`: browserul
   derulează doar pe verticală, deci mișcarea orizontală ajunge la noi fără să
   blocăm derularea. EN: horizontal drags are ours, vertical scroll stays native. */
#chatMessages > .chat-row,
#dmThread > .dm-msg { touch-action: pan-y pinch-zoom; }
.chat-swipe-ic {
  position: absolute;
  left: -40px;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8em;
  opacity: 0;
  pointer-events: none;
}

/* Selecția mai multor mesaje: bara de sus + mesajele bifate. Text #e0e6ed pe
   #1a1f3a = 12,8:1; ținte de 44 px. EN: multi-select bar and selected rows. */
.chat-sel-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 6px 8px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  font-family: var(--chat-font);
}
@media (max-width: 768px) { #dmModal.dm-screen .dm-panel > .chat-sel-bar { top: env(safe-area-inset-top, 0px); } }
.chat-sel-n { flex: 1 1 auto; min-width: 0; color: var(--text-primary); font-weight: 600; }
.chat-sel-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-primary);
  font-size: 1.05rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-sel-btn:hover { background: rgba(255, 255, 255, .08); }
/* 8.4-d: 🗑 apare doar când toate mesajele bifate se pot șterge (`hidden` bate `inline-flex`) */
.chat-sel-btn[hidden] { display: none; }
.chat-sel-btn.is-del { color: var(--danger, #e74c3c); }
[data-cp-tone="light"] .chat-sel-btn.is-del { color: #c0392b; }   /* #ff6b6b pe alb = 2,8:1 (sub 3:1); #c0392b = 5,4:1 */
.chat-sel-btn:focus-visible { outline: 2px solid var(--accent-primary, #ff6b35); outline-offset: -2px; }
#chatMessages.is-selecting,
#dmThread.is-selecting { -webkit-user-select: none; user-select: none; }
#chatMessages.is-selecting > .chat-row,
#dmThread.is-selecting > .dm-msg { cursor: pointer; }
#chatMessages > .chat-row.is-sel,
#dmThread > .dm-msg.is-sel { background: rgba(255, 107, 53, .14); border-radius: 10px; }
#chatMessages > .chat-row.is-sel > .chat-message,
#dmThread > .dm-msg.is-sel > .dm-bubble { box-shadow: 0 0 0 2px var(--accent-primary, #ff6b35); }

/* Formatarea vizibilă în câmp (chat-core.js): „oglinda" stă sub câmp, cu ACELAȘI
   text; literele câmpului devin transparente doar cât oglinda e activă (`ci-live`).
   Nimic din oglindă nu schimbă lățimea literelor: îngroșat = contur, cursiv =
   compensat, cod = doar fundal. Markerele: #a0a8b8 pe #1a1f3a = 6,75:1.
   EN: mirror under a transparent-text textarea; width-neutral styles only. */
.chat-input-wrap { position: relative; }
.chat-input-wrap > textarea.chat-input { position: relative; z-index: 1; }
.ci-mirror {
  position: absolute;
  z-index: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: var(--text-primary);
  pointer-events: none;
}
.ci-mirror[hidden] { display: none; }
textarea.chat-input.ci-live { color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--text-primary); }
textarea.chat-input.ci-live::selection { color: transparent; -webkit-text-fill-color: transparent; background: rgba(255, 107, 53, .35); }
.ci-mirror .fl-m { color: var(--text-secondary); }
.ci-mirror .fl-b { -webkit-text-stroke: .4px currentColor; }
.ci-mirror .fl-i { font-style: italic; }
.ci-mirror .fl-s { text-decoration: line-through; }
.ci-mirror .fl-c { background: rgba(255, 255, 255, .1); border-radius: 3px; }
.ci-mirror .fl-at { color: var(--accent-primary, #ff6b35); }
.ci-probe { position: absolute; left: 0; top: 0; visibility: hidden; white-space: pre; }

/* ============================================================================
   v9 8.1-h — bara orizontală la tragere + răspunsul în capsula câmpului
   ----------------------------------------------------------------------------
   RO: • Tragi de un mesaj (8.1-g) ⇒ rândul se mută spre dreapta cu `transform`.
         Lista are `overflow-y: auto`, deci și `overflow-x` devenea `auto` (regula
         CSS) ⇒ apărea o bară de derulare orizontală (raportat de Alex). Pe orizontală
         lista nu are ce derula (bulele au lățime maximă), deci o ascundem.
       • Bula „Răspunde lui…" stă acum ÎN capsula câmpului, deasupra textului, ca în
         WhatsApp (chat-core.js o mută acolo). Capsula trece pe două rânduri doar
         cât bula e vizibilă; fără ea, totul arată exact ca înainte. Câmpul primește
         `flex-basis: 0` ca să nu sară singur pe un rând nou când textul e lung (cu
         `field-sizing: content`, baza „auto" ar fi lățimea textului).
         Contrast: #a0a8b8 pe #0a0e27 = 8,6:1; #ff6b35 pe #0a0e27 = 6,9:1. ✕ = 44 px.
   EN: no horizontal scrollbar while swiping; the reply preview sits inside the
       composer pill, above the text, like WhatsApp.
   ============================================================================ */
#chatMessages,
#dmModal #dmThread { overflow-x: hidden; }

/* ➤ rămâne jos, lângă rândul scris, când capsula crește cu bula (ca în WhatsApp).
   Pe un rând fără bulă capsula și ➤ au aceeași înălțime (--ci-size) ⇒ nicio schimbare. */
#chatCard .chat-input-area,
#dmModal .chat-input-area { align-items: flex-end; }
.chat-input-wrap { flex-wrap: wrap; }
.chat-input-wrap > textarea.chat-input { flex: 1 1 0px; }
#chatCard .chat-input-wrap > .chat-reply-bar,
#dmModal .chat-input-wrap > .chat-reply-bar {
  flex: 0 0 100%;
  min-width: 0;
  margin: 6px 0 2px;
  padding: 6px 4px 6px 10px;
  border: none;
  border-left: 3px solid var(--accent-primary, #ff6b35);
  border-radius: 12px;
  box-shadow: none;
  background: var(--bg-primary);
}
#chatCard .chat-input-wrap > .chat-reply-bar .chat-reply-bar-x,
#dmModal .chat-input-wrap > .chat-reply-bar .chat-reply-bar-x {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  margin: -6px -2px -6px 0;
  border-radius: 50%;
}

/* ============================================================================
   v9 8.1-d (2) — ✕ din foaia de jos + fără „trage pentru reîncărcare"
   ----------------------------------------------------------------------------
   RO: • Pe telefon / tabletă meniul mesajului e foaie de jos: se închide trăgând-o
         în jos, atingând fundalul sau cu „înapoi" ⇒ ✕ era în plus (cerut de Alex).
         Rămâne doar pentru cititorul de ecran (TalkBack / VoiceOver îl anunță
         „Închide"), ascuns vizual; pe desktop (meniu centrat) rămâne ca înainte.
       • Tras în jos ajuns sus în pagină (ex. lista de mesaje la capăt) ⇒ Chrome pe
         Android reîncărca toată aplicația, inclusiv instalată (raportat de Alex).
         `overscroll-behavior-y: contain` pe rădăcină oprește gestul de reîncărcare;
         derularea rămâne neschimbată. Regulă GLOBALĂ (toată aplicația), pusă aici
         ca style.css să nu crească. Datele se actualizează oricum singure.
   EN: hide the sheet's ✕ visually on touch (kept for screen readers); disable
       pull-to-refresh app-wide. */
@media (pointer: coarse) {
  .msg-menu-modal .msg-menu-x {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
html,
body { overscroll-behavior-y: contain; }

/* ============================================================================
   v9 8.14 — statusul online (presence.js); 8.14-b după testul lui Alex
   ----------------------------------------------------------------------------
   RO: • UN SINGUR aspect al punctului, peste tot (cerut de Alex): 11 px, inel de
         2 px în culoarea fundalului, umbră fină, FĂRĂ strălucire. Suprascrie stilul
         vechi din style.css (13 px cu strălucire, lista de jucători), ca să arate la
         fel în Players, profiluri și chat.
       • Punctul stă PESTE marginea pozei, la ~45° (avatarul e cerc): în chat pe
         învelișul avatarului (avatarul are `overflow: hidden` și l-ar tăia); în
         ferestrele de profil (52 / 64 px) la 6% de colț ⇒ pe marginea cercului.
       • DM: fără punct pe avatar, doar „● Online" sub nume (decizia lui Alex).
       • Text: culoarea secundară (#a0a8b8 pe #1a1f3a = 7,5:1); punctul verde
         #27ae60 pe #1a1f3a = 5,6:1 (obiect grafic ≥ 3:1). Fără animații.
   EN: one online-dot style everywhere; on the avatar edge; DM shows a text line. */
.presence-dot {
  width: 11px;
  height: 11px;
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
#chatMessages .chat-avatar-hit { position: relative; }
#chatMessages .chat-avatar-hit > .presence-dot { right: 6px; bottom: 8px; }
.pres-av { position: relative; display: inline-block; }
.pres-av > .presence-dot { right: 6%; bottom: 6%; transform: none; }
.dm-who-status {
  color: var(--text-secondary);
  font-size: .78em;
  font-weight: 400;
  white-space: nowrap;
}
.dm-who-status::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--success, #27ae60);
  vertical-align: middle;
}
.dm-who-status[hidden] { display: none !important; }

/* ============================================================================
   v9 8.8 — Aspectul conversațiilor (club + DM), salvat pe cont
   ----------------------------------------------------------------------------
   RO: Identificatorii (din lista albă, verificată și pe server — V9_88) stau ca
       atribute pe rădăcina conversației (`#chatCard`, `#dmModal`, previzualizarea
       `.cp-pv`): `data-cp-bub`, `data-cp-bg`, `data-cp-size`. Fiecare setează
       variabile (`--cp-bub`, `--cp-bg`, `--cp-bg-img`, `--cp-fs`), folosite mai jos.
       Fără atribut = aspectul de până acum, neatins. Schimbarea = alt atribut, fără
       redesenare.
       • Contrast (WCAG AA ≥ 4,5:1), calculat pe AMBELE capete ale degradeului:
         bulele mele au toate text alb — textul 7,8–10:1, ora (alb 70%) 4,7–5,8:1,
         citatul 7,6–9,2:1, mențiunea mea 4,5–5,4:1. Fundalurile sunt închise: pe
         pixelul cel mai DESCHIS al modelului, separatorul de zi 4,8–6,3:1, urma
         ștearsă 5,7–7,3:1, bara „necitite" 5,2–6,7:1. Ce nu trecea s-a întunecat.
         8.8-b a pus text negru pe bula implicită; v9 8.3: înapoi la ALB (vezi mai jos).
       • Modelele sunt desene proprii, generice (zaruri, meeple, hexagoane, culorile
         cărților de joc), SVG mic în linie; fără mărci, fără imagini externe.
       • Mărimea textului doar în bule (câmpul de scris rămâne 16 px pe telefon, iOS).
       • Fără animații.
   EN: chat appearance via whitelisted ids on the conversation root → CSS variables. */

/* Bulele mele. 8.8-b: bula și tot ce e în ea (ora, bifele, citatul, „editat",
   mențiunea, codul, „reîncearcă") iau culoarea din variabilele --ob-* de mai jos,
   puse pe rădăcina conversației. Implicitul (fără atribut) = portocaliul de brand cu
   text ALB, ca înainte de 8.8-b: decizia lui Alex (17 oct.), „se vede mai bine la
   ochi", ASUMAT sub AA — textul 2,3–2,8:1, ora 2,0–2,3:1, „văzut de toți" (bleumarin)
   4,4–5,5:1. Nu-l „repara" fără să-l întrebi. Bulele închise: text alb; cele
   luminoase: text închis. EN: own-bubble ink via variables; default = white ink
   (owner's decision, knowingly below WCAG AA). */
:root {
  --ob-ink: #fff;
  --ob-ink-80: rgba(255, 255, 255, .8);
  --ob-tick: rgba(255, 255, 255, .85);
  --ob-tick-seen: #cdeffd;
  --ob-tick-all: #17306b;
  --ob-quote-bg: rgba(0, 0, 0, .18);
  --ob-quote-bar: rgba(255, 255, 255, .6);
  --ob-mention-bg: rgba(255, 255, 255, .22);
  --ob-code-bg: rgba(0, 0, 0, .25);
  --ob-retry-bg: rgba(0, 0, 0, .35);
}
[data-cp-bub="felt"]  { --cp-bub: linear-gradient(135deg, #0f4026, #145233); }
[data-cp-bub="wood"]  { --cp-bub: linear-gradient(135deg, #5c3518, #74431e); }
[data-cp-bub="ocean"] { --cp-bub: linear-gradient(135deg, #173f7a, #1f5296); }
[data-cp-bub="berry"] { --cp-bub: linear-gradient(135deg, #5e1f4f, #782865); }
[data-cp-bub="ruby"]  { --cp-bub: linear-gradient(135deg, #7d1426, #981a30); }
[data-cp-bub="slate"] { --cp-bub: linear-gradient(135deg, #2b3445, #3a4559); }
[data-cp-bub="teal"]  { --cp-bub: linear-gradient(135deg, #083d40, #0c4f52); }
[data-cp-bub="plum"]  { --cp-bub: linear-gradient(135deg, #3e2668, #4f3182); }
[data-cp-bub="mint"]  { --cp-bub: linear-gradient(135deg, #dcf8c6, #cfeeb8); }
[data-cp-bub="sky"]   { --cp-bub: linear-gradient(135deg, #dcebfd, #cde0f9); }
[data-cp-bub="sand"]  { --cp-bub: linear-gradient(135deg, #f6e8cb, #ecdab4); }
[data-cp-bub="lilac"] { --cp-bub: linear-gradient(135deg, #ece4fb, #dfd3f6); }
/* bulele închise: text alb */
[data-cp-bub="felt"], [data-cp-bub="wood"], [data-cp-bub="ocean"], [data-cp-bub="berry"],
[data-cp-bub="ruby"], [data-cp-bub="slate"], [data-cp-bub="teal"], [data-cp-bub="plum"] {
  --ob-ink: #fff;
  --ob-ink-80: rgba(255, 255, 255, .8);
  --ob-tick: rgba(255, 255, 255, .85);
  --ob-tick-seen: #cdeffd;
  --ob-tick-all: #7fdcff;
  --ob-quote-bg: rgba(0, 0, 0, .18);
  --ob-quote-bar: rgba(255, 255, 255, .6);
  --ob-mention-bg: rgba(255, 255, 255, .22);
  --ob-code-bg: rgba(0, 0, 0, .25);
  --ob-retry-bg: rgba(0, 0, 0, .35);
}
/* bulele luminoase: text închis */
[data-cp-bub="mint"], [data-cp-bub="sky"], [data-cp-bub="sand"], [data-cp-bub="lilac"] {
  --ob-ink: #111b21;
  --ob-ink-80: rgba(17, 27, 33, .8);
  --ob-tick: rgba(17, 27, 33, .8);
  --ob-tick-seen: rgba(17, 27, 33, .8);
  --ob-tick-all: #1747c2;
  --ob-quote-bg: rgba(0, 0, 0, .06);
  --ob-quote-bar: rgba(17, 27, 33, .45);
  --ob-mention-bg: rgba(0, 0, 0, .08);
  --ob-code-bg: rgba(0, 0, 0, .07);
  --ob-retry-bg: rgba(17, 27, 33, .8);
}
.chat-message.own .chat-reply-quote,
.dm-msg[data-mine="1"] .dm-reply-quote { background: var(--ob-quote-bg); border-left-color: var(--ob-quote-bar); }

/* Fundalul conversației */
[data-cp-bg="felt"] {
  --cp-bg: #0b2c1f;
  --cp-bg-img: repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 7px),
               repeating-linear-gradient(-45deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 9px),
               linear-gradient(160deg, #08241a, #0b2c1f);
}
[data-cp-bg="wood"] {
  --cp-bg: #22150c;
  --cp-bg-img: repeating-linear-gradient(92deg, rgba(255, 220, 180, .06) 0 2px, transparent 2px 11px, rgba(0, 0, 0, .18) 11px 13px, transparent 13px 29px),
               linear-gradient(180deg, #22150c, #2e1c10);
}
[data-cp-bg="dice"] {
  --cp-bg: #0e1530;
  --cp-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='1.5'%3E%3Crect x='7' y='7' width='20' height='20' rx='5'/%3E%3Crect x='37' y='37' width='20' height='20' rx='5' transform='rotate(12 47 47)'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.07'%3E%3Ccircle cx='12.5' cy='12.5' r='1.8'/%3E%3Ccircle cx='17' cy='17' r='1.8'/%3E%3Ccircle cx='21.5' cy='21.5' r='1.8'/%3E%3Cg transform='rotate(12 47 47)'%3E%3Ccircle cx='42.5' cy='42.5' r='1.8'/%3E%3Ccircle cx='51.5' cy='42.5' r='1.8'/%3E%3Ccircle cx='42.5' cy='51.5' r='1.8'/%3E%3Ccircle cx='51.5' cy='51.5' r='1.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
[data-cp-bg="meeple"] {
  --cp-bg: #160f2b;
  --cp-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%23fff' fill-opacity='.06'%3E%3Cpath d='M18 6c2.5 0 4.5 2 4.5 4.5 0 1.5-.7 2.7-1.6 3.6 4.3.6 9.1 2.1 9.1 4.6 0 1.4-1.8 1.8-4.5 1.8l3.4 8.4c.4 1.2-.3 1.8-1.5 1.8h-5.1L18 25.2l-4.3 5.5H8.6c-1.2 0-1.9-.6-1.5-1.8l3.4-8.4C7.8 20.5 6 20.1 6 18.7c0-2.5 4.8-4 9.1-4.6-.9-.9-1.6-2.1-1.6-3.6C13.5 8 15.5 6 18 6z'/%3E%3Cpath transform='translate(36 36)' d='M18 6c2.5 0 4.5 2 4.5 4.5 0 1.5-.7 2.7-1.6 3.6 4.3.6 9.1 2.1 9.1 4.6 0 1.4-1.8 1.8-4.5 1.8l3.4 8.4c.4 1.2-.3 1.8-1.5 1.8h-5.1L18 25.2l-4.3 5.5H8.6c-1.2 0-1.9-.6-1.5-1.8l3.4-8.4C7.8 20.5 6 20.1 6 18.7c0-2.5 4.8-4 9.1-4.6-.9-.9-1.6-2.1-1.6-3.6C13.5 8 15.5 6 18 6z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-cp-bg="hex"] {
  --cp-bg: #0b1a24;
  --cp-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='72.75' viewBox='0 0 42 72.75'%3E%3Cpath d='M21 0 42 12.125v24.25L21 48.5 0 36.375v-24.25zM21 48.5v24.25M0 12.125-21 0M42 12.125 63 0' fill='none' stroke='%2378c8dc' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E");
}
[data-cp-bg="cards"] {
  --cp-bg: #1d0c16;
  --cp-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='%23fff' fill-opacity='.06'%3E%3Cpath d='M20 22s-8-4.8-8-9.9C12 9.4 14 7.3 16.5 7.3c1.5 0 2.7.8 3.5 2 .8-1.2 2-2 3.5-2C26 7.3 28 9.4 28 12.1 28 17.2 20 22 20 22z'/%3E%3Cpath d='M60 7l7 9-7 9-7-9z'/%3E%3Cpath d='M20 47c-4 3.6-8 6.4-8 10 0 2.4 1.9 4 4.1 4 1.4 0 2.6-.6 3.3-1.6l-1.1 4.3h3.4l-1.1-4.3c.7 1 1.9 1.6 3.3 1.6 2.2 0 4.1-1.6 4.1-4 0-3.6-4-6.4-8-10z'/%3E%3Ccircle cx='60' cy='50' r='3.6'/%3E%3Ccircle cx='55.6' cy='57' r='3.6'/%3E%3Ccircle cx='64.4' cy='57' r='3.6'/%3E%3Cpath d='M58.6 57h2.8l1.3 6h-5.4z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-cp-bg="night"] {
  --cp-bg: #0a0e27;
  --cp-bg-img: radial-gradient(circle at 15% 0%, #1a1240 0, rgba(26, 18, 64, 0) 60%),
               radial-gradient(circle at 100% 100%, #141036 0, rgba(20, 16, 54, 0) 55%);
}
[data-cp-bg="slate"] { --cp-bg: #161c26; --cp-bg-img: none; }
/* Fundalurile luminoase (8.8-b): foaia de scor, pergamentul, arțarul, ceața. */
[data-cp-bg="score"] {
  --cp-bg: #f7f8fa;
  --cp-bg-img: repeating-linear-gradient(0deg, rgba(59, 91, 153, .10) 0 1px, transparent 1px 24px),
               repeating-linear-gradient(90deg, rgba(59, 91, 153, .10) 0 1px, transparent 1px 24px);
}
[data-cp-bg="parch"] {
  --cp-bg: #f3ead7;
  --cp-bg-img: radial-gradient(circle at 20% 12%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 45%),
               radial-gradient(circle at 85% 85%, rgba(170, 120, 60, .10) 0, rgba(170, 120, 60, 0) 50%);
}
[data-cp-bg="maple"] {
  --cp-bg: #f1e3c8;
  --cp-bg-img: repeating-linear-gradient(92deg, rgba(150, 100, 45, .07) 0 2px, transparent 2px 13px, rgba(255, 255, 255, .25) 13px 15px, transparent 15px 31px);
}
[data-cp-bg="mist"] {
  --cp-bg: #e9eef3;
  --cp-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='72.75' viewBox='0 0 42 72.75'%3E%3Cpath d='M21 0 42 12.125v24.25L21 48.5 0 36.375v-24.25zM21 48.5v24.25M0 12.125-21 0M42 12.125 63 0' fill='none' stroke='%23284664' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E");
}
/* 8.8-b: fundalul stă pe CONTAINERUL conversației, nu doar pe listă ⇒ fâșia barei de
   scris și cea a căutării (în jurul capsulelor) îl arată, iar modelul continuă fără
   cusătură, ca în WhatsApp. Capsulele (câmpul de scris, căutarea) și butonul de trimis
   rămân separate, cu fundalul lor; mesajele nu trec pe sub bară. ID-ul rădăcinii în
   selector: #chatCard .chat-container / #dmModal .dm-panel au deja un fundal cu ID.
   Antetul DM-ului (în același panou) primește fundal plin. */
#chatCard[data-cp-bg] .chat-container,
#dmModal[data-cp-bg] .dm-panel,
.cp-pv[data-cp-bg] .cp-pv-list {
  background-color: var(--cp-bg);
  background-image: var(--cp-bg-img, none);
}
#dmModal[data-cp-bg] .dm-panel > .dm-head { background-color: rgb(13, 16, 38); }
/* Bulele celorlalți se desprind de un fundal cu model. */
[data-cp-bg] #chatMessages .chat-message:not(.own):not(.is-deleted),
.cp-pv[data-cp-bg] .cp-other { box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }

/* Mărimea textului (doar în bule) */
[data-cp-size="s"]  { --cp-fs: .9; }
[data-cp-size="m"]  { --cp-fs: 1; }
[data-cp-size="l"]  { --cp-fs: 1.12; }
[data-cp-size="xl"] { --cp-fs: 1.25; }
[data-cp-size] #chatMessages .chat-message,
[data-cp-size] #dmThread .dm-bubble,
.cp-pv[data-cp-size] .cp-b { font-size: calc(var(--cp-fs, 1) * 1em); }

/* Modul luminos (8.8-b): pe un fundal luminos (data-cp-tone="light", pus de chat-core
   din lista albă) conversația — lista, căutarea, bara de scris — își schimbă
   variabilele de culoare: bulele celorlalți albe, textul închis, câmpul de scris alb.
   Antetul rămâne al aplicației (închis). Contrast (AA), verificat în browser pe toate
   textele: textul secundar #4a5961 ≥ 5:1 pe cel mai închis pixel al celor 4 fundaluri;
   portocaliul de text #b13c0c (mențiuni, citat) ≥ 5:1. EN: light conversation mode. */
[data-cp-tone="light"] .chat-container,
[data-cp-tone="light"] .dm-panel > :not(.dm-head),
.cp-pv[data-cp-tone="light"] .cp-pv-list {
  --bg-primary: #fafafa;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --text-primary: #111b21;
  --text-secondary: #4a5961;
  --border: rgba(17, 27, 33, .16);
  --accent-primary: #b13c0c;
  --accent-secondary: #7a3500;     /* bara „necitite": #9a4400 avea 4,27–4,43:1 pe pergament / arțar / ceață */
  color: var(--text-primary);
}
/* umbra pe TOATE bulele: o bulă luminoasă (ex. Nisip) pe un fundal luminos apropiat (Arțar) nu se desprindea */
[data-cp-tone="light"] #chatMessages .chat-message:not(.is-deleted),
[data-cp-tone="light"] #dmThread .dm-bubble:not(.is-deleted),
.cp-pv[data-cp-tone="light"] .cp-b:not(.cp-del) { box-shadow: 0 1px 1.5px rgba(11, 20, 26, .18); border-color: transparent; }
[data-cp-tone="light"] .chat-day > span,
[data-cp-tone="light"] .chat-day-float > span,
.cp-pv[data-cp-tone="light"] .cp-day { background: rgba(255, 255, 255, .94); color: var(--text-secondary); box-shadow: 0 1px 1px rgba(11, 20, 26, .1); }
[data-cp-tone="light"] .chat-unread { background: rgba(255, 107, 53, .14); }
[data-cp-tone="light"] .chat-mention.is-me { color: #8a2e08; background: rgba(255, 107, 53, .18); }
[data-cp-tone="light"] .chat-reply-quote,
[data-cp-tone="light"] .dm-reply-quote { background: rgba(0, 0, 0, .05); }
[data-cp-tone="light"] .dm-reply-quote { border-left-color: var(--accent-primary); }
[data-cp-tone="light"] #chatMessages .chat-code,
[data-cp-tone="light"] #dmThread .chat-code { background: rgba(0, 0, 0, .07); }
[data-cp-tone="light"] .chat-down { background: rgba(255, 255, 255, .94); border-color: rgba(17, 27, 33, .12); color: var(--text-primary); }
/* 8.8-c: „Se încarcă mesajele mai vechi…" avea fundal închis fix + textul din variabilă
   (devenea închis) ⇒ text închis pe capsulă închisă. Hover-urile albe și bara de
   derulare albă erau invizibile pe luminos. */
[data-cp-tone="light"] .chat-older { background: rgba(255, 255, 255, .95); border-color: rgba(17, 27, 33, .12); box-shadow: 0 2px 8px rgba(11, 20, 26, .15); }
[data-cp-tone="light"] .chat-mention-item[aria-selected="true"],
[data-cp-tone="light"] .chat-mention-item:hover { background: rgba(0, 0, 0, .06); }
[data-cp-tone="light"] #chatMessages,
[data-cp-tone="light"] #dmThread,
[data-cp-tone="light"] textarea.chat-input { scrollbar-color: rgba(0, 0, 0, .25) transparent; }
[data-cp-tone="light"] #chatMessages::-webkit-scrollbar-thumb,
[data-cp-tone="light"] #dmThread::-webkit-scrollbar-thumb,
[data-cp-tone="light"] textarea.chat-input::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .25); }
/* 8.8-c: bara de sus (titlul „Chatul clubului" + butoanele; antetul DM-ului) are și ea
   varianta luminoasă: alb plin (diferit de cele 4 fundaluri, toate nuanțate), linie
   fină dedesubt, aceleași culori de text ca restul modului luminos. */
#chatCard[data-cp-tone="light"] .chat-head,
#dmModal[data-cp-tone="light"] .dm-panel > .dm-head {
  --bg-primary: #fafafa;
  --bg-secondary: #f0f2f5;
  --text-primary: #111b21;
  --text-secondary: #4a5961;
  --border: rgba(17, 27, 33, .14);
  --accent-primary: #b13c0c;
  --accent-secondary: #9a4400;    /* titlul „Chatul clubului" (#f7931e pe alb = 2,3:1) */
  background: #ffffff;
  border-bottom-color: rgba(17, 27, 33, .12);
  box-shadow: 0 1px 2px rgba(11, 20, 26, .06);
  color: var(--text-primary);
}
#chatCard[data-cp-tone="light"] .chat-head-btn:hover,
#dmModal[data-cp-tone="light"] .dm-head .chat-head-btn:hover,
#dmModal[data-cp-tone="light"] .dm-head .user-menu-btn:hover,
#dmModal[data-cp-tone="light"] .dm-who:hover { background: rgba(0, 0, 0, .06); }
#chatCard[data-cp-tone="light"] .chat-head-btn:active,
#dmModal[data-cp-tone="light"] .dm-head .chat-head-btn:active,
#dmModal[data-cp-tone="light"] .dm-head .user-menu-btn:active { background: rgba(0, 0, 0, .1); }

/* Ora din mesajele de sistem: cu opacitatea .7 avea 4,42:1 pe fundalul închis (sub AA,
   găsit de auditul 8.8-b; urmele șterse aveau deja opacitate 1). */
#chatMessages .chat-message-system .chat-time { opacity: 1; }

/* ── Fereastra „Aspect": stilurile ei stau în chat-prefs.js (injectate la prima
   deschidere, #cprefCss), nu aici — pornirea nu le mai descarcă. Aici rămân doar
   temele de mai sus (se aplică fără fereastră). EN: dialog CSS lives in chat-prefs.js. */

/* ══ v9 8.3 — EMOJI (club + DM) ═══════════════════════════════════════════════
   RO: Foaia selectorului își aduce stilurile din chat-emoji.js (la cerere, #emoCss).
       Aici doar ce trebuie fără ea:
       • emoji-urile mari: un mesaj doar cu 1–3 emoji (chat-core `textHtml`), ca în
         WhatsApp; în `em`, deci urmează mărimea textului aleasă în „Aspect";
       • steagurile pe Windows: Chrome / Edge le arată ca litere („RO"). chat-core pune
         `to-flagfont` pe <html> doar când testul de afișare o cere; fontul (Twemoji
         Country Flags, desene Twemoji CC-BY 4.0, fișierul din country-flag-emoji-polyfill
         0.1.10, MIT) are `unicode-range` ⇒ browserul îl descarcă (78 kB) DOAR când chiar
         apare un steag; restul textului rămâne pe fontul conversației.
   EN: jumbo emoji; flag-emoji font for Windows, downloaded only when a flag shows. */
.chat-jumbo { font-size: 2.1em; line-height: 1.2; letter-spacing: .04em; }
.chat-jumbo.j1 { font-size: 2.9em; }
.chat-jumbo.j2 { font-size: 2.5em; }
@font-face {
  font-family: "TO Flags";
  src: url("fonts/twemoji-flags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  font-display: swap;
}
.to-flagfont #chatMessages,
.to-flagfont #dmThread,
.to-flagfont textarea.chat-input,
.to-flagfont .chat-reply-bar,
.to-flagfont .msg-menu-preview { font-family: "TO Flags", var(--chat-font); }
/* 8.3-b: în foaia de emoji fontul stă DOAR pe butoanele cu steaguri (`.is-flag`, chat-emoji.js):
   pus pe toată foaia, încetinea de ~10× fiecare cadru la derulare pe Windows (măsurat). */

/* 8.3-c: cât aspectul se citește încă de pe server la prima intrare (≤ 0,7 s, chat-core
   cprefHold), conversația e ascunsă, nu cu aspectul implicit. EN: hold, no default flash. */
#chatCard[data-cp-wait] .chat-container,
#dmModal[data-cp-wait] .dm-panel { visibility: hidden; }
#dmModal[data-cp-wait] .dm-panel > .dm-head { visibility: visible; }

/* v9 8.6 — cardul linkului (chat-core.js): fundalul / dunga citatului (contrast deja
   verificat), text fără opacitate, imagine cu raport fix (bula nu sare), lățimea
   colajului (266 px). În câmp: clasele bulei „Răspunde lui…". EN: link card. */
#chatMessages .chat-row:not(.system) > .chat-message.has-lp:not(.has-photos),
#dmThread .dm-bubble.has-lp:not(.has-photos) { width: 266px; }
.lp-card {
  display: block;
  min-width: 0;
  margin: 2px 0 5px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(0, 0, 0, .18);
  border-left: 3px solid var(--accent-primary, #ff6b35);
  -webkit-tap-highlight-color: transparent;
}
.chat-message.own .lp-card,
.dm-msg[data-mine="1"] .lp-card { background: var(--ob-quote-bg); border-left-color: var(--ob-quote-bar); }
[data-cp-tone="light"] .lp-card { background: rgba(0, 0, 0, .05); }
.lp-card:focus-visible { outline: 2px solid var(--accent-primary, #ff6b35); outline-offset: 2px; }
/* 8.6-C1c (cerut de Alex): marginile din jurul cardului ca la poze — 3 px până la marginea bulei
   (colțuri 14 − 3 = 11 px); numele, citatul, textul și ora păstrează 12 px (9 + 3). */
#chatMessages .chat-row:not(.system) > .chat-message.has-lp,
#dmThread .dm-bubble.has-lp { padding: 3px 3px 5px; }
@media (max-width: 768px) {
  #chatMessages .chat-row:not(.system) > .chat-message.has-lp { padding: 3px 3px 5px !important; }
}
#chatMessages .chat-message.has-lp > .lp-card,
#dmThread .dm-bubble.has-lp > .lp-card { margin: 0; border-radius: 11px; }
#chatMessages .chat-message.has-lp > * + .lp-card,
#dmThread .dm-bubble.has-lp > * + .lp-card { margin-top: 3px; }
#chatMessages .chat-message.has-lp > .chat-sender,
#chatMessages .chat-message.has-lp > .chat-reply-quote,
#chatMessages .chat-message.has-lp > .chat-text,
#chatMessages .chat-message.has-lp > .chat-meta,
#dmThread .dm-bubble.has-lp > .chat-fwd,
#dmThread .dm-bubble.has-lp > .dm-reply-quote,
#dmThread .dm-bubble.has-lp > .dm-text,
#dmThread .dm-bubble.has-lp > .dm-meta { margin-left: 9px; margin-right: 9px; }
#chatMessages .chat-message.has-lp > .chat-sender,
#chatMessages .chat-message.has-lp > .chat-reply-quote,
#dmThread .dm-bubble.has-lp > .chat-fwd,
#dmThread .dm-bubble.has-lp > .dm-reply-quote { margin-top: 3px; }
#chatMessages .chat-message.has-lp > .lp-card + .chat-text,
#dmThread .dm-bubble.has-lp > .lp-card + .dm-text { margin-top: 5px; }
#chatMessages .chat-message.has-lp > .chat-retry,
#dmThread .dm-bubble.has-lp > .chat-retry { margin-right: 3px; }
.lp-img { display: block; position: relative; aspect-ratio: 1.91 / 1; background: rgba(0, 0, 0, .2); }
.lp-card.is-yt .lp-img { aspect-ratio: 16 / 9; }
.lp-img > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-play {
  position: absolute; left: 50%; top: 50%;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 18px;
}
/* 8.6-C2: imaginea / ▶ pornesc playerul (chat-video.js) */
.lp-card.is-yt .lp-img { cursor: pointer; }
.lp-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lp-body { display: block; min-width: 0; padding: 6px 9px 7px; }
.lp-title,
.lp-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.lp-title { font-weight: 700; font-size: .88em; line-height: 1.3; }
.lp-desc { margin-top: 2px; font-size: .8em; line-height: 1.3; }
.lp-dom { display: block; margin-top: 3px; font-size: .76em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-dom > .fa-link { font-size: .9em; margin-right: 2px; }
/* În câmp: iconița (fără imagine / cât se încarcă) are locul miniaturii. — titlul pe un rând (pe telefon, cu tastatura deschisă, contează fiecare rând). */
.lp-bar .chat-reply-bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-bar-ico {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--accent-primary, #ff6b35);
  background: rgba(255, 107, 53, .12);
}