/* ==========================================================================
   BookingsMed — Modul AI
   Necesita bm-tokens.css. Pagina isi poarta propriul cadru, deci nu depinde
   de bm-chrome.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body.bm-ai {
  position: relative;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font-family: var(--bm-font-sans);
  color: var(--bm-ink-700);
  /* Aceeasi culoare ca fundalul din `harta.png`: harta nu mai e desen pe toata
     pagina, iar asa marginile ei nu se vad deloc. */
  background: #F7F9FC;
}

.bm-ai__ascuns {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* --------------------------------------------------------------------------
   Antet
   -------------------------------------------------------------------------- */

/* Antetul e o grila de trei coloane egale: asa butoanele de mod cad exact pe
   mijlocul paginii, nu pe mijlocul spatiului ramas dupa logo. */
.bm-ai__top {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--bm-sp-5);
  padding: var(--bm-sp-3) var(--bm-sp-6);
  background: var(--bm-surface);
  border-bottom: 1px solid var(--bm-line-soft);
}

.bm-ai__logo { display: flex; align-items: center; text-decoration: none; }
.bm-ai__logo img { height: 42px; width: auto; display: block; }

/* Cele doua butoane de mod, centrate. */
.bm-ai__moduri {
  display: flex;
  align-items: center;
  gap: var(--bm-sp-2);
  padding: 4px;
  border-radius: var(--bm-r-pill);
  background: #F1F6FA;
}

.bm-ai__mod {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px var(--bm-sp-5);
  border-radius: var(--bm-r-pill);
  font-size: var(--bm-text-sm);
  font-weight: 600;
  color: var(--bm-ink-500);
  text-decoration: none;
  white-space: nowrap;
}

.bm-ai__mod:hover { color: var(--bm-navy-700); }
.bm-ai__mod svg { width: 17px; height: 17px; }

.bm-ai__mod.is-activ {
  background: var(--bm-surface);
  color: var(--bm-teal-700);
  box-shadow: var(--bm-shadow-sm);
}

