:root {
    /* Colors */
    --color-background-primary: #DDEB65;
    --color-surface-primary: #FFFFFF;
    --color-surface-muted: #F7F8FB;
    --color-border-subtle: #E4E6F0;
    --color-text-primary: #111827;
    --color-text-secondary: #6B7280;
    --color-text-tertiary: #9CA3AF;
    --color-accent-primary: #7C3AED;
    --color-accent-primary-soft: #EDE9FE;
    --color-accent-positive: #84CC16;
    --color-accent-positive-soft: #E9FCD4;
    --color-accent-warning: #F59E0B;
    --color-accent-neutral: #E5E7EB;
    --color-icon-muted: #D1D5DB;

    /* Typography */
    --font-family-sans: 'Inter', 'SF Pro Text', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --font-size-display: 28px;
    --line-height-display: 36px;
    --letter-spacing-display: -0.02em;

    --font-size-h1: 22px;
    --line-height-h1: 30px;
    --letter-spacing-h1: -0.01em;

    --font-size-h2: 18px;
    --line-height-h2: 26px;
    --letter-spacing-h2: 0em;

    --font-size-body: 14px;
    --line-height-body: 20px;
    --letter-spacing-body: 0em;

    --font-size-label: 12px;
    --line-height-label: 16px;
    --letter-spacing-label: 0.02em;

    --font-size-caption: 11px;
    --line-height-caption: 14px;
    --letter-spacing-caption: 0.02em;

    /* Spacing */
    --spacing-xxs: 4px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;
    --spacing-xxxl: 40px;

    /* Shape (Radii) */
    --radius-card-large: 28px;
    --radius-card-medium: 24px;
    --radius-chip: 999px;
    --radius-button: 999px;
    --radius-avatar: 999px;

    /* Elevation and Effects */
    --shadow-card: 0 18px 40px -18px rgba(15, 23, 42, 0.10);
    --shadow-chip: 0 8px 20px -10px rgba(15, 23, 42, 0.08);
    --border-divider: 1px solid #E5E7EB;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
    background-color: var(--color-background-primary);
    margin: 0;
    padding: var(--spacing-xxxl) var(--spacing-md);
    min-height: 100vh;
    box-sizing: border-box;
}

.main-wrapper {
    max-width: 2000px;
    margin: 0 auto;
    width: 100%;
}

/* Headings */
h1 {
    font-size: var(--font-size-display);
    line-height: var(--line-height-display);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-display);
    color: var(--color-text-primary);
    margin-top: 0;
}

h2 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-h1);
    color: var(--color-text-primary);
    margin-top: 0;
}

h3 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-h2);
    color: var(--color-text-primary);
    margin-top: 0;
}

/* Common Card Styles */
.card {
    background-color: var(--color-surface-primary);
    border-radius: var(--radius-card-large);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-xl);
    border: 1px solid var(--color-border-subtle);
}

/* Buttons */
.primary-btn {
    background-color: var(--color-accent-positive);
    color: var(--color-surface-primary);
    border-radius: var(--radius-button);
    padding: 10px 20px; /* Fixed padding for consistency */
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body);
    cursor: pointer;
    border: 1px solid transparent; /* For alignment with secondary */
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.primary-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: var(--shadow-chip);
}

.primary-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.primary-btn.secondary {
    background-color: var(--color-surface-primary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-accent-neutral);
}

.primary-btn.secondary:hover {
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
    border-color: var(--color-text-tertiary);
}

.primary-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Form Elements */
input[type="text"],
input[type="email"],
textarea,
select {
    padding: 10px 12px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px; /* Slightly more rounded than xxs */
    font-size: var(--font-size-body);
    color: var(--color-text-primary);
    background-color: var(--color-surface-muted);
    width: 100%; /* Default to full width in containers */
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

input:hover,
textarea:hover,
select:hover {
    background-color: var(--color-surface-primary);
}

input:focus,
textarea:focus,
select:focus {
    background-color: var(--color-surface-primary);
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px var(--color-accent-primary-soft);
    outline: none;
}

/* Messages (Alerts) */
.messages {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--spacing-xs);
    border: 1px solid var(--color-border-subtle);
    font-size: var(--font-size-body);
    margin-bottom: var(--spacing-lg);
}

.messages.success {
    background-color: var(--color-accent-positive-soft);
    border-color: var(--color-accent-positive);
    color: var(--color-text-primary);
}

.messages.info {
    background-color: var(--color-accent-primary-soft);
    border-color: var(--color-accent-primary);
    color: var(--color-text-primary);
}

.messages.warning {
    background-color: #fff3cd; /* Closest from palette */
    border-color: #ffe69c; /* Closest from palette */
    color: #664d03; /* Closest from palette */
}

.messages.error {
    background-color: #f8d7da; /* Closest from palette */
    border-color: #f1aeb5; /* Closest from palette */
    color: #842029; /* Closest from palette */
}

.messages.debug {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border-subtle);
    color: var(--color-text-secondary);
}

