/* ============================================
   AMBIENT DESIGN SYSTEM - "Aurora" Theme
   
   A soft gradient, modern SaaS-style design system
   with friendly minimalism and subtle animations.
   ============================================ */

/* Import Outfit font globally */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    /* =========================================
       COLOR PALETTE
       ========================================= */
    
    /* Primary brand colors - used for CTAs, links, and emphasis */
    --ambient-primary: #7877c6;           /* Main brand purple */
    --ambient-primary-light: #8584d1;     /* Hover state for primary */
    --ambient-primary-dark: #6366f1;      /* Gradient end / active state */
    
    /* Accent colors for the aurora gradient background */
    --ambient-accent-coral: rgba(255, 119, 115, 0.1);   /* Top-right gradient */
    --ambient-accent-teal: rgba(78, 205, 196, 0.08);    /* Center gradient */
    --ambient-accent-purple: rgba(120, 119, 198, 0.15); /* Bottom-left gradient */
    
    /* Text colors - use dark for headings, muted for body text */
    --ambient-text-dark: #2d3748;    /* Headings, important text */
    --ambient-text-muted: #718096;   /* Body text, descriptions */
    --ambient-text-light: #a0aec0;   /* Placeholder text, hints */
    
    /* Surface colors - backgrounds for cards, modals, inputs */
    --ambient-surface: #ffffff;           /* Page background base */
    --ambient-surface-elevated: #ffffff;  /* Cards, modals, dropdowns */
    --ambient-surface-muted: #f7fafc;     /* Secondary backgrounds, hover states */
    --ambient-border: rgba(120, 119, 198, 0.1);  /* Subtle borders */
    
    /* =========================================
       SHADOWS - Elevation levels
       ========================================= */
    --ambient-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Small: inputs, small cards */
    
    --ambient-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 40px -10px rgba(120, 119, 198, 0.2);
    /* Medium: cards, dialogs */
    
    --ambient-shadow-lg: 0 10px 40px -10px rgba(120, 119, 198, 0.3);
    /* Large: modals, popovers */
    
    --ambient-shadow-btn: 0 4px 15px rgba(120, 119, 198, 0.35);
    /* Button resting state */
    
    --ambient-shadow-btn-hover: 0 8px 25px rgba(120, 119, 198, 0.45);
    /* Button hover state - creates "lift" effect */
    
    /* =========================================
       SPACING & RADIUS
       ========================================= */
    --ambient-radius-sm: 8px;    /* Inputs, small buttons, tags */
    --ambient-radius-md: 12px;   /* Buttons, small cards */
    --ambient-radius-lg: 20px;   /* Large cards, modals */
    
    /* =========================================
       TRANSITIONS
       ========================================= */
    --ambient-transition: all 0.3s ease;       /* Standard transitions */
    --ambient-transition-fast: all 0.2s ease;  /* Quick micro-interactions */
}


/* =============================================
   GLOBAL STYLES
   Applied to all pages via base template
   ============================================= */
body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ambient-text-dark);
    /* Aurora gradient background - subtle color orbs */
    background: 
        radial-gradient(ellipse at 20% 80%, var(--ambient-accent-purple) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, var(--ambient-accent-coral) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, var(--ambient-accent-teal) 0%, transparent 70%),
        var(--ambient-surface);
}


/* =============================================
   TYPOGRAPHY
   
   Use these for consistent text styling:
   - .ambient-heading-xl: Page titles, hero headings
   - .ambient-heading-lg: Section headers
   - .ambient-heading-md: Card titles, subsections
   - .ambient-text: Body paragraphs, descriptions
   - .ambient-text-lg: Lead paragraphs, intros
   ============================================= */

/* Base heading style (add size class for full styling) */
.ambient-heading {
    font-weight: 600;
    color: var(--ambient-text-dark);
    letter-spacing: -0.02em;
}

/* Extra Large: Main page titles, welcome messages
   Example: "Welcome to Ambient!" */
.ambient-heading-xl {
    font-size: 2.75rem;
    font-weight: 600;
    color: var(--ambient-text-dark);
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

/* Large: Section headers, feature titles
   Example: "Your Integrations" */
.ambient-heading-lg {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--ambient-text-dark);
    letter-spacing: -0.01em;
}

/* Medium: Card titles, dialog headers
   Example: "Connect Your Messages" */
.ambient-heading-md {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ambient-text-dark);
}

/* Standard body text: Descriptions, explanations
   Example: Card body content, form help text */
.ambient-text {
    color: var(--ambient-text-muted);
    line-height: 1.6;
}

/* Large body text: Lead paragraphs, important descriptions
   Example: Subheading below page title */
.ambient-text-lg {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--ambient-text-muted);
    line-height: 1.6;
}


