/* ============================================================
   DESIGN TOKENS
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   MESSAGES/CHAT — Unified Token Remapping
   All --messages-* vars now point to global tokens
   ═══════════════════════════════════════════════════════════ */

:root {
  --brand-color:         #16A34A;
  --brand-hover:         #15803d;
  --app-outer-bg:        #e5e7eb;
  --app-bg:              #ffffff;
  --app-text:            #111827;
  --app-text-dim:        #6b7280;
  --input-bg:            #f4f5f7;
  --input-border:        #e5e7eb;
  --input-border-focus:  #16A34A;
  --input-text:          #1f2937;
  --input-icon:          #9ca3af;
  --error:               #ef4444;
  --error-bg:            #fef2f2;
  --success:             #16A34A;
  --success-bg:          #f0fdf4;
  --safe-top:            env(safe-area-inset-top, 0px);
  --safe-bottom:         env(safe-area-inset-bottom, 0px);

  /* ── Messages-scoped aliases → global ── */
  --messages-brand-50:  var(--success-bg);
  --messages-brand-100: rgba(22,163,74,0.12);
  --messages-brand-200: rgba(22,163,74,0.20);
  --messages-brand-300: rgba(22,163,74,0.35);
  --messages-brand-400: var(--brand-color);
  --messages-brand-500: var(--brand-color);
  --messages-brand-600: var(--brand-hover);
  --messages-brand-700: #1a4d30;
  --messages-brand-800: #133b24;
  --messages-brand-900: #0d2d1b;
  --messages-brand-glow-xs: rgba(22,163,74,0.07);
  --messages-brand-glow-sm: rgba(22,163,74,0.12);
  --messages-brand-glow-md: rgba(22,163,74,0.20);
  --messages-brand-glow-lg: rgba(22,163,74,0.35);
  --messages-gold-400: #c9963a;
  --messages-gold-500: #b8841f;
  --messages-gold-glow: rgba(185,132,31,0.18);
  --messages-surface-ground: var(--app-outer-bg);
  --messages-surface-base:   var(--app-bg);
  --messages-surface-raised: var(--app-bg);
  --messages-surface-input:  var(--input-bg);
  --messages-surface-dim:    var(--input-bg);
  --messages-surface-glass:  rgba(255,255,255,0.90);
  --messages-wallpaper-bg:  #ede9e3;
  --messages-wallpaper-dot: rgba(22,163,74,0.06);
  --messages-text-primary:     var(--app-text);
  --messages-text-secondary:   #3d3730;
  --messages-text-muted:       var(--app-text-dim);
  --messages-text-placeholder: var(--input-icon);
  --messages-text-inverse:     #ffffff;
  --messages-text-brand:       var(--brand-hover);
  --messages-border-faint:   rgba(0,0,0,0.04);
  --messages-border-subtle:  rgba(0,0,0,0.08);
  --messages-border-default: rgba(22,163,74,0.16);
  --messages-border-brand:   rgba(22,163,74,0.28);
  --messages-border-input:   rgba(0,0,0,0.10);
  --messages-sent-bg:       var(--success-bg);
  --messages-sent-bg-hover: #dbf3e4;
  --messages-sent-text:     var(--app-text);
  --messages-sent-meta:     rgba(26,23,20,0.48);
  --messages-sent-shadow:   0 1px 3px rgba(0,0,0,0.10), 0 3px 14px rgba(22,163,74,0.08);
  --messages-recv-bg:      var(--app-bg);
  --messages-recv-text:    var(--app-text);
  --messages-recv-meta:    var(--app-text-dim);
  --messages-recv-border:  rgba(0,0,0,0.07);
  --messages-recv-shadow:  0 1px 3px rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.04);
  --messages-header-bg:     rgba(255,255,255,0.96);
  --messages-header-border: rgba(0,0,0,0.07);
  --messages-header-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 3px 20px rgba(0,0,0,0.04);
  --messages-bar-bg:     rgba(255,255,255,0.98);
  --messages-bar-border: rgba(0,0,0,0.07);
  --messages-chip-bg:     rgba(255,255,255,0.80);
  --messages-chip-text:   var(--app-text-dim);
  --messages-chip-shadow: 0 1px 8px rgba(0,0,0,0.07);
  --messages-shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --messages-shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
  --messages-shadow-md: 0 4px 18px rgba(0,0,0,0.09);
  --messages-shadow-lg: 0 10px 38px rgba(0,0,0,0.11);
  --messages-shadow-xl: 0 20px 64px rgba(0,0,0,0.14);
  --messages-shadow-brand: 0 8px 24px rgba(22,163,74,0.25);
  --messages-ease-snap:   cubic-bezier(0.32,0.72,0,1);
  --messages-ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
  --messages-ease-out:    cubic-bezier(0.16,1,0.3,1);
  --messages-ease-in:     cubic-bezier(0.4,0,1,1);
  --messages-dur-xs: 90ms;
  --messages-dur-sm: 150ms;
  --messages-dur-md: 240ms;
  --messages-dur-lg: 360ms;
  --messages-r-xs:     4px;
  --messages-r-sm:     8px;
  --messages-r-md:     14px;
  --messages-r-lg:     20px;
  --messages-r-xl:     26px;
  --messages-r-pill:   999px;
  --messages-r-bubble: 18px;
  --messages-img-w:         240px;
  --messages-img-h:         240px;
  --messages-img-preview-h: 160px;
  --messages-header-h: 64px;
  --messages-bar-h:    72px;
}

/* ── Dark Mode (auto) ── */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-color:         #25d366;
    --brand-hover:         #1fad54;
    --app-outer-bg:        #0b0e11;
    --app-bg:              #111b21;
    --app-text:            #e9edef;
    --app-text-dim:        #8696a0;
    --input-bg:            #1f2c34;
    --input-border:        #2a3942;
    --input-border-focus:  #25d366;
    --input-text:          #e9edef;
    --input-icon:          #8696a0;
    --error:               #f87171;
    --error-bg:            rgba(248,113,113,0.12);
    --success:             #25d366;
    --success-bg:          rgba(37,211,102,0.12);

    --messages-brand-400: var(--brand-color);
    --messages-brand-500: var(--brand-color);
    --messages-brand-600: var(--brand-hover);
    --messages-brand-glow-xs: rgba(37,211,102,0.07);
    --messages-brand-glow-sm: rgba(37,211,102,0.12);
    --messages-brand-glow-md: rgba(37,211,102,0.20);
    --messages-brand-glow-lg: rgba(37,211,102,0.34);
    --messages-surface-ground: var(--app-outer-bg);
    --messages-surface-base:   var(--app-bg);
    --messages-surface-raised: var(--app-bg);
    --messages-surface-input:  var(--input-bg);
    --messages-surface-dim:    var(--input-bg);
    --messages-surface-glass:  rgba(17,27,33,0.90);
    --messages-wallpaper-bg:   #0b0e11;
    --messages-wallpaper-dot:  rgba(37,211,102,0.04);
    --messages-text-primary:     var(--app-text);
    --messages-text-secondary:   #c0c4ce;
    --messages-text-muted:       var(--app-text-dim);
    --messages-text-placeholder: #5b616e;
    --messages-text-brand:       var(--brand-color);
    --messages-border-faint:   rgba(255,255,255,0.04);
    --messages-border-subtle:  rgba(255,255,255,0.07);
    --messages-border-default: rgba(37,211,102,0.16);
    --messages-border-brand:   rgba(37,211,102,0.28);
    --messages-border-input:   rgba(255,255,255,0.08);
    --messages-sent-bg:       var(--success-bg);
    --messages-sent-bg-hover: rgba(37,211,102,0.20);
    --messages-sent-text:     var(--app-text);
    --messages-sent-meta:     rgba(233,237,239,0.62);
    --messages-sent-shadow:   0 1px 3px rgba(0,0,0,0.35), 0 3px 14px rgba(37,211,102,0.15);
    --messages-recv-bg:      var(--input-bg);
    --messages-recv-text:    var(--app-text);
    --messages-recv-meta:    var(--app-text-dim);
    --messages-recv-border:  var(--input-border);
    --messages-recv-shadow:  0 1px 3px rgba(0,0,0,0.35), 0 2px 10px rgba(0,0,0,0.22);
    --messages-header-bg:     rgba(17,27,33,0.97);
    --messages-header-border: var(--input-border);
    --messages-header-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 3px 20px rgba(0,0,0,0.50);
    --messages-bar-bg:        rgba(17,27,33,0.98);
    --messages-bar-border:    var(--input-border);
    --messages-chip-bg:   rgba(31,44,52,0.88);
    --messages-chip-text: var(--app-text-dim);
    --messages-shadow-xs: 0 1px 2px rgba(0,0,0,0.45);
    --messages-shadow-sm: 0 2px 8px rgba(0,0,0,0.50);
    --messages-shadow-md: 0 4px 18px rgba(0,0,0,0.55);
    --messages-shadow-lg: 0 10px 38px rgba(0,0,0,0.60);
    --messages-shadow-xl: 0 20px 64px rgba(0,0,0,0.65);
    --messages-shadow-brand: 0 8px 28px rgba(37,211,102,0.22);
  }
}

