/* Add this at the top of your CSS */
html, body {
    height: 100%;
}

/* Container for session buttons */
.session-buttons {
    position: fixed;
    top: 15px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px; /* Space between buttons */
    z-index: 1000;
}

.btn-new-session {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    padding: 10px 20px;
    background-color: transparent;
    color: #333;
    border: 1px solid #cfcfcf;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    align-items: center;
}
.btn-feedback {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    padding: 10px 20px;
    background-color: transparent;
    color: #007bff;
    border: 1px solid #007BFF;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    align-items: center;
}

/* Hover effect */
.btn-feedback:hover {
    background-color: #007BFF;
    color: #fff;
}
/* Hover effect */
.btn-new-session:hover {
    background-color: #cfcfcf;
    color: #333;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .session-buttons {
        top: 15px;
        right: 10px;
        gap: 8px;
    }

    .btn-feedback,
    .btn-new-session {
        padding: 8px 16px;
        font-size: 14px;
    }
	
    /* Hide text and show "+" symbol on mobile */
    .btn-new-session .desktop-text {
        display: none;
    }

    .btn-new-session .mobile-text {
        display: inline;
        font-size: 14px;
    }
}
/* Desktop Version */
@media (min-width: 769px) {
    .btn-new-session .desktop-text {
        display: inline;
    }

    .btn-new-session .mobile-text {
        display: none;
    }
}


/* Reset default browser styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Body Styles */
body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px; /* Base font size */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal overflow */
}

/* Container Styling */
.container {
    width: 100%; /* Full width */
    height: 100vh; /* Full viewport height */
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Header Styles */
h1 {
    text-align: left;
    padding: 15px 20px; /* Combined padding */
    font-size: 24px;
    /*flex-shrink: 0; /* Prevent header from shrinking */
    border-bottom: 1px solid #f1f1f1;
    line-height: 1.6;
}

h2 {
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 1.6;
}

h3 {
    font-size: 18px;
    margin-bottom: 8px;
    line-height: 1.6;
}

h4 {
    font-size: 16px;
    margin-bottom: 6px;
    line-height: 1.6;
}

/* Mobile Tabs Header */
.mobile-tabs-header {
    display: none; /* Hidden by default, shown on mobile via media queries */
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1000;
    justify-content: space-around;
    padding: 10px 0;
    flex-shrink: 0; /* Prevent shrinking */
}

/* Mobile Tabs Header Buttons */
.mobile-tabs-header button {
    background-color: transparent;
    border: none;
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
    flex: 1;
    color: #555;
    border-bottom: 2px solid transparent;
}

.mobile-tabs-header button.active {
    border-bottom: 2px solid #007BFF;
    color: #007BFF;
}

/* Style the main content area to display two windows side by side */
.main-content {
    display: flex;
    flex: 1; /* Occupies all available space within .container */
    height: calc(100vh - 80px); /* Adjust based on header height */
}

/* Style the chat window (Window 1 - Left Side) */
#chat-window {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #f1f1f1; /* Separator line */
    position: relative; /* To position the input-container */
    overflow: hidden; /* Manage scroll within children */
}

/* Adjust chat history to account for the input container */
#chat-history {
    flex: 1;
    padding: 20px 30px;
    overflow-y: auto; /* Enable vertical scrolling */
    padding-bottom: 80px; /* Prevent content from being hidden behind the input field */
}

/* Input Container within Chat Window */
#input-container {
    display: flex; /* Establish Flexbox layout */
    align-items: center; /* Vertically center items */
    background-color: #f8f9fa; /* Soft background color */
    border-radius: 30px; /* Rounded container */
    padding: 10px 20px; /* Internal padding */
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Soft shadow */
    position: absolute; /* Position within chat-window */
    bottom: 20px; /* Distance from bottom */
    left: 20px; /* Distance from left */
    right: 20px; /* Distance from right */
    flex-shrink: 0; /* Prevents the input container from shrinking */
    border: 1px solid #ededed; /* Border for better visibility */
}

