/* --- START OF FILE frontend/kundali-ai/styles.css (PRASHNA UI EMULATION & FONT/SPACING) --- */

/* 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 */

    --color-text-dark: #4E342E;  /* Dark Brown - Headings, strong text */
    --color-text-medium: #5D4037;/* Slightly darker medium text - Default text */
    --color-text-light: #795548; /* Light Brown - Subtle text, placeholders */

    /* Status & Feedback Colors (from Prashna for consistency if desired) */
    --color-success: #2E7D32;
    --color-error: #C62828;
    --color-error-bg: #FFEBEE;
    --color-info: #0277BD;
    --color-info-bg: #E1F5FE;

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

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

html, body {
    height: 100%;
    min-height: 100%; /* Ensure it can grow taller */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--color-background); /* Apply main page background */
}

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

/* Dashboard Layout */
.astrology-dashboard {
    max-width: 1600px; /* Can be same as Prashna or adjusted */
    margin: 25px auto;
    padding: 25px;
    background-color: var(--color-surface-alt); /* Lighter dashboard bg, like Prashna's .astrology-dashboard */
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
}

.dashboard-container {
    display: flex;
    gap: 30px; /* Spacing between left/right panels */
    flex-wrap: wrap;
    align-items: flex-start;
}

.left-panel {
    flex: 1;
    min-width: 380px; /* Similar to Prashna's */
    max-width: 480px; /* Similar to Prashna's */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.right-panel {
    flex: 2.5; /* Adjust ratio as needed */
    min-width: 400px; /* Ensure it doesn't get too squeezed */
    display: flex;
    flex-direction: column;
    /* Let height be determined by content or flex-grow in .ai-analysis */
}

/* Headings for the page (not AI content) */
h1 {
    color: var(--color-primary); /* Orange like Prashna H1 */
    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 */
.chart-section.ai-analysis {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow it to take available vertical space */
    background-color: var(--color-surface); /* White background for this box */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    border: 1px solid var(--color-border);
    min-height: 0; /* For flex child */
}
.chart-section.ai-analysis > h2 { /* Title like "AI Astrology Assistant" */
    color: var(--color-text-dark);
    font-size: 22px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}


/* Form styling - Keep your existing form styles, they seem fine */
.birth-chart-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; }
.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, input[type="text"] { 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-chart-form .form-section .input-group input[name="day"], .birth-chart-form .form-section .input-group input[name="month"] { flex: 0 0 60px; min-width: 50px; text-align: center; }
.birth-chart-form .form-section .input-group input[name="year"] { flex: 1; min-width: 70px; text-align: center;}
.birth-chart-form .form-section .input-group input[name="hour"], .birth-chart-form .form-section .input-group input[name="min"] { flex: 1; min-width: 60px; text-align: center;}
input[type="text"]:focus, input[type="number"]: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;} /* Adjusted small button */
#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); } }
#chartContainer { display: flex; flex-direction: column; gap: 20px; }
.chart-section:not(.ai-analysis) { background: var(--color-surface); padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid var(--color-border); } /* Styles for non-AI chart sections */
.chart-section:not(.ai-analysis) h2 { color: var(--color-primary); margin-top:0; margin-bottom:15px; font-size:18px; padding-bottom:8px; border-bottom:1px solid var(--color-divider); }
.chart-display { min-height: 300px; display: flex; align-items: center; justify-content: center; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; padding: 10px; }
.chart-display svg { max-width: 100%; height: auto; display: block; }
#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); }


/* AI Chat Styles - PRASHNA UI EMULATION */
.language-tabs {
    display: flex;
    margin-bottom: 18px; /* More space like Prashna */
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.language-tab {
    padding: 8px 16px; /* Prashna-like padding */
    background: none;
    border: none;
    border-bottom: 3px solid transparent; /* Thicker inactive border */
    cursor: pointer;
    font-size: 16px; /* Larger tab font */
    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); /* Subtle hover bg */
}
.language-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

.ai-chat-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
    overflow: hidden; /* Contain #aiResponse scroll */
    min-height: 0;
}

/* Main AI response area (#aiResponse holds the collapsible items) */
#aiResponse {
    background: var(--color-surface-alt); /* Light cream for the scrollable list background */
    padding: 15px; /* Good padding */
    border-radius: 8px;
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 18px; /* More gap between collapsible items like Prashna sections */
    overflow-y: auto;
    flex-grow: 1;
    max-height: 65vh; /* Can be adjusted, similar to Prashna's right panel sizing */
    min-height: 300px;
}

