/* ══════════════════════════════════════════════════════════════════════════
   Chat view (UI-Redesign, 2026-10-22) — DESIGN.md "Chat messages".
   Full-bleed on the panel plane: header strip, dense message rows, one
   bordered composer. Popovers (account picker, emote picker, tab
   completion) use the component menu recipe. Tokens only; name colors and
   7TV paints are data (inline styles), per the documented exception.
   ══════════════════════════════════════════════════════════════════════════ */

#view-chat { flex-direction: row; }
#chat-main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-bg-panel);
  overflow: hidden;
}
#chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; }

/* ── Header ────────────────────────────────────────────────────────────── */
#chat-header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
  height: calc(var(--control-h-lg) + var(--s-2));
  padding: 0 var(--s-3) 0 var(--s-4);
  border-bottom: var(--bw) solid var(--color-border-subtle);
}
.chat-header-avatar { display: inline-flex; }
#chat-channel-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
#chat-live-badge .dot { margin-right: var(--s-0-5); }
.chat-header-meta { font-size: var(--fs-xs); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#chat-header .spacer { flex: 1; }
#chat-mute-btn { width: var(--control-h-md); height: var(--control-h-md); }
#chat-mute-btn.active { color: var(--color-accent-text); background: var(--color-accent-subtle); }

/* ── Messages ──────────────────────────────────────────────────────────── */
#messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--s-2) 0;
  overscroll-behavior: contain;
}
#messages > .empty-state { flex: 1; }

.msg-row {
  position: relative;
  padding: var(--s-0-5) var(--s-4);
  font-family: var(--chat-font-family);
  font-size: var(--chat-font-size);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}
.msg-row:hover { background: var(--color-bg-hover); }
.msg-row:hover .msg-actions, .msg-row:focus-within .msg-actions { display: flex; }
body.chat-compact .msg-row { padding-top: 0; padding-bottom: 0; line-height: var(--lh-normal); }

/* Highlights (functional): tint + 2px edge, set in JS, one class at most. */
.msg-row.pinged { background: var(--color-ping-bg); box-shadow: inset var(--bw-thick) 0 0 var(--color-ping-edge); }
.msg-row.highlighted-user { background: var(--color-highlight-bg); box-shadow: inset var(--bw-thick) 0 0 var(--color-highlight-edge); }
.msg-row.deleted .msg-text,
.msg-row.deleted .msg-username { text-decoration: line-through; }
.msg-row.deleted { opacity: .55; }

.msg-time {
  margin-right: var(--s-1-5);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--color-text-tertiary);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
body.hide-timestamps .msg-time { display: none; }

.msg-badges { display: inline-flex; align-items: center; gap: var(--s-0-5); vertical-align: middle; margin-right: var(--s-1); }
.msg-badges:empty { display: none; }
.msg-badge { display: inline-block; width: var(--icon-md); height: var(--icon-md); vertical-align: middle; }
.msg-badge-more { font-size: var(--fs-2xs); color: var(--color-text-tertiary); vertical-align: middle; }

.msg-username { font-weight: var(--fw-semibold); cursor: pointer; border-radius: var(--r-sm); }
/* Own user card note on this chatter (notes.js). */
.msg-note { display: inline-flex; margin-left: var(--s-1); vertical-align: -0.05em; color: var(--color-accent-text); }
.msg-username:hover { text-decoration: underline; text-underline-offset: var(--s-0-5); }
.msg-username-history { color: var(--color-text-secondary); }
.msg-colon { margin-right: var(--s-1); color: var(--color-text-tertiary); }
.msg-text { color: var(--color-text-primary); }
.msg-emote { display: inline-block; height: var(--s-6); width: auto; vertical-align: middle; margin: calc(var(--s-1) * -1) var(--s-px); }

/* 7TV paint: stacked layers clipped to the username glyphs. Each layer
   fills the same grid cell; its background (solid / gradient / animated
   image, from 7TV data) shows only through the text. */
.msg-username.paint { display: inline-grid; }
.msg-username.paint .paint-layer {
  grid-area: 1 / 1 / -1 / -1;
  -webkit-text-fill-color: transparent;
  background-color: currentColor;
  background-clip: text;
  -webkit-background-clip: text;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .msg-username.paint .paint-layer { -webkit-text-fill-color: initial; background: none; color: var(--color-text-primary); }
  .msg-username.paint .paint-layer:not(:first-child) { display: none; }
}

/* Row actions: a small ghost toolbar at the right, on hover/focus. */
.msg-actions {
  display: none;
  position: absolute;
  top: calc(var(--s-1) * -1);
  right: var(--s-3);
  gap: var(--s-px);
  padding: var(--s-0-5);
  background: var(--color-bg-overlay);
  border: var(--bw) solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popover);
  font-family: var(--font-ui);
  z-index: var(--z-sticky);
}
.msg-row:first-child .msg-actions { top: 0; }
/* Touch (no hover): tapping a row reveals its actions (chat.js toggles
   .is-active) instead of showing four buttons on every line. */
.msg-row.is-active { background: var(--color-bg-hover); }
.msg-row.is-active .msg-actions { display: flex; }
@media (hover: none) {
  .msg-actions .btn { height: var(--control-h-md); }
  .msg-actions .btn-icon { width: var(--control-h-md); }
}

/* "End of history" boundary between replayed log lines and live chat. */
.history-divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--color-text-tertiary);
}
.history-divider::before, .history-divider::after { content: ''; flex: 1; height: var(--bw); background: var(--color-border-subtle); }