#input-container textarea {
    border: none;
    background-color: transparent; /* Match background with container */
    height: auto; /* Allow dynamic height */
    min-height: 40px; /* Minimum height to display one line */
    max-height: 110px; /* Optional: Prevent excessive growth */
    resize: none; /* Prevent manual resizing */
    padding: 5px 10px; /* Adjusted padding for better aesthetics */
    font-size: 16px;
    line-height: 1.6; /* Reduced line-height for one line */
    outline: none; /* Remove default outline */
    font-family: 'Roboto', sans-serif;
    color: #333;
    box-sizing: border-box;
    margin-bottom: 0;
    flex: 1; /* Allow textarea to grow and take available space */
    overflow: hidden; /* Hide scrollbar */
    transition: height 0.2s ease; /* Smooth height transition */
}

  

/* Analyze Button */
#input-container button {
    background-color: #007BFF; /* Blue background */
    color: white; /* Icon color */
    border: none;
    border-radius: 50%; /* Makes the button perfectly circular */
    width: 40px; /* Fixed width */
    height: 40px; /* Fixed height */
    display: flex; /* Use Flexbox to center the SVG */
    align-items: center; /* Vertically center SVG */
    justify-content: center; /* Horizontally center SVG */
    cursor: pointer;
    padding: 0; /* No extra padding */
    box-sizing: border-box; /* Ensures consistent sizing */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
    margin-left: 10px; /* Space between textarea and button */
    flex: 0 0 40px; /* Prevent the button from growing or shrinking */
}

#input-container button:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: scale(1.1); /* Slightly larger on hover */
}

#input-container button:active {
    background-color: #004494; /* Even darker blue when clicked */
    transform: scale(0.95); /* Slightly smaller when clicked */
}

#input-container button svg {
    width: 20px; /* Set SVG size */
    height: 20px; /* Set SVG size */
    fill: currentColor; /* Matches icon color with button's text color */
    /* Remove display: block; to allow proper centering */
    /* Remove margin: 0; as Flexbox handles centering */
}

/* Optional: Remove any default button styles that might interfere */
#input-container button:focus {
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); /* Custom focus outline for accessibility */
}

/* Style the tabs window (Window 2 - Right Side) */
#tabs-window {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative; /* To position tab content */
    overflow: hidden; /* Manage scroll within children */
}

/* Desktop Tabs Container */
#tabs-container {
    display: none; /* Hidden initially; shown when hypotheses are generated */
    position: sticky;
    top: 0; /* Adjust if needed */
    background-color: #fff;
    z-index: 1000;
    padding: 10px 0;
    overflow-x: auto; /* Allow horizontal scrolling if tabs exceed width */
    flex-shrink: 0; 
    margin-left: 30px;
}

/* Ensure desktop tabs are scrollable horizontally and styled like browser tabs */
#tabs {
    display: flex;
    overflow-x: auto; /* Allow horizontal scrolling if tabs exceed width */
    white-space: nowrap;
    flex-grow: 1;
    cursor: pointer;
    -webkit-overflow-scrolling: touch; /* Enable momentum scrolling on mobile */
}

/* Scrollbar Styling - Smaller Scrollbars */
#chat-history::-webkit-scrollbar,
#tabs::-webkit-scrollbar,
#output-content::-webkit-scrollbar,
#response-container::-webkit-scrollbar {
    width: 6px; /* For vertical scrollbars */
    height: 6px; /* For horizontal scrollbars */
}

#chat-history::-webkit-scrollbar-thumb,
#tabs::-webkit-scrollbar-thumb,
#output-content::-webkit-scrollbar-thumb,
#response-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

#chat-history::-webkit-scrollbar-track,
#tabs::-webkit-scrollbar-track,
#output-content::-webkit-scrollbar-track,
#response-container::-webkit-scrollbar-track {
    background: transparent;
}

