/* --- START OF FILE western-hits-analyzer/styles.css --- */

/* Root colors (keep your existing theme or adjust) */
:root {
    --color-primary: #E65100; /* Deep Orange */
    --color-primary-dark: #BF360C; /* Darker Orange for hover */
    --color-secondary: #FFB74D; /* Light Orange */
    --color-secondary-dark: #FF9800; /* Darker Light Orange for hover */
    --color-background: #FFF8E1; /* Lighter, more like Prashna background */
    --color-surface: #FFFFFF;    /* White - For cards, forms, messages */
    --color-surface-alt: #FFFDE7; /* Slightly off-white for collapsible content background / main chat scroll area */
    --color-border: #FFD180; /* Light Orange/Yellow - Borders */
    --color-divider: #FFE0B2; /* Lighter divider, collapsible triggers */

    /* Status & Feedback Colors */
    --color-success: #2E7D32;
    --color-error: #C62828;
    --color-error-bg: #FFEBEE;
    --color-info: #0277BD;
    --color-info-bg: #E1F5FE;

    /* AI Specifics */
    --color-ai-title: #D32F2F; /* A distinct color for the main AI response title */
    --color-ai-section-heading-text: #3E2723; /* Dark brown for section headings */
    --color-ai-section-heading-border: var(--color-primary); /* Primary orange for border */

    /* Western Hits Specific Colors */
    --color-hit-positive-strong: #4CAF50; /* Darker Green (Trine) */
    --color-hit-positive-mild: #81C784;  /* Lighter Green (Sextile, Semi-Sextile) */
    --color-hit-negative-strong: #F44336; /* Darker Red (Opposition) */
    --color-hit-negative-mild: #E57373;  /* Lighter Red (Square) */
    --color-hit-irritating: #FFC107;     /* Amber/Yellow (Semi-Square, Quincunx) */
    --color-hit-conjunction: #2196F3;    /* Blue (Conjunction/Yuti) */
    --color-hit-none: #BDBDBB;           /* Grey for no major aspect */
}

/* Basic Reset & Global Styles */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--color-background);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--color-text-medium);
    line-height: 1.6;
    font-size: 16px;
    padding-bottom: 40px;
}

/* Dashboard Layout */
.hits-dashboard {
  max-width: 1600px;
  margin: 25px auto;
  padding: 25px;
  background-color: var(--color-surface-alt);
  border-radius: 12px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.07);
}

