/* Kinematic — KINI website chatbot widget.
   Self-contained, brand-aligned (red #D01E2C, Manrope display / Inter body).
   Injected on every page via _head.php; DOM is built by assets/kini-chat.js. */

:root{
  --kini-red:#D01E2C; --kini-red-2:#B81A26; --kini-ink:#0A0E1A;
  --kini-muted:#6B7280; --kini-rule:#E4E6EB; --kini-stone:#FAFAFB;
}

/* Launcher button — the KINI robot mascot itself */
#kini-fab{
  position:fixed; right:22px; bottom:22px; z-index:9998;
  width:70px; height:70px; border-radius:50%; border:none; cursor:pointer;
  background:transparent; padding:0; color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
#kini-fab:hover{ transform:translateY(-3px) scale(1.05); }
#kini-fab .kini-open-i{ width:70px; height:70px; display:block; filter:drop-shadow(0 8px 18px rgba(208,30,44,.34)); }
#kini-fab .kini-close-x{ display:none; }
/* When the panel is open, collapse the mascot to a tidy red "close" circle */
#kini-fab.open{
  width:56px; height:56px;
  background:linear-gradient(135deg,var(--kini-red),var(--kini-red-2));
  box-shadow:0 10px 26px rgba(208,30,44,.36);
}
#kini-fab.open .kini-open-i{ display:none; }
#kini-fab.open .kini-close-x{ display:block; width:24px; height:24px; }

/* KINI mascot (shared by launcher + header avatar) */
.kini-mascot{ width:100%; height:100%; display:block; overflow:visible; }
.kini-mascot .kini-antenna{ transform-box:fill-box; transform-origin:50% 100%; animation:kini-antenna-wiggle 5s ease-in-out infinite; }
.kini-mascot .kini-pupil{ transition:transform .12s ease-out; }
@keyframes kini-antenna-wiggle{
  0%,84%,100%{ transform:rotate(0deg); }
  87%{ transform:rotate(-11deg); }
  91%{ transform:rotate(9deg); }
  95%{ transform:rotate(-5deg); }
  98%{ transform:rotate(2deg); }
}
@media (prefers-reduced-motion:reduce){
  .kini-mascot .kini-antenna{ animation:none; }
  .kini-mascot .kini-pupil{ transition:none; }
}

/* Attention pulse + greeting bubble */
#kini-fab .kini-dot{
  position:absolute; top:-2px; right:-2px; width:14px; height:14px; border-radius:50%;
  background:#0A8A4E; border:2px solid #fff;
}
#kini-nudge{
  position:fixed; right:92px; bottom:34px; z-index:9998; max-width:230px;
  background:#fff; color:var(--kini-ink); border:1px solid var(--kini-rule);
  border-radius:14px 14px 4px 14px; padding:11px 14px; font-size:13.5px; line-height:1.5;
  box-shadow:0 10px 30px rgba(10,14,26,.14); font-family:'Inter',system-ui,sans-serif;
  opacity:0; transform:translateY(8px) scale(.96); pointer-events:none;
  transition:opacity .3s,transform .3s;
}
#kini-nudge.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#kini-nudge b{ color:var(--kini-red); }
#kini-nudge .kini-nudge-x{ position:absolute; top:4px; right:7px; cursor:pointer; color:var(--kini-muted); font-size:15px; line-height:1; }

/* Panel */
#kini-panel{
  position:fixed; right:22px; bottom:94px; z-index:9999;
  width:380px; max-width:calc(100vw - 32px); height:560px; max-height:calc(100vh - 130px);
  background:#fff; border:1px solid var(--kini-rule); border-radius:18px; overflow:hidden;
  display:none; flex-direction:column; font-family:'Inter',system-ui,sans-serif;
  box-shadow:0 24px 70px rgba(10,14,26,.28),0 4px 14px rgba(10,14,26,.10);
  opacity:0; transform:translateY(14px) scale(.98); transition:opacity .28s,transform .28s;
}
#kini-panel.open{ display:flex; opacity:1; transform:translateY(0) scale(1); }