.bm-ai__cont {
  justify-self: end;
  /* E buton, nu legatura, deci ar veni cu chenarul implicit al browserului —
     inelul inchis care se vedea in jurul pastilei. */
  border: 0;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px var(--bm-sp-5);
  border-radius: var(--bm-r-pill);
  background: var(--bm-teal-500);
  font-size: var(--bm-text-sm);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.bm-ai__cont:hover { background: var(--bm-teal-600); }
.bm-ai__cont:focus { outline: 0; }
.bm-ai__cont:focus-visible { outline: 2px solid var(--bm-teal-300); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Structura
   -------------------------------------------------------------------------- */

/* Tot ce e sub antet. Aici se opreste desenul marit — pana jos, sub banda de
   avantaje, nu la marginea zonei de lucru, unde se vedea o dunga.

   `overflow` de aici e si ce impiedica desenul marit sa impinga pagina in
   derulare: e element transformat, iar ce iese din el ar mari zona derulabila. */
.bm-ai__pagina {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


.bm-ai__corp {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  /* Coloanele laterale au aceeasi latime, desi bara din stanga tine doar 92px:
     asa coloana din mijloc cade pe centrul paginii, nu cu 139px mai la stanga.
     Fara asta harta, avatarul si panoul de conversatie erau centrate pe coloana
     lor, iar banda de jos pe toata pagina — si nu se potriveau intre ele. */
  grid-template-columns: minmax(0, 370px) minmax(0, 1fr) minmax(0, 370px);
  gap: var(--bm-sp-5);
  padding: var(--bm-sp-5) var(--bm-sp-6) 0;
  align-items: stretch;
}

/* --- Bara din stanga ------------------------------------------------------ */

/* Bara nu mai sta lipita de sus: se aliniaza pe mijlocul zonei de continut,
   ca in macheta. */
/* Bara ramane lipita de marginea din stanga a coloanei ei, care e acum mai
   lata decat ea. */
.bm-ai__rail {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: start;
  display: grid;
  gap: 2px;
  padding: var(--bm-sp-2);
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: 18px;
  box-shadow: var(--bm-shadow-sm);
}

.bm-ai__rail a {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: var(--bm-sp-3) 4px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bm-ink-500);
  text-decoration: none;
  text-align: center;
}

.bm-ai__rail a:hover { background: var(--bm-line-soft); color: var(--bm-navy-700); }
.bm-ai__rail a.is-activ { background: var(--bm-teal-50); color: var(--bm-teal-700); }
.bm-ai__rail svg { width: 21px; height: 21px; }

/* --------------------------------------------------------------------------
   Harta cu avatarul
   -------------------------------------------------------------------------- */

/* Coloana din mijloc e o stiva: harta ia spatiul ramas, iar conversatia si
   avatarul raman lipite de partea de jos. Inainte harta avea 640px ficsi, asa
   ca pe ecranele inalte ramanea o zona goala sub panoul de conversatie. */
/* `flex-end`: harta, avatarul si panoul de conversatie raman un singur bloc
   lipit de jos, iar inaltimea nefolosita de pe ferestrele inalte urca sub
   antet, unde trece drept aer. Asezata invers, se aduna intre desen si avatar
   si le rupea unul de altul. */
.bm-ai__scena {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bm-ai__harta {
  position: relative;
  z-index: 1;
  /* Inalta exact cat desenul, ca marirea sa se vada centrata pe el. */
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  min-height: 0;
}

/* Cutia desenului. Isi tine raportul imaginii (1624x968) si se masoara pe
   inaltime, deci harta iese mereu intreaga si e cu atat mai mica cu cat
   fereastra e mai scunda — nu mai e nevoie de derulare pentru ea.

   Punctele de tara sunt copii ai acestei cutii, nu ai coloanei, ca procentele
   calculate in controller sa cada exact pe tarile desenate. */
/* Rama tine locul in pagina: latimea si raportul ei dau inaltimea coloanei din
   mijloc, deci avatarul si conversatia stau unde stateau. Desenul propriu-zis e
   mai mare decat ea si iese peste margini — asa poate creste fara sa impinga
   nimic in jos si fara sa apara derulare. */
.bm-ai__rama {
  position: relative;
  /* Fara asta intinderea implicita a randului i-ar suprascrie raportul. */
  align-self: flex-start;
  width: 115%;
  /* Plafonata de cat loc pe verticala e sub antet, sub bara de jos si sub banda
     de avantaje. Inaltimea iese din raport, deci desenul nu se deformeaza. */
  /* Se scade cat ocupa antetul, banda de jos si panoul de conversatie la
     inaltimea lui maxima — nu la cea de la prima deschidere. Cu 320, cum era
     inainte, socoteala tinea doar pana se umplea firul de vorba: dupa cateva
     mesaje panoul crestea, impingea totul in jos si aparea derulare.

     Numarul iese dintr-o socoteala, nu din incercari: firul are cel mult
     min(300px, 24vh), plus caseta de scris, nota si marginile — vreo 126px —
     din care se scad cei 150px cu care panoul urca peste harta. Verificat pe
     ecrane de la 760 la 1250px inaltime. */
  max-width: calc((100vh - 490px) * 1.678);
  aspect-ratio: 1624 / 968;
}

/* Cu 37.5% mai mare decat rama. `left` si `top` scad jumatate din surplus, ca
   desenul sa creasca in toate partile deodata, fara sa se mute; cei 7.5% in
   plus de sus il ridica in spatiul liber de sub antet. Ce iese peste taie
   `.bm-ai__pagina`. */
.bm-ai__glob {
  position: absolute;
  left: -18.75%;
  /* Cat se ridica desenul fata de rama. Deasupra Europei ramanea o fasie goala
     de vreo 190px, iar steagurile stateau inghesuite spre avatarul si panoul
     de conversatie de jos. Un singur numar de reglat, aici.

     Se ridica prin `top`, nu prin `transform`: `transform` e al maririi pe
     tara, pusa din JS, si s-ar sterge una pe alta. Punctele de tara sunt copii
     ai cutiei si merg cu ea, deci procentele din `Aimode.php` raman bune.

     `vh` in plafon fiindca pe ecrane scunde si rama e mai mica: acolo n-ar mai
     fi de unde sa se ridice atat. */
  --bm-ai-ridica: min(90px, 9vh);
  top: calc(-26.25% - var(--bm-ai-ridica));
  width: 137.5%;
  aspect-ratio: 1624 / 968;
  background-image: url("../img/ai/harta.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  /* Marirea pe o tara e o transformare pe cutia asta. Coltul din stanga sus e
     punctul fix, ca socoteala din JS sa fie simpla; taierea o face `corp`.

     Desenul e vectorial: `harta.png` avea 1624px si se facea pasta de la
     marirea 1.7 in sus. Fisierul e desenat in aceeasi proiectie, deci
     punctele cad la fel. */
  transform-origin: 0 0;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  --bm-inv: 1;
}

@media (prefers-reduced-motion: reduce) {
  .bm-ai__glob { transition: none; }
}

/* Semnul unei tari: cerc cu steagul si numarul de clinici alaturi. Sta chiar
   pe tara — nu mai e punct desenat separat de eticheta.

   Marimile trebuie sa ramana in pas cu `Aimode::latime_card()`, care socoteste
   locul ocupat: steag 15px, spatiu 5px, o cifra vreo 7px, margini 9px. */
.bm-ai__pin {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 2px;
  background: var(--bm-surface);
  border-radius: var(--bm-r-pill);
  box-shadow: 0 4px 14px rgba(6, 56, 107, .16);
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(var(--bm-inv, 1));
  transition: transform .55s cubic-bezier(.4, 0, .2, 1), opacity .25s;
}

/* Steagul e taiat rotund; `cover` ca sa nu se deformeze dungile. */
.bm-ai__pin img {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.bm-ai__pin b { font-size: 11px; font-weight: 700; color: var(--bm-navy-700); }

/* Semnul e buton cand tara are clinici cu pozitie. */
.bm-ai__pin--buton {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.bm-ai__pin--buton:hover { box-shadow: 0 8px 22px rgba(6, 56, 107, .26); }
.bm-ai__pin--buton:focus-visible { outline: 2px solid var(--bm-teal-500); outline-offset: 2px; }

.bm-ai__glob.is-zoom { cursor: grab; user-select: none; }
.bm-ai__glob.is-zoom img { -webkit-user-drag: none; user-drag: none; }
.bm-ai__glob.is-trage { cursor: grabbing; transition: none; }
.bm-ai__glob.is-trage .bm-ai__pin { transition: none; }

/* Avatarul se retrage cat tine marirea: sta peste mijlocul hartii, adica
   tocmai peste locul in care ajung punctele clinicilor. */
/* Avatarul se retrage doar cat tine harta detaliata, nu si la marirea
   desenului: harta se incarca deja marita, iar altfel n-ar mai aparea deloc. */
.bm-ai__harta.is-detaliu .bm-ai__mia-poza { opacity: 0; pointer-events: none; }
.bm-ai__mia-poza { transition: opacity .4s; }



/* --- Bara de intoarcere --------------------------------------------------- */

/* Sus in stanga, nu pe mijloc: pe centru cadea peste semnele din Europa, exact
   zona cea mai plina a hartii. Scoasa putin si peste marginea coloanei, ca sa
   nu stea peste Germania. */
.bm-ai__zoom {
  position: absolute;
  left: -60px;
  top: -40px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--bm-sp-2);
  padding: 5px;
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-pill);
  box-shadow: var(--bm-shadow-md);
}

/* La marimea de start bara arata doar lupa de marit: nu ai de unde sa te
   intorci si nici ce sa micsorezi. */
.bm-ai__zoom > span,
.bm-ai__zoom .bm-ai__lupa--minus,
.bm-ai__zoom button:not(.bm-ai__lupa) { display: none; }

.bm-ai__harta.is-detaliu .bm-ai__zoom > span { display: flex; }
.bm-ai__harta.is-zoom .bm-ai__zoom .bm-ai__lupa--minus,
.bm-ai__harta.is-zoom .bm-ai__zoom button:not(.bm-ai__lupa) { display: inline-flex; }

/* Lupa de marit sta in coltul din dreapta al hartii; cea de micsorat intra in
   bara din stanga, langa „All countries", si apare doar cat timp e marit. */
.bm-ai__lupa {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--bm-line-soft);
  border-radius: 50%;
  background: var(--bm-surface);
  color: var(--bm-ink-500);
  cursor: pointer;
  box-shadow: var(--bm-shadow-sm);
}

.bm-ai__lupa:hover { color: var(--bm-teal-600); border-color: var(--bm-teal-300); }
.bm-ai__lupa svg { width: 18px; height: 18px; }

.bm-ai__zoom .bm-ai__lupa { border: 0; box-shadow: none; background: var(--bm-teal-50); color: var(--bm-teal-700); }
.bm-ai__zoom .bm-ai__lupa:hover { background: var(--bm-teal-100); }

.bm-ai__zoom button:not(.bm-ai__lupa) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px var(--bm-sp-4);
  border: 0;
  border-radius: var(--bm-r-pill);
  background: var(--bm-teal-50);
  font-family: inherit;
  font-size: var(--bm-text-xs);
  font-weight: 600;
  color: var(--bm-teal-700);
  cursor: pointer;
}

.bm-ai__zoom button:not(.bm-ai__lupa):hover { background: var(--bm-teal-100); }
/* Steagul, tara, cate clinici are si cate dintre ele au pozitie pe harta. */
.bm-ai__zoom-tara {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 var(--bm-sp-2);
  font-size: var(--bm-text-xs);
  white-space: nowrap;
}

.bm-ai__zoom-tara img { width: 20px; height: 14px; object-fit: cover; border-radius: 3px; display: block; }
.bm-ai__zoom-tara img[hidden] { display: none; }
.bm-ai__zoom-tara b { font-weight: 600; color: var(--bm-navy-700); }
.bm-ai__zoom-tara > span { color: var(--bm-ink-500); }
.bm-ai__zoom-tara small { font-size: 11px; color: var(--bm-ink-400); }

/* Punct despartitor intre numarul de pe card si nota de pe harta. */
.bm-ai__zoom-tara small::before { content: "\00B7"; margin-right: 7px; color: var(--bm-line); }

/* Avatarul sta pe linia de jos a hartii, iar panoul de conversatie ii acopera
   partea de jos. Impreuna cad la aceeasi inaltime cu cardurile din dreapta. */
/* Avatarul sta pe linia de jos a hartii, centrat, iar panoul de conversatie ii
   acopera partea de jos. Inaltimea e legata de a hartii, deci pe ferestre
   scunde se micsoreaza in loc sa iasa in antet. Latimea e 300px: cu cat e mai
   lat, cu atat ocupa mai mult din zona in care ar incapea carduri de tara. */
.bm-ai__mia-poza {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  transform: translateX(-50%);
  width: min(300px, 30%);
  height: 100%;
  display: block;
  /* Imaginea se vede doar jos, dar cutia are toata inaltimea hartii si acopera
     mijlocul ei. Fara asta inghitea apasarile pe cardurile din centru — Italia,
     Turcia si Rusia nu se puteau apasa deloc. */
  pointer-events: none;
}

.bm-ai__mia-poza img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* --------------------------------------------------------------------------
   Bara de jos: insigna, microfonul, conversatia
   -------------------------------------------------------------------------- */

/* Trei coloane: goala, panoul, goala. Panoul sta in mijloc, deci ramane
   centrat pe pagina — la fel ca avatarul de deasupra lui — iar microfonul
   incape in coloana din stanga fara sa-l impinga. Cand nu mai e loc, coloanele
   laterale se string singure si panoul se ingusteaza, deci nu se suprapun
   niciodata. Marginea negativa urca randul peste partea de jos a avatarului.

   Latimea panoului sta in coloana, nu pe el. Cu `auto` pe coloana si
   `min(720px, 100%)` pe panou, procentul se raporta la coloana pe care tocmai
   incerca sa o dimensioneze; browserul il ia atunci ca `auto` si stramta
   coloana cat textul dinauntru — de aici panoul de vreo 370px. */
.bm-ai__bara {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr minmax(0, 720px) 1fr;
  align-items: end;
  gap: var(--bm-sp-4);
  margin-top: -150px;
}

/* Latimea e cat scrie dedesubt, nu 84px ficsi: asa „Click to speak" incape pe
   un rand si nu mai intra peste inelele punctate. Butonul se centreaza singur
   fata de text. Sta in coloana din stanga a barei, lipit de panou. */
.bm-ai__mic {
  position: relative;
  grid-column: 1;
  justify-self: end;
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: var(--bm-sp-5);
  width: max-content;
}
.bm-ai__mic[hidden] { display: none; }

/* Inelele punctate pulseaza incet, ca sa se vada ca se poate vorbi. */
.bm-ai__mic-inele {
  position: absolute;
  top: 32px;
  left: 50%;
  width: 116px;
  height: 116px;
  margin: -58px 0 0 -58px;
  border: 1px dashed rgba(20, 158, 178, .40);
  border-radius: 50%;
  pointer-events: none;
  animation: bm-inel 2.8s ease-out infinite;
}

.bm-ai__mic-inele::after {
  content: "";
  position: absolute;
  inset: 15px;
  border: 1px dashed rgba(20, 158, 178, .26);
  border-radius: 50%;
}

@keyframes bm-inel {
  0%   { transform: scale(.88); opacity: .85; }
  70%  { transform: scale(1.05); opacity: .25; }
  100% { transform: scale(.88); opacity: .85; }
}

.bm-ai__mic button {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: var(--bm-surface);
  color: var(--bm-teal-600);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(6, 56, 107, .14);
}

.bm-ai__mic button svg { width: 26px; height: 26px; }
.bm-ai__mic-txt { font-size: var(--bm-text-xs); font-weight: 600; color: var(--bm-teal-600); white-space: nowrap; }

.bm-ai__mic.is-asculta button { background: var(--bm-teal-500); color: #fff; }
.bm-ai__mic.is-asculta .bm-ai__mic-inele { animation-duration: 1.1s; border-color: rgba(20, 158, 178, .7); }

@media (prefers-reduced-motion: reduce) { .bm-ai__mic-inele { animation: none; } }

/* --------------------------------------------------------------------------
   Conversatia
   -------------------------------------------------------------------------- */

/* Coloana e fixata explicit: microfonul e ascuns cat timp browserul nu stie
   recunoastere vocala, iar fara asta panoul ar aluneca in prima coloana. */
.bm-ai__chat {
  position: relative;
  z-index: 4;
  grid-column: 2;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--bm-sp-5);
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(6, 56, 107, .12);
}

/* Firul de vorba se deruleaza in el, nu creste pagina. Plafonul e si in
   procente din inaltimea ecranului: pe un ecran scund, 300px de bule plus
   caseta de scris trec de ce a ramas si apare derulare. */
.bm-ai__fir {
  max-height: min(300px, 24vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-bottom: var(--bm-sp-4);
  /* Bara groasa a sistemului taia din latimea bulelor si arata ca dintr-o
     fereastra veche. */
  scrollbar-width: thin;
  scrollbar-color: var(--bm-line) transparent;
}

.bm-ai__fir::-webkit-scrollbar { width: 4px; }
.bm-ai__fir::-webkit-scrollbar-track { background: transparent; }

.bm-ai__fir::-webkit-scrollbar-thumb {
  background: var(--bm-line);
  border-radius: 4px;
}

.bm-ai__fir:hover::-webkit-scrollbar-thumb { background: var(--bm-teal-300); }

.bm-ai__salut-m { margin: 0; font-size: var(--bm-text-sm); color: var(--bm-ink-500); }

.bm-ai__salut-t {
  margin: 4px 0 0;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--bm-navy-700);
}

/* Un rand de conversatie: chipul Miei si bula ei, sau doar bula omului. */
.bm-ai__rand { display: flex; align-items: flex-end; gap: 8px; }
.bm-ai__rand--om { justify-content: flex-end; }

/* Chipul, taiat rotund. Poza e portret intreg, asa ca `object-fit` singur nu
   ajunge la fata: imaginea e marita la 135.7% si trasa cat trebuie ca ochii sa
   cada in mijlocul cercului. Aceleasi numere ca la avatarul mare. */
.bm-ai__fata {
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  width: 30px;
  height: 30px;
  margin-bottom: var(--bm-sp-3);
  border-radius: 50%;
  background: var(--bm-teal-50);
}

.bm-ai__fata img {
  display: block;
  width: 135.7%;
  height: auto;
  margin: 12.9% 0 0 -17.9%;
}

.bm-ai__bula {
  max-width: 82%;
  margin-bottom: var(--bm-sp-3);
  padding: var(--bm-sp-3) var(--bm-sp-4);
  border-radius: var(--bm-r-md);
  font-size: var(--bm-text-sm);
  line-height: 1.6;
}

.bm-ai__bula p { margin: 0; }
.bm-ai__bula p + p { margin-top: 6px; }

.bm-ai__bula--om {
  background: var(--bm-teal-500);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.bm-ai__bula--ai {
  background: #F4F8FC;
  color: var(--bm-ink-700);
  border-bottom-left-radius: 4px;
}

/* Semnul de asteptare: trei puncte care se ridica pe rand. */
.bm-ai__bula.is-asteapta {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.bm-ai__bula.is-asteapta span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bm-ink-400);
  animation: bm-ai-punct 1.1s ease-in-out infinite;
}

.bm-ai__bula.is-asteapta span:nth-child(2) { animation-delay: .16s; }
.bm-ai__bula.is-asteapta span:nth-child(3) { animation-delay: .32s; }

@keyframes bm-ai-punct {
  0%, 60%, 100% { transform: translateY(0);    opacity: .35; }
  30%           { transform: translateY(-5px); opacity: 1;   }
}

/* Chipul respira cat timp cauta. */
.bm-ai__rand.is-gandeste .bm-ai__fata { animation: bm-ai-respira 1.6s ease-in-out infinite; }

@keyframes bm-ai-respira {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(20, 158, 178, .28); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(20, 158, 178, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bm-ai__bula.is-asteapta span,
  .bm-ai__rand.is-gandeste .bm-ai__fata { animation: none; }
}

.bm-ai__leg { display: grid; gap: 6px; margin-bottom: var(--bm-sp-3); }

.bm-ai__leg a {
  display: block;
  padding: 9px var(--bm-sp-4);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-sm);
  font-size: var(--bm-text-sm);
  font-weight: 500;
  color: var(--bm-teal-700);
  text-decoration: none;
}

.bm-ai__leg a:hover { border-color: var(--bm-teal-300); background: var(--bm-teal-50); }



.bm-ai__scrie {
  display: flex;
  align-items: center;
  gap: var(--bm-sp-2);
  padding: 6px 6px 6px var(--bm-sp-4);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-pill);
  background: var(--bm-surface);
}

.bm-ai__scrie:focus-within { border-color: var(--bm-teal-300); box-shadow: var(--bm-focus-ring); }

.bm-ai__scrie input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: var(--bm-font-sans);
  font-size: var(--bm-text-sm);
  color: var(--bm-ink-900);
}

