@use '../../styles/mixins' as *;

// =============================================================================
// Event Renderer — individual session event styles
// =============================================================================

// System context (system prompt) — collapsible left-bordered section
.systemContextEvent {
  border-left: 3px solid var(--accent-purple, #a78bfa);
  margin: var(--space-xs) 0;
  font-size: var(--font-size-sm);
}

.systemContextHeader {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: none;
  border: none;
  padding: 2px var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-family: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast),
              background var(--transition-fast);

  &:hover {
    color: var(--text-primary);
    background: var(--bg-overlay);
  }
}

.systemContextBadge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--accent-purple, #a78bfa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.systemContextToggle {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: 10px;
}

.systemContextPre {
  padding: var(--space-xs) var(--space-sm);
  margin: 0;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}

.systemContextEllipsis {
  color: var(--text-tertiary);
}

.systemEvent {
  color: var(--text-secondary);
  font-style: italic;
  font-size: var(--font-size-sm);
  padding: 2px 0;
}

.systemTimestamp {
  color: var(--text-tertiary);
}

.textEvent {
  position: relative;
  padding: var(--space-xs) 0;
  padding-left: var(--space-xs);
  line-height: var(--line-height);

  // --- Markdown element styles ---

  h1, h2, h3, h4, h5, h6 {
    margin: var(--space-sm) 0 var(--space-xs);
    font-weight: var(--font-weight-bold);
  }

  h1 { font-size: 1.4em; }
  h2 { font-size: 1.2em; }
  h3 { font-size: 1.1em; }

  p {
    margin: var(--space-xs) 0;
  }

  pre {
    @include surface-inset;
    padding: var(--space-sm);
    margin: var(--space-xs) 0;
    overflow: auto;
    font-size: 11px;
    white-space: pre-wrap;
  }

  code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-overlay);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
  }

  pre code {
    background: none;
    padding: 0;
  }

  table {
    border-collapse: collapse;
    margin: var(--space-xs) 0;
    font-size: var(--font-size-sm);
    width: 100%;
  }

  th, td {
    border: 1px solid var(--border-subtle);
    padding: var(--space-xs) var(--space-sm);
    text-align: left;
  }

  th {
    background: var(--bg-overlay);
    font-weight: var(--font-weight-bold);
  }

  ul, ol {
    padding-left: var(--space-lg);
    margin: var(--space-xs) 0;
  }

  li {
    margin: 2px 0;
  }

  strong {
    font-weight: var(--font-weight-bold);
  }

  a {
    color: var(--accent-blue);
    text-decoration: underline;
  }

  hr {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-sm) 0;
  }

  blockquote {
    border-left: 3px solid var(--border-subtle);
    padding-left: var(--space-sm);
    margin: var(--space-xs) 0;
    color: var(--text-secondary);
  }
}

// --- Copy button positioning ---

.codeBlockWrapper {
  position: relative;

  &:hover .codeBlockCopyButton {
    opacity: 0.4;
  }
}

.codeBlockCopyButton {
  // Override absolute position from CopyButton default — sits inside the wrapper.
  // Mobile: base CopyButton handles always-visible (opacity: 1).
}

// Tool card styles have moved to ../tools/toolCards.module.scss.
// Individual cards: FileReadCard, FileEditCard, ShellCard, SearchCard, etc.

.errorEvent {
  color: var(--accent-red);
  font-weight: var(--font-weight-bold);
  padding: var(--space-xs) 0;
  border-left: 3px solid var(--accent-red);
  padding-left: var(--space-sm);
}

.statusEvent {
  color: var(--accent-yellow);
  font-size: 11px;
  padding: var(--space-xs) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin: var(--space-xs) 0;
}

.userInputEvent {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-xs) 0;
}

.userInputContent {
  background: var(--accent-blue-dim);
  color: var(--accent-blue-fg);
  border: 1px solid var(--accent-blue);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  max-width: 75%;
  word-break: break-word;
  font-size: var(--font-size-sm);
  line-height: var(--line-height);

  @include mobile {
    max-width: 90%;
  }
}

.signalEvent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  border-left: 3px solid var(--accent-yellow);
  padding: var(--space-xs) var(--space-sm);
  margin: var(--space-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.signalBadge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--accent-yellow);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.signalContent {
  white-space: pre-wrap;
  word-break: break-word;
}

.usageEvent {
  display: flex;
  justify-content: center;
  padding: var(--space-xs) 0;
  margin: var(--space-xs) 0;
}

.usageBadge {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-sm);
  letter-spacing: 0.02em;
}

.defaultEvent {
  padding: 2px 0;
  color: var(--text-secondary);
}
