/* CSS Variables from ai-chatbot/app/globals.css */
:root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    /* Chart colors (example, might not be used directly yet) */
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
}

.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    /* Chart colors dark (example) */
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
}

/* Basic body and layout styles */
body {
    font-family: sans-serif; /* Fallback, ideally use GeistFont if available/easy to import */
    margin: 0;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: background-color 0.3s, color 0.3s;
    height: 100dvh; /* Use dynamic viewport height */
    overflow: hidden; /* Prevent body scroll when sidebar is present */
}

#menu-toggle-btn {
    display: none; /* Hidden by default, shown on mobile via media query */
    background-color: hsl(var(--card));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 6px 10px; /* Adjusted padding */
    font-size: 1.2em; /* Adjusted font size */
    cursor: pointer;
    margin-right: 10px; /* Space between hamburger and logo */
}

.app-layout {
    display: flex;
    height: 100dvh; /* Use dynamic viewport height */
}

.sidebar {
    width: 260px;
    position: relative; /* For potential absolute positioning of children if needed */
    transition: transform 0.3s ease-in-out; /* For smooth slide-in/out */
    z-index: 1000; /* Ensure sidebar is above main content if overlapping during transition */
    background-color: hsl(var(--sidebar-background));
    color: hsl(var(--sidebar-foreground));
    border-right: 1px solid hsl(var(--sidebar-border));
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid hsl(var(--sidebar-border));
}

.sidebar-header h2 {
    margin: 0;
    font-size: 1.2em;
    display: flex; /* Align title and indicator */
    align-items: center;
}

#chat-limit-indicator {
    font-size: 0.7em;
    color: hsl(var(--muted-foreground));
    margin-left: 8px;
    font-weight: normal;
}

#new-chat-btn {
    background: hsl(var(--sidebar-primary));
    color: hsl(var(--sidebar-primary-foreground));
    border: none;
    border-radius: var(--radius);
    padding: 5px 10px;
    font-size: 1.2em;
    cursor: pointer;
}

#new-chat-btn:hover {
    opacity: 0.9;
}

#new-chat-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    overflow-y: auto;
    flex-grow: 1;
}

.chat-list-item {
    padding: 10px 15px;
    border-radius: var(--radius);
    cursor: pointer;
    margin-bottom: 5px;
    transition: background-color 0.2s;
}

.chat-list-item:hover {
    background-color: hsl(var(--sidebar-accent));
    color: hsl(var(--sidebar-accent-foreground));
}

.chat-list-item.active-chat {
    background-color: hsl(var(--sidebar-primary));
    color: hsl(var(--sidebar-primary-foreground));
}

.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%; /* Changed from 100vh to 100% to respect parent's height */
    overflow: hidden; /* Prevent main-content itself from overflowing */
    transition: margin-left 0.3s ease-in-out; /* If sidebar pushes content */
}


/* Mobile specific styles */
@media (max-width: 768px) {
    .chat-header {
        padding: 10px 15px; /* Slightly reduce padding on mobile */
        flex-wrap: wrap; /* Allow items to wrap if needed, though aiming for single line */
    }

    #menu-toggle-btn {
        display: inline-block; /* Show hamburger button */
        order: 1; /* Ensure it's on the left */
    }

    .chat-header h1 { /* Feyz logo */
        order: 2; /* After hamburger */
        font-size: 1.3em; /* Slightly reduce logo size on mobile */
        margin-right: auto; /* Push other elements to the right */
    }

    .chat-header .tagline {
        display: none; /* Hide tagline on mobile to save space */
    }
    
    .chat-header .chat-actions {
        order: 3;
        margin-left: 5px; /* Small space before actions */
    }

    .chat-header .header-controls {
        order: 4; /* After logo and chat-actions */
        display: flex; /* Ensure controls are in a row */
        align-items: center;
        margin-left: 5px; /* Space from chat-actions or logo */
    }
    
    .chat-header .user-info {
        order: 5;
        font-size: 0.8em; /* Smaller font for user info */
        margin-left: 5px; /* Space from header-controls */
        white-space: nowrap; /* Prevent login button text from wrapping awkwardly */
    }

    /* Adjust specific controls for mobile if they are too large */
    .header-controls #personality-selector {
        max-width: 100px; /* Limit width of selector */
        font-size: 0.9em;
        padding: 4px 6px;
    }
    .header-controls #theme-toggle {
        font-size: 1.3em; /* Adjust theme toggle icon size */
        padding: 4px;
    }
    .chat-actions button { /* Reset/Delete buttons */
        padding: 4px 8px;
        font-size: 1em;
    }


    .sidebar {
        position: fixed; /* Or absolute, depending on desired effect */
        left: 0;
        top: 0;
        height: 100%;
        transform: translateX(-100%); /* Hidden off-screen */
        box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Optional: add shadow when open */
    }

    .sidebar.open {
        transform: translateX(0); /* Slide in */
    }

    /* Optional: Darken main content when sidebar is open on mobile */
    .main-content-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 999; /* Below sidebar, above main content */
    }

    .sidebar.open + .main-content .main-content-overlay { /* If overlay is inside main-content */
        display: block;
    }
    /* Adjust main content if sidebar is not an overlay */
    /* .main-content {
        margin-left: 0; 
    }
    .sidebar.open ~ .main-content {
         margin-left: 260px; /* Push content if sidebar is not an overlay
    } */
}

