/* Wave 5a — chat presence strip + drawer. Uses existing Pulse tokens. */

/* ---- presence strip (header, top-right) ---- */
.chat-strip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  /* Wave 5b.7 — take the space the 7 avatars need instead of being clipped
     to a narrow flex share. Only scroll horizontally on very narrow screens. */
  max-width: 100%;
  flex: 0 1 auto;
  min-width: fit-content;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: flex-end;
}
.chat-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* Wave 7c.2 — the colored border IS the status indicator (no separate dot),
     matching the org modal. Transparent baseline so unknown state is neutral. */
  border: 3px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
  background: var(--bg-secondary, #eef2f7);
  color: var(--text-primary, #1f2937);
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform 0.1s ease;
}
.chat-avatar:hover { transform: translateY(-1px); }
.chat-avatar.status-green  { border-color: #10B981; box-shadow: 0 0 0 1px rgba(16,185,129,0.15); }
.chat-avatar.status-yellow { border-color: #F59E0B; box-shadow: 0 0 0 1px rgba(245,158,11,0.15); }
.chat-avatar.status-red    { border-color: #EF4444; box-shadow: 0 0 0 1px rgba(239,68,68,0.15); }

/* FW5 #3 (Wave 11a) — a cached DiceBear SVG fills the tile in place of the
   initials; the status ring + unread badge are untouched. Reused on every
   surface (presence tiles, chat list, activity, sidebar) via .avatar-svg.
   Animation: a subtle 3s idle bob + a quick hover bounce. */
.avatar-svg { display: block; width: 100%; height: 100%; border-radius: 50%;
              overflow: hidden; line-height: 0; }
.avatar-svg svg { display: block; width: 100%; height: 100%; }
.chat-avatar .avatar-svg { animation: pulse-avatar-bob 3s ease-in-out infinite; }
.chat-avatar:hover .avatar-svg { animation: pulse-avatar-bounce 0.55s ease; }
@keyframes pulse-avatar-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}
@keyframes pulse-avatar-bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-3px); }
  55%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-avatar .avatar-svg, .chat-avatar:hover .avatar-svg { animation: none; }
}

/* FW5.1 — your OWN tile opens the avatar builder. A subtle pencil hints at it
   on hover only, so the strip isn't cluttered at rest. */
