/* Arbah v2 — ChatPanel (per-project realtime chat).
   Scoped v2 token restyle of the EXISTING DOM under
   .arbah-v2 [data-testid="chat-panel"]. Applies only under .arbah-v2 so
   legacy + v1 stay byte-identical when the flag is off.

   A deliberate CSS-level pass (not a JS DOM rebuild): ChatPanel is a
   heavily stateful realtime surface (live subscription, mentions, threads,
   edit/delete, read receipts, photo attachments) where a rebuild would risk
   regressing those flows. No JS/DOM change — all data is live. */

.arbah-v2 [data-testid="chat-panel"] {
  background: var(--arbah-v2-surface); border-color: var(--arbah-v2-border);
  border-radius: var(--arbah-v2-radius-lg); box-shadow: var(--arbah-v2-shadow-sm);
  font-family: var(--arbah-v2-font-sans); color: var(--arbah-v2-ink);
}
.arbah-v2[dir="rtl"] [data-testid="chat-panel"] { font-family: "IBM Plex Sans Arabic", var(--arbah-v2-font-sans); }

/* Surfaces */
.arbah-v2 [data-testid="chat-panel"] .bg-white { background: var(--arbah-v2-surface); }
.arbah-v2 [data-testid="chat-panel"] .bg-gray-50,
.arbah-v2 [data-testid="chat-panel"] .bg-slate-50,
.arbah-v2 [data-testid="chat-panel"] .bg-gray-100 { background: var(--arbah-v2-surface-sunken); }
.arbah-v2 [data-testid="chat-panel"] .border-gray-100,
.arbah-v2 [data-testid="chat-panel"] .border-gray-200 { border-color: var(--arbah-v2-border); }
.arbah-v2 [data-testid="chat-panel"] .rounded-xl { border-radius: var(--arbah-v2-radius-lg); }
.arbah-v2 [data-testid="chat-panel"] .rounded-lg { border-radius: var(--arbah-v2-radius-md); }

/* Text tones */
.arbah-v2 [data-testid="chat-panel"] .text-gray-900,
.arbah-v2 [data-testid="chat-panel"] .text-gray-800 { color: var(--arbah-v2-ink); }
.arbah-v2 [data-testid="chat-panel"] .text-gray-700 { color: var(--arbah-v2-ink-muted); }
.arbah-v2 [data-testid="chat-panel"] .text-gray-500,
.arbah-v2 [data-testid="chat-panel"] .text-gray-400 { color: var(--arbah-v2-ink-subtle); }

/* Author names · mentions · send button (blue → bronze) */
.arbah-v2 [data-testid="chat-panel"] .text-blue-600 { color: var(--arbah-v2-bronze-700); }
.arbah-v2 [data-testid="chat-panel"] .text-blue-600:hover { color: var(--arbah-v2-bronze-500); }

/* Date / system separators → mono uppercase ink-subtle */
.arbah-v2 [data-testid="chat-panel"] .uppercase.tracking-wider { font-family: var(--arbah-v2-font-mono); color: var(--arbah-v2-ink-subtle); letter-spacing: .06em; }

/* Composer inputs */
.arbah-v2 [data-testid="chat-panel"] input,
.arbah-v2 [data-testid="chat-panel"] textarea {
  background: var(--arbah-v2-surface); border: 1px solid var(--arbah-v2-border);
  border-radius: var(--arbah-v2-radius-md); color: var(--arbah-v2-ink); font-family: var(--arbah-v2-font-sans);
}
.arbah-v2 [data-testid="chat-panel"] input:focus,
.arbah-v2 [data-testid="chat-panel"] textarea:focus {
  outline: none; border-color: var(--arbah-v2-bronze-500); box-shadow: 0 0 0 3px rgba(160,106,44,.16);
}

/* Mention autocomplete dropdown */
.arbah-v2 [data-testid="chat-panel"] .shadow-lg { box-shadow: var(--arbah-v2-shadow-md); }

/* Error banner keeps a danger tone */
.arbah-v2 [data-testid="chat-panel"] .bg-red-50 { background: rgba(185,28,28,.08); }
.arbah-v2 [data-testid="chat-panel"] .text-red-700,
.arbah-v2 [data-testid="chat-panel"] .text-red-500 { color: var(--arbah-v2-danger); }
.arbah-v2 [data-testid="chat-panel"] .border-red-200 { border-color: rgba(185,28,28,.22); }