/* ═══════════════════════════════════════════════════
   IT HELPDESK CHATBOT WIDGET
   Floating button + animated popup on login page
═══════════════════════════════════════════════════ */

/* Floating trigger button */
#cb-trigger {
    position: fixed; bottom: 26px; right: 26px;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(145deg, #7C3AED, #5B21B6);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(124,58,237,.5);
    z-index: 9999;
    animation: cb-float 2.5s ease-in-out infinite;
    transition: transform .15s, box-shadow .15s;
}
#cb-trigger:hover { transform: scale(1.1) !important; box-shadow: 0 6px 28px rgba(124,58,237,.65); }
#cb-trigger svg   { width: 26px; height: 26px; fill: #fff; }
.cb-notif {
    position: absolute; top: 2px; right: 2px;
    width: 13px; height: 13px; border-radius: 50%;
    background: #22c55e; border: 2px solid #fff;
    animation: cb-pulse 2s infinite;
}
@keyframes cb-float  { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-6px)} }
@keyframes cb-pulse  { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.35);opacity:.7} }

/* Chat window */
#cb-window {
    position: fixed; bottom: 94px; right: 26px;
    width: 355px; max-height: 540px;
    background: #fff; border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    display: flex; flex-direction: column;
    z-index: 9998; overflow: hidden;
    transform: scale(.88) translateY(24px);
    opacity: 0; pointer-events: none;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
#cb-window.cb-open {
    transform: scale(1) translateY(0);
    opacity: 1; pointer-events: all;
}
#cb-window.cb-mini .cb-msgs,
#cb-window.cb-mini .cb-ibar,
#cb-window.cb-mini .cb-foot { display: none; }

/* Header */
.cb-hdr {
    background: linear-gradient(135deg, #7C3AED, #4F46E5);
    padding: 12px 14px; display: flex; align-items: center;
    gap: 10px; flex-shrink: 0;
}
.cb-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.2); display: flex;
    align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.cb-hdr-info { flex: 1; }
.cb-hdr-name { font-size: 13px; font-weight: 700; color: #fff; }
.cb-hdr-sub  { font-size: 10px; color: rgba(255,255,255,.72); display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.cb-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; display: inline-block; }
.cb-hdr-btns { display: flex; gap: 5px; }
.cb-hdr-btns button {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,.18); border: none;
    cursor: pointer; color: #fff; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.cb-hdr-btns button:hover { background: rgba(255,255,255,.3); }

/* Messages area */
.cb-msgs {
    flex: 1; overflow-y: auto; padding: 12px 12px 8px;
    display: flex; flex-direction: column; gap: 9px;
    background: #f8f9fb; min-height: 0;
}
.cb-msgs::-webkit-scrollbar { width: 3px; }
.cb-msgs::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* Message bubbles */
.cb-msg { display: flex; align-items: flex-end; gap: 6px; max-width: 90%; animation: cb-up .2s ease; }
@keyframes cb-up { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} }
.cb-msg.bot  { align-self: flex-start; }
.cb-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.cb-msg-av {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg,#7C3AED,#4F46E5);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
}
.cb-bubble {
    padding: 8px 12px; border-radius: 14px;
    font-size: 12.5px; line-height: 1.5;
    max-width: 255px; word-break: break-word;
}
.cb-msg.bot  .cb-bubble { background:#fff;color:#1e2a3a;border-bottom-left-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.08); }
.cb-msg.user .cb-bubble { background:linear-gradient(135deg,#7C3AED,#4F46E5);color:#fff;border-bottom-right-radius:3px; }
.cb-bubble ol { margin:5px 0 0 15px; padding:0; }
.cb-bubble li { margin-bottom:2px; }

/* Typing dots */
.cb-typing {
    display: flex; align-items: center; gap: 3px;
    padding: 9px 12px; background: #fff; border-radius: 14px;
    border-bottom-left-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.08);
    width: 48px;
}
.cb-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: #9ca3af; animation: cb-dot 1.2s infinite;
}
.cb-typing span:nth-child(2) { animation-delay:.2s; }
.cb-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes cb-dot { 0%,80%,100%{transform:scale(1);opacity:.5} 40%{transform:scale(1.3);opacity:1} }

/* Quick reply buttons */
.cb-qrs { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0; align-self: flex-start; animation: cb-up .2s ease; }
.cb-qr {
    font-size: 11px; padding: 4px 10px; border-radius: 20px;
    border: 1.5px solid #7C3AED; background: #fff; color: #7C3AED;
    cursor: pointer; font-weight: 500; transition: all .15s;
}
.cb-qr:hover { background: #7C3AED; color: #fff; }

/* Ticket success card */
.cb-ticket-card {
    background: linear-gradient(135deg,#f0fdf4,#dcfce7);
    border: 1px solid #86efac; border-radius: 10px;
    padding: 9px 12px; font-size: 12px;
}
.cb-ticket-id { font-size: 15px; font-weight: 800; color: #059669; }
.cb-ticket-card p { color: #374151; margin-top: 4px; line-height: 1.4; }

/* Input bar */
.cb-ibar {
    padding: 9px 11px; border-top: 1px solid #e8eaef;
    display: flex; gap: 7px; align-items: center;
    background: #fff; flex-shrink: 0;
}
.cb-ibar input {
    flex: 1; border: 1.5px solid #e5e7eb; border-radius: 20px;
    padding: 7px 13px; font-size: 12px; outline: none;
    font-family: inherit; transition: border-color .15s;
}
.cb-ibar input:focus { border-color: #7C3AED; }
.cb-ibar input::placeholder { color: #9ca3af; }
.cb-send {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg,#7C3AED,#4F46E5);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: opacity .15s;
}
.cb-send:hover { opacity: .85; }
.cb-send svg { width: 15px; height: 15px; fill: #fff; }

/* Footer */
.cb-foot {
    padding: 4px 13px 7px; text-align: center;
    font-size: 10px; color: #b0b4c8; background: #fff; flex-shrink: 0;
}