/* ── Dark Mode (manual class toggle) ── */
body.messages-dark-mode {
  --messages-brand-400: var(--brand-color);
  --messages-brand-500: var(--brand-color);
  --messages-brand-600: var(--brand-hover);
  --messages-surface-ground: var(--app-outer-bg);
  --messages-surface-base:   var(--app-bg);
  --messages-surface-raised: var(--app-bg);
  --messages-surface-input:  var(--input-bg);
  --messages-text-primary:     var(--app-text);
  --messages-text-secondary:   #c0c4ce;
  --messages-text-muted:       var(--app-text-dim);
  --messages-text-placeholder: #5b616e;
  --messages-text-brand:       var(--brand-color);
  --messages-sent-bg:       var(--success-bg);
  --messages-sent-text:     var(--app-text);
  --messages-sent-meta:     rgba(233,237,239,0.62);
  --messages-recv-bg:      var(--input-bg);
  --messages-recv-text:    var(--app-text);
  --messages-recv-meta:    var(--app-text-dim);
  --messages-recv-border:  var(--input-border);
  --messages-header-bg:     rgba(17,27,33,0.97);
  --messages-header-border: var(--input-border);
  --messages-bar-bg:        rgba(17,27,33,0.98);
  --messages-bar-border:    var(--input-border);
  --messages-chip-bg:   rgba(31,44,52,0.88);
  --messages-chip-text: var(--app-text-dim);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  height: -webkit-fill-available;
}

body {
  height: 100vh;
  height: -webkit-fill-available;
  overflow: hidden;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  color: var(--messages-text-primary);
  background: var(--messages-surface-ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   SMOOTH RENDERING OPTIMIZATIONS
   ============================================================ */

/* GPU-accelerate the chat container */
#messages-chat-messages {
  transform: translateZ(0);
  will-change: scroll-position;
  contain: strict;
  -webkit-overflow-scrolling: touch;
}

/* Individual messages — fast composite */
.messages-message {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style paint;
}

/* Image containers — size-known paint containment */
.messages-image-container,
.messages-message.messages-image-message {
  contain: layout style paint;
  content-visibility: auto;
}

/* Product preview images — prevent layout shift */
.messages-product-photo-preview,
.messages-chat-image,
.messages-url-preview-image {
  transform: translateZ(0);
  backface-visibility: hidden;
  content-visibility: auto;
}

/* Header & input bar — GPU layers */
.messages-chats-header,
.messages-message-container {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Buttons — fast taps */
.messages-action-btn,
.messages-action-btn.messages-primary,
#messages-ellipsis-btn,
.messages-back-btn {
  will-change: transform;
  transform: translateZ(0);
}

/* Emoji picker — composite layer */
.messages-emoji-picker {
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* Modals — separate composite layer */
.messages-modal,
.messages-image-lightbox {
  transform: translateZ(0);
  will-change: opacity;
}

/* Fast touch response on mobile */
@media (hover: none) and (pointer: coarse) {
  .messages-action-btn,
  .messages-action-btn.messages-primary,
  .messages-back-btn,
  #messages-ellipsis-btn,
  .messages-context-menu-item,
  .messages-dropdown-item {
    touch-action: manipulation;
  }
}

/* Reduce paint area of scrolling container */
#messages-chat-messages > * {
  contain: layout style paint;
}

/* Skeleton loader — fast composite */
.messages-skeleton-message,
.messages-skeleton-avatar,
.messages-skeleton-line,
.messages-skeleton-date-chip span {
  transform: translateZ(0);
  will-change: background-position;
}

/* Date chips — paint containment */
.messages-system-message {
  transform: translateZ(0);
  contain: layout style paint;
}

/* Off-screen chat messages can skip full rendering when virtualized */
@media (min-width: 768px) {
  .messages-message {
    content-visibility: auto;
  }
}
* {
  -webkit-user-select: none;
  user-select: none;
}

/* ============================================================
   CHAT WALLPAPER — warm linen texture with subtle dot grid
   ============================================================ */

#messages-chat-messages {
  background-color: var(--messages-wallpaper-bg);
  background-image:
    /* fine noise grain layer */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    radial-gradient(circle, var(--messages-wallpaper-dot) 1px, transparent 1px);
  background-size: 200px 200px, 22px 22px;
  background-attachment: local;
}

#messages-chat-messages::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 75%, rgba(237, 233, 227, 0.6) 100%);
  pointer-events: none;
  z-index: 0;
}

body.messages-dark-mode #messages-chat-messages {
  background-color: var(--messages-wallpaper-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    radial-gradient(circle, var(--messages-wallpaper-dot) 1px, transparent 1px);
}

body.messages-dark-mode #messages-chat-messages::before {
  background: linear-gradient(to bottom, transparent 75%, rgba(10, 9, 5, 0.6) 100%);
}

/* ============================================================
   HEADER — pure white commerce-first top bar
   ============================================================ */

.messages-chats-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  height: var(--messages-header-h);
  min-height: var(--messages-header-h);
  max-height: var(--messages-header-h);
  /* Safety net: nothing (e.g. a status line that fails to truncate) should
     ever be able to visually grow this bar past its fixed height and push
     into the message list below it. */
  overflow: hidden;

  display: flex;
  align-items: center;
  padding: 0 14px 0 6px;
  gap: 6px;

  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
  transform: translateZ(0);
  will-change: transform;
}

.messages-chats-header::before {
  display: none;
}

/* Back button */
.messages-chats-header .messages-back-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--messages-r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--messages-text-muted);
  cursor: pointer;
  transition: background var(--messages-dur-sm) var(--messages-ease-out), color var(--messages-dur-sm) var(--messages-ease-out);
  flex-shrink: 0;
}

.messages-chats-header .messages-back-btn:hover {
  background: var(--messages-brand-glow-sm);
  color: var(--messages-brand-500);
}

.messages-chats-header .messages-back-btn svg { width: 18px; height: 18px; display: block; }
.messages-chats-header .messages-back-btn i  { font-size: 15px; }

/* User profile section */
.messages-user-profile {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 11px;
  min-width: 0;
  cursor: pointer;
}

/* Avatar — with gold commerce ring */
.messages-chats-header img,
#messages-chatspic {
  width: 42px;
  height: 42px;
  border-radius: var(--messages-r-pill);
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--messages-surface-base);
  box-shadow:
    0 0 0 2px var(--messages-brand-400),
    0 0 0 4px var(--messages-brand-glow-sm),
    var(--messages-shadow-sm);
  transition: box-shadow var(--messages-dur-md) var(--messages-ease-out), transform var(--messages-dur-md) var(--messages-ease-bounce);
}

