/* ==========================================================
   itagilistchat.css — FULL FILE (1:1 csere)
   HTML:
     main.kc-embed
     header: section.kc-welcome + .kc-w-title/.kc-w-sub
     input:  section.kc-inputbar + #kcInput.kc-input + #kcSend.kc-send
     log:    #kcLog.kc-log
   JS creates:
     .kc-msg + .kc-msg--user / .kc-msg--bot
     .kc-bubble + .kc-bubble__text
     .kc-sources (+ title/list)
========================================================== */

:root{
  --gold:#f7c600;
  --amber:#ff8a00;
  --green:#22c55e;

  --black:#0b0f17;
  --ink:#0f172a;
  --muted:#6b7280;

  --radius:22px;
  --pad:12px;

  --shadow: 0 22px 70px rgba(0,0,0,.42);
  --shadow2: 0 14px 34px rgba(0,0,0,.12);
  --glow: 0 0 0 1px rgba(247,198,0,.22),
          0 18px 50px rgba(0,0,0,.35),
          0 0 40px rgba(247,198,0,.16);

  /* robot “fotó” (embedded SVG) */
  --robot: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20stop-color%3D%27%23f7c600%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ff8a00%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2730%27%20fill%3D%27url(%23g)%27/%3E%3Crect%20x%3D%2718%27%20y%3D%2720%27%20width%3D%2728%27%20height%3D%2726%27%20rx%3D%2710%27%20fill%3D%27%230b0f17%27/%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%2733%27%20r%3D%273%27%20fill%3D%27%23ffffff%27/%3E%3Ccircle%20cx%3D%2736%27%20cy%3D%2733%27%20r%3D%273%27%20fill%3D%27%23ffffff%27/%3E%3Crect%20x%3D%2726%27%20y%3D%2739%27%20width%3D%2712%27%20height%3D%273%27%20rx%3D%271.5%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.9%27/%3E%3C/svg%3E");

  /* paper plane icon */
  --plane: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M2.01%2021L23%2012%202.01%203%202%2010l15%202-15%202z%27/%3E%3C/svg%3E");
}

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

html,body{
  height:100%;
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: transparent;
}

body{ overflow:hidden; }

/* ==========================================================
   ROOT
========================================================== */
.kc-embed{
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  border-radius: var(--radius);
  overflow:hidden;

  background:
    radial-gradient(900px 340px at 35% 0%, rgba(247,198,0,.14), transparent 58%),
    radial-gradient(900px 340px at 70% 10%, rgba(255,138,0,.10), transparent 58%),
    rgba(255,255,255,.94);

  border: 1px solid rgba(247,198,0,.26);
  box-shadow: var(--glow);
  position:relative;
}

/* ==========================================================
   HEADER (mockup: fekete sáv + halvány sárga→narancs sarok + online dot)
========================================================== */
.kc-welcome{
  flex: 0 0 66px;
  height:66px;
  position:relative;
  overflow:hidden;

  /* ONLINE DOT beégetve background layerként (a robot jobb aljához igazítva) */
  background-image:
    radial-gradient(circle at 42px 48px,
      rgba(34,197,94,1) 0 5px,
      rgba(255,255,255,.95) 6px 7px,
      transparent 8px),
    /* fekete header + halvány sárga→narancs sarok (mint a rajzod) */
    linear-gradient(135deg,
      rgba(11,15,23,.98) 0%,
      rgba(11,15,23,.82) 66%,
      rgba(247,198,0,.22) 66%,
      rgba(255,138,0,.14) 100%),
    /* arany glow */
    radial-gradient(900px 240px at 20% 0%, rgba(247,198,0,.28), transparent 60%);

  border-bottom: 1px solid rgba(247,198,0,.20);
}

/* eredeti hosszú welcome szöveg elrejtése */
.kc-w-title,
.kc-w-sub{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* robot avatar */
.kc-welcome::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 13px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--robot) center/cover no-repeat;
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
}

/* header szöveg: (kérésed szerint) */
.kc-welcome::after{
  content:"SCRUMI az itagilist.hu chatbotja\A Online most • Kérdezz bátran!";
  white-space: pre-line;

  position:absolute;
  left: 60px;
  right: 52px;
  top: 15px;

  font-size: 13px;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing:-0.2px;
  color:#fff;
}

/* dekor X jobb felül (csak dizájn) */
.kc-embed::after{
  content:"×";
  position:absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 12px;

  display:grid;
  place-items:center;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  font-size: 18px;
  font-weight: 900;

  pointer-events:none;
  z-index: 30;
}

/* ==========================================================
   FLEX ORDER
   HTML: welcome -> inputbar -> log
   Desired: welcome -> log -> inputbar
========================================================== */
.kc-welcome{ order: 1; }
.kc-log{ order: 2; }
.kc-inputbar{ order: 3; }
.kc-note{ order: 4; display:none; }

/* ==========================================================
   LOG  (felülírjuk a JS inline maxHeight=360px-ot)
========================================================== */
.kc-log{
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow: auto !important;

  padding: 12px 12px 12px;
  background: transparent;

  display:flex;
  flex-direction:column;
  gap:10px;
}