#chat-history,
#tabs,
#output-content,
#response-container {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Scrollbar Thumb Hover Effect */
#chat-history::-webkit-scrollbar-thumb:hover,
#tabs::-webkit-scrollbar-thumb:hover,
#output-content::-webkit-scrollbar-thumb:hover,
#response-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Desktop Tab Buttons */
.tab-container button {
    background-color: #eff6ff;
    border: 1px solid #ccc;
    border-radius: 8px 8px 0 0;
    padding: 10px 15px;
    cursor: pointer;
    margin-right: 2px;
    font-size: 14px;
    color: #333; /* Non-active tab text color */
    flex-shrink: 0;
    transition: background-color 0.3s;
}

.tab-container button.active {
    background-color: #fff;
    border-bottom: none;
    color: #000;
}

.tab-container button:hover {
    background-color: #e0e0e0;
}

/* Tab active state when clicked */
#tabs .active {
    background-color: #fff;
    border-bottom: 2px solid #007BFF;
}

/* Optional: Hide borders when the tabs container is empty */
#tabs-container:empty {
    display: none;
}

/* Desktop Output Content */
#output-content {
    flex: 1;
    padding: 10px;
    overflow-y: auto; /* Enable vertical scrolling within the output content */
}

/* Desktop Response Container */
#response-container {
    flex: 1;
    overflow-y: auto; /* Enable vertical scrolling */
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
}

/* Container for the action buttons (Desktop) */
#action-buttons {
    position: fixed; /* Make it stick to the bottom */
    bottom: 0; /* Stick to the bottom of the viewport */
    right: 0;
    width: 50%; /* Only occupy the right half */
    background-color: #fff; /* Ensure it has a background color */
    display: flex;
    justify-content: center; /* Center the buttons */
    align-items: center;
    padding: 10px;
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow */
    z-index: 100; /* Ensure it stays above other elements */
    box-sizing: border-box;
}

/* Styling for Select and Button (Desktop) */
#action-buttons select,
#action-buttons button {
    margin: 0 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
}

#action-buttons button {
    background-color: #007BFF;
    color: white;
    cursor: pointer;
}

#action-buttons button:hover {
    background-color: #0056b3;
}

/* Hide the .actions container when not needed */
.actions.hidden {
    display: none;
}

/* AI responses in the left tab (Chat Window) */
#chat-history .ai-response {
    background-color: transparent; /* Transparent background */
    padding: 15px;
    margin: 15px 0; /* Adds spacing between responses */
    border-radius: 8px; /* Rounded corners for aesthetic */
    font-size: 16px; /* Adjust font size if necessary */
    line-height: 1.7; /* Better readability */
    align-self: flex-start; /* Keep messages aligned to the left */
}

#chat-history .ai-response p {
    margin: 8px 0 12px;
}

#chat-history .ai-response ul,
#chat-history .ai-response ol {
    margin: 6px 0 12px;
    padding-left: 1.25rem; /* Keep bullets inside the chat bubble */
    list-style-position: outside;
}

#chat-history .ai-response li {
    margin: 4px 0;
}

/* AI responses in the right tab (Desktop Output Content) */
#output-content .ai-response {
    background-color: #eff6ff54;
    padding: 15px 25px;
    margin: 15px 0;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.7;
    align-self: flex-start;
}

/* Optional: Different style for user's input */
.user-message {
    background-color: #eff6ff54; /* Light blue background for user's input */
    padding: 15px;
    margin: 15px 0;
    border-radius: 8px;
    font-size: 16px;
    align-self: flex-end; /* Align user messages to the right */
    line-height: 1.7; /* Better readability */
}