.messages-chats-header img:hover,
#messages-chatspic:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 2px var(--messages-gold-400), 0 0 0 5px var(--messages-gold-glow), var(--messages-shadow-md);
}

@keyframes messagesAvatarOnlinePulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--messages-brand-500), 0 0 0 5px var(--messages-brand-glow-sm), var(--messages-shadow-sm); }
  50%       { box-shadow: 0 0 0 2px var(--messages-brand-400), 0 0 0 8px var(--messages-brand-glow-xs), var(--messages-shadow-sm); }
}

.messages-chats-header img.messages-is-online,
#messages-chatspic.messages-is-online {
  animation: messagesAvatarOnlinePulse 2.6s ease-in-out infinite;
}

/* User info */
.messages-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#messages-chats-userName {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--messages-text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  min-width: 0;
}

.messages-username-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.messages-username-row #messages-chats-userName {
  min-width: 0;
}

.messages-verified-badge {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--messages-brand-500);
}

.messages-user-status {
  font-size: 11.5px;
  color: var(--messages-text-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  /* Without these, a long "Last seen X days ago" string wraps onto a
     second line instead of truncating — since the header itself has a
     fixed height, that wrapped line used to spill out below the header
     box and visually blow the header up to 2-3x its intended height. */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messages-user-status.messages-online {
  color: var(--messages-brand-500);
  font-weight: 600;
}

.messages-user-status.messages-online::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--messages-brand-400);
  display: inline-block;
  flex-shrink: 0;
  animation: messagesOnlineDot 2s ease-in-out infinite;
}

@keyframes messagesOnlineDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

.messages-typing-indicator {
  font-size: 10px;
  color: var(--messages-brand-500);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Options */
.messages-chat-options {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* Tighter cluster so video/voice/ellipsis sit close together at the
     right edge instead of being spread out across reserved-but-invisible
     space (see #messages-dark-mode-toggle below). */
  gap: 2px;
}

.messages-call-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--messages-text-muted);
  border-radius: var(--messages-r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--messages-dur-sm) var(--messages-ease-out), color var(--messages-dur-sm) var(--messages-ease-out);
}

.messages-call-btn:hover,
.messages-call-btn:active {
  background: var(--messages-brand-glow-sm);
  color: var(--messages-brand-500);
}

/* Was `display:flex; visibility:hidden;` — visibility:hidden still
   reserves layout space, which left a ~26px dead gap between the voice
   call button and the ellipsis menu and stole width the username needed
   to avoid truncating early. display:none removes it from layout
   entirely so the visible buttons sit flush together at the right edge. */
#messages-dark-mode-toggle {
  display: none;
  width: 20px;
  height: 20px;
  border-radius: var(--messages-r-pill);
  border: 1px solid var(--messages-border-subtle);
  background: var(--messages-surface-input);
  color: var(--messages-text-muted);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: all var(--messages-dur-sm) var(--messages-ease-out);
  flex-shrink: 0;
}

#messages-dark-mode-toggle:hover {
  background: var(--messages-brand-glow-sm);
  color: var(--messages-brand-600);
  border-color: var(--messages-border-brand);
}

#messages-ellipsis-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--messages-r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--messages-text-muted);
  cursor: pointer;
  background: transparent;
  transition: all var(--messages-dur-sm) var(--messages-ease-out);
  border: none;
  outline: none;
}

#messages-ellipsis-btn svg { width: 18px; height: 18px; pointer-events: none; }

#messages-ellipsis-btn:hover {
  background: var(--messages-brand-glow-sm);
  color: var(--messages-brand-600);
}

/* Dropdown */
.messages-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 196px;
  background: var(--messages-surface-base);
  border: 1px solid var(--messages-border-subtle);
  border-radius: var(--messages-r-lg);
  box-shadow: var(--messages-shadow-lg), 0 0 0 1px var(--messages-border-faint);
  z-index: 10000;
  overflow: hidden;
  transform-origin: top right;
  animation: messagesMenuReveal var(--messages-dur-md) var(--messages-ease-bounce) forwards;
}

@keyframes messagesMenuReveal {
  from { opacity: 0; transform: scale(0.92) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.messages-dropdown-item {
  padding: 13px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--messages-text-secondary);
  cursor: pointer;
  transition: all var(--messages-dur-xs) var(--messages-ease-out);
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--messages-border-faint);
}

.messages-dropdown-item:last-child { border-bottom: none; }

.messages-dropdown-item i {
  font-size: 13px;
  width: 16px;
  text-align: center;
  color: var(--messages-text-muted);
}

.messages-dropdown-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--messages-text-muted);
}

.messages-dropdown-item:hover {
  background: var(--messages-brand-glow-xs);
  color: var(--messages-text-primary);
}

/* ============================================================
   MESSAGES AREA
   ============================================================ */

#messages-chat-messages {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - var(--messages-header-h) - var(--messages-bar-h));
  margin-top: var(--messages-header-h);
  margin-bottom: var(--messages-bar-h);
  padding: 18px 14px 14px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

#messages-chat-messages::-webkit-scrollbar { width: 3px; }
#messages-chat-messages::-webkit-scrollbar-track { background: transparent; }
#messages-chat-messages::-webkit-scrollbar-thumb {
  background: var(--messages-brand-300);
  border-radius: var(--messages-r-pill);
}

/* ============================================================
   DATE CHIPS
   ============================================================ */