.bm-ai__mic-mic {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--bm-ink-400);
  cursor: pointer;
}

.bm-ai__mic-mic[hidden] { display: none; }
.bm-ai__mic-mic:hover { color: var(--bm-teal-600); }
.bm-ai__mic-mic.is-asculta { background: var(--bm-teal-50); color: var(--bm-teal-600); }

.bm-ai__trimite {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--bm-teal-500);
  color: #fff;
  cursor: pointer;
}

.bm-ai__trimite:hover { background: var(--bm-teal-600); }
/* Numele de tari si orase din raspuns, apasabile.

   Nu sunt butoane cu chenar: ar fi 10 dreptunghiuri intr-o propozitie si
   raspunsul n-ar mai semana a vorba. Arata a legatura — subliniere subtire,
   care se ingroasa la hover. */
.bm-ai__loc {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--bm-teal-700);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--bm-teal-300);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .15s, text-decoration-color .15s;
}

.bm-ai__loc:hover { color: var(--bm-teal-600); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.bm-ai__loc:focus-visible { outline: 2px solid var(--bm-teal-300); outline-offset: 2px; border-radius: 3px; }

/* Nota si butonul „New chat" pe acelasi rand, aliniate pe linia de baza. */
.bm-ai__subsol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-sp-3);
}