/* =============================================
   CARDS
   
   Elevated containers for grouping content:
   - .ambient-card: Standard content card (settings, features)
   - .ambient-card-sm: Compact card (list items, small widgets)
   ============================================= */

/* Standard Card: Settings panels, feature sections, forms
   Example: "Connect Your Messages" setup card */
.ambient-card {
    background: var(--ambient-surface-elevated);
    border-radius: var(--ambient-radius-lg);
    padding: 2rem;
    box-shadow: var(--ambient-shadow-md);
    border: 1px solid var(--ambient-border);
}

/* Small Card: List items, compact widgets, inline content
   Example: Integration status card in a grid */
.ambient-card-sm {
    background: var(--ambient-surface-elevated);
    border-radius: var(--ambient-radius-md);
    padding: 1.5rem;
    box-shadow: var(--ambient-shadow-sm);
    border: 1px solid var(--ambient-border);
}


/* =============================================
   BUTTONS
   
   Interactive elements with gradient and lift effect:
   - .ambient-btn: Primary CTA (Submit, Confirm, Continue)
   - .ambient-btn + .ambient-btn-sm: Smaller primary button
   - .ambient-btn + .ambient-btn-secondary: Secondary action (Cancel, Back)
   ============================================= */

/* Primary Button: Main call-to-action
   Use for: Submit, Save, Confirm, Continue, Connect
   Example: "Go to Integrations" button */
.ambient-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--ambient-primary) 0%, var(--ambient-primary-dark) 100%);
    color: white;
    padding: 1rem 2rem;
    border-radius: var(--ambient-radius-md);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 1.05rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--ambient-transition);
    box-shadow: var(--ambient-shadow-btn);
}

.ambient-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--ambient-shadow-btn-hover);
    color: white;
    background: linear-gradient(135deg, var(--ambient-primary-light) 0%, #7578f5 100%);
}

/* Small Button Modifier: Compact version for inline actions
   Use with .ambient-btn: <button class="ambient-btn ambient-btn-sm">
   Example: "Add" button in a table row */
.ambient-btn-sm {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    border-radius: var(--ambient-radius-sm);
}

/* Secondary Button Modifier: Less prominent actions
   Use with .ambient-btn: <button class="ambient-btn ambient-btn-secondary">
   Use for: Cancel, Back, Skip, Dismiss
   Example: "Cancel" button next to a "Save" button */
.ambient-btn-secondary {
    background: var(--ambient-surface);
    color: var(--ambient-primary);
    border: 1px solid var(--ambient-border);
    box-shadow: var(--ambient-shadow-sm);
}

.ambient-btn-secondary:hover {
    background: var(--ambient-surface-muted);
    color: var(--ambient-primary-dark);
    box-shadow: var(--ambient-shadow-md);
}


/* =============================================
   ICONS
   
   Container for icon elements with hover effect:
   - .ambient-icon-box: Square container for icons
   ============================================= */

/* Icon Box: Container for platform/feature icons
   Use for: Integration icons, feature badges
   Example: WhatsApp, iMessage icons in a row */
.ambient-icon-box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ambient-surface-muted);
    color: var(--ambient-text-muted);
    font-size: 1.25rem;
    transition: var(--ambient-transition-fast);
}

