/* ================================================================
   Resayil — Raven app overlay (rs-raven.css)
   Phase 24.8, Plan 24.8-02
   ----------------------------------------------------------------
   Scope: Raven routes ONLY (3 route_prefixes — see overlays/raven.json).
   Consumes --rs-* tokens from resayil-brand.css. No new custom properties.
   Activation of bento card grid requires rs-raven-bento.js to tag
   channel list containers with data-rs-raven-bento="true".
   Chat UI primitives (bubbles, composer pill, channel list) restyled
   by pure CSS rules scoped to vendor Vue-rendered DOM classes — no Vue
   source edit, no innerHTML rewrite, Vue reactivity preserved.
   Depends on: resayil-brand.css (tokens), rs-desk.css (chrome baseline),
   tabler-sprite.svg (Phase 24-01).
   ================================================================ */

/* -----------------------------------------------------------------
   S1 — Typography + baseline inheritance
   Every Raven route inherits the brand sans stack, foreground,
   and subtle bg token so the app reads as "Resayil" regardless of
   where Frappe's default body styles are applied.
   ----------------------------------------------------------------- */
body[data-route^="raven"],
body[data-route^="/raven"],
body[data-route*="raven-"] {
  font-family: var(--rs-font-sans);
  color: var(--rs-fg);
  background: var(--rs-bg);
  line-height: var(--rs-leading-normal);
}

body[data-route^="raven"] h1,
body[data-route^="/raven"] h1,
body[data-route*="raven-"] h1 {
  font-size: var(--rs-text-3xl);
  line-height: var(--rs-leading-tight);
  color: var(--rs-fg);
  margin-bottom: var(--rs-space-4);
}

body[data-route^="raven"] h2,
body[data-route^="/raven"] h2,
body[data-route*="raven-"] h2 {
  font-size: var(--rs-text-2xl);
  line-height: var(--rs-leading-tight);
  color: var(--rs-fg);
  margin-bottom: var(--rs-space-3);
}

/* -----------------------------------------------------------------
   S2 — Surface + card chrome
   Page wrappers pick up brand surface, radius, shadow. Targets both
   Desk-rendered Raven routes (/app/raven-*) and the Vue SPA at
   /raven/*. Avoids :root / html / body (unqualified).
   ----------------------------------------------------------------- */
body[data-route^="raven"] .page-container,
body[data-route^="/raven"] .page-container,
body[data-route*="raven-"] .page-container {
  background: var(--rs-bg);
  color: var(--rs-fg);
}

body[data-route^="raven"] .layout-main-section,
body[data-route^="/raven"] .layout-main-section,
body[data-route*="raven-"] .layout-main-section {
  background: var(--rs-surface);
  border-radius: var(--rs-radius-md);
  box-shadow: var(--rs-shadow-sm);
  padding: var(--rs-space-5);
}

body[data-route^="raven"] .page-head,
body[data-route^="/raven"] .page-head,
body[data-route*="raven-"] .page-head {
  background: var(--rs-surface);
  border-bottom: 1px solid var(--rs-border);
  padding: var(--rs-space-4) var(--rs-space-5);
  margin-bottom: var(--rs-space-5);
}

body[data-route^="raven"] .page-content,
body[data-route^="/raven"] .page-content,
body[data-route*="raven-"] .page-content {
  background: var(--rs-bg);
  color: var(--rs-fg);
}

body[data-route^="raven"] .raven-container,
body[data-route^="/raven"] .raven-container,
body[data-route*="raven-"] .raven-container {
  background: var(--rs-bg);
  color: var(--rs-fg);
}

/* -----------------------------------------------------------------
   S3 — Channel list bento card grid
   Tagged by rs-raven-bento.js with data-rs-raven-bento="true".
   `!important` on display + grid-template-columns only — Raven Vue
   SPA emits inline style on its channel list container; we defeat
   that to land bento. Plus structural rules on vendor-emitted
   channel list / channel row / ChannelListItem classes so individual
   channel cards get Resayil card chrome even when bento is off.
   ----------------------------------------------------------------- */
body[data-route^="raven"] [data-rs-raven-bento],
body[data-route^="/raven"] [data-rs-raven-bento],
body[data-route*="raven-"] [data-rs-raven-bento] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--rs-space-5);
  margin-bottom: var(--rs-space-8);
  padding: var(--rs-space-2) 0;
}

