/* SAIYO — chat widget */
.saiyo-chat { position: fixed; right: 22px; bottom: 22px; z-index: 9990; font-family: 'Inter', sans-serif; }
.saiyo-chat__btn {
  width: 94px; height: 94px; border-radius: 50%; border: 3px solid #fff; cursor: pointer;
  background: linear-gradient(135deg, #1f5cff, #06b6d4); padding: 0; overflow: hidden;
  box-shadow: 0 14px 34px -8px rgba(31,92,255,.55); transition: transform .18s;
  animation: saiyo-bob-soft 4.5s ease-in-out infinite;
}
.saiyo-chat__btn:hover { transform: scale(1.08); }
.saiyo-chat__btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.saiyo-chat__btn .saiyo-chat__close { display: none; font-size: 30px; color: #fff; line-height: 88px; }
/* "Ask SAIYO" popup bubble — appears shortly after load, hides when chat opens */
.saiyo-chat__bubble {
  position: absolute; right: 106px; bottom: 30px; z-index: 9991;
  background: #fff; color: #0f1b3d; font-weight: 700; font-size: 15px; letter-spacing: .2px;
  padding: 11px 20px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 12px 28px -10px rgba(15,27,61,.35); border: 1px solid rgba(31,92,255,.12);
  opacity: 0; transform: translateX(14px) scale(.92);
  transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.saiyo-chat__bubble::after {
  content: ''; position: absolute; right: -6px; top: 50%; width: 13px; height: 13px;
  background: #fff; border-radius: 3px; transform: translateY(-50%) rotate(45deg);
  box-shadow: 3px -3px 6px -4px rgba(15,27,61,.2);
}
.saiyo-chat.show-bubble:not(.open) .saiyo-chat__bubble { opacity: 1; transform: none; }
.saiyo-chat.open .saiyo-chat__btn img { display: none; }
.saiyo-chat.open .saiyo-chat__btn .saiyo-chat__close { display: block; }
.saiyo-chat__ping {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #22c55e; border: 3px solid #fff;
}
.saiyo-chat.open .saiyo-chat__ping { display: none; }

.saiyo-chat__panel {
  position: absolute; right: 0; bottom: 88px; width: 372px; max-width: calc(100vw - 44px);
  height: 520px; max-height: calc(100vh - 130px); display: flex; flex-direction: column;
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 70px -18px rgba(11,31,77,.45); border: 1px solid rgba(31,92,255,.15);
  opacity: 0; transform: translateY(18px) scale(.97); pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.saiyo-chat.open .saiyo-chat__panel { opacity: 1; transform: none; pointer-events: auto; }

.saiyo-chat__head {
  background: linear-gradient(120deg, #0b1f4d, #1f5cff); color: #fff; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
.saiyo-chat__head img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: #fff; }
.saiyo-chat__head b { font-family: 'Space Grotesk'; font-size: 16px; display: block; }
.saiyo-chat__head small { color: #bcd0f7; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.saiyo-chat__head small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; }

.saiyo-chat__msgs { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: #f4f7fd; }
.saiyo-chat__msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; animation: saiyo-pop .3s both; }
.saiyo-chat__msg--bot { background: #fff; color: #16233f; border: 1px solid #e3eafb; border-bottom-left-radius: 5px; align-self: flex-start; box-shadow: 0 2px 8px rgba(31,92,255,.06); }
.saiyo-chat__msg--user { background: linear-gradient(120deg, #1f5cff, #06b6d4); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.saiyo-chat__typing { display: flex; gap: 5px; padding: 12px 16px; background: #fff; border: 1px solid #e3eafb; border-radius: 16px; border-bottom-left-radius: 5px; align-self: flex-start; }
.saiyo-chat__typing i { width: 7px; height: 7px; border-radius: 50%; background: #93a7d4; animation: saiyo-tdot 1.1s infinite; }
.saiyo-chat__typing i:nth-child(2) { animation-delay: .15s; }
.saiyo-chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes saiyo-tdot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

.saiyo-chat__quick { display: flex; gap: 8px; padding: 10px 14px 0; flex-wrap: wrap; background: #f4f7fd; }
.saiyo-chat__quick button {
  border: 1px solid #1f5cff; color: #1f5cff; background: #fff; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; padding: 7px 13px; cursor: pointer; transition: all .15s;
}
.saiyo-chat__quick button:hover { background: #1f5cff; color: #fff; }

/* In-chat connect buttons (WhatsApp + Call) */
.saiyo-chat__connect-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.saiyo-chat__connect-btn {
  flex: 1; min-width: 130px; text-align: center; padding: 10px 12px; border-radius: 12px;
  font-weight: 700; font-size: 13px; color: #fff; text-decoration: none; line-height: 1.35;
  transition: transform .15s, filter .15s;
}
.saiyo-chat__connect-btn:hover { transform: translateY(-1px); filter: brightness(1.06); color: #fff; text-decoration: none; }
.saiyo-chat__connect-btn--wa { background: #25d366; }
.saiyo-chat__connect-btn--call { background: linear-gradient(120deg, #1f5cff, #06b6d4); }

.saiyo-chat__form { display: flex; gap: 8px; padding: 12px 14px; background: #fff; border-top: 1px solid #e8eefc; }
.saiyo-chat__form input {
  flex: 1; border: 1px solid #dbe4f7; border-radius: 999px; padding: 11px 16px;
  font-size: 14px; font-family: inherit; outline: none;
}
.saiyo-chat__form input:focus { border-color: #1f5cff; box-shadow: 0 0 0 3px rgba(31,92,255,.12); }
.saiyo-chat__form button {
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; flex: 0 0 auto;
  background: linear-gradient(135deg, #1f5cff, #06b6d4); color: #fff; font-size: 18px;
  transition: transform .15s;
}
.saiyo-chat__form button:hover { transform: scale(1.08); }
.saiyo-chat__form button:disabled { opacity: .5; transform: none; }

@media (max-width: 480px) {
  .saiyo-chat { right: 14px; bottom: 14px; }
  .saiyo-chat__btn { width: 84px; height: 84px; }
  .saiyo-chat__btn .saiyo-chat__close { line-height: 78px; }
  .saiyo-chat__bubble { right: 94px; bottom: 26px; font-size: 13.5px; padding: 9px 16px; }
  .saiyo-chat__panel { bottom: 84px; height: 62vh; }
}
@media (prefers-reduced-motion: reduce) {
  .saiyo-chat__btn { animation: none; }
}