.ambient-icon-box:hover {
    transform: scale(1.1);
    background: var(--ambient-surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* =============================================
   ANIMATIONS
   
   Reusable animation classes:
   - .ambient-float: Gentle floating motion (icons, images)
   - .ambient-fade-in: Fade in from below (page load)
   ============================================= */

/* Float Animation: Gentle up-down bobbing
   Use for: Logo icons, decorative elements
   Example: Welcome page Ambient logo */
@keyframes ambient-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.ambient-float {
    animation: ambient-float 3s ease-in-out infinite;
}

/* Fade In Animation: Smooth entrance from below
   Use for: Page content on load, new elements
   Example: Cards appearing on page load */
@keyframes ambient-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ambient-fade-in {
    animation: ambient-fade-in 0.5s ease-out;
}


/* =============================================
   LAYOUT UTILITIES
   
   Helper classes for common layouts:
   - .ambient-center: Flexbox centering (horizontal + vertical)
   - .ambient-container: Centered max-width container
   ============================================= */

/* Center: Flex container for centered content
   Use for: Hero sections, empty states, welcome pages
   Example: Get Started page layout */
.ambient-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Container: Centered content with max-width
   Use for: Form containers, narrow content sections
   Example: Settings form, article content */
.ambient-container {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem;
}


/* =============================================
   BADGES
   
   Pill-shaped status indicators with icons:
   - .ambient-badge: Base badge style
   - .ambient-badge-success: Connected, Active, Live (green check)
   - .ambient-badge-warning: Stale, Pending (yellow warning)
   - .ambient-badge-danger: Error, Trial (red X)
   - .ambient-badge-muted: Inactive, Not Connected (grey minus)
   ============================================= */

/* Base Badge: Pill-shaped inline status label */
.ambient-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.32rem 0.72rem;
    border-radius: 9999px;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

/* Badge icon base style */
.ambient-badge::before {
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
}

/* Success Badge: Positive states
   Use for: Connected, Active, Live */
.ambient-badge-success {
    background: rgba(34, 197, 94, 0.22);
    color: #166534;
    border-color: rgba(34, 197, 94, 0.42);
}

.ambient-badge-success::before {
    content: "✓";
    color: #16a34a;
}

/* Warning Badge: Attention needed
   Use for: Stale, Pending, Needs Action */
.ambient-badge-warning {
    background: rgba(251, 191, 36, 0.26);
    color: #92400e;
    border-color: rgba(251, 191, 36, 0.54);
}

.ambient-badge-warning::before {
    content: "⚠";
    color: #d97706;
}

/* Danger Badge: Critical or error states
   Use for: Error, Trial In Progress, Expired */
.ambient-badge-danger {
    background: rgba(239, 68, 68, 0.22);
    color: #991b1b;
    border-color: rgba(239, 68, 68, 0.42);
}

.ambient-badge-danger::before {
    content: "✕";
    color: #dc2626;
}

/* Muted Badge: Neutral/inactive states
   Use for: Not Connected, Inactive, Disabled */
.ambient-badge-muted {
    background: rgba(107, 114, 128, 0.14);
    color: #374151;
    border-color: rgba(107, 114, 128, 0.30);
}

.ambient-badge-muted::before {
    content: "−";
    color: #4b5563;
    font-size: 0.72rem;
}

/* Info Badge: Informational/trial states
   Use for: Trial, Preview, Beta */
.ambient-badge-info {
    background: rgba(6, 182, 212, 0.22);
    color: #155e75;
    border-color: rgba(6, 182, 212, 0.42);
}

.ambient-badge-info::before {
    content: "ℹ";
    color: #0891b2;
}


/* =============================================
   TABLES
   
   Data display with clean styling:
   - .ambient-table: Base table with hover states
   ============================================= */

/* Table: Clean data grid with hover
   Use for: Integration lists, data displays
   Example: Message Integrations table */
.ambient-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.ambient-table th {
    text-align: left;
    padding: 1rem 1.25rem;
    font-weight: 500;
    color: var(--ambient-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--ambient-border);
    background: var(--ambient-surface-muted);
}

.ambient-table th:first-child {
    border-radius: var(--ambient-radius-sm) 0 0 0;
}

.ambient-table th:last-child {
    border-radius: 0 var(--ambient-radius-sm) 0 0;
}

.ambient-table td {
    padding: 1rem 1.25rem;
    color: var(--ambient-text-dark);
    border-bottom: 1px solid var(--ambient-border);
    vertical-align: middle;
}

.ambient-table tbody tr {
    transition: var(--ambient-transition-fast);
}

.ambient-table tbody tr:hover {
    background: var(--ambient-surface-muted);
}

.ambient-table tbody tr:last-child td {
    border-bottom: none;
}

/* Make the second column (Messages) expand to fill available width */
.ambient-table th:nth-child(2),
.ambient-table td:nth-child(2) {
    width: 100%;
}

/* Keep Actions column compact and center header */
.ambient-table th:last-child {
    text-align: center;
    white-space: nowrap;
}

.ambient-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

/* Override ambient-row-actions constraints inside table cells */
.ambient-table .ambient-row-actions {
    max-width: none;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

/* =============================================
   RESPONSIVE TABLE VIEWS
   
   Desktop/Mobile toggle for tables:
   - .ambient-table-desktop: Shown on desktop, hidden on mobile
   - .ambient-table-mobile: Hidden on desktop, shown on mobile
   ============================================= */

.ambient-table-desktop {
    display: block;
    overflow-x: auto;
}

.ambient-table-mobile {
    display: none;
}

/* Integration Card for mobile view */
.ambient-integration-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--ambient-border);
}

.ambient-integration-card:first-child {
    padding-top: 0;
}

.ambient-integration-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ambient-integration-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.ambient-integration-platform {
    font-size: 1rem;
    color: var(--ambient-text-dark);
}

.ambient-integration-latest {
    color: var(--ambient-text-muted);
}

.ambient-integration-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.ambient-integration-card-actions .ambient-btn {
    width: auto;
}


/* =============================================
   BUTTON VARIANTS
   
   Additional button styles:
   - .ambient-btn-danger: Destructive actions
   - .ambient-btn-outline: Subtle secondary action
   - .ambient-btn-outline-danger: Subtle destructive action
   - .ambient-btn-info: Informational/trial action
   ============================================= */

/* Danger Button: Destructive primary actions
   Use for: Delete (when prominent), Remove permanently
   Example: "Delete Account" button */
.ambient-btn-danger {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(229, 62, 62, 0.35);
}

.ambient-btn-danger:hover {
    background: linear-gradient(135deg, #fc8181 0%, #f56565 100%);
    box-shadow: 0 8px 25px rgba(229, 62, 62, 0.45);
    color: white;
}

/* Outline Button: Subtle secondary actions
   Use for: Less important actions, Cancel alternatives
   Example: "Disconnect" button */
.ambient-btn-outline {
    background: transparent;
    border: 1px solid var(--ambient-border);
    color: var(--ambient-text-muted);
    box-shadow: none;
}

.ambient-btn-outline:hover {
    background: var(--ambient-surface-muted);
    border-color: var(--ambient-primary);
    color: var(--ambient-primary);
    transform: translateY(-1px);
}

/* Outline Danger Button: Subtle destructive actions
   Use for: Delete in table rows, Disconnect
   Example: "Delete" button next to integration */
.ambient-btn-outline-danger {
    background: transparent;
    border: 1px solid rgba(229, 62, 62, 0.3);
    color: #e53e3e;
    box-shadow: none;
}

.ambient-btn-outline-danger:hover {
    background: rgba(229, 62, 62, 0.1);
    border-color: #e53e3e;
    color: #c53030;
    transform: translateY(-1px);
}

/* Info Button: Trial/informational actions
   Use for: Trial Run, Learn More, Preview
   Example: "Trial Run" button */
.ambient-btn-info {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a8a0 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.35);
}

.ambient-btn-info:hover {
    background: linear-gradient(135deg, #5fd9d0 0%, #4ecdc4 100%);
    box-shadow: 0 8px 25px rgba(78, 205, 196, 0.45);
    color: white;
}


/* =============================================
   ALERTS
   
   Informational callout boxes:
   - .ambient-alert: Base alert container
   - .ambient-alert-info: Tips, notes
   - .ambient-alert-warning: Cautions, attention
   - .ambient-alert-danger: Errors, critical warnings
   ============================================= */

/* Base Alert: Callout container */
.ambient-alert {
    padding: 1rem 1.25rem;
    border-radius: var(--ambient-radius-md);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.ambient-alert i {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Info Alert: Tips, helpful notes
   Use for: Background process info, tips */
.ambient-alert-info {
    background: rgba(120, 119, 198, 0.1);
    border: 1px solid rgba(120, 119, 198, 0.2);
    color: var(--ambient-text-dark);
}

/* Success Alert: Positive confirmations
   Use for: Completed actions, success messages */
.ambient-alert-success {
    background: rgba(72, 187, 120, 0.1);
    border: 1px solid rgba(72, 187, 120, 0.2);
    color: #276749;
}

/* Warning Alert: Caution, attention needed
   Use for: Important notices, potential issues */
.ambient-alert-warning {
    background: rgba(237, 137, 54, 0.1);
    border: 1px solid rgba(237, 137, 54, 0.2);
    color: var(--ambient-text-dark);
}

/* Danger Alert: Errors, critical warnings
   Use for: Destructive action warnings, errors */
.ambient-alert-danger {
    background: rgba(245, 101, 101, 0.1);
    border: 1px solid rgba(245, 101, 101, 0.2);
    color: #c53030;
}


/* =============================================
   MODALS
   
   Dialog overlays for confirmations:
   - .ambient-modal-overlay: Background overlay
   - .ambient-modal: Modal container
   - .ambient-modal-header/body/footer: Sections
   ============================================= */

/* Modal Overlay: Semi-transparent backdrop
   Applied to body or wrapper when modal is open */
.ambient-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(45, 55, 72, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: ambient-fade-in 0.2s ease-out;
}

/* Modal Container: The dialog box itself */
.ambient-modal {
    background: var(--ambient-surface-elevated);
    border-radius: var(--ambient-radius-lg);
    box-shadow: var(--ambient-shadow-lg);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: ambient-modal-enter 0.3s ease-out;
}

@keyframes ambient-modal-enter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.ambient-modal-header {
    padding: 1.5rem 2rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ambient-modal-header .ambient-heading-md {
    margin: 0;
}

/* Modal close button */
.ambient-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--ambient-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: var(--ambient-transition-fast);
}

.ambient-modal-close:hover {
    color: var(--ambient-text-dark);
}

.ambient-modal-body {
    padding: 1.5rem 2rem;
}

.ambient-modal-body p {
    margin-bottom: 0.75rem;
    color: var(--ambient-text-muted);
}

.ambient-modal-body p:last-child {
    margin-bottom: 0;
}

.ambient-modal-footer {
    padding: 0 2rem 1.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}


/* =============================================
   INTEGRATION ROW
   
   Horizontal layout for status items:
   - .ambient-row: Flex container with spacing
   - .ambient-row-info: Left side info group
   - .ambient-row-actions: Right side buttons
   ============================================= */

/* Row: Horizontal layout with space-between
   Use for: Integration status rows, list items */
.ambient-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.ambient-row-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.ambient-row-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    max-width: 33.33%;
    justify-content: flex-end;
}

/* When row-actions content exceeds its max-width, allow full width on next line */
@media (min-width: 501px) {
    .ambient-row-actions {
        flex-shrink: 1;
    }
    
    /* Button text wrapping within row-actions */
    .ambient-row-actions .ambient-btn {
        white-space: normal;
        text-align: center;
        word-wrap: break-word;
    }
}

/* Disconnect Google button: constrained width with text wrap */
#disconnectGoogleBtn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    word-wrap: break-word;
    line-height: 1.3;
}


/* =============================================
   CARD HEADER VARIANT
   
   Card with highlighted header section:
   - .ambient-card-warning: Card with warning state
   ============================================= */

/* Warning Card: Attention-grabbing card variant
   Use for: Not connected states, action required */
.ambient-card-warning {
    border-color: rgba(237, 137, 54, 0.3);
}

.ambient-card-header-warning {
    background: rgba(237, 137, 54, 0.1);
    margin: -2rem -2rem 1.5rem -2rem;
    padding: 1.25rem 2rem;
    border-radius: var(--ambient-radius-lg) var(--ambient-radius-lg) 0 0;
}


/* =============================================
   SPACING UTILITIES
   
   Common margin/padding helpers:
   ============================================= */

.ambient-mb-0 { margin-bottom: 0; }
.ambient-mb-1 { margin-bottom: 0.5rem; }
.ambient-mb-2 { margin-bottom: 1rem; }
.ambient-mb-3 { margin-bottom: 1.5rem; }
.ambient-mb-4 { margin-bottom: 2rem; }

.ambient-mt-0 { margin-top: 0; }
.ambient-mt-1 { margin-top: 0.5rem; }
.ambient-mt-2 { margin-top: 1rem; }
.ambient-mt-3 { margin-top: 1.5rem; }

.ambient-text-sm {
    font-size: 0.875rem;
}

.ambient-text-danger {
    color: #c53030;
}


/* =============================================
   BOOTSTRAP MODAL OVERRIDES
   
   When using Bootstrap modals with Aurora styling,
   apply .ambient-modal to .modal-content
   ============================================= */

/* Override Bootstrap modal-content when using Aurora */
.modal-content.ambient-modal {
    border: none;
    border-radius: var(--ambient-radius-lg);
    box-shadow: var(--ambient-shadow-lg);
    overflow: hidden;
}

/* Improve Bootstrap modal backdrop */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

.modal-backdrop.show {
    opacity: 0.5;
}

/* Modal-specific: Keep row-actions buttons on the same row */
.ambient-modal .ambient-row-actions {
    flex-wrap: nowrap;
    max-width: none;
    width: 100%;
    justify-content: center;
}

/* Modal-specific: Fix table text visibility */
.ambient-modal .ambient-table {
    table-layout: fixed;
    width: 100%;
}

.ambient-modal .ambient-table td:first-child {
    width: 40px;
    padding-left: 0.75rem;
    padding-right: 0.5rem;
}

.ambient-modal .ambient-table td:nth-child(2) {
    width: auto;
    text-align: left;
}

.ambient-modal .ambient-table label {
    display: block;
    color: var(--ambient-text-dark);
    white-space: normal;
    word-wrap: break-word;
    cursor: pointer;
}


/* =============================================
   DROPDOWNS
   
   Dropdown menus and toggles:
   - .ambient-dropdown-toggle: Button that opens dropdown
   - .ambient-dropdown-menu: The dropdown panel
   - .ambient-dropdown-item: Menu items
   ============================================= */

/* Dropdown Toggle Button */
.ambient-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--ambient-surface);
    color: var(--ambient-primary);
    border: 1px solid var(--ambient-border);
    border-radius: var(--ambient-radius-sm);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--ambient-transition-fast);
}

