/**
 * RMZ Chat Design System
 * WhatsApp-like Web Interface
 * Bilingual Support (AR/EN) with Dual Preview Mode
 * 
 * @version 1.0.0
 * @date 2025-10-16
 */

/* ========================================
   1. Design Tokens (Light Mode)
   ======================================== */

:root {
  /* ────────────────────────────────────
     Primary Colors (Blue RMZ Identity)
     TBD: Final values from brand team
     ──────────────────────────────────── */
  --rmz-blue-700: #1565C0;        /* Primary Dark - TBD */
  --rmz-blue-600: #1976D2;        /* Primary - TBD */
  --rmz-blue-500: #2196F3;        /* Primary Light - TBD */
  --rmz-blue-400: #42A5F5;        /* Accent/Hover - TBD */
  --rmz-blue-300: #64B5F6;        /* Light - TBD */
  --rmz-blue-100: #BBDEFB;        /* Very Light - TBD */
  
  /* ────────────────────────────────────
     Ink/Text Colors
     ──────────────────────────────────── */
  --rmz-ink-900: #1A1A1A;         /* Primary text - TBD */
  --rmz-ink-800: #2D2D2D;         /* Secondary text - TBD */
  --rmz-ink-600: #5F5F5F;         /* Tertiary text - TBD */
  --rmz-ink-500: #757575;         /* Disabled text - TBD */
  --rmz-ink-400: #9E9E9E;         /* Placeholder - TBD */
  
  /* ────────────────────────────────────
     Background Colors
     ──────────────────────────────────── */
  --rmz-bg-50: #F5F7FA;           /* General light bg - TBD */
  --rmz-bg-100: #E8EDF2;          /* Element bg - TBD */
  --rmz-bg-200: #D1D9E2;          /* Sidebar darker - TBD */
  --rmz-bg-300: #B4BFC8;          /* Dividers - TBD */
  
  /* ────────────────────────────────────
     Message Bubbles
     ──────────────────────────────────── */
  --rmz-bubble-self: rgba(25, 118, 210, 0.12);    /* My messages - TBD */
  --rmz-bubble-peer: rgba(0, 0, 0, 0.06);         /* Other's messages - TBD */
  --rmz-bubble-hover-self: rgba(25, 118, 210, 0.16);
  --rmz-bubble-hover-peer: rgba(0, 0, 0, 0.08);
  
  /* ────────────────────────────────────
     Status Ticks
     ──────────────────────────────────── */
  --rmz-tick-sent: #9E9E9E;       /* Single tick - TBD */
  --rmz-tick-delivered: #757575;  /* Double tick grey - TBD */
  --rmz-tick-read: #1976D2;       /* Double tick blue - TBD */
  
  /* ────────────────────────────────────
     Semantic Colors
     ──────────────────────────────────── */
  --rmz-success-500: #4CAF50;     /* Success state - TBD */
  --rmz-warning-500: #FF9800;     /* Warning state - TBD */
  --rmz-danger-500: #F44336;      /* Error/Delete state - TBD */
  --rmz-info-500: #2196F3;        /* Info state - TBD */
  
  /* ────────────────────────────────────
     Online Status
     ──────────────────────────────────── */
  --rmz-online-green: #4CAF50;
  --rmz-away-yellow: #FFC107;
  --rmz-offline-grey: #9E9E9E;
  
  /* ────────────────────────────────────
     Shadows & Borders
     ──────────────────────────────────── */
  --rmz-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --rmz-shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --rmz-shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
  --rmz-border-color: rgba(0,0,0,0.08);
  --rmz-divider: rgba(0,0,0,0.06);
  
  /* ────────────────────────────────────
     Spacing System
     ──────────────────────────────────── */
  --rmz-space-xs: 4px;
  --rmz-space-sm: 8px;
  --rmz-space-md: 12px;
  --rmz-space-lg: 16px;
  --rmz-space-xl: 20px;
  --rmz-space-2xl: 24px;
  --rmz-space-3xl: 32px;
  
  /* ────────────────────────────────────
     Layout Dimensions
     ──────────────────────────────────── */
  --rmz-header-height: 64px;
  --rmz-sidebar-width: 360px;
  --rmz-sidebar-min: 300px;
  --rmz-sidebar-max: 380px;
  --rmz-composer-height: 60px;
  
  /* ────────────────────────────────────
     Typography
     ──────────────────────────────────── */
  --rmz-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --rmz-font-family-ar: "Cairo", "Segoe UI", Tahoma, sans-serif;
  
  --rmz-font-size-xs: 11px;
  --rmz-font-size-sm: 13px;
  --rmz-font-size-base: 14px;
  --rmz-font-size-md: 15px;
  --rmz-font-size-lg: 16px;
  --rmz-font-size-xl: 18px;
  --rmz-font-size-2xl: 20px;
  
  --rmz-line-height-tight: 1.3;
  --rmz-line-height-normal: 1.5;
  --rmz-line-height-relaxed: 1.6;
  
  --rmz-font-weight-normal: 400;
  --rmz-font-weight-medium: 500;
  --rmz-font-weight-semibold: 600;
  --rmz-font-weight-bold: 700;
  
  /* ────────────────────────────────────
     Border Radius
     ──────────────────────────────────── */
  --rmz-radius-sm: 4px;
  --rmz-radius-md: 6px;
  --rmz-radius-lg: 8px;
  --rmz-radius-xl: 12px;
  --rmz-radius-2xl: 16px;
  --rmz-radius-full: 9999px;
  
  /* ────────────────────────────────────
     Z-Index Layers
     ──────────────────────────────────── */
  --rmz-z-base: 1;
  --rmz-z-dropdown: 100;
  --rmz-z-sticky: 200;
  --rmz-z-overlay: 300;
  --rmz-z-modal: 400;
  --rmz-z-toast: 500;
  
  /* ────────────────────────────────────
     Transitions
     ──────────────────────────────────── */
  --rmz-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --rmz-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --rmz-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ────────────────────────────────────
     Icon Sizes
     ──────────────────────────────────── */
  --rmz-icon-xs: 14px;
  --rmz-icon-sm: 16px;
  --rmz-icon-base: 18px;
  --rmz-icon-md: 20px;
  --rmz-icon-lg: 24px;
  --rmz-icon-xl: 32px;
  
  /* ────────────────────────────────────
     Avatar Sizes
     ──────────────────────────────────── */
  --rmz-avatar-sm: 32px;
  --rmz-avatar-base: 40px;
  --rmz-avatar-md: 48px;
  --rmz-avatar-lg: 64px;
  --rmz-avatar-xl: 96px;
  
  /* ────────────────────────────────────
     Wallpaper
     ──────────────────────────────────── */
  --rmz-wallpaper-opacity: 0.03;
  --rmz-watermark-opacity: 0.02;
  --rmz-wallpaper-pattern: url('/assets/wallpapers/rmz-pattern-light.svg');
}

