/* views-chat.css — Chat alert fan-out settings surface (js/views/chat-integrations.js, E4).
   Ported from docs/research/roadmap-analysis/2026-06-30-E4-chat-alert-fanout-mockup.html.
   House style via tokens.css — no hard-coded hex where a token exists. View-scoped
   selectors are prefixed with .chat-view to avoid leaking into the rest of the SPA.
   The provider brand glyphs (.g-*) and the two sample chat cards (.cc-slack/.cc-tg)
   are deliberately literal brand colors — Slack aubergine, Telegram blue, etc. —
   because they mimic each vendor's own surface, which no design token covers. */

.chat-view { max-width: 1120px; margin: 0 auto; padding: 0 16px 48px; }

/* ── View header (matches user-settings' back-link + title pattern) ── */
.chat-view .chat-view-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 0 20px; border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 20px;
}
.chat-view .chat-back-btn {
  background: none; border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm); padding: 4px 10px;
  color: var(--text-2); font-size: 16px; cursor: pointer; line-height: 1;
}
.chat-view .chat-back-btn:hover { border-color: var(--border-strong); }
.chat-view .chat-page-title { font-size: 20px; font-weight: 700; color: var(--text-1); margin: 0; }

/* ── Two-column grid: settings surface + samples rail ── */
.chat-view .chat-grid { display: grid; grid-template-columns: 1fr 372px; gap: var(--s5); align-items: start; }
@media (max-width: 940px) { .chat-view .chat-grid { grid-template-columns: 1fr; } }

/* ── Cards ── */
.chat-view .chat-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s5);
}
.chat-view .chat-card h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin: 0 0 var(--s4); font-weight: 600;
}
.chat-view .chat-desc { color: var(--text-2); font-size: 12.5px; margin: -8px 0 var(--s4); }