.ambient-dropdown-toggle:hover {
    background: var(--ambient-surface-muted);
    border-color: var(--ambient-primary);
}

.ambient-dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.35rem;
    vertical-align: middle;
    border-top: 0.3rem solid;
    border-right: 0.3rem solid transparent;
    border-left: 0.3rem solid transparent;
    content: "";
}

/* Dropdown Menu - Override Bootstrap */
.dropdown-menu.ambient-dropdown-menu {
    background: var(--ambient-surface-elevated);
    border: 1px solid var(--ambient-border);
    border-radius: var(--ambient-radius-md);
    box-shadow: var(--ambient-shadow-lg);
    padding: 0.5rem;
    min-width: 180px;
    animation: ambient-fade-in 0.15s ease-out;
}

/* Dropdown Items */
.dropdown-menu.ambient-dropdown-menu .dropdown-item {
    padding: 0.6rem 1rem;
    color: var(--ambient-text-dark);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    border-radius: var(--ambient-radius-sm);
    transition: var(--ambient-transition-fast);
}

.dropdown-menu.ambient-dropdown-menu .dropdown-item:hover {
    background: var(--ambient-surface-muted);
    color: var(--ambient-primary);
}

.dropdown-menu.ambient-dropdown-menu .dropdown-item:active {
    background: rgba(120, 119, 198, 0.15);
    color: var(--ambient-primary-dark);
}

