/* Dr. Zénó Chatbot – widget stílusok
   Arculati tokenek (Pécs; a Kaposvár-felülírás a frontend.php-ban, telephely szerint): #c0a166 arany, #6d6e71 szürke, #f4f4f2 off-white, IBM Plex Sans, 30px kerekítés.
   Kontraszt-döntés: a szürke a nagy felületű, fehér szöveges elemeken (fejléc, launcher, saját
   üzenetbuborék), az arany a kiemelt gombokon/chipeken SÖTÉT szöveggel, mert fehér szöveg
   aranyon nem adna elég kontrasztot. */
:root{
  --cw-primary-rgb:109,110,113;
  --cw-accent-rgb:192,161,102;
  --cw-chip-hover:#ded9d0;
  --cw-primary:#6d6e71;
  --cw-primary-dark:#57585b;
  --cw-primary-light:#eceae7;
  --cw-accent:#c0a166;
  --cw-accent-dark:#a3844f;
  --cw-accent-text:#3a2f1c;
  --cw-bg:#f4f4f2;
  --cw-surface:#ffffff;
  --cw-text:#2b2b2d;
  --cw-text-muted:#8a8b8e;
  --cw-border:#e2e0da;
  --cw-radius-lg:30px;
  --cw-radius-md:18px;
  --cw-radius-sm:10px;
  --cw-shadow:0 16px 36px rgba(43,43,45,0.16);
  --cw-font:"IBM Plex Sans", sans-serif;
}

.cw-launcher{
  position:fixed; right:24px; bottom:24px; z-index:9998;
  width:60px; height:60px; border-radius:50%;
  background:var(--cw-primary); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--cw-shadow);
  transition:transform .18s ease, background .18s ease;
}
.cw-launcher:hover{ transform:translateY(-2px) scale(1.04); background:var(--cw-primary-dark); }
.cw-launcher:focus-visible{ outline:3px solid var(--cw-accent); outline-offset:3px; }
.cw-launcher svg{ width:26px; height:26px; }

/* Egyszeri, diszkrét figyelemfelhívás: pár másodperc után a launcher "megugrik"
   párszor, közben terjedő arany gyűrű fut ki belőle. Utána leáll.
   A gyűrű a ::after-en megy, hogy ne nyomja el a launcher alap árnyékát;
   az overflow:visible !important a téma esetleges button-klippelése ellen véd. */
.cw-launcher::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
}
.cw-launcher.cw-attention{ animation:cw-nudge 1.7s ease-in-out 3 !important; }
.cw-launcher.cw-ring-on::after{ animation:cw-ring 1.7s ease-out 5 !important; }
@keyframes cw-nudge{
  0%,60%,100%{ transform:translateY(0) scale(1); }
  12%{ transform:translateY(-11px) scale(1.08); }
  26%{ transform:translateY(0) scale(1); }
  38%{ transform:translateY(-6px) scale(1.04); }
  50%{ transform:translateY(0) scale(1); }
}
/* A gyűrű SZÜRKE (nem arany): az arany a launcher mögötti oldalsávval/lábléccel
   egybeolvadna, a szürke fehér és arany háttéren is látszik. */
@keyframes cw-ring{
  0%{ box-shadow:0 0 0 0 rgba(var(--cw-primary-rgb),.6); }
  60%{ box-shadow:0 0 0 24px rgba(var(--cw-primary-rgb),0); }
  100%{ box-shadow:0 0 0 0 rgba(var(--cw-primary-rgb),0); }
}

/* Buborék-teaser a launcher fölött, egyszer munkamenetenként, elvethető.
   Felépítés: a .cw-teaser a "keret" réteg (2px), amin egy lassan körbefutó
   arany ív megy (conic-gradient + animált --cw-angle); a .cw-teaser-inner a
   fehér tartalom. A csücsök (::after) lefelé, a launcher középvonala fölé mutat. */
@property --cw-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

