# Chat Panel - Design System

Interactive chat panel component with ripple hover effects.

---

## Overview

| Property | Value |
|----------|-------|
| Width | 388px |
| Height | 915px |
| Border Radius | 12px |
| Font | Space Grotesk |
| Shadow | 0 4px 20px rgba(0,0,0,0.08) |
| Background | Grid pattern (24px cells) |

**Components:**
- Strategy Mode Header (with ripple effect)
- AI Static Chat Message
- Input Area (with ripple effect)

---

## Chat Panel Container

### Specs

| Property | Value |
|----------|-------|
| Width | 388px |
| Height | 915px |
| Border Radius | 12px |
| Background | #ffffff |
| Border | 1px solid rgba(0,0,0,0.08) |
| Shadow | 0 4px 20px rgba(0,0,0,0.08) |
| Grid Pattern | 24px cells, rgba(0,0,0,0.04) |

### CSS

```css
.chat-panel {
  width: 388px;
  height: 915px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.chat-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
```

---

## Strategy Mode Header

### Preview
- Centered white container with ripple effect
- "Strategy Mode:" label + "Simple" button on one line

### Specs

| Property | Value |
|----------|-------|
| Container Width | 202px |
| Container Height | 41px |
| Position | Centered, Y: 13px |
| Border Radius | 5px |
| Background | #ffffff |
| Shadow | 0 1px 0 0 #808080 |
| Inner Padding | 12px horizontal |

### Button Specs

| Property | Value |
|----------|-------|
| Height | 24px |
| Border Radius | 6px |
| Background | #383737 |
| Shadow | 0 8px 22px -6px rgba(24,39,75,0.12), 0 14px 64px -4px rgba(24,39,75,0.12) |

### Typography

| Element | Font Size | Weight | Color |
|---------|-----------|--------|-------|
| Strategy Mode: | 16px | 400 | #383737 |
| Simple (button) | 12px | 500 | #ffffff |

### HTML

```html
<div class="chat-header">
  <div class="header-wrapper" id="headerWrapper">
    <div class="ripple-grid" id="headerRippleGrid"></div>
    <div class="header-content">
      <div class="strategy-mode-label">Strategy Mode:</div>
      <button class="mode-button">
        <span class="mode-button-text">Simple</span>
      </button>
    </div>
  </div>
</div>
```

### CSS

```css
.chat-header {
  padding: 13px 0;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.header-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 202px;
  height: 41px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 0 0 #808080;
  overflow: hidden;
}

.header-wrapper .ripple-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  z-index: 1;
  overflow: hidden;
  border-radius: 5px;
}

.header-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  height: 100%;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.85);
  margin: 3px;
  border-radius: 3px;
}

.strategy-mode-label {
  color: #383737;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
}

.mode-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: #383737;
  box-shadow: 0 8px 22px -6px rgba(24, 39, 75, 0.12),
              0 14px 64px -4px rgba(24, 39, 75, 0.12);
  height: 24px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.mode-button-text {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}
```

---

## AI Static Chat Message

### Preview
- Dark circle avatar + text content
- Title and description on separate lines

### Specs

| Property | Value |
|----------|-------|
| Width | 340px |
| Padding | 16px 20px |
| Border Radius | 5px |
| Background | #ffffff |
| Shadow | 0 1px 0 0 #808080 |
| Gap (icon to text) | 16px |

### Avatar Specs

| Property | Value |
|----------|-------|
| Size | 35x35px |
| Border Radius | 50% (circle) |
| Background | #383737 |

### Typography

| Element | Font Size | Weight | Color | Line Height |
|---------|-----------|--------|-------|-------------|
| Title | 16px | 700 | #383737 | normal |
| Description | 12px | 400 | #383737 | normal |

### Positions

| Element | Property | Value |
|---------|----------|-------|
| Title/Description gap | gap | 4px |
| Letter spacing | letter-spacing | 0px |

### HTML

```html
<div class="ai-static-chat">
  <div class="ai-icon"></div>
  <div class="chat-content">
    <div class="chat-title">Want to quick start a new strategy?</div>
    <div class="chat-description">I can create a new strategy for you, just describe your new idea in a few sentences</div>
  </div>
</div>
```

### CSS