.dashboard-container {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.left-panel {
    flex: 1;
    min-width: 380px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.right-panel {
    flex: 2.5;
    min-width: 400px;
    display: flex;
    flex-direction: column;
}

h1 {
    color: var(--color-primary);
    font-size: 28px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 25px;
    text-align: center;
}

/* Section container for AI chat, similar to Prashna's .chart-section.ai-analysis */
.analysis-output-section {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--color-surface);
    padding: 0; /* Tabs will handle padding */
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    border: 1px solid var(--color-border);
    min-height: 0;
    overflow: hidden; /* Important for tabs */
}
.analysis-output-section > h2 {
    color: var(--color-text-dark);
    font-size: 22px;
    font-weight: 600;
    margin: 20px 20px 0 20px; /* Padding for the main title */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}


/* Birth Details Form (similar to Vedic app) */
.birth-details-form {
    background: var(--color-surface);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border: 1px solid var(--color-border);
    margin-bottom: 20px;
}
.birth-details-form h3 {
    color: var(--color-text-dark);
    font-size: 17px;
    margin-top: 10px;
    margin-bottom: 8px;
}
.form-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.form-section { margin-bottom: 3px; min-width: 150px; }
.form-row .form-section:first-child { flex: 1; }
.form-row .form-section:nth-child(2) { flex: 0 0 150px; min-width: 140px; }
.input-group { display: flex; gap: 5px; width: 100%; }
.input-group input,
.birth-details-form input[type="text"],
.birth-details-form select {
    padding: 8px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 14px; box-sizing: border-box; color: var(--color-text-medium); background-color: var(--color-surface);
}
.birth-details-form .form-section .input-group input[name="day"], .birth-details-form .form-section .input-group input[name="month"] { flex: 0 0 60px; min-width: 50px; text-align: center; }
.birth-details-form .form-section .input-group input[name="year"] { flex: 1; min-width: 70px; text-align: center;}
.birth-details-form .form-section .input-group input[name="hour"], .birth-details-form .form-section .input-group input[name="min"] { flex: 1; min-width: 60px; text-align: center;}
input[type="text"]:focus, input[type="number"]:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary, #E65100), 0.15); }
.coordinates-display { margin-top: 6px; font-size: 12px; color: var(--color-text-light); display: flex; justify-content: space-between; }
#coordinates, #timezone { font-size: 12px; color: var(--color-text-light); }
.generate-btn { background: var(--color-primary); color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; width: 100%; transition: background-color 0.3s ease, opacity 0.3s ease; box-sizing: border-box; }
.generate-btn:hover:not(:disabled) { background: var(--color-primary-dark); }
.generate-btn:disabled { background-color: #cccccc; cursor: not-allowed; opacity: 0.7; }
.generate-btn.small { padding: 8px 15px; font-size: 13px; width: auto; font-weight: 500;}
#loadingIndicator, #aiLoading { text-align: center; padding: 10px; color: var(--color-text-light); }
#loadingIndicator { padding: 20px; }
.spinner { border: 4px solid rgba(var(--color-primary, #E65100), 0.2); border-top: 4px solid var(--color-primary); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 0 auto 10px; }
.spinner.small { width: 20px; height: 20px; border-width: 3px; margin: 0 auto 5px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#errorMessage { color: var(--color-error); padding: 12px; background: var(--color-error-bg); border: 1px solid var(--color-error); border-left-width: 4px; border-radius: 4px; margin-top: 15px; font-size: 14px; box-shadow: 0 2px 4px rgba(var(--color-error), 0.1); }


/* Language Tabs */
.language-tabs {
    display: flex;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.language-tab {
    padding: 8px 16px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 16px;
    color: var(--color-text-light);
    outline: none;
    transition: color 0.2s ease, border-bottom-color 0.2s ease, background-color 0.2s ease;
}
.language-tab:hover:not(.active) {
    color: var(--color-text-medium);
    background-color: rgba(var(--color-primary, #E65100), 0.05);
}
.language-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

/* AI Chat Container (re-purposed for tabs) */
.ai-chat-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
    overflow: hidden;
    min-height: 0;
}

/* jQuery UI Tabs Overrides */
#analysisTabs {
    border: none; /* Remove jQuery UI default borders */
}
#analysisTabs .ui-tabs-nav {
    background: var(--color-surface-alt);
    border: none;
    border-bottom: 1px solid var(--color-border);
    padding: 0 10px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
#analysisTabs .ui-tabs-nav li {
    background: none;
    border: none;
    margin: 0;
}
#analysisTabs .ui-tabs-nav li .ui-tabs-anchor {
    color: var(--color-text-light);
    font-size: 16px;
    padding: 10px 18px;
    outline: none;
    text-decoration: none; /* Remove default underline from anchor */
    border-bottom: 3px solid transparent;
}
#analysisTabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
#analysisTabs .ui-tabs-nav li:hover .ui-tabs-anchor {
    color: var(--color-primary);
    background: var(--color-surface); /* Match tab content bg */
    border-bottom-color: var(--color-primary);
}
/* This is the general panel styling, applies to all panels if not overridden */
#analysisTabs .ui-tabs-panel {
    padding: 20px;
    background: var(--color-surface);
    min-height: 400px; /* Ensure panels have some height */
    max-height: 70vh; /* Allow enough height before scrollbar */
    overflow-y: auto; /* Make content scrollable if it exceeds max-height */
}


/* Hits Table Styling */
#hitsTableContainer, #dashaContainer {
    overflow-x: auto; /* Allow horizontal scrolling for wide tables */
}
#hitsTableContainer table, #dashaContainer table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 14px;
    color: var(--color-text-medium);
}
#hitsTableContainer th, #hitsTableContainer td,
#dashaContainer th, #dashaContainer td {
    border: 1px solid var(--color-divider);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
#hitsTableContainer th, #dashaContainer th {
    background-color: var(--color-surface-alt);
    color: var(--color-text-dark);
    font-weight: 600;
}
#hitsTableContainer tr:nth-child(even), #dashaContainer tr:nth-child(even) {
    background-color: #f9f9f9;
}
#hitsTableContainer td.hit-cell {
    font-weight: 500;
    text-align: center;
}
.hit-positive-strong { background-color: var(--color-hit-positive-strong) !important; color: white; }
.hit-positive-mild { background-color: var(--color-hit-positive-mild) !important; color: var(--color-text-dark); }
.hit-negative-strong { background-color: var(--color-hit-negative-strong) !important; color: white; }
.hit-negative-mild { background-color: var(--color-hit-negative-mild) !important; color: white; }
.hit-irritating { background-color: var(--color-hit-irritating) !important; color: var(--color-text-dark); }
.hit-conjunction { background-color: var(--color-hit-conjunction) !important; color: white; }
.hit-none { color: var(--color-text-light); }

