/* =================================================================
   Floating chat skin
   - Sinkronizirano s hero stilovima (rep mjehurića + chipovi)
   - Scope: unutar .sai-floating-popup (ne dira hero/classic izvan floatera)
   ================================================================= */

/* --- Launcher / badge / tooltip / shell (kao prije) ---------------- */
.sai-floating-launcher-wrap{position:fixed;z-index:99999;font-family:var(--sai-font,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);transition:opacity .2s ease}
.sai-floating-launcher-btn{width:56px;height:56px;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0;overflow:hidden;box-shadow:0 10px 24px rgb(0 0 0 / .18);position:relative;transition:box-shadow .15s ease,transform .08s ease}
.sai-floating-launcher-btn:active{transform:translateY(1px)}
.sai-floating-launcher-btn img{width:32px;height:32px;object-fit:cover;display:block}
.sai-floating-launcher-btn .sai-btn-cover-img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
.sai-floating-launcher-badge{position:absolute;top:6px;right:6px;min-width:10px;min-height:10px;border-radius:9999px;line-height:10px;font-size:10px;font-weight:600;color:#fff;display:flex;align-items:center;justify-content:center;padding:2px 4px;box-shadow:0 4px 8px rgb(0 0 0 / .3)}
.sai-floating-tooltip{position:fixed;z-index:99998;width:max-content;max-width:180px;font-size:13px;line-height:1.4;border-radius:10px;padding:8px 12px;margin-right:5px;box-shadow:0 12px 32px rgb(0 0 0 / .2);font-weight:500;opacity:0;transform:translateY(4px) scale(.96);transform-origin:bottom;transition:opacity .18s ease,transform .18s ease;overflow:visible}
.sai-floating-tooltip.sai-visible{opacity:1;transform:translateY(0) scale(1)}
.sai-floating-tooltip-text{word-break:break-word}
.sai-floating-tooltip-close{position:absolute;top:-11px;right:0px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff !important;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:700;line-height:1;user-select:none;z-index:1}
.sai-floating-tooltip-arrow{position:absolute;width:0;height:0;border-style:solid}
.sai-floating-popup{position:fixed;z-index:99998;max-width:360px;width:90vw;max-height:90vh;box-sizing:border-box;overflow:hidden;display:none;opacity:0;transform:scale(.9);transform-origin:bottom right;transition:opacity .16s ease,transform .16s ease;background:var(--sai-bg,#fff);border:1px solid var(--sai-border,#e5e7eb);color:var(--sai-assistant-text,#111827);border-radius:var(--sai-radius,12px);box-shadow:var(--sai-shadow,0 12px 32px rgb(0 0 0 / 8%))}
.sai-floating-popup.sai-open{display:flex;flex-direction:column;opacity:1;transform:scale(1)}
.sai-floating-popup-inner{overflow:hidden;display:flex;flex-direction:column; margin-left: 20px; margin-bottom: 20px; margin-right: 20px;
}
.sai-floating-header{display:flex;align-items:center;justify-content:space-between; padding-top: 8px; padding-left: 12px; padding-right: 12px; padding-bottom: 8px; margin-left: -10px; border-bottom:1px solid var(--sai-border,#e5e7eb);background:var(--sai-bg,#fff);color:var(--sai-assistant-text,#111827);font-family:var(--sai-font,inherit);font-size:13px;line-height:1.3;flex-shrink:0}
.sai-floating-header-left{display:flex;align-items:center;gap:8px;min-width:0}
.sai-floating-header-avatar{flex-shrink:0;width:28px;height:28px;overflow:hidden;background:var(--sai-accent,#4f46e5);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;border-radius:var(--sai-avatar-radius,9999px)}
.sai-floating-header-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.sai-floating-header-name{font-weight:600;color:inherit;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:200px}
.sai-floating-header-right{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;line-height:1;color:inherit}
.sai-floating-header-clear,.sai-floating-header-close{cursor:pointer;user-select:none;font-size:18px}
.sai-floating-header-clear:hover,.sai-floating-header-close:hover{opacity:.7}
.sai-floating-popup.sai-floating-fullscreen{left:0!important;right:0!important;bottom:0!important;top:0!important;max-width:none!important;max-height:none!important;width:100%!important;height:100%!important;border-radius:0!important}
.sai-floating-popup.sai-floating-fullscreen .sai-floating-popup-inner{max-height:100%!important;height:100%!important}
@media (max-width:480px){
  .sai-floating-popup:not(.sai-floating-fullscreen){max-width:360px;width:90vw;left:10px!important;right:10px!important;bottom:80px!important}
}
.sai-floating-popup[data-side="left"]{transform-origin:bottom left}

/* --- Chat wrapper unutar popupa ----------------------------------- */
.sai-floating-popup-inner .sai-chat-wrapper{border:0!important;border-radius:0!important;box-shadow:none!important;max-width:100%!important;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:var(--sai-bg,#fff)}
.sai-floating-popup-inner .sai-chat-wrapper .sai-messages{flex:1 1 auto;min-height:0;max-height:calc(90vh - 150px);overflow-y:auto}

/* =================================================================
   Poruke (rep kao u hero threadu) – mapirano na classic markup
   ================================================================= */
.sai-floating-popup .sai-messages{padding:0;display:flex;flex-direction:column;gap:0;margin-bottom:16px}

/* red poruke = vertikalni stack; avatar dolje u kutu */
.sai-floating-popup .sai-msg{position:relative;max-width:80%;display:flex;flex-direction:column;margin-bottom:32px}
.sai-floating-popup .sai-msg-assistant{margin-left:0;margin-right:auto;padding-left:40px}
.sai-floating-popup .sai-msg-user{margin-left:auto;margin-right:0;padding-right:40px;text-align:right}

/* avatari pozicionirani ispod bubble-a */
.sai-floating-popup .sai-msg .sai-avatar,
.sai-floating-popup .sai-msg .sai-avatar-user,
.sai-floating-popup .sai-msg .sai-avatar-assistant{
  position:absolute;bottom:-6px;width:36px;height:36px;border-radius:50%;
  background:var(--sai-accent,#4f46e5);color:#fff;font-size:14px;font-weight:600;line-height:36px;text-align:center;
  display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 6px 12px rgb(0 0 0 / .12)
}
.sai-floating-popup .sai-msg-assistant .sai-avatar,
.sai-floating-popup .sai-msg-assistant .sai-avatar-assistant{left:0;background:var(--sai-accent,#4f46e5);color:#fff}
.sai-floating-popup .sai-msg-user .sai-avatar,
.sai-floating-popup .sai-msg-user .sai-avatar-user{right:0;background:var(--sai-user-bg,#4f46e5);color:var(--sai-user-text,#fff)}
.sai-floating-popup .sai-msg .sai-avatar img{width:100%;height:100%;object-fit:cover;display:block}

.sai-floating-popup .sai-msg-user img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* bubble stilovi */
.sai-floating-popup .sai-bubble{position:relative;border-radius:12px;box-shadow:0 4px 12px rgb(0 0 0 / .06);padding:12px 14px;line-height:1.5;font-size:15px;word-break:break-word;max-width:100%}
.sai-floating-popup .sai-msg-assistant .sai-bubble{background:var(--sai-assistant-bg,#f3f4f6);color:var(--sai-assistant-text,#111827);border:1px solid var(--sai-border,#e5e7eb);text-align:left;margin-left:auto;margin-bottom:18px}
.sai-floating-popup .sai-msg-user .sai-bubble{background:var(--sai-user-bg,#4f46e5);color:var(--sai-user-text,#fff);border:1px solid var(--sai-user-bg,#4f46e5);text-align:left;margin-left:auto;margin-bottom:18px}

/* Normalize intro bubble typography (avoid huge H1 from admin HTML) */
.sai-floating-popup .sai-msg-intro .sai-intro-bubble{font-size:15px;line-height:1.5}
.sai-floating-popup .sai-msg-intro .sai-intro-bubble h1,
.sai-floating-popup .sai-msg-intro .sai-intro-bubble h2,
.sai-floating-popup .sai-msg-intro .sai-intro-bubble h3,
.sai-floating-popup .sai-msg-intro .sai-intro-bubble h4,
.sai-floating-popup .sai-msg-intro .sai-intro-bubble h5,
.sai-floating-popup .sai-msg-intro .sai-intro-bubble h6{font-size:15px;line-height:1.5;margin:0 0 6px 0;font-weight:600}
.sai-floating-popup .sai-msg-intro .sai-intro-bubble p{margin:0}

/* repovi kao u hero CSS-u (SVG s var bojama) */
.sai-floating-popup .sai-msg-assistant .sai-bubble::after{
  content:"";position:absolute;left:8px;bottom:-16px;width:24px;height:20px;background-repeat:no-repeat;background-size:24px 20px;transform:scaleX(-1);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 20' fill='none'><path d='M3 8.88959C8.5579 20.2683 27.3158 20.7424 36 19.5571C22.1053 12.4456 19.7895 3.5559 20.3684 0H0C0 3.5 3 8.88959 3 8.88959Z' fill='%23f3f4f6' stroke='%23e5e7eb' stroke-width='1'/></svg>");
}
.sai-floating-popup .sai-msg-user .sai-bubble::after{
  content:"";position:absolute;right:8px;bottom:-16px;width:24px;height:20px;background-repeat:no-repeat;background-size:24px 20px;transform:scaleX(1);
  /* fill/stroke koriste user boju */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 20' fill='none'><path d='M3 8.88959C8.5579 20.2683 27.3158 20.7424 36 19.5571C22.1053 12.4456 19.7895 3.5559 20.3684 0H0C0 3.5 3 8.88959 3 8.88959Z' fill='%234f46e5' stroke='%234f46e5' stroke-width='1'/></svg>");
}

/* typing indicator inherit (već postoji u widgetu) */

/* =================================================================
   Input bar (uskladiti s hero)
   ================================================================= */
.sai-floating-popup .sai-input-row{border-top:0;padding:0;display:flex;flex-wrap:nowrap;align-items:stretch;gap:6px}
/* 3-class specificity (0-3-0) beats most theme rules; !important on browser defaults only */
.sai-floating-popup .sai-input-row .sai-input{
  -webkit-appearance:none !important;
  appearance:none !important;
  box-sizing:border-box !important;
  display:inline-block;
  flex:1 1 0%;
  min-width:0;
  width:100%;
  height:auto;
  margin:0 !important;
  font-family:inherit !important;
  font-size:15px;
  line-height:1.4;
  border:1px solid #666;
  border-radius:6px;
  padding:10px 12px;
  outline:none;
  box-shadow:none;
  background:#fff;
  background-image:none !important;
  color:#111;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.sai-floating-popup .sai-input-row .sai-input::placeholder{font-family:inherit;opacity:1}
.sai-floating-popup .sai-input-row .sai-input:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--sai-accent) 20%, transparent);border-color:var(--sai-accent);}
.sai-floating-popup .sai-input-row .sai-send-btn{
  background:var(--sai-accent);border:1px solid var(--sai-accent);border-radius:6px;padding:10px 14px;cursor:pointer;line-height:0;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:#fff
}
.sai-floating-popup .sai-input-row .sai-send-btn:disabled{opacity:.5;cursor:default}
.sai-floating-popup .sai-input-row .sai-send-icon{width:20px;height:20px;line-height:0}
.sai-floating-popup .sai-input-row .sai-send-icon svg{width:20px;height:20px;display:block;fill:var(--sai-send-icon-color,#fff);color:var(--sai-send-icon-color,#fff)}

/* Stronger specificity to beat global/Elementor button resets */
.sai-floating-popup .sai-input-row button.sai-send-btn{
  background: var(--sai-accent) !important;
  border: 1px solid var(--sai-accent) !important;
  color: #fff !important;
  border-radius: 6px;
}

/* Mic button – identical to hero chat */
.sai-floating-popup .sai-input-row .sai-mic-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  background: var(--sai-accent, #4f46e5);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.sai-floating-popup .sai-input-row .sai-mic-btn:hover {
  opacity: 0.85;
}
.sai-floating-popup .sai-input-row .sai-mic-btn .sai-mic-icon {
  width: 20px;
  height: 20px;
  margin: auto;
  display: block;
}
.sai-floating-popup .sai-input-row .sai-mic-btn .sai-mic-icon svg {
  fill: #fff;
  color: #fff;
}
/* Stronger specificity for mic button to beat Elementor/theme resets */
.sai-floating-popup .sai-input-row button.sai-mic-btn {
  background: var(--sai-accent, #4f46e5) !important;
  border: none !important;
  border-radius: 6px !important;
  color: #fff !important;
}
.sai-floating-popup .sai-input-row button.sai-mic-btn:hover {
  background: var(--sai-accent, #4f46e5) !important;
  opacity: 0.85;
}
.sai-floating-popup .sai-input-row button.sai-mic-btn.sai-recording {
  background: #EE4266 !important;
}
.sai-floating-popup .sai-input-row button.sai-mic-btn.sai-recording:hover {
  background: #EE4266 !important;
}

/* disclaimer (ako ga prikazuješ u floateru) */
.sai-floating-popup .sai-hero-disclaimer,
.sai-floating-popup .sai-disclaimer-text{font-size:12px;line-height:1.4;color:#6b7280;margin-top:4px;text-align:left}

/* =================================================================
   Chips (TAG & TOPIC) – identično herou, samo scope promijenjen
   ================================================================= */
.sai-floating-popup .sai-quick-tags,
.sai-floating-popup .sai-custom-topics-below{display:flex;flex-wrap:wrap;gap:8px;margin-top:-7px!important}
.sai-floating-popup .sai-chip-heading{font-size:12px;font-weight:600;color:#334155}
.sai-floating-popup .sai-tags-heading{
    margin-top:10px!important; 
    margin-bottom:12px!important;
}
    
.sai-floating-popup .sai-topics-heading {
    margin-top:10px!important; 
    margin-bottom:12px!important;
}

.sai-quick-tags {
    margin-bottom:12px!important;
}

/* Shared chip */
.sai-floating-popup .sai-tag-chip{
  --chip-radius:999px;--chip-font:12.5px;--chip-pad-y:6px;--chip-pad-x:10px;--chip-shadow:0 2px 8px rgb(0 0 0 / .06);
  position:relative;display:inline-flex;align-items:center;gap:8px;border-radius:var(--chip-radius);
  font-family:inherit;font-size:var(--chip-font);line-height:1;padding:var(--chip-pad-y) var(--chip-pad-x);user-select:none;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .05s ease;white-space:nowrap;
  background:#fff;border:1px solid var(--sai-border,#e5e7eb);color:var(--sai-assistant-text,#111827)
}
.sai-floating-popup .sai-tag-chip:active{transform:translateY(1px)}
.sai-floating-popup .sai-tag-chip:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--sai-accent,#4f46e5) 22%, transparent)}
.sai-floating-popup .sai-tag-chip .sai-chip-clear{display:inline-flex;width:18px;height:18px;border-radius:50%;align-items:center;justify-content:center;line-height:0;opacity:.9;margin-left:-2px;transition:background .2s ease,opacity .2s ease}
.sai-floating-popup .sai-tag-chip .sai-chip-clear:hover{background:rgb(0 0 0 / .06);opacity:1}

/* TAG chips (gore) – “glassy filled” + dot */
.sai-floating-popup .sai-tag-chip.sai-chip-tag{
  background:linear-gradient(180deg,color-mix(in srgb, var(--sai-accent,#4f46e5) 12%, #fff) 0%,color-mix(in srgb, var(--sai-accent,#4f46e5) 5%, #fff) 100%);
  border:1px solid color-mix(in srgb, var(--sai-accent,#4f46e5) 30%, var(--sai-border,#e5e7eb));
  color:color-mix(in srgb, var(--sai-accent,#4f46e5) 80%, #0b1020);
  box-shadow:var(--chip-shadow);-webkit-backdrop-filter:saturate(1.1) blur(2px);backdrop-filter:saturate(1.1) blur(2px)
}
@supports not (background: color-mix(in srgb, #000 10%, #fff)){
  .sai-floating-popup .sai-tag-chip.sai-chip-tag{background:linear-gradient(180deg,#ffffff 0%,#fafafa 100%);border-color:var(--sai-accent,#4f46e5);color:#182037}
}
.sai-floating-popup .sai-tag-chip.sai-chip-tag::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--sai-accent,#4f46e5);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sai-accent,#4f46e5) 25%, transparent);display:inline-block
}
.sai-floating-popup .sai-tag-chip.sai-chip-tag:hover{
  background:linear-gradient(180deg,color-mix(in srgb, var(--sai-accent,#4f46e5) 18%, #fff) 0%,color-mix(in srgb, var(--sai-accent,#4f46e5) 8%, #fff) 100%);
  border-color:color-mix(in srgb, var(--sai-accent,#4f46e5) 45%, #d1d5db)
}
.sai-floating-popup .sai-tag-chip.sai-chip-tag.active{
  background:linear-gradient(180deg,color-mix(in srgb, var(--sai-accent,#4f46e5) 22%, #fff) 0%,color-mix(in srgb, var(--sai-accent,#4f46e5) 12%, #fff) 100%);
  border-color:var(--sai-accent,#4f46e5);box-shadow:0 4px 16px color-mix(in srgb, var(--sai-accent,#4f46e5) 30%, transparent)
}

/* TOPIC chips (dolje) – gradient accent stil kao tag chips + ? pločica */
.sai-floating-popup .sai-tag-chip.sai-chip-custom{
  --topic-border: color-mix(in srgb, var(--sai-accent,#4f46e5) 30%, var(--sai-border,#e5e7eb));
  --topic-text: color-mix(in srgb, var(--sai-accent,#4f46e5) 80%, #0b1020);
  background:linear-gradient(180deg,color-mix(in srgb, var(--sai-accent,#4f46e5) 12%, #fff) 0%,color-mix(in srgb, var(--sai-accent,#4f46e5) 5%, #fff) 100%);
  border:1px solid var(--topic-border);color:var(--topic-text);box-shadow:var(--chip-shadow);-webkit-backdrop-filter:saturate(1.1) blur(2px);backdrop-filter:saturate(1.1) blur(2px)
}
@supports not (background: color-mix(in srgb, #000 10%, #fff)){
  .sai-floating-popup .sai-tag-chip.sai-chip-custom{background:linear-gradient(180deg,#ffffff 0%,#fafafa 100%);border-color:var(--sai-accent,#4f46e5);color:#182037}
}
.sai-floating-popup .sai-tag-chip.sai-chip-custom::before{
  content:"?";width:16px;height:16px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:#fff;border:1px solid color-mix(in srgb, var(--sai-accent,#4f46e5) 30%, var(--topic-border,#e5e7eb))
}
.sai-floating-popup .sai-tag-chip.sai-chip-custom:hover{
  background:linear-gradient(180deg,color-mix(in srgb, var(--sai-accent,#4f46e5) 18%, #fff) 0%,color-mix(in srgb, var(--sai-accent,#4f46e5) 8%, #fff) 100%);
  border-color:color-mix(in srgb, var(--sai-accent,#4f46e5) 45%, #d1d5db)
}
.sai-floating-popup .sai-tag-chip.sai-chip-custom.active{
  background:var(--sai-accent,#4f46e5) !important;background-image:none !important;backdrop-filter:none;
  border-color:var(--sai-accent,#4f46e5);color:#fff;font-weight:600;
  box-shadow:0 4px 16px color-mix(in srgb, var(--sai-accent,#4f46e5) 40%, transparent)
}
.sai-floating-popup .sai-tag-chip.sai-chip-custom.active::before{
  background:#fff;border-color:rgba(255,255,255,.25);color:var(--sai-accent,#4f46e5)
}

/* Compact var (ako zatreba) */
.sai-floating-popup .sai-tag-chip.sai--sm{--chip-font:11.5px;--chip-pad-y:5px;--chip-pad-x:9px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .sai-floating-popup .sai-tag-chip{transition:none!important}
}

/* =================================================================
   Floating Hero Panel – full-height slide-in panel
   Vlastiti CSS odvojen od shortcode hero-a (.sai-hero-outer).
   Može se fino podesiti neovisno od shortcode prikaza.
   ================================================================= */

/* Backdrop */
.sai-fhero-backdrop{
  position:fixed;inset:0;z-index:99996;
  background:rgba(0,0,0,.48);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.sai-fhero-backdrop.sai-fhero-open{opacity:1;pointer-events:auto;}

/* Panel */
.sai-floating-hero-panel{
  position:fixed;top:0;bottom:0;
  width:min(900px,100vw);
  z-index:99997;
  display:flex;flex-direction:column;
  justify-content:flex-end; /* sadržaj pri dnu */
  overflow:hidden;
  box-shadow:-6px 0 48px rgba(0,0,0,.26);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  /* panel je sklon desnoj strani (default) */
  right:0;left:auto;
  transform:translateX(110%);
}
.sai-floating-hero-panel[data-side="left"]{
  left:0;right:auto;
  transform:translateX(-110%);
  box-shadow:6px 0 48px rgba(0,0,0,.26);
}
.sai-floating-hero-panel.sai-fhero-open{transform:translateX(0)!important;}

/* Close button – fiksiran iznad sadržaja */
.sai-fhero-close{
  position:absolute;top:14px;right:16px;z-index:10;
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.32);color:#fff;
  border:0;cursor:pointer;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
  flex-shrink:0;
}
.sai-fhero-close:hover{background:rgba(0,0,0,.52);}
.sai-floating-hero-panel[data-side="left"] .sai-fhero-close{right:auto;left:16px;}

/* Hero sadržaj – ispunjava cijeli panel i omogućuje scroll poruka */
.sai-floating-hero-panel .sai-hero-wrapper{
  height:100%!important;
  max-height:100%!important;
  border-radius:0!important;
  overflow:hidden!important;
  width:100%!important;
  flex:1 1 auto!important;
  min-height:0!important;
  max-width:none!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important; /* intro sadržaj pri dnu */
}

/* Thread ispunjava wrapper kada razgovor počne */
.sai-floating-hero-panel .sai-hero-wrapper.sai-hero-started .sai-hero-thread{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}

/* Thread-inner je scroll container — sve se skrola kao jedna cjelina */
.sai-floating-hero-panel .sai-hero-thread .sai-hero-thread-inner{
  flex:1 1 auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  position:relative!important; /* offset parent za offsetTop izračune u JS */
  max-width:none!important;
  gap:8px!important;
}

/* Chip headinzi: malo više prostora ispod naslova */
.sai-floating-hero-panel .sai-hero-thread .sai-chip-heading{margin-bottom:6px!important}
/* Quick tags i custom topics: margina ispod do sljedećeg elementa */
.sai-floating-hero-panel .sai-hero-thread .sai-quick-tags,
.sai-floating-hero-panel .sai-hero-thread .sai-custom-topics-below{margin-bottom:6px!important}

/* Messages: prirodna visina, thread-inner kontrolira scroll */
.sai-floating-hero-panel .sai-hero-thread .sai-messages{
  flex:0 0 auto!important;
  overflow:visible!important;
  max-height:none!important;
  margin-bottom:8px;
}

/* Input row: uvijek vidljiv pri dnu (sticky) — elementi ispod njega ispadaju van ekrana */
.sai-floating-hero-panel .sai-hero-thread .sai-input-row{
  position:sticky!important;
  bottom:0!important;
  z-index:2!important;
  background:var(--sai-bg,#fff)!important;
  flex-shrink:0!important;
  padding-top:6px!important;
}

/* Desna margina — sadržaj nije zalijepljen uz rub ekrana */
.sai-floating-hero-panel .sai-hero-intro-inner,
.sai-floating-hero-panel .sai-hero-thread-inner {
  padding-right:8px;
}

/* Desktop – 30px razmak s lijeve strane sadržaja + panel širi 20px */
@media(min-width:768px){
  .sai-floating-hero-panel{
    width:min(920px,100vw); /* 900 + 20px */
  }
  /* Intro i thread inner kontejneri: pomakni od lijevog ruba 30px */
  .sai-floating-hero-panel .sai-hero-intro-inner,
  .sai-floating-hero-panel .sai-hero-thread-inner {
    margin-left:30px;
    padding-right:16px; /* više prostora na desktopu */
  }
}

/* Mobilni prikaz – uvijek full screen */
@media(max-width:767px){
  .sai-floating-hero-panel{
    width:100vw!important;
    box-shadow:none;
  }
}

/* =================================================================
   Floating link icon mode (anchor resets)
   ================================================================= */
.sai-floating-link-wrap{position:fixed;z-index:99999}
a.sai-floating-link-btn,
a.sai-floating-link-btn:visited,
a.sai-floating-link-btn:hover,
a.sai-floating-link-btn:focus{text-decoration:none;outline:none;-webkit-tap-highlight-color:transparent}
a.sai-floating-link-btn:focus-visible{outline:3px solid rgba(79,70,229,.5);outline-offset:2px}