.messages-system-message {
  text-align: center;
  margin: 18px auto 14px;
  color: var(--messages-chip-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  background: var(--messages-chip-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--messages-r-pill);
  padding: 5px 14px;
  width: fit-content;
  max-width: 70%;
  box-shadow: var(--messages-chip-shadow);
  text-transform: uppercase;
  border: 1px solid var(--messages-border-faint);
}

/* ============================================================
   MESSAGE BUBBLES
   ============================================================ */

.messages-message {
  position: relative;
  display: block;               /* must be block, not flex, for float to work */
  width: fit-content;
  max-width: 78%;
  padding: 10px 13px 6px 13px;
  margin: 2px 0;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  word-wrap: break-word;
  word-break: break-word;
  overflow: hidden;             /* contain the float */
  animation: messagesBubbleIn var(--messages-dur-md) var(--messages-ease-bounce) forwards;
}

@keyframes messagesBubbleIn {
  from { opacity: 0; transform: scale(0.95) translateY(4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* SENT */
.messages-message.messages-sent {
  background: var(--messages-sent-bg);
  color: var(--messages-sent-text);
  margin-left: auto;
  margin-right: 0;
  border-bottom-right-radius: 4px;
  box-shadow: var(--messages-sent-shadow);
  transform-origin: bottom right;
}

/* ── Swipe-to-reply drag feedback (matches WhatsApp's placement) ──
   During touchmove the JS toggles .messages-swiping (any drag) and
   .messages-swipe-armed (once past the arm threshold), and also sets a
   live --swipe-dx custom property to the current drag distance.
   Bubbles normally need overflow:hidden to contain the floated
   timestamp (see .messages-message-timestamp), but that layout is
   already resolved before any swipe starts — so it's safe to relax
   overflow just for the swiping state, which lets the reply icon sit
   OUTSIDE the bubble's left edge, in the gap the bubble reveals as it
   slides right, instead of being clipped inside it. */
.messages-message.messages-swiping {
  transition: none;
  overflow: visible;
}
.messages-message {
  --swipe-dx: 0px;
}
.messages-message .messages-swipe-reply-icon {
  position: absolute;
  top: 50%;
  left: -34px;
  /* Counter-translate by the live drag distance so the icon stays
     anchored in the gutter that opens up next to the bubble, instead of
     sliding along with it. Without this, received (left-aligned)
     messages — which start flush against the panel's left padding —
     dragged the icon off the left edge of the screen for most of the
     gesture, since the icon is a child of the bubble and inherited its
     transform: translateX(dx). */
  transform: translateY(-50%) translateX(calc(-1 * var(--swipe-dx, 0px))) scale(0.5);
  width: 26px;
  height: 26px;
  border-radius: var(--messages-r-pill);
  background: var(--messages-surface-base);
  color: var(--messages-brand-500);
  box-shadow: var(--messages-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--messages-dur-sm) var(--messages-ease-out), transform var(--messages-dur-sm) var(--messages-ease-out);
}
.messages-message .messages-swipe-reply-icon svg { width: 14px; height: 14px; }
.messages-message.messages-swipe-armed .messages-swipe-reply-icon {
  opacity: 1;
  transform: translateY(-50%) translateX(calc(-1 * var(--swipe-dx, 0px))) scale(1);
}


.messages-message.messages-received {
  background: var(--messages-recv-bg);
  color: var(--messages-recv-text);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--messages-recv-border);
  box-shadow: var(--messages-recv-shadow);
  margin-left: 0;
  transform-origin: bottom left;
}

/* Sent tail — using #e7f8ee dynamically via token */
.messages-message.messages-sent::after {
  content: '';
  position: absolute;
  bottom: 0; right: -7px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 9px 0 0 8px;
  border-color: transparent transparent transparent var(--messages-sent-bg);
  pointer-events: none;
}

/* Received tail */
.messages-message.messages-received::before {
  content: '';
  position: absolute;
  bottom: 0; left: -7px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 9px 8px 0 0;
  border-color: transparent var(--messages-recv-bg) transparent transparent;
  pointer-events: none;
}

.messages-message-timestamp {
  float: right;
  clear: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  margin-top: 2px;
  margin-bottom: 0;
  position: relative;
  top: 3px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.03em;
  white-space: nowrap;
  padding: 2px 7px 2px 6px;
  border-radius: var(--messages-r-pill);
}

/* Sent: subtle matching tone overlay */
.messages-message.messages-sent .messages-message-timestamp {
  color: var(--messages-sent-meta);
  background: rgba(0, 0, 0, 0.04);
}

/* Received: warm grey pill on white */
.messages-message.messages-received .messages-message-timestamp {
  color: var(--messages-recv-meta);
  background: rgba(26, 23, 20, 0.06);
}

/* Inner Wrappers */
.messages-message-inner {
  display: block;
}

.messages-message-text-content {
  display: inline;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.5;
  font-size: 16px;
}

.messages-message-text {
  display: block;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 15px;
  color: inherit;
  margin-bottom: 4px;
}

.messages-reply-preview-bubble {
  display: block;
  padding: 6px 10px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.04);
  border-left: 3px solid var(--messages-brand-500);
  color: var(--messages-text-primary);
}

/* On sent (mint-green) bubbles a flat 4% black tint barely registers —
   darken slightly so the quote block reads clearly, matching WhatsApp's
   deeper-green quote strip inside sent bubbles. */
.messages-message.messages-sent .messages-reply-preview-bubble {
  background: rgba(0,0,0,0.07);
}

.messages-reply-preview-bubble .messages-reply-preview-source {
  font-size: 13px;
  font-weight: 700;
  color: var(--messages-text-brand);
  margin-bottom: 2px;
}

.messages-reply-preview-bubble .messages-reply-preview-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--messages-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-message-meta {
  display: block;
  text-align: right;
  margin-top: 2px;
  line-height: 1;
}

.messages-message.messages-image-message::after,
.messages-message.messages-image-message::before { display: none !important; }

/* Ticks */
.messages-tick {
  font-size: 11.5px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.messages-tick svg { display: block; flex-shrink: 0; }
.messages-tick.messages-seen      { color: #53bdeb; }
.messages-tick.messages-delivered { color: var(--messages-sent-meta); }
.messages-tick.messages-sending   { color: rgba(26,23,20,0.3); }
.messages-tick.messages-queued    { color: #ff9800; }

/* Sending spinner */
.messages-message.messages-optimistic-sending { opacity: 0.65; }
.messages-message.messages-optimistic-sending .messages-message-timestamp::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  border: 1.5px solid rgba(26,23,20,0.2);
  border-top-color: var(--messages-brand-500);
  border-radius: 50%;
  animation: messagesSpin 0.65s linear infinite;
  margin-right: 2px;
}
@keyframes messagesSpin { to { transform: rotate(360deg); } }

/* Emoji only */
.messages-message.messages-emoji-only {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 2.6em;
  line-height: 1.15;
  padding: 2px 4px;
}
.messages-message.messages-emoji-only::before,
.messages-message.messages-emoji-only::after { display: none !important; }

/* ============================================================
   TEXT MESSAGE WITH EMBEDDED PRODUCT IMAGE
   ============================================================ */

/* .messages-message--with-photo is added explicitly by Chats.js
   (buildMessageNode) whenever this bubble carries a
   .messages-product-photo-preview image. The :has() selector is kept as
   a belt-and-suspenders duplicate, but the explicit class is what
   actually guarantees the fixed width on WebViews without :has()
   support — without a determinate width here, the bubble falls back to
   `width: fit-content`, and combined with `word-break: break-word` on
   the caption text below, an unresolvable circular width calculation
   between this container and its 100%-wide image can collapse the text
   column down to a single character per line ("vertical text" bug). */
.messages-message.messages-message--with-photo,
.messages-message:has(.messages-product-photo-preview) {
  max-width: min(var(--messages-img-w), 80vw) !important;
  width: min(var(--messages-img-w), 80vw) !important;
  padding: 9px 9px 6px !important;
  overflow: hidden;
}

.messages-message.messages-message--with-photo > div:first-child,
.messages-message:has(.messages-product-photo-preview) > div:first-child {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 6px;
  display: block;
  width: 100%;
  word-break: break-word;
}

.messages-product-photo-preview {
  display: block;
  width: calc(100% + 18px);
  margin-left: -9px;
  margin-right: -9px;
  margin-bottom: -6px;
  height: auto;
  max-height: 260px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0 0 12px 12px;
  cursor: pointer;
  transition: filter var(--messages-dur-sm) var(--messages-ease-out);
}

.messages-product-photo-preview:hover { filter: brightness(0.88); }

.messages-message.messages-message--with-photo .messages-message-timestamp,
.messages-message:has(.messages-product-photo-preview) .messages-message-timestamp {
  float: right;
  margin-bottom: 6px;
  margin-top: 0;
  background: transparent;
}

/* ============================================================
   PURE IMAGE MESSAGES
   ============================================================ */

.messages-message.messages-image-message {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  /* Fixed width — never wider than the screen, never wider than our img token */
  width: min(var(--messages-img-w), 80vw);
  max-width: min(var(--messages-img-w), 80vw);
  min-width: 0;
  line-height: 0;
  /* Contain children strictly — prevents any inner element escaping */
  overflow: hidden;
  display: block;
}

.messages-message.messages-image-message.messages-sent     { margin-left: auto; margin-right: 0; }
.messages-message.messages-image-message.messages-received { margin-left: 0; margin-right: auto; }
.messages-message.messages-image-message::after,
.messages-message.messages-image-message::before  { display: none !important; }

/* Caption text above the image */
.messages-message.messages-image-message .messages-image-message-text {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
  padding: 9px 13px 7px;
  /* Top corners rounded, bottom flat — connects to image below */
  border-radius: 13px 13px 0 0;
  box-sizing: border-box;
  width: 100%;
  /* Prevent caption from widening the bubble beyond the image */
  overflow: hidden;
}

.messages-message.messages-image-message.messages-received .messages-image-message-text {
  background: var(--messages-recv-bg);
  color: var(--messages-recv-text);
  border: 1px solid var(--messages-recv-border);
  border-bottom: none;
}

.messages-message.messages-image-message.messages-sent .messages-image-message-text {
  background: var(--messages-sent-bg);
  color: var(--messages-sent-text);
}

/* The image wrapper — same fixed width as the parent */
.messages-image-container {
  display: block;
  width: 100%;                   /* fills the fixed-width parent exactly */
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: var(--messages-surface-dim);
  cursor: pointer;
  line-height: 0;
  box-shadow: var(--messages-shadow-md);
  transition: transform var(--messages-dur-sm) var(--messages-ease-out), box-shadow var(--messages-dur-sm) var(--messages-ease-out);
}

/* When caption is present, merge top of image-container with bottom of caption */
.messages-image-message-text + .messages-image-container {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.messages-message.messages-image-message.messages-sent .messages-image-container     { border-bottom-right-radius: 4px; box-shadow: var(--messages-sent-shadow); }
.messages-message.messages-image-message.messages-received .messages-image-container { border-bottom-left-radius: 4px; }
.messages-image-container:hover { transform: scale(1.01); box-shadow: var(--messages-shadow-lg); }

.messages-chat-image {
  /* Fill the container fully, crop to square */
  width: 100%;
  height: auto;
  /* Cap height so tall images don't go off-screen */
  max-height: var(--messages-img-h);
  min-height: 80px;
  object-fit: cover;
  /* Block removes the inline ghost gap */
  display: block;
  vertical-align: bottom;
  cursor: pointer;
  transition: filter var(--messages-dur-sm) var(--messages-ease-out);
  /* Hard safety net — image can never overflow its container */
  max-width: 100%;
  overflow: hidden;
}

.messages-image-container:hover .messages-chat-image { filter: brightness(0.88); }

.messages-image-timestamp-overlay {
  position: absolute;
  bottom: 7px; right: 8px;
  background: rgba(0,0,0,0.44);
  color: rgba(255,255,255,0.96);
  font-size: 10.5px; font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  display: flex; align-items: center; gap: 3px;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2; line-height: 1;
  white-space: nowrap;
}

.messages-image-loading-skeleton {
  width: 100%;
  height: var(--messages-img-h);
  border-radius: 12px;
  background: linear-gradient(90deg, var(--messages-surface-dim) 25%, var(--messages-surface-raised) 50%, var(--messages-surface-dim) 75%);
  background-size: 200% 100%;
  animation: messagesShimmer 1.5s ease-in-out infinite;
}
@keyframes messagesShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ============================================================
   PRODUCT / URL PREVIEW CARD
   ============================================================ */

#messages-product-preview {
  position: fixed;
  bottom: calc(var(--messages-bar-h) + 8px);
  right: 14px;
  left: auto;
  z-index: 998;
  width: fit-content;
  max-width: min(300px, calc(100vw - 28px));
  border-radius: var(--messages-r-md);
  overflow: hidden;
  background: var(--messages-surface-base);
  box-shadow: var(--messages-shadow-lg);
  cursor: pointer;
  border: 1px solid var(--messages-border-subtle);
  border-left: 3px solid var(--messages-gold-400);
  transition: box-shadow var(--messages-dur-sm) var(--messages-ease-out), transform var(--messages-dur-sm) var(--messages-ease-out);
  animation: messagesPreviewSlide var(--messages-dur-md) var(--messages-ease-bounce) forwards;
}

#messages-product-preview:hover {
  box-shadow: var(--messages-shadow-xl);
  transform: translateY(-2px);
}

#messages-product-preview .messages-url-preview-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px 10px 10px;
  min-width: 0;
}

#messages-product-preview .messages-url-preview-image {
  width: 52px;
  height: 52px;
  border-radius: var(--messages-r-sm);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  order: -1;
}

#messages-product-preview .messages-url-preview-product-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  color: var(--messages-text-primary);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 2px;
  display: block;
}

