/* =============================================================================
   WooCommerce AI Chatbot — Frontend Styles
   ============================================================================= */

/* ── CSS Custom Properties (overridden inline by PHP) ──────────────────────── */
:root {
    --wtofe-chat-primary: #7c3aed;
    --wtofe-chat-bubble:  #7c3aed;
    --wtofe-chat-text:    #ffffff;
    --wtofe-chat-radius:  18px;
    --wtofe-chat-shadow:  0 8px 32px rgba(0,0,0,.18);
    --wtofe-chat-font:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --wtofe-msg-user-bg:  var(--wtofe-chat-primary);
    --wtofe-msg-bot-bg:   #f0f0f5;
    --wtofe-msg-bot-color:#1a1a1a;
    --wtofe-window-w:     360px;
    --wtofe-window-h:     540px;
}

/* ── Floating Action Button ─────────────────────────────────────────────────── */
#wtofe-chatbot-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--wtofe-chat-bubble);
    color: var(--wtofe-chat-text);
    border: none;
    cursor: pointer;
    box-shadow: var(--wtofe-chat-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99990;
    transition: transform .2s ease, box-shadow .2s ease;
    padding: 0;
    overflow: hidden;
}

#wtofe-chatbot-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 40px rgba(0,0,0,.24);
}

#wtofe-chatbot-fab img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#wtofe-chatbot-fab svg {
    color: var(--wtofe-chat-text);
}

#wtofe-chatbot-fab-unread {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* ── Chat Window ────────────────────────────────────────────────────────────── */
#wtofe-chatbot-window {
    position: fixed;
    bottom: 92px;
    right: 24px;
    
    width: min(var(--wtofe-window-w), calc(100% - 48px));
    height: min(var(--wtofe-window-h), calc(100% - 116px));
    
    background: #fff;
    border-radius: var(--wtofe-chat-radius);
    box-shadow: var(--wtofe-chat-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 99991;
    font-family: var(--wtofe-chat-font);
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px) scale(.97);
    transition: opacity .22s ease, transform .22s ease;
}

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

/* ── Header ─────────────────────────────────────────────────────────────────── */
#wtofe-chatbot-header {
    background: var(--wtofe-chat-primary);
    color: var(--wtofe-chat-text);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 8px;
}

#wtofe-chatbot-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wtofe-chatbot-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.35);
    flex-shrink: 0;
}

.wtofe-chatbot-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--wtofe-chat-text);
}

#wtofe-chatbot-name {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
}

#wtofe-chatbot-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    opacity: .82;
}

.wtofe-status-dot {
    width: 7px;
    height: 7px;
    background: #4ade80;
    border-radius: 50%;
    display: inline-block;
}

#wtofe-chatbot-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

#wtofe-chatbot-header-actions button {
    background: none;
    border: none;
    color: var(--wtofe-chat-text);
    cursor: pointer;
    opacity: .75;
    padding: 5px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: opacity .15s, background .15s;
}

#wtofe-chatbot-header-actions button:hover {
    opacity: 1;
    background: rgba(255,255,255,.15);
}

/* ── Messages Area ──────────────────────────────────────────────────────────── */
#wtofe-chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fafafa;
    scroll-behavior: smooth;
}

#wtofe-chatbot-messages::-webkit-scrollbar {
    width: 4px;
}
#wtofe-chatbot-messages::-webkit-scrollbar-track { background: transparent; }
#wtofe-chatbot-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* ── Date separators ────────────────────────────────────────────────────────── */
.wtofe-date-sep {
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
    margin: 8px 0;
    position: relative;
}

.wtofe-date-sep::before,
.wtofe-date-sep::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: #e5e7eb;
}

.wtofe-date-sep::before { left: 0; }
.wtofe-date-sep::after  { right: 0; }

/* ── Message row ────────────────────────────────────────────────────────────── */
.wtofe-message-row {
    display: flex;
    gap: 8px;
    max-width: 88%;
}

.wtofe-message-row.wtofe-row-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.wtofe-message-row.wtofe-row-bot {
    align-self: flex-start;
}

/* ── Bubble ─────────────────────────────────────────────────────────────────── */
.wtofe-bubble {
    padding: 9px 13px;
    border-radius: 18px;
    line-height: 1.5;
    word-break: break-word;
    max-width: 100%;
    white-space: pre-wrap;
}

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

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

.wtofe-bubble-error {
    background: #fee2e2;
    color: #b91c1c;
}

/* ── Typing indicator ───────────────────────────────────────────────────────── */
#wtofe-chatbot-typing {
    padding: 0 14px 8px;
    background: #fafafa;
    flex-shrink: 0;
}

.wtofe-typing-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #9ca3af;
    border-radius: 50%;
    margin: 0 2px;
    animation: wtofe-blink 1.2s infinite;
}

.wtofe-typing-dot:nth-child(2) { animation-delay: .2s; }
.wtofe-typing-dot:nth-child(3) { animation-delay: .4s; }

@keyframes wtofe-blink {
    0%, 80%, 100% { opacity: .25; transform: scale(.9); }
    40%            { opacity: 1;   transform: scale(1.1); }
}