.bm-ai__nota { margin: var(--bm-sp-3) 0 0; font-size: var(--bm-text-xs); color: var(--bm-ink-400); }

/* Fara chenar si fara fundal: e o comanda rara, nu una pe care sa cada ochiul
   inaintea casetei de scris. Prima versiune avea rama gri si arata ca un buton
   de sistem lipit peste card. Acum sta ca o nota, si abia la hover se coloreaza. */
.bm-ai__reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  margin: var(--bm-sp-3) 0 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--bm-text-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--bm-ink-400);
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s;
}

.bm-ai__reset svg { opacity: .75; transition: transform .35s ease, opacity .2s; }
.bm-ai__reset:hover { color: var(--bm-teal-600); }
.bm-ai__reset:hover svg { opacity: 1; transform: rotate(-120deg); }
.bm-ai__reset:focus-visible { outline: 2px solid var(--bm-teal-300); outline-offset: 3px; border-radius: var(--bm-r-sm); }
.bm-ai__reset[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Panoul din dreapta
   -------------------------------------------------------------------------- */

/* O singura celula, cu doua vederi suprapuse: cardurile obisnuite si
   formularul de autentificare. `align-items: end` le tine pe amandoua lipite de
   baza, deci coloana se termina pe aceeasi linie cu panoul de conversatie
   indiferent care e afisata. */
.bm-ai__lat {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: end;
  align-content: end;
  min-width: 0;
}

/* Vederea ascunsa isi pastreaza locul in grila — de aceea `visibility` si nu
   `display`: asa se poate si estompa, si inaltimea coloanei nu sare la
   comutare. */
.bm-ai__vedere {
  grid-area: 1 / 1;
  display: grid;
  align-content: end;
  gap: var(--bm-sp-4);
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  /* Starea de pornire e deasupra: vederea intra coborand in locul ei. */
  transform: translateY(-34px) scale(.97);
  transition: opacity .45s ease, transform .5s cubic-bezier(.22, 1.2, .36, 1), visibility .5s;
}

/* Vederea care tocmai a plecat coboara, nu urca inapoi de unde a venit. */
.bm-ai__vedere.is-jos { transform: translateY(34px) scale(.97); }

.bm-ai__vedere.is-activ {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Formularele stau pe la mijlocul coloanei, nu lipite de baza ca celelalte
   carduri: sunt mai scunde si jos aratau rupte de restul paginii. */
.bm-ai__vedere--form { align-self: stretch; align-content: center; }

@media (prefers-reduced-motion: reduce) {
  .bm-ai__vedere { transition: opacity .01s, visibility .01s; transform: none; }
}

/* --- Vederea unei tari: cifrele si lista de clinici ------------------------ */

/* Padding mai mic decat pe celelalte carduri: ce se castiga de fiecare parte se
   duce in latimea randurilor din lista. */
/* `min-width: 0` pe tot lantul: fara el, un nume lung de clinica largeste
   randul, randul largeste lista, iar lista impinge cardul in afara coloanei.
   Elementele de grila si de flex pornesc cu latimea minima „cat continutul",
   iar taierea cu trei puncte nu se aplica pana nu li se ia voie sa se stranga. */
/* Vederea tarii sta pe mijlocul coloanei, nu lipita de baza ca celelalte
   carduri: inaltimea ei se schimba cu numarul de rezultate, iar aliniata jos
   sarea in sus si in jos la fiecare cautare. */
.bm-ai__vedere--tara { min-width: 0; align-self: center; align-content: center; }

.bm-ai__tara {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--bm-sp-4) 12px;
}
.bm-ai__tara-t { margin: 0 0 var(--bm-sp-3); font-size: 1.05rem; font-weight: 700; color: var(--bm-navy-700); }

/* Titlul rezultatelor din conversatie, cu butonul de inchidere alaturi. */
.bm-ai__rez-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bm-sp-3); }
.bm-ai__rez-cap .bm-ai__tara-t { margin-bottom: var(--bm-sp-3); }

/* --- Cautarea si filtrul -------------------------------------------------- */

.bm-ai__cauta-rand { display: flex; align-items: center; gap: 8px; margin-bottom: var(--bm-sp-3); }

.bm-ai__cauta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px var(--bm-sp-3);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-pill);
  color: var(--bm-ink-400);
}

.bm-ai__cauta:focus-within { border-color: var(--bm-teal-300); }

.bm-ai__cauta input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: inherit;
  font-size: var(--bm-text-xs);
  color: var(--bm-ink-900);
}

.bm-ai__cauta input::-webkit-search-cancel-button { display: none; }

.bm-ai__filtru {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--bm-line);
  border-radius: 50%;
  background: var(--bm-surface);
  color: var(--bm-ink-400);
  cursor: pointer;
}

.bm-ai__filtru:hover { color: var(--bm-teal-600); border-color: var(--bm-teal-300); }
.bm-ai__filtru.is-activ { background: var(--bm-teal-50); border-color: var(--bm-teal-300); color: var(--bm-teal-700); }

/* --- Lista ---------------------------------------------------------------- */

/* Un singur chenar cu linii intre randuri, nu carduri separate. Barele de
   derulare se ascund, dar rotita merge mai departe. */
.bm-ai__lista {
  /* La fel si lista din panou: 31 de clinici nu au voie sa lungeasca pagina. */
  max-height: min(340px, 34vh);
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-md);
  max-width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bm-ai__lista::-webkit-scrollbar { width: 0; height: 0; }

.bm-ai__lista-gol { margin: var(--bm-sp-3) 0 0; font-size: var(--bm-text-xs); color: var(--bm-ink-400); text-align: center; }
.bm-ai__lista-gol[hidden] { display: none; }