```css
.ai-static-chat {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 340px;
  padding: 16px 20px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 0 0 #808080;
}

.ai-icon {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #383737;
}

.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-title {
  font-size: 16px;
  font-weight: 700;
  color: #383737;
  line-height: normal;
  margin: 0;
}

.chat-description {
  font-size: 12px;
  font-weight: 400;
  color: #383737;
  line-height: normal;
  letter-spacing: 0px;
  margin: 0;
  text-align: left;
}
```

---

## Input Area

### Preview
- White container with ripple effect
- Text input with placeholder
- Attachment and voice icons
- Send button

### Specs

| Property | Value |
|----------|-------|
| Padding | 16px 24px 24px |
| Background | rgba(255,255,255,0.9) |
| Border Top | 1px solid rgba(0,0,0,0.06) |

### Input Wrapper Specs

| Property | Value |
|----------|-------|
| Height | 41px |
| Border Radius | 5px |
| Background | #ffffff |
| Shadow | 0 1px 0 0 #808080 |

### Send Button Specs

| Property | Value |
|----------|-------|
| Size | 41x41px |
| Border Radius | 8px |
| Background | transparent |
| Hover Background | rgba(0,0,0,0.05) |
| Icon Size | 24x24px |
| Icon Color | #1a1a1a |

### Icon Button Specs

| Property | Value |
|----------|-------|
| Size | 28x28px |
| Border Radius | 4px |
| Icon Size | 18x18px |
| Color | #4a4a4a |
| Hover Color | #1a1a1a |

### Typography

| Element | Font Size | Color |
|---------|-----------|-------|
| Input Text | 14px | #1a1a1a |
| Placeholder | 14px | #9a9a9a |

### HTML

```html
<div class="input-area">
  <div class="input-wrapper" id="inputWrapper">
    <div class="ripple-grid" id="inputRippleGrid"></div>
    <div class="input-content">
      <input type="text" class="input-field" placeholder="Ask..." />
      <div class="input-icons">
        <button class="input-icon-btn" title="Attach file">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
          </svg>
        </button>
        <button class="input-icon-btn" title="Voice input">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
            <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
            <line x1="12" y1="19" x2="12" y2="23"/>
            <line x1="8" y1="23" x2="16" y2="23"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <button class="send-button" title="Send">
    <svg viewBox="0 0 24 24" fill="#1a1a1a">
      <path d="M1.946 9.315C1.424 9.141 1.419 8.86 1.956 8.681L21.043 2.319C21.572 2.143 21.875 2.439 21.727 2.957L16.273 22.043C16.123 22.572 15.818 22.59 15.594 22.088L12 14L18 6L10 12L1.946 9.315Z"/>
    </svg>
  </button>
</div>
```

### CSS

```css
.input-area {
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.9);
}

.input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  height: 41px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 0 0 #808080;
  overflow: hidden;
}

.input-wrapper .ripple-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  z-index: 1;
  overflow: hidden;
  border-radius: 5px;
}

.input-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 12px;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  margin: 3px;
  border-radius: 3px;
}

.input-field {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #1a1a1a;
  outline: none;
}

.input-field::placeholder {
  color: #9a9a9a;
  font-size: 14px;
}

.input-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}

.input-icon-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #4a4a4a;
  transition: background 0.2s ease, color 0.2s ease;
}

.input-icon-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a1a;
}

.input-icon-btn svg {
  width: 18px;
  height: 18px;
}

.send-button {
  width: 41px;
  height: 41px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.send-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

.send-button svg {
  width: 24px;
  height: 24px;
}
```

---

## Shared: Ripple Effect

Interactive hover animation (Orange -> Pink -> Blue gradient).

### CSS

```css
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap');

.ripple-cell {
  background-color: rgba(0, 0, 0, 0.02);
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  opacity: 0.4;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.ripple-cell:hover {
  opacity: 0.8;
}

.ripple-cell.ripple-active {
  animation: cellRipple var(--duration, 200ms) ease-out var(--delay, 0ms);
}

@keyframes cellRipple {
  0% {
    background-color: rgba(251, 146, 60, 0.5);  /* Orange */
    opacity: 1;
  }
  40% {
    background-color: rgba(244, 114, 182, 0.4); /* Pink */
    opacity: 0.9;
  }
  70% {
    background-color: rgba(147, 197, 253, 0.3); /* Light Blue */
    opacity: 0.7;
  }
  100% {
    background-color: rgba(0, 0, 0, 0.02);
    opacity: 0.4;
  }
}
```

