/* Shared message/viewer theme.
   Purpose: one edit point for output viewer backgrounds, message bubbles,
   role chips, metadata, and inline code across admin, PLDM, and phone views. */

:root {
  --wv-viewer-bg: var(--wv-theme-page-bg, var(--bg-0));
  --wv-viewer-scroll: var(--wv-theme-scroll, var(--bg-3));
  --wv-viewer-scroll-hover: var(--wv-theme-scroll-hover, var(--bg-4));

  --wv-user-bubble-bg: var(--wv-theme-user-bg, color-mix(in oklab, var(--accent) 10%, var(--bg-1)));
  --wv-user-bubble-line: var(--wv-theme-user-line, var(--accent-line));
  --wv-user-chip-bg: var(--wv-theme-user-chip-bg, color-mix(in oklab, var(--accent) 14%, transparent));
  --wv-user-chip-fg: var(--wv-theme-user-chip-fg, var(--accent-2, var(--accent)));

  --wv-assistant-bubble-bg: var(--wv-theme-assistant-bg, var(--bg-2));
  --wv-assistant-bubble-line: var(--wv-theme-assistant-line, var(--line));
  --wv-assistant-chip-bg: var(--wv-theme-assistant-chip-bg, color-mix(in oklab, var(--fg-2) 14%, transparent));
  --wv-assistant-chip-fg: var(--wv-theme-assistant-chip-fg, var(--fg-1));

  --wv-system-bubble-bg: var(--wv-theme-system-bg, transparent);
  --wv-system-bubble-line: var(--wv-theme-system-line, var(--line-strong));
  --wv-system-fg: var(--wv-theme-system-fg, var(--fg-1));

  --wv-meta-line: var(--wv-theme-meta-line, var(--line));
  --wv-meta-fg: var(--wv-theme-meta-fg, var(--fg-2));
  --wv-code-bg: var(--wv-theme-code-bg, color-mix(in oklab, var(--accent) 8%, var(--bg-2)));
  --wv-code-fg: var(--wv-theme-code-fg, var(--accent-2, var(--accent)));
  --wv-code-line: var(--wv-theme-code-line, color-mix(in oklab, var(--accent) 14%, transparent));
  --wv-heading-fg: var(--wv-theme-heading-fg, var(--accent-2, var(--accent)));
}

.msg-area,
.chat-feed {
  background: var(--wv-viewer-bg);
}

.msg-area::-webkit-scrollbar-thumb,
.chat-feed::-webkit-scrollbar-thumb {
  background: var(--wv-viewer-scroll);
}
.msg-area::-webkit-scrollbar-thumb:hover,
.chat-feed::-webkit-scrollbar-thumb:hover {
  background: var(--wv-viewer-scroll-hover);
}

.wv-msg.user,
.msg.user {
  background: var(--wv-user-bubble-bg);
  border-color: var(--wv-user-bubble-line);
}
.wv-msg.assistant,
.msg.assistant {
  background: var(--wv-assistant-bubble-bg);
  border-color: var(--wv-assistant-bubble-line);
}
.wv-msg.system,
.msg.system {
  background: var(--wv-system-bubble-bg);
  border-color: var(--wv-system-bubble-line);
  color: var(--wv-system-fg);
}

.msg.user .msg-role {
  background: var(--wv-user-chip-bg);
  color: var(--wv-user-chip-fg);
}
.msg.assistant .msg-role {
  background: var(--wv-assistant-chip-bg);
  color: var(--wv-assistant-chip-fg);
}
.msg.system .msg-role {
  background: color-mix(in oklab, var(--fg-2) 14%, transparent);
  color: var(--wv-system-fg);
}

.wv-footer,
.meta {
  border-top-color: var(--wv-meta-line);
  color: var(--wv-meta-fg);
}
.wv-time,
.wv-tokens,
.wv-tool-count,
.wv-date,
.wv-agent-meta,
.msg-time,
.meta {
  color: var(--wv-meta-fg);
}

.wv-msg code,
.body code {
  background: var(--wv-code-bg);
  color: var(--wv-code-fg);
  border-color: var(--wv-code-line);
}

.wv-md-heading {
  display: inline;
  color: var(--wv-heading-fg);
  font-weight: 800;
  letter-spacing: 0;
}

.wv-md-heading-2 { font-size: 14px; }
.wv-md-heading-3 { font-size: 13px; }