/* zivo-ai — razgovor sa AI sekretaricom uživo */
.ai-scena{display:none}
html.js .ai-scena{display:block;margin-top:clamp(36px,5vw,64px)}

.ai-ploca{
  display:grid;grid-template-columns:280px minmax(0,1fr) 288px;gap:0;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:22px;
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 30px 80px rgba(60,8,110,.28),inset 0 1px 0 rgba(255,255,255,.35);
  overflow:hidden;position:relative;color:#fff;
}
.ai-ploca>*{min-width:0}

/* --- leva zona (talas + oznaka) --- */
.ai-orbzona{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px 14px 24px;gap:6px;
  border-right:1px solid rgba(255,255,255,.18);position:relative}

.ai-talas{width:200px;height:34px;display:block;opacity:.9}
.ai-oznaka{display:flex;align-items:center;gap:8px;font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-top:6px;white-space:nowrap}
.ai-rec{width:8px;height:8px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:ai-rec 1.6s ease-out infinite;flex:none}
@keyframes ai-rec{0%{box-shadow:0 0 0 0 rgba(255,255,255,.65);opacity:1}60%{opacity:.55}100%{box-shadow:0 0 0 9px rgba(255,255,255,0);opacity:1}}
.ai-tajmer{font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.ai-govori{font:500 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);height:12px;transition:opacity .3s}

/* --- razgovor --- */
.ai-razgovor{position:relative;padding:26px 28px;background:rgba(70,8,120,.16);min-height:340px;display:flex}
.ai-tok{position:relative;flex:1;height:340px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34px,#000 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 34px,#000 100%);
  transition:opacity .6s ease}
.ai-tok--izlaz{opacity:0}
.ai-tok-ic{position:absolute;left:0;right:0;bottom:auto;top:0;display:flex;flex-direction:column;gap:14px;padding-bottom:10px;
  transition:transform .55s cubic-bezier(.22,1,.36,1);will-change:transform;padding-top:4px}