/* Detailed Remedies Table Styling */
#detailedRemediesContainer table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 13px; /* Slightly smaller font for more content */
    color: var(--color-text-medium);
    table-layout: fixed; /* Ensures columns respect width settings */
}

#detailedRemediesContainer th,
#detailedRemediesContainer td {
    border: 1px solid var(--color-divider);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    word-wrap: break-word; /* Allows long words to break */
    white-space: normal;   /* Ensures text wraps normally */
}

#detailedRemediesContainer th {
    background-color: var(--color-surface-alt);
    color: var(--color-text-dark);
    font-weight: 600;
}

#detailedRemediesContainer tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Adjust column widths - these are examples, fine-tune as needed */
#detailedRemediesContainer th:nth-child(1), /* Hit */
#detailedRemediesContainer td:nth-child(1) { width: 18%; }
#detailedRemediesContainer th:nth-child(2), /* Planet Treated */
#detailedRemediesContainer td:nth-child(2) { width: 12%; }
#detailedRemediesContainer th:nth-child(3), /* Dasha Context */
#detailedRemediesContainer td:nth-child(3) { width: 10%; }
#detailedRemediesContainer th:nth-child(4), /* Remedy Type */
#detailedRemediesContainer td:nth-child(4) { width: 12%; }
#detailedRemediesContainer th:nth-child(5), /* Description */
#detailedRemediesContainer td:nth-child(5) { width: 22%; }
#detailedRemediesContainer th:nth-child(6), /* Astro-Vastu */
#detailedRemediesContainer td:nth-child(6) { width: 12%; }
#detailedRemediesContainer th:nth-child(7), /* Color Therapy */
#detailedRemediesContainer td:nth-child(7) { width: 8%; }
#detailedRemediesContainer th:nth-child(8), /* Elemental/General */
#detailedRemediesContainer td:nth-child(8) { width: 8%; }

/* Style for N/A cells if you want them grayed out */
#detailedRemediesContainer td.na-cell {
    color: var(--color-text-light);
    font-style: italic;
}


/* AI Insights Tab (Restored flat structure for layout) */
/* The #aiInsightsTab is a tab panel. Its direct children are flex items for layout */
#aiInsightsTab {
    display: flex; /* Make the tab panel itself a flex container */
    flex-direction: column; /* Stack children vertically */
    padding: 20px; /* Restore padding to the panel itself */
    background: var(--color-surface); /* Keep background for consistency */
    /* min-height and max-height are on the #analysisTabs .ui-tabs-panel already */
    /* Remove overflow:hidden from here, let children manage */
}

/* Collapsible section for initial AI Overview */
.collapsible-section {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 15px; /* Space between collapsible and chat area */
    background-color: var(--color-surface-alt);
    overflow: hidden; /* Ensures rounded corners with content */
    flex-shrink: 0; /* Prevents it from shrinking in flex container */
}

.collapsible-header {
    background-color: var(--color-primary);
    color: white;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none; /* Prevent text selection on click */
}

.collapsible-header .collapsible-arrow {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid white; /* Down arrow */
    transition: transform 0.3s ease;
}

.collapsible-header.collapsed .collapsible-arrow {
    transform: rotate(-90deg); /* Left arrow when collapsed */
}

.collapsible-content {
    padding: 15px;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface); /* Content background */
}
/* Ensure markdown content within collapsible content is styled */
.collapsible-content p, .collapsible-content ul {
    font-size: 14px;
    margin-bottom: 10px;
}
.collapsible-content strong { color: var(--color-text-dark); font-weight: 600; }
.collapsible-content ul { padding-left: 25px; list-style-type: disc; }
.collapsible-content li { margin-bottom: 0.5em; }


/* Wrapper for chat messages and loading indicator */
.ai-response-area-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow it to take all available vertical space */
    min-height: 0; /* Crucial for nested flex containers with overflow */
    margin-bottom: 15px; /* Space before input/quick questions */
}

