/* Konvai – AI Chat Support Widget Styles */
/* All theme colors are driven by CSS variables set inline by PHP (see class-frontend.php) */

:root {
    --vgchat-primary: #56bae9;
    --vgchat-secondary: #4a64d5;
    --vgchat-gradient: linear-gradient(135deg, var(--vgchat-primary) 0%, var(--vgchat-secondary) 100%);
    --vgchat-shadow: rgba(86, 186, 233, 0.4);
    --vgchat-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --vgchat-text: #28303d;
    --vgchat-text-light: #6b7280;
    --vgchat-bg: #ffffff;
    --vgchat-bg-chat: #fafbfc;
    --vgchat-border: rgba(0, 0, 0, 0.06);
    --vgchat-radius: 20px;
    --vgchat-radius-sm: 10px;
    --vgchat-radius-msg: 16px;
}

/* ===== UTILITIES ===== */
/* Use this class to hide elements. ID selectors used for the chat panes so
   it wins over the more specific `.vgchat-registration { display:flex !important }`
   rule defined later in the file (CSS specificity tiebreak). */
.konvai-hidden,
#vgchatRegistration.konvai-hidden,
#vgchatMessages.konvai-hidden,
#vgchatInputContainer.konvai-hidden {
    display: none !important;
}

/* ===== TOGGLE BUTTON ===== */
.vgchat-toggle {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 64px !important;
    height: 64px !important;
    background: var(--vgchat-gradient) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 28px !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px var(--vgchat-shadow) !important;
    z-index: 999998 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--vgchat-font) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.vgchat-toggle:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 12px 32px var(--vgchat-shadow) !important;
}
.vgchat-toggle.vgchat-left { right: auto !important; left: 30px !important; }
.vgchat-toggle-close { display: none !important; font-size: 22px !important; }
.vgchat-toggle.active .vgchat-toggle-icon { display: none !important; }
.vgchat-toggle.active .vgchat-toggle-close { display: flex !important; }

/* Notification badge (unread) */
.vgchat-toggle .vgchat-toggle-badge {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    background: #e53935 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #fff !important;
}
.vgchat-toggle .vgchat-toggle-badge.show { display: flex !important; }

/* ===== WELCOME BUBBLE ===== */
.vgchat-welcome-bubble {
    position: fixed !important;
    bottom: 110px !important;
    right: 30px !important;
    max-width: 280px !important;
    background: var(--vgchat-bg) !important;
    border-radius: var(--vgchat-radius-msg) !important;
    padding: 16px 18px !important;
    box-shadow: 0 8px 24px rgba(73, 104, 126, 0.2), 0 0 0 1px rgba(73, 104, 126, 0.1) !important;
    z-index: 999997 !important;
    font-family: var(--vgchat-font) !important;
    cursor: pointer !important;
    animation: vgchat-bubble-in 0.4s ease-out !important;
}
.vgchat-welcome-bubble.vgchat-left { right: auto !important; left: 30px !important; }
.vgchat-welcome-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    aspect-ratio: 1 / 1 !important;
    background: #f0f2f5 !important;
    border: none !important;
    border-radius: 50% !important;
    color: var(--vgchat-text-light) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease !important;
}
.vgchat-welcome-close:hover {
    background: #e4e7ec !important;
}
.vgchat-welcome-message {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--vgchat-text) !important;
    padding-right: 15px !important;
}
.vgchat-welcome-arrow {
    position: absolute !important;
    bottom: -8px !important;
    right: 32px !important;
    width: 16px !important;
    height: 16px !important;
    background: var(--vgchat-bg) !important;
    transform: rotate(45deg) !important;
    box-shadow: 4px 4px 8px rgba(73, 104, 126, 0.08) !important;
}

@keyframes vgchat-bubble-in {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== WIDGET ===== */
.vgchat-widget {
    position: fixed !important;
    bottom: 110px !important;
    right: 30px !important;
    width: 400px !important;
    height: 640px !important;
    max-height: calc(100vh - 140px) !important;
    background: var(--vgchat-bg) !important;
    border-radius: var(--vgchat-radius) !important;
    box-shadow: 0 16px 24px rgba(73, 104, 126, 0.16), 0 0 0 1px rgba(73, 104, 126, 0.08) !important;
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 999999 !important;
    font-family: var(--vgchat-font) !important;
    animation: vgchat-widget-in 0.3s ease-out !important;
}
.vgchat-widget.active { display: flex !important; }
.vgchat-widget.vgchat-left { right: auto !important; left: 30px !important; }

@keyframes vgchat-widget-in {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Body wrapper holds either the registration screen OR (messages + input). It owns the available vertical space. */
.vgchat-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important; /* allow inner scroll containers to shrink */
    overflow: hidden !important;
}

/* ===== HEADER ===== */
.vgchat-header {
    background: var(--vgchat-gradient) !important;
    padding: 20px 22px !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
}
.vgchat-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.vgchat-avatar {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
}
.vgchat-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}
.vgchat-avatar-letter { color: #fff !important; }
.vgchat-status-dot {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
}
.vgchat-status-dot.online { background: #22c55e !important; }
.vgchat-status-dot.offline { background: #9ca3af !important; }

.vgchat-header-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 0 2px !important;
    color: #fff !important;
}
.vgchat-header-subtitle {
    font-size: 11px !important;
    opacity: 0.95 !important;
    margin: 0 !important;
    color: #fff !important;
}
.vgchat-close-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    aspect-ratio: 1 / 1 !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    color: #fff !important;
    cursor: pointer !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}
.vgchat-close-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05) !important;
}

/* Header restart button — same circular size as close button, sits to its left */
.vgchat-restart-icon-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    aspect-ratio: 1 / 1 !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    color: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 4px 0 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    position: relative !important;
}
.vgchat-restart-icon-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05) !important;
}
.vgchat-restart-icon-btn svg {
    display: block !important;
    transition: transform 0.4s ease !important;
}
.vgchat-restart-icon-btn:hover svg {
    transform: rotate(-180deg) !important;
}

/* Tooltip on hover — explains what the button does */
.vgchat-restart-icon-btn::after {
    content: attr(data-tip) !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    background: rgba(0, 0, 0, 0.85) !important;
    color: #fff !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-4px) !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s !important;
    z-index: 10 !important;
}
.vgchat-restart-icon-btn:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* ===== EMPTY STATE (welcome message takes full chat height before first user message) =====
   When the messages area only contains the bot's welcome (no user messages yet), we center it
   vertically and scale it up so it feels like a friendly greeting screen — same UX pattern as
   ChatGPT/Claude when they first open. JS removes the `vgchat-empty` class on the first send. */