/* ── Input Area ─────────────────────────────────────────────────────────────── */
#wtofe-chatbot-input-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

/* Row containing the import button, textarea, send button */
#wtofe-chatbot-input-area > #wtofe-chatbot-import-btn,
#wtofe-chatbot-input-area > #wtofe-chatbot-input,
#wtofe-chatbot-input-area > #wtofe-chatbot-send {
    /* these are siblings in the row - achieved via row wrapper below */
}

/* Import context pill slot — sits between messages and input area */
#wtofe-import-badge-slot {
    flex-shrink: 0;
}

/* Inline import context pill */
#wtofe-import-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #1e40af;
    background: #eff6ff;
    border-top: 1px solid #bfdbfe;
    padding: 4px 12px;
    line-height: 1.4;
    max-width: 100%;
}
#wtofe-import-badge svg {
    flex-shrink: 0;
    color: #3b82f6;
}

/* Input row: button + textarea + send in a single flex row */
#wtofe-chatbot-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

#wtofe-chatbot-input {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 22px;
    padding: 9px 14px;
    font-size: 14px;
    font-family: var(--wtofe-chat-font);
    resize: none;
    outline: none;
    max-height: 110px;
    overflow-y: auto;
    line-height: 1.45;
    transition: border-color .15s;
    color: #111827;
    background: #f9fafb;
}

#wtofe-chatbot-input:focus {
    border-color: var(--wtofe-chat-primary);
    background: #fff;
}

#wtofe-chatbot-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--wtofe-chat-primary);
    color: var(--wtofe-chat-text);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity .15s, transform .15s;
}

#wtofe-chatbot-send:hover {
    opacity: .88;
    transform: scale(1.05);
}

#wtofe-chatbot-send:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

/* Narrow screens (Mobile Portrait) */
@media (max-width: 480px) {
    #wtofe-chatbot-window {
        width: calc(100% - 32px); 
        height: 75%;              
        max-height: calc(100% - 100px);
        bottom: 84px;
        right: 16px;
        left: 16px;
        border-radius: 16px;
    }

    #wtofe-chatbot-fab {
        right: 16px;
        bottom: 16px;
    }
}

/* Short screens (Mobile Landscape, squeezed desktop window, or short plugin windows) */
@media (max-height: 600px) {
    #wtofe-chatbot-window {
        height: calc(100% - 100px); 
    }
}


/* ── Admin mode badge ───────────────────────────────────────────────────────── */
.wtofe-admin-badge {
    display: inline-block;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.4);
    color: var(--wtofe-chat-text);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ── HTML content inside bot bubble ────────────────────────────────────────── */
.wtofe-bubble-bot p         { margin: 4px 0; }
.wtofe-bubble-bot ul,
.wtofe-bubble-bot ol        { margin: 6px 0 6px 18px; padding: 0; }
.wtofe-bubble-bot li        { margin-bottom: 3px; }
.wtofe-bubble-bot strong,
.wtofe-bubble-bot b         { font-weight: 600; }
.wtofe-bubble-bot a         { color: #4f46e5; text-decoration: underline; word-break: break-all; }
.wtofe-bubble-bot a:hover   { opacity: .8; }
.wtofe-bubble-bot h1,
.wtofe-bubble-bot h2,
.wtofe-bubble-bot h3        { font-size: 14px; font-weight: 700; margin: 8px 0 4px; }
.wtofe-bubble-bot pre,
.wtofe-bubble-bot code      { background: #f1f5f9; border-radius: 4px; padding: 2px 5px; font-size: 12px; font-family: monospace; }
.wtofe-bubble-bot hr        { border: none; border-top: 1px solid #e5e7eb; margin: 8px 0; }

/* ── Action result cards (admin) ────────────────────────────────────────────── */
.wtofe-action-result {
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.wtofe-action-msg {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wtofe-action-links { display: flex; gap: 5px; flex-shrink: 0; }
.wtofe-action-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}
.wtofe-action-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* View / Edit buttons inside action result banners */
.wtofe-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1.6;
    flex-shrink: 0;
    transition: opacity .15s;
}
.wtofe-action-btn:hover { opacity: .82; }
.wtofe-btn-view  { background: #2563eb; color: #fff !important; }
.wtofe-btn-edit  { background: #fff; color: #374151 !important; border: 1px solid #d1d5db; }
.wtofe-action-result ul { width: 100%; margin: 4px 0 0 14px; padding: 0; white-space: normal; }
.wtofe-action-result li { margin-bottom: 2px; }

/* ── Print / Download document buttons ───────────────────────────────────────── */
.wtofe-print-doc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #e5e7eb;
}
.wtofe-print-doc-row:last-child { border-bottom: none; }
.wtofe-print-doc-label {
    min-width: 110px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}
.wtofe-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity .15s;
}
.wtofe-print-btn:hover { opacity: .85; }
.wtofe-print-btn-print    { background: #1d4ed8; color: #fff !important; }
.wtofe-print-btn-download { background: #059669; color: #fff !important; }

/* ── Remove pre-wrap so HTML renders correctly in bot bubble ─────────────────── */
.wtofe-bubble-bot { white-space: normal; }