/**
 * Slack Demo — Refactored with Modern CSS (2024)
 * Features: @layer, @container, color-mix(), CSS nesting, subgrid, :has()
 */

@layer slack-reset, slack-tokens, slack-components, slack-utilities;

@layer slack-tokens {
  .slack-demo {
    --slack-purple: oklch(0.55 0.25 300);
    --slack-red: oklch(0.55 0.2 25);
    --slack-yellow: oklch(0.75 0.18 85);
    --slack-green: oklch(0.65 0.18 150);
    
    --slack-bg: oklch(0.12 0 0);
    --slack-sidebar: oklch(0.16 0 0);
    --slack-header: oklch(0.96 0 0);
    --slack-surface: oklch(1 0 0);
    
    --text-primary: oklch(0.15 0 0);
    --text-secondary: oklch(0.45 0 0);
    
    --slack-transition: 150ms ease;
  }
}

@layer slack-reset {
  .slack-demo {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color-scheme: light;
    body { margin: 0; background: var(--slack-surface); height: 100vh; overflow: hidden; }
  }
}

@layer slack-components {
  .slack-app {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 44px 1fr;
    height: 100vh;
    
    /* Sidebar */
    & .sidebar {
      grid-row: 1 / -1;
      background: var(--slack-sidebar);
      color: white;
      display: flex;
      flex-direction: column;
      
      & .workspace-header {
        padding: var(--pad-sm);
        border-bottom: 1px solid color-mix(in oklch, white, transparent 85%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        & .workspace-name {
          font-weight: var(--font-bold);
          display: flex;
          align-items: center;
          gap: var(--gutter-xs);
        }
      }
      
      & .nav-section {
        padding: var(--pad-sm);
        
        & .nav-item {
          display: flex;
          align-items: center;
          gap: var(--gutter-sm);
          padding: var(--pad-xs) var(--pad-sm);
          border-radius: var(--radius-sm);
          cursor: pointer;
          transition: background var(--slack-transition);
          
          &:hover {
            background: color-mix(in oklch, white, transparent 85%);
          }
          
          &:has(.active) {
            background: color-mix(in oklch, white, transparent 75%);
          }
          
          & .channel-icon { opacity: 0.7; }
          & .channel-name { flex: 1; font-size: var(--text-sm); }
          & .unread-badge {
            background: var(--slack-red);
            font-size: var(--text-xs);
            padding: 1px 6px;
            border-radius: 10px;
          }
        }
      }
    }
    
    /* Main area */
    & .main-area {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      
      & .channel-header {
        background: var(--slack-header);
        padding: var(--pad-sm) var(--pad-md);
        border-bottom: 1px solid var(--color-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        & .channel-title {
          font-weight: var(--font-bold);
          display: flex;
          align-items: center;
          gap: var(--gutter-sm);
        }
      }
      
      & .messages {
        flex: 1;
        overflow-y: auto;
        padding: var(--pad-md);
        display: flex;
        flex-direction: column;
        gap: var(--gutter-md);
        
        & .message {
          display: flex;
          gap: var(--gutter-sm);
          
          &:hover .message-actions { opacity: 1; }
          
          & .avatar {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-sm);
            background: linear-gradient(135deg, var(--slack-purple), var(--slack-blue));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-sm);
            font-weight: var(--font-bold);
            flex-shrink: 0;
          }
          
          & .message-content {
            flex: 1;
            min-width: 0;
            
            & .message-meta {
              display: flex;
              align-items: baseline;
              gap: var(--gutter-sm);
              margin-bottom: 2px;
              
              & .sender { font-weight: var(--font-semibold); }
              & .timestamp { font-size: var(--text-xs); color: var(--text-secondary); }
            }
            
            & .message-text {
              margin: 0;
              line-height: 1.5;
            }
            
            & .message-actions {
              display: flex;
              gap: var(--gutter-xs);
              margin-top: var(--marg-xs);
              opacity: 0;
              transition: opacity var(--slack-transition);
              
              & button {
                background: var(--slack-surface);
                border: 1px solid var(--color-border);
                padding: 2px var(--pad-xs);
                border-radius: var(--radius-sm);
                font-size: var(--text-xs);
                cursor: pointer;
                
                &:hover { background: var(--slack-bg); }
              }
            }
            
            & .reactions {
              display: flex;
              gap: var(--gutter-xs);
              margin-top: var(--marg-xs);
              
              & .reaction {
                background: color-mix(in oklch, var(--slack-yellow), transparent 70%);
                border: 1px solid color-mix(in oklch, var(--slack-yellow), transparent 50%);
                padding: 2px var(--pad-xs);
                border-radius: var(--radius-full);
                font-size: var(--text-xs);
                cursor: pointer;
                
                &:hover {
                  background: color-mix(in oklch, var(--slack-yellow), transparent 50%);
                }
              }
            }
          }
        }
      }
      
      & .message-input {
        background: var(--slack-header);
        padding: var(--pad-md);
        border-top: 1px solid var(--color-border);
        
        & .input-wrapper {
          background: var(--slack-surface);
          border: 2px solid var(--color-border);
          border-radius: var(--radius-md);
          padding: var(--pad-sm) var(--pad-md);
          display: flex;
          align-items: center;
          gap: var(--gutter-sm);
          transition: border-color var(--slack-transition);
          
          &:has(input:focus) {
            border-color: var(--slack-purple);
          }
          
          & input {
            flex: 1;
            border: none;
            outline: none;
            font-size: var(--text-base);
          }
        }
      }
    }
  }
}

@layer slack-utilities {
  .slack-demo {
    & .text-secondary { color: var(--text-secondary); }
  }
}