/* ═══════════════════════════════════════════════════════════════════════════════
   Slack UI Renderer — CSS Only
   Dark theme with var(--slack-bg) background, var(--slack-accent) accent, message bg var(--slack-panel)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   Root Container & Layout
   ───────────────────────────────────────────────────────────────────────────── */

.slack-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--slack-bg);
  color: var(--slack-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.slack-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Channel Header
   ───────────────────────────────────────────────────────────────────────────── */

.slack-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--slack-border);
  background: var(--slack-panel);
  flex-shrink: 0;
}

.slack-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.slack-channel-icon {
  font-weight: 600;
  color: var(--slack-accent);
  font-size: 16px;
}

.slack-channel-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--slack-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slack-header-date {
  font-size: 13px;
  color: var(--slack-muted);
  white-space: nowrap;
}

.slack-header-divider {
  width: 1px;
  height: 20px;
  background: var(--slack-border);
  margin: 0 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Messages Container & Scrolling
   ───────────────────────────────────────────────────────────────────────────── */

.slack-messages {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px;
  gap: 1px;
  background: var(--slack-bg);
}

.slack-message-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Individual Message — Standard Layout
   ───────────────────────────────────────────────────────────────────────────── */

.slack-message {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  transition: background 0.15s ease;
}

.slack-message:hover {
  background: var(--slack-hover);
  border-radius: 4px;
  padding: 6px 8px;
  margin: 0 -8px;
}

.slack-message.slack-bot-message {
  background: transparent;
  font-style: italic;
  color: var(--text-secondary);
}

.slack-message.slack-system-message {
  background: transparent;
  justify-content: center;
  text-align: center;
  padding: 12px 0;
  color: var(--slack-muted);
  font-size: 14px;
}

.slack-message.slack-system-message .slack-timestamp {
  color: var(--slack-dim);
  font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   User Avatar — Colored Circle with Initials
   ───────────────────────────────────────────────────────────────────────────── */

.slack-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  font-weight: 600;
  font-size: 14px;
  color: var(--white);
  background: var(--slack-accent);
  text-transform: uppercase;
  flex-shrink: 0;
  /*
     CSS variable approach for dynamic avatar colors:
     Each avatar instance should have --avatar-hue set via inline style.
     Example: style="--avatar-hue: 240deg"

     For JS generation approach:
     - Use HSL color space for vibrant, accessible colors
     - Distribute hues evenly: Math.abs(user_id.charCodeAt(0) * 137) % 360 degrees
     - Use fixed saturation: 65% and lightness: 45% for dark theme readability
     - Result: hsl(hue, 65%, var(--slack-avatar-lightness))
  */
  background: hsl(var(--avatar-hue, 280deg), 65%, var(--slack-avatar-lightness));
}

.slack-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: none; /* Hidden by default since images are often broken/anonymized */
}

/* ─────────────────────────────────────────────────────────────────────────────
   Message Content Container
   ───────────────────────────────────────────────────────────────────────────── */

.slack-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.slack-header-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.slack-username {
  font-weight: 600;
  color: var(--slack-text);
  font-size: 15px;
}

.slack-username.slack-bot {
  color: var(--slack-accent);
  font-style: italic;
}

.slack-timestamp {
  font-size: 13px;
  color: var(--slack-muted);
  white-space: nowrap;
}