body[data-route^="raven"] [data-rs-raven-bento] > *,
body[data-route^="/raven"] [data-rs-raven-bento] > *,
body[data-route*="raven-"] [data-rs-raven-bento] > * {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-4);
  transition:
    transform var(--rs-duration) var(--rs-ease-brand),
    border-color var(--rs-duration) var(--rs-ease-brand),
    box-shadow var(--rs-duration) var(--rs-ease-brand);
  color: var(--rs-fg);
}

body[data-route^="raven"] [data-rs-raven-bento] > *:hover,
body[data-route^="/raven"] [data-rs-raven-bento] > *:hover,
body[data-route*="raven-"] [data-rs-raven-bento] > *:hover {
  border-color: var(--rs-accent);
  box-shadow: var(--rs-shadow-md);
  transform: translateY(-2px);
}

/* Vendor channel list primitives — card chrome for channel rows
   regardless of bento state. `[class*="..."]` catches CSS Module
   hashed class names like ChannelListItem_root__abc123 that Vue's
   build emits in production. */
body[data-route^="raven"] .channel-row,
body[data-route^="/raven"] .channel-row,
body[data-route*="raven-"] .channel-row,
body[data-route^="raven"] .channel-list-item,
body[data-route^="/raven"] .channel-list-item,
body[data-route*="raven-"] .channel-list-item,
body[data-route^="raven"] [class*="channel-list"],
body[data-route^="/raven"] [class*="channel-list"],
body[data-route*="raven-"] [class*="channel-list"],
body[data-route^="raven"] [class*="ChannelListItem"],
body[data-route^="/raven"] [class*="ChannelListItem"],
body[data-route*="raven-"] [class*="ChannelListItem"] {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-3) var(--rs-space-4);
  transition:
    border-color var(--rs-duration) var(--rs-ease-brand),
    background var(--rs-duration-fast) var(--rs-ease);
  color: var(--rs-fg);
}

body[data-route^="raven"] .channel-row:hover,
body[data-route^="/raven"] .channel-row:hover,
body[data-route*="raven-"] .channel-row:hover,
body[data-route^="raven"] .channel-list-item:hover,
body[data-route^="/raven"] .channel-list-item:hover,
body[data-route*="raven-"] .channel-list-item:hover {
  border-color: var(--rs-accent);
  background: var(--rs-accent-soft);
}

/* Active/selected channel — accent-soft background + accent border */
body[data-route^="raven"] .channel-row.active,
body[data-route^="/raven"] .channel-row.active,
body[data-route*="raven-"] .channel-row.active,
body[data-route^="raven"] .channel-list-item.active,
body[data-route^="/raven"] .channel-list-item.active,
body[data-route*="raven-"] .channel-list-item.active,
body[data-route^="raven"] .channel-row.selected,
body[data-route^="/raven"] .channel-row.selected,
body[data-route*="raven-"] .channel-row.selected {
  background: var(--rs-accent-soft);
  border-color: var(--rs-accent);
  color: var(--rs-fg);
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  body[data-route^="raven"] [data-rs-raven-bento],
  body[data-route^="/raven"] [data-rs-raven-bento],
  body[data-route*="raven-"] [data-rs-raven-bento] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--rs-space-4);
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  body[data-route^="raven"] [data-rs-raven-bento],
  body[data-route^="/raven"] [data-rs-raven-bento],
  body[data-route*="raven-"] [data-rs-raven-bento] {
    grid-template-columns: 1fr !important;
    gap: var(--rs-space-3);
  }
}

/* -----------------------------------------------------------------
   S4 — Chat thread restructure
   Vertical message flow wrapper. Scroll affordance + column layout.
   Thread reply indent uses accent-soft left rail so threaded replies
   read as visually inset without breaking Vue DOM structure.
   ----------------------------------------------------------------- */
body[data-route^="raven"] .chat-thread,
body[data-route^="/raven"] .chat-thread,
body[data-route*="raven-"] .chat-thread,
body[data-route^="raven"] .message-list,
body[data-route^="/raven"] .message-list,
body[data-route*="raven-"] .message-list,
body[data-route^="raven"] [class*="chat-thread"],
body[data-route^="/raven"] [class*="chat-thread"],
body[data-route*="raven-"] [class*="chat-thread"],
body[data-route^="raven"] [class*="message-list"],
body[data-route^="/raven"] [class*="message-list"],
body[data-route*="raven-"] [class*="message-list"] {
  background: var(--rs-bg);
  padding: var(--rs-space-4);
  gap: var(--rs-space-3);
  scroll-behavior: smooth;
}