#messages-product-preview .messages-url-preview-message {
  font-size: 11.5px;
  color: var(--messages-text-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  display: block;
}

#messages-product-preview .messages-url-preview-content::after {
  display: none;
}

.messages-url-photo-preview {
  background: var(--messages-surface-base);
  border-radius: var(--messages-r-md);
  overflow: hidden;
  box-shadow: var(--messages-shadow-md);
  cursor: pointer;
  width: fit-content;
  max-width: min(260px, 78vw);
  border: 1px solid var(--messages-border-subtle);
  transition: box-shadow var(--messages-dur-sm) var(--messages-ease-out), transform var(--messages-dur-sm) var(--messages-ease-out);
}

.messages-url-photo-preview:hover {
  box-shadow: var(--messages-shadow-lg);
  transform: translateY(-2px);
}

.messages-message.messages-received .messages-url-photo-preview {
  margin-top: 8px;
  border-color: var(--messages-border-default);
  max-width: 100%;
  width: 100%;
}

.messages-message.messages-sent .messages-url-photo-preview {
  margin-top: 8px;
  border: 1.5px solid rgba(26,23,20,0.1);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  max-width: 100%;
  width: 100%;
}

.messages-url-preview-image {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.messages-url-preview-content {
  padding: 9px 12px 11px;
}

.messages-message.messages-sent .messages-url-preview-content { background: transparent; }
.messages-message.messages-sent .messages-url-preview-product-name { color: var(--messages-sent-text); }
.messages-message.messages-sent .messages-url-preview-message      { color: var(--messages-sent-meta); }

.messages-url-preview-product-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  color: var(--messages-text-primary);
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messages-url-preview-message {
  font-size: 11.5px;
  color: var(--messages-text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   VIEW-ONCE MESSAGES
   ============================================================ */

.messages-view-once-photo-container {
  position: relative;
  width: var(--messages-img-w);
  height: var(--messages-img-h);
  border-radius: var(--messages-r-md);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: var(--messages-shadow-md);
}

.messages-view-once-blurred-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) brightness(0.5);
  transform: scale(1.15);
}

.messages-view-once-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(2px);
  transition: background var(--messages-dur-sm);
}

.messages-view-once-overlay:hover { background: rgba(0,0,0,0.42); }
.messages-view-once-icon { display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.messages-view-once-action-text { font-weight: 700; font-size: 1em; letter-spacing: 0.02em; }
.messages-view-once-info-text { font-size: 0.72em; opacity: 0.75; max-width: 80%; line-height: 1.35; }

.messages-viewed-image-container {
  width: var(--messages-img-w);
  height: var(--messages-img-h);
  border-radius: var(--messages-r-md);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.messages-view-once-actual-image { width: 100%; height: 100%; object-fit: cover; }

.messages-view-once-deleted-container {
  width: var(--messages-img-w);
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--messages-brand-glow-xs);
  border: 1.5px dashed var(--messages-border-brand);
  border-radius: var(--messages-r-md);
}

.messages-view-once-deleted {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--messages-text-muted);
  padding: 12px;
  text-align: center;
}

.messages-view-once-deleted .messages-view-once-icon { filter: none; opacity: 0.6; }
.messages-view-once-deleted .messages-view-once-text { font-size: 12px; }

/* ============================================================
   MESSAGE INPUT BAR — Premium social-commerce compose area
   ============================================================ */

.messages-message-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--messages-bar-bg);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  /* Crisp top separator with a faint brand shimmer */
  border-top: 1px solid var(--messages-bar-border);
  box-shadow:
    0 -1px 0 var(--messages-border-faint),
    0 -6px 32px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.5);
  padding: 10px 12px max(14px, env(safe-area-inset-bottom));
}

/* Subtle green accent line at the very top of the bar */
.messages-message-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--messages-brand-400) 35%, var(--messages-gold-400) 65%, transparent 100%);
  opacity: 0.35;
  pointer-events: none;
}

.messages-input-section { max-width: 840px; margin: 0 auto; }

/* ── Image preview strip ── */
#messages-image-preview-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--messages-brand-glow-xs);
  border: 1px solid var(--messages-border-brand);
  border-radius: var(--messages-r-md);
  margin-bottom: 8px;
  animation: messagesPreviewSlide var(--messages-dur-md) var(--messages-ease-out) forwards;
}