/* Desktop specific styles for auto-hiding sidebar */
@media (min-width: 769px) {
    .sidebar {
        width: 260px; /* Ensure width is explicitly set for desktop */
        /* Ensure only transform is transitioned here for this behavior, width is constant */
        transition: transform 0.3s ease-in-out; 
    }

    .main-content {
        /* Ensure main-content has a margin matching sidebar width by default on desktop */
        margin-left: 260px;
        /* transition: margin-left 0.3s ease-in-out; is already global */
    }

    .sidebar.sidebar-collapsed-desktop {
        transform: translateX(-250px); /* Leaves 10px of the 260px sidebar visible */
        cursor: pointer; /* Indicate the sliver is interactive */
    }
    .sidebar.sidebar-collapsed-desktop:hover {
        /* Slightly change background of the sliver on hover to reinforce interactivity */
        background-color: hsl(var(--sidebar-accent)); 
    }

    .sidebar.sidebar-collapsed-desktop + .main-content {
        margin-left: 10px; /* Main content margin adjusts to the visible sliver */
    }

    /* Desktop-specific header enhancements */
    .chat-header {
        padding: 12px 25px; /* Increased padding for a less cramped feel */
    }

    .chat-header h1 { /* Logo */
        font-size: 1.75em; /* Make logo more prominent */
        font-weight: 600;
    }

    .chat-header .tagline {
        margin-left: 10px; /* Space from logo */
        /* margin-right: auto; Pushes elements right, but might not be desired if logo isn't meant to be far left */
    }

    /* Consistent spacing for items on the right of the tagline */
    .chat-header .chat-actions,
    .chat-header .header-controls,
    .chat-header .user-info {
        margin-left: 20px; /* Spacing between these groups */
    }
    
    .chat-header .chat-actions {
        margin-left: auto; /* Push chat actions and subsequent items to the right, creating space after tagline */
    }

    .chat-header .header-controls {
        display: flex; /* Already flex */
        align-items: center;
        gap: 15px; /* Increased gap within header-controls */
    }

    #reset-chat-btn, #delete-chat-btn, #theme-toggle {
        padding: 8px; /* Uniform padding for icon buttons for better touch/click area and visual balance */
        font-size: 1.3em; /* Slightly larger icons if they are font based */
    }
     #personality-selector {
        padding: 7px 10px; /* Consistent padding */
        font-size: 0.95em;
    }
}


.chat-header {
    display: flex;
    /* justify-content: space-between; /* Let items flow more naturally or use margins for spacing */
    align-items: center;
    padding: 10px 20px; /* Default padding, overridden by desktop */
    background-color: hsl(var(--card)); /* Use card as a general bg for elements */
    border-bottom: 1px solid hsl(var(--border));
}

.chat-header h1 { /* Default logo style */
    margin: 0;
    font-size: 1.5em; /* Default size, overridden by desktop */
    color: hsl(var(--card-foreground));
}

.tagline { /* Default tagline style */
    margin: 0 0 0 5px; /* Default margin, overridden by desktop */
    font-size: 0.8em;
    color: hsl(var(--muted-foreground));
    font-style: italic;
}

.chat-header button,
.chat-form-inner button {
    padding: 8px 15px;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: var(--radius);
    cursor: pointer;
}

#reset-chat-btn {
    background-color: transparent;
    border: 1px solid hsl(var(--destructive)); /* Or a more subtle border like var(--border) */
    color: hsl(var(--destructive)); /* Destructive color to indicate a 'reset' or 'danger' action */
    padding: 6px 10px; /* Slightly adjusted padding */
    font-size: 1.2em; /* Ensure icon is a good size */
    opacity: 0.8; /* Make it slightly transparent */
}

#reset-chat-btn:hover {
    background-color: hsla(var(--destructive), 0.1); /* Slight background on hover */
    opacity: 1;
    color: hsl(var(--destructive)); /* Keep color consistent on hover */
}

#delete-chat-btn { /* Assuming similar styling might be desired for delete */
    background-color: transparent;
    border: 1px solid hsl(var(--destructive));
    color: hsl(var(--destructive));
    padding: 6px 10px;
    font-size: 1.2em;
    opacity: 0.8;
}

#delete-chat-btn:hover {
    background-color: hsla(var(--destructive), 0.1);
    opacity: 1;
    color: hsl(var(--destructive));
}


