/* [cc] Easy — chatul site-ului, refăcut (01.10): luminos ca site-ul, Paleta 2, niveluri (lansatorul deasupra, fereastra cel mai sus),
   un singur buton plin (Trimite), sugestii la început, flux fluid, telefon = foaie de jos pe tot ecranul. Fontul îl ia de la pagină. */
.ez, .ez * { box-sizing: border-box; }
/* pagina pune „transition: all .3s” pe a/textarea: în chat ar întârzia ascunderea la închidere și ar anima orice schimbare de mărime.
   Tranzițiile chatului sunt declarate mai jos, pe fiecare element, și bat regula asta (aceeași specificitate, mai târziu în fișier). */
.ez * { transition: none; }
.ez {
  --ez-blue-050: hsl(205 79% 92%); --ez-blue-100: hsl(205 97% 85%); --ez-blue-500: hsl(205 67% 45%); --ez-blue-600: hsl(205 76% 39%); --ez-blue-700: hsl(205 82% 33%); --ez-blue-900: hsl(205 100% 21%);
  --ez-g050: hsl(210 36% 96%); --ez-g100: hsl(212 33% 89%); --ez-g200: hsl(210 31% 80%); --ez-g300: hsl(211 27% 70%); --ez-g400: hsl(209 23% 60%);
  --ez-g500: hsl(210 22% 49%); --ez-g600: hsl(209 28% 39%); --ez-g800: hsl(211 39% 23%); --ez-g900: hsl(209 61% 16%);
  --ez-cyan-100: hsl(185 94% 87%); --ez-cyan-700: hsl(185 81% 29%); --ez-red-050: hsl(0 100% 97%); --ez-red-700: hsl(0 79% 32%);
  --ez-lvl3: 0 10px 20px hsl(210 40% 20% / .15), 0 3px 6px hsl(210 40% 20% / .10);
  --ez-lvl4: 0 20px 40px hsl(210 40% 20% / .20), 0 5px 10px hsl(210 40% 20% / .05);
  --ez-ease: cubic-bezier(.16, 1, .3, 1);
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483000; font-family: inherit; color: var(--ez-g900);
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.ez button { font: inherit; cursor: pointer; }
/* inelul de focus e al chatului (albastru Paleta 2), nu turcoazul paginii; la fel selecția de text */
.ez button:focus-visible, .ez a:focus-visible { outline: 2px solid var(--ez-blue-500); outline-offset: 2px; }
.ez ::selection { background: var(--ez-blue-100); color: var(--ez-g900); }

/* lansatorul: pastilă albă, ridicată; pe telefon și după derulare rămâne doar cercul */
.ez-launch { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 6px; border: 0; border-radius: 999px; background: #fff;
  box-shadow: var(--ez-lvl3); color: var(--ez-g900); font-weight: 600;
  transition: transform .25s var(--ez-ease), box-shadow .25s, padding .3s var(--ez-ease), gap .3s var(--ez-ease), opacity .2s, visibility 0s; }
.ez-launch:hover { transform: translateY(-2px); box-shadow: var(--ez-lvl4); }
.ez .ez-launch:focus-visible { outline: 3px solid var(--ez-blue-100); outline-offset: 2px; }
.ez-launch .ez-av { width: 40px; height: 40px; }
.ez-launch .ez-l-text { white-space: nowrap; overflow: hidden; max-width: 220px; transition: max-width .3s var(--ez-ease), opacity .2s; }
.ez.compact .ez-launch { padding: 0 6px; gap: 0; } .ez.compact .ez-launch .ez-l-text { max-width: 0; opacity: 0; }
/* ascuns = și scos din Tab (visibility), după ce s-a terminat estomparea */
.ez.open .ez-launch, .ez.dodge .ez-launch { opacity: 0; pointer-events: none; transform: scale(.9); visibility: hidden; transition: transform .25s var(--ez-ease), opacity .2s, visibility 0s .25s; }
.ez.dodge:not(.open) .ez-launch { transform: translateY(24px); }

/* avatarul Easy: poza lui din program, pe cerc albastru deschis cu un contur fin (iconița rămâne doar ca rezervă) */
.ez-av { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ez-blue-050); position: relative; box-shadow: inset 0 0 0 1px hsl(205 67% 45% / .18); overflow: hidden; }
.ez-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ez-av svg { width: 58%; height: 58%; } .ez-av .primary { fill: var(--ez-blue-100); } .ez-av .secondary { fill: var(--ez-blue-600); }
.ez-av.sm { width: 28px; height: 28px; }