@keyframes messagesPreviewSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#messages-image-preview {
  width: 52px;
  height: 52px;
  border-radius: var(--messages-r-sm);
  object-fit: cover;
  border: 2px solid var(--messages-border-brand);
  flex-shrink: 0;
}

.messages-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.messages-view-once-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--messages-text-brand);
  cursor: pointer;
}

.messages-view-once-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--messages-brand-500);
}

.messages-close-preview-btn {
  background: rgba(0,0,0,0.05);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: var(--messages-r-pill);
  color: var(--messages-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--messages-dur-sm) var(--messages-ease-out);
  margin-left: auto;
}

.messages-close-preview-btn:hover { background: #ef4444; color: #fff; }
.messages-close-preview-btn svg { pointer-events: none; }

/* ── Main compose pill ── */
.messages-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  /* Warm white pill with a 1.5px brand-tinted border */
  background: var(--messages-surface-raised);
  border: 1.5px solid var(--messages-border-input);
  border-radius: 26px;
  padding: 6px 6px 6px 14px;
  transition:
    border-color var(--messages-dur-md) var(--messages-ease-out),
    box-shadow var(--messages-dur-md) var(--messages-ease-out),
    background var(--messages-dur-md) var(--messages-ease-out);
  /* Soft ambient lift */
  box-shadow: 0 2px 12px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
}

.messages-input-row:focus-within {
  border-color: var(--messages-brand-400);
  box-shadow:
    0 0 0 3px var(--messages-brand-glow-sm),
    0 2px 12px rgba(0,0,0,0.06);
  background: var(--messages-surface-base);
}

/* Textarea */
#messages-type-section {
  flex: 1;
  min-height: 36px;
  max-height: 140px;
  padding: 7px 0;
  background: transparent;
  border: none;
  /* Slightly larger for readability */
  font-size: 15.5px;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.52;
  color: var(--messages-text-primary);
  resize: none;
  outline: none;
  -webkit-appearance: none;
  align-self: center;
}

#messages-type-section::placeholder {
  color: var(--messages-text-placeholder);
  font-size: 15px;
}

/* ── Right-side action cluster inside the pill ── */
.messages-input-row-actions {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  /* Slight padding so buttons don't hug the pill edge */
  padding-right: 2px;
  padding-bottom: 2px;
}

/* ── Secondary toolbar below the pill ── */
.messages-action-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding: 0 4px;
}

.messages-left-buttons  { display: flex; gap: 2px; align-items: center; }
.messages-right-buttons { display: flex; align-items: center; }

/* ── Ghost icon buttons (attach, emoji, bargain …) ── */
.messages-action-btn {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: var(--messages-r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  color: var(--messages-text-muted);
  transition:
    background var(--messages-dur-sm) var(--messages-ease-out),
    color var(--messages-dur-sm) var(--messages-ease-out),
    transform var(--messages-dur-sm) var(--messages-ease-bounce);
  position: relative;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.messages-action-btn svg { pointer-events: none; flex-shrink: 0; }

.messages-action-btn:hover {
  color: var(--messages-brand-600);
  background: var(--messages-brand-glow-sm);
}

.messages-action-btn:active { transform: scale(0.88); }

/* ── SEND button — premium green pill ── */
.messages-action-btn.messages-primary {
  /* Gradient gives it depth without gimmick */
  background: linear-gradient(145deg, var(--messages-brand-400) 0%, var(--messages-brand-600) 100%);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: var(--messages-r-pill);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.14),
    0 4px 18px rgba(45, 122, 80, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition:
    transform var(--messages-dur-sm) var(--messages-ease-bounce),
    box-shadow var(--messages-dur-sm) var(--messages-ease-out),
    background var(--messages-dur-xs);
}

.messages-action-btn.messages-primary:hover {
  background: linear-gradient(145deg, var(--messages-brand-500) 0%, var(--messages-brand-700) 100%);
  transform: scale(1.09);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.18),
    0 6px 24px rgba(45, 122, 80, 0.38),
    inset 0 1px 0 rgba(255,255,255,0.20);
  color: #fff;
}

.messages-action-btn.messages-primary:active { transform: scale(0.92); }

/* ── Bargain / offer button — gold accent ── */
#messages-bargain-btn:not(:disabled)       { color: var(--messages-gold-500); }
#messages-bargain-btn:not(:disabled):hover { background: var(--messages-gold-glow); color: var(--messages-gold-400); }

.messages-action-btn:disabled { opacity: 0.22; cursor: not-allowed; pointer-events: none; }

/* ============================================================
   PUSH-TO-TALK
   ============================================================ */

/* Talk button — sits in the input row like the other action buttons */
.messages-ptt-talk-btn:not(:disabled) { color: var(--messages-brand-500); }
.messages-ptt-talk-btn:not(:disabled):hover { background: var(--messages-brand-glow-sm); }

/* Recording state — held down, actively capturing audio */
.messages-ptt-talk-btn.messages-ptt-recording {
  background: #ef4444 !important;
  color: #fff !important;
  animation: messages-ptt-record-pulse 1.1s ease-in-out infinite;
}

@keyframes messages-ptt-record-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

/* Incoming invite banner — replaces the normal input row while ringing */
.messages-ptt-incoming {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: var(--messages-r-lg);
  background: var(--messages-brand-glow-sm);
  border: 1px solid var(--messages-brand-200, var(--messages-border-subtle));
}

.messages-ptt-incoming-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--messages-text-primary);
}

.messages-ptt-pulse-icon {
  color: var(--messages-brand-500);
  font-size: 15px;
  animation: messages-ptt-ring-pulse 1s ease-in-out infinite;
}

@keyframes messages-ptt-ring-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.2); opacity: 0.65; }
}

.messages-ptt-incoming-actions { display: flex; gap: 8px; flex-shrink: 0; }

.messages-ptt-accept-btn,
.messages-ptt-decline-btn {
  border: none;
  border-radius: var(--messages-r-pill);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--messages-dur-sm) var(--messages-ease-bounce), filter var(--messages-dur-sm) var(--messages-ease-out);
}

.messages-ptt-accept-btn {
  background: var(--messages-brand-500);
  color: #fff;
}

.messages-ptt-decline-btn {
  background: var(--messages-surface-base);
  color: var(--messages-text-muted);
  border: 1px solid var(--messages-border-subtle);
}

.messages-ptt-accept-btn:active,
.messages-ptt-decline-btn:active { transform: scale(0.94); }
.messages-ptt-accept-btn:hover   { filter: brightness(1.08); }

/* Active session banner — shown once accepted, sits above the (still usable) input row */
.messages-ptt-active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  margin-bottom: 8px;
  border-radius: var(--messages-r-lg);
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.25);
}

.messages-ptt-active-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--messages-text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-ptt-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: messages-ptt-ring-pulse 1.4s ease-in-out infinite;
}

.messages-ptt-end-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 12px;
  transition: transform var(--messages-dur-sm) var(--messages-ease-bounce);
}

.messages-ptt-end-btn:active { transform: scale(0.9); }

/* Incoming PTT clip bubble — compact waveform-style playback row */
.messages-ptt-clip-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}

.messages-ptt-clip-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--messages-brand-500);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13px;
}

.messages-ptt-clip-waveform {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}

.messages-message.messages-sent .messages-ptt-clip-waveform { background: rgba(0,0,0,0.15); }

.messages-ptt-clip-waveform-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--messages-brand-500);
  transition: width 0.1s linear;
}

.messages-ptt-clip-duration {
  font-size: 11.5px;
  color: var(--messages-text-muted);
  flex-shrink: 0;
}

/* ============================================================
   EMOJI PICKER
   ============================================================ */

