/* ============================================
   AI Chatbox — Clean & Minimal
   Font (DM Sans + DM Mono) is enqueued via
   wp_enqueue_style in ai-chatbox.php
   ============================================ */

/* ── Container ─────────────────────────────── */
.aicb-wrap {
    --aicb-bg:          #ffffff;
    --aicb-border:      #e8e8e8;
    --aicb-header-bg:   #1a1a1a;
    --aicb-header-text: #ffffff;
    --aicb-user-bg:     #1a1a1a;
    --aicb-user-text:   #ffffff;
    --aicb-bot-bg:      #f4f4f4;
    --aicb-bot-text:    #1a1a1a;
    --aicb-input-bg:    #f9f9f9;
    --aicb-send-bg:     #1a1a1a;
    --aicb-send-hover:  #333333;
    --aicb-accent:      #4ade80;   /* subtle green status dot */
    --aicb-radius:      12px;
    --aicb-font:        'DM Sans', sans-serif;

    font-family: var(--aicb-font);
    font-size: 15px;
    line-height: 1.5;
    max-width: 560px;
    width: 100%;
    background: var(--aicb-bg);
    border: 1px solid var(--aicb-border);
    border-radius: var(--aicb-radius);
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}

/* ── Header ────────────────────────────────── */
.aicb-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--aicb-header-bg);
    color: var(--aicb-header-text);
}

.aicb-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    flex-shrink: 0;
}

.aicb-header-title {
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.01em;
    flex: 1;
}

.aicb-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--aicb-accent);
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.25);
    animation: aicb-pulse 2.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes aicb-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.25); }
    50%       { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.1); }
}

/* ── Message area ──────────────────────────── */
.aicb-messages {
    height: 320px;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}

.aicb-messages::-webkit-scrollbar {
    width: 4px;
}
.aicb-messages::-webkit-scrollbar-track {
    background: transparent;
}
.aicb-messages::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
}

/* ── Individual messages ───────────────────── */
.aicb-message {
    display: flex;
    animation: aicb-slide-in 0.2s ease forwards;
}

@keyframes aicb-slide-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.aicb-message--user {
    justify-content: flex-end;
}

.aicb-message--bot {
    justify-content: flex-start;
}

.aicb-bubble {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.55;
}

.aicb-message--user .aicb-bubble {
    background: var(--aicb-user-bg);
    color: var(--aicb-user-text);
    border-bottom-right-radius: 4px;
}

.aicb-message--bot .aicb-bubble {
    background: var(--aicb-bot-bg);
    color: var(--aicb-bot-text);
    border-bottom-left-radius: 4px;
}

/* ── Typing indicator ──────────────────────── */
.aicb-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 14px;
    background: var(--aicb-bot-bg);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    width: fit-content;
}

.aicb-typing span {
    width: 6px;
    height: 6px;
    background: #aaa;
    border-radius: 50%;
    animation: aicb-bounce 1.2s ease-in-out infinite;
}
.aicb-typing span:nth-child(2) { animation-delay: 0.15s; }
.aicb-typing span:nth-child(3) { animation-delay: 0.3s; }

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

/* ── Composer ──────────────────────────────── */
.aicb-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--aicb-border);
    background: var(--aicb-bg);
}

.aicb-input {
    flex: 1;
    padding: 10px 14px;
    font-family: var(--aicb-font);
    font-size: 14px;
    background: var(--aicb-input-bg);
    border: 1px solid var(--aicb-border);
    border-radius: 8px;
    outline: none;
    color: #1a1a1a;
    transition: border-color 0.15s ease;
}

.aicb-input:focus {
    border-color: #aaa;
}

.aicb-input::placeholder {
    color: #b0b0b0;
}

.aicb-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--aicb-send-bg);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease;
}

.aicb-send:hover {
    background: var(--aicb-send-hover);
}

.aicb-send:active {
    transform: scale(0.93);
}

.aicb-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* ── Footer note ───────────────────────────── */
.aicb-footer {
    margin: 0;
    padding: 8px 18px 10px;
    font-size: 11.5px;
    color: #b0b0b0;
    text-align: center;
    border-top: 1px solid var(--aicb-border);
    background: #fafafa;
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.01em;
}

/* ── Error state ───────────────────────────── */
.aicb-bubble--error {
    background: #fff0f0 !important;
    color: #c0392b !important;
    border: 1px solid #ffd5d5;
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 600px) {
    .aicb-wrap {
        max-width: 100%;
        border-radius: 8px;
    }
    .aicb-messages {
        height: 260px;
    }
}

/* ── Offline state ─────────────────────────── */
.aicb-status-dot--offline {
    background: #e0e0e0;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
    animation: none;
}

.aicb-wrap--offline .aicb-header {
    background: #555;
}

.aicb-offline-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 24px;
    text-align: center;
    color: #888;
    min-height: 160px;
}

.aicb-offline-message svg {
    opacity: 0.35;
}

.aicb-offline-message p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    max-width: 320px;
    color: #777;
}