/* Style for the Response Header */
.response-header {
    background-color: #f2f7ff; /* Light gray background for contrast */
    padding: 5px 10px; /* Adequate padding for visual separation */
    margin-bottom: 5px; /* Space between header and response content */
    font-size: 0.8em;
    color: #333; /* Dark text color for readability */
    border-radius: 8px; /* Slightly rounded corners */
    display: inline-block; /* Shrink to fit content */
    max-width: 300px; /* Fixed maximum width */
    width: fit-content; /* Adjust width based on content */
}

/* Loader style */
.loader {
    border: 16px solid #f3f3f3; /* Light gray */
    border-top: 16px solid #007BFF; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -60px;
    margin-top: -60px;
    z-index: 10000; /* Ensure it is on top of other content */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Fade-in Animation */
.fade-in {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}



/* Loader Overlay */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Above all other elements */
}

/* Highlighted text */
.highlighted {
    background-color: yellow; /* Example highlight color */
}

/* Box Sizing for all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

#actions-container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px; 
}

/* Default hidden state for response and actions containers */
#response-container,
#actions-container {
    display: none; /* Hidden by default */
}

/* Visible when .active is applied */
#response-container.active,
#actions-container.active {
    display: block; /* Visible when active */
}

/* Стили для заголовков секций */
.section-header { 
    margin-top: 20px;
    margin-bottom: 10px; /* Увеличен отступ снизу для разделения секций */
}

/* Стили для текста секций */
.section-text {
    font-size: 1em;
    margin-bottom: 15px; /* Увеличен отступ снизу для разделения секций */
}

/* Опционально: Добавление верхнего отступа для первых секций */
.ai-response > :first-child {
    margin-top: 0; /* Убирает верхний отступ у первой секции */
}

/* Пример дополнительных стилей для улучшения визуального разделения */
.ai-response .section-header + .section-text {
    margin-top: 10px; /* Дополнительный отступ между заголовком и текстом */
}

/* Select Idea Button Styles */
#select-idea-button {
    position: fixed;                /* Fix the button relative to the viewport */
    bottom: 80px;                   /* Position it above the action-buttons */
    right: 20px;                    /* Align it to the right */
    display: none;                  /* Initially hidden */
    z-index: 1100;                  /* Higher than action-buttons (1000) */
    background-color: #007BFF;      /* Button background color */
    color: white;                   /* Button text color */
    border: none;                   /* Remove default border */
    border-radius: 5px;             /* Rounded corners */
    padding: 10px 15px;             /* Button padding */
    cursor: pointer;                /* Pointer cursor on hover */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    font-size: 14px;                /* Adjust font size as needed */
    transition: background-color 0.3s; /* Smooth hover transition */
}

#select-idea-button:hover {
    background-color: #0056b3;      /* Darker blue on hover */
}

.placeholder-text {
    color: linear-gradient(90deg, #346bf1, #4fa0ff); /* Subtle gradient text color */
    background: -webkit-linear-gradient(#346bf1, #4fa0ff); /* Fallback for older browsers */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Makes the gradient text appear smooth */
    font-family: 'Roboto', sans-serif; /* Modern, professional font */
    font-size: 28px; /* Adjust font size for better readability */
    font-weight: 300; /* Slightly lighter for a clean look */
    text-align: center; /* Center-align text */
    position: absolute; /* Position text in the middle of the screen */
    top: 48%; /* Vertically centered */
    left: 50%; /* Horizontally centered */
    transform: translate(-50%, -50%); /* Perfect centering */
    width: 85%; /* Use a fixed width to control text wrapping */
    max-width: 85%; /* Ensure it doesn’t exceed this width */
    word-wrap: break-word; /* Allow long words to break */
    line-height: 1.5; /* Add spacing between lines */
    padding: 10px; /* Add internal spacing for balance */
}

/* Initial state for placeholders */
.placeholder-text {
    transition: opacity 1s ease 1s; /* 1s transition delay */
    opacity: 1;
}

/* Hidden state */
.placeholder-text.hidden {
    opacity: 0;
    pointer-events: none; /* Prevent interaction when hidden */
}

/* Targeting 'Инсайты' and 'Рекомендации' placeholders */
#response-placeholder, #actions-placeholder {
	font-family: 'Roboto', sans-serif; /* Modern, professional font */
    color: #555; /* Sets the text color to gray */
    background: none; /* Removes the background gradient */
    -webkit-background-clip: initial; /* Resets background clipping */
    -webkit-text-fill-color: initial; /* Resets text fill color */
    font-size: 18px; /* Sets the font size to 16px */
    font-weight: 300; /* Sets the font weight to 300 */
}

/* Match Actions Content styling with Output Content */
#actions-content {
    flex: 1;
    padding: 10px;
    overflow-y: auto; /* Enable vertical scrolling */
}