.messages-emoji-picker {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  width: 310px;
  max-height: 300px;
  background: var(--messages-surface-base);
  border: 1px solid var(--messages-border-subtle);
  border-radius: var(--messages-r-xl);
  box-shadow: var(--messages-shadow-xl);
  display: none;
  z-index: 2000;
  overflow: hidden;
  animation: messagesMenuReveal var(--messages-dur-md) var(--messages-ease-bounce) forwards;
  transform-origin: bottom left;
}

.messages-emoji-categories {
  display: flex;
  border-bottom: 1px solid var(--messages-border-faint);
  background: var(--messages-surface-dim);
  padding: 4px;
  gap: 2px;
}

.messages-emoji-category {
  flex: 1;
  padding: 6px 2px;
  text-align: center;
  cursor: pointer;
  border: none;
  background: none;
  font-size: 18px;
  border-radius: var(--messages-r-sm);
  transition: background var(--messages-dur-xs), transform var(--messages-dur-xs);
}

.messages-emoji-category:hover { background: var(--messages-brand-glow-sm); transform: scale(1.1); }
.messages-emoji-category.messages-active { background: var(--messages-brand-500); }

.messages-emoji-grid { max-height: 232px; overflow-y: auto; padding: 7px 5px; }
.messages-emoji-grid::-webkit-scrollbar { width: 3px; }
.messages-emoji-grid::-webkit-scrollbar-thumb { background: var(--messages-border-brand); border-radius: var(--messages-r-pill); }

.messages-emoji-row { display: flex; flex-wrap: wrap; gap: 1px; margin-bottom: 1px; }

.messages-emoji-item {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--messages-r-sm);
  font-size: 20px;
  border: none;
  background: none;
  transition: background var(--messages-dur-xs), transform var(--messages-dur-xs) var(--messages-ease-bounce);
}

.messages-emoji-item:hover { background: var(--messages-brand-glow-sm); transform: scale(1.24); }

/* ============================================================
   MODALS
   ============================================================ */

.messages-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.messages-modal-content {
  background: var(--messages-surface-base);
  max-width: 420px;
  width: 100%;
  border-radius: var(--messages-r-xl);
  box-shadow: var(--messages-shadow-xl), 0 0 0 1px var(--messages-border-faint);
  padding: 28px;
  max-height: 90vh;
  overflow-y: auto;
  animation: messagesModalIn var(--messages-dur-lg) var(--messages-ease-bounce) forwards;
}

@keyframes messagesModalIn {
  from { opacity: 0; transform: scale(0.90) translateY(18px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.messages-modal h3 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--messages-text-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.02em;
}

.messages-modal p { font-size: 14px; color: var(--messages-text-secondary); line-height: 1.65; margin-bottom: 6px; }

.messages-modal textarea,
.messages-modal input[type="text"],
.messages-modal input[type="number"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--messages-border-default);
  border-radius: var(--messages-r-md);
  background: var(--messages-surface-input);
  color: var(--messages-text-primary);
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  resize: vertical;
  outline: none;
  transition: border-color var(--messages-dur-md), box-shadow var(--messages-dur-md);
  margin: 10px 0;
}

.messages-modal textarea:focus,
.messages-modal input:focus {
  border-color: var(--messages-brand-500);
  box-shadow: 0 0 0 3px var(--messages-brand-glow-sm);
}

/* Modal buttons */
.messages-btn {
  padding: 11px 22px;
  border-radius: var(--messages-r-md);
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  transition: all var(--messages-dur-sm) var(--messages-ease-out);
  letter-spacing: 0.01em;
}

.messages-btn-primary {
  background: var(--messages-brand-500);
  color: #fff;
  box-shadow: var(--messages-shadow-brand);
}

.messages-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(45, 122, 80, 0.36);
  background: var(--messages-brand-600);
}

.messages-btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }
.messages-btn-danger:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(220,38,38,0.35); }

.messages-btn-secondary {
  background: var(--messages-surface-input);
  color: var(--messages-text-secondary);
  border: 1px solid var(--messages-border-subtle);
}
.messages-btn-secondary:hover { background: var(--messages-brand-glow-xs); color: var(--messages-text-primary); }

/* ============================================================
   IMAGE LIGHTBOX
   ============================================================ */

.messages-image-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  z-index: 100001;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: zoom-out;
}

.messages-image-lightbox.messages-active { display: flex; }

.messages-lightbox-image {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--messages-r-md);
  box-shadow: 0 20px 70px rgba(0,0,0,0.80);
  animation: messagesLightboxIn var(--messages-dur-md) var(--messages-ease-out) forwards;
}

@keyframes messagesLightboxIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

.messages-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: background var(--messages-dur-sm);
}

.messages-lightbox-close:hover { background: rgba(255,255,255,0.22); }

/* ============================================================
   CONTEXT MENU / LONG-PRESS ACTIONS
   ============================================================ */

.messages-context-menu {
  position: fixed;
  z-index: 10001;
  background: var(--messages-surface-base);
  border: 1px solid var(--messages-border-subtle);
  border-radius: var(--messages-r-lg);
  box-shadow: var(--messages-shadow-xl);
  overflow: hidden;
  min-width: 170px;
  animation: messagesMenuReveal var(--messages-dur-md) var(--messages-ease-bounce) forwards;
  transform-origin: top left;
}

.messages-context-menu-item {
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--messages-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--messages-border-faint);
  transition: all var(--messages-dur-xs) var(--messages-ease-out);
}

.messages-context-menu-item:last-child { border-bottom: none; }
.messages-context-menu-item:hover { background: var(--messages-brand-glow-xs); color: var(--messages-text-primary); }
.messages-context-menu-item.messages-danger { color: #ef4444; }
.messages-context-menu-item.messages-danger:hover { background: rgba(239,68,68,0.06); }

.messages-context-menu-item i {
  font-size: 13px;
  width: 16px;
  text-align: center;
  color: var(--messages-text-muted);
}

.messages-context-menu-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--messages-text-muted);
}

.messages-context-menu-item.messages-danger svg { color: #ef4444; }

/* ============================================================
   AUDIO MESSAGES
   ============================================================ */

.messages-audio-message-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
  max-width: 240px;
}

.messages-audio-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: rgba(255,255,255,0.22);
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
  transition: background var(--messages-dur-sm);
}

.messages-message.messages-received .messages-audio-play-btn { background: var(--messages-brand-glow-sm); color: var(--messages-brand-600); }
.messages-audio-play-btn:hover { background: rgba(255,255,255,0.32); }
.messages-message.messages-received .messages-audio-play-btn:hover { background: var(--messages-brand-glow-md); }

.messages-audio-waveform {
  flex: 1;
  height: 22px;
  display: flex;
  align-items: center;
  gap: 2.5px;
}

.messages-audio-waveform span {
  display: inline-block;
  width: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.6);
  animation: messagesWaveAnim 1s ease-in-out infinite;
}

.messages-received .messages-audio-waveform span { background: var(--messages-brand-400); }

.messages-audio-duration {
  font-size: 11px;
  color: var(--messages-sent-meta);
  white-space: nowrap;
  min-width: 32px;
  text-align: right;
}

.messages-received .messages-audio-duration { color: var(--messages-text-muted); }

@keyframes messagesWaveAnim {
  0%, 100% { height: 4px; }
  50%       { height: 16px; }
}

/* ============================================================
   SKELETON LOADER
   ============================================================ */

#messages-skeleton-loader {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 12px;
  width: 100%;
}

.messages-skeleton-message {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  animation: messagesSkelFade 0.3s ease forwards;
}

@keyframes messagesSkelFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.messages-skeleton-message.messages-skeleton-received { justify-content: flex-start; }
.messages-skeleton-message.messages-skeleton-sent     { justify-content: flex-end; }

.messages-skeleton-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(90deg, #ebe5de 25%, #ddd7ce 50%, #ebe5de 75%);
  background-size: 300% 100%;
  animation: messagesSkelShimmer 1.6s ease-in-out infinite;
}