.ai-red{display:flex;flex-direction:column;gap:5px;max-width:92%;animation:ai-ulaz .5s cubic-bezier(.22,1,.36,1) both}
@keyframes ai-ulaz{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ai-ko{font:500 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.ai-red p{margin:0;font:600 17.5px/1.45 "Nunito",system-ui,sans-serif;color:#fff;text-shadow:0 1px 14px rgba(80,0,120,.35)}
.ai-red--ai .ai-ko::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:7px;vertical-align:1px;box-shadow:0 0 8px 2px rgba(255,255,255,.7)}
.ai-red--gost{align-self:flex-end;align-items:flex-end;text-align:left}
.ai-red--gost p{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);border-radius:16px 16px 4px 16px;padding:10px 15px;font-weight:500;color:rgba(255,255,255,.94);text-shadow:none}
.ai-kur{display:inline-block;width:2px;height:1.05em;background:#fff;margin-left:2px;vertical-align:-.15em;animation:ai-tr .8s steps(2) infinite}
@keyframes ai-tr{50%{opacity:0}}

.ai-cip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font:500 11.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.04em;
  color:#fff;background:rgba(40,0,80,.28);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:7px 12px 7px 10px;animation:ai-ulaz .45s cubic-bezier(.22,1,.36,1) both}
.ai-cip i{width:10px;height:10px;border-radius:50%;border:1.6px solid rgba(255,255,255,.35);border-top-color:#fff;animation:ai-vrti .8s linear infinite;flex:none}
.ai-cip--ok i{animation:none;border:0;background:#fff;position:relative}
.ai-cip--ok i::after{content:"";position:absolute;left:3px;top:1.6px;width:3px;height:5px;border:solid #a02aca;border-width:0 1.6px 1.6px 0;transform:rotate(40deg)}
@keyframes ai-vrti{to{transform:rotate(360deg)}}

/* --- kalendar --- */
.ai-kalzona{padding:22px 22px 22px 14px;border-left:1px solid rgba(255,255,255,.18);display:flex;align-items:center}
.ai-kal{--sat:52px;width:100%;background:#fff;color:#132434;border-radius:16px;padding:14px 14px 16px;box-shadow:0 20px 50px rgba(50,0,90,.32);position:relative}
.ai-kal-glava{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;gap:8px}
.ai-kal-glava b{font:700 15px/1 "Archivo",system-ui,sans-serif;color:#132434}
.ai-kal-glava span{font:500 10px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;color:#5B7288;text-transform:uppercase}
.ai-kal-telo{position:relative;height:calc(var(--sat) * 5);margin-left:38px;margin-bottom:2px}
.ai-sat{position:absolute;left:-38px;right:0;height:0;border-top:1px solid rgba(19,36,52,.09)}
.ai-sat span{position:absolute;left:0;top:-6px;font:500 10px/1 "IBM Plex Mono",ui-monospace,monospace;color:#8aa0b4;background:#fff;padding-right:4px}
.ai-term{position:absolute;left:4px;right:2px;border-radius:9px;padding:6px 9px;overflow:hidden;font:600 11.5px/1.25 "Nunito",system-ui,sans-serif}
.ai-term small{display:block;font:500 10.5px/1.2 "Nunito",system-ui,sans-serif;opacity:.8;margin-top:1px}
.ai-term--zel{background:#dcf1df;border-left:3px solid #2d7a3a;color:#1d5a28}
.ai-slot{position:absolute;left:4px;right:2px;border-radius:9px;border:1.5px dashed rgba(204,68,238,0);background:rgba(204,68,238,0);
  display:flex;align-items:center;justify-content:center;font:500 10px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;color:transparent;text-transform:uppercase;
  transition:background .4s,border-color .4s,color .4s}
.ai-kal--provera .ai-slot{border-color:rgba(204,68,238,.65);background:rgba(204,68,238,.07);color:#a02aca;animation:ai-slot 1.1s ease-in-out infinite}
.ai-kal--provera .ai-slot+.ai-slot{animation-delay:.25s}
@keyframes ai-slot{50%{background:rgba(204,68,238,.16)}}
.ai-blok{position:absolute;left:4px;right:2px;top:calc(var(--sat) * 4);height:calc(var(--sat) * 1);border-radius:10px;padding:8px 10px;
  background:#f4a6c8;border:1.5px solid #e0559a;border-left-width:4px;color:#5a1238;font:700 12px/1.25 "Nunito",system-ui,sans-serif;
  opacity:0;transform:translate(-150px,-70px) rotate(-7deg) scale(.7);transform-origin:20% 40%;pointer-events:none;
  box-shadow:0 14px 30px rgba(224,85,154,.45)}
.ai-blok small{display:block;font:600 11px/1.2 "Nunito",system-ui,sans-serif;opacity:.82;margin-top:2px}
.ai-blok em{position:absolute;right:7px;top:7px;font:700 9.5px/1 "IBM Plex Mono",ui-monospace,monospace;font-style:normal;letter-spacing:.08em;color:#fff;
  background:linear-gradient(135deg,#ff85b3,#7722cc);padding:3px 6px;border-radius:6px}
.ai-blok--sleo{opacity:1;transform:none;box-shadow:0 4px 12px rgba(224,85,154,.25);
  transition:transform .95s cubic-bezier(.34,1.7,.5,1),opacity .25s ease,box-shadow .9s ease}
.ai-blok::after{content:"";position:absolute;inset:-2px;border-radius:12px;border:2px solid #e0559a;opacity:0;pointer-events:none}
.ai-blok--sleo::after{animation:ai-prsten 1s .55s ease-out both}
@keyframes ai-prsten{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.18,1.5)}}

@media (max-width:1000px){
  .ai-ploca{grid-template-columns:240px minmax(0,1fr) 250px}
  .ai-razgovor{padding:22px 20px}
  .ai-red p{font-size:16px}
}
@media (max-width:760px){
  .ai-ploca{grid-template-columns:minmax(0,1fr)}
  .ai-orbzona{border-right:0;border-bottom:1px solid rgba(255,255,255,.18);padding:16px 12px 18px}
  .ai-talas{width:170px;height:28px}
  .ai-razgovor{min-height:0;padding:20px 16px}
  .ai-tok{height:300px}
  .ai-red{max-width:96%}
  .ai-red p{font-size:15.5px}
  .ai-kalzona{border-left:0;border-top:1px solid rgba(255,255,255,.18);padding:16px}
  .ai-kal{--sat:44px}
}

@media (prefers-reduced-motion:reduce){
  .ai-rec,.ai-kur,.ai-kal--provera .ai-slot,.ai-cip i{animation:none}
  .ai-red,.ai-cip{animation:none}
  .ai-blok--sleo{transition:none}
  .ai-blok--sleo::after{animation:none}
}