.kini-head{
  background:linear-gradient(135deg,#12172A,var(--kini-ink)); color:#fff;
  padding:15px 18px; display:flex; align-items:center; gap:12px;
}
.kini-head .kini-avatar{
  width:42px; height:42px; flex-shrink:0; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center; padding:3px;
}
.kini-head .kini-avatar .kini-mascot{ width:36px; height:36px; }
.kini-head .kini-ht{ flex:1; min-width:0; }
.kini-head .kini-name{ font-family:'Manrope',sans-serif; font-weight:800; font-size:15.5px; }
.kini-head .kini-status{ font-size:11.5px; color:#9AA4B2; display:flex; align-items:center; gap:5px; margin-top:1px; }
.kini-head .kini-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:#22C55E; }
.kini-head .kini-min{ background:none; border:none; color:#9AA4B2; cursor:pointer; padding:4px; border-radius:6px; }
.kini-head .kini-min:hover{ color:#fff; background:rgba(255,255,255,.1); }

.kini-body{ flex:1; overflow-y:auto; padding:16px; background:var(--kini-stone); display:flex; flex-direction:column; gap:10px; }
.kini-msg{ max-width:82%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.55; white-space:pre-wrap; word-wrap:break-word; }
.kini-msg.bot{ align-self:flex-start; background:#fff; color:var(--kini-ink); border:1px solid var(--kini-rule); border-bottom-left-radius:5px; }
.kini-msg.user{ align-self:flex-end; background:linear-gradient(135deg,var(--kini-red),var(--kini-red-2)); color:#fff; border-bottom-right-radius:5px; }
.kini-msg a{ color:var(--kini-red); font-weight:600; text-decoration:underline; }
.kini-msg.user a{ color:#fff; }

.kini-typing{ align-self:flex-start; background:#fff; border:1px solid var(--kini-rule); border-radius:14px; border-bottom-left-radius:5px; padding:12px 15px; display:flex; gap:4px; }
.kini-typing span{ width:7px; height:7px; border-radius:50%; background:#C4CAD3; animation:kini-bounce 1.2s infinite; }
.kini-typing span:nth-child(2){ animation-delay:.15s; }
.kini-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes kini-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } }

.kini-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 8px; background:var(--kini-stone); }
.kini-chip{ font-size:12.5px; padding:7px 12px; border:1px solid var(--kini-rule); background:#fff; color:var(--kini-ink); border-radius:999px; cursor:pointer; transition:.15s; font-family:inherit; }
.kini-chip:hover{ border-color:var(--kini-red); color:var(--kini-red); }

.kini-foot{ border-top:1px solid var(--kini-rule); padding:10px 12px; background:#fff; }
.kini-input-row{ display:flex; gap:8px; align-items:flex-end; }
.kini-input{ flex:1; border:1px solid var(--kini-rule); border-radius:12px; padding:10px 13px; font-size:14px; font-family:inherit; resize:none; max-height:110px; line-height:1.45; color:var(--kini-ink); outline:none; }
.kini-input:focus{ border-color:var(--kini-red); }
.kini-send{ width:40px; height:40px; flex-shrink:0; border-radius:11px; border:none; cursor:pointer; background:linear-gradient(135deg,var(--kini-red),var(--kini-red-2)); color:#fff; display:flex; align-items:center; justify-content:center; transition:.15s; }
.kini-send:hover{ transform:scale(1.06); }
.kini-send:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.kini-legal{ text-align:center; font-size:10.5px; color:var(--kini-muted); margin-top:7px; }

@media (max-width:480px){
  #kini-panel{ right:8px; left:8px; width:auto; bottom:84px; height:calc(100vh - 104px); }
  #kini-fab{ right:16px; bottom:16px; }
  #kini-nudge{ display:none; }
}