/* VYSHKA Messenger · graphics polish (2026-07-31)
 * Cobalt #1d4ed8 · no purple · empty states · bubbles · avatars · icons
 */
:root {
  --vy-cobalt: #1d4ed8;
  --vy-cobalt-soft: rgba(29, 78, 216, 0.12);
}

/* Empty states — cobalt soft mark, not gray slab */
body[data-page="messenger"] .empty-state .es-ic,
body[data-page="messenger"] .cl-scroll .vp-empty .vp-ic,
body[data-page="messenger"] .dm-empty-act {
  color: var(--vy-cobalt);
}
body[data-page="messenger"] .empty-state .es-ic,
body[data-page="messenger"] .cl-scroll .vp-empty .vp-ic {
  background: var(--vy-cobalt-soft) !important;
  border-color: rgba(29, 78, 216, 0.18) !important;
}
body[data-page="messenger"] .dm-empty::before,
body[data-page="messenger"] .vd-dm-empty::before {
  background-color: var(--vy-cobalt) !important;
  opacity: 0.55 !important;
}
body[data-page="messenger"] .cl-scroll .vp-empty .vp-ic::before {
  background-color: var(--vy-cobalt) !important;
}
body[data-page="messenger"] .vyfx-empty svg {
  color: var(--vy-cobalt);
  opacity: 0.55;
}
body[data-page="messenger"] .dm-empty-act {
  margin-top: 10px;
  border: 1px solid rgba(29, 78, 216, 0.22);
  background: var(--vy-cobalt-soft);
  color: var(--vy-cobalt);
  border-radius: 10px;
  padding: 8px 14px;
  font: 600 13px/1.2 inherit;
  cursor: pointer;
}
body[data-page="messenger"] .dm-empty-act:hover {
  background: #1d4ed8;
  color: #fff;
  border-color: transparent;
}

/* Message bubbles — solid cobalt for own; soft panel for peer */
body[data-page="messenger"] .msg.me .bubble,
body[data-page="messenger"] .vd-msg.vd-me .vd-bub,
body[data-page="messenger"] .tg-msg.me .tg-bub {
  background: #1d4ed8 !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #fff !important;
}
body[data-page="messenger"] .vd-msg:not(.vd-me) .vd-bub,
body[data-page="messenger"] .tg-msg:not(.me) .tg-bub,
body[data-page="messenger"] .msg:not(.me) .bubble {
  border-radius: 4px 14px 14px 14px;
}

/* Avatars — cobalt fallback + cover photo */
body[data-page="messenger"] .vd-av,
body[data-page="messenger"] .tg-av,
body[data-page="messenger"] .av,
body[data-page="messenger"] .chat-avatar,
body[data-page="messenger"] .conv .av {
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
body[data-page="messenger"] .vd-av:not([style*="background-image"]),
body[data-page="messenger"] .av:not([style*="background-image"]),
body[data-page="messenger"] .conv .av:not([style*="background-image"]) {
  background-image: linear-gradient(135deg, #1d4ed8, #0ea5e9);
  color: #fff;
}
body[data-page="messenger"] .vd-av img,
body[data-page="messenger"] .tg-av img,
body[data-page="messenger"] .av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Icons — stroke inheritance lock (broken empty SVG shells) */
body[data-page="messenger"] svg.ic {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
body[data-page="messenger"] svg.ic.fill {
  fill: currentColor;
  stroke: none;
}

/* Kill residual purple-ish AI chrome */
body[data-page="messenger"] .ritem[style*="var(--ai)"],
body[data-page="messenger"] .ritem[style*="--ai"] {
  color: #1d4ed8 !important;
}