.cw-teaser{
  position:fixed; right:24px; bottom:100px; z-index:9998;
  max-width:320px; padding:2px; border-radius:18px;
  background:
    conic-gradient(from var(--cw-angle),
      rgba(var(--cw-accent-rgb),0) 0deg,
      rgba(var(--cw-accent-rgb),.9) 45deg,
      rgba(var(--cw-accent-rgb),0) 110deg,
      rgba(var(--cw-accent-rgb),0) 360deg),
    rgba(var(--cw-primary-rgb),.20);
  box-shadow:var(--cw-shadow); cursor:pointer;
  transform-origin:bottom right;
  opacity:0;
}
.cw-teaser-inner{
  position:relative;
  background:var(--cw-surface); color:var(--cw-text);
  font-family:var(--cw-font); font-size:16px; line-height:1.5;
  padding:17px 42px 17px 18px; border-radius:16px;
}
.cw-teaser-text{ display:block; }

/* Belépő: a launcher sarkából "kipattan" túllövéssel, majd 2 finom lélegzetvétel.
   Ezzel párhuzamosan indul a lassú körbefutó keret. */
.cw-teaser.cw-teaser-in{
  opacity:1;
  animation:cw-teaser-in 1.9s ease-in-out, cw-teaser-spin 4.5s linear .4s infinite;
}
@keyframes cw-teaser-in{
  0%{   opacity:0; transform:translateY(18px) scale(.4); }
  18%{  opacity:1; transform:translateY(-3px) scale(1.05); }
  30%{  transform:translateY(0) scale(1); }
  52%{  transform:scale(1); }
  64%{  transform:scale(1.04); }
  78%{  transform:scale(1); }
  90%{  transform:scale(1.02); }
  100%{ transform:scale(1); }
}
@keyframes cw-teaser-spin{ to{ --cw-angle:360deg; } }