/* ========================================
   2. Dark Mode Tokens
   ======================================== */

[data-theme="dark"] {
  /* Primary colors stay mostly same for brand consistency */
  --rmz-blue-700: #1976D2;
  --rmz-blue-600: #2196F3;
  --rmz-blue-500: #42A5F5;
  --rmz-blue-400: #64B5F6;
  
  /* Ink/Text (inverted) */
  --rmz-ink-900: #E8E8E8;
  --rmz-ink-800: #D1D1D1;
  --rmz-ink-600: #A8A8A8;
  --rmz-ink-500: #8F8F8F;
  --rmz-ink-400: #757575;
  
  /* Backgrounds (inverted) */
  --rmz-bg-50: #0F1419;
  --rmz-bg-100: #1A1F26;
  --rmz-bg-200: #242B33;
  --rmz-bg-300: #2F3740;
  
  /* Message Bubbles */
  --rmz-bubble-self: rgba(33, 150, 243, 0.18);
  --rmz-bubble-peer: rgba(255, 255, 255, 0.08);
  --rmz-bubble-hover-self: rgba(33, 150, 243, 0.24);
  --rmz-bubble-hover-peer: rgba(255, 255, 255, 0.12);
  
  /* Status Ticks */
  --rmz-tick-sent: #757575;
  --rmz-tick-delivered: #9E9E9E;
  --rmz-tick-read: #42A5F5;
  
  /* Borders & Shadows */
  --rmz-border-color: rgba(255,255,255,0.08);
  --rmz-divider: rgba(255,255,255,0.06);
  --rmz-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --rmz-shadow-md: 0 2px 8px rgba(0,0,0,0.4);
  --rmz-shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
  
  /* Wallpaper */
  --rmz-wallpaper-pattern: url('/assets/wallpapers/rmz-pattern-dark.svg');
  --rmz-wallpaper-opacity: 0.04;
}

/* ========================================
   3. Accessibility Utilities
   ======================================== */

/* Ensure minimum contrast ratio 4.5:1 */
.rmz-text-primary {
  color: var(--rmz-ink-900);
}

