#aicb-wrapper * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Toggle */
#aicb-toggle {
    position: fixed; bottom: 24px; right: 24px;
    width: 58px; height: 58px; border-radius: 50%;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25); z-index: 99999;
    transition: transform .2s, box-shadow .2s;
}
#aicb-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 26px rgba(0,0,0,.3); }
#aicb-toggle .aicb-icon { width: 26px; height: 26px; fill: #fff; position: absolute; transition: all .2s; }
#aicb-toggle .aicb-icon-close { opacity: 0; transform: rotate(-90deg) scale(.7); }
#aicb-toggle.open .aicb-icon-chat  { opacity: 0; transform: rotate(90deg) scale(.7); }
#aicb-toggle.open .aicb-icon-close { opacity: 1; transform: rotate(0) scale(1); }
#aicb-toggle .aicb-icon-send { display: none; }

/* Window */
#aicb-window {
    position: fixed; bottom: 94px; right: 24px;
    width: 370px; max-height: 560px;
    border-radius: 20px;
    box-shadow: 0 12px 50px rgba(0,0,0,.18);
    background: #fff;
    display: flex; flex-direction: column; overflow: hidden;
    z-index: 99998;
    transform: scale(.92) translateY(16px); opacity: 0; pointer-events: none;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
#aicb-window.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }

/* Header */
#aicb-header {
    padding: 14px 16px; display: flex; align-items: center; gap: 11px;
    color: #fff; flex-shrink: 0;
}
#aicb-avatar-wrap {
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    background: rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.4);
}
#aicb-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
#aicb-header-name { font-weight: 700; font-size: 15px; line-height: 1.2; }
#aicb-header-status { font-size: 12px; opacity: .85; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
#aicb-header-status::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }

/* Messages */
#aicb-messages {
    flex: 1; overflow-y: auto; padding: 16px 14px;
    display: flex; flex-direction: column; gap: 10px;
    background: #f4f6fb;
}
#aicb-messages::-webkit-scrollbar { width: 3px; }
#aicb-messages::-webkit-scrollbar-thumb { background: #d8dbe8; border-radius: 2px; }

/* Bubbles */
.aicb-msg {
    max-width: 88%; border-radius: 18px; font-size: 14px; line-height: 1.55;
    word-wrap: break-word; animation: aicb-pop .18s ease;
}
@keyframes aicb-pop { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.aicb-msg-bot {
    background: #fff; color: #1e2330;
    border-bottom-left-radius: 4px; align-self: flex-start;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
    padding: 13px 15px;
}
.aicb-msg-user {
    color: #fff; border-bottom-right-radius: 4px; align-self: flex-end;
    padding: 10px 14px;
}

/* Text paragraphs */
.aicb-text p { margin: 0 0 5px; padding: 0; line-height: 1.6; }
.aicb-text p:last-child { margin-bottom: 0; }

/* Button row */
.aicb-btn-row {
    display: flex; flex-direction: column; gap: 7px;
    margin-top: 12px; padding-top: 11px;
    border-top: 1px solid #eef0f6;
}

/* Buttons — text only, no URL visible */
.aicb-btn {
    display: block;
    padding: 9px 18px;
    border-radius: 24px;
    font-size: 13.5px; font-weight: 600;
    text-align: center;
    text-decoration: none !important;
    color: #fff !important;
    border: none; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.14);
    transition: opacity .15s, transform .12s, box-shadow .15s;
    letter-spacing: .01em;
    /* Hide underlying URL — purely cosmetic override */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.aicb-btn:hover {
    opacity: .88; transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    color: #fff !important; text-decoration: none !important;
}

/* Typing */
.aicb-typing {
    display: flex; align-items: center; gap: 4px;
    padding: 11px 15px; background: #fff;
    border-radius: 18px; border-bottom-left-radius: 4px;
    align-self: flex-start; box-shadow: 0 1px 6px rgba(0,0,0,.08);
}
.aicb-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: #c0c5d4; animation: aicb-bounce 1.2s infinite;
}
.aicb-typing span:nth-child(2) { animation-delay: .2s; }
.aicb-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes aicb-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }

/* Input */
#aicb-input-area {
    display: flex; gap: 8px; padding: 10px 12px;
    border-top: 1px solid #eef0f5; background: #fff; flex-shrink: 0;
    align-items: flex-end;
}
#aicb-input {
    flex: 1; border: 1.5px solid #e5e8f0; border-radius: 22px;
    padding: 9px 15px; font-size: 14px; outline: none;
    resize: none; max-height: 80px; line-height: 1.45;
    color: #1e2330; background: #f7f8fc; transition: border-color .2s, background .2s;
}
#aicb-input:focus { border-color: var(--aicb-color,#4f46e5); background: #fff; }
#aicb-input::placeholder { color: #a8b0c8; }

#aicb-send {
    width: 40px; height: 40px; min-width: 40px;
    border: none; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.18); flex-shrink: 0;
    transition: opacity .15s, transform .15s;
}
#aicb-send:hover { opacity: .88; transform: scale(1.07); }
#aicb-send:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }
#aicb-send svg { width: 17px; height: 17px; display: block; }
#aicb-send path { fill: #fff; }

/* Footer */
#aicb-footer { text-align: center; font-size: 10.5px; color: #c8ccd8; padding: 4px 0 7px; background: #fff; }
#aicb-footer a { color: #c8ccd8; text-decoration: none; font-weight: 500; }
#aicb-footer a:hover { color: var(--aicb-color,#4f46e5); }

/* Mobile */
@media (max-width: 420px) {
    #aicb-window { width: calc(100vw - 20px); right: 10px; bottom: 82px; }
    #aicb-toggle { right: 14px; bottom: 14px; }
}