/* üres log fallback (ha JS greet nincs bent) */
.kc-log:empty::before{
  content:"Szia! SCRUMI vagyok, az ITAgilist.hu ügyfélszolgálati chatbotja — miben segíthetek?";
  white-space: pre-line;
  max-width: 86%;
  align-self:flex-start;

  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(247,198,0,.18);
  box-shadow: var(--shadow2);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

/* ==========================================================
   MESSAGES (JS: .kc-msg--bot / .kc-msg--user)
========================================================== */
.kc-msg{
  display:flex;
  width:100%;
}

/* BOT */
.kc-msg--bot{
  justify-content:flex-start;
  position:relative;
  padding-left: 44px;
}
.kc-msg--bot::before{
  content:"";
  position:absolute;
  left: 0;
  top: 6px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--robot) center/cover no-repeat;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

/* USER */
.kc-msg--user{ justify-content:flex-end; }

/* bubble */
.kc-bubble{
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow2);
  background: rgba(255,255,255,.94);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

/* user bubble: fekete pill */
.kc-msg--user .kc-bubble{
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(11,15,23,1), rgba(11,15,23,.88));
  border-color: rgba(247,198,0,.28);
  color:#fff;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

.kc-bubble__text{
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==========================================================
   SOURCES
========================================================== */
.kc-sources{
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(15,23,42,.08);
  font-size: 13px;
}
.kc-sources__title{ font-weight: 900; margin-bottom: 6px; }
.kc-sources__list{ margin: 0; padding-left: 18px; }
.kc-sources__list li{ margin: 4px 0; }
.kc-sources__list a{ color: inherit; text-decoration: underline; }

/* ==========================================================
   INPUTBAR (alul)
========================================================== */
.kc-inputbar{
  flex: 0 0 auto;
  display:flex;
  gap:10px;
  padding: 12px;

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(247,198,0,.18);
}

/* input */
#kcInput,
.kc-input{
  flex:1;
  height: 46px;
  padding: 10px 12px;

  border-radius: 16px;
  border: 1px solid rgba(247,198,0,.25);
  background: rgba(255,255,255,.96);

  outline:none;
  font-size: 14px;
  color: var(--ink);
}
#kcInput:focus,
.kc-input:focus{
  border-color: rgba(247,198,0,.85);
  box-shadow: 0 0 0 4px rgba(247,198,0,.16);
}

/* send */
#kcSend,
.kc-send{
  height: 46px;
  min-width: 128px;
  padding: 0 16px;

  border:0;
  border-radius: 999px;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  background: linear-gradient(135deg, var(--gold), var(--amber));
  box-shadow: 0 12px 26px rgba(247,198,0,.18);

  color:#111;
  font-weight: 900;
  font-size: 14px;
}
#kcSend::before,
.kc-send::before{
  content:"";
  width: 16px;
  height: 16px;
  background:#111;
  -webkit-mask: var(--plane) center/contain no-repeat;
  mask: var(--plane) center/contain no-repeat;
  opacity:.95;
}
#kcSend:hover,
.kc-send:hover{ filter: brightness(1.04); }

/* ==========================================================
   SCROLLBAR
========================================================== */
.kc-log::-webkit-scrollbar{ width:10px; }
.kc-log::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.14);
  border-radius:999px;
  border: 3px solid rgba(255,255,255,.85);
}
.kc-log::-webkit-scrollbar-track{ background: transparent; }

/* ==========================================================
   MOBILE
========================================================== */
@media (max-width:420px){
  #kcSend{ min-width: 118px; }
}

/* ==========================================================
   FIX VÉGLEG: narancs sarok + online pötty teljesen látszódjon
   (tedd a CSS LEGALJÁRA)
========================================================== */

/* 1) Narancs sarok erősebbre */
.kc-welcome{
  /* az eddigi háttér felülírása */
  background-image:
    /* ONLINE DOT – kicsit beljebb, hogy ne vágja le */
    radial-gradient(circle at 44px 50px,
      rgba(34,197,94,1) 0 5px,
      rgba(255,255,255,.95) 6px 7px,
      transparent 8px),

    /* fekete header + MOST már rendes narancs szalag */
    linear-gradient(135deg,
      rgba(11,15,23,.98) 0%,
      rgba(11,15,23,.82) 62%,
      rgba(255,138,0,.85) 62%,
      rgba(255,138,0,.35) 100%),

    /* enyhe arany glow */
    radial-gradient(900px 240px at 20% 0%, rgba(247,198,0,.22), transparent 60%) !important;
}

/* 2) Online pötty teljes (ne vágja le)
   - a robot kört egy picit beljebb tesszük
   - és a header overflow-ját “visible”-re állítjuk */
.kc-welcome{
  overflow: visible !important;
}

/* robot avatar picit lejjebb/beljebb, hogy a pötty biztosan beférjen */
.kc-welcome::before{
  left: 12px !important;
  top: 12px !important;
  width: 40px !important;
  height: 40px !important;
}

/* ha mégis levágná valami a konténeren belül, a root se vágja le a header sávot */
.kc-embed{
  overflow: hidden; /* maradhat */
}

/* ==========================================================
   FINAL: élénk ITAgilist sárga sarok (mint a képen)
========================================================== */

.kc-welcome{
  background-image:
    /* online dot (marad, csak kicsit beljebb hogy ne vágja) */
    radial-gradient(circle at 46px 52px,
      rgba(34,197,94,1) 0 5px,
      rgba(255,255,255,.95) 6px 7px,
      transparent 8px),

    /* fekete header + ÉLÉNK SÁRGA SZALAG */
    linear-gradient(135deg,
      rgba(11,15,23,.98) 0%,
      rgba(11,15,23,.82) 60%,
      rgba(247,198,0,1) 60%,
      rgba(247,198,0,.55) 100%),

    /* enyhe glow */
    radial-gradient(900px 240px at 20% 0%, rgba(247,198,0,.20), transparent 60%) !important;

  overflow: visible !important; /* pötty teljesen látszódjon */
}