/* ── Composer ──────────────────────────────────────────────────────────── */
#chat-input-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-shrink: 0;
  margin: 0 var(--s-4) var(--s-4);
  padding: var(--s-1);
  background: var(--color-bg-raised);
  border: var(--bw) solid var(--color-border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-fast);
}
#chat-input-bar:focus-within { border-color: var(--color-border-strong); }
#chat-input-bar .account-picker-btn {
  max-width: calc(var(--sidebar-w) - var(--s-12));
  background: var(--color-bg-hover);
  border-color: transparent;
}
#chat-input-bar .account-picker-btn:hover { background: var(--color-bg-active); }
#chat-input-bar .account-picker-menu { bottom: calc(100% + var(--s-2)); left: calc(var(--s-1) * -1); }

.message-input-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
#message-input {
  flex: 1;
  min-width: 0;
  height: var(--control-h-md);
  padding: 0 var(--s-2);
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text-primary);
  font-size: var(--fs-md);
}
#message-input:disabled { cursor: default; }
#message-input:focus-visible { outline: none; }

/* ── Emote picker ──────────────────────────────────────────────────────── */
.emote-picker { position: relative; flex-shrink: 0; }
.emote-picker-menu {
  position: absolute;
  bottom: calc(100% + var(--s-2) + var(--s-1));
  /* right edge flush with the composer's: past the broadcast + send buttons */
  right: calc((var(--control-h-md) * 2 + var(--s-1) * 3 + var(--bw)) * -1);
  width: calc(var(--popover-w) + var(--s-6));
  display: flex;
  flex-direction: column;
  background: var(--color-bg-overlay);
  border: var(--bw) solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-popover);
  z-index: var(--z-dropdown);
  overflow: hidden;
  animation: pop-in var(--dur-base) var(--ease-out);
}
/* Own tab class, never .nav-tab (CLAUDE.md). Same look as .seg-btn. */
.emote-picker-tabs { display: flex; gap: var(--s-0-5); padding: var(--s-1-5); border-bottom: var(--bw) solid var(--color-border-subtle); flex-shrink: 0; }
.emote-picker-tab {
  flex: 1;
  text-align: center;
  padding: var(--s-1) var(--s-1);
  border-radius: var(--r-sm);
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.emote-picker-tab:hover { color: var(--color-text-primary); background: var(--color-bg-hover); }
.emote-picker-tab.active { color: var(--color-text-primary); background: var(--color-bg-active); }
/* Reserved height on every tab (visibility toggled in JS) so the popup
   never changes size between tabs. */
.emote-picker-emoji-categories {
  display: flex;
  gap: var(--s-0-5);
  height: calc(var(--control-h-sm) + var(--s-2));
  padding: var(--s-1) var(--s-1-5);
  border-bottom: var(--bw) solid var(--color-border-subtle);
  flex-shrink: 0;
}
.emote-picker-category-tab {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--r-sm);
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.emote-picker-category-tab:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.emote-picker-category-tab.active { background: var(--color-bg-active); color: var(--color-text-primary); }
/* Fixed height (not max-height): a sparse tab leaves space instead of
   shrinking the popup. */
.emote-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--s-8), 1fr));
  gap: var(--s-1);
  padding: var(--s-2);
  height: calc(var(--popover-w) - var(--s-10));
  overflow-y: auto;
  align-content: start;
}
.emote-picker-grid.is-placeholder { display: flex; align-items: center; justify-content: center; }
.emote-picker-item {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1;
  padding: var(--s-1);
  background: none; border: none; border-radius: var(--r-md);
  cursor: pointer;
}
.emote-picker-item:hover { background: var(--color-bg-hover); }
.emote-picker-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.emote-picker-empty { padding: var(--s-6) var(--s-3); text-align: center; color: var(--color-text-tertiary); font-size: var(--fs-xs); }

/* ── Tab-completion preview ────────────────────────────────────────────── */
/* padding stays --s-1-5: tabCompletePopup.js's placePopup() assumes it. */
.tab-complete-popup {
  position: absolute;
  bottom: calc(100% + var(--s-3));
  left: 0;
  width: min(calc(var(--popover-w) + var(--s-10)), max(100%, calc(var(--popover-w) - var(--s-10))));
  max-height: min(calc(var(--popover-w) - var(--s-10)), 45vh);
  overflow-y: auto;
  padding: var(--s-1-5);
}
.tab-complete-item { flex-shrink: 0; min-height: var(--control-h-md); }
.tab-complete-popup .tab-complete-item.active { background: var(--color-bg-selected); }
.tab-complete-img { display: flex; align-items: center; justify-content: center; width: var(--s-6); height: var(--s-6); flex-shrink: 0; }
.tab-complete-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tab-complete-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-complete-provider { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--color-text-tertiary); letter-spacing: 0; }

.mod-action-group { flex-wrap: wrap; }

@media (max-width: 767px) {
  #chat-input-bar { margin: 0 var(--s-2) var(--s-2); }
  /* Avatar only — the name doesn't fit next to the input. :not(.avatar):
     the initials fallback is a <span> too (CLAUDE.md, bare selectors). */
  #chat-input-bar .account-picker-current > span:not(.avatar) { display: none; }
  .chat-header-meta { display: none; }
  .emote-picker-menu { width: min(calc(var(--popover-w) + var(--s-6)), calc(100vw - var(--s-4))); }
}