.cw-teaser::after{
  content:""; position:absolute; right:28px; bottom:-13px; width:0; height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:16px solid var(--cw-surface);
  filter:drop-shadow(0 6px 4px rgba(43,43,45,.12));
}
.cw-teaser .cw-teaser-close{
  position:absolute; top:8px; right:8px; width:20px !important; height:20px !important;
  padding:0 !important; border:none !important; border-radius:6px !important;
  background:none !important; color:var(--cw-text-muted) !important;
  font-size:0 !important; line-height:1 !important;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.cw-teaser .cw-teaser-close:hover{ background:var(--cw-primary-light) !important; color:var(--cw-text) !important; }
.cw-teaser-close svg{ width:12px; height:12px; }

/* Csökkentett mozgás: nincs ugrálás és nincs kifutó gyűrű, de a figyelemért
   marad egy tisztán átlátszóság-alapú (nem mozgó) villanás a launcher gyűrűjén. */
@media (prefers-reduced-motion:reduce){
  .cw-launcher.cw-attention{ animation:none !important; }
  .cw-launcher.cw-ring-on::after{
    animation:cw-ring-blink 1.1s ease-in-out 4 !important;
    box-shadow:0 0 0 3px var(--cw-primary);
  }
  .cw-teaser{ transform:none; }
  .cw-teaser.cw-teaser-in{ transform:none; animation:cw-teaser-fade .25s ease both; }
}
@keyframes cw-ring-blink{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }
@keyframes cw-teaser-fade{ from{ opacity:0; } to{ opacity:1; } }

/* A weboldal saját CSS-e (pl. egy ikon-rendszer globális resetje) gyakran elrejti
   vagy felülírja a nyers <svg> elemeket. Ez a blokk kifejezetten a widget ikonjaira
   kényszeríti vissza a megjelenést és a helyes fill/stroke viselkedést. */
.cw-launcher svg,
.cw-header-avatar svg,
.cw-close svg,
.cw-expand svg,
.cw-sound svg,
.cw-send svg{
  display:block !important;
  visibility:visible !important;
  fill:none !important;
  stroke:currentColor !important;
}

.cw-panel{
  position:fixed; right:24px; bottom:96px; z-index:9999;
  width:380px; max-width:calc(100vw - 32px);
  height:620px; max-height:calc(100vh - 132px);
  background:var(--cw-surface); border-radius:var(--cw-radius-lg);
  box-shadow:var(--cw-shadow); overflow:hidden;
  display:flex; flex-direction:column;
  font-family:var(--cw-font); color:var(--cw-text);
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, width .18s ease, height .18s ease;
}
.cw-panel.cw-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
/* Nagyított nézet – a launcher fölött marad, felfelé és oldalra nő. */
.cw-panel.cw-lg{
  width:680px;
  max-width:calc(100vw - 48px);
  height:calc(100vh - 112px);
  max-height:calc(100vh - 112px);
}

.cw-header{
  background:var(--cw-primary); color:#fff; padding:18px 20px;
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.cw-header-avatar{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  overflow:hidden;
}
.cw-header-avatar svg{ width:20px; height:20px; }
.cw-header-avatar-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.cw-header-text{ line-height:1.3; flex:1; min-width:0; }
.cw-header-title{ font-size:15px; font-weight:600; }
.cw-header-sub{ font-size:12px; color:rgba(255,255,255,.78); }
.cw-close,
.cw-expand,
.cw-sound{
  background:rgba(255,255,255,.14); border:none; color:#fff; cursor:pointer;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; flex-shrink:0;
  transition:background .15s ease;
}
.cw-close:hover,
.cw-expand:hover,
.cw-sound:hover{ background:rgba(255,255,255,.3); }
.cw-close svg{ width:19px; height:19px; }
.cw-expand svg,
.cw-sound svg{ width:16px; height:16px; }

.cw-messages{
  flex:1 1 auto; min-height:0; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px;
  background:var(--cw-bg);
}
.cw-row{ display:flex; }
.cw-row.cw-user{ justify-content:flex-end; }
.cw-bubble{
  max-width:82%; padding:11px 15px; font-size:13.5px; line-height:1.55;
  border-radius:var(--cw-radius-md); white-space:pre-wrap; word-wrap:break-word;
}
.cw-row.cw-bot .cw-bubble{
  background:var(--cw-surface); border:1px solid var(--cw-border);
  border-top-left-radius:6px; color:var(--cw-text);
}
.cw-row.cw-user .cw-bubble{
  background:var(--cw-primary); color:#fff; border-top-right-radius:6px;
}

/* Bot buborék: a tartalom Markdownból HTML-re alakítva (lásd chat-widget.js _mdToHtml). */
.cw-row.cw-bot .cw-bubble{ white-space:normal; }
.cw-row.cw-bot .cw-md-line{ margin:0; }
.cw-row.cw-bot .cw-md-line + .cw-md-line{ margin-top:2px; }
.cw-row.cw-bot .cw-md-gap{ height:8px; }
.cw-row.cw-bot .cw-bubble strong{ font-weight:600; }
.cw-row.cw-bot .cw-bubble em{ font-style:italic; }
.cw-row.cw-bot .cw-bubble a{
  color:var(--cw-primary-dark); text-decoration:underline; word-break:break-word;
}
.cw-row.cw-bot .cw-bubble a:hover{ color:var(--cw-accent-dark); }
.cw-row.cw-bot .cw-bubble ul{ margin:6px 0; padding-left:20px; }
.cw-row.cw-bot .cw-bubble li{ margin:3px 0; }
.cw-row.cw-bot .cw-bubble ul + .cw-md-line{ margin-top:6px; }
/* Apróbetűs sor (pl. adatkezelési hozzájárulás) – lásd "%% " jelölés a _mdToHtml-ben. */
.cw-row.cw-bot .cw-bubble .cw-md-fine{
  font-size:11px; line-height:1.4; font-style:italic; color:var(--cw-text-muted); margin-top:6px;
}

.cw-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:10px 18px 10px; flex-shrink:0; }
.cw-chip{
  background:var(--cw-primary-light); color:var(--cw-primary-dark); border:1px solid transparent;
  border-radius:999px; padding:7px 14px; font-size:12.5px; cursor:pointer; font-family:var(--cw-font);
  transition:background .15s ease;
}
.cw-chip:hover{ background:var(--cw-chip-hover); }
.cw-chip.cw-slot{ background:var(--cw-accent); border-color:var(--cw-accent); color:var(--cw-accent-text); font-weight:600; }
.cw-chip.cw-slot:hover{ background:var(--cw-accent-dark); border-color:var(--cw-accent-dark); }

.cw-typing{ display:flex; align-items:center; gap:8px; padding:11px 15px; }
.cw-typing-label{ font-size:12.5px; color:var(--cw-text-muted); }
.cw-typing-dots{ display:flex; gap:4px; flex-shrink:0; }
.cw-typing-dots span{
  width:6px; height:6px; border-radius:50%; background:var(--cw-text-muted);
  animation:cw-bounce 1.2s infinite ease-in-out;
}
.cw-typing-dots span:nth-child(2){ animation-delay:.15s; }
.cw-typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes cw-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5;} 30%{ transform:translateY(-4px); opacity:1;} }

