/*
 * Gnoppix Chat UI Styles
 * Extracted from the modern-chat-preview.html document.
 * This file contains all the CSS necessary for the chat interface layout and theming.
 */

/* Set a clean, centered background for the demo environment */
body {
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

:root {
    /* --- Colors (New Professional/Corporate HSL Theme) --- */
    --color-brand-primary: 210, 80%, 45%; /* Corporate Blue */
    --color-brand-hover: 210, 80%, 40%;
    --color-accent-user: 210, 10%, 40%; /* Dark Gray for user messages */
    --color-accent-bot-background: 210, 30%, 97%; /* Very Light Gray for bot messages */
    --color-text-dark: 210, 20%, 20%; /* Dark text */
    --color-light: 220, 29%, 99%; /* Base background */

    /* --- Mapped to base names for easy replacement in CSS rules --- */
    --color-primary: var(--color-brand-primary);
    --color-primary-hover: var(--color-brand-hover);
    --color-secondary: var(--color-accent-user); /* User message background */
    --color-dark: var(--color-text-dark); /* Header text/general text */
    --color-background-base: var(--color-light); 
    --color-background-surface: var(--color-accent-bot-background); 
    --color-border-light: 222, 21%, 86%;
    --color-text-typing: 0, 0%, 25%;

    /* --- Spacing, Radius, and Transition --- */
    --space-unit: 1rem;
    --space-half: 0.5rem;
    --radius-sm: 0.5rem; 
    --radius-lg: 50%;
    --transition-speed: 0.15s;
    --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    /* --- Chat Window Dimensions --- */
    --window-width: 360px; 
    --window-height: 550px;
    --window-spacing: var(--space-unit);

    /* --- Header / Footer --- */
    --header-background: var(--color-primary);
    --header-text-color: 0, 0%, 100%; /* White */

    /* --- Typography & Input --- */
    --font-size-base: 0.95rem;
    --line-height-message: 1.5;
    --message-spacing-block: 0.8rem;
    --input-height: 50px;
    --input-padding-inline: 0.8rem;
}

/* ====================================
   1. GLOBAL LAYOUT
   ==================================== */

.chat-layout {
    width: 100%;
    height: 100%;
    font-family: var(--font-family-base);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.chat-layout .chat-header {
    background: hsl(var(--header-background));
    color: hsl(var(--header-text-color));
    padding: var(--space-unit);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
    padding-block: var(--space-half); 
    padding-inline: var(--space-unit);
}
/* Business header specific override for spacing */
.chat-layout .chat-header-content {
    display: flex; 
    align-items: center; 
    gap: 0.75rem;
}
/* AVATAR CSS */
.chat-layout .chat-header-avatar {
    width: 40px; 
    height: 40px; 
    background-color: white; 
    border-radius: 50%; 
    overflow: hidden; /* Clip the image to the circle */
    flex-shrink: 0; /* Prevent the container from shrinking */
}


.chat-layout .chat-body {
    background: hsl(var(--color-background-base));
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    padding: 0;
    overscroll-behavior-y: contain;
}

.chat-layout .chat-footer {
    border-block-start: 1px solid hsl(var(--color-border-light));
    background: hsl(var(--color-background-surface));
    color: hsl(var(--color-dark));
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

/* ====================================
   2. MESSAGE STYLES
   ==================================== */

.chat-messages-list {
    padding: var(--space-unit);
    margin-block-start: auto;
    display: block;
}

.chat-message {
    max-width: 85%;
    font-size: var(--font-size-base);
    padding: var(--space-unit);
    border-radius: var(--radius-sm);
    margin-block-end: var(--message-spacing-block);
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Message Grouping - reduced margin if messages are from the same source */
.chat-message.chat-message-from-user + .chat-message.chat-message-from-user,
.chat-message.chat-message-from-bot + .chat-message.chat-message-from-bot {
    margin-block-start: 0.25rem;
}

/* Bot Message - Light background, dark text */
.chat-message-from-bot {
    color: hsl(var(--color-dark));
    background-color: hsl(var(--color-background-surface));
    border-bottom-left-radius: 0.25rem;
    margin-inline-end: auto;
    margin-inline-start: 0;
}

/* User Message - Dark accent background, white text */
.chat-message-from-user {
    color: hsl(var(--header-text-color)); /* White */
    background-color: hsl(var(--color-secondary)); /* Dark Gray */
    border-bottom-right-radius: 0.25rem;
    margin-inline-start: auto;
    margin-inline-end: 0;
}

/* Markdown & Code Styling */
.chat-message-markdown {
    line-height: var(--line-height-message);
}

.chat-message-markdown pre {
    white-space: pre-wrap;
    box-sizing: border-box;
    padding: var(--space-unit);
    background: hsla(0, 0%, 0%, 0.1); 
    border-radius: 0.5rem;
    margin: 0.75rem 0 0 0;
    font-size: 0.85em;
    color: inherit;
}
.chat-message-markdown code {
    background: transparent;
    padding: 0;
}
.chat-message-from-user .chat-message-markdown pre {
     background: hsla(0, 0%, 0%, 0.2); /* Darker code block for contrast on dark bubble */
}


/* ====================================
   3. INPUT AREA
   ==================================== */

.chat-input {
    width: 100%;
}

.chat-inputs {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background: hsl(var(--color-background-surface));
}

.chat-inputs textarea {
    font-family: inherit;
    font-size: var(--font-size-base);
    border: 0;
    width: 100%;
    min-height: var(--input-height);
    height: var(--input-height);
    padding-inline: var(--input-padding-inline);
    resize: none;
    background: white;
    color: inherit;
    line-height: var(--line-height-message);
    outline: none;
    overflow-y: auto;
    flex-grow: 1;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Input Buttons */
.chat-input-send-button {
    height: 40px;
    width: 40px;
    background: hsl(var(--color-primary));
    color: white;
    cursor: pointer;
    border: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background var(--transition-speed) ease, transform var(--transition-speed) ease;
    margin-inline-start: 0.5rem; /* Increased margin since paperclip is gone */
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.chat-input-send-button:hover {
    background: hsl(var(--color-primary-hover));
    transform: scale(1.05);
}

/* ====================================
   4. CHAT WINDOW WRAPPER & TOGGLE
   ==================================== */

.chat-window-wrapper {
    position: relative;
    width: var(--window-width);
    max-width: 95vw;
    height: var(--window-height);
    max-height: 95vh;
    display: flex;
    flex-direction: column;
}

.chat-window {
    width: 100%;
    height: 100%;
    border: 1px solid hsl(var(--color-border-light));
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.chat-window-toggle {
    --toggle-size: 56px;
    background: hsl(var(--color-primary));
    color: white;
    cursor: pointer;
    width: var(--toggle-size);
    height: var(--toggle-size);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-speed) ease, background var(--transition-speed) ease;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: none;
    font-size: 1.5rem;
    position: absolute;
    bottom: calc(0px - var(--toggle-size) - 1.5rem); /* Positioned clearly below the window for preview */
    right: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transform: scale(1);
}

.chat-window-toggle:hover {
    background: hsl(var(--color-primary-hover));
    transform: scale(1.1);
}

.chat-window-toggle:active {
    background: hsl(var(--color-primary));
    transform: scale(0.95);
}

/* ====================================
   5. UTILITIES (Animation)
   ==================================== */

.chat-message-typing-circle {
    background-color: hsl(var(--color-text-typing));
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin: 0 2px;
    display: block;
    animation: 0.8s ease-in-out infinite modern-typing-bounce;
}

.chat-message-typing {
    background: transparent;
    padding: 0.65rem 0.5rem;
    margin-inline-end: auto;
    max-width: 50px;
    box-shadow: none;
}

@keyframes modern-typing-bounce {
    0%, 33%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* 6. QUICK ACTIONS (BUSINESS FEATURE) */
.chat-quick-actions {
    padding: 0.75rem var(--space-unit) 0.5rem;
    border-block-end: 1px solid hsl(var(--color-border-light));
    background: white;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    white-space: nowrap;
}
/* Applied to both button and anchor tags */
.action-chip {
    background: hsl(var(--color-background-surface));
    color: hsl(var(--color-dark));
    border: 1px solid hsl(var(--color-border-light));
    padding: 0.4rem 0.8rem;
    border-radius: 1rem; /* Pills look more professional */
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    text-decoration: none; /* Crucial for anchor tags */
    display: inline-block;
}

.action-chip:hover {
    background: hsl(var(--color-border-light));
    border-color: hsl(var(--color-primary), 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}