.slack-timestamp a {
  color: var(--slack-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.slack-timestamp a:hover {
  color: var(--slack-accent);
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Message Text — Markdown Support
   ───────────────────────────────────────────────────────────────────────────── */

.slack-text {
  color: var(--slack-text);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.slack-text strong {
  font-weight: 700;
  color: var(--text-heading);
}

.slack-text del {
  text-decoration: line-through;
  color: var(--slack-muted);
}

.slack-text code {
  background: var(--slack-hover);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: "SF Mono", "Monaco", "Fira Code", monospace;
  font-size: 14px;
  color: var(--green-text);
}

.slack-text pre {
  background: var(--slack-hover);
  border: 1px solid var(--slack-border);
  border-radius: 4px;
  padding: 12px;
  overflow-x: auto;
  margin: 8px 0;
  font-family: "SF Mono", "Monaco", "Fira Code", monospace;
  font-size: 13px;
  color: var(--slack-text);
  line-height: 1.4;
}

.slack-text pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* User mention in text */
.slack-mention {
  background: var(--bg-hover-strong);
  color: var(--slack-accent);
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 500;
  white-space: nowrap;
}

/* Channel reference in text */
.slack-channel-ref {
  color: var(--link);
  font-weight: 500;
}

/* Link in text */
.slack-link {
  color: var(--link);
  text-decoration: none;
  transition: color 0.15s ease;
}

.slack-link:hover {
  color: var(--link);
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Reactions — Pill Badges
   ───────────────────────────────────────────────────────────────────────────── */

.slack-attachment {
  border-left: 3px solid var(--border-focus);
  padding: 6px 10px;
  margin: 4px 0;
  background: var(--slack-panel);
  border-radius: 0 4px 4px 0;
}
.slack-att-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--link);
  margin-bottom: 3px;
}
.slack-att-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.slack-att-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.slack-att-field {
  min-width: 120px;
}
.slack-att-field-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--slack-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.slack-att-field-value {
  font-size: 13px;
  color: var(--slack-text);
}

.slack-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.slack-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--slack-hover);
  border: 1px solid var(--slack-border);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  cursor: pointer;
}

.slack-reaction:hover {
  background: var(--bg-hover-strong);
  border-color: var(--border-strong);
  color: var(--slack-accent);
}

.slack-reaction-emoji {
  font-size: 15px;
  display: inline-block;
}

.slack-reaction-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.slack-reaction:hover .slack-reaction-count {
  color: var(--slack-accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   File Attachments — Simple Pills
   ───────────────────────────────────────────────────────────────────────────── */

.slack-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.slack-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--slack-hover);
  border: 1px solid var(--slack-border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  cursor: pointer;
  width: fit-content;
}

.slack-file:hover {
  background: var(--bg-hover-strong);
  border-color: var(--border-strong);
  color: var(--slack-accent);
}

.slack-file-icon {
  font-size: 16px;
  min-width: 20px;
}

.slack-file-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}

.slack-file-type {
  font-size: 12px;
  color: var(--slack-muted);
  text-transform: uppercase;
  margin-left: auto;
  white-space: nowrap;
  padding-left: 8px;
  border-left: 1px solid var(--slack-border);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Thread Badge — Reply Count
   ───────────────────────────────────────────────────────────────────────────── */

.slack-thread-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--bg-active);
  border: 1px solid var(--bg-active);
  border-radius: 6px;
  font-size: 13px;
  color: var(--slack-accent);
  transition: all 0.15s ease;
  cursor: pointer;
  width: fit-content;
}

.slack-thread-badge:hover {
  background: var(--bg-active);
  border-color: var(--border-focus);
  color: var(--accent);
}

.slack-thread-icon {
  font-size: 15px;
}

