/* Suki AI Chat Widget — floating bubble for Bili Tayo */
#suki-widget *{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}

/* Floating bubble */
#suki-bubble{position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border:none;font-size:28px;cursor:pointer;z-index:9998;box-shadow:0 6px 24px rgba(124,58,237,.45);display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s}
#suki-bubble:hover{transform:scale(1.08);box-shadow:0 8px 32px rgba(124,58,237,.55)}
#suki-bubble .pulse{position:absolute;inset:-4px;border-radius:50%;border:3px solid rgba(124,58,237,.4);animation:suki-pulse 2s infinite}
@keyframes suki-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:0}}

/* Chat panel */
#suki-panel{position:fixed;bottom:100px;right:24px;width:380px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 140px);background:#fff;border-radius:20px;box-shadow:0 12px 48px rgba(0,0,0,.18);z-index:9999;display:none;flex-direction:column;overflow:hidden;border:1px solid #e5e7eb}
#suki-panel.open{display:flex;animation:suki-slide-up .25s ease-out}
@keyframes suki-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Header */
#suki-header{background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 100%);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:10px;flex-shrink:0}
#suki-header .avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
#suki-header .info{flex:1}
#suki-header .info h3{font-size:15px;font-weight:700;margin-bottom:1px}
#suki-header .info .status{font-size:11px;opacity:.85;display:flex;align-items:center;gap:4px}
#suki-header .info .status .dot{width:7px;height:7px;border-radius:50%;background:#34d399;animation:suki-pulse-status 2s infinite}
@keyframes suki-pulse-status{0%,100%{opacity:1}50%{opacity:.4}}
#suki-close{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:4px 8px;opacity:.8;transition:opacity .15s}
#suki-close:hover{opacity:1}

/* Messages */
#suki-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.suki-msg{max-width:85%;animation:suki-fade-in .2s}
.suki-msg.ai{align-self:flex-start}
.suki-msg.user{align-self:flex-end}
.suki-msg .bubble{padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}
.suki-msg.ai .bubble{background:#f3f4f6;border:1px solid #e5e7eb;border-bottom-left-radius:4px;color:#1e1b4b}
.suki-msg.user .bubble{background:var(--green,#16a34a);color:#fff;border-bottom-right-radius:4px}
.suki-msg .time{font-size:10px;color:#9ca3af;margin-top:2px;padding:0 4px}
.suki-msg.user .time{text-align:right}
@keyframes suki-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Typing */
.suki-typing{display:flex;gap:4px;padding:8px 14px}
.suki-typing span{width:7px;height:7px;border-radius:50%;background:#a78bfa;animation:suki-bounce .6s infinite}
.suki-typing span:nth-child(2){animation-delay:.15s}
.suki-typing span:nth-child(3){animation-delay:.3s}
@keyframes suki-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Quick actions */
#suki-quick{display:flex;gap:6px;padding:8px 14px;overflow-x:auto;flex-shrink:0;-webkit-overflow-scrolling:touch}
.suki-quick-btn{padding:8px 14px;border-radius:99px;border:1.5px solid #c4b5fd;background:#fff;color:#6d28d9;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;transition:all .12s}
.suki-quick-btn:active{background:#7c3aed;color:#fff;border-color:#7c3aed}

/* Input */
#suki-input-bar{display:flex;gap:8px;padding:10px 14px;background:#fff;border-top:1px solid #e5e7eb;flex-shrink:0}
#suki-input{flex:1;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:99px;font-size:14px;outline:none;min-height:42px;background:#f9fafb}
#suki-input:focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.1)}
#suki-send{background:#7c3aed;color:#fff;border:none;border-radius:50%;width:42px;height:42px;font-size:18px;cursor:pointer;flex-shrink:0;transition:all .12s}
#suki-send:disabled{opacity:.4;cursor:not-allowed}
#suki-send:not(:disabled):active{transform:scale(.9)}

/* Mobile */
@media(max-width:480px){
  #suki-panel{right:8px;bottom:80px;width:calc(100vw - 16px);height:calc(100vh - 100px);border-radius:16px}
  #suki-bubble{bottom:16px;right:16px;width:56px;height:56px;font-size:26px}
}