.bm-ai__cl-card {
  display: flex;
  align-items: center;
  gap: var(--bm-sp-3);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 10px;
  border: 0;
  border-top: 1px solid var(--bm-line-soft);
  border-radius: 0;
  background: var(--bm-surface);
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.bm-ai__cl-card:first-child { border-top: 0; }
.bm-ai__cl-card:hover { background: #F9FCFE; }

/* Randul ales: chenar si fundal, ca in macheta. */
.bm-ai__cl-card.is-ales {
  background: var(--bm-teal-50);
  box-shadow: inset 0 0 0 1px var(--bm-teal-300);
  border-radius: var(--bm-r-md);
}

/* Fara pozitie pe harta: nu se poate arata, deci nu se poarta ca un buton. */
.bm-ai__cl-card.is-fara { cursor: default; }
.bm-ai__cl-card.is-fara .bm-ai__cl-poza { opacity: .7; }

.bm-ai__cl-poza {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--bm-line-soft);
  font-size: var(--bm-text-sm);
  font-weight: 700;
  color: var(--bm-ink-500);
}

.bm-ai__cl-poza img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bm-ai__cl-txt { flex: 1 1 auto; min-width: 0; }
.bm-ai__cl-txt b { display: block; font-size: var(--bm-text-xs); font-weight: 600; color: var(--bm-navy-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-ai__cl-txt small { display: block; font-size: 11px; color: var(--bm-ink-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bm-ai__cl-sag { flex: 0 0 auto; display: grid; place-items: center; color: var(--bm-ink-400); }
.bm-ai__cl-card:hover .bm-ai__cl-sag { color: var(--bm-teal-600); }

/* Semnul clinicii alese creste si isi schimba culoarea. */
.bm-ai__semn.is-ales {
  width: 22px;
  height: 22px;
  background: var(--bm-navy-700);
  box-shadow: 0 0 0 6px rgba(20, 158, 178, .25);
}

/* --- Harta detaliata a unei tari ------------------------------------------ */

/* Acopera toata pagina, sub bara din stanga si sub panouri — acolo unde sta si
   desenul. Pusa in coloana din mijloc, se vedea ca un dreptunghi in mijlocul
   paginii.

   `z-index: 0` pe ea si `1` pe zona de lucru: asa raman deasupra ei bara din
   stanga, panoul din dreapta, conversatia si bara de comenzi a hartii. */
.bm-ai__detaliu {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}

.bm-ai__corp { z-index: 1; }

/* Zona de lucru acopera toata pagina, deci sta peste harta si ii lua toate
   apasarile, tragerile si rotita — harta parea inghetata. Cat tine harta
   detaliata, zona devine transparenta la maus, iar lucrurile cu care chiar ai
   de-a face si-l primesc inapoi. */
.bm-ai__pagina.is-detaliu .bm-ai__corp { pointer-events: none; }

.bm-ai__pagina.is-detaliu .bm-ai__rail,
.bm-ai__pagina.is-detaliu .bm-ai__lat,
.bm-ai__pagina.is-detaliu .bm-ai__bara,
.bm-ai__pagina.is-detaliu .bm-ai__zoom { pointer-events: auto; }

.bm-ai__detaliu.is-activ { opacity: 1; visibility: visible; }
.bm-ai__detaliu-panza { width: 100%; height: 100%; }

.bm-ai__detaliu-stare {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  margin: 0;
  padding: 10px var(--bm-sp-4);
  border-radius: var(--bm-r-pill);
  background: var(--bm-surface);
  font-size: var(--bm-text-sm);
  color: var(--bm-ink-500);
  box-shadow: var(--bm-shadow-md);
  transform: translate(-50%, -50%);
}

.bm-ai__detaliu-stare[hidden] { display: none; }

/* Cat tine harta detaliata, desenul si avatarul se dau la o parte: ar sta
   tocmai peste ea. */
.bm-ai__harta.is-detaliu .bm-ai__glob { opacity: 0; }
.bm-ai__glob { transition: opacity .35s ease, transform .55s cubic-bezier(.4, 0, .2, 1); }

/* Bara de sus arata tara doar cat e deschisa harta detaliata. */
.bm-ai__harta.is-detaliu .bm-ai__zoom > span { display: flex; }
.bm-ai__harta.is-detaliu .bm-ai__zoom button:not(.bm-ai__lupa) { display: inline-flex; }
.bm-ai__harta.is-detaliu .bm-ai__zoom .bm-ai__lupa { display: none; }

/* Semnul unei clinici. E element propriu, nu cel implicit al bibliotecii, ca
   sa poarte culorile site-ului. */
.bm-ai__semn {
  display: block;
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--bm-teal-500);
  box-shadow: 0 2px 8px rgba(6, 56, 107, .35);
  cursor: pointer;
}

.bm-ai__semn:hover { background: var(--bm-teal-600); }

.maplibregl-popup-content { border-radius: var(--bm-r-md); padding: var(--bm-sp-3) var(--bm-sp-4); }
.maplibregl-popup-content b { display: block; font-size: var(--bm-text-sm); color: var(--bm-navy-700); }
.maplibregl-popup-content small { display: block; margin-top: 2px; font-size: 11px; color: var(--bm-ink-400); }
.maplibregl-popup-content a { display: inline-block; margin-top: 6px; font-size: var(--bm-text-xs); font-weight: 600; color: var(--bm-teal-700); text-decoration: none; }
.maplibregl-popup-content a:hover { text-decoration: underline; }

/* --- Cardul de inregistrare, in fereastra peste pagina -------------------- */

/* Cardul e acelasi fisier cu cel de pe pagina obisnuita si e desenat pentru
   640px, cu randuri de cate doua campuri. In coloana din dreapta, de 370px,
   iesea cu bara de derulare pe orizontala si campurile taiate — de aceea se
   deschide peste pagina, la latimea lui. */
.bm-ai__modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--bm-sp-5);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}

.bm-ai__modal.is-activ { opacity: 1; visibility: visible; }

.bm-ai__modal-fund {
  position: fixed;
  inset: 0;
  background: rgba(10, 40, 70, .45);
}

/* Cutia urca putin la deschidere, ca fereastra sa nu apara din nimic. */
.bm-ai__modal-cutie {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin: auto;
  transform: translateY(18px) scale(.98);
  transition: transform .4s cubic-bezier(.22, 1.2, .36, 1);
}

.bm-ai__modal.is-activ .bm-ai__modal-cutie { transform: none; }

/* Pagina nu se mai deruleaza in spatele ferestrei. */
body.bm-ai--blocat { overflow: hidden; }

/* Butonul de inchidere sta peste coltul cardului: fisierul comun n-are asa
   ceva si nu i se adauga nimic. */
.bm-ai__auth-x--liber {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  background: var(--bm-surface);
}

@media (prefers-reduced-motion: reduce) {
  .bm-ai__modal-cutie { transition: none; transform: none; }
}

/* Cardul de recuperare a parolei vine tot din fisierul comun si e desenat
   pentru latimea unei pagini de autentificare; in coloana de 370px ii ajunge
   sa nu mai aiba latime maxima si sa aiba umbra celorlalte carduri. */
.bm-ai__vedere--form .bm-auth__card {
  width: 100%;
  max-width: none;
  padding: var(--bm-sp-5);
  box-shadow: var(--bm-shadow-sm);
}

.bm-ai__vedere--form .bm-auth__title { font-size: 1.2rem; }
.bm-ai__vedere--form .bm-auth__subtitle { font-size: var(--bm-text-xs); }

/* --- Vocea Miei ----------------------------------------------------------- */

/* Cat timp citeste raspunsul, in spatele capului creste o lumina care
   pulseaza. Nu e sincronizare de buze — fata nu se misca — ci un semn cinstit
   ca vorbeste acum. */
.bm-ai__mia-poza::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 58%;
  z-index: -1;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 158, 178, .26) 0%, rgba(20, 158, 178, 0) 68%);
  transform: translateX(-50%) scale(.6);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.bm-ai__mia-poza.is-vorbeste::before {
  opacity: 1;
  animation: bm-ai-lumina 2.2s ease-in-out infinite;
}

@keyframes bm-ai-lumina {
  0%, 100% { transform: translateX(-50%) scale(.82); opacity: .5; }
  50%      { transform: translateX(-50%) scale(1.08); opacity: 1; }
}

/* Unda sonora, sub avatar. Barele nu urmaresc sunetul — sinteza din browser
   nu da acces la semnalul audio — dar au inaltimi si ritmuri diferite, ca sa
   nu bata toate deodata si sa para un semafor. */