/* Collapsible item styling */
.ai-collapsible-item {
    background: var(--color-surface); /* White background for each item */
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
    border: 1px solid var(--color-border); /* Primary border color */
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
    flex-shrink: 0;
    overflow: hidden; /* Crucial for collapse animation */
}
.ai-collapsible-item:hover {
     box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.collapsible-trigger {
    background-color: var(--color-divider); /* Light yellow like Prashna collapsible triggers */
    color: var(--color-text-dark);
    cursor: pointer;
    padding: 14px 18px; /* Spacious trigger */
    width: 100%;
    border: none;
    border-bottom: 1px solid transparent;
    text-align: left;
    outline: none;
    font-size: 17px; /* Larger trigger font */
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease, border-bottom-color 0.2s ease;
    user-select: none;
}
.ai-collapsible-item.active .collapsible-trigger {
    background-color: #FFF176; /* Slightly darker yellow for active trigger */
    border-bottom-color: var(--color-border);
}
.collapsible-trigger:hover {
    background-color: #FFFDE7; /* Lighter hover for trigger */
}
.collapsible-trigger .icon { /* Style for +/- icon */
    font-weight: bold; margin-left: 12px; flex-shrink: 0; width: 1em;
    text-align: center; transition: transform 0.3s ease-out;
    font-size: 1.3em; line-height: 1; color: var(--color-text-light);
}
.ai-collapsible-item.active .collapsible-trigger .icon { transform: rotate(180deg); } /* Prashna uses rotate for chevron */


.collapsible-content {
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.25, 0.1, 0.25, 1), padding 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
    overflow: hidden;
    padding: 0 20px; /* Horizontal padding during transition */
    background-color: var(--color-surface); /* Match item background */
}
.ai-collapsible-item.active .collapsible-content {
    max-height: 8000px; /* Large enough for any content */
    overflow: visible; /* CRITICAL: Allow content to be fully visible */
    padding: 20px; /* Spacious padding when open */
}

/* Styles for the content generated by AI, INSIDE .collapsible-content */
.ai-message.ai-response {
    background: transparent;
    padding: 0; /* Padding will be on children like <p>, <h3> */
    font-size: 17px; /* LARGER BASE FONT FOR AI CONTENT (Prashna-like) */
    line-height: 1.75;
    color: var(--color-text-medium);
    overflow: visible !important; /* Ensure it doesn't clip */
    height: auto !important;
    max-height: none !important;
}

/* Main Title for AI Response (e.g., Prashna Kundali Analysis - Marriage Question) */
.ai-response-main-title { /* Corresponds to ## Title from formatAIResponse */
    font-size: 1.5em; /* Approx 25.5px if base is 17px */
    color: var(--color-ai-title); /* Distinct title color */
    text-align: center;
    margin-top: 0; /* No top margin if it's the first thing */
    margin-bottom: 30px; /* More space after main title */
    font-weight: 600;
    padding-bottom: 10px;
    /* Optional: border-bottom: 2px solid var(--color-ai-title); */
}

/* Numbered Section Headings (e.g., 1. Question Nature:) */
.ai-response-section-heading { /* Corresponds to "1. Title" or "II. Title" from formatAIResponse */
    font-size: 1.25em; /* Approx 21px */
    color: var(--color-ai-section-heading-text); /* Dark text for heading */
    margin-top: 25px; /* More space above section heading */
    margin-bottom: 12px; /* Space after heading, before paragraph */
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-ai-section-heading-border); /* Primary color border */
    font-weight: 600; /* Bold */
}
.ai-message.ai-response > .ai-response-section-heading:first-child, /* If it's the direct first child */
.ai-message.ai-response > h2 + .ai-response-section-heading { /* Or after an H2 title */
    margin-top: 10px; /* Less top margin for the very first section heading */
}


/* Sub-sub-headings if used (h4) */
.ai-response-sub-heading { /* Corresponds to ### Title from formatAIResponse */
    font-size: 1.1em; /* Approx 18.7px */
    color: var(--color-text-dark);
    margin-top: 18px;
    margin-bottom: 10px;
    font-weight: 600;
}