.vgchat-messages.vgchat-empty {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 24px !important;
}
.vgchat-messages.vgchat-empty .vgchat-message {
    max-width: 100% !important;
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
}
.vgchat-messages.vgchat-empty .vgchat-message-content {
    background: transparent !important;
    color: var(--vgchat-text-primary, #1a1a1a) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    padding: 8px 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: center !important;
    max-width: 320px !important;
}
.vgchat-messages.vgchat-empty .vgchat-quick-replies {
    margin-top: 24px !important;
    justify-content: center !important;
}
.vgchat-messages.vgchat-empty .vgchat-message::before {
    content: '' !important;
    display: block !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto 16px !important;
    background: var(--vgchat-gradient, linear-gradient(135deg, #56bae9, #4a64d5)) !important;
    border-radius: 50% !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM7 9h2v2H7V9zm4 0h2v2h-2V9zm4 0h2v2h-2V9z'/></svg>") center / 28px no-repeat !important;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM7 9h2v2H7V9zm4 0h2v2h-2V9zm4 0h2v2h-2V9z'/></svg>") center / 28px no-repeat !important;
}

/* ===== REGISTRATION (FULL HEIGHT) ===== */
.vgchat-registration {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--vgchat-bg-chat) !important;
}
.vgchat-reg-greeting { margin-bottom: 12px !important; }
.vgchat-registration-form { margin-top: 8px !important; }
.vgchat-form-group { margin-bottom: 16px !important; }
.vgchat-form-group label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--vgchat-text) !important;
    margin-bottom: 6px !important;
}
.vgchat-form-group .required { color: #e53935 !important; }
.vgchat-form-input {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    border: 1px solid #e0e4e8 !important;
    border-radius: var(--vgchat-radius-sm) !important;
    background: var(--vgchat-bg) !important;
    color: var(--vgchat-text) !important;
    font-family: var(--vgchat-font) !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.2s !important;
}
.vgchat-form-input:focus { border-color: var(--vgchat-primary) !important; }
.vgchat-error {
    display: block !important;
    font-size: 12px !important;
    color: #e53935 !important;
    margin-top: 4px !important;
    min-height: 16px !important;
}
.vgchat-gdpr .vgchat-checkbox-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--vgchat-text-light) !important;
    font-weight: 400 !important;
    cursor: pointer !important;
}
.vgchat-checkbox {
    margin-top: 3px !important;
    flex-shrink: 0 !important;
    accent-color: var(--vgchat-primary) !important;
}
.vgchat-checkbox-text a {
    color: var(--vgchat-primary) !important;
    text-decoration: underline !important;
}

.vgchat-start-button {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: var(--vgchat-gradient) !important;
    border: none !important;
    border-radius: var(--vgchat-radius-sm) !important;
    cursor: pointer !important;
    font-family: var(--vgchat-font) !important;
    box-shadow: 0 4px 12px var(--vgchat-shadow) !important;
    margin-top: 10px !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}
.vgchat-start-button:hover { transform: translateY(-1px) !important; }
.vgchat-start-button:disabled { opacity: 0.6 !important; cursor: not-allowed !important; transform: none !important; }

/* ===== MESSAGES ===== */
.vgchat-messages {
    flex: 1 1 auto !important;
    padding: 22px !important;
    overflow-y: auto !important;
    background: var(--vgchat-bg-chat) !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}
.vgchat-message {
    margin-bottom: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    animation: vgchat-msg-in 0.3s ease-out !important;
}
.vgchat-message.vgchat-user { align-items: flex-end !important; }
.vgchat-message.vgchat-bot { align-items: flex-start !important; }
.vgchat-message-content {
    max-width: 85% !important;
    padding: 12px 16px !important;
    border-radius: var(--vgchat-radius-msg) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    word-wrap: break-word !important;
}
.vgchat-bot .vgchat-message-content {
    background: var(--vgchat-bg) !important;
    color: var(--vgchat-text) !important;
    border: 1px solid var(--vgchat-border) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    border-bottom-left-radius: 4px !important;
}
.vgchat-user .vgchat-message-content {
    background: var(--vgchat-gradient) !important;
    color: #fff !important;
    border-bottom-right-radius: 4px !important;
}
.vgchat-message-content a {
    color: var(--vgchat-primary) !important;
    text-decoration: underline !important;
}
.vgchat-user .vgchat-message-content a {
    color: #fff !important;
}

