/**
 * WhatsApp Demo — Refactored with Modern CSS (2024)
 * 
 * Features demonstrated:
 * - @layer for cascade management
 * - @container for responsive chat bubbles
 * - :has() for message selection states
 * - color-mix() for message backgrounds
 * - CSS nesting
 * - content-visibility for performance
 * - Scroll-driven animations (progressive)
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * Cascade Layers
 * ──────────────────────────────────────────────────────────────────────────── */
@layer whatsapp-reset, whatsapp-tokens, whatsapp-components, whatsapp-utilities;

@layer whatsapp-tokens {
  .whatsapp-demo {
    /* Brand colors */
    --whatsapp-green: oklch(0.65 0.18 150);
    --whatsapp-green-dark: oklch(0.45 0.15 150);
    --whatsapp-teal: oklch(0.55 0.12 180);
    
    /* Surface */
    --whatsapp-bg: oklch(0.88 0.02 150);
    --whatsapp-header: oklch(0.75 0.03 150);
    --whatsapp-panel: oklch(0.96 0 0);
    
    /* Messages */
    --msg-out-bg: oklch(0.88 0.12 150);
    --msg-out-bg-selected: color-mix(in oklch, var(--msg-out-bg), var(--whatsapp-green-dark) 15%);
    --msg-in-bg: oklch(1 0 0);
    --msg-in-bg-selected: color-mix(in oklch, var(--msg-in-bg), slate 8%);
    
    /* Text */
    --text-primary: oklch(0.15 0 0);
    --text-secondary: oklch(0.45 0 0);
    --text-meta: oklch(0.55 0 0);
    
    /* Animation */
    --wa-transition: 200ms ease;
  }
}

@layer whatsapp-reset {
  .whatsapp-demo {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    color-scheme: light;
    
    *, *::before, *::after {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      background: var(--whatsapp-bg);
      height: 100vh;
      overflow: hidden;
    }
  }
}