### JavaScript

```javascript
function setupRippleGrid(container, gridElement, width, height) {
  const cellSize = 10;
  const cols = Math.ceil(width / cellSize);
  const rows = Math.ceil(height / cellSize);

  gridElement.style.gridTemplateColumns = `repeat(${cols}, ${cellSize}px)`;
  gridElement.style.gridTemplateRows = `repeat(${rows}, ${cellSize}px)`;

  const cells = [];
  for (let i = 0; i < rows * cols; i++) {
    const cell = document.createElement('div');
    cell.className = 'ripple-cell';
    cell.dataset.row = Math.floor(i / cols);
    cell.dataset.col = i % cols;
    gridElement.appendChild(cell);
    cells.push(cell);
  }

  function triggerRipple(targetRow, targetCol) {
    cells.forEach((cell, idx) => {
      const row = Math.floor(idx / cols);
      const col = idx % cols;
      const distance = Math.hypot(targetRow - row, targetCol - col);
      const delay = distance * 20;
      const duration = 120 + distance * 25;

      cell.classList.remove('ripple-active');
      void cell.offsetWidth; // Force reflow

      cell.style.setProperty('--delay', `${delay}ms`);
      cell.style.setProperty('--duration', `${duration}ms`);
      cell.classList.add('ripple-active');

      setTimeout(() => {
        cell.classList.remove('ripple-active');
      }, delay + duration);
    });
  }

  let lastRippleTime = 0;
  container.addEventListener('mouseenter', (e) => {
    const now = Date.now();
    if (now - lastRippleTime > 400) {
      const rect = gridElement.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const col = Math.floor(x / cellSize);
      const row = Math.floor(y / cellSize);
      triggerRipple(row, col);
      lastRippleTime = now;
    }
  });

  // Optional: trigger on input focus
  const input = container.querySelector('.input-field');
  if (input) {
    input.addEventListener('focus', () => {
      const now = Date.now();
      if (now - lastRippleTime > 400) {
        triggerRipple(Math.floor(rows / 2), 0);
        lastRippleTime = now;
      }
    });
  }
}

// Initialize ripple effects
setupRippleGrid(
  document.getElementById('headerWrapper'),
  document.getElementById('headerRippleGrid'),
  202, 41
);

setupRippleGrid(
  document.getElementById('inputWrapper'),
  document.getElementById('inputRippleGrid'),
  290, 41
);
```

---

## Design Tokens

### Colors

| Token | Value | Usage |
|-------|-------|-------|
| `--color-text-primary` | #383737 | Titles, labels |
| `--color-text-secondary` | #4a4a4a | Icons |
| `--color-text-muted` | #9a9a9a | Placeholders |
| `--color-text-input` | #1a1a1a | Input text |
| `--color-button-bg` | #383737 | Mode button |
| `--color-button-text` | #ffffff | Button text |
| `--color-shadow` | #808080 | Bottom shadow |
| `--color-ripple-orange` | rgba(251,146,60,0.5) | Ripple start |
| `--color-ripple-pink` | rgba(244,114,182,0.4) | Ripple mid |
| `--color-ripple-blue` | rgba(147,197,253,0.3) | Ripple end |

### Typography

| Element | Font | Size | Weight |
|---------|------|------|--------|
| Strategy Mode Label | Space Grotesk | 16px | 400 |
| Mode Button | Space Grotesk | 12px | 500 |
| Chat Title | Space Grotesk | 16px | 700 |
| Chat Description | Space Grotesk | 12px | 400 |
| Input Text | Space Grotesk | 14px | 400 |
| Placeholder | Space Grotesk | 14px | 400 |

### Spacing

| Token | Value |
|-------|-------|
| Panel padding | 24px |
| Header padding Y | 13px |
| Input area padding | 16px 24px 24px |
| Component gap | 16px |
| Inner content margin | 3px |
| Grid cell size (background) | 24px |
| Ripple cell size | 10px |

### Shadows

| Usage | Value |
|-------|-------|
| Panel | 0 4px 20px rgba(0,0,0,0.08) |
| Components | 0 1px 0 0 #808080 |
| Mode Button | 0 8px 22px -6px rgba(24,39,75,0.12), 0 14px 64px -4px rgba(24,39,75,0.12) |