.chat-avatar-mine::after {
  content: "\270E";                 /* ✎ */
  position: absolute;
  bottom: -3px; right: -3px;
  font-size: 0.55rem; line-height: 1;
  padding: 1px 2px;
  background: #1D4ED8; color: #fff;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.chat-avatar-mine:hover::after { opacity: 1; }
.chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* ---- Wave 7a — Recents mini-strip (rides alongside the roster strip) ---- */
.chat-strip-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.chat-recents-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.chat-recents-divider {
  width: 1px;
  height: 24px;
  background: var(--border-color, #d1d5db);
  margin: 0 0.15rem;
  flex: 0 0 auto;
}
.chat-recents-strip {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
  overflow-x: auto;
}
/* Smaller avatars (28px vs 32px). The colored status ring (from .chat-avatar
   .status-*) is the indicator now — Wave 7c.2 dropped the old blue glow. */
.chat-recent-avatar {
  width: 28px;
  height: 28px;
  font-size: 0.64rem;
}

/* Narrow collapse: hide the full mini-strip, show one chat-bubble + count. */
.chat-recents-collapsed {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--bg-secondary, #eef2f7);
  flex: 0 0 auto;
}
.chat-recents-bubble { font-size: 0.9rem; line-height: 1; }
@media (max-width: 1279px) {
  .chat-recents-strip { display: none; }
  .chat-recents-collapsed { display: inline-flex; }
}

/* #52 (Brandon) — restyle the top-right presence bubbles as small TILES that
   echo the Recents cards (rounded-rect + soft card shadow) instead of bare
   circles. The colored status ring (border-color, above) is preserved. Scoped
   to the header strip so drawer/message avatars stay round. */
/* FW7.1 — bigger HEADER tiles (Brandon). Header scope ONLY; chat/activity
   avatars keep their size. .chat-strip stays nowrap + overflow-x:auto (above),
   so this can never wrap or blow up the header height. */
.chat-strip-wrap .chat-avatar {
  border-radius: 14px;
  width: 54px;
  height: 54px;
  border-width: 4px;              /* status ring scaled proportionally */
  font-size: 1rem;                /* readable initials in the bigger tile */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  background: var(--bg-primary, #fff);
}
.chat-strip-wrap .chat-recent-avatar {
  width: 32px;
  height: 32px;
  border-width: 3px;
  font-size: 0.72rem;
}

/* FW7.1 — each tile becomes a column: avatar on top, a muted identity label
   under it (CJ: "I need to keep track of who's who"). */
.chat-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}
.chat-strip-label {
  font-size: 0.64rem;             /* ~10px */
  line-height: 1;
  color: var(--text-tertiary, #9ca3af);
  max-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* ---- drawer ---- */
.chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 92vw;
  height: 100vh;
  background: var(--bg-primary, #fff);
  border-left: 1px solid var(--border-color, #e5e7eb);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
  z-index: 1500;               /* above the sidebar */
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.18s ease;
}
.chat-drawer.open { transform: translateX(0); }
.chat-drawer-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.chat-drawer-header .name { font-weight: 700; }
.chat-drawer-close {
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--text-secondary, #6b7280);
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.chat-msg { max-width: 80%; }
.chat-msg .bubble {
  padding: 0.45rem 0.7rem;
  border-radius: 12px;
  font-size: 0.87rem;
  line-height: 1.4;
  word-wrap: break-word;
}
.chat-msg.mine { align-self: flex-end; }
.chat-msg.mine .bubble { background: #dbeafe; }
.chat-msg.theirs { align-self: flex-start; }
.chat-msg.theirs .bubble { background: var(--bg-secondary, #f3f4f6); }
.chat-msg .meta {
  font-size: 0.65rem;
  color: var(--text-tertiary, #9ca3af);
  margin-top: 0.15rem;
}
.chat-msg.nudge .bubble {
  background: #fef3c7;
  font-weight: 600;
  color: #78350f;
}
.chat-composer {
  border-top: 1px solid var(--border-color, #e5e7eb);
  padding: 0.6rem 0.75rem;
  position: relative;
}
.chat-anchor-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-secondary, #f3f4f6);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  margin-bottom: 0.4rem;
}
.chat-composer textarea {
  width: 100%;
  resize: none;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.87rem;
}
.chat-composer-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.chat-send-btn {
  background: #1d4ed8;
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 0.4rem 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.chat-nudge-btn {
  background: transparent;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 7px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}
.chat-mention-pop {
  position: absolute;
  bottom: 100%;
  left: 0.75rem;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  min-width: 220px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 60;
}
.chat-mention-pop .item {
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.chat-mention-pop .item:hover { background: var(--bg-secondary, #f3f4f6); }
.chat-mention-pop .kind {
  font-size: 0.65rem;
  color: var(--text-tertiary, #9ca3af);
  margin-left: 0.35rem;
}

/* mention links inside message bodies */
.mention { font-weight: 600; text-decoration: none; }
.mention-user { color: #1d4ed8; cursor: default; }
.mention-contact { color: #7c3aed; }
.mention-contact:hover { text-decoration: underline; }

/* ---- 2026-09-05 (CJ) — collapsible "tax preparers & reviewers" group -------
   The strip itself stays the short internal team. This group hangs off the end
   of it: a "+N" button that drops a panel with every preparer and reviewer, so
   they can be messaged instead of being invisible. Panel, not inline, so a
   dozen extra faces can't wreck the header on a narrow screen. */
.chat-more-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  flex: 0 0 auto;
}
.chat-more-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 38px;
  padding: 0 0.5rem;
  border-radius: 9999px;
  border: 1px solid var(--border-color, #d1d5db);
  background: var(--bg-secondary, #eef2f7);
  color: var(--text-secondary, #4b5563);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}
.chat-more-toggle:hover,
.chat-more-toggle.is-open {
  background: var(--bg-primary, #fff);
  border-color: var(--text-tertiary, #9ca3af);
  color: var(--text-primary, #1f2937);
}
.chat-more-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 1200;              /* above the sidebar, per the standing modal rule */
  width: min(420px, 92vw);
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.75rem;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}
.chat-more-title {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary, #9ca3af);
  margin-bottom: 0.55rem;
}
.chat-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 0.6rem 0.4rem;
}