/* AI-panel (T-271, UX-kör): a fejléc kerek AI-gombja és a jobbról becsúszó panel kerete. Minden felületen ugyanaz; a színek a téma
   tokenjeiből jönnek (külső felületen --t-*, a dashboardon a Skodash-téma), ezért világos és sötét módban is olvasható. A chat saját
   stílusa (ai-chat.css) csak az első nyitáskor töltődik be. */
.ai-panel, .ai-inditogomb {
  --ai-fo: var(--t-teal, var(--dash-elsodleges, #2B7570));
  --ai-fo-mely: var(--t-teal-aktiv, #1D514D);
  --ai-hatter: var(--t-felulet, #fff);
  --ai-szoveg: var(--t-szoveg, #17211D);
  --ai-halk: var(--t-halk, #5B6962);
  --ai-keret: var(--t-keret, rgba(127, 127, 127, .28));
}
html.dark-theme .ai-panel, html.dark-theme .ai-inditogomb {
  --ai-hatter: #171d2a; --ai-szoveg: #e6eaef; --ai-halk: #aab4bf; --ai-keret: rgba(255, 255, 255, .12); --ai-fo: #2f8a83;
}

/* Kerek AI-gomb: a logó fehéren a márka mélytürkiz színén, finom fénnyel. */
.ai-inditogomb {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; min-width: 44px; padding: 0 !important; margin: 0 .1rem; color: #fff; cursor: pointer;
  background: transparent; border: 0; border-radius: 50%;
}
.ai-inditogomb__kor {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, #4fb3aa 0%, var(--ai-fo) 48%, var(--ai-fo-mely) 100%);
  box-shadow: 0 2px 8px rgba(29, 81, 77, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ai-inditogomb__kor svg { width: 24px; height: auto; color: #fff; fill: currentColor; }
.ai-inditogomb__felirat {
  position: absolute; right: -1px; bottom: 1px; min-width: 19px; padding: 0 4px; font-size: 10px; font-weight: 700; line-height: 15px;
  letter-spacing: .02em; color: var(--ai-fo-mely); background: #fff; border: 1.5px solid var(--ai-fo); border-radius: 8px;
}
.ai-inditogomb:hover .ai-inditogomb__kor, .ai-inditogomb:focus-visible .ai-inditogomb__kor { transform: scale(1.06); box-shadow: 0 4px 14px rgba(29, 81, 77, .45), 0 0 0 4px rgba(79, 179, 170, .18); }
.ai-inditogomb:focus-visible { outline: 2px solid var(--ai-fo); outline-offset: 2px; }
.ai-inditogomb.is-aktiv .ai-inditogomb__kor { box-shadow: 0 0 0 3px rgba(79, 179, 170, .35), 0 2px 8px rgba(29, 81, 77, .35); }
.dash-topgomb.ai-inditogomb { width: 44px; height: 44px; }

/* A panel: asztali nézetben jobb oldali sáv (az oldal mellette használható marad), mobilon teljes képernyő. */
.ai-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1060; display: flex; width: min(480px, 100vw);
  color: var(--ai-szoveg); background: var(--ai-hatter); border-left: 1px solid var(--ai-keret);
  box-shadow: -18px 0 48px rgba(13, 26, 23, .18); transform: translateX(104%); transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}
.ai-panel[hidden] { display: none; }
.ai-panel.is-nyitva { transform: translateX(0); }
.ai-panel__belso { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.ai-panel__hatter { position: fixed; inset: 0; z-index: 1055; background: rgba(13, 26, 23, .45); opacity: 0; transition: opacity .26s ease; }
.ai-panel__hatter[hidden] { display: none; }
.ai-panel__hatter.is-nyitva { opacity: 1; }
@media (min-width: 768px) { .ai-panel__hatter { display: none !important; } }
/* Mobilon teljes képernyő: a magasság a látható rész, így nyitott billentyűzetnél is a billentyűzet fölött ér véget (a beviteli sáv látszik).
   Az értéket az ai-chat.js írja a visualViewportból; amíg nincs, a 100dvh. Az alsó menü és az oldal a panel alatt marad, nem görget. */
@media (max-width: 767.98px) {
  .ai-panel { top: var(--ai-vv-top, 0px); bottom: auto; width: 100vw; height: var(--ai-vv-h, 100dvh); border-left: 0; box-shadow: none; }
  html.ai-panel-nyitva, html.ai-panel-nyitva body { overflow: hidden; overscroll-behavior: none; }
}
.ai-panel__toltes { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; flex: 1 1 auto; padding: 2rem; color: var(--ai-halk); text-align: center; }
.ai-panel__pottyok { display: inline-flex; gap: 6px; }
.ai-panel__pottyok i { width: 8px; height: 8px; background: var(--ai-fo); border-radius: 50%; animation: ai-potty 1.1s ease-in-out infinite; }
.ai-panel__pottyok i:nth-child(2) { animation-delay: .15s; }
.ai-panel__pottyok i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-potty { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ai-panel, .ai-panel__hatter, .ai-inditogomb__kor { transition: none; }
  .ai-panel__pottyok i { animation: none; opacity: .8; }
}