/* AI Response Area (chat messages) */
#aiResponse {
    background: var(--color-surface-alt); /* Lighter background for chat area */
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 18px; /* Space between messages */
    overflow-y: auto; /* Make only the chat messages scrollable */
    flex-grow: 1; /* Allow it to take up available vertical space */
    min-height: 100px; /* Minimum height to always show scrollbar if content is small */
}

/* Specific styling for AI message types */
.ai-message {
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-medium);
    background-color: var(--color-surface);
    border: 1px solid var(--color-divider);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.ai-message.ai-intro {
    /* This style is now for the content within collapsible-content */
    background: var(--color-info-bg);
    border-left: 4px solid var(--color-info);
    color: var(--color-text-dark);
    box-shadow: none; 
    padding: 12px 18px; 
    margin-bottom: 10px; /* If rendered directly. In collapsible, padding is on content div */
    font-size:16px;
}
.ai-message.ai-intro p, .ai-message.ai-intro ul { margin-bottom: 0.5em; }
.ai-message.ai-intro ul { padding-left: 20px; }
.ai-message.ai-intro li { margin-bottom: 0.3em; }

.ai-message strong { color: var(--color-text-dark); font-weight: 600; }
.ai-message em { font-style: italic; }
.ai-message h2, .ai-message h3, .ai-message h4, .ai-message h5, .ai-message h6 {
    color: var(--color-text-dark);
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    line-height: 1.3;
}
.ai-message h2.ai-response-main-title { font-size: 22px; color: var(--color-ai-title); border-bottom: 1px dashed var(--color-divider); padding-bottom: 5px; }
.ai-message h3.ai-response-section-heading { font-size: 18px; color: var(--color-ai-section-heading-text); border-bottom: 1px solid var(--color-ai-section-heading-border); padding-bottom: 4px; }
.ai-message h3.ai-response-sub-heading { font-size: 16px; color: var(--color-text-dark); font-weight: 600; }

.ai-message ul { padding-left: 25px; margin-bottom: 1em; list-style-type: disc; }
.ai-message li { margin-bottom: 0.5em; }

/* AI Question Bubble */
.ai-message.ai-question,
.ai-message.ai-question-hindi {
    background: #E3F2FD; /* Light blue for user questions */
    border: 1px solid #90CAF9;
    border-left-width: 4px;
    align-self: flex-end; /* Push to the right */
    max-width: 80%; /* Limit width */
    margin-left: auto; /* Push to the right */
}

/* AI Loading Indicator (within the main panel, above input) */
#aiLoading {
    text-align: center;
    padding: 10px;
    color: var(--color-text-light);
    flex-shrink: 0; /* Prevent it from shrinking */
}

/* AI Input container */
.ai-input-container {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0; /* Prevent it from shrinking */
    padding: 15px 0 10px 0; /* Padding for input area, within the .ui-tabs-panel's padding */
    border-top: 1px solid var(--color-divider); /* Separator line */
    background-color: var(--color-surface); /* Match panel background */
    margin-top: 15px; /* Space between chat area and input */
}
.ai-input-container input[type="text"] {
    flex: 1; /* Take remaining space */
    padding: 12px 15px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 16px;
    color: var(--color-text-medium);
    background-color: var(--color-surface);
}
.ai-input-container input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary, #E65100), 0.15);
}
.ai-input-container .generate-btn.small {
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
}