body[data-route^="raven"] .thread-panel,
body[data-route^="/raven"] .thread-panel,
body[data-route*="raven-"] .thread-panel,
body[data-route^="raven"] .thread-reply-list,
body[data-route^="/raven"] .thread-reply-list,
body[data-route*="raven-"] .thread-reply-list {
  background: var(--rs-bg-subtle, var(--rs-bg));
  border-left: 2px solid var(--rs-accent-soft);
  padding-inline-start: var(--rs-space-3);
  margin-inline-start: var(--rs-space-2);
}

/* -----------------------------------------------------------------
   S5 — Message bubble primitive (Resayil bubble style)
   Rounded corners, surface bg, subtle shadow, constrained max-width
   so long messages wrap cleanly. Author-aligned rails (own vs other)
   swap align-self + corner radius so the conversational direction
   reads at a glance without adding DOM.
   ----------------------------------------------------------------- */
body[data-route^="raven"] .message,
body[data-route^="/raven"] .message,
body[data-route*="raven-"] .message,
body[data-route^="raven"] .message-content,
body[data-route^="/raven"] .message-content,
body[data-route*="raven-"] .message-content,
body[data-route^="raven"] .message-bubble,
body[data-route^="/raven"] .message-bubble,
body[data-route*="raven-"] .message-bubble,
body[data-route^="raven"] [class*="message-bubble"],
body[data-route^="/raven"] [class*="message-bubble"],
body[data-route*="raven-"] [class*="message-bubble"],
body[data-route^="raven"] [class*="MessageBubble"],
body[data-route^="/raven"] [class*="MessageBubble"],
body[data-route*="raven-"] [class*="MessageBubble"] {
  background: var(--rs-surface);
  color: var(--rs-fg);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-lg);
  padding: var(--rs-space-3) var(--rs-space-4);
  box-shadow: var(--rs-shadow-sm);
  max-width: 70ch;
  word-wrap: break-word;
  line-height: var(--rs-leading-normal);
  font-size: var(--rs-text-sm);
}

/* Author-aligned rail — own messages: right-aligned, accent-soft
   background, sharp bottom-right corner. */
body[data-route^="raven"] .message--own,
body[data-route^="/raven"] .message--own,
body[data-route*="raven-"] .message--own,
body[data-route^="raven"] [data-author="me"],
body[data-route^="/raven"] [data-author="me"],
body[data-route*="raven-"] [data-author="me"],
body[data-route^="raven"] [class*="own"] .message-bubble,
body[data-route^="/raven"] [class*="own"] .message-bubble,
body[data-route*="raven-"] [class*="own"] .message-bubble {
  align-self: flex-end;
  background: var(--rs-accent-soft);
  border-color: var(--rs-accent);
  border-bottom-right-radius: var(--rs-radius-sm);
}

/* Opposite rail (others) — left-aligned, sharp bottom-left corner */
body[data-route^="raven"] .message--other,
body[data-route^="/raven"] .message--other,
body[data-route*="raven-"] .message--other,
body[data-route^="raven"] [data-author="other"],
body[data-route^="/raven"] [data-author="other"],
body[data-route*="raven-"] [data-author="other"] {
  align-self: flex-start;
  border-bottom-left-radius: var(--rs-radius-sm);
}

/* Thread-reply bubbles — reduced padding to signal depth */
body[data-route^="raven"] .thread-reply-list .message-bubble,
body[data-route^="/raven"] .thread-reply-list .message-bubble,
body[data-route*="raven-"] .thread-reply-list .message-bubble,
body[data-route^="raven"] .thread-panel .message-bubble,
body[data-route^="/raven"] .thread-panel .message-bubble,
body[data-route*="raven-"] .thread-panel .message-bubble {
  padding: var(--rs-space-2) var(--rs-space-3);
  font-size: var(--rs-text-sm);
}

/* Message meta — author name + timestamp typography */
body[data-route^="raven"] .author-name,
body[data-route^="/raven"] .author-name,
body[data-route*="raven-"] .author-name {
  font-weight: 600;
  color: var(--rs-fg);
  font-size: var(--rs-text-sm);
  line-height: var(--rs-leading-tight);
}

body[data-route^="raven"] .message-timestamp,
body[data-route^="/raven"] .message-timestamp,
body[data-route*="raven-"] .message-timestamp {
  color: var(--rs-fg-muted);
  font-size: var(--rs-text-xs);
  line-height: var(--rs-leading-tight);
}