/* Dropdown Divider */
.dropdown-menu.ambient-dropdown-menu .dropdown-divider {
    border-color: var(--ambient-border);
    margin: 0.35rem 0;
}


/* =============================================
   FORM INPUTS
   
   Styled form elements:
   - .ambient-input: Text inputs, selects
   - .ambient-label: Form labels
   ============================================= */

/* Form Label */
.ambient-label {
    display: block;
    font-weight: 500;
    color: var(--ambient-text-dark);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

/* Text Input & Select */
.ambient-input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ambient-border);
    border-radius: var(--ambient-radius-sm);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    color: var(--ambient-text-dark);
    background: var(--ambient-surface);
    transition: var(--ambient-transition-fast);
}

.ambient-input:focus {
    outline: none;
    border-color: var(--ambient-primary);
    box-shadow: 0 0 0 3px rgba(120, 119, 198, 0.15);
}

.ambient-input::placeholder {
    color: var(--ambient-text-light);
}

/* Select dropdown styling */
select.ambient-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23718096' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* Form Group spacing */
.ambient-form-group {
    margin-bottom: 1.25rem;
}

/* Divider line */
.ambient-divider {
    border: none;
    border-top: 1px solid var(--ambient-border);
    margin: 1.5rem 0;
}

/* Icon button (small square button with just an icon) */
.ambient-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ambient-radius-sm);
}

