/* ── Messages area ──────────────────────────────────────────────── */
#wpcc-messages {
  flex: 1; min-height: 0; padding: 8px 14px 14px;
  overflow-y: auto; display: flex; flex-direction: column;
  background: var(--ch-page);
  overflow-anchor: auto;
  scroll-behavior: smooth;
}

/* ── Bubble wraps ───────────────────────────────────────────────── */
.wpcc-bubble-wrap { display: flex; align-items: flex-end; margin-bottom: 8px; gap: 6px; }
.wpcc-bubble-wrap.me   { flex-direction: row-reverse; }
.wpcc-bubble-wrap.them { flex-direction: row; }
.wpcc-bubble-avatar-wrap { flex-shrink: 0; margin-bottom: 4px; }

/* ── Bubbles ────────────────────────────────────────────────────── */
.wpcc-bubble {
  max-width: 70%; padding: 10px 14px;
  border-radius: var(--ch-bubble);
  word-wrap: break-word; font-size: 15px; line-height: 1.5;
  position: relative; min-width: 60px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.wpcc-bubble.me   { background: var(--ch-primary); color: #fff; border-bottom-right-radius: 4px; }
.wpcc-bubble.them { background: var(--ch-card); color: var(--ch-text); border-bottom-left-radius: 4px; border: 1px solid var(--ch-border); }
.wpcc-ts          { display: block; font-size: 10px; opacity: .55; margin-top: 4px; text-align: right; }
.wpcc-bubble.them .wpcc-ts { text-align: left; }

/* ── Send-status timestamps ─────────────────────────────────────── */
.wpcc-ts-sending {
  display: block; font-size: 10px; margin-top: 4px; text-align: right;
  font-style: italic; color: var(--ch-muted);
  animation: wpcc-sending-pulse 1s ease-in-out infinite alternate;
}
@keyframes wpcc-sending-pulse { from { opacity:.35; } to { opacity:.75; } }
.wpcc-ts-sent {
  display: block; font-size: 10px; margin-top: 4px; text-align: right;
  color: var(--ch-primary); font-weight: 600;
  animation: wpcc-sent-fade 2s ease forwards;
}
@keyframes wpcc-sent-fade { 0% { opacity:1; } 55% { opacity:1; } 100% { opacity:0; } }
.wpcc-bubble.me .wpcc-ts-sending { color: rgba(255,255,255,.65); }
.wpcc-bubble.me .wpcc-ts-sent    { color: rgba(255,255,255,.95); }

/* ── Highlight animation ────────────────────────────────────────── */
@keyframes wpcc-hl-shadow {
  0%   { box-shadow: inset 0 0 0 400px rgba(255,220,0,.9); }
  70%  { box-shadow: inset 0 0 0 400px rgba(255,220,0,.8); }
  100% { box-shadow: inset 0 0 0 400px rgba(255,220,0,0);  }
}
.wpcc-bubble.wpcc-highlight { animation: wpcc-hl-shadow 2.5s ease forwards; }
.wpcc-bubble.wpcc-highlight,
.wpcc-bubble.wpcc-highlight .wpcc-sender-name,
.wpcc-bubble.wpcc-highlight .wpcc-ts,
.wpcc-bubble.wpcc-highlight .wpcc-reply-quote-name,
.wpcc-bubble.wpcc-highlight .wpcc-reply-quote-text { color: #111 !important; }

/* ── Reply quote ────────────────────────────────────────────────── */
.wpcc-reply-quote {
  background: rgba(0,0,0,.07); border-left: 3px solid rgba(0,0,0,.2);
  border-radius: 6px; padding: 6px 10px; margin-bottom: 7px;
  font-size: 12px; line-height: 1.4; transition: background .15s; cursor: pointer;
}
.wpcc-reply-quote:hover { background: rgba(0,0,0,.12); }
.wpcc-bubble.me .wpcc-reply-quote { background: rgba(255,255,255,.18); border-left-color: rgba(255,255,255,.5); }
.wpcc-bubble.me .wpcc-reply-quote:hover { background: rgba(255,255,255,.26); }
.wpcc-reply-quote-name { display: block; font-weight: 700; margin-bottom: 2px; font-size: 11px; }
.wpcc-reply-quote-text { opacity: .85; }

/* ── Bubble text + links ────────────────────────────────────────── */
.wpcc-bubble-text { display: block; margin-top: 3px; word-break: break-word; white-space: pre-wrap; }
.wpcc-msg-link    { color: var(--ch-primary); text-decoration: underline; word-break: break-all; }
.wpcc-bubble.me .wpcc-msg-link { color: rgba(255,255,255,.9); }

/* ── Context menu header row ────────────────────────────────────── */
.wpcc-bubble-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; min-height: 18px; }
.wpcc-sender-name { font-size: 12px; font-weight: 700; color: var(--ch-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 0; cursor: pointer; }
.wpcc-sender-name:hover { text-decoration: underline; }
.wpcc-bubble.me .wpcc-sender-name { color: rgba(255,255,255,.75); }
.wpcc-sender-name-spacer { flex: 1; }
.wpcc-ctx-arrow { flex-shrink: 0; width: 30px; height: 30px; background: rgba(0,0,0,.14); border: none; border-radius: 50%; font-size: 18px; line-height: 30px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 6; transition: background .12s; user-select: none; }
.wpcc-bubble.them .wpcc-ctx-arrow { background: rgba(0,0,0,.10); color: var(--ch-text); }
.wpcc-ctx-arrow:hover { background: rgba(0,0,0,.22); }
.wpcc-ctx-menu { position: absolute; top: 30px; right: 0; min-width: 152px; background: var(--ch-card); border: 1px solid var(--ch-border); border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.14); z-index: 200; overflow: hidden; display: none; flex-direction: column; }
.wpcc-ctx-menu.wpcc-ctx-open { display: flex; }
.wpcc-bubble.me   .wpcc-ctx-menu { right: 0; left: auto; }
.wpcc-bubble.them .wpcc-ctx-menu { left: 0; right: auto; }
.wpcc-ctx-item { display: block; width: 100%; box-sizing: border-box; background: none; border: none; border-bottom: 1px solid #f2f2f2; padding: 10px 16px; text-align: left; font-size: 13px; font-family: var(--ch-font); cursor: pointer; color: var(--ch-text); transition: background .1s; white-space: nowrap; }
.wpcc-ctx-item:last-child { border-bottom: none; }
.wpcc-ctx-item:hover { background: var(--ch-page); }
.wpcc-ctx-danger        { color: var(--ch-danger) !important; }
.wpcc-ctx-danger:hover  { background: #fff5f5 !important; }
.wpcc-ctx-success       { color: var(--ch-green) !important; }
.wpcc-ctx-success:hover { background: #f0fff4 !important; }
.wpcc-ctx-active-pin    { color: var(--ch-warn) !important; font-weight: 600; }
.wpcc-ctx-active-pin:hover { background: #fffbea !important; }

/* ── Soft-delete / tombstone ────────────────────────────────────── */
.wpcc-deleted-text  { display: block; font-style: italic; opacity: .55; font-size: 13px; }
.wpcc-bubble.wpcc-bubble-deleted { opacity: .75; }
.wpcc-deleted-inner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wpcc-inline-restore-btn {
  flex-shrink: 0; background: rgba(30,126,52,.12);
  border: 1px solid rgba(30,126,52,.35); border-radius: 20px;
  color: var(--ch-green); font-size: 11px; font-weight: 600;
  cursor: pointer; padding: 3px 10px; line-height: 1.4;
  transition: background .15s, border-color .15s;
  white-space: nowrap; font-family: var(--ch-font);
}
.wpcc-inline-restore-btn:hover { background: rgba(30,126,52,.22); border-color: rgba(30,126,52,.6); }
.wpcc-delete-btn  { background: none; border: none; cursor: pointer; font-size: 14px; color: var(--ch-faint); opacity: 0; transition: opacity .15s, color .15s; padding: 2px 3px; align-self: center; flex-shrink: 0; margin-bottom: 6px; line-height: 1; }
.wpcc-bubble-wrap:hover .wpcc-delete-btn { opacity: 1; }
.wpcc-delete-btn:hover { color: var(--ch-danger); }
.wpcc-restore-btn { background: none; border: none; cursor: pointer; font-size: 14px; color: var(--ch-faint); opacity: 0; transition: opacity .15s, color .15s; padding: 2px 3px; align-self: center; flex-shrink: 0; margin-bottom: 6px; line-height: 1; }
.wpcc-bubble-wrap:hover .wpcc-restore-btn { opacity: 1; }
.wpcc-restore-btn:hover { color: var(--ch-green2); }

/* ── Shimmer keyframe ───────────────────────────────────────────── */
@keyframes wpcc-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

/* ── Images ─────────────────────────────────────────────────────── */
/* ── Images — fixed-dimension thumbnail, cover-crop, shimmer skeleton ── */
.wpcc-img-wrap {
  display: block;
  line-height: 0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 2px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  /* Fixed container — same concept as .wpcc-video-wrap */
  width: 100%;
  max-width: min(320px, 65vw);
  height: 210px;                  /* consistent height across all images */
  position: relative;
  /* Shimmer skeleton while image loads */
  background: linear-gradient(90deg, #dce0ec 25%, #eaecf6 50%, #dce0ec 75%);
  background-size: 600px 100%;
  animation: wpcc-shimmer 1.6s ease-in-out infinite;
}
/* Kill skeleton once image is decoded */
.wpcc-img-wrap.wpcc-media-loaded {
  background: none;
  animation: none;
}
.wpcc-media-img {
  display: block;
  width: 100%;
  height: 100%;                   /* fill the fixed-height container */
  object-fit: cover;              /* crop to fill — no letterboxing */
  border-radius: 0;               /* border-radius comes from the wrap */
  opacity: 0;
  transition: opacity .25s ease;
}
.wpcc-media-img.wpcc-img-ready          { opacity: 1; }
.wpcc-img-wrap:hover .wpcc-media-img.wpcc-img-ready { opacity: .92; }
@media (max-width: 600px) {
  .wpcc-img-wrap { height: 180px; max-width: min(260px, 72vw); }
}
.wpcc-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; animation: wpcc-lb-in .15s ease; }
@keyframes wpcc-lb-in { from { opacity:0; } to { opacity:1; } }
.wpcc-lb-content { position: relative; max-width: 92vw; max-height: 92vh; }
.wpcc-lb-img     { display: block; max-width: 100%; max-height: 88vh; border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,.6); object-fit: contain; }
.wpcc-lb-close   { position: absolute; top: -14px; right: -14px; width: 32px; height: 32px; background: rgba(255,255,255,.18); border: none; border-radius: 50%; color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.wpcc-lb-close:hover { background: rgba(255,255,255,.35); }
/* legacy alias */
.wpcc-lightbox-inner { position: relative; max-width: 92vw; max-height: 92vh; }
.wpcc-lightbox-img   { display: block; max-width: 100%; max-height: 88vh; border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,.6); object-fit: contain; }
.wpcc-lightbox-close { position: absolute; top: -14px; right: -14px; width: 32px; height: 32px; background: rgba(255,255,255,.18); border: none; border-radius: 50%; color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.wpcc-lightbox-close:hover { background: rgba(255,255,255,.35); }

/* ── Videos ─────────────────────────────────────────────────────── */
.wpcc-video-wrap {
  position: relative; width: 100%;
  max-width: min(480px, 75vw); aspect-ratio: 16 / 9;
  height: 200px; max-height: min(400px, 55vh);
  border-radius: 12px; overflow: hidden; margin-bottom: 2px;
  box-shadow: 0 2px 10px rgba(0,0,0,.22); background: #0d0d1a; line-height: 0;
}
.wpcc-video-skel {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(90deg, #1a1a2e 25%, #2d2d50 50%, #1a1a2e 75%);
  background-size: 600px 100%; animation: wpcc-shimmer 1.6s ease-in-out infinite;
  border-radius: 12px; pointer-events: none;
  opacity: 1; transition: opacity .4s ease;
}
.wpcc-video-skel-icon { width: 52px; height: 52px; background: rgba(255,255,255,.13); border: 2px solid rgba(255,255,255,.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: wpcc-skel-pulse 1.8s ease-in-out infinite; flex-shrink: 0; }
.wpcc-video-skel-icon svg { width: 22px; height: 22px; fill: rgba(255,255,255,.70); margin-left: 3px; }
.wpcc-video-skel-label { font-size: 11px; color: rgba(255,255,255,.45); letter-spacing: .03em; user-select: none; }
.wpcc-video-skel-error { font-size: 12px; color: rgba(255,255,255,.60); text-align: center; padding: 0 20px; line-height: 1.6; }
@keyframes wpcc-skel-pulse { 0%, 100% { opacity:.55; transform:scale(1); } 50% { opacity:1; transform:scale(1.07); } }
.wpcc-video-wrap.wpcc-media-loaded .wpcc-video-skel { opacity: 0; pointer-events: none; animation: none; }
.wpcc-video-wrap.wpcc-media-loaded .wpcc-video-skel:not(.wpcc-skel-error) { display: none; }
.wpcc-media-video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 0; outline: none; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.wpcc-video-wrap.wpcc-media-loaded .wpcc-media-video { opacity: 1; pointer-events: auto; }

/* ── Custom audio player ────────────────────────────────────────── */
.wpcc-audio-player {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 20px;
  width: 100%; max-width: 280px; box-sizing: border-box;
  margin-bottom: 2px; user-select: none;
}
.wpcc-audio-player.me   { background: rgba(255,255,255,.15); }
.wpcc-audio-player.them { background: rgba(0,0,0,.06); }
.wpcc-ap-btn { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .1s; padding: 0; }
.wpcc-audio-player.me   .wpcc-ap-btn { background: rgba(255,255,255,.30); color: #fff; }
.wpcc-audio-player.them .wpcc-ap-btn { background: var(--ch-primary); color: #fff; }
.wpcc-ap-btn:hover  { filter: brightness(1.12); }
.wpcc-ap-btn:active { transform: scale(.92); }
.wpcc-ap-btn svg    { width: 20px; height: 20px; display: block; }
.wpcc-ap-body       { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wpcc-ap-progress-wrap  { position: relative; }
.wpcc-ap-waveform   { display: flex; align-items: flex-end; gap: 2px; height: 20px; margin-bottom: 3px; }
.wpcc-ap-bar        { flex: 1; min-width: 2px; border-radius: 2px; transition: background .12s; }
.wpcc-audio-player.me   .wpcc-ap-bar              { background: rgba(255,255,255,.35); }
.wpcc-audio-player.them .wpcc-ap-bar              { background: rgba(0,0,0,.20); }
.wpcc-audio-player.me   .wpcc-ap-bar.wpcc-ap-bar-filled { background: rgba(255,255,255,.90); }
.wpcc-audio-player.them .wpcc-ap-bar.wpcc-ap-bar-filled { background: var(--ch-primary); }
.wpcc-ap-progress-bg  { position: relative; height: 3px; border-radius: 3px; overflow: visible; }
.wpcc-audio-player.me   .wpcc-ap-progress-bg { background: rgba(255,255,255,.25); }
.wpcc-audio-player.them .wpcc-ap-progress-bg { background: rgba(0,0,0,.15); }
.wpcc-ap-progress-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 3px; width: 0%; pointer-events: none; transition: width .1s linear; }
.wpcc-audio-player.me   .wpcc-ap-progress-fill { background: rgba(255,255,255,.85); }
.wpcc-audio-player.them .wpcc-ap-progress-fill { background: var(--ch-primary); }
.wpcc-ap-seek  { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 14px; opacity: 0; cursor: pointer; margin: 0; padding: 0; }
.wpcc-ap-time  { font-size: 10px; display: flex; gap: 2px; }
.wpcc-audio-player.me   .wpcc-ap-time { color: rgba(255,255,255,.75); }
.wpcc-audio-player.them .wpcc-ap-time { color: rgba(0,0,0,.50); }
.wpcc-ap-voice-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; border-radius: 6px; padding: 2px 6px;
  margin-bottom: 4px; width: fit-content; opacity: .82;
}
.wpcc-audio-player.me   .wpcc-ap-voice-tag { background: rgba(255,255,255,.20); color: rgba(255,255,255,.90); }
.wpcc-audio-player.them .wpcc-ap-voice-tag { background: rgba(79,70,229,.12); color: var(--ch-primary-dk); }
/* Audio player loading state */
.wpcc-audio-player.wpcc-ap-loading .wpcc-ap-btn { opacity: 0.4; pointer-events: none; }
.wpcc-audio-player.wpcc-ap-loading .wpcc-ap-dur { opacity: 0; position: relative; }
.wpcc-audio-player.wpcc-ap-loading .wpcc-ap-dur::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 9px; height: 9px; border: 1.5px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: wpcc-spin .65s linear infinite; opacity: 0.55;
}

/* ── Schedule card ──────────────────────────────────────────────── */
/* Forwarded-from label — sits above the bubble content */
.wpcc-fwd-label {
  font-size: 11px; font-weight: 600; color: var(--ch-muted);
  opacity: .8; margin-bottom: 5px; display: flex; align-items: center; gap: 3px;
}
.wpcc-bubble.me .wpcc-fwd-label { color: rgba(255,255,255,.75); }
.wpcc-cs-schedule-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; border-radius: 6px; padding: 2px 6px;
  margin-bottom: 4px; width: fit-content; opacity: .85;
  background: rgba(79,70,229,.13); color: #4338ca;
}
.wpcc-bubble.me .wpcc-cs-schedule-tag { background: rgba(255,255,255,.22); color: rgba(255,255,255,.92); }

/* Live calendar icon — same design as the Schedules hub tab icon */
.wpcc-cs-live-cal {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 7px;
  background: #fff; border: 1.5px solid #dde1ec;
  overflow: hidden; line-height: 1; flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.13);
}
.wpcc-cs-live-cal-month {
  display: block; width: 100%;
  background: #dc3545; color: #fff;
  font-size: 7px; font-weight: 800; letter-spacing: .04em;
  text-align: center; padding: 2px 0 1px; line-height: 1;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  text-transform: uppercase;
}
.wpcc-cs-live-cal-day {
  display: block; font-size: 15px; font-weight: 800;
  color: #1a1a2e; text-align: center;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  line-height: 1; padding: 1px 0 2px;
}
/* In "me" (sent) bubbles — keep the calendar readable on the purple background */
.wpcc-bubble.me .wpcc-cs-live-cal {
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.5);
}
.wpcc-bubble.me .wpcc-cs-live-cal-day { color: #1a1a2e; }

/* ── Document pill ──────────────────────────────────────────────── */
.wpcc-doc-pill { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; max-width: 100%; box-sizing: border-box; margin-bottom: 2px; }
.wpcc-doc-pill-body { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: inherit; cursor: pointer; }
.wpcc-doc-pill-body:hover .wpcc-doc-name { text-decoration: underline; }
.wpcc-doc-pill.me   { background: rgba(255,255,255,.18); }
.wpcc-doc-pill.them { background: rgba(0,0,0,.06); }
.wpcc-doc-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; letter-spacing: -.3px; color: #fff; }
.wpcc-doc-icon-pdf     { background: #e5534b; }
.wpcc-doc-icon-generic { background: var(--ch-primary); }
.wpcc-doc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wpcc-doc-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpcc-doc-meta { font-size: 10px; opacity: .6; }
.wpcc-doc-pill.me   .wpcc-doc-name, .wpcc-doc-pill.me   .wpcc-doc-meta { color: #fff; }
.wpcc-doc-pill.them .wpcc-doc-name { color: var(--ch-text); }
.wpcc-doc-pill.them .wpcc-doc-meta { color: var(--ch-muted); }
.wpcc-doc-dl { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background .15s; }
.wpcc-doc-dl svg { width: 18px; height: 18px; display: block; }
.wpcc-doc-pill.me   .wpcc-doc-dl { color: #fff; background: rgba(255,255,255,.20); }
.wpcc-doc-pill.them .wpcc-doc-dl { color: var(--ch-primary); background: rgba(79,70,229,.10); }
.wpcc-doc-dl:hover { filter: brightness(1.15); }

/* ── Reactions ──────────────────────────────────────────────────── */
.wpcc-reaction-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: -3px; margin-bottom: 6px; position: relative; padding: 0 6px; }
.wpcc-reaction-bar.me   { justify-content: flex-end; }
.wpcc-reaction-bar.them { justify-content: flex-start; padding-left: 38px; }
.wpcc-reaction-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 10px 3px 7px; border-radius: 14px;
  border: 1.5px solid var(--ch-border); background: var(--ch-card);
  font-size: 15px; cursor: pointer; line-height: 1; min-height: 30px;
  transition: border-color .15s, background .15s; -webkit-tap-highlight-color: transparent;
}
.wpcc-reaction-chip:hover, .wpcc-reaction-chip:active { background: #eef2ff; border-color: var(--ch-primary); }
.wpcc-reaction-chip.wpcc-reaction-mine { background: #eef2ff; border-color: var(--ch-primary); }
.wpcc-reaction-count { font-size: 12px; font-weight: 700; color: var(--ch-muted); min-width: 12px; text-align: center; }
.wpcc-reaction-chip.wpcc-reaction-mine .wpcc-reaction-count { color: var(--ch-primary); }
.wpcc-react-open-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 30px; border-radius: 15px;
  border: 1.5px solid var(--ch-border); background: var(--ch-card);
  font-size: 16px; cursor: pointer; opacity: .5;
  transition: opacity .15s, border-color .15s, background .15s;
  line-height: 1; padding: 0; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.wpcc-react-open-btn:hover, .wpcc-react-open-btn:active { opacity: 1; border-color: #999; background: #ebebeb; }
.wpcc-reaction-picker {
  display: flex; flex-direction: row; align-items: center;
  gap: 0; padding: 4px 6px;
  background: var(--ch-card); border: 1px solid var(--ch-border);
  border-radius: 28px; box-shadow: 0 4px 16px rgba(0,0,0,.14);
  position: absolute; bottom: calc(100% + 6px); z-index: 200;
  white-space: nowrap;
  overflow-x: auto; overflow-y: hidden;
  max-width: min(400px, 96vw);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wpcc-reaction-picker::-webkit-scrollbar { display: none; }
.wpcc-reaction-bar.them .wpcc-reaction-picker { left: 38px; right: auto; }
.wpcc-reaction-bar.me   .wpcc-reaction-picker { right: 6px; left: auto; }
.wpcc-react-pick-btn {
  font-size: 22px; border: none; background: none; cursor: pointer;
  padding: 5px 4px; border-radius: 8px; line-height: 1;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .1s ease, background .1s; -webkit-tap-highlight-color: transparent;
}
.wpcc-react-pick-btn:hover  { background: var(--ch-page); transform: scale(1.22); }
.wpcc-react-pick-btn:active { transform: scale(.92); }
@media (max-width: 400px) {
  .wpcc-reaction-picker { padding: 4px 4px; }
  .wpcc-react-pick-btn  { font-size: 19px; padding: 4px 3px; }
}

/* ── Pinned banner ──────────────────────────────────────────────── */
.wpcc-pin-btn { background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 4px; color: var(--ch-faint); opacity: 0; transition: opacity .15s, color .15s, background .12s; vertical-align: middle; line-height: 1; flex-shrink: 0; }
.wpcc-bubble-wrap:hover .wpcc-pin-btn { opacity: 1; }
.wpcc-pin-btn.wpcc-pin-btn-active { color: var(--ch-warn); opacity: 1; }
.wpcc-pin-btn:hover { color: var(--ch-warn); background: rgba(245,158,11,.08); }
.wpcc-pinned-banner { display: flex; align-items: center; gap: 6px; padding: 7px 14px; background: #fffbea; border-left: 3px solid var(--ch-warn); border-bottom: 1px solid #f0e0a0; cursor: pointer; font-size: 12px; color: var(--ch-muted); border-radius: 0 4px 4px 0; transition: background .15s, box-shadow .15s; user-select: none; outline: none; }
.wpcc-pinned-banner:hover, .wpcc-pinned-banner:focus-visible { background: #fff3cc; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.wpcc-pinned-banner-sticky { border-radius: 0; border-left-width: 4px; box-shadow: 0 2px 4px rgba(0,0,0,.07); margin: 0; }
.wpcc-pin-icon       { font-size: 14px; flex-shrink: 0; }
.wpcc-pinned-label   { font-weight: 700; color: #b07a00; white-space: nowrap; flex-shrink: 0; }
.wpcc-pinned-sep     { color: var(--ch-faint); flex-shrink: 0; }
.wpcc-pinned-text    { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ch-muted); }
.wpcc-pinned-view-btn { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--ch-warn); letter-spacing: .3px; white-space: nowrap; padding: 1px 5px 1px 3px; border-radius: 3px; background: rgba(245,158,11,.1); transition: background .12s; }
.wpcc-pinned-banner:hover .wpcc-pinned-view-btn, .wpcc-pinned-banner:focus-visible .wpcc-pinned-view-btn { background: rgba(245,158,11,.22); }

/* ── Day separators ─────────────────────────────────────────────── */
#wpcc-load-more-sentinel {
  width: 100%; min-height: 1px; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
#wpcc-load-more-sentinel > div {
  background: var(--ch-page); border: 1px solid var(--ch-border); border-radius: 20px;
  padding: 5px 16px; font-size: 11px; color: var(--ch-muted); font-weight: 500;
  box-shadow: 0 1px 4px rgba(0,0,0,.08); margin: 10px 0 4px; position: relative; z-index: 2;
}
.wpcc-day-separator { display: flex; align-items: center; justify-content: center; margin: 14px 0 10px; position: relative; flex-shrink: 0; }
.wpcc-day-separator::before, .wpcc-day-separator::after { content: ''; flex: 1; height: 1px; background: var(--ch-border); margin: 0 10px; }
.wpcc-day-sep-label { display: inline-block; background: var(--ch-border); color: var(--ch-muted); font-size: 11px; font-weight: 600; letter-spacing: .4px; padding: 3px 12px; border-radius: 10px; white-space: nowrap; user-select: none; -webkit-user-select: none; }

/* ── Scroll anchor ──────────────────────────────────────────────── */
#wpcc-scroll-anchor { height: 0; flex-shrink: 0; overflow-anchor: auto; }

/* ── System notice ──────────────────────────────────────────────── */
.wpcc-system-notice { text-align: center; margin: 8px 0; padding: 0 14px; pointer-events: none; user-select: none; }
.wpcc-system-notice span { display: inline-block; background: var(--ch-border); color: var(--ch-muted); font-size: 11.5px; font-style: italic; border-radius: 12px; padding: 4px 14px; line-height: 1.5; letter-spacing: .1px; }

/* ── Reply button ───────────────────────────────────────────────── */
.wpcc-reply-btn { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--ch-faint); opacity: 0; transition: opacity .15s, color .15s; padding: 2px 3px; align-self: center; flex-shrink: 0; margin-bottom: 6px; }
.wpcc-bubble-wrap:hover .wpcc-reply-btn { opacity: 1; }
.wpcc-reply-btn:hover { color: var(--ch-primary); }

/* ── Notices ────────────────────────────────────────────────────── */
.wpcc-removed-notice { padding: 20px; text-align: center; color: var(--ch-danger); font-size: 13px; background: #fff5f5; border-radius: 10px; margin: 15px; border: 1px solid #f5c6cb; line-height: 1.6; }
.wpcc-blocked-notice { padding: 15px; margin: 10px 15px; text-align: center; color: #856404; background: #fff3cd; border: 1px solid var(--ch-warn); border-radius: 10px; font-size: 13px; }
.wpcc-msg-disabled-notice { text-align: center; padding: 10px 16px; margin: 8px; background: #fff3cd; border: 1px solid var(--ch-warn); border-radius: 8px; font-size: 12px; color: #856404; }
.wpcc-msg-enabled-notice  { text-align: center; padding: 10px 16px; margin: 8px; background: #d4edda; border: 1px solid var(--ch-green2); border-radius: 8px; font-size: 12px; color: #155724; animation: wpcc-fade-in .35s ease; }
@keyframes wpcc-fade-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* ── Unread envelope (legacy) ───────────────────────────────────── */
.wpcc-unread-env { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1; flex-shrink: 0; margin-left: 4px; }
.wpcc-unread-env-closed { min-width: 17px; height: 17px; padding: 0 4px; background: var(--ch-danger); color: #fff; border-radius: 9px; box-sizing: border-box; }
.wpcc-unread-env-opened::before { content:'✅'; font-size:13px; animation: wpcc-env-fadeout 1.8s ease forwards; }
@keyframes wpcc-env-fadeout { 0%{opacity:1;} 55%{opacity:1;} 100%{opacity:0;} }

/* ── New-message bubble ─────────────────────────────────────────── */
.wpcc-new-msg-bubble {
  position: absolute; top: 50% !important; left: 50% !important; bottom: auto !important;
  transform: translate(-50%,-50%) !important; z-index: 99999 !important;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ch-primary); color: #fff;
  font-size: 13px; font-weight: 600; padding: 7px 18px; border-radius: 20px;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.22);
  animation: wpcc-nmb-in .2s ease;
  user-select: none; white-space: nowrap; pointer-events: all; -webkit-tap-highlight-color: transparent;
}
.wpcc-new-msg-bubble:hover  { background: var(--ch-primary-dk); }
.wpcc-new-msg-bubble:active { transform: translate(-50%,-50%) scale(.97) !important; }
@keyframes wpcc-nmb-in { from { opacity:0; transform:translate(-50%,-50%) translateY(8px) scale(.94); } to { opacity:1; transform:translate(-50%,-50%) translateY(0) scale(1); } }

/* ── Chat-switch spinner ────────────────────────────────────────── */
.wpcc-chat-switch-spinner {
  position: absolute; inset: 0; z-index: 50;
  background: var(--ch-card); display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.wpcc-spin-ring {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2.5px solid var(--ch-border); border-top-color: var(--ch-primary);
  animation: wpcc-spin .65s linear infinite;
}
@keyframes wpcc-spin { to { transform: rotate(360deg); } }

/* ── @Mention chips ─────────────────────────────────────────────────── */
/* Group mention — highlight chip (like WhatsApp @you tint) */
.wpcc-mention {
  display: inline-block;
  background: rgba(79,70,229,.13);
  color: #4338ca;
  border-radius: 5px;
  padding: 0 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background .13s;
  white-space: nowrap;
}
.wpcc-mention:hover { background: rgba(79,70,229,.22); }
/* Sent bubble */
.wpcc-bubble.me .wpcc-mention { background: rgba(255,255,255,.28); color: #fff; }
.wpcc-bubble.me .wpcc-mention:hover { background: rgba(255,255,255,.40); }
/* Self mention — warm amber highlight */
.wpcc-mention.wpcc-mention-self {
  background: rgba(234,179,8,.22);
  color: #92400e;
  cursor: default;
}
.wpcc-bubble.me .wpcc-mention.wpcc-mention-self { background: rgba(255,255,255,.32); color: rgba(255,255,255,.9); }

/* DM mention — contact chip with "Chat" CTA */
.wpcc-mention.wpcc-mention-dm {
  background: rgba(79,70,229,.10);
  color: #4338ca;
  border: 1px solid rgba(79,70,229,.25);
  border-radius: 8px;
  padding: 1px 7px 1px 5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.wpcc-mention.wpcc-mention-dm:hover { background: rgba(79,70,229,.20); }
.wpcc-mention-cta {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  background: #4f46e5; color: #fff;
  border-radius: 4px; padding: 1px 5px;
  margin-left: 2px; letter-spacing: .02em;
  pointer-events: none;
}
.wpcc-bubble.me .wpcc-mention.wpcc-mention-dm { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.4); }
.wpcc-bubble.me .wpcc-mention-cta { background: rgba(255,255,255,.35); color: #fff; }
/* Bubble tint when someone mentions the current user */
.wpcc-bubble-wrap.wpcc-mentioned .wpcc-bubble.them {
  background: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
  border-left: 3px solid #f59e0b;
}

/* ── Image download overlay button ──────────────────────────────── */
.wpcc-img-wrap { position: relative; display: inline-block; }
.wpcc-img-dl-btn {
  position: absolute; bottom: 6px; right: 6px;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  opacity: 0; transition: opacity .15s;
  text-decoration: none;
}
.wpcc-img-wrap:hover .wpcc-img-dl-btn { opacity: 1; }
.wpcc-img-dl-btn:hover { background: rgba(0,0,0,.8); }

/* ── Top Rank badges ─────────────────────────────────────────────── */
/* Shown next to sender name in bubbles and in the user info panel.
   Never shown in sidebar or group member lists (controlled by showRank flag).
   Dark, saturated backgrounds ensure visibility on white, grey, and purple bubbles. */
.wpcc-rank-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 2px 6px; border-radius: 10px;
  margin-left: 4px; vertical-align: middle;
  white-space: nowrap; letter-spacing: .02em;
}
/* Top #1 — deep gold */
.wpcc-rank-tag-1  { background: #b45309; color: #fff; }
/* Top 3  — amber-800 */
.wpcc-rank-tag-3  { background: #92400e; color: #fef3c7; }
/* Top 5  — slate-700 (silver feel, clear on white) */
.wpcc-rank-tag-5  { background: #374151; color: #f9fafb; }
/* Top 10 — burnt orange */
.wpcc-rank-tag-10 { background: #c2410c; color: #fff; }
/* Top 20 — emerald-700 */
.wpcc-rank-tag-20 { background: #047857; color: #ecfdf5; }
/* On sent (indigo/purple) bubbles — lighten so it still pops */
.wpcc-bubble.me .wpcc-rank-tag-1  { background: #fcd34d; color: #78350f; }
.wpcc-bubble.me .wpcc-rank-tag-3  { background: #fde68a; color: #78350f; }
.wpcc-bubble.me .wpcc-rank-tag-5  { background: #e2e8f0; color: #1e293b; }
.wpcc-bubble.me .wpcc-rank-tag-10 { background: #fed7aa; color: #7c2d12; }
.wpcc-bubble.me .wpcc-rank-tag-20 { background: #a7f3d0; color: #064e3b; }