/**
 * Breakpoint System CSS Variables
 *
 * Defines responsive breakpoints and layout dimensions used throughout the app.
 * These values align with the C# LayoutBreakpoint enum.
 *
 * Layout Strategy:
 * - Mobile (0-640px): Single column, Chat/Tray as overlays
 * - Tablet (641-1169px): 50/50 Chat + Landing, Tray as overlay
 * - Desktop (1170px+): Fixed Chat + Tray + Landing, pin option available
 *
 * Desktop minimum = Chat(425) + Tray(320) + Landing(>=425) = 1170px
 */

:root {
    /* ===========================================
       BREAKPOINT VALUES
       Must match JS breakpoint-service.js definitions
       =========================================== */
    --bp-mobile: 640px;       /* Mobile: 0-640px (2x 320px minimal) */
    --bp-tablet: 641px;       /* Tablet starts at 641px */
    --bp-desktop: 1170px;     /* Desktop: when room for Chat+Tray+Landing */

    /* ===========================================
       LAYOUT DIMENSIONS
       =========================================== */

    /* Chat panel widths */
    --chat-panel-width-mobile: 100%;
    --chat-panel-width-tablet: 50%;           /* 50/50 split on tablet */
    --chat-panel-width-desktop: 425px;        /* Fixed on desktop */

    /* Tray panel widths */
    --tray-panel-width-mobile: 280px;
    --tray-panel-width-tablet: 320px;
    --tray-panel-width-desktop: 320px;

    /* Minimum widths */
    --landing-min-width: 425px;               /* Landing gets equal space to Chat */

    /* Fixed element dimensions */
    --profile-button-size: 48px;
    --chat-input-height: 60px;

    /* ===========================================
       SPACING & GAPS
       =========================================== */
    --layout-gap: 0;
    --content-padding: 16px;
    --content-padding-mobile: 12px;

    /* ===========================================
       Z-INDEX LAYERS
       =========================================== */
    --z-base: 1;
    --z-chat: 10;
    --z-overlay: 15;
    --z-tray: 20;
    --z-fixed: 100;
    --z-modal: 200;

    /* ===========================================
       ANIMATION TIMING
       =========================================== */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.4s;

    --ease-out: ease-out;
    --ease-in: ease-in;
    --ease-in-out: ease-in-out;
}

/* ===========================================
   MEDIA QUERY HELPERS
   Use these as reference for consistent breakpoints
   =========================================== */

/*
 * Mobile: @media (max-width: 640px)
 * Tablet: @media (min-width: 641px) and (max-width: 1169px)
 * Desktop: @media (min-width: 1170px)
 */

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Hide on specific breakpoints */
@media (max-width: 640px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 641px) and (max-width: 1169px) {
    .hide-tablet {
        display: none !important;
    }
}

@media (min-width: 1170px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on specific breakpoints */
@media (min-width: 641px) {
    .show-mobile-only {
        display: none !important;
    }
}

@media (max-width: 640px), (min-width: 1170px) {
    .show-tablet-only {
        display: none !important;
    }
}

@media (max-width: 1169px) {
    .show-desktop-only {
        display: none !important;
    }
}