.ambient-btn-icon i {
    font-size: 1rem;
}


/* =============================================
   LOADING OVERLAY
   
   Full-area loading state with spinner:
   - .ambient-loading-overlay: Centered loading display
   ============================================= */

.ambient-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(2px);
    z-index: 10;
    border-radius: var(--ambient-radius-md);
}


/* =============================================
   EVENT CARDS
   
   Cards for calendar events with status borders:
   - .ambient-event-card: Base event card
   - Border color variants for status
   ============================================= */

.ambient-event-card {
    background: var(--ambient-surface-elevated);
    border-radius: var(--ambient-radius-md);
    padding: 1.25rem;
    border: 1px solid var(--ambient-border);
    border-left-width: 4px;
    height: 100%;
    transition: var(--ambient-transition-fast);
}

/* Event card border colors based on status */
.ambient-event-card-success {
    border-left-color: #48bb78;
}

.ambient-event-card-secondary {
    border-left-color: var(--ambient-text-light);
}

.ambient-event-card-primary {
    border-left-color: var(--ambient-primary);
}

.ambient-event-card-danger {
    border-left-color: #e53e3e;
}

.ambient-event-card-warning {
    border-left-color: #ed8936;
}

/* Event card title */
.ambient-event-title {
    font-weight: 600;
    color: var(--ambient-text-dark);
    font-size: 1rem;
    margin-bottom: 0;
}