/* Avatars — author + direct message avatars, scoped to Raven */
body[data-route^="raven"] .author-avatar,
body[data-route^="/raven"] .author-avatar,
body[data-route*="raven-"] .author-avatar,
body[data-route^="raven"] .user-avatar,
body[data-route^="/raven"] .user-avatar,
body[data-route*="raven-"] .user-avatar,
body[data-route^="raven"] [class*="avatar"],
body[data-route^="/raven"] [class*="avatar"],
body[data-route*="raven-"] [class*="avatar"] {
  width: 36px;
  height: 36px;
  border-radius: var(--rs-radius-full);
  border: 1px solid var(--rs-border);
  background: var(--rs-surface-2, var(--rs-surface));
}

/* -----------------------------------------------------------------
   S6 — Composer pill + send button
   Resayil pill-shape input wrapper with focus ring in accent-soft.
   Send button is a circular accent control; disabled state is the
   same shape with reduced opacity so the affordance stays obvious.
   ----------------------------------------------------------------- */
body[data-route^="raven"] .composer,
body[data-route^="/raven"] .composer,
body[data-route*="raven-"] .composer,
body[data-route^="raven"] .message-composer,
body[data-route^="/raven"] .message-composer,
body[data-route*="raven-"] .message-composer,
body[data-route^="raven"] [class*="composer"],
body[data-route^="/raven"] [class*="composer"],
body[data-route*="raven-"] [class*="composer"] {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-full);
  padding: var(--rs-space-2) var(--rs-space-3);
  display: flex;
  align-items: center;
  gap: var(--rs-space-2);
  transition: border-color var(--rs-duration-fast) var(--rs-ease),
              box-shadow var(--rs-duration-fast) var(--rs-ease);
  color: var(--rs-fg);
}

body[data-route^="raven"] .composer:focus-within,
body[data-route^="/raven"] .composer:focus-within,
body[data-route*="raven-"] .composer:focus-within,
body[data-route^="raven"] .message-composer:focus-within,
body[data-route^="/raven"] .message-composer:focus-within,
body[data-route*="raven-"] .message-composer:focus-within,
body[data-route^="raven"] [class*="composer"]:focus-within,
body[data-route^="/raven"] [class*="composer"]:focus-within,
body[data-route*="raven-"] [class*="composer"]:focus-within {
  border-color: var(--rs-accent);
  box-shadow: 0 0 0 3px var(--rs-accent-soft);
}

body[data-route^="raven"] .composer-input,
body[data-route^="/raven"] .composer-input,
body[data-route*="raven-"] .composer-input,
body[data-route^="raven"] [class*="composer-input"],
body[data-route^="/raven"] [class*="composer-input"],
body[data-route*="raven-"] [class*="composer-input"],
body[data-route^="raven"] .composer [contenteditable],
body[data-route^="/raven"] .composer [contenteditable],
body[data-route*="raven-"] .composer [contenteditable] {
  background: transparent;
  border: none;
  outline: none;
  color: var(--rs-fg);
  font-family: var(--rs-font-sans);
  font-size: var(--rs-text-sm);
  line-height: var(--rs-leading-normal);
  padding: var(--rs-space-1) var(--rs-space-2);
  flex: 1;
}

body[data-route^="raven"] .send-button,
body[data-route^="/raven"] .send-button,
body[data-route*="raven-"] .send-button,
body[data-route^="raven"] .composer-submit,
body[data-route^="/raven"] .composer-submit,
body[data-route*="raven-"] .composer-submit,
body[data-route^="raven"] [class*="send-button"],
body[data-route^="/raven"] [class*="send-button"],
body[data-route*="raven-"] [class*="send-button"] {
  background: var(--rs-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--rs-radius-full);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--rs-duration-fast) var(--rs-ease);
  cursor: pointer;
}

body[data-route^="raven"] .send-button:hover,
body[data-route^="/raven"] .send-button:hover,
body[data-route*="raven-"] .send-button:hover,
body[data-route^="raven"] .composer-submit:hover,
body[data-route^="/raven"] .composer-submit:hover,
body[data-route*="raven-"] .composer-submit:hover {
  background: var(--rs-accent-hover);
}