.bm-ai__unde {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 14px;
  border-radius: var(--bm-r-pill);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(6, 56, 107, .14);
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

.bm-ai__harta.is-vorbeste .bm-ai__unde {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.bm-ai__unde span {
  display: block;
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: var(--bm-teal-500);
}

.bm-ai__harta.is-vorbeste .bm-ai__unde span { animation: bm-ai-unda .9s ease-in-out infinite; }

.bm-ai__unde span:nth-child(1) { animation-delay: 0s;    }
.bm-ai__unde span:nth-child(2) { animation-delay: .12s;  }
.bm-ai__unde span:nth-child(3) { animation-delay: .26s;  }
.bm-ai__unde span:nth-child(4) { animation-delay: .05s;  }
.bm-ai__unde span:nth-child(5) { animation-delay: .32s;  }
.bm-ai__unde span:nth-child(6) { animation-delay: .18s;  }
.bm-ai__unde span:nth-child(7) { animation-delay: .40s;  }

@keyframes bm-ai-unda {
  0%, 100% { height: 6px;  opacity: .55; }
  50%      { height: 20px; opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  .bm-ai__mia-poza.is-vorbeste::before,
  .bm-ai__harta.is-vorbeste .bm-ai__unde span { animation: none; }
}

/* Butonul de sunet. Taietura peste difuzor apare cand vocea e oprita. */
#bmAiSunet .bm-ai__sunet-taiat { opacity: 0; }
#bmAiSunet.is-mut .bm-ai__sunet-unde { opacity: 0; }
#bmAiSunet.is-mut .bm-ai__sunet-taiat { opacity: 1; }
#bmAiSunet.is-mut { color: var(--bm-ink-400); }

/* --- Formularul de autentificare ------------------------------------------ */

.bm-ai__auth-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bm-sp-3); margin-bottom: var(--bm-sp-4); }
.bm-ai__auth-t { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--bm-navy-700); }
.bm-ai__auth-s { margin: 2px 0 0; font-size: var(--bm-text-sm); color: var(--bm-ink-400); }

.bm-ai__auth-x {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--bm-ink-400);
  cursor: pointer;
}

.bm-ai__auth-x:hover { background: var(--bm-line-soft); color: var(--bm-navy-700); }

.bm-ai__auth-e { display: block; margin-bottom: 6px; font-size: var(--bm-text-xs); font-weight: 600; color: var(--bm-ink-700); }

.bm-ai__auth-camp {
  display: block;
  width: 100%;
  margin-bottom: var(--bm-sp-4);
  padding: 11px var(--bm-sp-4);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-sm);
  font-family: inherit;
  font-size: var(--bm-text-sm);
  color: var(--bm-ink-900);
  background: var(--bm-surface);
}

.bm-ai__auth-camp:focus { outline: 0; border-color: var(--bm-teal-500); box-shadow: none; }

.bm-ai__auth-rand { display: flex; align-items: center; justify-content: space-between; gap: var(--bm-sp-3); margin-bottom: var(--bm-sp-4); font-size: var(--bm-text-xs); }
.bm-ai__auth-bif { display: flex; align-items: center; gap: 7px; color: var(--bm-ink-500); cursor: pointer; }
.bm-ai__auth-rand a { color: var(--bm-teal-700); text-decoration: none; font-weight: 500; }
.bm-ai__auth-rand a:hover { text-decoration: underline; }

.bm-ai__auth-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: var(--bm-r-pill);
  background: var(--bm-teal-500);
  font-family: inherit;
  font-size: var(--bm-text-sm);
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

.bm-ai__auth-btn:hover { background: var(--bm-teal-600); }

/* Doua campuri pe un rand: nume/prenume si cele doua parole. */
.bm-ai__auth-doi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bm-sp-3); }
.bm-ai__auth-doi .bm-ai__auth-camp { margin-bottom: var(--bm-sp-3); }

select.bm-ai__auth-camp { appearance: none; background-image: none; cursor: pointer; }

.bm-ai__auth-bif--jos { margin-bottom: var(--bm-sp-3); font-size: var(--bm-text-xs); }
.bm-ai__auth-bif--jos a { color: var(--bm-teal-700); }

.bm-ai__auth-capt { margin-bottom: var(--bm-sp-3); transform-origin: 0 0; }
.bm-ai__auth-capt:empty { display: none; }

.bm-ai__auth-err {
  margin: 0 0 var(--bm-sp-3);
  padding: 9px var(--bm-sp-3);
  border-radius: var(--bm-r-sm);
  background: #FDECEF;
  font-size: var(--bm-text-xs);
  color: #B0304C;
}

.bm-ai__auth-err[hidden] { display: none; }

/* Legatura dintre autentificare si inregistrare e buton, fiindca schimba
   vederea din panou, nu duce la alta pagina. */
.bm-ai__auth-leg {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--bm-teal-700);
  cursor: pointer;
}

.bm-ai__auth-leg:hover { text-decoration: underline; }

.bm-ai__auth-jos { margin: var(--bm-sp-4) 0 0; font-size: var(--bm-text-xs); color: var(--bm-ink-400); text-align: center; }
.bm-ai__auth-jos a { color: var(--bm-teal-700); font-weight: 600; text-decoration: none; }
.bm-ai__auth-jos a:hover { text-decoration: underline; }

.bm-ai__card {
  padding: var(--bm-sp-5);
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: 18px;
  box-shadow: var(--bm-shadow-sm);
}

.bm-ai__mia { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--bm-navy-700); }
.bm-ai__mia-r { margin: 4px 0 var(--bm-sp-3); font-size: var(--bm-text-sm); font-weight: 600; color: var(--bm-ink-700); }

.bm-ai__mia-t {
  margin: 0 0 var(--bm-sp-4);
  font-size: var(--bm-text-sm);
  line-height: 1.65;
  color: var(--bm-ink-500);
}

.bm-ai__act {
  display: flex;
  align-items: center;
  gap: var(--bm-sp-3);
  margin-bottom: var(--bm-sp-2);
  padding: var(--bm-sp-3);
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-md);
  text-decoration: none;
  transition: border-color var(--bm-dur) var(--bm-ease);
}

.bm-ai__act:last-child { margin-bottom: 0; }
.bm-ai__act:hover { border-color: var(--bm-teal-300); background: #F9FCFE; }

.bm-ai__act-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.bm-ai__act-ico svg { width: 19px; height: 19px; }
.bm-ai__act-ico--albastru { background: #E8F0FE; color: #2B6CB0; }
.bm-ai__act-ico--teal     { background: var(--bm-teal-50); color: var(--bm-teal-600); }
.bm-ai__act-ico--verde    { background: #E6F7EF; color: #1B9C64; }
.bm-ai__act-ico--roz      { background: #FDECEF; color: #C53A5A; }

.bm-ai__act-txt { flex: 1 1 auto; min-width: 0; }
.bm-ai__act-txt b { display: block; font-size: var(--bm-text-sm); font-weight: 600; color: var(--bm-navy-700); }
.bm-ai__act-txt small { display: block; font-size: var(--bm-text-xs); color: var(--bm-ink-400); }
.bm-ai__act-sag { flex: 0 0 auto; width: 16px; height: 16px; color: var(--bm-ink-400); }

.bm-ai__cifre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bm-sp-3);
  padding: var(--bm-sp-4);
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: 18px;
  box-shadow: var(--bm-shadow-sm);
}

/* `display: grid` de mai sus bate `[hidden] { display: none }` din browser, asa
   ca ascunderea cifrelor lasa cardul gol pe ecran — o cutie alba sub lista.
   Aceeasi regula o are si `.bm-ai__lista-gol`. */
.bm-ai__cifre[hidden] { display: none; }

.bm-ai__cifra { display: flex; align-items: center; gap: var(--bm-sp-3); min-width: 0; }
.bm-ai__cifra b { display: block; font-size: 1.15rem; font-weight: 700; line-height: 1.2; color: var(--bm-navy-700); }
.bm-ai__cifra small { display: block; font-size: var(--bm-text-xs); color: var(--bm-ink-400); }

/* --------------------------------------------------------------------------
   Banda de jos
   -------------------------------------------------------------------------- */

/* Banda se strange cat tin cele patru elemente si se centreaza, in loc sa se
   intinda pe toata latimea. Cu `repeat(auto-fit, minmax(220px, 1fr))` fiecare
   element primea o coloana egala si se lipea de marginea ei din stanga, de
   unde spatiile inegale dintre ele. */
.bm-ai__jos {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bm-sp-3) var(--bm-sp-8);
  width: fit-content;
  max-width: calc(100% - var(--bm-sp-6) * 2);
  margin: var(--bm-sp-6) auto var(--bm-sp-5);
  padding: var(--bm-sp-3) var(--bm-sp-6);
  background: var(--bm-surface);
  border: 1px solid var(--bm-line-soft);
  border-radius: 18px;
  box-shadow: var(--bm-shadow-sm);
}

.bm-ai__jos-el { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 0; }

.bm-ai__jos-el > span:first-child {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--bm-teal-50);
  color: var(--bm-teal-600);
}