/* Event card meta info */
.ambient-event-meta {
    font-size: 0.875rem;
    color: var(--ambient-text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Collapsible section toggle */
.ambient-collapse-toggle {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ambient-text-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.ambient-collapse-toggle:hover {
    color: var(--ambient-primary);
}

.ambient-collapse-chevron {
    transition: transform 0.2s ease;
}

.ambient-collapse-chevron.rotated {
    transform: rotate(90deg);
}


/* =============================================
   CLIPPED LIST + LIST EXPANDER

   Caps a list's height with a soft fade and an inline expander row that
   reads as the list's last entry. Useful when a long list shares a row
   with a shorter sibling card and you want them to balance visually.

   Two pieces, used as adjacent siblings:
     - .ambient-list-clip: wraps the list. Holds state via
       data-collapsed and data-overflows attributes. Cap height is
       set per-usage with --ambient-list-clip-height (default 240px).
     - .ambient-list-expander: row-styled button. Visibility and the
       chevron rotation are driven by the clip's data attributes via
       sibling selectors, so the expander MUST be the immediate next
       sibling of the clip.

   JS responsibilities (per usage):
     - Measure natural list height vs. the desired cap
     - Set --ambient-list-clip-height on the clip element
     - Set data-overflows="true" iff the list exceeds the cap
     - Toggle data-collapsed in the click handler
     - When the list fits, set data-collapsed="false" so no useless
       cap is shown

   Override --ambient-list-fade-to if the clip sits on a non-white
   background, so the gradient blends in.
   ============================================= */

.ambient-list-clip {
    position: relative;
    transition: max-height 0.25s ease;
}

.ambient-list-clip[data-collapsed="true"][data-overflows="true"] {
    max-height: var(--ambient-list-clip-height, 240px);
    overflow: hidden;
}

.ambient-list-clip[data-collapsed="true"][data-overflows="true"]::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1.8em;
    background: linear-gradient(to bottom,
        transparent 0%,
        var(--ambient-list-fade-to, #ffffff) 100%);
    pointer-events: none;
}

.ambient-list-expander {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.4rem 0.85rem;
    background: var(--ambient-surface-elevated);
    border: 1px solid rgba(120, 119, 198, 0.12);
    border-radius: var(--ambient-radius-sm);
    color: var(--ambient-primary);
    font-family: 'Outfit', sans-serif;
    font-size: 0.83rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--ambient-shadow-sm);
    transition: var(--ambient-transition-fast);
}

.ambient-list-expander:hover {
    background: rgba(120, 119, 198, 0.06);
    border-color: rgba(120, 119, 198, 0.28);
}

.ambient-list-expander-chevron {
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

/* Wire visibility + chevron rotation from the adjacent clip's state. The
   expander must be the immediate next sibling for these to take effect. */
.ambient-list-clip[data-overflows="true"] + .ambient-list-expander {
    display: inline-flex;
}

.ambient-list-clip[data-collapsed="false"] + .ambient-list-expander .ambient-list-expander-chevron {
    transform: rotate(180deg);
}


/* =============================================
   CODE & LOGS
   
   Styled code snippets and log containers:
   - .ambient-code: Inline code snippets
   - .ambient-log-container: Scrollable log output
   - .ambient-list: Styled ordered/unordered lists
   ============================================= */

/* Inline Code: Terminal commands, file names */
.ambient-code {
    background: var(--ambient-surface-muted);
    color: var(--ambient-primary-dark);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.9em;
}

/* Log Container: Scrollable output area */
.ambient-log-container {
    background: var(--ambient-surface-muted);
    border-radius: var(--ambient-radius-sm);
    padding: 0.75rem 1rem;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    color: var(--ambient-text-muted);
    max-height: 160px;
    overflow-y: auto;
    line-height: 1.5;
}

.ambient-log-container:empty {
    display: none;
}

/* Styled List: Better spacing for ol/ul */
.ambient-list {
    padding-left: 1.5rem;
    margin-bottom: 0;
}

.ambient-list li {
    margin-bottom: 0.5rem;
}

.ambient-list li:last-child {
    margin-bottom: 0;
}


/* =============================================
   CHECKBOXES
   
   Custom styled checkboxes:
   - .ambient-checkbox: The checkbox input
   - .ambient-checkbox-label: Label wrapper
   ============================================= */

.ambient-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--ambient-text-dark);
}

.ambient-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    accent-color: var(--ambient-primary);
    cursor: pointer;
}


/* =============================================
   PROFILE FIELDS
   
   Display fields for profile/settings pages:
   - .ambient-profile-section: Container for fields
   - .ambient-profile-field: Individual field
   ============================================= */

.ambient-profile-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ambient-profile-field {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ambient-border);
}

.ambient-profile-field:last-child {
    border-bottom: none;
    padding-bottom: 0;
}


/* =============================================
   MOBILE RESPONSIVE STYLES
   
   Adjustments for screens under 500px:
   - Reduced padding on cards and containers
   - Smaller font sizes for headings
   - Full-width buttons and modals
   - Tighter table cells
   ============================================= */

