/* ============================================================
   ideaBot — AI Chat Widget Styles
   Version: 1.1.0 | ideaboss.io
   ============================================================ */

/* ── Root variables ─────────────────────────────────────────── */
#ib-chat-wrap {
    --ib-accent:  #00C2FF;
    --ib-dark:    #0a0a0a;
    --ib-darkish: #111;
    --ib-radius:  14px;
    position: fixed;
    bottom: 24px;
    right:  24px;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

#ib-chat-wrap.ib-pos-left  { right: auto; left: 24px; }

/* ── Bubble button ───────────────────────────────────────────── */
#ib-bubble {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ib-accent);
    color: #000;
    border: none;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
    transition: transform .2s, box-shadow .2s;
    white-space: nowrap;
}

#ib-bubble:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.4); }

#ib-bubble-icon { font-size: 18px; line-height: 1; }

/* ── Chat window ─────────────────────────────────────────────── */
#ib-chat-window {
    position: absolute;
    bottom: 64px;
    right:  0;
    width:  360px;
    max-width: calc(100vw - 32px);
    height: 520px;
    max-height: calc(100vh - 120px);
    background: #fff;
    border-radius: var(--ib-radius);
    box-shadow: 0 16px 60px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(.97);
    transition: opacity .22s ease, transform .22s ease;
}

#ib-chat-window.ib-open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}

.ib-pos-left #ib-chat-window { right: auto; left: 0; }

/* ── Header ──────────────────────────────────────────────────── */
#ib-chat-header {
    background: var(--ib-dark);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 2px solid var(--ib-accent);
}

#ib-chat-header span {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.2px;
}

#ib-close {
    background: none;
    border: none;
    color: #666;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color .15s;
}
#ib-close:hover { color: #fff; }

/* ── Message area ────────────────────────────────────────────── */
#ib-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f5f5f5;
    scroll-behavior: smooth;
}

#ib-messages::-webkit-scrollbar       { width: 4px; }
#ib-messages::-webkit-scrollbar-track { background: transparent; }
#ib-messages::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* ── Message bubbles ─────────────────────────────────────────── */
.ib-msg {
    display: flex;
    max-width: 88%;
    animation: ib-pop .18s ease both;
}

@keyframes ib-pop {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ib-msg-bot  { align-self: flex-start; }
.ib-msg-user { align-self: flex-end;   flex-direction: row-reverse; }

.ib-msg-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 13.5px;
    line-height: 1.55;
    word-break: break-word;
}

.ib-msg-bot  .ib-msg-bubble {
    background: var(--ib-dark);
    color: #eee;
    border-bottom-left-radius: 4px;
}

.ib-msg-user .ib-msg-bubble {
    background: var(--ib-accent);
    color: #000;
    font-weight: 600;
    border-bottom-right-radius: 4px;
}

/* ── Timestamp ──────────────────────────────────────────────── */
.ib-msg-time {
    font-size: 10px;
    color: #aaa;
    margin-top: 3px;
    padding: 0 4px;
}
.ib-msg-user .ib-msg-time { text-align: right; }
.ib-msg-bot  .ib-msg-time { text-align: left;  }

/* ── Typing indicator ────────────────────────────────────────── */
.ib-typing-bubble {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 16px;
}

.ib-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #555;
    display: inline-block;
    animation: ib-bounce 1.2s infinite ease-in-out;
}
.ib-dot:nth-child(1) { animation-delay: 0s;    }
.ib-dot:nth-child(2) { animation-delay: .18s;  }
.ib-dot:nth-child(3) { animation-delay: .36s;  }

@keyframes ib-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30%            { transform: translateY(-5px); opacity: 1; }
}

/* ── Input area ──────────────────────────────────────────────── */
#ib-input-area {
    flex-shrink: 0;
    padding: 10px 12px;
    background: #fff;
    border-top: 1px solid #e8e8e8;
}

.ib-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

#ib-text-input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid #ddd;
    border-radius: 24px;
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
    background: #fafafa;
    color: #111;
}

#ib-text-input:focus { border-color: var(--ib-accent); background: #fff; }
#ib-text-input::placeholder { color: #aaa; }
#ib-text-input:disabled { opacity: .5; }

#ib-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ib-accent);
    color: #000;
    border: none;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, transform .15s;
}
#ib-send-btn:hover    { background: #00a8e0; transform: scale(1.05); }
#ib-send-btn:disabled { opacity: .4; cursor: default; transform: none; }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #ib-chat-wrap { bottom: 16px; right: 16px; }
    #ib-chat-wrap.ib-pos-left { left: 16px; }
    #ib-chat-window { width: calc(100vw - 32px); height: calc(100vh - 120px); bottom: 72px; }
    #ib-bubble-text { display: none; }
    #ib-bubble { border-radius: 50%; width: 54px; height: 54px; padding: 0; justify-content: center; }
}