.slack-thread-text {
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Bot/System Message Styling
   ───────────────────────────────────────────────────────────────────────────── */

.slack-bot-message .slack-avatar {
  background: var(--slack-quote-border);
}

.slack-bot-message .slack-username {
  color: var(--slack-accent);
  font-style: italic;
}

.slack-bot-message .slack-text {
  color: var(--text-secondary);
  font-style: italic;
}

/* Channel join/leave messages — centered, lighter styling */
.slack-channel-event {
  background: transparent;
  justify-content: center;
  text-align: center;
  padding: 12px 0;
  margin: 16px 0;
  border-top: 1px solid var(--slack-hover);
  border-bottom: 1px solid var(--slack-hover);
  gap: 0;
}

.slack-channel-event .slack-avatar {
  display: none;
}

.slack-channel-event .slack-content {
  align-items: center;
  color: var(--slack-muted);
  font-size: 14px;
}

.slack-channel-event .slack-timestamp {
  margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Threading Support — Nested Threads
   ───────────────────────────────────────────────────────────────────────────── */

.slack-thread-container {
  margin-left: 12px;
  margin-top: 8px;
  padding-left: 16px;
  border-left: 2px solid var(--slack-border);
}

.slack-thread-container .slack-message {
  padding: 4px 0;
}

.slack-thread-container .slack-avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.slack-thread-container .slack-username {
  font-size: 14px;
}

.slack-thread-container .slack-timestamp {
  font-size: 12px;
}

.slack-thread-container .slack-text {
  font-size: 14px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Rich Blocks Support (Minimal)
   ───────────────────────────────────────────────────────────────────────────── */

.slack-block {
  margin: 8px 0;
}

.slack-block-section {
  padding: 8px 0;
  border-bottom: 1px solid var(--slack-hover);
}

.slack-block-section:last-child {
  border-bottom: none;
}

.slack-block-divider {
  height: 1px;
  background: var(--slack-hover);
  margin: 8px 0;
}

.slack-block-image {
  max-width: 400px;
  border-radius: 6px;
  margin: 8px 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Scrollbar Styling
   ───────────────────────────────────────────────────────────────────────────── */

.slack-messages::-webkit-scrollbar {
  width: 8px;
}

.slack-messages::-webkit-scrollbar-track {
  background: transparent;
}

.slack-messages::-webkit-scrollbar-thumb {
  background: var(--slack-border);
  border-radius: 4px;
}

.slack-messages::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Empty State
   ───────────────────────────────────────────────────────────────────────────── */

.slack-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--slack-dim);
  gap: 12px;
}

.slack-empty-state-icon {
  font-size: 48px;
  opacity: 0.6;
}

.slack-empty-state-text {
  font-size: 15px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Loading State
   ───────────────────────────────────────────────────────────────────────────── */

.slack-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  color: var(--slack-muted);
  font-size: 14px;
}

.slack-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--slack-quote-border);
  border-radius: 50%;
  animation: slack-spin 0.6s linear infinite;
}

@keyframes slack-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive Adjustments
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .slack-messages {
    padding: 12px 16px;
  }

  .slack-message {
    gap: 10px;
  }

  .slack-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .slack-username {
    font-size: 14px;
  }

  .slack-timestamp {
    font-size: 12px;
  }

  .slack-text {
    font-size: 14px;
  }

  .slack-file {
    font-size: 13px;
    padding: 6px 10px;
  }

  .slack-reaction {
    padding: 3px 6px;
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AVATAR COLOR GENERATION STRATEGY
   ═══════════════════════════════════════════════════════════════════════════════

   CSS Variable Approach (RECOMMENDED):
   ──────────────────────────────────────────────────────────────────────────────

   For each message, set the --avatar-hue CSS variable via inline style:

   <div class="slack-message" style="--avatar-hue: 240deg;">
     <div class="slack-avatar">AB</div>
     ...
   </div>

   The .slack-avatar class uses:
   background: hsl(var(--avatar-hue, 280deg), 65%, var(--slack-avatar-lightness));

   This allows each avatar to have a unique hue while maintaining consistent
   saturation (65%) and lightness (45%) for readability on dark theme.


   JavaScript Generation Approach (Alternative):
   ──────────────────────────────────────────────────────────────────────────────

   Generate hues deterministically from user_id:

   function getUserAvatarHue(user_id) {
     // Use modulo arithmetic to map any string to 0-359
     const hash = user_id.split('').reduce((acc, char) => {
       return ((acc << 5) - acc) + char.charCodeAt(0);
     }, 0);
     return Math.abs(hash) % 360;
   }

   Then set via inline style when rendering:
   const hue = getUserAvatarHue(message.user);
   avatarElement.style.setProperty('--avatar-hue', hue + 'deg');

   Or apply directly to element:
   avatarElement.style.background =
     `hsl(${hue}, 65%, var(--slack-avatar-lightness))`;


   Color Space Rationale:
   ──────────────────────────────────────────────────────────────────────────────

   - HSL provides perceptually uniform hue distribution
   - Fixed saturation (65%) ensures all colors feel similar in vibrancy
   - Fixed lightness (45%) ensures contrast against var(--slack-text) text
   - Tested range: hsl(0, 65%, var(--slack-avatar-lightness)) to hsl(359, 65%, var(--slack-avatar-lightness))
   - All colors maintain WCAG AA accessibility on dark background

   Accessibility Check:
   - Foreground (white #fff): contrast ratio ≥ 7:1 for all hues
   - More accessible than traditional Material Design avatar colors
   - Users with color blindness can distinguish via avatar position & size

   ═══════════════════════════════════════════════════════════════════════════════ */