/* Quick Questions styling */
.quick-questions {
    padding: 0 0 15px 0; /* Padding for quick questions area */
    background-color: var(--color-surface); /* Match panel background */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Allow questions to wrap */
    gap: 10px;
    flex-shrink: 0; /* Prevent it from shrinking */
    border-top: 1px solid var(--color-border); /* Add a border to separate from input container */
    margin-top: 10px; /* Space between input and quick questions */
}
.quick-questions p {
    margin: 0 8px 0 0; /* Space after "Quick Questions:" label */
    color: var(--color-text-medium);
    font-size: 15px;
    font-weight: 500;
    flex-basis: 100%; /* Make label take full width */
    margin-bottom: 8px;
}
.quick-question {
    display: inline-block;
    background: var(--color-surface-alt);
    padding: 7px 14px;
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    user-select: none;
    color: var(--color-primary);
    border: 1px solid var(--color-secondary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.quick-question:hover:not([style*="pointer-events: none"]) {
    background: var(--color-secondary);
    color: var(--color-text-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(var(--color-primary, #E65100), 0.15);
}


/* General table styling (re-applying to all tables within tabs) */
/* The previous structure already handled this correctly for all tables within tabs */
#hitsTableContainer, #yutiAnalysisContainer, #detailedRemediesContainer {
    overflow-x: auto; /* Ensure horizontal scrolling for tables if content is too wide */
}
#hitsTableContainer table, #yutiAnalysisContainer table, #detailedRemediesContainer table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 14px;
    color: var(--color-text-medium);
}
#hitsTableContainer th, #hitsTableContainer td,
#yutiAnalysisContainer th, #yutiAnalysisContainer td,
#detailedRemediesContainer th, #detailedRemediesContainer td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--color-divider);
}
#hitsTableContainer th, #yutiAnalysisContainer th, #detailedRemediesContainer th {
    background-color: var(--color-surface-alt);
    color: var(--color-text-dark);
    font-weight: 600;
}
#hitsTableContainer tr:nth-child(even), #yutiAnalysisContainer tr:nth-child(even), #detailedRemediesContainer tr:nth-child(even) {
    background-color: #f9f9f9;
}
#hitsTableContainer td.hit-cell, #yutiAnalysisContainer td.yuti-cell {
    font-weight: 500;
    text-align: center;
}
.hit-positive-strong { background-color: var(--color-hit-positive-strong) !important; color: white; }
.hit-positive-mild { background-color: var(--color-hit-positive-mild) !important; color: var(--color-text-dark); }
.hit-negative-strong { background-color: var(--color-hit-negative-strong) !important; color: white; }
.hit-negative-mild { background-color: var(--color-hit-negative-mild) !important; color: white; }
.hit-irritating { background-color: var(--color-hit-irritating) !important; color: var(--color-text-dark); }
.hit-conjunction { background-color: var(--color-hit-conjunction) !important; color: white; }
.hit-none { color: var(--color-text-light); }

/* Detailed Remedies Table Specific Adjustments (if needed) */
#detailedRemediesContainer table {
    table-layout: fixed; /* Keep fixed layout for better column control */
}
#detailedRemediesContainer td.na-cell {
    color: var(--color-text-light);
    font-style: italic;
}

/* YUTI Analysis Section Specific Styles */
.yuti-conjunction-section {
    background: var(--color-surface);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    border: 1px solid var(--color-border);
}
.yuti-conjunction-section h4 {
    color: var(--color-primary-dark);
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--color-divider);
}
.yuti-conjunction-section p, .yuti-conjunction-section ul {
    font-size: 14px;
    margin-bottom: 10px;
}
.yuti-conjunction-section strong {
    color: var(--color-text-dark);
}
.yuti-conjunction-section ul {
    padding-left: 25px;
}
.yuti-conjunction-section li {
    margin-bottom: 5px;
}
.yuti-conjunction-section .energy-remedy-box {
    background-color: var(--color-info-bg);
    border: 1px solid var(--color-info);
    border-left: 4px solid var(--color-info);
    padding: 10px 15px;
    border-radius: 6px;
    margin-top: 15px;
    font-size: 14px;
}
.yuti-conjunction-section .energy-remedy-box strong {
    color: var(--color-info);
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .hits-dashboard { padding: 15px; margin: 15px auto; }
    .analysis-output-section > h2 { font-size: 20px; }
    .language-tab { font-size: 15px; padding: 7px 12px; }

    #analysisTabs .ui-tabs-nav li .ui-tabs-anchor { font-size: 14px; padding: 7px 12px; }
    #analysisTabs .ui-tabs-panel { padding: 15px; }

    .ai-message { font-size: 15px; line-height: 1.7; }
    .ai-input-container { padding: 15px 10px 10px 10px; flex-direction: column;}
    .ai-input-container input[type="text"] { font-size: 15px; }
    .ai-input-container .generate-btn.small { width: 100%; padding: 12px;}
    .quick-questions { padding: 0 10px 15px 10px; }
    .quick-question { font-size: 13px; padding: 6px 12px;}
}

@media (max-width: 480px) {
    body { font-size: 15px; }
    h1 { font-size: 22px; }
    .hits-dashboard { padding: 10px; margin: 10px auto; }
    .analysis-output-section > h2 { font-size: 18px; margin-bottom: 12px;}
    .ai-message { font-size: 14px; }
}

/* --- END OF FILE western-hits-analyzer/styles.css --- */