body[data-route^="raven"] .send-button:disabled,
body[data-route^="/raven"] .send-button:disabled,
body[data-route*="raven-"] .send-button:disabled,
body[data-route^="raven"] .composer-submit:disabled,
body[data-route^="/raven"] .composer-submit:disabled,
body[data-route*="raven-"] .composer-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* -----------------------------------------------------------------
   S7 — Accent buttons + generic controls inside Raven
   ----------------------------------------------------------------- */
body[data-route^="raven"] .btn-primary,
body[data-route^="/raven"] .btn-primary,
body[data-route*="raven-"] .btn-primary {
  background: var(--rs-accent);
  border-color: var(--rs-accent);
  color: #ffffff;
  border-radius: var(--rs-radius);
  transition: background var(--rs-duration) var(--rs-ease);
}

body[data-route^="raven"] .btn-primary:hover,
body[data-route^="/raven"] .btn-primary:hover,
body[data-route*="raven-"] .btn-primary:hover {
  background: var(--rs-accent-hover);
  border-color: var(--rs-accent-hover);
}

body[data-route^="raven"] input:focus,
body[data-route^="/raven"] input:focus,
body[data-route*="raven-"] input:focus {
  outline: 2px solid var(--rs-accent);
  outline-offset: 2px;
  border-color: var(--rs-accent);
}

/* -----------------------------------------------------------------
   S8 — Dark mode (scoped — inherits tokens from :root[data-theme=dark])
   The --rs-* surface/border tokens re-resolve automatically under the
   dark-theme block defined in resayil-brand.css. We only need to
   adjust the hover shadow which is perceptually weaker in dark mode
   and ensure bubble + composer re-read surface tokens.
   ----------------------------------------------------------------- */
body[data-theme="dark"][data-route^="raven"] [data-rs-raven-bento] > *,
body[data-theme="dark"][data-route^="/raven"] [data-rs-raven-bento] > *,
body[data-theme="dark"][data-route*="raven-"] [data-rs-raven-bento] > * {
  border-color: var(--rs-border);
  background: var(--rs-surface);
}

body[data-theme="dark"][data-route^="raven"] [data-rs-raven-bento] > *:hover,
body[data-theme="dark"][data-route^="/raven"] [data-rs-raven-bento] > *:hover,
body[data-theme="dark"][data-route*="raven-"] [data-rs-raven-bento] > *:hover {
  border-color: var(--rs-accent);
  box-shadow: var(--rs-shadow-lg);
}

body[data-theme="dark"][data-route^="raven"] .message-bubble,
body[data-theme="dark"][data-route^="/raven"] .message-bubble,
body[data-theme="dark"][data-route*="raven-"] .message-bubble,
body[data-theme="dark"][data-route^="raven"] .message,
body[data-theme="dark"][data-route^="/raven"] .message,
body[data-theme="dark"][data-route*="raven-"] .message {
  background: var(--rs-surface);
  border-color: var(--rs-border);
  box-shadow: var(--rs-shadow);
}

body[data-theme="dark"][data-route^="raven"] .composer,
body[data-theme="dark"][data-route^="/raven"] .composer,
body[data-theme="dark"][data-route*="raven-"] .composer,
body[data-theme="dark"][data-route^="raven"] .message-composer,
body[data-theme="dark"][data-route^="/raven"] .message-composer,
body[data-theme="dark"][data-route*="raven-"] .message-composer {
  background: var(--rs-surface);
  border-color: var(--rs-border);
}

body[data-theme="dark"][data-route^="raven"] .channel-row,
body[data-theme="dark"][data-route^="/raven"] .channel-row,
body[data-theme="dark"][data-route*="raven-"] .channel-row,
body[data-theme="dark"][data-route^="raven"] .channel-list-item,
body[data-theme="dark"][data-route^="/raven"] .channel-list-item,
body[data-theme="dark"][data-route*="raven-"] .channel-list-item {
  background: var(--rs-surface);
  border-color: var(--rs-border);
}

/* -----------------------------------------------------------------
   S9 — RTL (Arabic, Hebrew). Apply Arabic font family + flip
   author-aligned rails. Own messages in RTL go LEFT (opposite of
   LTR) so the conversational direction still reads naturally in a
   right-to-left reading flow. Composer pill stays symmetrical —
   pill shape needs no flip.
   ----------------------------------------------------------------- */
[dir="rtl"] body[data-route^="raven"] .layout-main-section,
[dir="rtl"] body[data-route^="/raven"] .layout-main-section,
[dir="rtl"] body[data-route*="raven-"] .layout-main-section {
  font-family: var(--rs-font-arabic);
  direction: rtl;
  text-align: right;
}