@media (max-width: 500px) {
    /* Container adjustments */
    .ambient-container {
        padding: 1rem;
    }
    
    /* Bootstrap container-fluid override */
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Card padding reduction */
    .ambient-card {
        padding: 1.25rem;
        border-radius: var(--ambient-radius-md);
    }
    
    .ambient-card-sm {
        padding: 1rem;
    }
    
    /* Typography scaling */
    .ambient-heading-xl {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }
    
    .ambient-heading-lg {
        font-size: 1.35rem;
    }
    
    .ambient-heading-md {
        font-size: 1.15rem;
    }
    
    .ambient-text-lg {
        font-size: 1rem;
    }
    
    /* Button adjustments */
    .ambient-btn {
        padding: 0.85rem 1.25rem;
        font-size: 0.95rem;
        width: 100%;
        justify-content: center;
    }
    
    .ambient-btn-sm {
        padding: 0.65rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Inline buttons should not be full-width */
    .ambient-row-actions .ambient-btn,
    .ambient-btn-icon {
        width: auto;
    }
    
    /* Table adjustments */
    .ambient-table th,
    .ambient-table td {
        padding: 0.75rem 0.875rem;
        font-size: 0.875rem;
    }
    
    .ambient-table th {
        font-size: 0.75rem;
    }
    
    /* Desktop/Mobile table toggle */
    .ambient-table-desktop {
        display: none;
    }
    
    .ambient-table-mobile {
        display: block;
    }
    
    /* Integration card mobile adjustments - keep side by side layout */
    .ambient-integration-card {
        gap: 0.75rem;
        align-items: flex-start;
    }
    
    .ambient-integration-card-actions {
        flex-direction: column;
        align-items: flex-end;
        flex-shrink: 0;
    }
    
    .ambient-integration-card-actions .ambient-btn {
        white-space: nowrap;
    }
    
    /* Smaller badges on mobile with right margin */
    .ambient-integration-card .ambient-badge {
        font-size: 0.51rem;
        padding: 0.2rem 0.48rem;
        gap: 0.2rem;
        margin-right: 0.5rem;
        align-self: flex-start;
    }
    
    .ambient-integration-card .ambient-badge::before {
        font-size: 0.45rem;
    }
    
    /* Modal adjustments */
    .ambient-modal {
        width: 95%;
        max-width: none;
        margin: 0.5rem;
    }
    
    .ambient-modal-header {
        padding: 1.25rem 1.25rem 0;
    }
    
    .ambient-modal-body {
        padding: 1rem 1.25rem;
    }
    
    .ambient-modal-footer {
        padding: 0 1.25rem 1.25rem;
        flex-direction: column;
    }
    
    .ambient-modal-footer .ambient-btn {
        width: 100%;
    }
    
    /* Row layout adjustments */
    .ambient-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .ambient-row-info {
        justify-content: center;
    }
    
    .ambient-row-actions {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        gap: 0.5rem;
    }
    
    /* Card header warning adjustments */
    .ambient-card-header-warning {
        margin: -1.25rem -1.25rem 1rem -1.25rem;
        padding: 1rem 1.25rem;
        border-radius: var(--ambient-radius-md) var(--ambient-radius-md) 0 0;
    }
    
    /* Alert adjustments */
    .ambient-alert {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Event card adjustments */
    .ambient-event-card {
        padding: 1rem;
    }
    
    /* Badge adjustments */
    .ambient-badge {
        padding: 0.24rem 0.56rem;
        font-size: 0.6rem;
        gap: 0.24rem;
    }
    
    .ambient-badge::before {
        font-size: 0.56rem;
    }
    
    /* Form input adjustments */
    .ambient-input {
        padding: 0.75rem 0.875rem;
        font-size: 0.95rem;
    }
    
    /* Dropdown adjustments */
    .ambient-dropdown-toggle {
        padding: 0.5rem 0.875rem;
        font-size: 0.85rem;
    }
    
    .dropdown-menu.ambient-dropdown-menu {
        min-width: 160px;
    }
    
    .dropdown-menu.ambient-dropdown-menu .dropdown-item {
        padding: 0.5rem 0.875rem;
        font-size: 0.85rem;
    }
    
    /* Spacing utilities mobile overrides */
    .ambient-mb-4 { margin-bottom: 1.5rem; }
    .ambient-mb-3 { margin-bottom: 1rem; }
}


/* =============================================
   MESSAGE LIST
   
   Display list of messages with sender and date:
   - .ambient-message-list: Container for messages
   - .ambient-message-item: Individual message card
   ============================================= */

.ambient-message-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ambient-message-item {
    background: var(--ambient-surface-muted);
    border-radius: var(--ambient-radius-sm);
    padding: 1rem;
}

.ambient-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.ambient-message-sender {
    font-weight: 500;
    color: var(--ambient-text-dark);
}

.ambient-message-date {
    font-size: 0.8rem;
    color: var(--ambient-text-muted);
}

.ambient-message-text {
    color: var(--ambient-text-dark);
    margin: 0;
}


/* =============================================
   CONVERSATION LIST
   
   Display list of conversations with toggle/action:
   - .ambient-conversation-item: Row with info and action
   - .ambient-conversation-info: Left side details
   - .ambient-conversation-name: Primary text
   - .ambient-conversation-meta: Secondary text
   ============================================= */

.ambient-conversation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--ambient-surface-muted);
    border-radius: var(--ambient-radius-sm);
    margin-bottom: 0.75rem;
}

.ambient-conversation-item:last-child {
    margin-bottom: 0;
}

.ambient-conversation-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.ambient-conversation-name {
    font-weight: 500;
    color: var(--ambient-text-dark);
}

.ambient-conversation-meta {
    font-size: 0.85rem;
    color: var(--ambient-text-muted);
}

.ambient-conversation-action {
    flex-shrink: 0;
}


/* =============================================
   EMPTY STATE
   
   Centered placeholder for empty content:
   - .ambient-empty-state: Container with centered text
   ============================================= */

.ambient-empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--ambient-text-muted);
}