/* Ensure AI responses in Actions tab match styling in Response tab */
#actions-content .ai-response {
    background-color: #eff6ff54;
    padding: 15px 25px;
    margin: 15px 0;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.7;
    align-self: flex-start;
}

/* Include Actions container and content in scrollbar styling to match Response tab */

/* Scrollbar Width */
#chat-history::-webkit-scrollbar,
#tabs::-webkit-scrollbar,
#output-content::-webkit-scrollbar,
#response-container::-webkit-scrollbar,
#actions-container::-webkit-scrollbar,
#actions-content::-webkit-scrollbar {
    width: 6px; /* Vertical scrollbars */
    height: 6px; /* Horizontal scrollbars */
}

/* Scrollbar Thumb */
#chat-history::-webkit-scrollbar-thumb,
#tabs::-webkit-scrollbar-thumb,
#output-content::-webkit-scrollbar-thumb,
#response-container::-webkit-scrollbar-thumb,
#actions-container::-webkit-scrollbar-thumb,
#actions-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* Scrollbar Track */
#chat-history::-webkit-scrollbar-track,
#tabs::-webkit-scrollbar-track,
#output-content::-webkit-scrollbar-track,
#response-container::-webkit-scrollbar-track,
#actions-container::-webkit-scrollbar-track,
#actions-content::-webkit-scrollbar-track {
    background: transparent;
}