.bm-ai__jos-el > span:first-child svg { width: 15px; height: 15px; }
.bm-ai__jos-el b { display: block; font-size: var(--bm-text-xs); font-weight: 600; color: var(--bm-navy-700); }
.bm-ai__jos-el small { display: block; font-size: 11px; color: var(--bm-ink-400); }

/* --------------------------------------------------------------------------
   Ecrane mici
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  .bm-ai__corp { grid-template-columns: 80px minmax(0, 1fr); }
  /* Sub 1281px nu mai e loc in afara coloanei. */
  .bm-ai__zoom { left: 0; }
  .bm-ai__rail { justify-self: stretch; }
  .bm-ai__lat { grid-column: 1 / -1; align-items: start; }
  /* Sub 1281px panoul trece pe toata latimea, deci cele doua carduri de
     informatii stau unul langa altul. Vederea cu formularul ramane pe o
     singura coloana. */
  .bm-ai__vedere--info { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

@media (max-width: 991.98px) {
  /* Sub 992px continutul e mai inalt decat ecranul oricum: pagina curge
     normal, iar harta se opreste unde se termina continutul. */
  body.bm-ai { min-height: 0; }
  /* Sub 992px continutul e mai inalt decat ecranul si trebuie sa se poata
     derula; marirea e oricum oprita aici. */
  .bm-ai__pagina { overflow: visible; }
  .bm-ai__lat { align-content: start; }
  .bm-ai__vedere { align-content: start; }
  .bm-ai__vedere--info { grid-template-columns: minmax(0, 1fr); }
  .bm-ai__harta { min-height: 300px; }

  /* Cardurile de tara se scot: pe latimea unui telefon nu au unde sa se
     desfaca si ajung unul peste altul. Desenul ramane, ca fundal. */
  /* Odata cu cardurile pica si marirea pe tara: pe ecran mic n-ar avea unde
     sa se desfaca punctele de clinica. */
  .bm-ai__pin,
  .bm-ai__grup,
  .bm-ai__zoom { display: none; }

  /* Desenul trece in spate, pe toata latimea, si nu mai plafoneaza nimic
     dupa inaltimea ferestrei: sub 992px pagina curge oricum. */
  .bm-ai__rama { position: static; width: 100%; max-width: none; aspect-ratio: auto; }

  .bm-ai__glob {
    left: 0;
    top: 0;
    width: 100%;
    max-width: none;
    height: auto;
  }

  /* Microfonul trece deasupra panoului, care ia toata latimea. */
  .bm-ai__bara { grid-template-columns: minmax(0, 1fr); justify-items: center; margin-top: -40px; }
  .bm-ai__chat { grid-column: 1; width: 100%; }
  .bm-ai__mic { grid-column: 1; justify-self: center; margin-bottom: var(--bm-sp-4); }
}

@media (max-width: 767.98px) {
  .bm-ai__top { flex-wrap: wrap; padding: var(--bm-sp-3) var(--bm-sp-4); }
  .bm-ai__moduri { order: 3; width: 100%; margin: var(--bm-sp-2) 0 0; justify-content: center; }
  .bm-ai__cont { margin-left: auto; }
  .bm-ai__corp { grid-template-columns: minmax(0, 1fr); padding: var(--bm-sp-4) var(--bm-sp-4) 0; }
  .bm-ai__rail { position: static; grid-auto-flow: column; overflow-x: auto; }
  .bm-ai__harta { min-height: 220px; }
  .bm-ai__mia-poza { width: 45%; }
  .bm-ai__mic button { width: 52px; height: 52px; }
  .bm-ai__mic-inele { width: 96px; height: 96px; margin: -48px 0 0 -48px; top: 26px; }
  .bm-ai__chat { padding: var(--bm-sp-4); }
  .bm-ai__salut-t { font-size: 1.25rem; }
  .bm-ai__jos { max-width: calc(100% - var(--bm-sp-4) * 2); gap: var(--bm-sp-3) var(--bm-sp-5); }
}

/* --------------------------------------------------------------------------
   Fisa unei clinici, in panoul din dreapta
   -------------------------------------------------------------------------- */

/* Macheta e desenata pe vreo 570px; coloana din dreapta are 370. Nu se
   largeste coloana — ar strange harta si conversatia — ci se aseaza aceleasi
   blocuri pe latimea care exista: placutele pe doua coloane, banda de poze pe
   patru, butoanele unul langa altul. */
.bm-ai__vedere--fisa { min-width: 0; align-self: center; align-content: center; }

.bm-ai__fisa { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; }

/* --- Coperta si butoanele de pe ea --- */

.bm-ai__fisa-sus { position: relative; }

.bm-ai__fisa-coperta {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: var(--bm-line-soft);
}
.bm-ai__fisa-coperta[hidden] { display: none; }

/* Butoane rotunde peste coperta, ca in macheta. */
.bm-ai__fisa-rot {
  position: absolute;
  left: var(--bm-sp-3);
  top: var(--bm-sp-3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--bm-navy-700);
  cursor: pointer;
  box-shadow: var(--bm-shadow-sm);
  transition: background .2s, color .2s;
}
.bm-ai__fisa-rot:hover { background: #fff; color: var(--bm-teal-700); }
.bm-ai__fisa-rot--dr { left: auto; right: var(--bm-sp-3); }
.bm-ai__fisa-rot.is-copiat { background: var(--bm-teal-500); color: #fff; }

/* Eticheta „Verified clinic": pastila verde-teal, langa sageata de intoarcere. */
.bm-ai__fisa-verif {
  position: absolute;
  left: 52px;
  top: var(--bm-sp-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 9px;
  border-radius: var(--bm-r-pill);
  background: rgba(255, 255, 255, .94);
  font-size: var(--bm-text-xs);
  font-weight: 600;
  color: var(--bm-teal-700);
  box-shadow: var(--bm-shadow-sm);
}
.bm-ai__fisa-verif[hidden] { display: none; }

/* --- Cardul care iese peste coperta --- */

.bm-ai__fisa-cap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--bm-sp-3);
  margin: -22px var(--bm-sp-3) 0;
  padding: var(--bm-sp-3);
  border-radius: 16px;
  background: var(--bm-surface);
  box-shadow: 0 6px 20px rgba(6, 56, 107, .10);
}

.bm-ai__fisa-logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid var(--bm-surface);
  background: var(--bm-line-soft);
  overflow: hidden;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--bm-teal-700);
  box-shadow: var(--bm-shadow-sm);
}
.bm-ai__fisa-logo img { width: 100%; height: 100%; object-fit: cover; }

.bm-ai__fisa-cap-txt { flex: 1 1 auto; min-width: 0; }
.bm-ai__fisa-nume { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--bm-navy-700); }
.bm-ai__fisa-sub  { margin: 2px 0 0; font-size: var(--bm-text-xs); color: var(--bm-ink-500); }
.bm-ai__fisa-loc  { display: flex; align-items: center; gap: 5px; margin: 3px 0 0; font-size: var(--bm-text-xs); color: var(--bm-ink-400); }
.bm-ai__fisa-steag { flex: 0 0 auto; width: 16px; height: 11px; object-fit: cover; border-radius: 2px; }

/* Numarul de recenzii. Nota in stele lipseste dinadins: `nrstars` e 5 la toate
   clinicile din baza, deci n-ar deosebi pe nimeni de nimeni. */
