/* Raven IM — AIM/Yahoo Messenger aesthetic, MLNF brand palette.
   All selectors namespaced under .raven-im. No !important. Loads after mobile-optimized.css. */

.raven-im {
  --rim-gold: #D4AF37;
  --rim-gold-dim: #8a7224;
  --rim-navy: #1A2332;
  --rim-navy-light: #2a3552;
  --rim-indigo: #4A90E2;
  --rim-bg: #f4f1e8;
  --rim-bg-alt: #e8e3d3;
  --rim-text: #1a1410;
  --rim-text-dim: #5b5448;
  --rim-border: #b8a874;
  --rim-status-online: #2e7d32;
  --rim-status-away: #ef6c00;
  --rim-status-busy: #c62828;
  --rim-status-offline: #888a8c;

  font-family: Tahoma, Verdana, "DejaVu Sans", "Bitstream Vera Sans", sans-serif;
  font-size: 12px;
  color: var(--rim-text);
}

[data-theme="dark"] .raven-im {
  --rim-bg: #1a2332;
  --rim-bg-alt: #232f4a;
  --rim-text: #f0e8d4;
  --rim-text-dim: #b8a874;
  --rim-border: #4a5878;
}

/* ============================================================
   Body content-shift while the sidebar is expanded — desktop only.
   Set by raven-im.js via _syncBodySidebarClass().
   ============================================================ */
@media (min-width: 769px) {
  body.raven-sidebar-open {
    padding-right: 290px;
    transition: padding-right 0.22s ease-out;
  }
}

/* ============================================================
   Sidebar buddy list (right-edge anchored, AIM-window aesthetic)
   ============================================================ */
.raven-im.raven-floating {
  position: fixed;
  right: 0;
  /* Sit below the site header + ticker so the header's launcher icon and
     ticker stay visible/usable while the sidebar is open. */
  top: calc(var(--header-height, 63px) + var(--ticker-height, 0px));
  bottom: 0;
  width: 290px;
  z-index: 9000;
  background: var(--rim-bg);
  border: 0;
  border-left: 2px solid var(--rim-navy);
  border-radius: 0;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.4),
    -4px 0 12px rgba(0, 0, 0, 0.35),
    inset 2px 0 0 var(--rim-gold);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height, 63px) - var(--ticker-height, 0px));
  height: calc(100dvh - var(--header-height, 63px) - var(--ticker-height, 0px));
  max-height: none;
  transition: transform 0.22s ease-out;
  overscroll-behavior: contain;
}

/* Collapsed = slide mostly off-screen, leave a 32px peek tab visible */
.raven-im.raven-floating.collapsed {
  transform: translateX(calc(100% - 32px));
  width: 290px;
  max-height: none;
  overflow: visible;
  cursor: pointer;
}

.raven-im.raven-floating.collapsed .raven-bl-body,
.raven-im.raven-floating.collapsed .raven-bl-status-bar,
.raven-im.raven-floating.collapsed .raven-taskbar {
  display: none;
}

/* Vertical "RAVENS" label on the peek tab so the strip reads as a tab.
   Sits in the 32px visible sliver on the left edge of the collapsed sidebar.
   Label text is JS-driven via --peek-label so it can cycle through fresh
   activity (latest raven, latest tiding, etc.) — see _startPeekCycle. */
.raven-im.raven-floating.collapsed::before {
  content: var(--peek-label, "▸ RAVENS");
  position: absolute;
  top: 50%;
  left: 0;
  width: 32px;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: center;
  font-family: Tahoma, Verdana, "DejaVu Sans", sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--rim-gold);
  background: linear-gradient(to right, var(--rim-navy) 0%, var(--rim-navy-light) 100%);
  padding: 14px 0;
  border-right: 1px solid var(--rim-gold);
  pointer-events: none; /* whole sidebar handles the click */
  z-index: 1;
  transition: color 0.4s ease;
}
/* Subtle pulse on the label when fresh content rotates in */
.raven-im.raven-floating.collapsed.peek-cycling::before {
  animation: peek-label-pulse 0.5s ease;
}
@keyframes peek-label-pulse {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; color: #ffe27a; }
  100% { opacity: 1; color: var(--rim-gold); }
}

/* Hide the normal titlebar contents while collapsed so they don't peek through */
.raven-im.raven-floating.collapsed .raven-bl-titlebar {
  visibility: hidden;
}

/* Title bar — classic gold-on-navy bevel */
.raven-bl-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: linear-gradient(to bottom, var(--rim-navy-light) 0%, var(--rim-navy) 100%);
  color: var(--rim-gold);
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--rim-gold);
  cursor: default;
  user-select: none;
  flex-shrink: 0;
}

.raven-bl-titlebar .raven-bl-rune {
  font-size: 13px;
  color: var(--rim-gold);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
}

.raven-bl-titlebar .raven-bl-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.raven-bl-titlebar .raven-bl-btn,
.raven-chat-titlebar .raven-bl-btn {
  width: 22px;
  height: 20px;
  background: linear-gradient(to bottom, #f8f4e8 0%, #d8d0bc 100%);
  border: 1px solid #1a1410;
  border-top-color: #fefcf6;
  border-left-color: #fefcf6;
  color: var(--rim-navy);
  font-size: 11px;
  line-height: 1;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 2px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.raven-bl-titlebar .raven-bl-btn i,
.raven-chat-titlebar .raven-bl-btn i {
  font-size: 10px;
  line-height: 1;
  display: block;
}

/* fa-window-minimize sits at the baseline — nudge up so it reads as a
   horizontal mark centered in the button, classic IM style. */
.raven-bl-titlebar .raven-bl-btn[data-action="collapse"] i,
.raven-bl-titlebar .raven-bl-btn[data-action="minimize"] i,
.raven-chat-titlebar .raven-bl-btn[data-action="minimize"] i {
  position: relative;
  top: -4px;
}

.raven-bl-titlebar .raven-bl-btn:hover,
.raven-chat-titlebar .raven-bl-btn:hover {
  background: linear-gradient(to bottom, var(--rim-gold) 0%, #b8941f 100%);
  color: var(--rim-navy);
}

.raven-bl-titlebar .raven-bl-btn:active,
.raven-chat-titlebar .raven-bl-btn:active {
  background: linear-gradient(to bottom, #b8941f 0%, var(--rim-gold) 100%);
  border-top-color: #1a1410;
  border-left-color: #1a1410;
  border-bottom-color: #fefcf6;
  border-right-color: #fefcf6;
}

.raven-bl-titlebar .raven-bl-btn[data-action="close"]:hover,
.raven-chat-titlebar .raven-bl-btn[data-action="close"]:hover {
  background: linear-gradient(to bottom, #d04848 0%, #962525 100%);
  color: #fff;
  border-color: #4a0000;
}

.raven-bl-titlebar .raven-bl-btn.muted {
  opacity: 0.55;
}

/* Status bar — presence + custom-status text. Lives INSIDE the scrollable
   body now (not pinned above), so no flex-shrink:0 needed — scrolls with
   everything else. Slim row, single line. */
.raven-bl-status-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--rim-bg-alt);
  border-bottom: 1px solid var(--rim-border);
  border-left: 3px solid var(--rim-status-offline);
}
.raven-bl-status-bar[data-status="online"]    { border-left-color: var(--rim-status-online); }
.raven-bl-status-bar[data-status="away"]      { border-left-color: var(--rim-status-away); }
.raven-bl-status-bar[data-status="busy"]      { border-left-color: var(--rim-status-busy); }
.raven-bl-status-bar[data-status="invisible"] { border-left-color: var(--rim-status-offline); }

.raven-bl-status-select {
  font-family: inherit;
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid var(--rim-border);
  background: var(--rim-bg);
  color: var(--rim-text);
  cursor: pointer;
}

.raven-bl-custom-status-input {
  flex: 1;
  font-family: inherit;
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--rim-border);
  background: var(--rim-bg);
  color: var(--rim-text);
  min-width: 0;
}

.raven-bl-custom-status-input:focus {
  outline: 1px solid var(--rim-indigo);
  outline-offset: -1px;
}

/* Mood-emoji picker — small button left of the status select, opens a
   compact popover with a curated emoji set + clear. */
.raven-mood-emoji-wrap {
  position: relative;
  flex: 0 0 auto;
}
.raven-mood-emoji-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--rim-border);
  background: var(--rim-bg);
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.raven-mood-emoji-btn.is-empty { opacity: 0.55; }
.raven-mood-emoji-btn:hover { background: var(--rim-bg-alt); }
.raven-mood-emoji-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 4px;
  background: var(--rim-bg);
  border: 1px solid var(--rim-border);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  min-width: 168px;
}
.raven-mood-emoji-popover[hidden] { display: none; }
.raven-mood-emoji-choice {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.raven-mood-emoji-choice:hover {
  background: var(--rim-bg-alt);
  border-color: var(--rim-border);
}
.raven-mood-emoji-clear {
  color: var(--rim-status-busy);
  font-size: 14px;
}

/* Buddy-row mood prefix */
.raven-buddy .raven-buddy-mood {
  margin-right: 4px;
  font-size: 12px;
  line-height: 1;
}

/* Body — scrollable buddy list */
.raven-bl-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden; /* belt + suspenders against rogue horizontal scroll from a long buddy name or section content */
  overscroll-behavior: contain;
  background: var(--rim-bg);
  padding: 2px 0;
  /* Firefox scrollbar styling — the ::-webkit-scrollbar rules below only
     match Blink/WebKit. Keep both rule sets in sync visually. */
  scrollbar-width: thin;
  scrollbar-color: var(--rim-border) var(--rim-bg-alt);
  /* Smoother iOS / mobile inertia. No-op on desktop, no-op on modern WebKit
     (default already smooth), but the explicit declaration costs nothing
     and quiets the rare older-Safari case. */
  -webkit-overflow-scrolling: touch;
  /* Hint the browser that this element scrolls so it can spin up a
     compositor layer / GPU-accelerate scroll updates. */
  will-change: scroll-position;
}

.raven-bl-body::-webkit-scrollbar {
  width: 10px; /* slimmer to feel more modern, still wide enough to grab */
}

.raven-bl-body::-webkit-scrollbar-track {
  background: var(--rim-bg-alt);
  border-left: 1px solid var(--rim-border);
}

.raven-bl-body::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, var(--rim-bg-alt) 0%, var(--rim-border) 100%);
  border: 1px solid var(--rim-navy);
  border-radius: 4px;
  /* Subtle hover state so it feels alive when the cursor crosses it. */
}
.raven-bl-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to right, var(--rim-border) 0%, var(--rim-gold) 100%);
}

/* Group headers — collapsible Online/Away/Offline */
.raven-bl-group {
  margin: 0;
}

.raven-bl-group-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: linear-gradient(to bottom, var(--rim-bg-alt) 0%, var(--rim-bg) 100%);
  color: var(--rim-text);
  font-weight: bold;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--rim-border);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .raven-bl-group-header {
  background: linear-gradient(to bottom, var(--rim-bg-alt) 0%, var(--rim-bg) 100%);
  color: var(--rim-gold);
  border-top: 1px solid rgba(212, 175, 55, 0.15);
}