.ai-message.ai-response p {
    margin-top: 0; /* Paragraphs don't need extra top margin if headings have it */
    margin-bottom: 18px; /* More space between paragraphs for readability */
}
.ai-message.ai-response p:last-child {
    margin-bottom: 0;
}

.ai-message.ai-response ul {
    padding-left: 30px;
    margin-top: 10px;
    margin-bottom: 18px;
}
.ai-message.ai-response li {
    margin-bottom: 8px;
    padding-left: 5px; /* Slight indent for bullet content */
}
.ai-message.ai-response li::marker { /* Style bullet points if desired */
    color: var(--color-primary);
}


.ai-message.ai-response strong {
    font-weight: 600;
    color: var(--color-text-dark);
}

/* Initial overview specific styling (if needed to differentiate more) */
.ai-collapsible-item.ai-initial-overview .collapsible-trigger {
     background-color: #FEF9E7; /* Even lighter for initial overview trigger */
     font-size: 17px;
}
.ai-collapsible-item.ai-initial-overview.active .collapsible-trigger {
     background-color: #FFF5CC; /* Lighter active state for initial overview */
     border-bottom-color: var(--color-secondary-dark);
}
.ai-collapsible-item.ai-initial-overview .collapsible-content {
    background-color: #FFFDF5; /* Very light content bg for initial overview */
}
/* User's question bubble (if displayed directly in #aiResponse, outside collapsible) */
.ai-message.ai-intro { 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; 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.ai-question,
.ai-message.ai-question-hindi {
    font-size: 16px;
    background: #E3F2FD; /* Light blue like Prashna user question */
    border: 1px solid #90CAF9; /* Prashna user question border */
    border-left-width: 4px;
    color: var(--color-text-dark);
    align-self: flex-end;
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 8px;
    margin-left: auto; /* Push to right */
}

/* AI Input area styling */
.ai-input-container {
    display: flex;
    gap: 12px; /* More gap */
    align-items: center;
    flex-shrink: 0;
    padding: 20px 15px 15px 15px; /* Spacious padding */
    border-top: 1px solid var(--color-divider);
    margin-top: 15px; /* Space from chat content */
    background-color: var(--color-surface); /* Subtle distinct background for input area */
}
.ai-input-container input[type="text"] {
    flex: 1;
    padding: 12px 15px; /* Larger input padding */
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 16px; /* Larger input font */
    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 { /* Ensure small ask button is styled well */
    padding: 10px 20px; /* Make it a bit bigger */
    font-size: 15px;
    font-weight: 600;
}

/* Quick Questions styling */
.quick-questions {
    padding: 0 15px 20px 15px; /* Match input container padding */
    background-color: var(--color-surface); /* Match input area bg */
    border-bottom-left-radius: 8px; /* If .ai-analysis has radius */
    border-bottom-right-radius: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px; /* More gap */
    flex-shrink: 0;
}
.quick-questions p {
    margin: 0 8px 0 0;
    color: var(--color-text-medium);
    font-size: 15px;
    font-weight: 500;
}
.quick-question {
    display: inline-block;
    background: var(--color-surface-alt); /* Lighter bg for quick questions */
    padding: 7px 14px; /* Good padding */
    border-radius: 18px; /* Pill shape */
    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);
}


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

    .ai-message.ai-response {
        font-size: 15px; /* Slightly smaller on mobile */
        line-height: 1.7;
    }
    .ai-response-main-title {
        font-size: 1.3em; /* ~19.5px */
        margin-bottom: 20px;
    }
    .ai-response-section-heading {
        font-size: 1.15em; /* ~17px */
        margin-top: 18px;
        margin-bottom: 10px;
    }
     .ai-response-sub-heading {
        font-size: 1.05em;
    }
    .collapsible-trigger { font-size: 16px; padding: 12px 15px; }
    .collapsible-content, .ai-collapsible-item.active .collapsible-content {
        padding: 15px; /* Adjust padding for mobile */
    }
    #aiResponse { padding: 10px; gap: 12px; max-height: 60vh;}
    .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; }
    .astrology-dashboard { padding: 10px; margin: 10px auto; }
    .chart-section.ai-analysis > h2 { font-size: 18px; margin-bottom: 12px;}
    .ai-message.ai-response { font-size: 14px; }
    .ai-response-main-title { font-size: 1.25em; } /* ~17.5px */
    .ai-response-section-heading { font-size: 1.1em; } /* ~15.4px */
}
/* --- END OF CSS FILE --- */