/* Utility Links */
.utility-links a {
    color: var(--color-accent-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.utility-links a:hover {
    text-decoration: underline;
}

/* Chat Pane / Drafts Pane (Card-like) */
.chat-pane,
.drafts-pane {
    background: var(--color-surface-primary);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-card-large);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-xl);
}

/* Chat History */
.chat-history {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--spacing-xs);
    background: linear-gradient(180deg, var(--color-surface-muted) 0%, var(--color-surface-primary) 100%);
    padding: var(--spacing-md);
}

.chat-bubble {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--spacing-lg);
    margin-bottom: var(--spacing-xs);
}

.chat-bubble strong {
    color: var(--color-text-primary);
}

.chat-bubble.user {
    background: var(--color-accent-primary);
    color: var(--color-surface-primary);
}

.chat-bubble.ai {
    background: var(--color-surface-muted);
    color: var(--color-text-primary);
}

/* Recipient Chips */
.recipient-chip {
    background: var(--color-accent-primary-soft);
    color: var(--color-accent-primary);
    border-radius: var(--radius-chip);
    padding: var(--spacing-xxs) var(--spacing-xs);
    font-size: var(--font-size-label);
}

.recipient-chip.invalid {
    background: #ffe6e6; /* Closest to danger background */
    color: #c82333; /* Closest to danger text */
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1100;
    padding: var(--spacing-md);
}

.modal.open {
    display: flex;
}

.modal-dialog {
    background: var(--color-surface-primary);
    border-radius: var(--radius-card-large);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xxl);
    width: 100%;
    max-width: 640px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-icon-muted);
    padding: var(--spacing-xxs);
    border-radius: var(--radius-button);
    transition: color 0.2s ease, background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.modal-close:hover {
    color: var(--color-text-primary);
    background-color: var(--color-surface-muted);
}

.page-header h1 {
    font-size: var(--font-size-display);
    line-height: var(--line-height-display);
}

.page-header p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
}

.chat-header h2 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
}

.drafts-pane h2 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
}

.drafts-table thead th {
    font-size: var(--font-size-label);
    color: var(--color-text-secondary);
}

.drafts-table tbody td {
    font-size: var(--font-size-body);
    color: var(--color-text-primary);
}

.drafts-table td::before {
    font-size: var(--font-size-label);
    color: var(--color-text-secondary);
}

.drafts-empty {
    border: 2px dashed var(--color-border-subtle);
    border-radius: var(--spacing-xs);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
}

/* Specific to follow_up_emails.html */
.action-btn {
    background: var(--color-accent-primary);
    color: var(--color-surface-primary);
    border-radius: var(--radius-button);
    font-size: var(--font-size-body);
    padding: var(--spacing-xs) var(--spacing-sm);
}

.action-btn:hover {
    background: var(--color-accent-primary);
    opacity: 0.9;
}

.secondary-btn {
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-primary);
    color: var(--color-text-secondary);
    border-radius: var(--radius-button);
    font-size: var(--font-size-body);
    padding: var(--spacing-xs) var(--spacing-sm);
}

.secondary-btn:hover {
    background: var(--color-surface-muted);
    color: var(--color-text-primary);
}

.modal-overlay .modal-dialog {
    border-radius: var(--radius-card-large);
}

.modal-overlay .modal-title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.modal-form label {
    font-size: var(--font-size-label);
    color: var(--color-text-secondary);
}

.reason-box {
    background: var(--color-accent-primary-soft);
    border: 1px solid var(--color-accent-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-body);
}

.empty-state {
    border: 2px dashed var(--color-border-subtle);
    border-radius: var(--radius-card-large);
    background: var(--color-surface-primary);
    color: var(--color-text-secondary);
}

.badge {
    background: var(--color-accent-primary-soft);
    color: var(--color-accent-primary);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-chip);
}

.remove-btn {
    background: #dc3545; /* Specific danger color, not in palette directly */
    color: var(--color-surface-primary);
    border-radius: var(--radius-button);
    font-size: var(--font-size-body);
    padding: var(--spacing-xs) var(--spacing-sm);
}

.remove-btn:hover {
    background: #c82333;
}

.summary {
    background: var(--color-surface-primary);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-card-large);
    padding: var(--spacing-md);
}

/* Loading Overlay */
.page-loading-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    z-index: 2000;
    backdrop-filter: blur(2px);
}

body.is-submitting .page-loading-overlay {
    display: flex;
}

.page-loading-overlay .message {
    background: var(--color-surface-primary);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-button);
    box-shadow: var(--shadow-card);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    border: 1px solid var(--color-border-subtle);
}

.page-loading-overlay .spinner {
    width: 20px;
    height: 20px;
    border: 3px solid var(--color-border-subtle);
    border-top-color: var(--color-accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Fix Modal Close Button */
.modal-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-icon-muted);
    border-radius: var(--radius-button);
    transition: background-color 0.2s, color 0.2s;
    padding: 0;
}

.modal-close:hover {
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
}