.raven-bl-group-header .raven-bl-twist {
  font-size: 8px;
  width: 10px;
  display: inline-block;
  color: var(--rim-text-dim);
  transition: transform 0.1s;
}

.raven-bl-group.collapsed .raven-bl-twist {
  transform: rotate(-90deg);
}

.raven-bl-group.collapsed .raven-bl-group-items {
  display: none;
}

.raven-bl-group-count {
  color: var(--rim-text-dim);
  font-weight: normal;
  font-size: 10px;
}

/* Buddy row */
.raven-buddy {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 18px;
  cursor: pointer;
  font-size: 12px;
  /* A drag that starts on a username must SCROLL the list, not select the
     name's text. Without this, touch-dragging a row begins a text selection
     (which wins over the scroll on Firefox Android), so the list "won't
     catch" until you happen to grab non-text padding. touch-action: pan-y
     also tells the browser to treat the gesture as a vertical scroll. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}

.raven-buddy:hover {
  background: var(--rim-indigo);
  color: white;
}

.raven-buddy .raven-buddy-status {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.raven-buddy .raven-buddy-status svg {
  width: 12px;
  height: 12px;
}

.raven-buddy[data-status="online"] .raven-buddy-status { color: var(--rim-status-online); }
.raven-buddy[data-status="away"] .raven-buddy-status { color: var(--rim-status-away); }
.raven-buddy[data-status="busy"] .raven-buddy-status { color: var(--rim-status-busy); }
.raven-buddy[data-status="offline"] .raven-buddy-status { color: var(--rim-status-offline); }
.raven-buddy[data-status="offline"] { color: var(--rim-text-dim); }
.raven-buddy[data-status="offline"]:hover { color: white; }

/* Idle group (presence-recent) — buddies offline but disconnected in the
   last 30 min. Faded green dot between online and offline. */
.raven-bl-group[data-group="idle"] .raven-buddy-status {
  color: var(--rim-status-online);
  opacity: 0.5;
}
.raven-bl-group[data-group="idle"] .raven-buddy { opacity: 0.85; }

.raven-buddy .raven-buddy-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.raven-buddy.has-unread .raven-buddy-name {
  font-weight: bold;
  color: var(--rim-status-busy);
}

.raven-buddy:hover.has-unread .raven-buddy-name {
  color: var(--rim-gold);
}

.raven-buddy .raven-buddy-meta {
  font-size: 10px;
  color: var(--rim-text-dim);
  white-space: nowrap;
}

.raven-buddy:hover .raven-buddy-meta {
  color: rgba(255, 255, 255, 0.8);
}

/* +Add Buddy button (on Recent rows and search results) */
.raven-buddy .raven-buddy-add {
  margin-left: auto;
  background: var(--rim-gold);
  color: var(--rim-navy);
  border: 1px solid var(--rim-gold-dim);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  transition: background 0.15s, transform 0.1s;
}

.raven-buddy .raven-buddy-add:hover {
  background: #f0c850;
  transform: translateY(-1px);
}

.raven-buddy .raven-buddy-add:active {
  transform: translateY(0);
}

.raven-buddy .raven-buddy-add.pending {
  opacity: 0.5;
  cursor: wait;
}

.raven-buddy .raven-buddy-add i {
  font-size: 10px;
}

.raven-buddy .raven-buddy-away {
  font-style: italic;
  font-size: 10px;
  color: var(--rim-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

/* Empty buddy list */
.raven-bl-empty {
  padding: 20px 16px;
  text-align: center;
  color: var(--rim-text-dim);
  font-size: 11px;
  line-height: 1.5;
}

.raven-bl-empty a {
  color: var(--rim-indigo);
  text-decoration: underline;
}

/* Minimized chat taskbar at bottom of buddy list */
.raven-taskbar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px 6px;
  background: var(--rim-bg-alt);
  border-top: 1px solid var(--rim-border);
  flex-shrink: 0;
}

.raven-taskbar:empty {
  display: none;
}

.raven-taskbar-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--rim-bg);
  border: 1px solid var(--rim-border);
  border-radius: 2px;
  font-size: 11px;
  cursor: pointer;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.raven-taskbar-tab:hover {
  background: var(--rim-gold);
}

.raven-taskbar-tab.has-unread {
  background: var(--rim-status-busy);
  color: white;
  font-weight: bold;
}

/* ============================================================
   Popup chat window (draggable, AIM IM window)
   ============================================================ */
.raven-chat {
  position: fixed;
  width: 380px;
  height: 460px;
  background: var(--rim-bg);
  border: 2px solid var(--rim-navy);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.4),
    0 0 0 1px var(--rim-gold);
  display: flex;
  flex-direction: column;
  z-index: 9100;
  min-width: 280px;
  min-height: 220px;
  resize: both;
  overflow: hidden;
}

.raven-chat.focused {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 18px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--rim-gold),
    0 0 0 2px rgba(74, 144, 226, 0.4);
}

.raven-chat .raven-chat-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: linear-gradient(to bottom, var(--rim-navy-light) 0%, var(--rim-navy) 100%);
  color: var(--rim-gold);
  font-size: 11px;
  font-weight: bold;
  cursor: move;
  user-select: none;
  flex-shrink: 0;
  border-bottom: 1px solid var(--rim-gold);
}

/* Back button default: hidden — surfaced by mobile media query below. */
.raven-chat-titlebar .raven-bl-btn[data-action="back"] {
  display: none;
  margin-right: 2px;
}

.raven-chat .raven-chat-titlebar:active {
  cursor: grabbing;
}

.raven-chat .raven-chat-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rim-gold);
  flex-shrink: 0;
}

.raven-chat .raven-chat-title-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.raven-chat .raven-buddy-status {
  color: inherit;
}

/* Sub-header (status + away message text) */
.raven-chat-subhead {
  padding: 4px 10px;
  background: var(--rim-bg-alt);
  border-bottom: 1px solid var(--rim-border);
  font-size: 11px;
  color: var(--rim-text-dim);
  flex-shrink: 0;
  min-height: 18px;
  font-style: italic;
}

/* Message thread */
.raven-chat-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: white;
  color: #000;
  padding: 6px 10px;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 12px;
  line-height: 1.45;
}

[data-theme="dark"] .raven-chat-body {
  background: #1a1410;
  color: #f0e8d4;
}

.raven-chat-body::-webkit-scrollbar { width: 14px; }
.raven-chat-body::-webkit-scrollbar-track { background: var(--rim-bg-alt); }
.raven-chat-body::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, var(--rim-bg-alt) 0%, var(--rim-border) 100%);
  border: 1px solid var(--rim-navy);
}

/* Message line — AIM-style inline: "[12:04 PM] Brunhild: Hail, sister." */
.raven-msg {
  margin: 0 0 2px 0;
  word-wrap: break-word;
}

.raven-msg-time {
  color: #888;
  font-size: 10px;
  margin-right: 4px;
}

.raven-msg-sender {
  font-weight: bold;
  margin-right: 4px;
}