/* Ensure Firefox scrollbar styling (if previously set) matches as well */
#response-container,
#actions-container,
#actions-content {
    scrollbar-width: thin; 
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Responsive Design for Mobile Devices */
@media only screen and (max-width: 767px) {
    /* Show mobile tabs header when needed */
    .mobile-tabs-header {
        display: flex; /* Overrides display: none; */
        flex-shrink: 0; /* Prevent shrinking */
    }

    /* Hide desktop-specific elements */
    #tabs-container {
        display: none !important;
    }

    /* Hide response and actions containers by default */
    #response-container,
    #actions-container {
        display: none; /* Hidden by default */
    }

    /* Show response or actions container when .active class is applied */
    #response-container.active,
    #actions-container.active {
        display: block; /* Visible when active */
    }

    /* Modify main content for mobile */
    .main-content {
        display: flex;
        flex-direction: column;
        flex: 1; /* Allow it to grow and take available space */ 
        padding-bottom: 80px; /* Ensure space for fixed action buttons */
    }

    /* Chat Window Active on Mobile */
    #chat-window.active {
        display: flex;
        flex-direction: column; /* Ensure proper stacking */
        flex: 1; /* Allow it to grow and take available space */
        height: 100%; /* Ensure it takes the full height available */
    }
    #chat-window {
        display: none;
    }

    /* Tabs Window Active on Mobile */
    #tabs-window.active {
        display: flex;
    }
    #tabs-window {
        display: none;
    }

    /* Adjust chat history padding to account for the fixed input container */
    #chat-history {
        flex: 1; 
        box-sizing: border-box; 
        padding-top: 70px;       /* Existing padding for the sticky header */
        padding-bottom: 110px;   /* Increased padding to prevent overlap */
        padding-left: 10px;
        padding-right: 10px;
        overflow-y: auto; 
        scroll-behavior: smooth; 
        margin-bottom: 0; 
    }

    #input-container {
        position: fixed; 
        bottom: 10px; 
        left: 10px; 
        right: 10px; 
        padding: 10px 10px; 
        border-radius: 30px; 
        border: 1px solid #ededed; 
        background-color: #f8f9fa; 
        /*box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15); */
        z-index: 1000; 
        width: auto; 
        margin-bottom: 0;
    }

    /* Reduce scrollbar width for mobile as well */
    #chat-history::-webkit-scrollbar,
    #tabs::-webkit-scrollbar,
    #output-content::-webkit-scrollbar,
    #response-container::-webkit-scrollbar,
    #actions-container::-webkit-scrollbar,
    #actions-content::-webkit-scrollbar {
        width: 4px; 
        height: 4px;
    }

    #chat-history::-webkit-scrollbar-thumb,
    #tabs::-webkit-scrollbar-thumb,
    #output-content::-webkit-scrollbar-thumb,
    #response-container::-webkit-scrollbar-thumb,
    #actions-container::-webkit-scrollbar-thumb,
    #actions-content::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

    /* AI responses: unify mobile padding */
    #chat-history .ai-response,
    #output-content .ai-response,
    #actions-content .ai-response {
        padding: 10px; /* Reduced padding on mobile */
    }

    /* Loader Overlay Positioning for Mobile */
    .loader-overlay {
        padding: 20px; 
    }

    /* Equalize padding in response and actions containers for mobile */
    #response-container,
    #actions-container {
        padding-left: 10px;  
        padding-right: 10px; 
        padding-top: 10px;  
        padding-bottom: 50px;
    }

    /* Ensure output and actions content match in mobile padding */
    #output-content,
    #actions-content {
        padding: 10px;
    }

    /* Ensure #tabs-window displays correctly */
    #tabs-window.active {
        display: flex;
        flex-direction: column;
    }

    /* Adjust action-buttons for mobile */
    #action-buttons {
        position: fixed;                
        bottom: 0;                      
        left: 0;                        
        right: 0;                       
        width: 100%;                    
        display: flex;                  
        flex-direction: row;            
        justify-content: space-between; 
        align-items: center;            
        padding: 10px 15px;             
        background-color: #f8f9fa;      
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); 
        z-index: 1000;                  
    }

    #action-buttons select,
    #action-buttons button {
        width: 48%;                    
        margin: 0;                     
        padding: 10px;                 
        font-size: 16px;               
    }

    #action-buttons button {
        margin-left: 4%; 
    }
}

/* ===== Markdown в правых окнах (Response/Actions) ===== */

/* Базовая типографика внутри ответа */
#response-container .ai-response,
#actions-content   .ai-response {
  line-height: 1.7;
}

/* Заголовок H2 (наш title) */
#response-container .ai-response h2,
#actions-content   .ai-response h2 {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 10px;         /* отступ снизу от заголовка */
}

/* Заголовки H3/H4 на всякий */
#response-container .ai-response h3,
#actions-content   .ai-response h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 16px 0 8px;
}
#response-container .ai-response h4,
#actions-content   .ai-response h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 14px 0 6px;
}

/* Параграфы — чтобы не «слипались» с заголовками */
#response-container .ai-response p,
#actions-content   .ai-response p {
  margin: 8px 0 12px;
}

/* Списки — правый сдвиг и межстрочные отступы */
#response-container .ai-response ul,
#actions-content   .ai-response ul,
#response-container .ai-response ol,
#actions-content   .ai-response ol {
  margin: 6px 0 12px 1.25rem;   /* сдвиг вправо и отступы сверху/снизу */
  padding-left: 0;
}
#response-container .ai-response li,
#actions-content   .ai-response li {
  margin: 4px 0;
}

/* Инсайты — маркеры чуть правее */
#response-container .ai-response p + strong,
#actions-content   .ai-response p + strong { display: inline; }
#response-container .ai-response .insight-list li,
#actions-content   .ai-response .insight-list li { margin-left: .5rem; }