.rmz-text-secondary {
  color: var(--rmz-ink-600);
}

.rmz-text-disabled {
  color: var(--rmz-ink-500);
}

/* Focus visible for keyboard navigation */
.rmz-focusable:focus-visible {
  outline: 2px solid var(--rmz-blue-500);
  outline-offset: 2px;
}

/* Screen reader only */
.rmz-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ========================================
   4. Responsive Breakpoints
   ======================================== */

/* Mobile: < 768px (single column, mobile stack) */
/* Tablet: >= 768px && < 992px (single language, tab switch) */
/* Desktop: >= 992px && < 1280px (tab switch AR|EN) */
/* Large: >= 1280px (dual preview side-by-side) */
/* XLarge: >= 1440px (dual preview + media sidebar) */

@custom-media --rmz-mobile (max-width: 767px);
@custom-media --rmz-tablet (min-width: 768px) and (max-width: 991px);
@custom-media --rmz-desktop (min-width: 992px) and (max-width: 1279px);
@custom-media --rmz-large (min-width: 1280px) and (max-width: 1439px);
@custom-media --rmz-xlarge (min-width: 1440px);

/* ========================================
   5. Animation Keyframes
   ======================================== */

@keyframes rmz-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rmz-slide-up {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes rmz-slide-down {
  from {
    transform: translateY(-8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes rmz-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes rmz-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Typing indicator dots */
@keyframes rmz-typing-dot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  30% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

/* Tick animation (sent → delivered → read) */
@keyframes rmz-tick-appear {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes rmz-tick-color-change {
  from {
    color: var(--rmz-tick-delivered);
  }
  to {
    color: var(--rmz-tick-read);
  }
}

/* Message bubble slide-in */
@keyframes rmz-bubble-slide-in-rtl {
  from {
    transform: translateX(16px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes rmz-bubble-slide-in-ltr {
  from {
    transform: translateX(-16px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ========================================
   6. Utility Classes
   ======================================== */

/* Flexbox utilities */
.rmz-flex { display: flex; }
.rmz-inline-flex { display: inline-flex; }
.rmz-flex-col { flex-direction: column; }
.rmz-flex-row { flex-direction: row; }
.rmz-items-center { align-items: center; }
.rmz-items-start { align-items: flex-start; }
.rmz-items-end { align-items: flex-end; }
.rmz-justify-center { justify-content: center; }
.rmz-justify-between { justify-content: space-between; }
.rmz-justify-end { justify-content: flex-end; }
.rmz-flex-1 { flex: 1; }
.rmz-flex-shrink-0 { flex-shrink: 0; }

/* Spacing utilities */
.rmz-gap-xs { gap: var(--rmz-space-xs); }
.rmz-gap-sm { gap: var(--rmz-space-sm); }
.rmz-gap-md { gap: var(--rmz-space-md); }
.rmz-gap-lg { gap: var(--rmz-space-lg); }
.rmz-gap-xl { gap: var(--rmz-space-xl); }

/* Padding utilities */
.rmz-p-0 { padding: 0; }
.rmz-p-sm { padding: var(--rmz-space-sm); }
.rmz-p-md { padding: var(--rmz-space-md); }
.rmz-p-lg { padding: var(--rmz-space-lg); }
.rmz-p-xl { padding: var(--rmz-space-xl); }

/* Border radius utilities */
.rmz-rounded-sm { border-radius: var(--rmz-radius-sm); }
.rmz-rounded-md { border-radius: var(--rmz-radius-md); }
.rmz-rounded-lg { border-radius: var(--rmz-radius-lg); }
.rmz-rounded-xl { border-radius: var(--rmz-radius-xl); }
.rmz-rounded-full { border-radius: var(--rmz-radius-full); }

/* Truncate text */
.rmz-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rmz-line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rmz-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Transitions */
.rmz-transition {
  transition: all var(--rmz-transition-base);
}

.rmz-transition-colors {
  transition: color var(--rmz-transition-base),
              background-color var(--rmz-transition-base),
              border-color var(--rmz-transition-base);
}

/* Hover effects */
.rmz-hover-bg:hover {
  background-color: var(--rmz-bg-100);
}

.rmz-hover-opacity:hover {
  opacity: 0.8;
}

/* ========================================
   7. Print Styles
   ======================================== */

@media print {
  * {
    background: white !important;
    color: black !important;
  }
  
  .rmz-no-print,
  .rmz-sidebar,
  .rmz-composer,
  .rmz-header-actions {
    display: none !important;
  }
  
  .rmz-message-bubble {
    break-inside: avoid;
  }
}