@layer whatsapp-components {
  /* ──────────────────────────────────────────────────────────────────────────
   * App Container
   * ──────────────────────────────────────────────────────────────────────── */
  .whatsapp-app {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
    background: var(--whatsapp-panel);
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    
    @container (max-width: 768px) {
      grid-template-columns: 1fr;
      max-width: 100%;
    }
  }
  
  /* ──────────────────────────────────────────────────────────────────────────
   * Header
   * ──────────────────────────────────────────────────────────────────────── */
  .wa-header {
    background: var(--whatsapp-header);
    padding: var(--pad-sm) var(--pad-md);
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
    border-bottom: 1px solid var(--color-border);
    content-visibility: auto;
    contain: layout style;
    
    & .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--whatsapp-green), var(--whatsapp-teal));
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: var(--font-bold);
      flex-shrink: 0;
    }
    
    & .contact-info {
      flex: 1;
      min-width: 0;
      
      & .contact-name {
        font-weight: var(--font-semibold);
        color: var(--text-primary);
        margin: 0;
      }
      
      & .contact-status {
        font-size: var(--text-xs);
        color: var(--text-meta);
        margin: 0;
      }
    }
    
    & .header-actions {
      display: flex;
      gap: var(--gutter-md);
      
      & button {
        background: none;
        border: none;
        font-size: var(--text-lg);
        cursor: pointer;
        color: var(--text-secondary);
        padding: var(--pad-xs);
        border-radius: 50%;
        transition: background var(--wa-transition);
        
        &:hover {
          background: color-mix(in oklch, var(--text-secondary), transparent 85%);
        }
      }
    }
  }
  
  /* ──────────────────────────────────────────────────────────────────────────
   * Chat Area
   * ──────────────────────────────────────────────────────────────────────── */
  .wa-chat {
    overflow-y: auto;
    padding: var(--pad-md);
    background: 
      radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--whatsapp-teal), transparent 95%) 0%, transparent 50%),
      var(--whatsapp-bg);
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
    scroll-behavior: smooth;
    
    /* Scrollbar styling */
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: var(--text-meta);
      border-radius: 3px;
    }
  }
  
  /* ──────────────────────────────────────────────────────────────────────────
   * Message Bubbles - container queries + :has()
   * ──────────────────────────────────────────────────────────────────────── */
  .wa-message {
    display: flex;
    max-width: 65%;
    container-type: inline-size;
    
    &.message-out {
      align-self: flex-end;
      flex-direction: row-reverse;
      
      & .message-bubble {
        background: var(--msg-out-bg);
        border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg);
        margin-right: var(--gutter-sm);
        
        /* :has() for selected state */
        &:has(.message-checkbox:checked) {
          background: var(--msg-out-bg-selected);
          box-shadow: 0 0 0 2px var(--whatsapp-green);
        }
      }
    }
    
    &.message-in {
      align-self: flex-start;
      
      & .message-bubble {
        background: var(--msg-in-bg);
        border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
        margin-left: var(--gutter-sm);
        
        /* :has() for selected state */
        &:has(.message-checkbox:checked) {
          background: var(--msg-in-bg-selected);
          box-shadow: 0 0 0 2px var(--whatsapp-teal);
        }
      }
    }
    
    & .message-bubble {
      padding: var(--pad-sm) var(--pad-md);
      position: relative;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      
      /* Container query for responsive text */
      @container (max-width: 200px) {
        padding: var(--pad-sm);
        
        & .message-text {
          font-size: var(--text-sm);
        }
      }
      
      & .message-text {
        margin: 0 0 var(--marg-xs);
        color: var(--text-primary);
        line-height: 1.4;
        word-wrap: break-word;
      }
      
      & .message-meta {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--gutter-xs);
        font-size: var(--text-xs);
        color: var(--text-meta);
        
        & .read-receipt {
          color: var(--whatsapp-green);
        }
      }
      
      /* Hidden checkbox for selection state */
      & .message-checkbox {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }
    }
    
    & .avatar-small {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--whatsapp-green), var(--whatsapp-teal));
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: var(--text-xs);
      flex-shrink: 0;
    }
  }
  
  /* Date divider */
  .wa-date-divider {
    align-self: center;
    background: var(--whatsapp-panel);
    padding: var(--pad-xs) var(--pad-md);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--text-meta);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin: var(--marg-sm) 0;
  }
  
  /* ──────────────────────────────────────────────────────────────────────────
   * Input Area
   * ──────────────────────────────────────────────────────────────────────── */
  .wa-input-area {
    background: var(--whatsapp-panel);
    padding: var(--pad-sm) var(--pad-md);
    display: flex;
    align-items: center;
    gap: var(--gutter-sm);
    border-top: 1px solid var(--color-border);
    content-visibility: auto;
    contain: layout style;
    
    & .input-actions {
      display: flex;
      gap: var(--gutter-xs);
      
      & button {
        background: none;
        border: none;
        font-size: var(--text-xl);
        cursor: pointer;
        color: var(--text-secondary);
        padding: var(--pad-xs);
        border-radius: 50%;
        transition: all var(--wa-transition);
        
        &:hover {
          background: color-mix(in oklch, var(--text-secondary), transparent 85%);
          color: var(--whatsapp-green);
        }
      }
    }
    
    & .message-input {
      flex: 1;
      padding: var(--pad-sm) var(--pad-md);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-full);
      font-size: var(--text-base);
      outline: none;
      transition: border-color var(--wa-transition);
      
      &:focus {
        border-color: var(--whatsapp-green);
      }
    }
    
    & .send-button {
      background: var(--whatsapp-green);
      color: white;
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background var(--wa-transition);
      
      &:hover {
        background: var(--whatsapp-green-dark);
      }
      
      &:disabled {
        background: var(--text-meta);
        cursor: not-allowed;
      }
    }
  }
  
  /* ──────────────────────────────────────────────────────────────────────────
   * Typing Indicator
   * ──────────────────────────────────────────────────────────────────────── */
  .wa-typing {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
    padding: var(--pad-sm) var(--pad-md);
    background: var(--msg-in-bg);
    border-radius: var(--radius-lg);
    width: fit-content;
    margin-left: var(--gutter-sm);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    
    & .typing-dot {
      width: 8px;
      height: 8px;
      background: var(--text-meta);
      border-radius: 50%;
      animation: typing-bounce 1.4s infinite ease-in-out both;
      
      &:nth-child(1) { animation-delay: -0.32s; }
      &:nth-child(2) { animation-delay: -0.16s; }
    }
  }
}

@layer whatsapp-utilities {
  @keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
  }
  
  .whatsapp-demo {
    & .text-link {
      color: var(--whatsapp-green);
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}