/* ─── Napit avatarin vieressä ja tervehdysvideo ───────────────────────
   Sivun kaksi pikavalintaa ilmestyy kuplan yläpuolelle ja poistuu sen mukana. Kuplan ajastin
   (kipina-widget-layout.js) mittaa paikan kuplan korkeudesta, joten right ja bottom tulevat
   tyylimääreinä. Napit ovat samaa valkoista pintaa kuin kupla, tummansinisellä tekstillä. */
.kip-proactive-actions {
  display: none; position: absolute; right: 72px; bottom: 72px;
  flex-direction: column; align-items: flex-end; gap: 6px;
  width: max-content; max-width: 260px;
}
.kip-minimized--proactive .kip-proactive-actions:not([hidden]) { display: flex; }
.kip-proactive-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 14px; border-radius: 999px; cursor: pointer;
  background: #fff; color: #1a2452; border: 1px solid rgba(26,36,82,0.12);
  font-family: 'Figtree', system-ui, sans-serif; font-size: 13.5px; font-weight: 700; line-height: 1.2;
  text-align: left; letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(9,14,36,0.06), 0 10px 26px -12px rgba(9,14,36,0.35);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s ease;
}
.kip-proactive-chip svg { width: 14px; height: 14px; flex-shrink: 0; color: #f58024; transition: transform 0.2s ease, color 0.2s ease; }
.kip-proactive-chip:hover, .kip-proactive-chip:focus-visible {
  background: #1a2452; color: #fff; border-color: #1a2452; outline: none; transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(252,181,73,0.35), 0 12px 28px -12px rgba(9,14,36,0.45);
}
.kip-proactive-chip:hover svg, .kip-proactive-chip:focus-visible svg { color: #fcb549; transform: translateX(2px); }

/* Tervehdysvideo kuplan paikalla: pystykortti avatarin vasemmalla puolella. Rasti kiinnittyy
   korttiin samalla ankkurilla kuin kuplaan, koska kupla on silloin piilossa. */
.kip-greet { display: none; }
.kip-minimized--video .kip-proactive-text { display: none; }
.kip-minimized--video .kip-greet {
  display: block; position: absolute; right: 72px; bottom: 0;
  anchor-name: --kip-proactive-bubble;
  width: 150px; aspect-ratio: var(--kip-greet-aspect, 9/16);
  border-radius: 18px 18px 6px 18px; overflow: hidden;
  background: #1a2452; border: 2px solid #fff;
  box-shadow: 0 14px 34px -12px rgba(9,14,36,0.5);
  transform-origin: 100% 100%;
  transition: width 0.3s cubic-bezier(0.22,1,0.36,1);
}
/* Suurennettu kortti mahtuu ikkunaan nappien kanssa: korkeus enintään ikkuna miinus noin 260 px. */
.kip-minimized--video .kip-greet--open { width: min(260px, calc((100vh - 260px) * var(--kip-greet-ratio, 0.5625))); }
.kip-greet-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kip-greet-hit {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: 10px 12px 12px; border: 0; margin: 0; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(9,14,36,0) 45%, rgba(9,14,36,0.72) 100%);
  color: #fff; font-family: 'Figtree', system-ui, sans-serif;
}
.kip-greet--open .kip-greet-hit { background: none; }
.kip-greet-hit:focus-visible { outline: 3px solid #fcb549; outline-offset: -3px; }
.kip-greet-title { font-size: 14px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.kip-greet-line { font-size: 12px; font-weight: 500; line-height: 1.35; opacity: 0.9; }
.kip-greet-sound {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(9,14,36,0.55); color: #fff;
}
.kip-greet-sound svg { width: 15px; height: 15px; }

@media (prefers-reduced-motion: no-preference) {
  .kip-minimized--proactive .kip-proactive-actions { animation: kipProactiveIn 0.4s cubic-bezier(0.22,1,0.36,1) 0.1s both; }
  .kip-minimized--video .kip-greet { animation: kipProactiveIn 0.4s cubic-bezier(0.22,1,0.36,1); }
}

/* Kapealla näytöllä napit ja kortti mahtuvat avatarin vasemmalle puolelle 16 px:n reunoilla.
   Vain ensimmäinen nappi näkyy, jottei kupla peitä sivun omaa pääkehotetta. */
@media (max-width: 519px) {
  .kip-proactive-actions { max-width: calc(100vw - 104px); }
  .kip-proactive-chip:nth-child(n+2) { display: none; }
  .kip-proactive-chip { font-size: 13px; padding: 7px 11px 7px 13px; }
  .kip-minimized--video .kip-greet { width: 120px; }
  .kip-minimized--video .kip-greet--open { width: min(220px, calc(100vw - 104px), calc((100vh - 300px) * var(--kip-greet-ratio, 0.5625))); }
}