/* ── Channel rows ── */
.chat-view .chat-chan {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); background: var(--bg-1); margin-bottom: var(--s2);
}
.chat-view .chat-glyph {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff;
}
.chat-view .g-slack   { background: #4a154b; }
.chat-view .g-teams   { background: #4b53bc; }
.chat-view .g-discord { background: #5865f2; }
.chat-view .g-tg      { background: #229ed9; }
.chat-view .chat-chan .chat-meta { flex: 1; min-width: 0; }
.chat-view .chat-chan .chat-name { font-weight: 600; font-size: 13.5px; }
.chat-view .chat-chan .chat-line {
  color: var(--text-muted); font-size: 11.5px; font-family: var(--font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Health dots ── */
.chat-view .chat-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; display: inline-block;
}
.chat-view .chat-dot.ok   { background: var(--ok);     box-shadow: 0 0 0 3px var(--ok-dim); }
.chat-view .chat-dot.dead { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-dim); }

/* ── Scope chips ── */
.chat-view .chat-chip {
  display: inline-block; font-size: 10.5px; font-family: var(--font-mono);
  padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid var(--border);
  color: var(--text-2); background: var(--bg-2);
}
.chat-view .chat-chip.platform { color: #c7b8ff; border-color: rgba(148, 120, 255, .4); }
.chat-view .chat-chip.event    { color: #8fe3c4; border-color: rgba(52, 211, 153, .35); }
.chat-view .chat-chip.org      { color: #f2c88a; border-color: rgba(251, 191, 36, .35); }

/* ── Buttons (view-scoped; distinct from the global .btn component) ── */
.chat-view .chat-btn {
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--bg-2); color: var(--text-1); padding: 5px 11px; cursor: pointer;
}
.chat-view .chat-btn:hover { border-color: var(--border-strong); }
.chat-view .chat-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.chat-view .chat-btn.ghost   { background: transparent; }
.chat-view .chat-btn.sm      { padding: 3px 9px; font-size: 11px; }
.chat-view .chat-rowactions  { display: flex; gap: 6px; }
.chat-view .chat-status-txt      { font-size: 11px; }
.chat-view .chat-status-txt.ok   { color: var(--ok); }
.chat-view .chat-status-txt.dead { color: var(--danger); }

/* ── Routing rules table ── */
.chat-view table.chat-rules { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.chat-view table.chat-rules th {
  text-align: left; color: var(--text-muted); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  padding: 6px 8px; border-bottom: 1px solid var(--border-subtle);
}
.chat-view table.chat-rules td {
  padding: 8px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle;
}
.chat-view table.chat-rules tr:last-child td { border-bottom: 0; }
.chat-view .chat-sev { font-family: var(--font-mono); font-size: 11px; padding: 1px 7px; border-radius: var(--r-pill); }
.chat-view .chat-sev.warn { color: var(--warn);   background: var(--warn-dim); }
.chat-view .chat-sev.crit { color: var(--danger); background: var(--danger-dim); }
.chat-view .chat-arrow { color: var(--text-faint); }
.chat-view code { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); }
.chat-view .chat-empty-rules { color: var(--text-muted); font-size: 12px; padding: 6px 0; }

/* ── Add-channel modal internals (rendered inside the shared .modal component) ── */
.chat-view .chat-provtabs, .modal .chat-provtabs { display: flex; gap: 6px; margin-bottom: var(--s4); }
.chat-view .chat-provtabs button, .modal .chat-provtabs button {
  flex: 1; font-size: 11.5px; padding: 7px 4px; border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle); background: var(--bg-1);
  color: var(--text-2); cursor: pointer; font-family: var(--font-ui);
}
.chat-view .chat-provtabs button.active, .modal .chat-provtabs button.active {
  border-color: var(--accent); color: var(--text-1); background: var(--accent-soft);
}
.chat-modal-form label.chat-fld { display: block; margin-bottom: var(--s3); }
.chat-modal-form label.chat-fld > span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.chat-modal-form label.chat-fld .chat-help { color: var(--accent); cursor: help; font-weight: 700; margin-left: 4px; }
.chat-modal-form input.chat-in, .chat-modal-form select.chat-in {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-1); padding: 7px 9px;
  font-family: var(--font-mono); font-size: 12px;
}
.chat-modal-form .chat-hintbox {
  font-size: 11px; color: var(--text-muted); background: var(--bg-1);
  border: 1px dashed var(--border-subtle); border-radius: var(--r-sm);
  padding: 8px 10px; margin-bottom: var(--s4);
}
.chat-modal-form .chat-modal-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s3); }
.chat-modal-form .chat-picker { margin-bottom: var(--s3); display: flex; flex-direction: column; gap: 4px; }

/* ── Event-scope picker (routing-rule modal) ── */
.chat-modal-form .chat-event-field { margin-bottom: var(--s3); }
.chat-modal-form .chat-event-results {
  list-style: none; margin: 6px 0 0; padding: 0; max-height: 168px; overflow-y: auto;
  border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--bg-1);
}
.chat-modal-form .chat-event-opt {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; cursor: pointer;
  border-bottom: 1px solid var(--border-subtle); font-size: 12.5px; color: var(--text-1);
}
.chat-modal-form .chat-event-opt:last-child { border-bottom: 0; }
.chat-modal-form .chat-event-opt:hover { background: var(--bg-2); }
.chat-modal-form .chat-event-opt.selected { background: var(--accent-soft); font-weight: 600; }
.chat-modal-form .chat-event-opt-name { flex: 1; }
.chat-modal-form .chat-event-opt-venue { font-size: 11px; color: var(--text-muted); }
.chat-modal-form .chat-event-hint {
  font-size: 11px; color: var(--text-muted); background: var(--bg-1);
  border: 1px dashed var(--border-subtle); border-radius: var(--r-sm); padding: 8px 10px; margin: 6px 0 0;
}

/* ── Sample rendered-alert cards — provider-native surfaces (literal brand colors) ── */
.chat-view .chat-chatcard { border-radius: var(--r-md); margin-bottom: var(--s4); overflow: hidden; border: 1px solid var(--border-subtle); }

.chat-view .cc-slack { background: #1a1d21; }
.chat-view .cc-slack .cc-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px 4px; font-size: 11px; color: #ababad; }
.chat-view .cc-slack .cc-app { width: 18px; height: 18px; border-radius: 4px; background: #4a154b; display: grid; place-items: center; color: #fff; font-size: 9px; font-weight: 700; }
.chat-view .cc-slack .cc-appname { color: #e8e8e8; font-weight: 700; font-size: 12px; }
.chat-view .cc-slack .cc-appbadge { font-size: 9px; background: #3a3d42; color: #b9bbbe; border-radius: 3px; padding: 1px 4px; }
.chat-view .cc-slack .cc-time { margin-left: auto; color: #72767d; }
.chat-view .cc-slack .cc-body { display: flex; padding: 2px 12px 12px; }
.chat-view .cc-slack .cc-bar { width: 4px; border-radius: 3px; background: var(--danger); margin-right: 10px; flex: 0 0 4px; }
.chat-view .cc-slack .cc-content { flex: 1; }
.chat-view .cc-slack .cc-title { font-weight: 700; font-size: 13px; color: #e8e8e8; margin-bottom: 3px; }
.chat-view .cc-slack .cc-text { font-size: 12.5px; color: #c9cbcf; }
.chat-view .cc-slack .cc-ctx { font-size: 11px; color: #8c8f94; margin-top: 8px; display: flex; gap: 6px; align-items: center; }
.chat-view .cc-slack .cc-btn { display: inline-block; margin-top: 9px; background: #1164a3; color: #fff; font-size: 11.5px; font-weight: 600; border-radius: 4px; padding: 5px 11px; }

.chat-view .cc-tg { background: #0e1621; }
.chat-view .cc-tg .cc-tghead { padding: 8px 12px 2px; font-size: 10.5px; color: #6d7f8f; }
.chat-view .cc-tg .cc-bubble { margin: 4px 12px 12px; background: #182533; border-radius: 10px; border-top-left-radius: 3px; padding: 9px 12px; max-width: 88%; }
.chat-view .cc-tg .cc-bot { font-size: 11px; color: #5eafe8; font-weight: 600; margin-bottom: 3px; }
.chat-view .cc-tg .cc-emoji { font-size: 13px; }
.chat-view .cc-tg .cc-tgtitle { font-weight: 700; font-size: 13px; color: #e6edf3; margin: 2px 0; }
.chat-view .cc-tg .cc-tgtext { font-size: 12.5px; color: #c3cdd6; }
.chat-view .cc-tg .cc-link { color: #5eafe8; font-size: 12px; margin-top: 6px; display: inline-block; }
.chat-view .cc-tg .cc-time { font-size: 10px; color: #5b6b78; text-align: right; margin-top: 4px; }

/* ── Legend / "what stays out of chat" note ── */
.chat-view .chat-legend { font-size: 11px; color: var(--text-muted); margin-top: var(--s3); line-height: 1.6; }
.chat-view .chat-legend b { color: var(--text-2); }
.chat-view .chat-legend.tight { margin: -6px 0 14px; }