* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root,
:host {
    --primary-color: #2563eb;
    --secondary-color: #1e40af;
    --bg-color: #f8fafc;
    --surface-color: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;
    --bot-message-bg: #f1f5f9;
    --user-message-bg: #2563eb;
    --user-message-text: #ffffff;
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    line-height: 1.6;
    color: var(--text-primary);
}

/* Standalone only (index.html): the mount point generates no box of its own, so
   .chat-container stays the direct flex child of body and the page lays out exactly
   as it did before the widget refactor. Matches nothing inside a shadow root. */
#afw-chatbot {
    display: contents;
}

/* Embedded only (widget.js): styles the shadow host. Matches nothing on the
   standalone page. The host page can override any of this by styling the mount div,
   which is the intended way to size the widget into a WordPress layout. */
:host {
    display: block;
    height: 700px;
    max-height: 90vh;
    /* Remove this line to inherit the host theme's font instead. */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
}

/* Embedded, the host element owns the height rather than the viewport. */
:host .chat-container {
    height: 100%;
    max-height: none;
}

.chat-container {
    width: 100%;
    max-width: 900px;
    height: 90vh;
    max-height: 800px;
    background: var(--surface-color);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-header {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: white;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
}

.header-content h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.subtitle {
    font-size: 14px;
    opacity: 0.9;
}

.reset-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.reset-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: var(--bg-color);
}

.message {
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-content {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 12px;
    line-height: 1.5;
}

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

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

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

.message-content p {
    margin-bottom: 8px;
}

.message-content p:last-child {
    margin-bottom: 0;
}

.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: var(--bot-message-bg);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    width: fit-content;
    margin: 0 24px 20px 24px;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

.chat-input-container {
    background: var(--surface-color);
    border-top: 1px solid var(--border-color);
    padding: 16px 24px;
}

.chat-input-form {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.chat-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    resize: none;
    max-height: 120px;
    transition: border-color 0.2s;
}

.chat-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.send-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.send-btn:hover:not(:disabled) {
    background: var(--secondary-color);
    transform: translateY(-1px);
}

.send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.disclaimer {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

/* Scrollbar styling */
.chat-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Responsive design */
@media (max-width: 768px) {
    body {
        padding: 0;
    }

    .chat-container {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .chat-header {
        padding: 16px;
    }

    .header-content h1 {
        font-size: 20px;
    }

    .subtitle {
        font-size: 13px;
    }

    .chat-messages {
        padding: 16px;
    }

    .message-content {
        max-width: 90%;
    }

    .chat-input-container {
        padding: 12px 16px;
    }
}

/* Links and buttons inside bot messages */
.bot-message .message-content a {
    color: var(--primary-color);
    text-decoration: underline;
}

.bot-message .message-content a:hover {
    color: var(--secondary-color);
}

.bot-message .message-content .chat-btn {
    display: inline-block;
    background: var(--primary-color);
    color: white !important;
    padding: 8px 18px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 14px;
    margin-top: 8px;
    transition: background 0.2s;
}

.bot-message .message-content .chat-btn:hover {
    background: var(--secondary-color);
}

/* Inline thinking dots — shown inside the bubble while schema extraction runs */
.inline-thinking {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    align-items: center;
}

.inline-thinking span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: typing 1.4s infinite;
}

.inline-thinking span:nth-child(2) { animation-delay: 0.2s; }
.inline-thinking span:nth-child(3) { animation-delay: 0.4s; }

/* Error message styling */
.error-message {
    background: #fee2e2;
    color: #991b1b;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    border-left: 4px solid #dc2626;
}

/* Beta test mode banner — only shown when the UI is loaded with ?prompt_key= */
.beta-banner {
    background: #b45309;
    color: #fff;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    flex-shrink: 0;
}