/* card-chat.css — C4: per-card chat / discussion thread panel.
 *
 * Loaded by the conductor when it adds
 *   <link rel="stylesheet" href="/css/card-chat.css?v=...">
 * to frontend/index.html. All selectors are namespaced under .card-chat-* so
 * they never collide with the rest of the card-modal styles. Colours use the
 * shared dark-theme tokens from styles.css (with literal fallbacks).
 */

/* -------------------------------------------------------------------------
 * Panel container
 * ------------------------------------------------------------------------- */

.card-chat-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--bg-secondary, #334155);
  border: 1px solid var(--border-color, #475569);
  border-radius: 8px;
  font-size: 0.875rem;
}

.card-chat-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary, #f8fafc);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-color, #475569);
}

.card-chat-header i {
  color: var(--accent, #38bdf8);
}

.card-chat-count {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary, #94a3b8);
  background: var(--bg-dark, #1e293b);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}

/* -------------------------------------------------------------------------
 * Message list
 * ------------------------------------------------------------------------- */

.card-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 320px;
  overflow-y: auto;
  padding: 0.25rem;
}

.card-chat-empty {
  color: var(--text-secondary, #94a3b8);
  font-style: italic;
  text-align: center;
  padding: 1rem 0.5rem;
}

.card-chat-msg {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem 0.6rem;
  background: var(--bg-dark, #1e293b);
  border: 1px solid var(--border-color, #475569);
  border-radius: 8px;
}

/* Forward-looking: an 'ai'-role message gets a distinct accent so it can be
 * dropped in later without a CSS change. Human ('user') messages are default. */
.card-chat-msg.role-ai {
  border-left: 3px solid var(--accent, #38bdf8);
}

.card-chat-msg-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.72rem;
}

.card-chat-author {
  font-weight: 600;
  color: var(--text-primary, #f8fafc);
}

.card-chat-time {
  color: var(--text-secondary, #94a3b8);
}

.card-chat-body {
  color: var(--text-primary, #f8fafc);
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

/* -------------------------------------------------------------------------
 * Composer
 * ------------------------------------------------------------------------- */

.card-chat-composer {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border-color, #475569);
}

.card-chat-input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 2.4rem;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text-primary, #f8fafc);
  background: var(--input-bg, #1e293b);
  border: 1px solid var(--border-color, #475569);
  border-radius: 6px;
}

.card-chat-input:focus {
  outline: none;
  border-color: var(--accent, #38bdf8);
}

.card-chat-composer-actions {
  display: flex;
  justify-content: flex-end;
}

.card-chat-send {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary, #3b82f6);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.card-chat-send:hover:not(:disabled) {
  background: var(--primary-dark, #2563eb);
}

.card-chat-send:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * Tabs (Discussion / Info / Decisions) + Decisions — migration 044
 * ------------------------------------------------------------------------- */

.card-chat-tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.card-chat-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  min-height: 32px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  background: transparent;
  border: 1px solid var(--border-color, #475569);
  border-radius: 6px;
  cursor: pointer;
}

.card-chat-tab:hover {
  color: var(--text-primary, #f8fafc);
}

.card-chat-tab.active {
  color: #fff;
  background: var(--primary, #3b82f6);
  border-color: var(--primary, #3b82f6);
}

/* System/activity events (Info tab) */
.card-chat-msg.role-info {
  border-left: 3px solid var(--text-secondary, #94a3b8);
  opacity: 0.92;
}

.card-chat-msg.role-info .card-chat-author {
  color: var(--text-secondary, #94a3b8);
}

/* Decisions */
.card-chat-msg.kind-decision {
  border-left: 3px solid #fbbf24;
}

.card-chat-decision-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.card-chat-decision-status {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
}

.card-chat-decision-status.open {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
}

.card-chat-decision-status.resolved {
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
}

.card-chat-resolve {
  font: inherit;
  font-size: 0.72rem;
  padding: 0.15rem 0.55rem;
  color: var(--text-primary, #f8fafc);
  background: transparent;
  border: 1px solid var(--border-color, #475569);
  border-radius: 6px;
  cursor: pointer;
}

.card-chat-resolve:hover {
  border-color: var(--accent, #38bdf8);
}