/* Message rating */
.vgchat-rating {
    display: flex !important;
    gap: 6px !important;
    margin-top: 6px !important;
    padding-left: 4px !important;
}
.vgchat-rating-btn {
    background: transparent !important;
    border: 1px solid var(--vgchat-border) !important;
    border-radius: 12px !important;
    padding: 3px 8px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    line-height: 1 !important;
    color: var(--vgchat-text-light) !important;
    transition: all 0.2s !important;
}
.vgchat-rating-btn:hover { background: rgba(0,0,0,0.04) !important; transform: scale(1.05) !important; }
.vgchat-rating-btn.active { background: var(--vgchat-primary) !important; color: #fff !important; border-color: var(--vgchat-primary) !important; }
.vgchat-rating-btn.disabled { pointer-events: none !important; opacity: 0.7 !important; }

@keyframes vgchat-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Typing indicator */
.vgchat-typing .vgchat-message-content {
    display: flex !important;
    gap: 4px !important;
    padding: 16px 20px !important;
}
.vgchat-typing-dot {
    width: 8px !important;
    height: 8px !important;
    background: var(--vgchat-text-light) !important;
    border-radius: 50% !important;
    animation: vgchat-typing 1.4s infinite ease-in-out both !important;
}
.vgchat-typing-dot:nth-child(1) { animation-delay: -0.32s !important; }
.vgchat-typing-dot:nth-child(2) { animation-delay: -0.16s !important; }

@keyframes vgchat-typing {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* Quick reply chips */
.vgchat-quick-replies {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 6px !important;
    margin-bottom: 8px !important;
}
.vgchat-chip {
    background: var(--vgchat-bg) !important;
    border: 1.5px solid var(--vgchat-primary) !important;
    color: var(--vgchat-primary) !important;
    padding: 8px 14px !important;
    border-radius: 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: var(--vgchat-font) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: left !important;
}
.vgchat-chip:hover {
    background: var(--vgchat-primary) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px var(--vgchat-shadow) !important;
}
.vgchat-chip:active { transform: translateY(0) !important; }

/* ===== INPUT ===== */
.vgchat-input-container {
    padding: 14px 18px 16px !important;
    background: var(--vgchat-bg) !important;
    border-top: 1px solid var(--vgchat-border) !important;
    display: flex !important;
    gap: 10px !important;
    align-items: flex-end !important;
    flex-shrink: 0 !important;
}
.vgchat-input-wrapper {
    flex: 1 !important;
    position: relative !important;
    /* Wrapper clips anything (browser scroll arrows, resize handle) that
       would otherwise spill outside the rounded border */
    overflow: hidden !important;
    border-radius: 22px !important;
}
.vgchat-input {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 22px !important;
    outline: none !important;
    font-size: 14px !important;
    font-family: var(--vgchat-font) !important;
    color: var(--vgchat-text) !important;
    background: #f8f9fa !important;
    resize: none !important;
    min-height: 44px !important;
    max-height: 100px !important;
    line-height: 1.5 !important;
    height: 44px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s !important;
    /* Kill native UI quirks: scrollbar arrows, spin buttons, resize handle */
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0,0,0,0.18) transparent !important;
    display: block !important;
}
/* Hide the up/down scrollbar buttons that some browsers render outside the rounded corners */
.vgchat-input::-webkit-scrollbar { width: 6px !important; }
.vgchat-input::-webkit-scrollbar-button { display: none !important; height: 0 !important; width: 0 !important; }
.vgchat-input::-webkit-scrollbar-track { background: transparent !important; }
.vgchat-input::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18) !important;
    border-radius: 3px !important;
}
.vgchat-input::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28) !important; }
/* Firefox: kill the resize grabber */
.vgchat-input::-webkit-resizer { display: none !important; }
.vgchat-input:focus { border-color: var(--vgchat-primary) !important; }
.vgchat-send-button {
    width: 44px !important;
    height: 44px !important;
    background: var(--vgchat-gradient) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    cursor: pointer !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px var(--vgchat-shadow) !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s !important;
    padding: 0 !important;
}
.vgchat-send-button:hover { transform: scale(1.05) !important; }
.vgchat-send-button:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }

/* ===== POWERED BY ===== */
.vgchat-powered {
    text-align: center !important;
    padding: 6px !important;
    font-size: 10px !important;
    color: var(--vgchat-text-light) !important;
    background: var(--vgchat-bg) !important;
    border-top: 1px solid var(--vgchat-border) !important;
    flex-shrink: 0 !important;
}
.vgchat-powered a {
    color: var(--vgchat-text-light) !important;
    text-decoration: none !important;
}
.vgchat-powered a:hover { text-decoration: underline !important; }

/* ===== MOBILE ===== */
@media (max-width: 480px) {
    .vgchat-widget {
        width: 100% !important;
        height: 100% !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
    }
    .vgchat-welcome-bubble { max-width: calc(100% - 80px) !important; right: 15px !important; }
    .vgchat-toggle { bottom: 20px !important; right: 20px !important; }
    .vgchat-toggle.vgchat-left { left: 20px !important; }
}

/* ===== SCROLLBARS ===== */
.vgchat-messages::-webkit-scrollbar,
.vgchat-registration::-webkit-scrollbar { width: 6px; }
.vgchat-messages::-webkit-scrollbar-track,
.vgchat-registration::-webkit-scrollbar-track { background: transparent; }
.vgchat-messages::-webkit-scrollbar-thumb,
.vgchat-registration::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 3px; }
.vgchat-messages::-webkit-scrollbar-thumb:hover,
.vgchat-registration::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }

/* ===== MESSAGE LIMIT REACHED ===== */
.vgchat-limit-reached .vgchat-message-content {
    background: #fff5f3 !important;
    border: 1px solid #ffd9d2 !important;
    color: #161513 !important;
}
.vgchat-restart-btn {
    display: block !important;
    margin: 14px auto 0 !important;
    padding: 10px 22px !important;
    background: linear-gradient(135deg, #E94C34, #c93d28) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 22px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(233, 76, 52, 0.25) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.vgchat-restart-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(233, 76, 52, 0.35) !important;
}

/* ===== START BUTTON LOADING STATE ===== */
.vgchat-start-button.vgchat-loading {
    opacity: 0.7 !important;
    cursor: wait !important;
    position: relative !important;
}
.vgchat-start-button.vgchat-loading::after {
    content: '' !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: -7px !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: vgchat-spin 0.7s linear infinite !important;
}
@keyframes vgchat-spin { to { transform: rotate(360deg); } }

/* ===== BOTTOM TABS (Chat | Recent) ===== */
.vgchat-bottom-tabs {
    display: flex !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: var(--vgchat-bg, #fff) !important;
    flex-shrink: 0 !important;
}
.vgchat-tab {
    flex: 1 1 50% !important;
    background: transparent !important;
    border: none !important;
    padding: 11px 8px !important;
    cursor: pointer !important;
    color: var(--vgchat-text-light, #888) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    position: relative !important;
    transition: color 0.18s ease !important;
    line-height: 1 !important;
    border-radius: 0 !important;
}
.vgchat-tab:hover { color: var(--vgchat-text, #1a1a1a) !important; }
.vgchat-tab svg { width: 16px !important; height: 16px !important; }
.vgchat-tab-active {
    color: var(--vgchat-primary, #56bae9) !important;
}
.vgchat-tab-active::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 20% !important;
    right: 20% !important;
    height: 2px !important;
    background: var(--vgchat-gradient, linear-gradient(135deg, #56bae9, #4a64d5)) !important;
    border-radius: 0 0 2px 2px !important;
}

/* ===== RECENT PANEL ===== */
.vgchat-recent {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    background: var(--vgchat-bg-chat, #f7f8fa) !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
}
.vgchat-recent.konvai-hidden { display: none !important; }
.vgchat-recent-empty {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: var(--vgchat-text-light, #888) !important;
    padding: 40px 20px !important;
}
.vgchat-recent-empty .vgchat-recent-icon {
    font-size: 36px !important;
    margin-bottom: 12px !important;
    opacity: 0.6 !important;
}
.vgchat-recent-empty p {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 0 4px !important;
    color: var(--vgchat-text, #1a1a1a) !important;
}
.vgchat-recent-empty small {
    font-size: 12px !important;
    color: var(--vgchat-text-light, #888) !important;
}
.vgchat-recent-item {
    display: block !important;
    width: 100% !important;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    text-align: left !important;
    font-family: inherit !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}
.vgchat-recent-item:hover {
    border-color: var(--vgchat-primary, #56bae9) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-1px) !important;
}
.vgchat-recent-item-current {
    border-color: var(--vgchat-primary, #56bae9) !important;
    background: linear-gradient(135deg, rgba(86, 186, 233, 0.05), rgba(74, 100, 213, 0.05)) !important;
}
.vgchat-recent-item-snippet {
    font-size: 13px !important;
    color: var(--vgchat-text, #1a1a1a) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 6px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}
.vgchat-recent-item-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 11px !important;
    color: var(--vgchat-text-light, #888) !important;
}
.vgchat-recent-item-current-badge {
    display: inline-block !important;
    background: var(--vgchat-gradient, linear-gradient(135deg, #56bae9, #4a64d5)) !important;
    color: #fff !important;
    padding: 2px 8px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}
.vgchat-recent-msgcount {
    background: rgba(0, 0, 0, 0.05) !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

/* Loading state */
.vgchat-recent-loading {
    text-align: center;
    color: var(--vgchat-text-light, #888);
    padding: 40px;
    font-size: 13px;
}

/* ============================================================================
 * LOADING SPINNERS — used wherever the widget is waiting on the server
 * ========================================================================= */

/* Generic circular spinner (use as a small inline element) */
.vgchat-spinner {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
    border-top-color: var(--vgchat-primary, #56bae9) !important;
    border-radius: 50% !important;
    animation: vgchat-spin 0.7s linear infinite !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}
.vgchat-spinner-lg {
    width: 32px !important;
    height: 32px !important;
    border-width: 3px !important;
}
.vgchat-spinner-light {
    border-color: rgba(255, 255, 255, 0.25) !important;
    border-top-color: #fff !important;
}

/* Full-panel loader — covers the body area while waiting */
.vgchat-loader-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 14px !important;
    color: var(--vgchat-text-light, #888) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.vgchat-loader-overlay.konvai-hidden { display: none !important; }
.vgchat-loader-overlay .vgchat-spinner-lg { border-color: rgba(0, 0, 0, 0.08) !important; border-top-color: var(--vgchat-primary, #56bae9) !important; }

/* Body needs to be a positioning context for the overlay */
.vgchat-body { position: relative !important; }

/* Inline loader for recent panel */
.vgchat-recent-loading {
    text-align: center !important;
    color: var(--vgchat-text-light, #888) !important;
    padding: 50px 20px !important;
    font-size: 13px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Send-button loading state */
.vgchat-send-button.vgchat-sending {
    pointer-events: none !important;
    opacity: 0.85 !important;
}
.vgchat-send-button.vgchat-sending svg { display: none !important; }
.vgchat-send-button.vgchat-sending::before {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important; height: 16px !important;
    border: 2px solid rgba(255,255,255,0.35) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: vgchat-spin 0.7s linear infinite !important;
}

/* ============================================================================
 * RICH PRODUCT CARDS — used in WooCommerce product responses
 * Inspired by competitor analysis (PureThemes AI Chatbot pattern)
 * ========================================================================= */

.vgchat-product-card {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    margin: 4px 0 12px !important;
    display: flex !important;
    gap: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.vgchat-product-card + .vgchat-product-card { margin-top: 0 !important; }
.vgchat-product-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important;
}

.vgchat-product-img-link {
    flex-shrink: 0 !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #f5f5f5 !important;
    display: block !important;
}
.vgchat-product-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
}

.vgchat-product-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.vgchat-product-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
.vgchat-product-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--vgchat-text, #1a1a1a) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}
.vgchat-product-badge {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.vgchat-product-desc {
    font-size: 12px !important;
    color: var(--vgchat-text-light, #888) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.vgchat-product-meta {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.vgchat-product-price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--vgchat-text, #1a1a1a) !important;
}
.vgchat-product-price del {
    font-size: 12px !important;
    color: var(--vgchat-text-light, #888) !important;
    font-weight: 400 !important;
    margin-right: 4px !important;
}
.vgchat-product-stock {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
}
.vgchat-product-stock.in-stock {
    background: #dcfce7 !important;
    color: #15803d !important;
}
.vgchat-product-stock.out-of-stock {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

.vgchat-product-actions {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-top: 4px !important;
}
.vgchat-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 12px !important;
    border-radius: 18px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    border: 1.5px solid transparent !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    font-family: inherit !important;
    white-space: nowrap !important;
}
.vgchat-btn-primary {
    background: var(--vgchat-gradient, linear-gradient(135deg, #56bae9, #4a64d5)) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.vgchat-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    color: #fff !important;
}
.vgchat-btn-secondary {
    background: #f5f5f5 !important;
    color: var(--vgchat-text, #1a1a1a) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
.vgchat-btn-secondary:hover {
    background: #ebebeb !important;
    color: var(--vgchat-text, #1a1a1a) !important;
}
.vgchat-btn svg { display: block !important; }
.vgchat-btn-success {
    background: #16a34a !important;
    color: #fff !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* When a card lives inside a bot message bubble, strip the bubble's background
 * so the card has its own canvas. */
.vgchat-message-content > .vgchat-product-card:first-child:last-child {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.vgchat-message.vgchat-bot:has(.vgchat-product-card) .vgchat-message-content {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Mobile: stack image + info vertically below 360px wide */
@media (max-width: 380px) {
    .vgchat-product-card { flex-direction: column !important; }
    .vgchat-product-img-link { width: 100% !important; height: 140px !important; }
}

/* Mini cart confirmation toast */
.vgchat-cart-toast {
    margin: 8px 0 !important;
    padding: 10px 14px !important;
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    border-radius: 10px !important;
    color: #14532d !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.vgchat-cart-toast-actions { display: flex; gap: 6px; margin-left: auto; }
.vgchat-cart-toast-link {
    color: #14532d !important;
    text-decoration: underline !important;
    font-size: 12px !important;
}

/* ============================================================================
 * IMAGE ATTACHMENTS + VOICE RECORDING UI
 * ========================================================================= */

.vgchat-input-row {
    display: flex !important;
    gap: 8px !important;
    align-items: flex-end !important;
}

/* Paperclip (attach) + microphone buttons */
.vgchat-attach-btn,
.vgchat-mic-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    color: var(--vgchat-text-light, #888) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    margin-bottom: 3px !important;
    flex-shrink: 0 !important;
}
.vgchat-attach-btn:hover,
.vgchat-mic-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--vgchat-primary, #56bae9) !important;
}
.vgchat-mic-btn.recording {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    animation: vgchat-pulse 1.2s ease-in-out infinite !important;
}
@keyframes vgchat-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

/* Image preview chips above the input */
.vgchat-attachments-preview {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 12px 0 !important;
    margin: 0 !important;
}
.vgchat-attachments-preview.konvai-hidden { display: none !important; }
.vgchat-attachment-chip {
    position: relative !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: #f5f5f5 !important;
}
.vgchat-attachment-chip img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.vgchat-attachment-remove {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    width: 18px !important;
    height: 18px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 12px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.vgchat-attachment-remove:hover { background: rgba(0, 0, 0, 0.9) !important; }

/* Image inside a sent user message bubble */
.vgchat-message-image {
    display: block !important;
    max-width: 220px !important;
    max-height: 220px !important;
    border-radius: 10px !important;
    margin: 0 0 6px !important;
    object-fit: cover !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Voice recording bar (replaces the input row while recording) */
.vgchat-voice-recording {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
    border: 1px solid #fca5a5 !important;
    border-radius: 14px !important;
    margin: 0 0 8px !important;
}
.vgchat-voice-recording.konvai-hidden { display: none !important; }
.vgchat-voice-pulse {
    width: 12px !important;
    height: 12px !important;
    background: #dc2626 !important;
    border-radius: 50% !important;
    animation: vgchat-pulse 1.2s ease-in-out infinite !important;
    flex-shrink: 0 !important;
}
.vgchat-voice-timer {
    font-family: monospace !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #991b1b !important;
    flex: 1 !important;
}
.vgchat-voice-cancel,
.vgchat-voice-send {
    border: none !important;
    border-radius: 18px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: inherit !important;
}
.vgchat-voice-cancel {
    background: #fff !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
    width: 30px !important;
    padding: 6px 8px !important;
}
.vgchat-voice-send {
    background: #dc2626 !important;
    color: #fff !important;
}
.vgchat-voice-send:hover { background: #b91c1c !important; }

/* AI explanation that follows a product card */
.vgchat-product-followup {
    margin-top: 8px !important;
    padding: 10px 12px !important;
    background: rgba(0, 0, 0, 0.02) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--vgchat-text, #1a1a1a) !important;
}
.vgchat-product-followup p:last-child { margin-bottom: 0 !important; }

/* ============================================================================
 * HANDOFF BUTTON IN HEADER (clone of restart button)
 * ========================================================================= */
.vgchat-handoff-icon-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    aspect-ratio: 1 / 1 !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    color: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 4px 0 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    position: relative !important;
}
.vgchat-handoff-icon-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05) !important;
}
.vgchat-handoff-icon-btn::after {
    content: attr(data-tip) !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    background: rgba(0, 0, 0, 0.85) !important;
    color: #fff !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-4px) !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s !important;
    z-index: 10 !important;
}
.vgchat-handoff-icon-btn:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Locked chat state — input disabled after handoff success */
.vgchat-chat-locked .vgchat-input,
.vgchat-chat-locked .vgchat-send-button,
.vgchat-chat-locked .vgchat-attach-btn,
.vgchat-chat-locked .vgchat-mic-btn {
    pointer-events: none !important;
    opacity: 0.5 !important;
}
/* Locked banner now lives inside the messages area, so it scrolls with
 * the chat and is naturally hidden when the user switches to the Recent
 * tab (Recent panel is a sibling that takes over the visible area). */
.vgchat-locked-banner {
    margin: 12px 0 4px !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
    border: 1px solid #86efac !important;
    color: #14532d !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.vgchat-locked-banner::before {
    content: '✓ ' !important;
    color: #16a34a !important;
    font-weight: 800 !important;
}

/* ============================================================================
 * HIGH-SPECIFICITY HIDE RULES — placed at end of file deliberately so they
 * always beat any earlier `display: flex !important` declarations on the
 * same elements. Without these, the mic button stays visible even when
 * konvai-hidden is applied (CSS cascade tie → later rule wins).
 * ========================================================================= */
.vgchat-mic-btn.konvai-hidden,
.vgchat-attach-btn.konvai-hidden,
.vgchat-handoff-icon-btn.konvai-hidden,
.vgchat-restart-icon-btn.konvai-hidden,
button.vgchat-mic-btn.konvai-hidden,
button.vgchat-attach-btn.konvai-hidden {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* ============================================================================
 * HEADER BUTTONS — perfect circles + tooltips that don't clip
 * Both restart and handoff buttons need:
 *   • truly square (no flex/grid stretching)
 *   • tooltip that escapes the header container
 * ========================================================================= */

/* Force perfect circle on all 3 header circular buttons */
.vgchat-restart-icon-btn,
.vgchat-handoff-icon-btn,
.vgchat-close-btn {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
}

/* Make sure the parent containers don't clip tooltips */
.vgchat-header,
.vgchat-header-actions { overflow: visible !important; }

/* Tooltip — positioned so it stays inside the widget bounds.
 * Old version used `right: 0` which made the tooltip extend leftward from
 * the button's right edge — fine for the close button (rightmost), but
 * for the handoff button (leftmost of the three) the text "TALK TO A HUMAN"
 * was wider than the available space and got clipped by the widget edge.
 * New approach: anchor tooltip to the button's right edge but with a
 * smaller offset, and clamp its width.
 */
.vgchat-restart-icon-btn::after,
.vgchat-handoff-icon-btn::after {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    /* Center the tooltip under the button instead of right-aligning it */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(-4px) !important;
    background: rgba(20, 20, 20, 0.92) !important;
    color: #fff !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s !important;
    z-index: 100 !important;
    /* Limit width so very long translations wrap or get ellipsis instead
     * of overflowing the widget. Most translated tooltips fit in 200px. */
    max-width: 220px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.vgchat-restart-icon-btn:hover::after,
.vgchat-handoff-icon-btn:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Add a small triangular indicator above each tooltip pointing at the button */
.vgchat-restart-icon-btn::before,
.vgchat-handoff-icon-btn::before {
    content: '' !important;
    position: absolute !important;
    top: calc(100% + 3px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-bottom: 5px solid rgba(20, 20, 20, 0.92) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.15s ease, visibility 0.15s !important;
    z-index: 100 !important;
    pointer-events: none !important;
}
.vgchat-restart-icon-btn:hover::before,
.vgchat-handoff-icon-btn:hover::before {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================================================
 * TOOLTIP Z-INDEX FIX (v1.0.10)
 * Bumps tooltips above all chat content. Chat-window ancestors can have
 * overflow:hidden for rounded corners — that clips ::after pseudo-elements
 * regardless of z-index. So in addition to the high z-index, the JS
 * (chatbot-frontend.js) shows tooltips as a separate position:fixed element
 * outside the chat window when needed.
 * ========================================================================= */
.vgchat-restart-icon-btn::after,
.vgchat-handoff-icon-btn::after,
.vgchat-restart-icon-btn::before,
.vgchat-handoff-icon-btn::before {
    z-index: 999999 !important;
}
/* Make sure the chat body / window don't clip header tooltips */
.vgchat-chat-window,
.vgchat-header { overflow: visible !important; }
/* But the body (containing scrollable messages) still needs overflow control */
.vgchat-body { overflow: hidden !important; }
.vgchat-messages { overflow-y: auto !important; }

/* ============================================================================
 * INPUT WIDTH FIX (v1.0.10)
 * When the mic button is hidden (server-side conditional), the input
 * wasn't expanding to fill the freed-up space. Default flex: 1 with
 * implicit flex-basis: auto can cause inputs to keep their intrinsic
 * width. Force a zero basis so the wrapper genuinely consumes all
 * remaining row space.
 * ========================================================================= */
.vgchat-input-row > .vgchat-input-wrapper {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}
.vgchat-input-row .vgchat-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================================================
 * INPUT WIDTH FIX v2 (v1.0.11)
 * Earlier fix used flex: 1 1 0% but the wrapper still needed an explicit
 * width: auto to override its inline default. This version locks the row
 * to flex layout and grants the wrapper everything that's left over.
 * ========================================================================= */
.vgchat-input-row {
    display: flex !important;
    align-items: flex-end !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.vgchat-input-row > .vgchat-attach-btn,
.vgchat-input-row > .vgchat-mic-btn,
.vgchat-input-row > .vgchat-send-button {
    flex: 0 0 auto !important;
}
.vgchat-input-row > .vgchat-input-wrapper {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}
.vgchat-input-row .vgchat-input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* ============================================================================
 * COLOR SCHEME — Light / Dark / Auto (v1.0.12)
 * Defines a dark-mode token palette and applies it whenever:
 *   • admin chose "dark"  → .vgchat-scheme-dark  (forced dark)
 *   • admin chose "auto" + OS prefers dark      → media query takes over
 * Light mode is the default — no overrides needed.
 * ========================================================================= */

/* Shared dark-mode tokens */
.vgchat-scheme-dark,
.vgchat-scheme-dark .vgchat-chat-window,
.vgchat-scheme-dark .vgchat-body {
    --vgchat-bg: #1a1d24 !important;
    --vgchat-bg-chat: #14161c !important;
    --vgchat-text: #e8e8eb !important;
    --vgchat-text-light: #9ca0a8 !important;
}
.vgchat-scheme-dark .vgchat-chat-window {
    background: #1a1d24 !important;
    color: #e8e8eb !important;
}
.vgchat-scheme-dark .vgchat-body,
.vgchat-scheme-dark .vgchat-messages,
.vgchat-scheme-dark .vgchat-recent {
    background: #14161c !important;
    color: #e8e8eb !important;
}
.vgchat-scheme-dark .vgchat-bot .vgchat-message-content {
    background: #242830 !important;
    color: #e8e8eb !important;
    border-color: rgba(255,255,255,0.06) !important;
}
.vgchat-scheme-dark .vgchat-input,
.vgchat-scheme-dark .vgchat-registration input,
.vgchat-scheme-dark .vgchat-registration textarea {
    background: #242830 !important;
    color: #e8e8eb !important;
    border-color: rgba(255,255,255,0.1) !important;
}
.vgchat-scheme-dark .vgchat-input::placeholder { color: #6b7079 !important; }
.vgchat-scheme-dark .vgchat-attach-btn,
.vgchat-scheme-dark .vgchat-mic-btn { color: #9ca0a8 !important; }
.vgchat-scheme-dark .vgchat-attach-btn:hover,
.vgchat-scheme-dark .vgchat-mic-btn:hover { background: rgba(255,255,255,0.06) !important; }
.vgchat-scheme-dark .vgchat-bottom-tabs {
    background: #1a1d24 !important;
    border-top-color: rgba(255,255,255,0.06) !important;
}
.vgchat-scheme-dark .vgchat-tab { color: #9ca0a8 !important; }
.vgchat-scheme-dark .vgchat-tab:hover { color: #e8e8eb !important; }
.vgchat-scheme-dark .vgchat-recent-empty p { color: #e8e8eb !important; }
.vgchat-scheme-dark .vgchat-recent-empty small { color: #9ca0a8 !important; }
.vgchat-scheme-dark .vgchat-recent-item {
    background: #242830 !important;
    border-color: rgba(255,255,255,0.06) !important;
}
.vgchat-scheme-dark .vgchat-recent-item:hover { border-color: var(--vgchat-primary, #56bae9) !important; }
.vgchat-scheme-dark .vgchat-recent-item-snippet { color: #e8e8eb !important; }
.vgchat-scheme-dark .vgchat-recent-item-meta,
.vgchat-scheme-dark .vgchat-recent-msgcount { color: #9ca0a8 !important; }
.vgchat-scheme-dark .vgchat-recent-msgcount { background: rgba(255,255,255,0.06) !important; }
.vgchat-scheme-dark .vgchat-product-card {
    background: #242830 !important;
    border-color: rgba(255,255,255,0.06) !important;
}
.vgchat-scheme-dark .vgchat-product-title,
.vgchat-scheme-dark .vgchat-product-price { color: #e8e8eb !important; }
.vgchat-scheme-dark .vgchat-product-desc { color: #9ca0a8 !important; }
.vgchat-scheme-dark .vgchat-product-img-link { background: #14161c !important; }
.vgchat-scheme-dark .vgchat-btn-secondary {
    background: #2f343d !important;
    color: #e8e8eb !important;
    border-color: rgba(255,255,255,0.06) !important;
}
.vgchat-scheme-dark .vgchat-btn-secondary:hover { background: #3a4049 !important; color: #e8e8eb !important; }
.vgchat-scheme-dark .vgchat-product-followup { background: rgba(255,255,255,0.04) !important; }
.vgchat-scheme-dark .vgchat-loader-overlay {
    background: rgba(20, 22, 28, 0.7) !important;
    color: #9ca0a8 !important;
}
.vgchat-scheme-dark .vgchat-attachment-chip { background: #2f343d !important; border-color: rgba(255,255,255,0.06) !important; }
.vgchat-scheme-dark .vgchat-quick-reply {
    background: #242830 !important;
    color: #e8e8eb !important;
    border-color: rgba(255,255,255,0.1) !important;
}
.vgchat-scheme-dark .vgchat-quick-reply:hover { border-color: var(--vgchat-primary, #56bae9) !important; }

/* Auto mode — applies dark only when the OS prefers dark */
@media (prefers-color-scheme: dark) {
    .vgchat-scheme-auto.vgchat-widget,
    .vgchat-scheme-auto .vgchat-chat-window,
    .vgchat-scheme-auto .vgchat-body {
        --vgchat-bg: #1a1d24 !important;
        --vgchat-bg-chat: #14161c !important;
        --vgchat-text: #e8e8eb !important;
        --vgchat-text-light: #9ca0a8 !important;
    }
    .vgchat-scheme-auto .vgchat-chat-window { background: #1a1d24 !important; color: #e8e8eb !important; }
    .vgchat-scheme-auto .vgchat-body,
    .vgchat-scheme-auto .vgchat-messages,
    .vgchat-scheme-auto .vgchat-recent { background: #14161c !important; color: #e8e8eb !important; }
    .vgchat-scheme-auto .vgchat-bot .vgchat-message-content {
        background: #242830 !important; color: #e8e8eb !important;
        border-color: rgba(255,255,255,0.06) !important;
    }
    .vgchat-scheme-auto .vgchat-input,
    .vgchat-scheme-auto .vgchat-registration input,
    .vgchat-scheme-auto .vgchat-registration textarea {
        background: #242830 !important; color: #e8e8eb !important;
        border-color: rgba(255,255,255,0.1) !important;
    }
    .vgchat-scheme-auto .vgchat-input::placeholder { color: #6b7079 !important; }
    .vgchat-scheme-auto .vgchat-bottom-tabs {
        background: #1a1d24 !important;
        border-top-color: rgba(255,255,255,0.06) !important;
    }
    .vgchat-scheme-auto .vgchat-tab { color: #9ca0a8 !important; }
    .vgchat-scheme-auto .vgchat-recent-item {
        background: #242830 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }
    .vgchat-scheme-auto .vgchat-recent-item-snippet { color: #e8e8eb !important; }
    .vgchat-scheme-auto .vgchat-product-card {
        background: #242830 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }
    .vgchat-scheme-auto .vgchat-product-title { color: #e8e8eb !important; }
}

/* ============================================================================
 * HEADER CART ICON (v1.0.12)
 * Same circular sizing as restart/handoff/close — sits in the header so the
 * visitor can jump to their cart at any time. The badge shows item count.
 * ========================================================================= */
.vgchat-cart-icon-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex: 0 0 30px !important;
    aspect-ratio: 1 / 1 !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    color: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 4px 0 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    position: relative !important;
}
.vgchat-cart-icon-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05) !important;
    color: #fff !important;
}
.vgchat-cart-badge {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    background: #fff !important;
    color: var(--vgchat-primary, #56bae9) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 3px 5px !important;
    border-radius: 8px !important;
    min-width: 16px !important;
    text-align: center !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}
/* Tooltip on cart button (matches handoff/restart) */
.vgchat-cart-icon-btn::after {
    content: attr(data-tip) !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-4px) !important;
    background: rgba(20, 20, 20, 0.92) !important;
    color: #fff !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s !important;
    z-index: 999999 !important;
}
.vgchat-cart-icon-btn:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* No-image product card variant — wider info area, no thumbnail slot */
.vgchat-product-card-noimg .vgchat-product-img-link { display: none !important; }
.vgchat-product-card-noimg .vgchat-product-info { padding-left: 4px !important; }

/* ============================================================================
 * STYLE REFRESH (v1.0.12) — softer shadows, larger radii, better spacing
 * Inspired by the reference plugin's polished aesthetic, but using the
 * VGDev brand palette (red #E94C34 + ink #161513) so it stays "ours".
 * ========================================================================= */

/* Round the chat window more aggressively for a softer feel */
.vgchat-chat-window {
    border-radius: 18px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* Bot message bubbles — slightly larger radius, lighter border */
.vgchat-bot .vgchat-message-content {
    border-radius: 16px 16px 16px 4px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.vgchat-user .vgchat-message-content {
    border-radius: 16px 16px 4px 16px !important;
}

/* Quick reply chips — softer pill shape */
.vgchat-quick-reply {
    border-radius: 20px !important;
    padding: 8px 14px !important;
    font-weight: 500 !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.vgchat-quick-reply:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Input field — softer, more rounded */
.vgchat-input-wrapper {
    border-radius: 24px !important;
}
.vgchat-input {
    padding: 11px 16px !important;
}

/* Send button — slightly larger for better thumb-tap target */
.vgchat-send-button {
    width: 38px !important;
    height: 38px !important;
}

/* Product cards — more breathing room */
.vgchat-product-card {
    border-radius: 14px !important;
    padding: 10px !important;
}
.vgchat-product-img-link {
    border-radius: 10px !important;
}

/* Bottom tabs — cleaner separator */
.vgchat-bottom-tabs {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04) !important;
}
.vgchat-tab {
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}

/* Recent items — more polished */
.vgchat-recent-item {
    border-radius: 12px !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.vgchat-recent-item:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* ============================================================================
 * VISUAL REFRESH v2 (v1.0.13) — minimal clean aesthetic
 *
 * Direction: take the reference plugin's professional, calm look (light-gray
 * messages background, white assistant bubbles with subtle shadow, white
 * header with bottom border, brand colour as ACCENT only) but keep the
 * VGDev brand palette.
 *
 * Wrapped in :where() to keep specificity at zero so the existing tons of
 * !important rules higher up still win where they should — these are
 * lower-specificity refinements.
 * ========================================================================= */

/* === Chat container — flat panel instead of heavy floating card === */
.vgchat-chat-window {
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.10) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* === Header — clean white bar instead of colour gradient === */
.vgchat-header {
    background: #ffffff !important;
    color: #333333 !important;
    border-bottom: 1px solid #e5e5e5 !important;
    padding: 14px 18px !important;
}
.vgchat-header-title,
.vgchat-header-info h3 {
    color: #1a1a1a !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
.vgchat-header-subtitle,
.vgchat-header-info span {
    color: #777 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}
.vgchat-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--vgchat-primary, #E94C34) !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}
.vgchat-status-dot {
    background: #22c55e !important;
    border: 2px solid #fff !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
}

/* Header circular buttons — neutral on white instead of translucent on gradient */
.vgchat-restart-icon-btn,
.vgchat-handoff-icon-btn,
.vgchat-cart-icon-btn,
.vgchat-close-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #555 !important;
}
.vgchat-restart-icon-btn:hover,
.vgchat-handoff-icon-btn:hover,
.vgchat-cart-icon-btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #222 !important;
}
.vgchat-cart-badge {
    background: var(--vgchat-primary, #E94C34) !important;
    color: #fff !important;
}

/* === Messages background — light gray (matches reference) === */
.vgchat-body,
.vgchat-messages,
.vgchat-recent {
    background: #f8f8f8 !important;
}

/* === Bot/Assistant bubbles — white with subtle shadow === */
.vgchat-bot .vgchat-message-content,
.vgchat-message-bot .vgchat-message-content {
    background: #ffffff !important;
    color: #444444 !important;
    border: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
}

/* === User bubbles — brand-tinted background with brand text === */
.vgchat-user .vgchat-message-content,
.vgchat-message-user .vgchat-message-content {
    background: rgba(233, 76, 52, 0.10) !important;
    color: var(--vgchat-primary, #E94C34) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
}

/* Strong + links inside bot messages */
.vgchat-bot .vgchat-message-content strong { color: #222 !important; font-weight: 600 !important; }
.vgchat-bot .vgchat-message-content a {
    color: var(--vgchat-primary, #E94C34) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}
.vgchat-bot .vgchat-message-content a:hover { color: #c93b25 !important; }

/* === Quick reply chips — clean outlined style === */
.vgchat-quick-reply {
    background: #ffffff !important;
    color: #333 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
}
.vgchat-quick-reply:hover {
    border-color: var(--vgchat-primary, #E94C34) !important;
    color: var(--vgchat-primary, #E94C34) !important;
    transform: none !important;
    box-shadow: 0 2px 6px rgba(233, 76, 52, 0.10) !important;
}

/* === Input area — clean separated section === */
#vgchatInputContainer,
.vgchat-input-container {
    background: #ffffff !important;
    border-top: 1px solid #e5e5e5 !important;
    padding: 12px 14px !important;
}
.vgchat-input-wrapper {
    background: #f6f6f6 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 22px !important;
    transition: border-color 0.15s ease !important;
}
.vgchat-input-wrapper:focus-within {
    border-color: var(--vgchat-primary, #E94C34) !important;
    background: #ffffff !important;
}
.vgchat-input {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
}
.vgchat-input::placeholder { color: #999 !important; }

/* === Send button — clean square instead of gradient circle === */
.vgchat-send-button {
    background: var(--vgchat-primary, #E94C34) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    box-shadow: 0 2px 6px rgba(233, 76, 52, 0.25) !important;
    transition: all 0.15s ease !important;
}
.vgchat-send-button:hover {
    background: #c93b25 !important;
    transform: scale(1.04) !important;
}
.vgchat-send-button:disabled {
    background: #cccccc !important;
    box-shadow: none !important;
}

/* Attach + mic — neutral icons, brand on hover */
.vgchat-attach-btn,
.vgchat-mic-btn {
    background: transparent !important;
    color: #777 !important;
    border: none !important;
}
.vgchat-attach-btn:hover,
.vgchat-mic-btn:hover {
    color: var(--vgchat-primary, #E94C34) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

/* === Bottom tabs — flat with brand-coloured active state === */
.vgchat-bottom-tabs {
    background: #ffffff !important;
    border-top: 1px solid #e5e5e5 !important;
    padding: 8px !important;
}
.vgchat-tab {
    color: #777 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    transition: all 0.12s ease !important;
}
.vgchat-tab:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #333 !important;
}
.vgchat-tab.active,
.vgchat-tab[aria-selected="true"] {
    color: var(--vgchat-primary, #E94C34) !important;
    background: rgba(233, 76, 52, 0.08) !important;
    border: none !important;
}

/* === Recent items — flat cards on the gray bg === */
.vgchat-recent-item {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    padding: 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.15s ease !important;
}
.vgchat-recent-item:hover {
    border-color: var(--vgchat-primary, #E94C34) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}
.vgchat-recent-item-snippet { color: #333 !important; font-weight: 500 !important; }
.vgchat-recent-item-meta { color: #999 !important; font-size: 11px !important; }
.vgchat-recent-msgcount {
    background: #f0f0f0 !important;
    color: #666 !important;
    border-radius: 12px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
}

/* === Product card — match the clean aesthetic === */
.vgchat-product-card {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
}
.vgchat-product-card:hover {
    border-color: var(--vgchat-primary, #E94C34) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.vgchat-product-title { color: #1a1a1a !important; font-weight: 600 !important; font-size: 14px !important; }
.vgchat-product-desc { color: #666 !important; font-size: 13px !important; line-height: 1.5 !important; }
.vgchat-product-price {
    color: var(--vgchat-primary, #E94C34) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}
.vgchat-product-stock.in-stock { color: #16a34a !important; }
.vgchat-product-stock.out-of-stock { color: #dc2626 !important; }
.vgchat-product-badge {
    background: var(--vgchat-primary, #E94C34) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}
.vgchat-btn-primary {
    background: var(--vgchat-primary, #E94C34) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 14px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    box-shadow: 0 1px 3px rgba(233, 76, 52, 0.20) !important;
    transition: all 0.15s ease !important;
}
.vgchat-btn-primary:hover {
    background: #c93b25 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(233, 76, 52, 0.28) !important;
}
.vgchat-btn-secondary {
    background: #f6f6f6 !important;
    color: #444 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;
    padding: 8px 14px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
.vgchat-btn-secondary:hover { background: #ececec !important; color: #1a1a1a !important; }

/* === Toggle button (the floating circle) — keep brand-coloured === */
.vgchat-toggle {
    background: var(--vgchat-primary, #E94C34) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(233, 76, 52, 0.4) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.vgchat-toggle:hover {
    transform: scale(1.06) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.20) !important;
}

/* === Welcome bubble — clean white with arrow === */
.vgchat-welcome-bubble {
    background: #ffffff !important;
    color: #555 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10) !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* === Locked banner — softer green tone === */
.vgchat-locked-banner {
    background: #ecfdf5 !important;
    border: 1px solid #86efac !important;
    color: #14532d !important;
    border-radius: 10px !important;
    margin: 12px 0 4px !important;
}

/* === Powered-by footer — small + muted === */
.vgchat-powered-by,
.vgchat-bottom-credit {
    color: #aaa !important;
    font-size: 11px !important;
}