/* ===== FIX LAYER — mindent egységesít, a saját CSS-eid fölé töltve ===== */

/* Globális oszlop-szélesség + oldalpárna */
:root{
  --page-max: 800px !important;
  --gutter: 16px !important;
  --chat-col: 800px;          /* próbáld: 880 / 920 / 960 px */
}

/* Alap háttér (ha bárhol elveszett volna) */
body { background: var(--page-bg, #fcf9f5); }

/* ---------- TOPBAR ---------- */
.topbar{
  position: fixed; inset: 0 0 auto 0;
  justify-content: space-between; 
  height: var(--topbar-h, 56px);
  background: #fcf9f5;
  border-bottom: none;
  z-index: 1000;
  display: flex; align-items: center;
  padding: 0 var(--gutter);
}
.topbar::before, .topbar::after{ content:""; flex:1 1 calc((100vw - var(--page-max))/2); }
.topbar > *{ flex:0 0 auto; min-width:0; }
.topbar h1{ 
  margin: 0; 
  white-space: nowrap; 
  letter-spacing: .2px;
}
.topbar .menu{ 
  margin-left: 12px; 
  white-space: nowrap; 
  display:flex; align-items:center; gap:12px;
}
.topbar .menu span { display:inline-block; }

/* ---------- TIPBAR ---------- */
.tipbar{
  position: sticky; top: var(--topbar-h, 56px);
  background: var(--tip-bg, #fff3bf);
  border-top: 1px solid var(--border, #ddd);
  border-bottom: 1px solid var(--border, #ddd);
  z-index: 900;
  border: none !important;
}
.tipbar-inner{
  max-width: var(--chat-col);
  margin: 0 auto; padding: 0 var(--gutter);
  overflow: hidden;
}

/* ---------- INFO WINDOW ---------- */
.info-section{ padding: 8px var(--gutter); }

#info-title{
  font-size:12px; color:#555;
  margin: 2px auto 4px;
  max-width: 340px; text-align:left;
}
/* InfoWindow: a nyilaknak helyet adunk és a z-réteg fölé hozzuk */
#info-window{
  --w: 340px;
  --card-h: clamp(130px, 22vh, 200px);
  width:100%; max-width: var(--w); margin:0 auto 8px;
  border: none;
  border-radius:10px;
  background: transparent;
  position:relative; 
  overflow:visible;
  z-index: 950;               /* tipbar fölé */
  margin-bottom: 64px;        /* legyen tere a nyilaknak */
}

.card{
  display:none; height: var(--card-h);
  padding:12px; display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.card.active{ display:flex; }
.card .iw-fig{ width:100%; height:100%; }
.card .iw-fig > img,
.card .iw-fig > video{
  width:100%; height:100%; display:block;
  object-fit: contain;
  background:#000; border-radius:6px;
}


/* vezérlők + dots (ne torzuljon, ne lógjon rá a nyílra) */
#info-window .info-controls{ 
  position:absolute; inset:auto 8px 8px 8px; 
  display:flex; align-items:center; justify-content:space-between; 
  pointer-events:none;
}
#info-window .info-prev,#info-window .info-next{
  pointer-events:auto; width:24px; height:24px; border-radius:50%;
  border:1px solid var(--border, #ddd); background:#fff;
  display:grid; place-items:center; cursor:pointer; user-select:none;
  font-size:13px; line-height:1;
  z-index: 1001;              /* biztosan látszódjon */
}
#info-window .info-dots{
  pointer-events:none; position:absolute; left:40px; right:40px; bottom:8px;
  display:flex; gap:6px; justify-content:center; align-items:center;
}
#info-window .info-dots button{
  pointer-events:auto; display:block; padding:0; line-height:0;
  box-sizing: content-box;
  width:6px; height:6px; border-radius:50%;
  border:1px solid var(--border, #333); background:#ddd; cursor:pointer;
}
#info-window .info-dots button[aria-current="true"]{ background:#333; border-color:#333; }

/* ---------- CHAT BOX ---------- */
.chatbox{
  max-width: var(--chat-col); margin:0 auto;
  padding: 14px var(--gutter);
  padding-bottom: calc(var(--composer-h,48px) + var(--footer-h,24px) + 16px);
  display:flex; flex-direction:column;
  background: transparent;
  overflow: visible;                /* ne vegye át a scrollt */
}

.chat-msg{
  display:inline-block; max-width:88%;
  margin:8px 0; padding:4px 8px;
  border-radius:12px; font-size:14px;
  background:#eee; word-wrap:break-word;
}
.chat-msg.ai{ background:#fcf9f5; margin-right:auto; text-align:left; }
.chat-msg.user{ background:#f0f0f0; margin-left:auto; text-align:right; }

.chat-msg{ margin: 8px 0; }
.chat-msg { margin: 6px 0; }
.chat-msg.ai + .chat-msg.ai,
.chat-msg.user + .chat-msg.user { margin-top: 2px; }
.chat-msg.ai + .chat-msg.user,
.chat-msg.user + .chat-msg.ai { margin-top: 10px; }
.chat-msg { max-width: 92%; }
.chat-msg.ai + .chat-msg.user,
.chat-msg.user + .chat-msg.ai{ margin-top: 14px; }

@media (max-width: 767.98px){
  :root{ --chat-col: 100%; }
  .chat-msg{ max-width: 92%; }
}

/* ---------- COMPOSER (parancssor) ---------- */
.composer{
  position: fixed; left:0; right:0; bottom: var(--footer-h,24px);
  height: var(--composer-h,48px);
  background:#fcf9f5; border-top:none;
  z-index:950; display:flex; align-items:center; gap:8px;
  padding: 6px var(--gutter);
}
.composer::before, .composer::after{ content:""; flex:1 1 calc((100vw - var(--page-max))/2); }
.composer > *{ flex:0 0 auto; }
.composer input[type="text"]{
  width: 48vw; max-width: 720px; min-width: 200px;
  border:1px solid var(--border, #ddd);
  border-radius: 999px; padding: 8px 12px;
  outline: none; background:#fff;
  border-top: none !important;
}
.composer .icon, .composer .send{
  border:1px solid var(--border, #ddd);
  background:#fff; border-radius:10px;
  width:36px; height:32px; display:grid; place-items:center; cursor:pointer;
}

/* ---------- FOOTER ---------- */
.footer{
  position: fixed; left:0; right:0; bottom:0;
  height: var(--footer-h,24px);
  background:#fcf9f5; border-top:none;
  z-index:940; display:flex; align-items:center; padding:0 var(--gutter);
  justify-content: center;
  text-align: center;
  color:#666; font-size:12px;
  border-top: none !important;
}
.footer::before, .footer::after{ content:""; flex:1 1 calc((100vw - var(--chat-col))/2); }
.footer > *{ flex:0 0 auto; }

/* ---------- RESZPONZÍV FINOMÍTÁS ---------- */
@media (max-width: 767.98px){
  .chat-msg{ max-width:88%; }
  #info-window{ --w: 100%; border-left:none; border-right:none; border-radius:0; }
  #info-title{ max-width: 100%; padding: 0 var(--gutter); }
}

/* ----- Mode switch ----- */
.mode-switch{ display:inline-flex; gap:8px; margin-left:12px; }
.mode-btn{
  font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  padding:8px 10px; border:1px solid var(--border, #d7cdbf);
  background:#fff7; border-radius:999px; cursor:pointer;
}
.mode-btn[aria-pressed="true"]{
  background:#e9e3da; box-shadow: inset 0 0 0 1px #d0c6b7;
}

/* ----- Chat area ----- */
.beeai-chat{
  max-width: var(--chat-col, 800px);
  margin: 16px auto; padding:12px;
  background:#fffefa; border:1px solid var(--border, #eadfce); border-radius:14px;
}
.chatlog{
  display:flex; flex-direction:column; gap:10px;
  max-height:min(58vh, 680px); overflow:auto; padding:4px;
}
.msg{
  max-width:78%; border:1px solid var(--border, #eadfce); border-radius:12px;
  padding:10px 12px; background:#fff;
}
.msg.user{ margin-left:auto; background:#f4efe7; }
.msg.ai  { margin-right:auto; background:#ffffff; }

.composer{ margin-top:10px; display:flex; gap:8px; }
#msg{ flex:1 1 auto; height:40px; border-radius:999px; border:1px solid var(--border, #eadfce); padding:0 14px; }
#send{ height:40px; min-width:44px; border-radius:999px; border:1px solid var(--border, #eadfce); background:#fff; cursor:pointer; }

/* toast */
#toast-wrap {
  position: fixed;
  right: 16px;
  top: calc(var(--topbar-h, 56px) + 12px);
  z-index: 2000;
  pointer-events: none;
}
.toast {
  min-width: 220px;
  max-width: 420px;
  background: #111;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background:#116d2b; }
.toast.warn { background:#a36200; }

/* details slide vizuális fixek */
.info-slide .details-card { 
  display:block; width:100%;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:12px; box-sizing:border-box;
}
.info-slide .details-card__title { font-weight:600; margin-bottom:6px; opacity:.8; }

/* A látható slot mindig fix magasságú (videó alapján mért --iw-h, különben --card-h) */
#info-window .info-slide{
  display:flex; justify-content:center; align-items:center; padding:8px 0;
  height: var(--iw-h, var(--card-h));
}
/* Egységes media-host */
.info-media{ width:100%; height:100%; margin:0 auto; display:flex; align-items:center; justify-content:center; }
#info-window .details-card{ width:100%; max-width:520px; height:100%; overflow:auto; }

.info-media .details-card{
  background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:12px; box-sizing:border-box;
}
.details-card__title{ font-weight:600; opacity:.8; margin-bottom:6px; }

/* hard override */
#info-window { overflow: visible !important; border: none !important; }
#info-title:empty { display: none; }

/* Pöttyök + nyilak */
#info-window #info-dots{
  position:absolute; top: calc(100% + 12px);
  left:56px; right:56px; display:flex; gap:6px; justify-content:center; align-items:center;
  margin:0; padding:0; z-index:1001;
}
#info-window #info-dots .dot,
#info-window .info-dots button{ width:8px; height:8px; border-radius:50%; }

#info-window .info-prev, #info-window .info-next{
  position: absolute; top: calc(100% + 12px);
}
#info-window .info-prev { left: 12px; }
#info-window .info-next { right: 12px; }

/* mobil finomítás */
@media (max-width: 767.98px){
  #info-window .info-prev { left: 10px; top: calc(100% + 10px); }
  #info-window .info-next { right: 10px; top: calc(100% + 10px); }
  #info-window { margin-bottom: 52px; }
}

#info-dots{ display:flex; gap:6px; justify-content:center; align-items:center; margin-top:12px; }
#info-dots .dot{ width:8px; height:8px; border-radius:50%; background:#cfcfcf; cursor:pointer; }
#info-dots .dot.active{ background:#333; }

#info-window .details-card{ width:100%; height:100%; overflow:auto; box-sizing:border-box; }

/* Képgeneráláshoz */
.image-card .genimg-wrap { display:flex; justify-content:center; }
.image-card .genimg { max-width:100%; height:auto; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.image-card .genimg-hint { margin-top:.5rem; font-size:.85rem; color:#777; text-align:center; }

/* --- Chat scroll fixes (ütközések felülírása) --- */
#chatlog, #chat-list, .chat-list, #messages {
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding-right: 6px;
}
.msg { word-break: break-word; }

/* >>> EZ TÖRLI A KORÁBBI overflow:visible felülírást <<< */
.chat, .chatbox, .chat-panel {
  overflow: unset !important;      /* ne tiltsuk a scrollt a belső konténerben */
}

/* InfoWindow width unifikálás (fixes.css legvégén) */
#info-window{
  /* új szélességváltozó → régi névhez is hozzákötjük, hogy a régi szabályok se vesszenek el */
  --iw-w: 340px;         /* <- itt állítod kényelmesen a végső szélességet */
  --w: var(--iw-w);

  width: 100% !important;
  max-width: var(--iw-w) !important;
}

#info-title{
  max-width: var(--iw-w) !important; /* a cím is ugyanakkora legyen */
}