.bm-ai__fisa-nota {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  padding: 5px 9px;
  border-radius: var(--bm-r-md);
  background: var(--bm-teal-50);
}
.bm-ai__fisa-nota[hidden] { display: none; }
.bm-ai__fisa-nota b     { font-size: var(--bm-text-sm); font-weight: 700; color: var(--bm-teal-700); line-height: 1.1; }
.bm-ai__fisa-nota small { font-size: 10px; color: var(--bm-ink-400); }

/* --- Tab-urile, cu iconite --- */

.bm-ai__fisa-tabs {
  display: flex;
  gap: 4px;
  margin: var(--bm-sp-3) var(--bm-sp-3) 0;
  padding-bottom: var(--bm-sp-3);
  border-bottom: 1px solid var(--bm-line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.bm-ai__fisa-tabs::-webkit-scrollbar { height: 0; }

.bm-ai__fisa-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--bm-r-pill);
  background: none;
  font-family: inherit;
  font-size: var(--bm-text-xs);
  font-weight: 600;
  color: var(--bm-ink-500);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.bm-ai__fisa-tab:hover { color: var(--bm-teal-700); background: var(--bm-teal-50); }
.bm-ai__fisa-tab.is-activ { background: var(--bm-teal-500); color: #fff; }
.bm-ai__fisa-tab.is-activ:hover { background: var(--bm-teal-600); color: #fff; }

/* --- Continutul --- */

.bm-ai__fisa-corp {
  padding: var(--bm-sp-3) var(--bm-sp-4) var(--bm-sp-4);
  max-height: min(340px, 36vh);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bm-line) transparent;
}

.bm-ai__fisa-titlu { margin: var(--bm-sp-4) 0 6px; font-size: var(--bm-text-sm); font-weight: 700; color: var(--bm-navy-700); }
.bm-ai__fisa-titlu:first-child { margin-top: 0; }
.bm-ai__fisa-text  { margin: 0; font-size: var(--bm-text-xs); line-height: 1.6; color: var(--bm-ink-500); }

/* Placutele cu cifre: iconita in patrat colorat, cifra si eticheta alaturi. */
.bm-ai__fisa-cifre { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bm-sp-2); }

.bm-ai__fisa-cifra {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-md);
}
.bm-ai__fisa-cifra-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--bm-teal-50);
  color: var(--bm-teal-700);
}
.bm-ai__fisa-cifra b     { display: block; font-size: 1rem; font-weight: 700; line-height: 1.15; color: var(--bm-navy-700); }
.bm-ai__fisa-cifra small { display: block; font-size: 10px; color: var(--bm-ink-400); }

.bm-ai__fisa-etichete { display: flex; flex-wrap: wrap; gap: 5px; }
.bm-ai__fisa-eticheta2 {
  padding: 5px 10px;
  border: 1px solid var(--bm-line-soft);
  border-radius: var(--bm-r-pill);
  background: var(--bm-surface);
  font-size: var(--bm-text-xs);
  color: var(--bm-ink-500);
}

/* --- Banda de poze din antet --- */

.bm-ai__fisa-banda { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: var(--bm-sp-4); }

.bm-ai__fisa-mini {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: var(--bm-r-sm);
  overflow: hidden;
  background: var(--bm-line-soft);
  cursor: pointer;
}
.bm-ai__fisa-mini img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.bm-ai__fisa-mini:hover img { transform: scale(1.07); }

.bm-ai__fisa-mini.is-multe img { filter: brightness(.5); }
.bm-ai__fisa-mini-nr {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--bm-text-sm);
  font-weight: 700;
  color: #fff;
}

/* --- Randurile de contact --- */

.bm-ai__fisa-contact { display: grid; gap: 2px; margin-top: var(--bm-sp-4); }

.bm-ai__fisa-ct {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 7px 0;
  font-size: var(--bm-text-xs);
  color: var(--bm-ink-500);
  text-decoration: none;
}
a.bm-ai__fisa-ct:hover { color: var(--bm-teal-700); }

.bm-ai__fisa-ct-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--bm-line-soft);
  color: var(--bm-ink-400);
}
a.bm-ai__fisa-ct:hover .bm-ai__fisa-ct-ico { background: var(--bm-teal-50); color: var(--bm-teal-700); }

/* Adresele si site-urile lungi nu au voie sa largeasca panoul. */
.bm-ai__fisa-ct-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Butoanele --- */

.bm-ai__fisa-actiuni { display: flex; gap: var(--bm-sp-2); margin-top: var(--bm-sp-4); }

.bm-ai__fisa-buton {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  padding: 10px 12px;
  border: 1px solid var(--bm-teal-500);
  border-radius: var(--bm-r-pill);
  background: var(--bm-teal-500);
  font-family: inherit;
  font-size: var(--bm-text-xs);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.bm-ai__fisa-buton:hover { background: var(--bm-teal-600); border-color: var(--bm-teal-600); color: #fff; }
.bm-ai__fisa-buton--alb { background: var(--bm-surface); border-color: var(--bm-line); color: var(--bm-navy-700); }
.bm-ai__fisa-buton--alb:hover { background: var(--bm-teal-50); border-color: var(--bm-teal-300); color: var(--bm-teal-700); }

/* --- Doctori si servicii --- */

.bm-ai__fisa-rand {
  display: flex;
  align-items: center;
  gap: var(--bm-sp-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--bm-line-soft);
  min-width: 0;
}
.bm-ai__fisa-rand:last-child { border-bottom: 0; }

.bm-ai__fisa-poza {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bm-line-soft);
  overflow: hidden;
  font-weight: 700;
  color: var(--bm-teal-700);
}
/* Portretele se aseaza pe partea de sus: taiate pe centru, oamenii ies fara
   frunte. Aceeasi regula ca la fisa doctorului. */
.bm-ai__fisa-poza img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.bm-ai__fisa-rand-txt { flex: 1 1 auto; min-width: 0; }
.bm-ai__fisa-rand-txt b { display: block; font-size: var(--bm-text-sm); font-weight: 600; color: var(--bm-navy-700); }
.bm-ai__fisa-rand-txt small { display: block; font-size: var(--bm-text-xs); color: var(--bm-ink-400); line-height: 1.45; }
.bm-ai__fisa-zile { color: var(--bm-teal-700) !important; font-weight: 600; }

.bm-ai__fisa-pret { flex: 0 0 auto; font-size: var(--bm-text-sm); font-weight: 700; color: var(--bm-navy-700); }

/* --- Galeria: doar pozele, fara taburi de categorie --- */

.bm-ai__fisa-galerie { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }

.bm-ai__fisa-poza-mare {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--bm-r-sm);
  overflow: hidden;
  background: var(--bm-line-soft);
}
.bm-ai__fisa-poza-mare img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.bm-ai__fisa-poza-mare:hover img { transform: scale(1.06); }

/* --- Trecerea la urmatoarea clinica --- */

.bm-ai__fisa-jos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-sp-2);
  padding: var(--bm-sp-3) var(--bm-sp-4);
  border-top: 1px solid var(--bm-line-soft);
}
.bm-ai__fisa-jos[hidden] { display: none; }

.bm-ai__fisa-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-pill);
  background: var(--bm-surface);
  font-family: inherit;
  font-size: var(--bm-text-xs);
  font-weight: 600;
  color: var(--bm-ink-500);
  cursor: pointer;
}
.bm-ai__fisa-nav:hover { color: var(--bm-teal-700); border-color: var(--bm-teal-300); background: var(--bm-teal-50); }

.bm-ai__fisa-cate { font-size: var(--bm-text-xs); color: var(--bm-ink-400); white-space: nowrap; }

/* --- Numele clinicii, apasabil in firul de vorba --- */

.bm-ai__cl-nume {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--bm-teal-700);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--bm-teal-300);
  text-underline-offset: 3px;
  text-align: left;
}
.bm-ai__cl-nume:hover { color: var(--bm-teal-600); text-decoration-color: currentColor; }
.bm-ai__cl-nume:focus-visible { outline: 2px solid var(--bm-teal-300); outline-offset: 2px; border-radius: 3px; }