/* ===== BYS Asistan (chatbot) ===== */
.chat { position: fixed; right: 22px; bottom: 22px; z-index: 900; font-family: var(--font, 'Segoe UI', sans-serif); }
.chat-fab { position: relative; display: flex; align-items: center; gap: .6rem; border: 0; cursor: pointer; color: #fff; padding: .85rem 1.3rem .85rem 1rem; border-radius: 99px;
  background: linear-gradient(135deg, var(--blue-900), var(--cyan)); box-shadow: 0 16px 36px rgba(var(--blue-900-rgb), .4); font: 600 .95rem inherit; font-family: inherit; transition: transform .25s, box-shadow .25s; }
.chat-fab:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(var(--blue-900-rgb), .5); }
.chat-fab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(var(--cyan-rgb), .6); animation: chatRing 2.6s ease-out infinite; }
@keyframes chatRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.35, 1.7); opacity: 0; } }
.chat-fab-icon { display: grid; place-items: center; }
.chat[data-open="true"] .chat-fab { display: none; }

.chat-panel { position: absolute; right: 0; bottom: 0; width: min(390px, calc(100vw - 28px)); height: min(590px, calc(100vh - 44px)); display: flex; flex-direction: column; overflow: hidden;
  background: #f4f7fb; border-radius: 22px; box-shadow: 0 30px 80px rgba(var(--blue-950-rgb), .45); animation: chatIn .35s cubic-bezier(.2, .9, .3, 1.1); transform-origin: bottom right; }
.chat-panel[hidden] { display: none; }
@keyframes chatIn { from { opacity: 0; transform: translateY(22px) scale(.92); } to { opacity: 1; transform: none; } }
.chat-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; color: #fff; background: linear-gradient(120deg, var(--blue-950), var(--blue-900) 55%, #1f6f93); }
.chat-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, var(--cyan), var(--yellow)); color: var(--blue-950); box-shadow: 0 0 0 3px rgba(255, 255, 255, .2); }
.chat-title { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.chat-title small { opacity: .75; font-size: .76rem; }
.chat-close { background: rgba(255, 255, 255, .12); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.chat-close:hover { background: rgba(255, 255, 255, .25); }
.chat-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; scroll-behavior: smooth; }
.msg { display: flex; animation: msgIn .3s ease both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg-user { justify-content: flex-end; }
.msg-bubble { max-width: 86%; padding: .7rem .95rem; border-radius: 16px; font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.msg-bot .msg-bubble { background: #fff; color: #1a2a47; border-bottom-left-radius: 5px; box-shadow: 0 2px 8px rgba(var(--blue-900-rgb), .08); }
.msg-user .msg-bubble { background: linear-gradient(135deg, var(--blue-900), var(--blue-700)); color: #fff; border-bottom-right-radius: 5px; }
.msg-links { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.msg-links a { display: block; padding: .5rem .8rem; border-radius: 10px; background: #e8f6f8; color: var(--blue-900); font-weight: 600; font-size: .86rem; text-decoration: none; transition: .2s; }
.msg-links a:hover { background: var(--blue-900); color: #fff; }
.dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: #93a3bd; animation: dot 1.1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.chat-chips { display: flex; gap: .45rem; padding: 0 1rem .7rem; flex-wrap: wrap; max-height: 118px; overflow-y: auto; scrollbar-width: thin; }
.chat-chips:empty { display: none; }
.chat-chips button { flex: none; border: 1.5px solid var(--cyan); background: #fff; color: var(--blue-900); padding: .4rem .85rem; border-radius: 99px; font: 600 .8rem inherit; font-family: inherit; cursor: pointer; transition: .2s; white-space: nowrap; }
.chat-chips button:hover { background: var(--cyan); color: #fff; }
.chat-form { display: flex; gap: .5rem; padding: .8rem; background: #fff; border-top: 1px solid #e3e9f2; }
.chat-form input { flex: 1; font: inherit; font-size: .92rem; padding: .7rem 1rem; border: 1.5px solid #e3e9f2; border-radius: 99px; background: #f6f9fc; min-width: 0; }
.chat-form input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(var(--cyan-rgb), .15); background: #fff; }
.chat-form button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; font-size: 1rem; background: linear-gradient(135deg, var(--blue-900), var(--cyan)); transition: transform .2s; }
.chat-form button:hover { transform: scale(1.08); }

@media (max-width: 560px) {
  .chat { right: 14px; bottom: 14px; }
  .chat-fab-label { display: none; }
  .chat-fab { padding: .95rem; }
  .chat-panel { position: fixed; right: 8px; left: 8px; bottom: 8px; width: auto; height: min(78vh, 600px); }
}
@media (prefers-reduced-motion: reduce) { .chat-fab::before { animation: none; } .chat-panel, .msg { animation: none; } }