/* Горизонтальные линии: приводим к виду и прячем последнюю */
#response-container .ai-response hr,
#actions-content   .ai-response hr {
  border: 0;
  height: 1px;
  background: #eee;
  margin: 16px 0;
}
#response-container .ai-response hr:last-child,
#actions-content   .ai-response hr:last-child {
  display: none; /* убирает лишние --- в конце */
}


/* ============================================================================
   FEEDBACK BUTTONS STYLES
   ============================================================================ */

/* Feedback container */
.feedback-container {
    margin-top: 10px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Feedback buttons wrapper */
.feedback-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Individual feedback button */
.feedback-btn {
    background-color: transparent;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 36px;
}

/* Feedback button hover */
.feedback-btn:hover:not(:disabled) {
    background-color: transparent;
    border-color: #999;
    transform: scale(1.05);
}

/* Feedback button active/selected */
.feedback-btn.selected {
    background-color: transparent;
    border-color: #666;
    opacity: 0.5;
}

/* Feedback button disabled */
.feedback-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Feedback emoji */
.feedback-emoji {
    font-size: 20px;
    line-height: 1;
    filter: grayscale(100%) opacity(0.6);
}

/* Feedback messages */
.feedback-message {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    transition: opacity 0.3s ease;
}

/* Success message */
.feedback-message.feedback-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Error message */
.feedback-message.feedback-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Feedback in chat messages */
.user-message .feedback-container,
.ai-message .feedback-container {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

/* Feedback buttons in chat - smaller and gray */
#chat-history .feedback-container {
    margin-top: 6px;
    padding-top: 6px;
}

#chat-history .feedback-btn {
    min-width: 36px;
    min-height: 30px;
    padding: 4px 8px;
    background-color: transparent;
    border: none;
    opacity: 0.7;
    transition: all 0.2s ease;
}

#chat-history .feedback-btn:hover:not(:disabled) {
    opacity: 1;
    background-color: transparent;
    border: none;
    transform: scale(1.05);
}

#chat-history .feedback-emoji {
    font-size: 14px;
    filter: grayscale(100%);
}

#chat-history .feedback-btn:hover:not(:disabled) .feedback-emoji {
    filter: grayscale(100%);
}

#chat-history .feedback-btn.selected {
    opacity: 1;
    background-color: transparent;
    border: none;
}

#chat-history .feedback-btn.selected .feedback-emoji {
    filter: grayscale(100%);
}

/* Feedback in response/actions containers */
#response-container .feedback-container,
#actions-content .feedback-container {
    margin: 12px 0;
    padding: 8px;
    background-color: transparent;
    border-radius: 8px;
}

/* Feedback tags modal */
.feedback-tags-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.feedback-tags-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.feedback-tags-content h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.feedback-tags-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.feedback-tag-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-tag-item:hover {
    background-color: #f5f5f5;
    border-color: #999;
}

.feedback-tag-item input[type="checkbox"] {
    margin-right: 10px;
    cursor: pointer;
}

.feedback-tag-item span {
    font-size: 14px;
    color: #333;
}

.feedback-tags-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-tags-ok,
.btn-tags-skip {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-tags-ok {
    background-color: #007bff;
    color: white;
}

.btn-tags-ok:hover {
    background-color: #0056b3;
}

.btn-tags-skip {
    background-color: #f0f0f0;
    color: #666;
}

.btn-tags-skip:hover {
    background-color: #e0e0e0;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .feedback-btn {
        min-width: 40px;
        min-height: 32px;
        padding: 4px 10px;
    }

    .feedback-emoji {
        font-size: 18px;
    }

    .feedback-buttons {
        gap: 6px;
    }

    .feedback-tags-content {
        padding: 20px;
        max-width: 350px;
    }

    .feedback-tags-content h4 {
        font-size: 15px;
    }
}