:root{
  --za-dark: #020c0a;
  --za-accent: #d2ef9a;
  --za-white: #FFFFFF;
  --za-shadow: 0 18px 60px rgba(2,12,10,.28);
  --za-gap: 16px;
}
/* Launcher */
#za-launcher{position:fixed;z-index:99999;display:flex;align-items:center;gap:10px}
#za-launcher .za-badge{height:60px;width:60px;border-radius:999px;color:var(--za-white);display:flex;align-items:center;justify-content:center;box-shadow:var(--za-shadow);cursor:pointer;border:1px solid rgba(255,255,255,0.12);transition:transform .2s ease, box-shadow .2s ease}
#za-launcher .za-badge:hover{transform:translateY(-2px);box-shadow:0 18px 60px rgba(2,12,10,.36)}
#za-launcher .za-label{padding:8px 12px;border-radius:12px;box-shadow:var(--za-shadow);font-size:13px;background:var(--za-dark);color:var(--za-white)}
#za-launcher .za-ico{font-size:22px;line-height:1}

/* Flyout – stalno mesto (nezavisan od launchera) */
#za-flyout{position:fixed;max-width:min(480px, calc(100vw - 24px));max-height:calc(100vh - 120px);background:var(--za-white);border:1px solid #e5e7eb;border-radius:18px;box-shadow:var(--za-shadow);overflow:hidden;display:none;z-index:99999}
#za-flyout.active{display:block}
#za-flyout.mobile-center{left:50% !important; right:auto !important; transform:translateX(-50%);} /* centriranje na mobilnom */
#za-flyout .za-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;background:linear-gradient(135deg, #0f2f2a 0%, #020c0a 65%);color:var(--za-white);position:sticky;top:0;z-index:2}
#za-flyout .za-head .za-head-actions{display:flex;gap:6px}
#za-flyout .za-head .za-head-actions button{background:rgba(255,255,255,.08);border:0;color:var(--za-white);cursor:pointer;font-size:16px;line-height:1;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center}
#za-flyout .za-head .za-head-actions button:hover{background:rgba(255,255,255,.16)}
#za-flyout .za-title{font-weight:700;letter-spacing:.2px}

.za-host{height:calc(100% - 52px);display:flex;flex-direction:column}