/* bilețelul de invitație, o singură dată pe vizită */
.ez-teaser { position: absolute; right: 0; bottom: 64px; width: 260px; background: #fff; border-radius: 12px; box-shadow: var(--ez-lvl3); padding: 12px 36px 12px 14px;
  font-size: 14px; color: var(--ez-g800); opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; transition: opacity .3s, transform .4s var(--ez-ease), visibility 0s .4s; }
.ez-teaser.show { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; visibility: visible; transition: opacity .3s, transform .4s var(--ez-ease), visibility 0s; }
.ez-teaser b { color: var(--ez-g900); } .ez-teaser .ez-x { position: absolute; top: 6px; right: 6px; }

/* fereastra: cel mai înalt nivel, se deschide din lansator */
.ez-panel { position: absolute; right: 0; bottom: 0; width: 392px; height: min(640px, calc(100vh - 40px)); height: min(640px, calc(100dvh - 40px)); display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; box-shadow: var(--ez-lvl4); overflow: hidden; transform-origin: bottom right; outline: 0;
  opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none; visibility: hidden;
  transition: opacity .2s, transform .35s var(--ez-ease), width .35s var(--ez-ease), height .35s var(--ez-ease), visibility 0s .35s; }
.ez.open .ez-panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity .2s, transform .35s var(--ez-ease), width .35s var(--ez-ease), height .35s var(--ez-ease), visibility 0s; }
.ez.wide .ez-panel { width: min(760px, calc(100vw - 40px)); height: calc(100vh - 40px); height: calc(100dvh - 40px); }
.ez.drag .ez-panel { transition: none; } /* telefon: foaia urmează degetul când e trasă de mâner */
/* anunțul pentru cititorul de ecran: răspunsul întreg, o singură dată, nu fiecare literă */
.ez-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ez-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--ez-g100); }
.ez-head .ez-av { width: 36px; height: 36px; }
.ez-head .ez-t { flex: 1; min-width: 0; } .ez-head .ez-t b { display: block; font-size: 15px; font-weight: 700; } .ez-head .ez-t span { display: block; font-size: 12.5px; color: var(--ez-g600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ez-ic { width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--ez-g500); display: inline-flex; align-items: center; justify-content: center; }
.ez-ic:hover { background: var(--ez-g050); color: var(--ez-g900); } .ez .ez-ic:focus-visible { outline: 2px solid var(--ez-blue-500); outline-offset: -2px; }
.ez-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ez-x { width: 28px; height: 28px; }

.ez-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 8px; scroll-behavior: smooth; background: linear-gradient(180deg, #fff, var(--ez-g050)); }
.ez-body { scrollbar-width: thin; scrollbar-color: var(--ez-g200) transparent; }
.ez-body::-webkit-scrollbar { width: 8px; } .ez-body::-webkit-scrollbar-thumb { background: var(--ez-g200); border-radius: 8px; }

/* începutul: salut + întrebări gata făcute */
.ez-hello { padding: 8px 4px 4px; animation: ez-in .5s var(--ez-ease) both; }
.ez-hello .ez-av { width: 48px; height: 48px; margin: 0 0 12px; }
.ez-hello h3 { margin: 0 0 4px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--ez-g900); letter-spacing: -.01em; }
.ez-hello p { margin: 0 0 16px; color: var(--ez-g600); font-size: 14.5px; }
.ez-sugs { display: flex; flex-direction: column; gap: 8px; }
.ez-sug { text-align: left; border: 1px solid var(--ez-g100); background: #fff; border-radius: 10px; padding: 10px 12px; color: var(--ez-g800); font-weight: 500;
  display: flex; align-items: center; gap: 10px; transition: border-color .15s, background .15s, transform .15s; }
.ez-sug:hover { border-color: var(--ez-blue-100); background: var(--ez-blue-050); transform: translateX(2px); }
.ez-sug svg { width: 20px; height: 20px; flex: none; } .ez-sug .primary { fill: var(--ez-g300); } .ez-sug .secondary { fill: var(--ez-g800); }

/* mesajele */
.ez-row { display: flex; gap: 8px; margin: 0 0 10px; animation: ez-in .35s var(--ez-ease) both; }
.ez-row.me { justify-content: flex-end; }
.ez-row .ez-av.sm { margin-top: 2px; } .ez-row.cont .ez-av.sm { visibility: hidden; }
.ez-col { display: flex; flex-direction: column; max-width: 84%; min-width: 0; }
.ez-row.me .ez-col { align-items: flex-end; }
.ez.wide .ez-col { max-width: min(84%, 600px); } /* mărit: rândurile rămân de citit (~75 de semne), nu se lățesc pe 760 px */
.ez-b { padding: 9px 13px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.ez-row.bot .ez-b { background: #fff; color: var(--ez-g900); box-shadow: 0 1px 2px hsl(210 40% 20% / .10), 0 0 0 1px var(--ez-g100); border-top-left-radius: 4px; }
.ez-row.bot.cont .ez-b { border-top-left-radius: 14px; }
.ez-row.me .ez-b { background: linear-gradient(180deg, var(--ez-blue-600), var(--ez-blue-700)); color: #fff; border-top-right-radius: 4px; }
.ez-b a { color: var(--ez-blue-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ez-row.me .ez-b a { color: #fff; }
.ez-b.err { background: var(--ez-red-050) !important; color: var(--ez-red-700) !important; box-shadow: none !important; }
.ez-b.muted { background: var(--ez-g050) !important; color: var(--ez-g600) !important; box-shadow: none !important; } /* răspuns oprit de om: nu e o eroare */
.ez-cut { color: var(--ez-red-700); font-weight: 600; } /* „Răspunsul s-a întrerupt.” sub textul primit până la eroare */
.ez-meta { font-size: 11.5px; color: var(--ez-g600); margin: 3px 4px 0; display: flex; gap: 10px; align-items: center; min-height: 18px; }
.ez-meta:empty { display: none; }
.ez-caret::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--ez-blue-500); border-radius: 1px; animation: ez-blink 1s steps(1) infinite; }
.ez-dots { display: inline-flex; gap: 4px; padding: 12px 14px; } .ez-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ez-g300); animation: ez-dot 1.2s infinite ease-in-out; }
.ez-dots i:nth-child(2) { animation-delay: .15s; } .ez-dots i:nth-child(3) { animation-delay: .3s; }
.ez-fb { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .2s; }
.ez-row:hover .ez-fb, .ez-fb:focus-within, .ez-fb.done { opacity: 1; }
@media (hover: none) { .ez-fb { opacity: 1; } } /* pe telefon nu există „hover”: 👍/👎 se văd mereu, ca azi */
.ez-fb button { border: 0; background: none; color: var(--ez-g400); width: 26px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.ez-fb button:hover { color: var(--ez-g900); background: var(--ez-g050); } .ez-fb button.on { color: var(--ez-blue-600); }
.ez-fb svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ez-retry { border: 0; background: none; color: var(--ez-blue-600); font-weight: 600; padding: 0; text-decoration: underline; }
.ez-next { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px 36px; animation: ez-in .4s var(--ez-ease) both; }
/* continuările: contur, nu umplere (singurul buton plin e Trimite); pe telefon, când se rup pe două rânduri, nu fac blocuri albastre grele */
.ez-next button { border: 1px solid var(--ez-blue-100); background: #fff; color: var(--ez-blue-700); border-radius: 999px; padding: 4px 11px; font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s; }
.ez-next button:hover { background: var(--ez-blue-050); border-color: var(--ez-blue-500); }

/* „mesaje noi ↓” când ai urcat în istoric: stă în subsol, deasupra liniei, alb și liniștit (singurul buton plin e Trimite) */
.ez-jump { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 8px); opacity: 0; pointer-events: none; visibility: hidden;
  border: 1px solid var(--ez-g100); border-radius: 999px; background: #fff; color: var(--ez-g800);
  font-size: 13px; font-weight: 600; padding: 6px 14px; box-shadow: var(--ez-lvl3); transition: opacity .2s, transform .3s var(--ez-ease), visibility 0s .3s; }
.ez-jump:hover { color: var(--ez-g900); border-color: var(--ez-g200); }
.ez-jump.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; visibility: visible; transition: opacity .2s, transform .3s var(--ez-ease), visibility 0s; }

/* scrisul: câmpul adâncit (neimportant ca nivel, dar e singurul loc de scris), butonul Trimite e singurul buton plin */
.ez-foot { position: relative; padding: 10px 12px 12px; border-top: 1px solid var(--ez-g100); background: #fff; }
.ez-box { display: flex; align-items: flex-end; gap: 8px; background: var(--ez-g050); border: 1px solid var(--ez-g200); border-radius: 12px; padding: 6px 6px 6px 12px; box-shadow: inset 0 2px 4px hsl(210 40% 20% / .08); transition: border-color .15s, box-shadow .15s; }
.ez-box:focus-within { border-color: var(--ez-blue-500); box-shadow: 0 0 0 3px var(--ez-blue-050); background: #fff; }
.ez-in { flex: 1; border: 0; background: transparent; resize: none; outline: 0; font: inherit; color: var(--ez-g900); max-height: 132px; padding: 7px 0; line-height: 1.45; }
.ez-in::placeholder { color: var(--ez-g600); opacity: 1; } /* g500 dădea 3,9:1 pe câmpul gol */
.ez-send { flex: none; width: 38px; height: 38px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(180deg, var(--ez-blue-600), var(--ez-blue-700));
  box-shadow: 0 1px 3px hsl(210 40% 20% / .25); display: inline-flex; align-items: center; justify-content: center; transition: opacity .15s, transform .15s; }
.ez-send:disabled { opacity: .4; cursor: default; box-shadow: none; } .ez-send:not(:disabled):active { transform: scale(.94); }
.ez-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ez-send.stop { background: var(--ez-g800); }
.ez-hint { display: flex; justify-content: flex-end; gap: 8px; margin: 6px 4px 0; font-size: 11.5px; color: var(--ez-g600); }
.ez-hint[hidden] { display: none; }
.ez-hint .ez-count.warn { color: var(--ez-red-700); font-weight: 600; }

/* telefon: foaie de jos pe tot ecranul, lansatorul rămâne cerc. Foaia stă exact în zona vizibilă de deasupra tastaturii:
   --ez-vt / --ez-vh = unde începe și cât de înaltă e zona vizibilă (pe iOS / Android nou tastatura nu micșorează pagina, doar o acoperă) */
@media (max-width: 600px) {
  .ez { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .ez-launch { padding: 0 6px; gap: 0; } .ez-launch .ez-l-text { max-width: 0; opacity: 0; }
  .ez-teaser { width: min(260px, calc(100vw - 24px)); }
  .ez-panel { position: fixed; left: 0; right: 0; top: calc(var(--ez-vt, 0px) + 8px); bottom: auto; width: 100% !important;
    height: calc(100vh - 8px) !important; height: calc(var(--ez-vh, 100dvh) - 8px) !important;
    border-radius: 16px 16px 0 0; transform: translateY(100%); transform-origin: bottom center; }
  .ez.open .ez-panel { transform: none; }
  /* înălțimea nu se animă: când apare tastatura, foaia se potrivește pe loc, altfel câmpul stă o clipă sub tastatură */
  .ez-panel { transition: opacity .2s, transform .35s var(--ez-ease), visibility 0s .35s; }
  .ez.open .ez-panel { transition: opacity .2s, transform .35s var(--ez-ease), visibility 0s; }
  .ez.open.drag .ez-panel { transition: none; }
  .ez-panel { overscroll-behavior: contain; } /* trasul pe antet/subsol nu derulează pagina de dedesubt */
  /* dedesubt, pagina se estompează: e clar că foaia e deasupra și că se poate închide */
  .ez::before { content: ""; position: fixed; inset: 0; background: hsl(209 61% 16% / .32); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s .3s; }
  .ez.open::before { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s, visibility 0s; }
  .ez-head { padding-top: 18px; position: relative; touch-action: none; } .ez-head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--ez-g200); }
  .ez-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .ez-exp { display: none !important; }
}
/* degetul: tot ce se apasă are cel puțin 44 px; câmpul are 16 px (fără zoom pe iPhone/iPad) */
@media (pointer: coarse), (max-width: 600px) {
  .ez-in { font-size: 16px; min-height: 44px; padding: 10px 0; }
  .ez-box { padding: 4px 4px 4px 12px; }
  .ez-send { width: 44px; height: 44px; border-radius: 11px; }
  .ez-ic, .ez-x { width: 44px; height: 44px; }
  .ez-teaser { padding-right: 46px; } .ez-teaser .ez-x { top: 2px; right: 2px; }
  .ez-fb button { width: 44px; height: 44px; margin: -12px 0; }
  .ez-retry { min-height: 44px; padding: 0 8px; margin: -12px -8px; }
  .ez-next button { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .ez-jump { min-height: 44px; padding: 0 18px; font-size: 14px; }
  .ez-sug { min-height: 48px; }
}
@keyframes ez-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ez-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes ez-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ez *, .ez { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