.messages-skeleton-sent .messages-skeleton-bubble { align-items: flex-end; }
.messages-skeleton-bubble { display: flex; flex-direction: column; max-width: 65%; min-width: 110px; }

.messages-skeleton-bubble-inner {
  padding: 10px 13px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.messages-skeleton-received .messages-skeleton-bubble-inner {
  background: rgba(253,252,251,0.85);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  border-bottom-left-radius: 4px;
}

.messages-skeleton-sent .messages-skeleton-bubble-inner {
  background: rgba(45,122,80,0.12);
  border-bottom-right-radius: 4px;
}

.messages-skeleton-line {
  height: 11px;
  border-radius: 5px;
  background: linear-gradient(90deg, #e0d9d1 25%, #cfc8be 50%, #e0d9d1 75%);
  background-size: 300% 100%;
  animation: messagesSkelShimmer 1.6s ease-in-out infinite;
}

.messages-skeleton-sent .messages-skeleton-line {
  background: linear-gradient(90deg, #b8d4c3 25%, #86b79a 50%, #b8d4c3 75%);
  background-size: 300% 100%;
}

.messages-skeleton-line.messages-short  { width: 55%; }
.messages-skeleton-line.messages-medium { width: 80%; }
.messages-skeleton-line.messages-xshort { width: 38%; }
.messages-skeleton-line.messages-ts     { height: 8px; width: 44px; opacity: 0.45; margin-top: 1px; align-self: flex-end; }

.messages-skeleton-date-chip { display: flex; justify-content: center; margin: 2px 0 6px; }
.messages-skeleton-date-chip span {
  width: 72px;
  height: 20px;
  border-radius: 10px;
  background: linear-gradient(90deg, #e0d9d1 25%, #cfc8be 50%, #e0d9d1 75%);
  background-size: 300% 100%;
  animation: messagesSkelShimmer 1.6s ease-in-out infinite;
  display: block;
}

@keyframes messagesSkelShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

body.messages-dark-mode #messages-skeleton-loader .messages-skeleton-avatar,
body.messages-dark-mode #messages-skeleton-loader .messages-skeleton-line,
body.messages-dark-mode #messages-skeleton-loader .messages-skeleton-date-chip span {
  background: linear-gradient(90deg, #1e1c12 25%, #252218 50%, #1e1c12 75%);
  background-size: 300% 100%;
  animation: messagesSkelShimmer 1.6s ease-in-out infinite;
}

body.messages-dark-mode #messages-skeleton-loader .messages-skeleton-sent .messages-skeleton-line {
  background: linear-gradient(90deg, #1a3628 25%, #223e30 50%, #1a3628 75%);
  background-size: 300% 100%;
}

#messages-skeleton-loader.messages-hiding { animation: messagesSkelOut 0.2s ease forwards; }
@keyframes messagesSkelOut { from { opacity: 1; } to { opacity: 0; } }

/* ============================================================
   MOBILE KEYBOARD HANDLING
   ============================================================ */

body.messages-typing {
  position: fixed !important;
  width: 100% !important;
  height: 100vh !important;
  overflow: hidden !important;
}

body.messages-typing .messages-chats-header    { position: fixed !important; top: 0 !important; transform: translate3d(0,0,0) !important; }
body.messages-typing #messages-chat-messages   {
  position: fixed !important;
  top: var(--messages-header-h) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--messages-bar-h) !important;
  height: auto !important;
  margin: 0 !important;
}

/* ============================================================
   RESPONSIVE — DESKTOP
   ============================================================ */

@media (min-width: 768px) {
  body { height: auto !important; overflow: auto !important; position: static !important; }

  .messages-chats-header {
    position: static !important;
    width: 100% !important;
    transform: none !important;
  }

  #messages-chat-messages {
    height: calc(100vh - var(--messages-header-h) - var(--messages-bar-h)) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 22px 28px !important;
  }

  .messages-message-container { position: static !important; padding: 12px 28px max(16px, env(safe-area-inset-bottom)) !important; }
  .messages-message { max-width: 56% !important; font-size: 14.5px !important; width: fit-content !important; }

  body.messages-typing { position: static !important; overflow: auto !important; }
  body.messages-typing #messages-chat-messages { position: static !important; height: auto !important; }

  * { -webkit-user-select: text !important; user-select: text !important; }
  .messages-message { user-select: text !important; }

  :root { --messages-img-w: 280px; --messages-img-h: 280px; --messages-img-preview-h: 170px; }
}

@media (min-width: 1440px) {
  .messages-message { max-width: 46% !important; }
  #messages-chat-messages { padding: 26px 44px !important; }
}

/* ============================================================
   REPLY PREVIEW
   ============================================================ */

.messages-reply-preview {
  display: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px 8px 12px;
  margin: 0 0 8px;
  border-radius: var(--messages-r-sm);
  background: var(--messages-brand-glow-xs);
  border-left: 3px solid var(--messages-brand-500);
  /* Flat strip sitting directly above the compose pill, not a floating card */
}

.messages-reply-preview.messages-active {
  display: flex;
}

.messages-reply-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.messages-reply-preview-source {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--messages-text-brand);
}

.messages-reply-preview-text {
  font-size: 13px;
  color: var(--messages-text-secondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-reply-preview-close {
  border: none;
  background: transparent;
  color: var(--messages-text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.messages-reply-preview-close:hover {
  background: var(--messages-border-subtle);
}

/* ============================================================
   MOBILE SPECIFIC
   ============================================================ */

@media (max-width: 768px) {
  .messages-chats-header { position: fixed !important; padding: 0 10px 0 4px !important; }
  #messages-chat-messages { padding: 10px !important; margin-bottom: var(--messages-bar-h) !important; }
  .messages-message-container { padding: 8px 10px max(16px, env(safe-area-inset-bottom)) !important; }
  .messages-message { max-width: 82% !important; width: fit-content !important; }
  .messages-emoji-picker { width: calc(100vw - 24px) !important; left: 50% !important; transform: translateX(-50%) !important; }
  #messages-chat-messages::-webkit-scrollbar { display: none; }
  .messages-modal-content { border-radius: var(--messages-r-xl) var(--messages-r-xl) 0 0; position: fixed; bottom: 0; left: 0; right: 0; max-width: 100%; max-height: 85vh; }
  :root { --messages-img-w: 210px; --messages-img-h: 210px; --messages-img-preview-h: 150px; }
}

/* ============================================================
   IFRAME MODE
   ============================================================ */

body.messages-is-in-iframe .messages-chats-header     { position: static !important; top: auto !important; transform: none !important; will-change: auto !important; }
body.messages-is-in-iframe #messages-chat-messages    { flex: 1 !important; height: auto !important; max-height: none !important; margin: 0 !important; position: relative !important; }
body.messages-is-in-iframe .messages-message-container{ position: static !important; margin-top: auto !important; }
body.messages-is-in-iframe.messages-typing            { position: static !important; overflow: auto !important; }

@media (min-width: 1024px) {
  body.messages-is-in-iframe { background: transparent !important; height: 100vh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; }
  body.messages-is-in-iframe .messages-chats-header   { position: static !important; min-height: var(--messages-header-h) !important; max-height: var(--messages-header-h) !important; }
  body.messages-is-in-iframe #messages-chat-messages  { flex: 1 !important; height: auto !important; margin: 0 !important; }
  body.messages-is-in-iframe .messages-message-container { position: static !important; margin-top: auto !important; }
}

/* Smooth scroll anchor */
#messages-chat-messages {
  scroll-behavior: smooth;
  overflow-anchor: auto;
}

/* Anchor the latest message when new ones arrive */
#messages-chat-messages::after {
  content: '';
  display: block;
  height: 1px;
  margin-bottom: -1px;
  overflow-anchor: auto;
}