/* ═══════════════════════════════════════════
   Art Show Hub AI Assistant — Chat Widget
   Branded, responsive, SSE-streaming chat.
   ═══════════════════════════════════════════ */

/* ─── Floating Action Button ─── */
/* On the collector portal at mobile widths, lift the chat button above the
   fixed bottom navigation bar so it never covers the "My Account" tab. */
@media (max-width: 768px) {
    body.collector-body .vulpin-fab {
        bottom: calc(64px + 18px + env(safe-area-inset-bottom));
    }
    body.collector-body .vulpin-window {
        bottom: calc(64px + 18px + env(safe-area-inset-bottom));
    }
}

.vulpin-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #12294a;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    box-shadow: 0 4px 20px rgba(10, 22, 40, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.vulpin-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(10, 22, 40, 0.45);
}

.vulpin-fab.open {
    transform: rotate(45deg) scale(1);
    background: #475569;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.vulpin-fab svg {
    width: 26px;
    height: 26px;
    transition: transform 0.2s;
}

.vulpin-fab.open svg {
    transform: rotate(-45deg);
}

/* ─── Chat Window ─── */
.vulpin-window {
    position: fixed;
    bottom: 92px;
    right: 24px;
    width: 400px;
    max-height: 560px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    z-index: 9997;
    display: none;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font-ui);
    animation: vulpin-slide-up 0.25s ease;
}

.vulpin-window.open {
    display: flex;
}

@keyframes vulpin-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Header ─── */
.vulpin-header {
    background: linear-gradient(135deg, #0a1628 0%, #0d2847 100%);
    color: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.vulpin-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #12294a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.vulpin-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vulpin-header-avatar svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

.vulpin-header-info {
    flex: 1;
    min-width: 0;
}

.vulpin-header-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.vulpin-header-subtitle {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
}

.vulpin-close-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.15s;
    display: flex;
}

.vulpin-close-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

/* ─── Messages Area ─── */
.vulpin-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 250px;
    max-height: 380px;
    scroll-behavior: smooth;
}

.vulpin-messages::-webkit-scrollbar {
    width: 4px;
}

.vulpin-messages::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

/* ─── Message Bubbles ─── */
.vulpin-msg {
    display: flex;
    gap: 8px;
    max-width: 88%;
    animation: vulpin-fade-in 0.2s ease;
}

@keyframes vulpin-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.vulpin-msg-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.vulpin-msg-assistant {
    align-self: flex-start;
}

.vulpin-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vulpin-msg-assistant .vulpin-msg-avatar {
    background: #12294a;
}

.vulpin-msg-assistant .vulpin-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vulpin-msg-assistant .vulpin-msg-avatar svg {
    width: 14px;
    height: 14px;
    color: #fff;
}

.vulpin-msg-user .vulpin-msg-avatar {
    background: #0d2847;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
}

.vulpin-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.5;
    word-wrap: break-word;
}

.vulpin-msg-user .vulpin-bubble {
    background: #15b7ff;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.vulpin-msg-assistant .vulpin-bubble {
    background: #f1f5f9;
    color: #1e293b;
    border-bottom-left-radius: 4px;
}

/* Markdown rendering in bubbles */
.vulpin-bubble strong { font-weight: 700; }
.vulpin-bubble em { font-style: italic; }
.vulpin-bubble code {
    background: rgba(0,0,0,0.06);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.82rem;
}
.vulpin-bubble a {
    color: #15b7ff;
    text-decoration: underline;
    text-decoration-color: rgba(21,183,255,0.3);
}
.vulpin-bubble a:hover {
    text-decoration-color: #15b7ff;
}
.vulpin-msg-user .vulpin-bubble a {
    color: #fff;
    text-decoration-color: rgba(255,255,255,0.5);
}
.vulpin-bubble ul, .vulpin-bubble ol {
    margin: 6px 0;
    padding-left: 18px;
}
.vulpin-bubble li {
    margin-bottom: 3px;
}
.vulpin-bubble p {
    margin: 0 0 8px;
}
.vulpin-bubble p:last-child {
    margin-bottom: 0;
}