.raven-msg.own .raven-msg-sender { color: #c62828; }
.raven-msg.other .raven-msg-sender { color: #1565c0; }
.raven-msg.system .raven-msg-sender,
.raven-msg.system .raven-msg-body {
  color: #888;
  font-style: italic;
}

[data-theme="dark"] .raven-msg.own .raven-msg-sender { color: #ff8a80; }
[data-theme="dark"] .raven-msg.other .raven-msg-sender { color: #82b1ff; }

.raven-msg-body {
  white-space: pre-wrap;
}

.raven-msg-autoreply .raven-msg-body {
  color: #5d4037;
  font-style: italic;
}

/* Typing indicator */
.raven-chat-typing {
  padding: 2px 10px;
  font-size: 10px;
  color: var(--rim-text-dim);
  font-style: italic;
  background: var(--rim-bg-alt);
  border-top: 1px solid var(--rim-border);
  flex-shrink: 0;
  min-height: 16px;
}

/* Input area */
.raven-chat-inputbar {
  display: flex;
  gap: 4px;
  padding: 4px 6px;
  background: var(--rim-bg-alt);
  border-top: 1px solid var(--rim-border);
  flex-shrink: 0;
}

.raven-chat-input {
  flex: 1;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px inset var(--rim-border);
  background: white;
  color: #000;
  resize: none;
  min-height: 28px;
  max-height: 160px; /* ~7 lines so long messages are visible while writing */
  outline: none;
  overflow-y: auto;
}

/* Outbox pending state — message rendered optimistically but not yet
   confirmed sent. Dimmed + clock icon (via raven-msg-status) until the
   drain pass lands the message server-side. */
.raven-msg.raven-msg-pending {
  opacity: 0.6;
}
.raven-msg.raven-msg-pending::after {
  content: " ⌛";
  font-size: 10px;
  opacity: 0.7;
  margin-left: 4px;
}

/* Message reactions — chip row below the message body. */
.raven-msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  padding-left: 4px;
}
.raven-msg-react {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--rim-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--rim-text, #e8d6a8);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.raven-msg-react:hover { background: rgba(212, 175, 55, 0.12); }
.raven-msg-react.mine {
  border-color: var(--rim-gold, #D4AF37);
  background: rgba(212, 175, 55, 0.18);
}

/* Reaction picker popover (anchored under the message on long-press/dblclk) */
.raven-msg-react-picker {
  position: absolute;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--rim-bg-alt, #0b1729);
  border: 1px solid var(--rim-gold, #D4AF37);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 20;
  margin-top: 2px;
}
.raven-msg-react-pick {
  background: transparent;
  border: 0;
  font-size: 18px;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.1s, background 0.12s;
}
.raven-msg-react-pick:hover {
  background: rgba(212, 175, 55, 0.2);
  transform: scale(1.2);
}
.raven-msg { position: relative; } /* anchor for picker absolute positioning */

/* #2: Attachment paperclip button + inline image rendering */
.raven-chat-attach {
  background: transparent;
  border: 1px outset var(--rim-border);
  color: var(--rim-text, #e8d6a8);
  cursor: pointer;
  padding: 0 8px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
}
.raven-chat-attach:hover { color: var(--rim-gold, #D4AF37); }
.raven-chat-attach:disabled { opacity: 0.5; cursor: wait; }

.raven-msg-img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  margin-top: 4px;
  border: 1px solid var(--rim-border);
  border-radius: 4px;
  cursor: zoom-in;
}
.raven-msg-img-link { display: inline-block; }
.raven-msg-link { color: var(--rim-gold, #D4AF37); text-decoration: underline; }

/* #5: URL unfurl card */
.raven-msg-unfurl {
  margin-top: 6px;
}
.raven-msg-unfurl-card {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rim-border);
  border-left: 3px solid var(--rim-gold, #D4AF37);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.raven-msg-unfurl-card:hover { background: rgba(212, 175, 55, 0.08); }
.raven-msg-unfurl-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}
.raven-msg-unfurl-text { flex: 1; min-width: 0; }
.raven-msg-unfurl-site {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rim-gold, #D4AF37);
  opacity: 0.85;
}
.raven-msg-unfurl-title {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  color: var(--rim-text, #e8d6a8);
}
.raven-msg-unfurl-desc {
  font-size: 11px;
  color: var(--rim-text-dim, #b6a890);
  line-height: 1.35;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.raven-chat-input:focus {
  border-color: var(--rim-indigo);
}

[data-theme="dark"] .raven-chat-input {
  background: #2a1f18;
  color: #f0e8d4;
}

.raven-chat-send {
  background: linear-gradient(to bottom, var(--rim-gold) 0%, var(--rim-gold-dim) 100%);
  color: var(--rim-navy);
  border: 1px solid var(--rim-navy);
  border-radius: 2px;
  padding: 0 14px;
  font-family: inherit;
  font-weight: bold;
  font-size: 11px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  align-self: stretch;
}

.raven-chat-send:hover {
  background: linear-gradient(to bottom, #e6c25c 0%, var(--rim-gold) 100%);
}

.raven-chat-send:active {
  background: linear-gradient(to bottom, var(--rim-gold-dim) 0%, var(--rim-gold) 100%);
}

.raven-chat-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Shake animation reserved for future buzz feature (no-op CSS for now) */
@keyframes raven-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-8px, 4px); }
  40% { transform: translate(8px, -4px); }
  60% { transform: translate(-6px, 2px); }
  80% { transform: translate(6px, -2px); }
}

/* ============================================================
   Fullscreen (dashboard) mode — inline buddy + thread layout
   ============================================================ */
.raven-im.raven-fullscreen {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  height: calc(100vh - 200px);
  min-height: 480px;
  background: var(--rim-bg);
  border: 2px solid var(--rim-navy);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 1px var(--rim-gold);
  overflow: hidden;
}

.raven-im.raven-fullscreen .raven-fs-left {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rim-navy);
  background: var(--rim-bg);
  min-height: 0;
}

.raven-im.raven-fullscreen .raven-bl-body {
  flex: 1;
}

.raven-im.raven-fullscreen .raven-fs-right {
  display: flex;
  flex-direction: column;
  background: white;
  min-height: 0;
}

[data-theme="dark"] .raven-im.raven-fullscreen .raven-fs-right {
  background: #1a1410;
}

.raven-im.raven-fullscreen .raven-fs-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rim-text-dim);
  text-align: center;
  padding: 40px;
  font-size: 13px;
  background: var(--rim-bg);
}

.raven-im.raven-fullscreen .raven-fs-empty i {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
  color: var(--rim-gold);
}

/* In fullscreen mode, chat is anchored — strip popup chrome */
.raven-im.raven-fullscreen .raven-chat {
  position: static;
  width: auto;
  height: auto;
  flex: 1;
  border: none;
  border-radius: 0;
  box-shadow: none;
  resize: none;
  min-height: 0;
}

.raven-im.raven-fullscreen .raven-chat .raven-chat-titlebar {
  cursor: default;
}

.raven-im.raven-fullscreen .raven-chat .raven-chat-titlebar .raven-bl-btn[data-action="minimize"],
.raven-im.raven-fullscreen .raven-chat .raven-chat-titlebar .raven-bl-btn[data-action="close"] {
  display: none;
}

/* ============================================================
   Tablet (769–1024px)
   ============================================================ */
@media (max-width: 1024px) {
  /* Tablet: same desktop layout, slightly larger touch targets */
  .raven-bl-titlebar .raven-bl-btn {
    width: 24px;
    height: 22px;
    font-size: 13px;
  }

  .raven-buddy {
    padding: 6px 8px 6px 18px;
    min-height: 32px;
  }

  .raven-bl-group-header {
    padding: 6px 8px;
  }

  .raven-chat {
    /* Wider on tablet, no resize handle */
    width: min(420px, 90vw);
    height: min(520px, 80vh);
    resize: none;
  }

  .raven-chat-input {
    font-size: 14px;
    min-height: 34px;
  }
}

/* ============================================================
   Phone (≤768px) — bottom sheet + full-screen chat takeover
   ============================================================ */
@media (max-width: 768px) {
  .raven-im.raven-floating {
    right: 0;
    bottom: 0;
    left: 0;
    top: auto;
    width: 100%;
    max-width: none;
    /* Default expanded height: roomy enough to show buddies + tidings but
       leaves the page underneath visible. User can drag taller (up to 80dvh)
       or tap the grabber / titlebar chevron to collapse.
       Real `height` (not `auto` + max-height) — with flex:1 1 0 body the
       container's intrinsic height collapses to titlebar+status, max-height
       never engages, and body's overflow-y never has room to scroll. */
    height: 55vh;
    height: 55dvh;
    border-radius: 12px 12px 0 0;
    border: 0;
    border-top: 2px solid var(--rim-gold);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--rim-navy);
    transform: none;
    /* Slide-up entrance */
    animation: raven-slide-up 0.22s ease-out;
  }

  @keyframes raven-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* Collapsed = corner pill. Default: bottom-RIGHT (right-handed thumb).
     Body class .raven-perch-lefty flips to bottom-LEFT for left-handers
     (toggled via the ⇄ button in the expanded titlebar). Whole pill is
     the tap target to re-expand.

     Sized at 220×44 — 44 hits Apple HIG touch-target spec, and 220 gives
     enough room for rune + RAVENS + LIVE badge + unread count + dots
     without crowding. Gold trim on top echoes the page ticker; lower
     surface goes a touch warmer than pure navy so the pill reads as
     part of the AIM-window family but separate from the page chrome. */
  .raven-im.raven-floating.collapsed {
    top: auto;
    left: auto;
    right: 10px;
    bottom: 10px;
    transform: none;
    width: 220px;
    height: 44px;
    max-height: 44px;
    border-radius: 22px;          /* fully pill-shaped at this height */
    border: 1px solid rgba(212, 175, 55, 0.55);
    background: linear-gradient(180deg, #142546 0%, #0c1830 100%);
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: visible;            /* let glow + badges bleed past edge */
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(.4,0,.2,1),
                box-shadow 0.18s cubic-bezier(.4,0,.2,1);
  }
  .raven-im.raven-floating.collapsed:active {
    transform: translateY(1px);
    box-shadow:
      0 3px 10px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  /* Left-hand mode flip */
  body.raven-perch-lefty .raven-im.raven-floating.collapsed {
    right: auto;
    left: 8px;
  }

  /* Lift the collapsed pill above the dashboard's fixed bottom nav so it
     doesn't cover the menu tabs. Scoped via :has so it only kicks in on the
     page that actually renders .dash-mobile-bottom-nav (60px bar at bottom:0). */
  body:has(.dash-mobile-bottom-nav) .raven-im.raven-floating.collapsed {
    bottom: calc(60px + 12px + env(safe-area-inset-bottom));
  }

  /* Hide the desktop vertical "RAVENS" peek-tab label — that's designed
     for a 32px right-edge sliver, not a horizontal pill. */
  .raven-im.raven-floating.collapsed::before {
    display: none;
  }

  /* Restore titlebar contents inside the pill so the rune + label show.
     Background goes transparent here — the pill itself owns the gradient,
     so the titlebar shouldn't double up on it. */
  .raven-im.raven-floating.collapsed .raven-bl-titlebar {
    visibility: visible;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    min-height: 0;
    height: 100%;
    border-bottom: 0;
    background: transparent;
    font-size: 13px;
  }
  .raven-im.raven-floating.collapsed .raven-bl-titlebar .raven-bl-rune {
    font-size: 17px;
    line-height: 1;
    color: var(--rim-gold, #D4AF37);
    text-shadow: 0 0 6px rgba(212, 175, 55, 0.45);
    flex-shrink: 0;
  }
  .raven-im.raven-floating.collapsed .raven-bl-titlebar .raven-bl-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #f3eedd;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-transform: uppercase;
  }
  /* Hide the " — username" suffix when collapsed so the pill reads cleanly
     as just "RAVENS" / "TIDINGS". Suffix returns when expanded. */
  .raven-im.raven-floating.collapsed .raven-bl-title-suffix {
    display: none;
  }
  /* Buttons (sound, collapse-chevron, hand-flip) hidden when collapsed —
     tap the whole pill to re-expand. Specificity + !important to beat the
     `.raven-bl-btn-collapse-mobile { display: inline-flex !important }`
     rule that makes the chevron visible while expanded. */
  .raven-im.raven-floating.collapsed .raven-bl-titlebar .raven-bl-btn,
  .raven-im.raven-floating.collapsed .raven-bl-titlebar .raven-bl-btn-collapse-mobile {
    display: none !important;
  }

  /* Reserve room on the right for the activity cluster (or left, in lefty
     mode). 70px holds: optional LIVE badge + count badge + dots, with
     visual breathing room from the RAVENS label. */
  .raven-im.raven-floating.collapsed .raven-bl-titlebar {
    padding-right: 76px;
  }
  body.raven-perch-lefty .raven-im.raven-floating.collapsed .raven-bl-titlebar {
    padding-right: 14px;
    padding-left: 76px;
  }
  body.raven-perch-lefty .raven-im.raven-floating.collapsed .perch-indicators {
    right: auto;
    left: 12px;
  }
  /* Unread count badge — sits to the right of the personal dot */
  .raven-im.raven-floating.collapsed .perch-indicator-count {
    position: static;
    margin-left: 2px;
    font-size: 10px;
    font-weight: bold;
    color: var(--rim-gold, #D4AF37);
    background: transparent;
    padding: 0;
    min-width: 0;
  }

  /* LIVE badge reads top-to-bottom on the desktop vertical rail, but the
     collapsed mobile pill is a horizontal 220×44 strip — flip it back to
     normal horizontal text so "LIVE" doesn't render sideways. */
  .raven-im.raven-floating.collapsed .perch-live-badge {
    writing-mode: horizontal-tb;
    text-orientation: initial;
    padding: 2px 6px;
  }

  /* Bigger title bar + larger close/collapse buttons */
  .raven-bl-titlebar {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 44px;
  }

  .raven-bl-titlebar .raven-bl-rune {
    font-size: 16px;
  }

  .raven-bl-titlebar .raven-bl-btn {
    width: 32px;
    height: 30px;
    font-size: 14px;
    min-width: 32px;
  }

  .raven-bl-titlebar .raven-bl-btn i {
    font-size: 13px;
  }

  .raven-bl-titlebar .raven-bl-btn[data-action="collapse"] i {
    top: -6px;
  }

  /* Mobile-only chevron-down collapse button in the titlebar.
     Hidden on desktop (the left-edge collapse handle does that job there).
     Sized to a 44pt touch target with the gold rim so it reads as the
     primary "hide" affordance. */
  .raven-bl-btn-collapse-mobile {
    display: inline-flex !important;
    width: 38px !important;
    min-width: 38px;
    height: 32px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #f8f4e8 0%, #d8d0bc 100%);
    border: 1px solid var(--rim-gold, #D4AF37);
    color: var(--rim-navy);
  }
  .raven-bl-btn-collapse-mobile i {
    font-size: 13px;
    top: 0;
  }
  .raven-bl-btn-collapse-mobile:active {
    background: linear-gradient(to bottom, #d8d0bc 0%, #f8f4e8 100%);
    transform: translateY(1px);
  }

  /* Status row — compact single line on phones. Custom-status input is
     always visible (it's a freeform status, not just an auto-reply), so
     no hide-on-online rule anymore. */
  .raven-bl-status-bar {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    min-height: 36px;
  }

  .raven-bl-status-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 100px;
    font-size: 12px;
    padding: 4px 20px 4px 8px;
    min-height: 28px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='%2399876b' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 8px 5px;
    border-radius: 4px;
  }

  .raven-bl-custom-status-input {
    flex: 1 1 auto;
    width: 100%;
    font-size: 12px;
    padding: 4px 8px;
    min-height: 28px;
    border-radius: 4px;
  }

  /* Mood emoji picker — bump touch targets to 36×36 on phones; widen
     the popover so cells stay thumb-friendly. */
  .raven-mood-emoji-btn {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  .raven-mood-emoji-popover {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 6px;
    min-width: 208px;
  }
  .raven-mood-emoji-choice {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  .raven-mood-emoji-clear {
    font-size: 18px;
  }
  /* Mobile mood prefix on buddy name slightly larger to match 14px rows */
  .raven-buddy .raven-buddy-mood {
    font-size: 14px;
    margin-right: 6px;
  }

  /* Buddy rows — 44pt touch target (border-box + 52px total = 52pt, plus row gap from text height) */
  .raven-buddy {
    box-sizing: border-box;
    padding: 10px 12px 10px 20px;
    min-height: 48px;
    font-size: 14px;
  }

  .raven-buddy .raven-buddy-status {
    width: 16px;
    height: 16px;
  }

  .raven-buddy .raven-buddy-status svg {
    width: 16px;
    height: 16px;
  }

  .raven-bl-group-header {
    box-sizing: border-box;
    padding: 6px 12px;
    font-size: 12px;
    min-height: 30px;
  }

  /* Hide minimized-chat taskbar on phones — only one chat visible at a time */
  .raven-im.raven-floating .raven-taskbar {
    display: none;
  }

  /* Popup chat — full-screen takeover */
  .raven-chat {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border-width: 0;
    resize: none;
    box-shadow: none;
    min-width: 0;
    min-height: 0;
    z-index: 9200;
    animation: raven-slide-right 0.22s ease-out;
  }

  @keyframes raven-slide-right {
    from { transform: translateX(20%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

  .raven-chat .raven-chat-titlebar {
    padding: 10px 12px;
    min-height: 48px;
    font-size: 14px;
    cursor: default;
  }

  .raven-chat .raven-chat-titlebar .raven-bl-btn {
    width: 36px;
    height: 32px;
    font-size: 15px;
  }

  .raven-chat .raven-chat-titlebar .raven-bl-btn i {
    font-size: 14px;
  }

  .raven-chat .raven-chat-titlebar .raven-bl-btn[data-action="back"] {
    /* Back chevron is text (←), not an icon — keep size proportional */
    font-size: 22px;
    line-height: 1;
    font-weight: bold;
  }

  .raven-chat .raven-chat-titlebar .raven-bl-btn[data-action="minimize"] i {
    top: -7px;
  }

  .raven-chat .raven-chat-avatar {
    width: 24px;
    height: 24px;
  }

  /* Reveal the back chevron on mobile, hide minimize + close (back covers both) */
  .raven-chat .raven-bl-btn[data-action="back"] {
    display: inline-flex;
  }

  .raven-chat .raven-bl-btn[data-action="minimize"],
  .raven-chat .raven-bl-btn[data-action="close"] {
    display: none;
  }

  .raven-chat-subhead {
    padding: 6px 12px;
    font-size: 12px;
    min-height: 20px;
  }

  .raven-chat-body {
    padding: 10px 12px;
    font-size: 14px;
  }

  .raven-chat-inputbar {
    padding: 6px 8px;
    /* Lift above iOS home indicator if present */
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }

  .raven-chat-input {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
    min-height: 38px;
    max-height: 120px;
    padding: 8px 10px;
  }

  .raven-chat-send {
    padding: 0 18px;
    font-size: 13px;
    min-width: 64px;
    min-height: 42px;
  }

  /* Empty state in fullscreen mode (dashboard) */
  .raven-im.raven-fullscreen {
    grid-template-columns: 1fr;
    height: calc(100vh - 120px);
    height: calc(100dvh - 120px);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .raven-im.raven-fullscreen .raven-fs-left {
    border-right: 0;
  }

  .raven-im.raven-fullscreen.show-chat .raven-fs-left {
    display: none;
  }

  .raven-im.raven-fullscreen:not(.show-chat) .raven-fs-right {
    display: none;
  }

  /* In fullscreen mobile mode, reveal back button to return to buddy list */
  .raven-im.raven-fullscreen.show-chat .raven-chat .raven-bl-btn[data-action="back"] {
    display: inline-flex;
  }

  .raven-im.raven-fullscreen .raven-fs-empty {
    padding: 24px;
    font-size: 13px;
  }

  .raven-im.raven-fullscreen .raven-fs-empty i {
    font-size: 36px;
    margin-bottom: 8px;
  }
}

/* ============================================================
   Very narrow (≤360px) — extra compaction
   ============================================================ */
@media (max-width: 360px) {
  .raven-bl-titlebar {
    padding: 8px 10px;
    font-size: 12px;
  }

  .raven-bl-titlebar .raven-bl-title {
    font-size: 12px;
  }

  .raven-chat-send {
    padding: 0 12px;
    min-width: 52px;
  }

  .raven-buddy {
    font-size: 13px;
  }

  .raven-buddy .raven-buddy-away {
    display: none; /* avoid wrapping; user can tap row to see */
  }
}

/* Note: back-button default visibility is set near the chat-window styles
   (above) so source-order specificity lets the @media (max-width: 768px)
   override flip it back on. Surfacing on tablet/desktop fullscreen is
   intentionally NOT done — both columns are visible there. */

/* ============================================================
   Touch device polish — irrespective of screen size
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .raven-chat {
    resize: none;
  }

  .raven-buddy {
    min-height: 44px;
  }

  .raven-bl-titlebar .raven-bl-btn,
  .raven-chat-titlebar .raven-bl-btn {
    min-width: 30px;
    min-height: 28px;
  }
}

/* ============================================================
   Landscape phone — buddy list narrower so chat fits beside it
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .raven-im.raven-floating {
    max-height: 90vh;
    max-height: 90dvh;
  }

  .raven-chat-body {
    padding: 6px 12px;
  }
}

/* ============================================================
   Reduced motion — disable slide animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .raven-im.raven-floating,
  .raven-chat {
    animation: none;
  }
}

/* ============================================================
   Buddy search bar
   ============================================================ */
.raven-bl-search-bar {
  padding: 4px 8px;
  background: var(--rim-bg-alt);
  border-bottom: 1px solid var(--rim-border);
  flex-shrink: 0;
}

.raven-bl-search-input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 11px;
  padding: 3px 7px;
  border: 1px inset var(--rim-border);
  background: white;
  color: #000;
}

[data-theme="dark"] .raven-bl-search-input {
  background: #2a1f18;
  color: #f0e8d4;
}

.raven-bl-search-input:focus {
  outline: 1px solid var(--rim-indigo);
  outline-offset: -1px;
}

.raven-search-empty {
  padding: 10px 12px;
  color: var(--rim-text-dim);
  font-style: italic;
  font-size: 11px;
}

/* ============================================================
   Message delete button (appears on hover of own messages)
   ============================================================ */
.raven-msg.own {
  position: relative;
  padding-right: 20px;
}

.raven-msg-delete {
  display: none;
  position: absolute;
  right: 2px;
  top: 1px;
  width: 14px;
  height: 14px;
  background: none;
  border: none;
  color: var(--rim-text-dim);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.raven-msg.own:hover .raven-msg-delete {
  display: inline;
}

.raven-msg-delete:hover {
  color: var(--rim-status-busy);
}

/* React opener — keyboard-reachable emoji-picker trigger. Hidden until the
   row is hovered or anything inside it is focused (so Tab reveals it), sitting
   just left of the delete button. */
.raven-msg-react-open {
  display: none;
  position: absolute;
  right: 18px;
  top: 1px;
  width: 14px;
  height: 14px;
  background: none;
  border: none;
  color: var(--rim-text-dim);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
/* Own messages also show the delete button (right:2px), so offset react to
   right:18px above. Other messages have no delete button — pull react back. */
.raven-msg.other .raven-msg-react-open { right: 2px; }
.raven-msg:hover .raven-msg-react-open,
.raven-msg:focus-within .raven-msg-react-open {
  display: inline;
}
.raven-msg-react-open:hover,
.raven-msg-react-open:focus-visible {
  color: var(--rim-gold);
}

/* Drag-and-drop image attach — highlight the chat window while a file hovers. */
.raven-chat-dragover {
  outline: 2px dashed var(--rim-gold, #D4AF37);
  outline-offset: -4px;
}
.raven-chat-dragover::after {
  content: "Drop image to send";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 16, 24, 0.55);
  color: var(--rim-gold, #D4AF37);
  font-weight: bold;
  pointer-events: none;
  z-index: 5;
}

/* ============================================================
   Message status ticks (delivered / read receipts)
   ============================================================ */
.raven-msg-status {
  font-size: 9px;
  margin-left: 4px;
  color: var(--rim-text-dim);
  user-select: none;
  letter-spacing: -1px;
}

.raven-msg-status[data-state="read"] {
  color: var(--rim-indigo);
}

/* ============================================================
   Typing dots animation
   ============================================================ */
.raven-typing-dots {
  display: inline-flex;
  gap: 2px;
  margin-left: 3px;
  vertical-align: middle;
}

.raven-typing-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: raven-typing-bounce 1.2s ease-in-out infinite;
}

.raven-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.raven-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes raven-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.raven-typing-label {
  font-style: italic;
}

/* Mobile: larger search input touch target */
@media (max-width: 768px) {
  .raven-bl-search-input {
    font-size: 14px;
    padding: 7px 10px;
    min-height: 36px;
  }
}

/* ============================================================
   TIDINGS TAB (added 2026-05-18)
   ============================================================ */

/* Tab strip — Ravens (Huginn ᚺ) / Tidings (Muninn ᛏ) */
.raven-tabs {
  display: flex;
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
  background: linear-gradient(180deg, rgba(212,175,55,0.04) 0%, transparent 100%);
}
.raven-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.4rem;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(212, 175, 55, 0.10);
  color: var(--raven-text-secondary, #b0a78f);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  cursor: pointer;
  position: relative;
  transition: color 0.15s, background 0.15s;
}
.raven-tab:last-child { border-right: none; }
.raven-tab:hover { color: var(--raven-gold, #D4AF37); background: rgba(212, 175, 55, 0.05); }
.raven-tab.active {
  color: var(--raven-gold, #D4AF37);
  background: rgba(212, 175, 55, 0.08);
}
.raven-tab.active::after {
  content: '';
  position: absolute;
  left: 18%; right: 18%; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--raven-gold, #D4AF37), transparent);
}
.raven-tab-rune {
  font-size: 0.95rem;
  line-height: 1;
  color: var(--raven-gold, #D4AF37);
  opacity: 0.85;
}
.raven-tab.active .raven-tab-rune { opacity: 1; }
.raven-tab-count {
  display: none;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: #c94f3d;
  color: #fff;
  border-radius: 9px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0;
  align-items: center;
  justify-content: center;
  margin-left: 0.15rem;
}
.raven-tab-count.shown { display: inline-flex; }

/* Hide tab-only sections when not on their tab */
.raven-bl-titlebar ~ [data-tab-only="ravens"] { display: none; }
.raven-bl-titlebar ~ [data-tab-only="tidings"] { display: none; }
.raven-tabs[data-active-tab="ravens"] ~ [data-tab-only="ravens"] { display: flex; }
.raven-tabs[data-active-tab="tidings"] ~ [data-tab-only="tidings"] { display: flex; }

/* Tidings header bar — mark-all-read button */
.raven-tidings-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  background: rgba(212, 175, 55, 0.03);
}
.raven-tidings-mark-all {
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: var(--raven-gold, #D4AF37);
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background 0.15s, color 0.15s;
}
.raven-tidings-mark-all:hover {
  background: rgba(212, 175, 55, 0.1);
}

/* Tiding rows */
.raven-tiding {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.08);
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}
.raven-tiding:hover { background: rgba(212, 175, 55, 0.06); }
.raven-tiding.has-unread {
  background: rgba(212, 175, 55, 0.04);
  border-left: 2px solid var(--raven-gold, #D4AF37);
  padding-left: calc(0.8rem - 2px);
}
.tiding-avatar {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.18);
  color: #f8e8c8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.85rem;
  overflow: hidden;
}
.tiding-avatar-img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
.tiding-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.tiding-message {
  color: var(--raven-text-primary, #f0e6ff);
  font-size: 0.85rem;
  line-height: 1.3;
  word-wrap: break-word;
}
.raven-tiding.has-unread .tiding-message {
  color: var(--raven-gold, #D4AF37);
  font-weight: 600;
}
.tiding-meta {
  color: var(--raven-text-secondary, #8a8270);
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.tiding-meta i {
  color: var(--raven-gold, #D4AF37);
  opacity: 0.75;
  font-size: 0.7rem;
}
.tiding-dot {
  position: absolute;
  top: 0.85rem;
  right: 0.7rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--raven-gold, #D4AF37);
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.6);
}

[data-theme="dark"] .raven-tab { color: rgba(240, 230, 200, 0.55); }
[data-theme="dark"] .raven-tab:hover { color: var(--raven-gold, #D4AF37); }
[data-theme="dark"] .tiding-message { color: rgba(240, 230, 200, 0.9); }

/* ============================================================
   DRAG-TO-RESIZE HANDLE (mobile bottom-sheet, added 2026-05-18)
   ============================================================ */

/* Hidden on desktop — the floating window doesn't need resizing. */
.raven-bs-handle { display: none; }

/* Mobile-only titlebar collapse button — hidden on desktop, where the
   left-edge .raven-collapse-handle does the same job. */
.raven-bl-btn-collapse-mobile { display: none; }

@media (max-width: 768px) {
  .raven-bs-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Beefier touch target — fingers find the pill in a hurry */
    height: 28px;
    padding: 10px 0 6px;
    cursor: grab;
    touch-action: none;  /* lets us own the gesture */
    background: linear-gradient(180deg, transparent 0%, rgba(212, 175, 55, 0.06) 100%);
    border-radius: 12px 12px 0 0;  /* matches sheet top corners */
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
  }
  .raven-bs-handle.dragging {
    cursor: grabbing;
    background: rgba(212, 175, 55, 0.1);
  }
  .raven-bs-grabber {
    display: block;
    width: 56px;
    height: 5px;
    border-radius: 3px;
    background: var(--rim-gold, #D4AF37);
    opacity: 0.7;
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.25);
    transition: opacity 0.18s, transform 0.18s, width 0.18s;
  }
  .raven-bs-handle:hover .raven-bs-grabber {
    opacity: 1;
  }
  .raven-bs-handle.dragging .raven-bs-grabber {
    opacity: 1;
    width: 72px;
    background: linear-gradient(90deg, #b8941f, var(--rim-gold, #D4AF37), #b8941f);
  }
  /* Hide handle when sheet is collapsed (peek-tab state) */
  .raven-im.raven-floating.collapsed .raven-bs-handle {
    display: none;
  }
}

/* ============================================================
   PERCH PEEK-TAB INDICATORS (added 2026-05-19)
   ============================================================ */

/* Two-dot indicator stack — visible only when sidebar is collapsed (peek-tab).
   Top dot = sitewide activity (live shows / breaking news / upcoming).
   Bottom dot = personal (unread DMs / tidings). Combined unread count rides
   below the bottom dot when there's anything. */
.perch-indicators {
  display: none;
}
.raven-im.raven-floating.collapsed .perch-indicators {
  position: absolute;
  top: 12px;
  left: 0;
  width: 32px;
  display: flex;
  flex-direction: column;
  /* flex-start (not space-between): cluster the LIVE badge + site dot at the
     TOP of the rail and push the personal dot to the BOTTOM (margin-top:auto
     below). With space-between, three children forced the middle one — the
     site dot — onto the vertically-centered "RAVENS" label and covered it. */
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  height: calc(100% - 24px);
  z-index: 2;
  pointer-events: none;
}
/* Personal dot lives at the foot of the rail, clear of the centered label. */
.raven-im.raven-floating.collapsed .perch-indicator-personal {
  margin-top: auto;
}

.perch-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.18);
  flex-shrink: 0;
  transition: background 0.25s, box-shadow 0.25s, border-color 0.25s;
}

/* Site dot states */
/* Idle = fully invisible: clear the base border so an inactive rail shows
   nothing but the RAVENS label (no stray empty rings / "blank buttons"). */
.perch-indicator-site[data-state="idle"],
.perch-indicator-personal[data-state="idle"] {
  border-color: transparent;
}
.perch-indicator-site[data-state="idle"] { /* invisible idle */ }
.perch-indicator-site[data-state="pending"] {
  background: var(--rim-gold, #D4AF37);
  border-color: var(--rim-gold, #D4AF37);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  animation: perch-dot-pulse 2.2s ease-in-out infinite;
}
.perch-indicator-site[data-state="live"] {
  background: #c94f3d;       /* ember-red */
  border-color: #ff7a4a;
  box-shadow: 0 0 10px rgba(201, 79, 61, 0.8);
  animation: perch-dot-pulse 1.6s ease-in-out infinite;
}

/* Personal dot states */
.perch-indicator-personal[data-state="idle"] { /* invisible idle */ }
.perch-indicator-personal[data-state="dm"] {
  background: #4A90E2;       /* indigo for DMs */
  border-color: #6FB0F0;
  box-shadow: 0 0 8px rgba(74, 144, 226, 0.7);
  animation: perch-dot-pulse 2.0s ease-in-out infinite;
}
.perch-indicator-personal[data-state="tiding"] {
  background: var(--rim-gold, #D4AF37);
  border-color: var(--rim-gold, #D4AF37);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  animation: perch-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes perch-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.25); opacity: 1; }
}

/* Explicit LIVE badge on the collapsed peek-tab. The strip is a narrow
   ~32px vertical rail, so the label reads top-to-bottom. Only rendered when
   the sidebar is collapsed (parent .perch-indicators is display:none until
   then) AND streams are live (JS toggles the [hidden] attribute). */
.perch-live-badge[hidden] { display: none; }
.perch-live-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: #ff8a5c;
  background: rgba(201, 79, 61, 0.16);
  border: 1px solid rgba(255, 122, 74, 0.55);
  border-radius: 7px;
  padding: 7px 2px;
  text-shadow: 0 0 6px rgba(201, 79, 61, 0.7);
}
.perch-live-dot {
  writing-mode: horizontal-tb;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff5436;
  box-shadow: 0 0 7px rgba(255, 84, 54, 0.95);
  animation: perch-dot-pulse 1.3s ease-in-out infinite;
}

/* ============================================================
   LIVE NOW rail — dedicated, louder treatment for active
   livestreams. Sits above Site Pulse in the expanded body.
   ============================================================ */
.rim-section-live .rim-section-head {
  background: linear-gradient(180deg, rgba(201,79,61,0.20) 0%, rgba(201,79,61,0.04) 100%);
  border-bottom-color: rgba(255, 122, 74, 0.30);
}
.rim-section-live .rim-section-label { color: #ff8a5c; }
.rim-section-live .rim-section-count {
  color: #fff;
  background: #c94f3d;
  border-radius: 8px;
  padding: 1px 6px;
  font-weight: 700;
}
.live-now-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff5436;
  box-shadow: 0 0 8px rgba(255, 84, 54, 0.9);
  flex-shrink: 0;
  animation: perch-dot-pulse 1.3s ease-in-out infinite;
}
.live-now-list { display: flex; flex-direction: column; }
.live-now-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  text-decoration: none;
  color: var(--rim-text-primary, #f0e6ff);
  background: rgba(201, 79, 61, 0.07);
  border-bottom: 1px solid rgba(255, 122, 74, 0.10);
  transition: background 0.15s;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.live-now-row:last-child { border-bottom: none; }
.live-now-row:hover { background: rgba(201, 79, 61, 0.16); }
.live-now-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff5436;
  box-shadow: 0 0 7px rgba(255, 84, 54, 0.95);
  flex-shrink: 0;
  animation: perch-dot-pulse 1.3s ease-in-out infinite;
}
.live-now-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.live-now-creator {
  font-weight: 700;
  font-size: 0.78rem;
  color: #ffd9c2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.live-now-star { color: var(--rim-gold, #D4AF37); font-size: 0.72rem; }
.live-now-title {
  font-size: 0.7rem;
  color: var(--rim-text-secondary, #c9a98f);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.live-now-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  flex-shrink: 0;
}
.live-now-viewers { font-size: 0.62rem; color: var(--rim-text-secondary, #8a8270); }
.live-now-watch {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #c94f3d;
  border-radius: 5px;
  padding: 2px 7px;
  box-shadow: 0 0 6px rgba(201, 79, 61, 0.4);
}
.live-now-row:hover .live-now-watch { background: #d85f4d; }
[data-theme]:not([data-theme="dark"]) .live-now-creator { color: #8a2f20; }
[data-theme]:not([data-theme="dark"]) .live-now-title { color: #6a4a3a; }

/* Combined unread count chip, rides below the bottom dot */
.perch-indicator-count {
  display: none;
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  background: #c94f3d;
  color: #fff;
  border-radius: 8px;
  font-family: Tahoma, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0;
  border: 2px solid var(--rim-navy, #1A2332);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.perch-indicator-count.shown { display: inline-block; }

/* Event-flash classes used by flashLauncher (moved from header button to
   the floating element itself in v3). */
.raven-im.event-flash       { animation: raven-flash-msg 0.7s ease-out; }
.raven-im.event-flash-buddy { animation: raven-flash-buddy 0.7s ease-out; }
.raven-im.event-flash-site  { animation: raven-flash-site 0.9s ease-out; }
@keyframes raven-flash-msg {
  0%   { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
  100% { box-shadow: 0 0 0 14px rgba(212, 175, 55, 0); }
}
@keyframes raven-flash-buddy {
  0%   { box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.7); }
  100% { box-shadow: 0 0 0 14px rgba(74, 144, 226, 0); }
}
@keyframes raven-flash-site {
  0%   { box-shadow: 0 0 0 0 rgba(201, 79, 61, 0.7); }
  100% { box-shadow: 0 0 0 16px rgba(201, 79, 61, 0); }
}

/* ============================================================
   UNIFIED EXPANDED VIEW (v3 — Site Pulse + Tidings + Buddies stacked)
   ============================================================ */

.rim-section {
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
.rim-section:last-child { border-bottom: none; }

.rim-section-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  background: linear-gradient(180deg, rgba(212,175,55,0.10) 0%, rgba(212,175,55,0.02) 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}
.rim-section-rune {
  font-size: 0.85rem;
  line-height: 1;
  color: var(--rim-gold, #D4AF37);
}
.rim-section-label {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rim-gold, #D4AF37);
  flex: 1;
}
.rim-section-count {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.65rem;
  color: rgba(212, 175, 55, 0.7);
  letter-spacing: 0;
}
.rim-section-count-unread {
  background: #c94f3d;
  color: #fff;
  border-radius: 8px;
  padding: 1px 6px;
  font-weight: 700;
}
.rim-section-mark-all {
  background: transparent;
  border: none;
  color: var(--rim-gold, #D4AF37);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.75rem;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s;
}
.rim-section-mark-all:hover { opacity: 1; background: rgba(212, 175, 55, 0.12); }
.rim-section-dismiss-all:hover { color: #ff7a4a; background: rgba(201, 79, 61, 0.15); }

.rim-section-empty {
  padding: 0.45rem 0.7rem;
  color: rgba(245, 230, 211, 0.5);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style: italic;
  font-size: 0.72rem;
}

.rim-section-more {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-top: 1px dashed rgba(212, 175, 55, 0.18);
  color: var(--rim-gold, #D4AF37);
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 0.3rem;
  cursor: pointer;
  transition: background 0.15s;
}
.rim-section-more:hover { background: rgba(212, 175, 55, 0.08); }

/* Site Pulse rows — single-line, dense */
.site-pulse-list { display: flex; flex-direction: column; }
.site-pulse-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.06);
  text-decoration: none;
  color: var(--rim-text-primary, #f0e6ff);
  transition: background 0.15s;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  line-height: 1.3;
}
.site-pulse-row:last-child { border-bottom: none; }
.site-pulse-row:hover { background: rgba(212, 175, 55, 0.08); }
.site-pulse-row.site-pulse-type-live { background: rgba(201, 79, 61, 0.06); }
.site-pulse-row.site-pulse-type-live:hover { background: rgba(201, 79, 61, 0.14); }

.site-pulse-icon { font-size: 0.85rem; flex-shrink: 0; width: 16px; text-align: center; }
.site-pulse-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  overflow: hidden;
}
.site-pulse-title {
  font-weight: 600;
  color: var(--rim-text-primary, #f0e6ff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
.site-pulse-creator {
  font-size: 0.7rem;
  color: var(--rim-gold, #D4AF37);
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
.site-pulse-meta {
  font-size: 0.65rem;
  color: var(--rim-text-secondary, #8a8270);
  flex-shrink: 0;
  margin-left: auto;
}
.site-pulse-type-live .site-pulse-icon { animation: site-pulse-blink 1.5s ease-in-out infinite; }
@keyframes site-pulse-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Dismissible POST rows (blog / news / forum). The row is a flex container
   holding the navigable link + a dismiss button; the link carries the
   icon/body/meta that sticky rows hold directly. */
.site-pulse-row.site-pulse-post { padding-right: 0.3rem; }
.site-pulse-link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.site-pulse-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--rim-text-secondary, #8a8270);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.site-pulse-row.site-pulse-post:hover .site-pulse-dismiss,
.site-pulse-dismiss:focus-visible { opacity: 0.8; }
.site-pulse-dismiss:hover { color: var(--rim-gold, #D4AF37); opacity: 1; }
/* Touch devices have no hover — keep the dismiss affordance always visible. */
@media (hover: none) {
  .site-pulse-dismiss { opacity: 0.55; }
}

/* Tidings digest — uses the existing .raven-tiding row class (compact rule below wins) */
.tidings-digest { display: flex; flex-direction: column; }

/* Light mode tweaks */
[data-theme]:not([data-theme="dark"]) .site-pulse-title,
[data-theme]:not([data-theme="dark"]) .site-pulse-row {
  color: #1A2332;
}
[data-theme]:not([data-theme="dark"]) .rim-section-empty {
  color: rgba(26, 35, 50, 0.5);
}

/* ============================================================
   NORSE RESTYLE (v3, 2026-05-19) — drop the AIM bevel/Tahoma look
   ============================================================ */

/* Titlebar — carved stone instead of Windows 95 chunky gradient.
   Drops the inset/raised border tricks; uses gold leaf top edge. */
.raven-bl-titlebar,
.raven-chat-titlebar {
  background: linear-gradient(180deg, #0d1a30 0%, #050b18 100%);
  border-top: 2px solid var(--rim-gold, #D4AF37);
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  padding: 6px 10px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rim-gold, #D4AF37);
}

.raven-bl-titlebar .raven-bl-rune,
.raven-chat-titlebar .raven-bl-rune {
  font-size: 14px;
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.4);
  filter: none;
}

/* Titlebar buttons — flat Norse, NO chunky AIM bevel */
.raven-bl-titlebar .raven-bl-btn,
.raven-chat-titlebar .raven-bl-btn {
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--rim-gold, #D4AF37);
  border-radius: 3px;
  width: 22px;
  height: 20px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.raven-bl-titlebar .raven-bl-btn:hover,
.raven-chat-titlebar .raven-bl-btn:hover {
  background: rgba(212, 175, 55, 0.18);
  border-color: var(--rim-gold, #D4AF37);
  color: var(--rim-gold, #D4AF37);
}
.raven-bl-titlebar .raven-bl-btn:active,
.raven-chat-titlebar .raven-bl-btn:active {
  background: rgba(212, 175, 55, 0.3);
  border-color: var(--rim-gold, #D4AF37);
}
.raven-bl-titlebar .raven-bl-btn[data-action="close"]:hover,
.raven-chat-titlebar .raven-bl-btn[data-action="close"]:hover {
  background: rgba(201, 79, 61, 0.25);
  border-color: #c94f3d;
  color: #ff7a4a;
}

/* Status bar — subtle gold-tinted, less utilitarian. Slimmer now that
   it's inside the scrolling body rather than a pinned header. */
.raven-bl-status-bar {
  background: linear-gradient(180deg, rgba(212,175,55,0.04) 0%, transparent 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
  padding: 5px 10px;
}
.raven-bl-status-select,
.raven-bl-custom-status-input,
.raven-bl-search-input {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.25);
  color: var(--rim-text-primary, #f0e6ff);
  padding: 4px 8px;
  border-radius: 3px;
  transition: border-color 0.15s, background 0.15s;
}
.raven-bl-status-select:focus,
.raven-bl-custom-status-input:focus,
.raven-bl-search-input:focus {
  outline: none;
  border-color: var(--rim-gold, #D4AF37);
  background: rgba(212, 175, 55, 0.06);
}
.raven-bl-search-bar { padding: 8px 10px; }

/* Body — subtle vertical noise/grain (replaces flat AIM bg).
   Uses a tiny inline SVG for the noise so we don't ship an asset. */
.raven-bl-body {
  background:
    linear-gradient(180deg, rgba(212,175,55,0.02) 0%, transparent 200px),
    var(--rim-bg, #1a2332);
}

/* Group headers — Cinzel uppercase + gold underline */
.raven-bl-group-header {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rim-gold, #D4AF37);
  padding: 0.3rem 0.7rem 0.2rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  background: linear-gradient(180deg, rgba(212,175,55,0.06) 0%, transparent 100%);
}
.raven-bl-group-header .raven-bl-twist {
  color: var(--rim-gold, #D4AF37);
  opacity: 0.75;
  margin-right: 0.3rem;
}
.raven-bl-group-count {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.7;
  margin-left: auto;
}

/* Buddy rows — flat Norse, gold tint on hover, no AIM stripes */
.raven-buddy {
  padding: 0.32rem 0.7rem;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--rim-text-primary, #f0e6ff);
  border-bottom: 1px solid rgba(212, 175, 55, 0.05);
  transition: background 0.12s, padding-left 0.18s;
}
.raven-buddy:hover {
  background: rgba(212, 175, 55, 0.08);
  padding-left: 1rem;
}
.raven-buddy.has-unread {
  background: rgba(74, 144, 226, 0.06);
  border-left: 2px solid #4A90E2;
  padding-left: calc(0.8rem - 2px);
}
.raven-buddy.has-unread .raven-buddy-name { font-weight: 700; color: var(--rim-gold, #D4AF37); }

/* Chat windows — wood-frame inset instead of AIM grey bevel */
.raven-chat {
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-top: 2px solid var(--rim-gold, #D4AF37);
  border-radius: 4px;
  background: linear-gradient(180deg, #0c1a30 0%, #050b18 100%);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}

/* Light-mode adjustments */
[data-theme]:not([data-theme="dark"]) .raven-bl-status-select,
[data-theme]:not([data-theme="dark"]) .raven-bl-custom-status-input,
[data-theme]:not([data-theme="dark"]) .raven-bl-search-input {
  background: rgba(0, 0, 0, 0.04);
  color: #1A2332;
}
[data-theme]:not([data-theme="dark"]) .raven-buddy { color: #1A2332; }
[data-theme]:not([data-theme="dark"]) .raven-buddy.has-unread .raven-buddy-name { color: #8a6f1a; }

/* ============================================================
   PERCH v3 POLISH (2026-05-19)
   ============================================================ */

/* Side collapse handle — sits on the LEFT edge of the expanded sidebar,
   the same edge that becomes the peek-tab when collapsed. Clicking it
   folds the sidebar back to peek. Replaces the top-bar minimize button. */
.raven-collapse-handle {
  display: none;
}
.raven-im.raven-floating:not(.collapsed) .raven-collapse-handle {
  display: flex;
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
  width: 22px;
  height: 64px;
  background: linear-gradient(180deg, #0c1a30 0%, #050b18 100%);
  /* The handle hangs 22px to the LEFT of the panel (margin-left below), so
     its leftmost edge is the exposed one and must be closed + rounded. The
     right edge butts against the panel's own left border, so leave it open
     to merge cleanly. */
  border: 1px solid var(--rim-gold, #D4AF37);
  border-right: none;
  border-radius: 4px 0 0 4px;
  color: var(--rim-gold, #D4AF37);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.15s, transform 0.15s, width 0.18s;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
  margin-left: -22px;  /* hang off the left edge so it visually attaches to the page */
}
.raven-im.raven-floating:not(.collapsed) .raven-collapse-handle:hover {
  background: linear-gradient(180deg, #163055 0%, #0a1424 100%);
  width: 26px;
}
.raven-collapse-chevron {
  font-size: 14px;
  line-height: 1;
  transform: rotate(180deg);  /* points right (toward content) — "send sidebar away" */
}

/* Mobile: position handle differently (the sidebar is a bottom-sheet, not
   right-edge floating). On mobile we instead expose the drag handle which
   already exists. Hide the side handle on mobile to avoid double affordances. */
@media (max-width: 768px) {
  .raven-im.raven-floating:not(.collapsed) .raven-collapse-handle {
    display: none;
  }
}

/* ============================================================
   MOBILE COLLAPSED PILL — late overrides (must come AFTER the desktop
   .raven-im.raven-floating.collapsed .perch-indicators rule above so
   source order wins the cascade). Without these, the desktop vertical
   stack rule clobbers the inline-horizontal placement we want on the
   mobile pill.
   ============================================================ */
@media (max-width: 768px) {
  /* Activity cluster floats absolutely on the right edge of the pill.
     Row order (right-handed): [count badge] [site dot] [personal dot].
     Lefty mode reverses via row-reverse so the visual flow mirrors. */
  .raven-im.raven-floating.collapsed .perch-indicators {
    position: absolute;
    top: 50%;
    right: 12px;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
    flex-direction: row;
    width: auto;
    height: auto;
    gap: 7px;
    align-items: center;
    z-index: 2;
    pointer-events: none;
  }
  .raven-im.raven-floating.collapsed .perch-indicators .perch-indicator {
    width: 10px;
    height: 10px;
    box-shadow: none;  /* reset desktop glow shadow for cleaner pill look */
  }
  /* The desktop rail pushes the personal dot to the bottom with margin-top
     auto; in the horizontal mobile pill that would shove it off-center, so
     clear it and let align-items:center take over. */
  .raven-im.raven-floating.collapsed .perch-indicator-personal {
    margin-top: 0;
  }
  /* Site indicator — when LIVE, ember-red with a soft halo so it reads
     across the dim navy without overwhelming the pill */
  .raven-im.raven-floating.collapsed .perch-indicator-site[data-state="live"] {
    background: #e25640;
    border-color: #ff8a5a;
    box-shadow: 0 0 8px rgba(226, 86, 64, 0.85),
                0 0 14px rgba(226, 86, 64, 0.35);
  }
  .raven-im.raven-floating.collapsed .perch-indicator-site[data-state="pending"] {
    background: var(--rim-gold, #D4AF37);
    border-color: var(--rim-gold, #D4AF37);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.7);
  }
  /* Personal indicator with unread state */
  .raven-im.raven-floating.collapsed .perch-indicator-personal[data-state="dm"],
  .raven-im.raven-floating.collapsed .perch-indicator-personal[data-state="tiding"] {
    background: var(--rim-gold, #D4AF37);
    border-color: var(--rim-gold, #D4AF37);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.7);
  }
  /* Unread count — render as proper red badge to the LEFT of the dots.
     Must escape its parent dot (it's inside .perch-indicator-personal in
     the DOM) so position relative to .perch-indicators cluster via right:
     100% + margin-right. */
  .raven-im.raven-floating.collapsed .perch-indicator-count {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 8px;
    background: #c94f3d;
    color: #fff;
    border: 1.5px solid #0c1830;
    border-radius: 9px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
    letter-spacing: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 3;
  }
  .raven-im.raven-floating.collapsed .perch-indicator-count.shown {
    display: inline-block;
  }
  /* Lefty mode: count flips to the other side of the cluster */
  body.raven-perch-lefty .raven-im.raven-floating.collapsed .perch-indicator-count {
    right: auto;
    left: 100%;
    margin-right: 0;
    margin-left: 8px;
  }
}

/* ============================================================
   COMPACT TIDINGS ROWS (v3, 2026-05-19)
   ============================================================ */

.raven-tiding {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.7rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.06);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1.3;
  position: relative;
  transition: background 0.12s, opacity 0.2s;
}
.raven-tiding:hover { background: rgba(212, 175, 55, 0.08); }

.raven-tiding .tiding-type-icon {
  flex-shrink: 0;
  width: 18px;
  font-size: 0.85rem;
  color: var(--rim-gold, #D4AF37);
  opacity: 0.85;
  text-align: center;
}
.raven-tiding[data-type="live"] .tiding-type-icon,
.raven-tiding[data-type="livestream"] .tiding-type-icon { color: #c94f3d; }
.raven-tiding[data-type="vote"] .tiding-type-icon,
.raven-tiding[data-type="like"] .tiding-type-icon { color: var(--rim-gold, #D4AF37); }
.raven-tiding[data-type="gift"] .tiding-type-icon,
.raven-tiding[data-type="runegold"] .tiding-type-icon { color: #f5c247; }
.raven-tiding[data-type="mention"] .tiding-type-icon { color: #6ad1ff; }
.raven-tiding[data-type="follow"] .tiding-type-icon { color: #a890ff; }

.raven-tiding .tiding-message {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rim-text-primary, #f0e6ff);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  line-height: 1.3;
}
.raven-tiding.has-unread .tiding-message {
  color: var(--rim-gold, #D4AF37);
  font-weight: 600;
}
.raven-tiding .tiding-time {
  flex-shrink: 0;
  font-size: 0.65rem;
  color: var(--rim-text-secondary, #8a8270);
  opacity: 0.75;
}

.raven-tiding .tiding-dismiss {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  color: var(--rim-text-secondary, #8a8270);
  cursor: pointer;
  border-radius: 3px;
  opacity: 0.4;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.raven-tiding:hover .tiding-dismiss { opacity: 0.85; }
.raven-tiding .tiding-dismiss:hover {
  opacity: 1;
  background: rgba(201, 79, 61, 0.15);
  color: #ff7a4a;
}
.raven-tiding .tiding-dismiss i { font-size: 0.7rem; }

/* Hover tooltip — shows full notification text when the row is truncated.
   Positioned BELOW the row so it stays within the sidebar's vertical
   scroll bounds (horizontal overflow would be clipped by the body's
   overflow-y:auto). Spans most of the row width and wraps. */
.raven-tiding[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: calc(100% - 2px);
  padding: 0.5rem 0.65rem;
  background: linear-gradient(180deg, #0d1a30 0%, #050b18 100%);
  border: 1px solid var(--rim-gold, #D4AF37);
  border-radius: 4px;
  color: var(--rim-text-primary, #f0e6ff);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  word-wrap: break-word;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,175,55,0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease-out 0.2s, visibility 0s linear 0.35s;
  z-index: 50;
}
.raven-tiding[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease-out 0.2s, visibility 0s linear 0.2s;
}

/* Mobile: no hover, so suppress the CSS tooltip and rely on the row tap
   handler (eventually routes to the linked content). */
@media (hover: none), (max-width: 768px) {
  .raven-tiding[data-tooltip]::after { display: none; }
}

/* Unread indicator: a left-edge gold tick instead of the floating dot */
.raven-tiding.has-unread {
  border-left: 2px solid var(--rim-gold, #D4AF37);
  padding-left: calc(0.7rem - 2px);
}

/* Light-mode adjustments */
[data-theme]:not([data-theme="dark"]) .raven-tiding .tiding-message { color: #1A2332; }
[data-theme]:not([data-theme="dark"]) .raven-tiding.has-unread .tiding-message { color: #8a6f1a; }

/* ============================================================
   MOBILE EXPANDED-VIEW POLISH (added 2026-05-20)
   ============================================================ */
@media (max-width: 768px) {
  /* Live stream rows in Site Pulse: thicker left-edge bar + warmer
     background so the live state is unmissable in the expanded sheet. */
  .raven-im.raven-floating .site-pulse-row.site-pulse-type-live {
    position: relative;
    background: rgba(201, 79, 61, 0.09);
    padding-left: 14px;
  }
  .raven-im.raven-floating .site-pulse-row.site-pulse-type-live::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: #e25640;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 6px rgba(226, 86, 64, 0.6);
  }
  .raven-im.raven-floating .site-pulse-row.site-pulse-type-live .site-pulse-title {
    font-weight: 600;
    color: #ffd9d0;
  }

  /* Section heads: a touch more vertical space on mobile so taps don't
     misfire on the mark-all/dismiss-all buttons in the corner. */
  .raven-im.raven-floating .rim-section-head {
    padding: 0.45rem 0.7rem;
    min-height: 36px;
  }
  .raven-im.raven-floating .rim-section-label {
    font-size: 0.72rem;
  }
  .raven-im.raven-floating .rim-section-mark-all {
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Body padding-top so the first section breathes from the status bar */
  .raven-im.raven-floating:not(.collapsed) .raven-bl-body {
    padding-top: 2px;
  }
}

/* ============================================================
   TIDING ROW — SPLIT AFFORDANCE (avatar → profile, body → subject)
   Added 2026-05-21. Avatar lives on the left as a tap-target for the
   actor's profile; the message body is its own button-like tap target
   that routes to the subject content (post/thread/etc.).
   ============================================================ */

.raven-tiding .tiding-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.18);
  color: #f8e8c8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.82rem;
  border: 1px solid rgba(212, 175, 55, 0.22);
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: visible;       /* let badge bleed past edge */
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.raven-tiding .tiding-avatar:hover {
  transform: scale(1.06);
  border-color: var(--rim-gold, #D4AF37);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}
.raven-tiding .tiding-avatar:active { transform: scale(0.96); }
.raven-tiding .tiding-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.raven-tiding .tiding-avatar-fallback {
  text-transform: uppercase;
  line-height: 1;
}

/* Type-icon badge — small circle in the bottom-right of the avatar.
   Color cued by data-type via classes (vote/like/follow/mention/gift). */
.raven-tiding .tiding-avatar-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rim-navy, #1A2332);
  color: var(--rim-gold, #D4AF37);
  border: 1.5px solid var(--rim-navy, #1A2332);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.raven-tiding .tiding-avatar-badge-vote,
.raven-tiding .tiding-avatar-badge-like { color: #f5c247; }
.raven-tiding .tiding-avatar-badge-mention { color: #6ad1ff; }
.raven-tiding .tiding-avatar-badge-follow { color: #a890ff; }
.raven-tiding .tiding-avatar-badge-gift,
.raven-tiding .tiding-avatar-badge-runegold { color: #f5c247; background: linear-gradient(180deg, #2a1f08 0%, #1A2332 100%); }
.raven-tiding .tiding-avatar-badge-livestream { color: #e25640; background: #1a0c0c; border-color: #1a0c0c; }
.raven-tiding .tiding-avatar-badge-comment,
.raven-tiding .tiding-avatar-badge-forum { color: #f0e6ff; }

/* Message body becomes its own button so the tap area is clearly separate
   from the avatar. Resets default button styles so it visually matches
   the previous span. */
.raven-tiding .tiding-message {
  background: transparent;
  border: 0;
  text-align: left;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--rim-text-primary, #f0e6ff);
}
.raven-tiding .tiding-message:hover {
  color: var(--rim-gold, #D4AF37);
}

/* Compact row: slightly taller padding to accommodate the 28px avatar
   without crowding the badge */
@media (max-width: 768px) {
  .raven-tiding {
    padding: 0.5rem 0.7rem;
    gap: 0.55rem;
    min-height: 44px;       /* Apple HIG touch-target floor */
  }
}

/* ============================================================
   OBSIDIAN AVIARY — Perch full-potential theme (2026-05-23)
   Appended last so it wins by load order (no !important).
   DARK = moonlit gothic roost (hero). LIGHT = illuminated
   manuscript (parchment + gold leaf). Type: Cinzel (engraved
   gilt capitals) + Spectral (tome serif). Self-hosted, OFL.
   Branch: claude/perch-obsidian-aviary.
   ============================================================ */

@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cinzel-600.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/cinzel-700.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/spectral-400.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/spectral-400-italic.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/spectral-500.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/spectral-600.woff2') format('woff2')}

/* ---- gilt + eye tokens + type stacks (both themes) ---- */
.raven-im{
  --gild-hi:#f4dd92; --gild:#d9b24b; --gild-mid:#b6862e; --gild-lo:#7c5a1e;
  --eye-online:#4fd97a; --eye-away:#e9a13f; --eye-busy:#e0564a; --eye-idle:#b08a52;
  --rim-display:'Cinzel', Georgia, 'Times New Roman', serif;
  --rim-serif:'Spectral', Georgia, 'Times New Roman', "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", serif;
}

/* ---- engraved display type (both themes) ---- */
.raven-im .raven-bl-title-head{
  font-family:var(--rim-display); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase;
}
.raven-im .raven-bl-title-suffix{
  font-family:var(--rim-serif); font-style:italic; letter-spacing:.02em;
}
.raven-im .rim-section-label,
.raven-im .raven-bl-group-header{
  font-family:var(--rim-display); font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; font-size:11px;
}
.raven-im .raven-bl-group-count,
.raven-im .rim-section-count{
  font-family:var(--rim-serif); font-style:italic; letter-spacing:0; text-transform:none;
}
.raven-im .raven-bl-twist{ font-family:Georgia, serif; letter-spacing:0; }

/* ---- tome serif for names + prose ---- */
.raven-im .raven-buddy-name,
.raven-im .tiding-message,
.raven-im .raven-buddy-away,
.raven-im .raven-bl-custom-status-input{
  font-family:var(--rim-serif);
}
.raven-im .raven-buddy-away{ font-style:italic; }

/* ============================================================
   DARK — Obsidian Aviary
   ============================================================ */
[data-theme="dark"] .raven-im{
  --rim-bg:#11141f; --rim-bg-alt:#1a1f30;
  --rim-text:#ece3cf; --rim-text-dim:#9a917d;
  --rim-border:#39405a; --rim-gold:#d9b24b;
}

/* layered atmosphere baked into the panel background: moon glow,
   star dust, and the obsidian-to-midnight roost gradient. */
[data-theme="dark"] .raven-im.raven-floating{
  background:
    radial-gradient(220px 200px at 50% -64px, rgba(255,225,150,.10), transparent 70%),
    radial-gradient(1px 1px at 22% 9%,  rgba(255,240,200,.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 70% 6%, rgba(255,240,200,.42), transparent 60%),
    radial-gradient(1px 1px at 85% 13%, rgba(255,240,200,.32), transparent 60%),
    radial-gradient(1px 1px at 40% 4%,  rgba(255,240,200,.28), transparent 60%),
    linear-gradient(180deg,#1c2138 0%,#171b2b 22%,#11141f 60%,#0b0d14 100%);
  border-left:1px solid rgba(217,178,75,.28);
  box-shadow:
    -22px 0 50px rgba(0,0,0,.55),
    inset 1px 0 0 rgba(255,255,255,.05);
}
/* gold branch-spine down the left edge (expanded only) */
[data-theme="dark"] .raven-im.raven-floating:not(.collapsed)::after{
  content:""; position:absolute; left:0; top:92px; bottom:46px; width:3px;
  z-index:1; pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--gild-mid) 12%,var(--gild) 50%,var(--gild-lo) 88%,transparent);
  box-shadow:0 0 8px rgba(217,178,75,.5);
}

/* gilt clip on title + rune + section labels (dark only — needs dark bg) */
[data-theme="dark"] .raven-im .raven-bl-title-head,
[data-theme="dark"] .raven-im .rim-section-label,
[data-theme="dark"] .raven-im .raven-bl-group-header > span:not(.raven-bl-twist):not(.raven-bl-group-count){
  background:linear-gradient(180deg,var(--gild-hi),var(--gild) 55%,var(--gild-mid));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
[data-theme="dark"] .raven-im .raven-bl-rune{
  color:var(--gild);
  filter:drop-shadow(0 0 6px rgba(255,210,120,.5));
}
[data-theme="dark"] .raven-im .rim-section-rune{
  color:var(--gild); filter:drop-shadow(0 0 4px rgba(255,210,120,.4));
}
/* engraved rule trailing each section label */
[data-theme="dark"] .raven-im .rim-section-label::after{
  content:""; display:inline-block; height:1px; width:42px; margin-left:10px;
  vertical-align:middle;
  background:linear-gradient(90deg,rgba(217,178,75,.5),transparent);
}

/* ---- presence as raven-eyes (dark) ---- */
.raven-im .raven-buddy .raven-buddy-status{ position:relative; }
[data-theme="dark"] .raven-im .raven-buddy[data-status="online"] .raven-buddy-status{
  color:var(--eye-online);
  filter:drop-shadow(0 0 5px rgba(79,217,122,.65));
}
[data-theme="dark"] .raven-im .raven-buddy[data-status="online"] .raven-buddy-status::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid rgba(79,217,122,.45);
  animation:perch-eye-halo 3.4s ease-in-out infinite;
}
@keyframes perch-eye-halo{
  0%,100%{ transform:scale(1); opacity:.55 }
  50%{ transform:scale(1.4); opacity:0 }
}
[data-theme="dark"] .raven-im .raven-buddy[data-status="away"] .raven-buddy-status{
  color:var(--eye-away); filter:drop-shadow(0 0 4px rgba(233,161,63,.5));
}
[data-theme="dark"] .raven-im .raven-buddy[data-status="busy"] .raven-buddy-status{
  color:var(--eye-busy); filter:drop-shadow(0 0 5px rgba(224,86,74,.5));
}
[data-theme="dark"] .raven-im .raven-bl-group[data-group="idle"] .raven-buddy-status{
  color:var(--eye-idle);
}

/* row hover = candlelight wash from the spine */
[data-theme="dark"] .raven-im .raven-buddy:hover{
  background:linear-gradient(90deg, rgba(217,178,75,.12), transparent 78%);
}
[data-theme="dark"] .raven-im .raven-tiding:hover{
  background:linear-gradient(90deg, rgba(217,178,75,.12), transparent 72%);
}

/* gilt unread pill */
[data-theme="dark"] .raven-im .raven-buddy-meta{
  font-family:var(--rim-display); font-weight:700; font-size:9.5px; letter-spacing:.04em;
  color:#1b1407;
  background:linear-gradient(180deg,var(--gild-hi),var(--gild-mid));
  padding:1px 7px; border-radius:10px;
  box-shadow:0 0 8px rgba(217,178,75,.45);
}

/* fresh tiding — one gilt feather-sweep across the topmost unread */
[data-theme="dark"] .raven-im .rim-section-tidings .raven-tiding.has-unread:first-of-type{
  position:relative; overflow:hidden;
}
[data-theme="dark"] .raven-im .rim-section-tidings .raven-tiding.has-unread:first-of-type::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,225,150,.20), transparent);
  background-size:240% 100%;
  animation:perch-sweep 2.2s ease-out 1;
}
@keyframes perch-sweep{ from{ background-position:130% 0 } to{ background-position:-150% 0 } }

/* gilt scrollbar (dark) */
[data-theme="dark"] .raven-im .raven-bl-body::-webkit-scrollbar{ width:9px; }
[data-theme="dark"] .raven-im .raven-bl-body::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gild-mid),var(--gild-lo));
  border-radius:9px; border:2px solid transparent; background-clip:padding-box;
}
[data-theme="dark"] .raven-im .raven-bl-body{ scrollbar-color:var(--gild-mid) transparent; }

/* moonlit peek-tab when collapsed */
[data-theme="dark"] .raven-im.raven-floating.collapsed::before{
  background:linear-gradient(180deg,#1c2138,#0b0d14);
  border-right:1px solid var(--gild);
  font-family:var(--rim-display); letter-spacing:3px;
}

/* ============================================================
   ENTRANCE — ravens settling onto the perch (open only).
   Gated by .raven-just-opened so it never replays on the
   frequent background repaints of .raven-bl-body.
   ============================================================ */
.raven-im.raven-just-opened .raven-bl-group-items .raven-buddy,
.raven-im.raven-just-opened .raven-bl-group-online-now .raven-buddy{
  animation:perch-settle .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes perch-settle{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.raven-im.raven-just-opened .raven-buddy:nth-child(1){ animation-delay:.03s }
.raven-im.raven-just-opened .raven-buddy:nth-child(2){ animation-delay:.07s }
.raven-im.raven-just-opened .raven-buddy:nth-child(3){ animation-delay:.11s }
.raven-im.raven-just-opened .raven-buddy:nth-child(4){ animation-delay:.15s }
.raven-im.raven-just-opened .raven-buddy:nth-child(5){ animation-delay:.19s }
.raven-im.raven-just-opened .raven-buddy:nth-child(6){ animation-delay:.23s }
.raven-im.raven-just-opened .raven-buddy:nth-child(7){ animation-delay:.27s }
.raven-im.raven-just-opened .raven-buddy:nth-child(8){ animation-delay:.31s }
@media (prefers-reduced-motion: reduce){
  .raven-im.raven-just-opened .raven-buddy{ animation:none }
  [data-theme="dark"] .raven-im .raven-buddy[data-status="online"] .raven-buddy-status::after{ animation:none }
  [data-theme="dark"] .raven-im .rim-section-tidings .raven-tiding.has-unread:first-of-type::after{ animation:none }
}

/* ============================================================
   LIGHT — illuminated manuscript (parchment + gold leaf)
   ============================================================ */
[data-theme]:not([data-theme="dark"]) .raven-im{
  --rim-bg:#efe7d2; --rim-bg-alt:#e4d9bd;
  --rim-text:#241c10; --rim-text-dim:#6b6150; --rim-border:#c2a85f;
}
[data-theme]:not([data-theme="dark"]) .raven-im .raven-bl-title-head{ color:var(--gild-lo); }
[data-theme]:not([data-theme="dark"]) .raven-im .rim-section-label,
[data-theme]:not([data-theme="dark"]) .raven-im .raven-bl-group-header > span:not(.raven-bl-twist):not(.raven-bl-group-count){
  color:var(--gild-mid);
}
[data-theme]:not([data-theme="dark"]) .raven-im .raven-buddy[data-status="online"] .raven-buddy-status{
  color:#1f7a33; filter:drop-shadow(0 0 2px rgba(31,122,51,.4));
}