@import "./messaging/message-base.css";
@import "./messaging/prompt-input.css";
@import "./messaging/message-section.css";
@import "./messaging/virtual-follow-list.css";
@import "./messaging/message-selection.css";
@import "./messaging/delete-overlays.css";
@import "./messaging/message-timeline.css";
@import "./messaging/tool-call.css";
@import "./messaging/log-view.css";

/* Message item base styles */

.message-item-base {
  @apply flex flex-col gap-2 p-3 w-full;
}

.assistant-message {
  /* gap: 0.25rem; */
  padding: 0.6rem 0.65rem;
}

/* Message state badges */
.message-queued-badge {
  @apply inline-block font-bold px-3 py-1 rounded mb-3 text-xs tracking-wide;
  background-color: var(--accent-primary);
  color: var(--text-inverted);
}

/* Message error block */
.message-error-block {
  @apply text-sm p-3 rounded border-s-[3px] my-2;
  color: var(--status-error);
  background-color: var(--message-error-bg);
  border-color: var(--status-error);
}

/* Message state indicators */
.message-generating {
  @apply text-sm italic py-2;
  color: var(--text-muted);
}

.message-sending {
  @apply text-xs italic mt-1;
  color: var(--text-muted);
}

.message-error {
  @apply text-xs mt-1;
  color: var(--status-error);
}

.generating-spinner {
  @apply inline-block;
  animation: pulse 1.5s ease-in-out infinite;
}

.message-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: inherit;
}

.message-text-assistant {
  white-space: normal;
}

.message-text pre {
  overflow-x: auto;
  padding: 8px;
  background-color: var(--surface-code);
  border-radius: 4px;
}

/* Message error part */
.message-error-part {
  color: var(--status-error);
  font-size: var(--font-size-base);
  padding: 8px;
  background-color: var(--message-error-bg);
  border-radius: 4px;
}

/* Message reasoning */
.message-reasoning {
  @apply my-2 border rounded;
  border-color: var(--border-base);
  background-color: var(--surface-secondary);
  color: inherit;
}

.reasoning-container {
  @apply p-2;
}

.reasoning-header {
  @apply flex items-center gap-1.5 text-xs cursor-pointer select-none;
  color: var(--text-muted);
}

.reasoning-header:hover {
  color: var(--accent-primary);
}

.reasoning-icon {
  @apply text-xs;
  transition: transform 150ms ease;
}

.reasoning-label {
  font-weight: var(--font-weight-medium);
}