/* Typing indicator */
.vulpin-typing {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    align-items: center;
}

.vulpin-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    animation: vulpin-bounce 1.4s infinite ease-in-out;
}

.vulpin-typing-dot:nth-child(1) { animation-delay: 0s; }
.vulpin-typing-dot:nth-child(2) { animation-delay: 0.16s; }
.vulpin-typing-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes vulpin-bounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* Bug notification in chat */
.vulpin-bug-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.2);
    border-radius: 8px;
    font-size: 0.78rem;
    color: #16a34a;
    margin-top: 4px;
}

.vulpin-bug-notice a {
    color: #16a34a;
    font-weight: 600;
}

/* ─── Input Area ─── */
.vulpin-input-area {
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
}

.vulpin-input {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 0.88rem;
    resize: none;
    outline: none;
    min-height: 40px;
    max-height: 100px;
    line-height: 1.4;
    transition: border-color 0.15s;
    color: #1e293b;
}

.vulpin-input:focus {
    border-color: #15b7ff;
}

.vulpin-input::placeholder {
    color: #94a3b8;
}

.vulpin-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #15b7ff;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.15s;
}

.vulpin-send-btn:hover {
    background: #0ea5e9;
    transform: scale(1.05);
}

.vulpin-send-btn:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    transform: none;
}

.vulpin-send-btn svg {
    width: 18px;
    height: 18px;
}

/* ─── Footer ─── */
.vulpin-footer {
    padding: 6px 16px 8px;
    text-align: center;
    font-size: 0.6rem;
    color: #94a3b8;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.vulpin-footer a {
    color: #94a3b8;
    text-decoration: none;
}

.vulpin-footer a:hover {
    color: #64748b;
}

/* ─── Mobile ─── */
@media (max-width: 480px) {
    .vulpin-window {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    .vulpin-messages {
        max-height: calc(100vh - 200px);
    }

    .vulpin-fab {
        bottom: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 768px) {
    .vulpin-window {
        width: calc(100vw - 32px);
        right: 16px;
        bottom: 80px;
        max-height: 70vh;
    }
}

/* Mobile: 16px input font prevents iOS Safari from auto-zooming on focus.
   Older users especially get disoriented by the zoom-and-reflow jump. */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ─── Tuck away (collapse to the header bar) ───
   The panel overlays the right-hand side of the page, so anything sitting in
   that column is hidden while it is open. Rather than force people to close
   the conversation to read the page underneath, the chevron collapses the
   panel to its header and back. .minimized is two classes deep, so it wins
   over the plain .vulpin-window sizing in every breakpoint including the
   full-screen mobile one, without needing !important. */
.vulpin-window.minimized {
    height: auto;
    max-height: none;
}

.vulpin-window.minimized .vulpin-messages,
.vulpin-window.minimized .vulpin-input-area,
.vulpin-window.minimized .vulpin-footer {
    display: none;
}

/* Back to a rounded bar even where the mobile rule squares it off. */
@media (max-width: 480px) {
    .vulpin-window.minimized {
        border-radius: 16px 16px 0 0;
    }
}

.vulpin-minimize-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.15s;
    display: flex;
}

.vulpin-minimize-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

/* The chevron points down to tuck away, up to bring the conversation back. */
.vulpin-window.minimized .vulpin-minimize-btn svg {
    transform: rotate(180deg);
}

/* Tapping the header bar itself restores it, which is what people try first. */
.vulpin-window.minimized .vulpin-header {
    cursor: pointer;
}

/* Starter questions under the greeting (marketing-site Muse). */
.vulpin-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 8px 40px;
}
.vulpin-suggestion {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0d2847;
    border-radius: 999px;
    padding: 7px 12px;
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s;
}
.vulpin-suggestion:hover,
.vulpin-suggestion:focus-visible {
    border-color: #15b7ff;
    background: #f0f9ff;
    outline: none;
}