[dir="rtl"] body[data-route^="raven"] [data-rs-raven-bento] > *,
[dir="rtl"] body[data-route^="/raven"] [data-rs-raven-bento] > *,
[dir="rtl"] body[data-route*="raven-"] [data-rs-raven-bento] > * {
  text-align: right;
}

/* Flip author rails: in RTL, own messages align to flex-start (left
   in the visual flow — which reads as "this side of me" in RTL). */
[dir="rtl"] body[data-route^="raven"] .message--own,
[dir="rtl"] body[data-route^="/raven"] .message--own,
[dir="rtl"] body[data-route*="raven-"] .message--own,
[dir="rtl"] body[data-route^="raven"] [data-author="me"],
[dir="rtl"] body[data-route^="/raven"] [data-author="me"],
[dir="rtl"] body[data-route*="raven-"] [data-author="me"] {
  align-self: flex-start;
  border-bottom-left-radius: var(--rs-radius-sm);
  border-bottom-right-radius: var(--rs-radius-lg);
}

[dir="rtl"] body[data-route^="raven"] .message--other,
[dir="rtl"] body[data-route^="/raven"] .message--other,
[dir="rtl"] body[data-route*="raven-"] .message--other,
[dir="rtl"] body[data-route^="raven"] [data-author="other"],
[dir="rtl"] body[data-route^="/raven"] [data-author="other"],
[dir="rtl"] body[data-route*="raven-"] [data-author="other"] {
  align-self: flex-end;
  border-bottom-right-radius: var(--rs-radius-sm);
  border-bottom-left-radius: var(--rs-radius-lg);
}

/* Thread reply rail flips inline-start -> inline-end visually */
[dir="rtl"] body[data-route^="raven"] .thread-panel,
[dir="rtl"] body[data-route^="/raven"] .thread-panel,
[dir="rtl"] body[data-route*="raven-"] .thread-panel,
[dir="rtl"] body[data-route^="raven"] .thread-reply-list,
[dir="rtl"] body[data-route^="/raven"] .thread-reply-list,
[dir="rtl"] body[data-route*="raven-"] .thread-reply-list {
  border-left: none;
  border-right: 2px solid var(--rs-accent-soft);
}

/* -----------------------------------------------------------------
   S10 — Reduced motion: kill transforms + transitions + scroll anim
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-route^="raven"] [data-rs-raven-bento] > *,
  body[data-route^="/raven"] [data-rs-raven-bento] > *,
  body[data-route*="raven-"] [data-rs-raven-bento] > *,
  body[data-route^="raven"] .channel-row,
  body[data-route^="/raven"] .channel-row,
  body[data-route*="raven-"] .channel-row,
  body[data-route^="raven"] .channel-list-item,
  body[data-route^="/raven"] .channel-list-item,
  body[data-route*="raven-"] .channel-list-item,
  body[data-route^="raven"] .composer,
  body[data-route^="/raven"] .composer,
  body[data-route*="raven-"] .composer,
  body[data-route^="raven"] .send-button,
  body[data-route^="/raven"] .send-button,
  body[data-route*="raven-"] .send-button {
    transition: none;
  }
  body[data-route^="raven"] [data-rs-raven-bento] > *:hover,
  body[data-route^="/raven"] [data-rs-raven-bento] > *:hover,
  body[data-route*="raven-"] [data-rs-raven-bento] > *:hover {
    transform: none;
  }
  body[data-route^="raven"] .chat-thread,
  body[data-route^="/raven"] .chat-thread,
  body[data-route*="raven-"] .chat-thread,
  body[data-route^="raven"] .message-list,
  body[data-route^="/raven"] .message-list,
  body[data-route*="raven-"] .message-list {
    scroll-behavior: auto;
  }
}

/* -----------------------------------------------------------------
   SCOPE GUARDS (Plan 24.8-02)
   This file MUST NOT emit rules matching:
   - :root, html, body (unqualified)
   - body[data-route^="/app"]:not(...raven-*)
   - body[data-route^="/subscribe"] / loyalty / whatsapp / helpdesk
     / insights / builder
   - Any portal or workspace route outside route_prefixes in
     erpnext_cli/overlays/raven.json
   Enforced by scripts/verify_raven_css_scope.py (Task 3).
   ----------------------------------------------------------------- */