#theme-toggle {
    background-color: transparent;
    border: none;
    font-size: 1.5em; /* Adjust size as needed */
    padding: 5px; /* Minimal padding */
    color: hsl(var(--foreground)); /* Ensure icon is visible */
}

#theme-toggle:hover {
    opacity: 0.7;
    background-color: hsl(var(--accent)); /* Optional: slight background on hover */
}


.chat-header button:hover,
.chat-form-inner button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.chat-header button,
.chat-form-inner button {
    padding: 8px 15px;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: var(--radius);
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s; /* Added for smooth transition back */
}

.user-info {
    font-size: 0.9em;
    color: hsl(var(--muted-foreground));
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message {
    padding: 10px 15px;
    border-radius: var(--radius);
    max-width: 70%;
    word-wrap: break-word;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInSlideUp 0.5s ease-out forwards;
    display: flex; /* To align message content and actions */
    flex-direction: column; /* Stack content above actions */
}

.message-content {
    /* Styles for the actual text content of the message if needed */
    /* For now, textContent is directly on .message */
}

.message-actions {
    display: flex;
    gap: 5px;
    margin-top: 8px;
    align-self: flex-start; /* Default for assistant, user will override */
}

.message.user .message-actions {
    align-self: flex-end;
}

.message-actions button {
    background-color: transparent;
    border: none; /* Remove border for more subtlety */
    color: hsl(var(--muted-foreground));
    padding: 2px 4px; /* Slightly reduce padding */
    font-size: 0.9em; /* Slightly larger for better icon visibility if using text */
    border-radius: var(--radius);
    cursor: pointer;
    transition: color 0.2s, opacity 0.2s;
    opacity: 0.6; /* Make them less prominent by default */
}

.message:hover .message-actions button {
    opacity: 1; /* Show more clearly on message hover */
}

.message-actions button:hover {
    color: hsl(var(--accent-foreground));
    opacity: 1;
}

/* Specific icons (using text for now, can be replaced with SVGs/icons later) */
.refresh-btn::before { 
    content: "🔄"; 
    font-size: 0.8em; /* Make icon slightly smaller */
}
.thumbs-up-btn::before { content: "👍"; }
.thumbs-down-btn::before { content: "👎"; }

.message-actions button.selected {
    transform: scale(1.2);
    opacity: 1; /* Ensure it's fully visible when selected */
}

.refresh-btn {
    padding: 2px 4px; /* Minimal padding */
    opacity: 0.5; /* More subtle by default */
}

.message.user:hover .refresh-btn { /* Show more clearly on user message hover */
    opacity: 0.8;
}

.refresh-btn:hover {
    opacity: 1;
    background-color: hsl(var(--accent)); /* Gentle background on hover */
}

@keyframes fadeInSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.user {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    align-self: flex-end;
}

.message.assistant {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    align-self: flex-start;
    /* position: relative; /* For loading indicator positioning - already handled by flex */
}

.message.assistant .loading-dots {
    display: inline-flex; /* Use flex to align dots */
    align-items: center;
    margin-right: 8px;
    vertical-align: middle;
}

.message.assistant .loading-dots span {
    width: 6px;
    height: 6px;
    margin: 0 2px;
    background-color: hsl(var(--secondary-foreground));
    border-radius: 50%;
    display: inline-block;
    animation: blink 1.4s infinite both;
}

.message.assistant .loading-dots span:nth-child(1) {
    animation-delay: 0s;
}
.message.assistant .loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}
.message.assistant .loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes blink {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

.message.system {
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    align-self: center;
    font-style: italic;
    font-size: 0.9em;
}

.chat-input-area {
    padding: 10px 20px;
    background-color: hsl(var(--card));
    border-top: 1px solid hsl(var(--border));
    flex-shrink: 0; /* Ensure input area doesn't shrink if content is too large */
}

.chat-form-inner {
    display: flex;
    gap: 10px;
}

.chat-form-inner textarea {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    background-color: hsl(var(--background)); /* Or --input if it's meant for input fields specifically */
    color: hsl(var(--foreground));
    resize: none; /* Prevent manual resize, JS can adjust height */
    font-family: inherit;
    font-size: 1em;
}

#voice-input-btn {
    padding: 8px 10px; /* Adjust padding for icon button */
    font-size: 1.2em; /* Make icon a bit larger */
    background-color: transparent; /* Make it less prominent than submit */
    border: 1px solid hsl(var(--border));
    color: hsl(var(--muted-foreground));
}

#voice-input-btn:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

#voice-input-btn.recording {
    background-color: hsl(var(--destructive)); /* Use destructive to indicate active recording */
    color: hsl(var(--destructive-foreground));
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); /* Use destructive color for pulse */
    }
    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}


.chat-form-inner textarea:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 1px hsl(var(--ring));
}

.disabled-input {
    opacity: 0.6;
    cursor: not-allowed !important;
}

/* Basic scrollbar styling (optional, for better look) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--muted));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--accent));
}