.cw-inputbar{
  display:flex; gap:8px; padding:12px 14px 14px; border-top:1px solid var(--cw-border);
  background:var(--cw-surface); flex-shrink:0;
}
.cw-input{
  flex:1; border:1px solid var(--cw-border); border-radius:999px; padding:11px 18px;
  font-size:13.5px; font-family:var(--cw-font); outline:none; color:var(--cw-text);
}
.cw-input:focus{ border-color:var(--cw-accent); }
.cw-send{
  width:40px; height:40px; border-radius:50%; border:none; background:var(--cw-accent);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cw-send:hover{ background:var(--cw-accent-dark); color:#fff; }
.cw-send:disabled{ opacity:.5; cursor:default; }
/* A papírrepülő ikon vizuális súlypontja jobbra-fel esik, ezért kicsit balra-le toljuk,
   hogy optikailag a kör közepén üljön. */
.cw-send svg{ width:18px; height:18px; transform:translate(-1px, 1px); }

/* ── Elementor "kit" gomb-felülírás ─────────────────────────────────────────
   A site témája MINDEN <button>-re ráhúz egy 20px-es, uppercase, arany,
   30px-kerekítésű, 15/50px paddinges stílust (.elementor-kit-NN button {…}).
   A widget összes interaktív eleme <button>, ezért a widget gyökerein belül
   ezt semlegesíteni kell, majd a komponens-stílusokat !important-tal újra
   érvényre juttatni. */
.cw-launcher,
.cw-teaser-close,
.cw-panel button{
  font-family:var(--cw-font) !important;
  font-size:13.5px !important;
  font-weight:400 !important;
  line-height:normal !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  text-align:center !important;
  box-shadow:none;
  min-width:0 !important;
}

.cw-launcher{
  width:60px !important; height:60px !important; padding:0 !important;
  border:none !important; border-radius:50% !important;
  background:var(--cw-primary) !important; color:#fff !important;
  box-shadow:var(--cw-shadow);
  overflow:visible !important;
}
.cw-launcher:hover{ background:var(--cw-primary-dark) !important; }

.cw-panel .cw-close,
.cw-panel .cw-expand,
.cw-panel .cw-sound{
  width:30px !important; height:30px !important; padding:0 !important;
  border:none !important; border-radius:9px !important;
  background:rgba(255,255,255,.14) !important; color:#fff !important;
}
.cw-panel .cw-close:hover,
.cw-panel .cw-expand:hover,
.cw-panel .cw-sound:hover{ background:rgba(255,255,255,.3) !important; color:#fff !important; }

.cw-panel .cw-send{
  width:40px !important; height:40px !important; padding:0 !important;
  border:none !important; border-radius:50% !important;
  background:var(--cw-accent) !important; color:#fff !important;
}
.cw-panel .cw-send:hover{ background:var(--cw-accent-dark) !important; color:#fff !important; }
.cw-panel .cw-send:disabled{ opacity:.5 !important; }

.cw-panel .cw-chip{
  font-size:12.5px !important; font-weight:400 !important; line-height:1.4 !important;
  padding:7px 14px !important;
  border:1px solid transparent !important; border-radius:999px !important;
  background:var(--cw-primary-light) !important; color:var(--cw-primary-dark) !important;
  width:auto !important;
}
.cw-panel .cw-chip:hover{ background:var(--cw-chip-hover) !important; }
.cw-panel .cw-chip.cw-slot{
  background:var(--cw-accent) !important; border-color:var(--cw-accent) !important;
  color:var(--cw-accent-text) !important; font-weight:600 !important;
}
.cw-panel .cw-chip.cw-slot:hover{ background:var(--cw-accent-dark) !important; border-color:var(--cw-accent-dark) !important; }

@media (max-width:480px){
  .cw-panel{ right:12px; left:12px; bottom:88px; width:auto; border-radius:24px; }
  /* Mobilon a panel amúgy is közel teljes szélességű; a nagyítás csak a magasságot növeli. */
  .cw-panel.cw-lg{ width:auto; height:calc(100vh - 104px); max-height:calc(100vh - 104px); }
  .cw-launcher{ right:16px; bottom:16px; }
}