/* Chat body + input (stabilan input) */
.za-shell{display:flex;flex-direction:column;height:100%}
.za-window{flex:1;overflow:auto;padding:12px;background:var(--za-white);white-space:pre-line;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.za-bubble{display:inline-block;padding:10px 12px;border-radius:14px;margin:6px 0;line-height:1.4;max-width:85%}
.za-bot{background:#f3f4f6;color:#111827;border-top-left-radius:4px}
.za-user{background:var(--za-dark);color:var(--za-white);border-top-right-radius:4px;float:right;clear:both}
.za-msg{clear:both}

/* Input – veći gornji padding i safe-area na mobilnom */
.za-input{display:flex;gap:8px;border-top:1px solid #eef0f3;padding:14px 12px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); background:#f6f7f9;align-items:center}
.za-input input{flex:1;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;font-size:14px;min-height:46px;background:#fff}
.za-send{background:var(--za-accent);color:#0c0c0c;border:0;border-radius:12px;padding:12px 14px;cursor:pointer;font-weight:700;min-height:46px}

/* Proizvodi */
.za-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:6px 0}
.za-card{border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;background:var(--za-white);box-shadow:0 10px 30px rgba(2,12,10,.06)}
.za-media{background:#f0f5f3;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3}
.za-media img{max-width:100%;max-height:100%;object-fit:contain}
.za-card .za-card-body{padding:12px}
.za-card .za-title{font-weight:700;margin-bottom:6px;font-size:14px;min-height:36px}
.za-card .za-price{font-weight:800;margin:6px 0;color:var(--za-dark)}
.za-card .za-actions{display:flex;gap:8px;padding:12px;border-top:1px solid #eef0f3;background:#fbfbfb}
.za-btn{flex:1;border:0;border-radius:10px;padding:10px 12px;cursor:pointer}
.za-btn.primary{background:var(--za-dark);color:var(--za-white)}
.za-btn.outline{background:var(--za-white);color:var(--za-dark);border:1px solid var(--za-dark)}
.za-btn.accent{background:var(--za-accent);color:#0c0c0c;border:1px solid #cbe98d}

/* Sugestije – kao čipovi */
.za-suggests{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.za-chip{display:inline-block;padding:8px 12px;border:1px solid #e5e7eb;border-radius:999px;cursor:pointer;background:#fff}
.za-chip:hover{background:#f3f4f6}

/* Mobilno – centrira flyout i povećava max dimenzije po visini */
@media (max-width: 640px){
  #za-flyout{max-width:calc(100vw - 16px);max-height:calc(100vh - 100px)}
}


/* === ZA v4: Hardcode SVG inside launcher badge === */
#za-launcher .za-badge {
  position: relative !important;
  background-image: none !important;
  overflow: hidden;
}
#za-launcher .za-badge .za-ico,
#za-launcher .za-badge i,
#za-launcher .za-badge svg,
#za-launcher .za-badge img {
  display: none !important;
}
#za-launcher .za-badge::before {
  content: "";
  position: absolute;
  inset: 18%;
  background-image: url('../img/agent-icon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}
@media (max-width: 640px){
  #za-launcher .za-badge::before { inset: 20%; }
}



/* === ZA: Typing animation bubble === */
.za-msg.typing{
  max-width:70%;
  background:rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:10px 14px;
  margin:8px 0;
  display:inline-flex;
  align-items:center;
  color:inherit;
}
.za-msg.typing .za-typing-dots{display:inline-flex;gap:6px;line-height:1}
.za-msg.typing .za-typing-dots i{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;opacity:.6;
  animation:zaBlink 1s infinite ease-in-out;
  display:inline-block;
}
.za-msg.typing .za-typing-dots i:nth-child(2){animation-delay:.15s}
.za-msg.typing .za-typing-dots i:nth-child(3){animation-delay:.30s}
@keyframes zaBlink{0%,80%,100%{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}



/* === NIWA AI – Glassmind-inspired overrides === */
:root{
  --niwa-bg: rgba(255,255,255,0.18);
  --niwa-border: rgba(255,255,255,0.35);
  --niwa-text: #0b0b0b;
  --niwa-blur: 20px;
}
#za-launcher .za-badge{
  background: var(--niwa-bg) !important;
  backdrop-filter: blur(var(--niwa-blur));
  -webkit-backdrop-filter: blur(var(--niwa-blur));
  border: 1px solid var(--niwa-border);
}
#za-flyout{
  background: var(--niwa-bg) !important;
  backdrop-filter: blur(var(--niwa-blur));
  -webkit-backdrop-filter: blur(var(--niwa-blur));
  border: 1px solid var(--niwa-border);
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.25);
}
#za-flyout .za-head{
  background: rgba(255,255,255,0.35) !important;
  color: var(--niwa-text) !important;
  border-bottom: 1px solid var(--niwa-border);
}
#za-flyout .za-head .za-head-actions button{
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid var(--niwa-border) !important;
  color: var(--niwa-text) !important;
}
.za-window{ 
  background: transparent !important; 
  color: var(--niwa-text);
}
.za-bubble{
  border: 1px solid var(--niwa-border) !important;
  box-shadow: none !important;
}
.za-bot{
  background: rgba(255,255,255,0.75) !important;
  color: var(--niwa-text) !important;
}
.za-user{
  background: rgba(255,255,255,0.95) !important;
  color: var(--niwa-text) !important;
  float: right; clear: both;
}
.za-input{
  background: transparent !important;
  border-top: 1px solid var(--niwa-border) !important;
}
.za-input input{
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid var(--niwa-border) !important;
  color: var(--niwa-text) !important;
}
.za-send{
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid var(--niwa-border) !important;
  color: var(--niwa-text) !important;
}
.za-card{
  border: 1px solid var(--niwa-border) !important;
  background: rgba(255,255,255,0.7) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}
.za-media{ background: rgba(255,255,255,0.55) !important; }
.za-chip{ border: 1px solid var(--niwa-border) !important; background: rgba(255,255,255,0.75) !important; }
.za-chip:hover{ background: rgba(255,255,255,0.9) !important; }