/* SWA Chat — WhatsApp Business–style desks & groups */
:root {
  --wa-teal: #008069;
  --wa-teal-deep: #075e54;
  --wa-teal-soft: #25d366;
  --wa-panel: #ffffff;
  --wa-panel-2: #f0f2f5;
  --wa-chat-bg: #eae6df;
  --wa-out: #d9fdd3;
  --wa-in: #ffffff;
  --wa-ink: #111b21;
  --wa-mute: #667781;
  --wa-line: #e9edef;
  --wa-danger: #ea0038;
  --chat-green: var(--wa-teal-deep);
  --chat-green-2: var(--wa-teal);
  --chat-lime: #d1f4cc;
  --chat-mint: #f0f2f5;
  --chat-bg: transparent;
  --chat-panel: var(--wa-panel);
  --chat-ink: var(--wa-ink);
  --chat-mute: var(--wa-mute);
  --chat-line: var(--wa-line);
  --chat-glass: var(--wa-panel);
  --chat-glass-strong: var(--wa-panel);
  --chat-sidebar-w: min(380px, 100vw);
  --font-display: "Nunito", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Nunito", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --glass-blur: none;
  --glass-shadow: 0 1px 3px rgba(11, 20, 26, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hidden, [hidden] { display: none !important; }

body.swa-chat-body {
  margin: 0;
  min-height: 100dvh;
  height: var(--app-h, 100dvh);
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--chat-ink);
  -webkit-font-smoothing: antialiased;
  background: #0b141a;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.chat-banner {
  position: fixed; top: 0.75rem; left: 50%; transform: translateX(-50%) translateY(-120%);
  z-index: 1200; max-width: min(520px, calc(100vw - 2rem));
  padding: 0.7rem 1rem; border-radius: 8px;
  background: #fff; border: 1px solid var(--wa-line); box-shadow: var(--glass-shadow);
  font-size: 0.88rem; font-weight: 600; transition: transform 0.2s ease;
}
.chat-banner.show { transform: translateX(-50%) translateY(0); }
.chat-banner[data-kind="error"] { color: #8b1e1a; background: #fff0ee; }

/* Auth gate */
.chat-auth-gate {
  min-height: 100dvh; display: grid; place-items: center; padding: 1.25rem;
  background: linear-gradient(180deg, #0b141a 0%, #111b21 100%);
}
.chat-auth-card {
  width: min(420px, 100%); text-align: center;
  padding: 2rem 1.5rem 1.75rem; border-radius: 12px;
  background: #fff; border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  animation: chatGateIn 0.35s ease;
}
.chat-auth-gate.is-checking .chat-welcome-actions,
.chat-auth-gate.is-checking .chat-gate-points { display: none; }
.chat-auth-gate.is-checking .chat-auth-hint {
  margin-top: 1.25rem !important; font-size: 0.9rem !important; color: var(--wa-teal) !important;
}
.chat-auth-card--hero .chat-brand-mark--lg {
  box-shadow: none;
}
.chat-welcome-kicker {
  margin: 0.85rem 0 0; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--wa-teal);
}
.chat-auth-card h1 {
  margin: 0.35rem 0 0.45rem; font-family: var(--font-display);
  font-size: clamp(1.55rem, 4vw, 1.9rem); color: var(--wa-ink); letter-spacing: -0.02em;
}
.chat-auth-card > p { margin: 0 0 1rem; color: var(--chat-mute); line-height: 1.5; }
.chat-gate-points {
  list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.45rem; text-align: left;
}
.chat-gate-points li {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.75rem; border-radius: 8px;
  background: var(--wa-panel-2); border: 1px solid var(--wa-line);
  color: #2a3d32; font-size: 0.88rem; font-weight: 600;
}
.chat-gate-points i { color: var(--wa-teal); width: 1.1rem; text-align: center; }
.chat-auth-hint { margin: 1rem 0 0 !important; font-size: 0.78rem !important; color: var(--chat-mute); }
@keyframes chatGateIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.theme-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.72rem 1.15rem; border-radius: 8px; font: inherit; font-weight: 700;
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: background 0.12s ease, color 0.12s ease;
}
.theme-btn.btn-one {
  background: var(--wa-teal); color: #fff; box-shadow: none;
}
.theme-btn.btn-one:hover { background: var(--wa-teal-deep); }
.theme-btn.btn-two {
  background: var(--wa-panel-2); color: var(--wa-teal-deep);
  border-color: var(--wa-line);
}
.theme-btn.btn-two:hover { background: #e7eaed; }
.theme-btn:focus-visible { outline: 2px solid var(--wa-teal-soft); outline-offset: 2px; }
.theme-btn:active { opacity: 0.92; }
.theme-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-welcome-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }

/* App shell */
.swa-chat-app {
  display: grid;
  grid-template-columns: var(--chat-sidebar-w) 1fr;
  height: var(--app-h, 100dvh); width: 100%; max-width: 1600px; margin: 0 auto;
  background: #111b21; overflow: hidden;
  box-shadow: 0 0 0 1px #222d34;
}
@media (min-width: 1100px) {
  .swa-chat-app {
    margin: 0 auto; height: 100dvh; border-radius: 0;
    border: 0; box-shadow: none; background: #111b21;
  }
}
@media (max-width: 900px) {
  .swa-chat-app { grid-template-columns: 1fr; height: 100dvh; margin: 0; border-radius: 0; }
  .swa-chat-app.show-thread .chat-sidebar { display: none; }
  .swa-chat-app:not(.show-thread) .chat-thread { display: none; }
}

.chat-sidebar {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--wa-panel);
  border-right: 1px solid var(--wa-line);
}
.chat-side-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 0.45rem;
  padding: 0.65rem 0.85rem;
  background: var(--wa-panel-2);
  color: var(--wa-ink); border-bottom: 1px solid var(--wa-line);
}
.chat-brand {
  display: flex; align-items: center; gap: 0.55rem;
  color: inherit; text-decoration: none; min-width: 0; flex: 1;
}
.chat-brand-mark {
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wa-teal); color: #fff;
  font-family: var(--font-display); font-weight: 800; flex-shrink: 0;
}
.chat-brand-mark--lg { width: 3.25rem; height: 3.25rem; font-size: 1.25rem; margin: 0 auto; }
.chat-brand-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-brand-copy strong {
  font-family: var(--font-display); font-size: 1rem; letter-spacing: -0.01em; line-height: 1.15;
}
.chat-brand-copy em {
  font-style: normal; font-size: 0.72rem; color: var(--wa-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
.chat-presence-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.55rem; border-radius: 999px;
  background: #dff7e6; color: var(--wa-teal-deep);
  font-size: 0.68rem; font-weight: 700; white-space: nowrap;
}
.chat-presence-pill i { font-size: 0.45rem; color: var(--wa-teal-soft); }
.chat-presence-pill.is-offline { color: var(--wa-mute); background: #eceff1; }
.chat-presence-pill.is-offline i { color: #c5c5c5; }
@media (max-width: 600px) {
  .chat-presence-pill { padding: 0.2rem 0.45rem; font-size: 0.6rem; }
}
.chat-side-actions { display: flex; gap: 0.15rem; flex-shrink: 0; }
.chat-icon-btn {
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: #54656f; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.12s ease;
}
.chat-icon-btn:hover { background: rgba(11, 20, 26, 0.06); }
.chat-icon-btn:focus-visible,
.chat-msg-act:focus-visible,
.chat-room-item:focus-visible,
.emoji-btn:focus-visible {
  outline: 2px solid var(--wa-teal-soft);
  outline-offset: 2px;
}
.chat-side-head .chat-icon-btn { color: #54656f; }
.chat-icon-btn--accent { background: transparent !important; color: var(--wa-teal) !important; }
.chat-icon-btn--accent:hover { background: rgba(0, 128, 105, 0.08) !important; }

.chat-side-menu, .chat-thread-menu {
  position: absolute; right: 0.55rem; top: calc(100% - 0.15rem); z-index: 30;
  min-width: 220px; max-width: min(280px, calc(100vw - 1.5rem));
  padding: 0.4rem;
  background: #fff; color: var(--chat-ink);
  border: 1px solid var(--wa-line);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(11, 20, 26, 0.16);
  display: grid; gap: 0.05rem;
  animation: chatMenuIn 0.14s ease-out;
}
@keyframes chatMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.chat-menu-label {
  margin: 0.35rem 0.55rem 0.15rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--chat-mute);
}
.chat-menu-sep {
  height: 1px; margin: 0.3rem 0.4rem;
  background: var(--wa-line);
}
.chat-side-menu a, .chat-side-menu button, .chat-thread-menu button {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.65rem 0.75rem; border: 0; border-radius: 8px;
  background: transparent; color: inherit; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; text-align: left;
  transition: background 0.12s ease;
}
.chat-side-menu a:hover, .chat-side-menu button:hover, .chat-thread-menu button:hover {
  background: #f0f2f5;
}
.chat-side-menu i, .chat-thread-menu i {
  width: 1.1rem; color: #54656f; text-align: center; font-size: 0.9rem;
}
.chat-menu-danger { color: var(--wa-danger) !important; }
.chat-menu-danger i { color: var(--wa-danger) !important; }
.chat-menu-danger:hover { background: #ffebee !important; }

.chat-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--wa-line); background: #fff;
}
.chat-tabs button {
  border: 0; background: transparent; padding: 0.75rem 0.4rem;
  font-weight: 600; font-size: 0.88rem; color: var(--chat-mute); cursor: pointer;
  border-bottom: 2px solid transparent;
}
.chat-tabs button.active {
  color: var(--wa-teal); border-bottom-color: var(--wa-teal); background: transparent;
}
.chat-tab-count {
  display: inline-grid; place-items: center;
  min-width: 1.15rem; height: 1.15rem; margin-left: 0.25rem; padding: 0 0.3rem;
  border-radius: 999px; background: #e9edef; color: #54656f;
  font-size: 0.66rem; font-weight: 700;
}
.chat-tabs button.active .chat-tab-count { background: var(--wa-teal); color: #fff; }
.chat-section-label {
  margin: 0.55rem 0.9rem 0.2rem; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--chat-mute);
}

.chat-search {
  position: relative; padding: 0.45rem 0.7rem 0.35rem; background: #fff;
}
.chat-search > i {
  position: absolute; left: 1.35rem; top: 50%; transform: translateY(-50%);
  color: var(--chat-mute); font-size: 0.8rem; pointer-events: none; z-index: 1;
}
.chat-search input {
  width: 100%; border: 0; border-radius: 8px;
  padding: 0.55rem 2.1rem 0.55rem 2.25rem; background: var(--wa-panel-2);
  font: inherit; outline: none; color: var(--wa-ink);
}
.chat-search input:focus { background: #e9edef; box-shadow: none; }
.chat-search-clear {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: transparent; color: #54656f; cursor: pointer;
  display: grid; place-items: center;
}
.chat-search-clear:hover { background: rgba(11,20,26,0.06); }

.chat-filter-chips {
  display: flex; gap: 0.4rem; padding: 0 0.7rem 0.55rem;
  background: #fff; border-bottom: 1px solid var(--wa-line);
  overflow-x: auto;
}
.chat-filter-chip {
  border: 1px solid var(--wa-line); background: #fff; color: #54656f;
  border-radius: 999px; padding: 0.28rem 0.7rem; font: inherit;
  font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chat-filter-chip:hover { background: #f5f6f6; }
.chat-filter-chip.active {
  background: #e7fce3; border-color: #e7fce3; color: #008069;
}

.chat-room-list { flex: 1; overflow-y: auto; min-height: 0; }
.chat-skeleton { padding: 0.75rem; display: grid; gap: 0.65rem; }
.chat-skeleton-row {
  height: 56px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(238,242,239,0.7) 25%, rgba(247,249,247,0.9) 50%, rgba(238,242,239,0.7) 75%);
  background-size: 200% 100%; animation: chatShimmer 1.2s ease infinite;
}
@keyframes chatShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.chat-room-item {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 0.7rem;
  padding: 0.7rem 0.9rem; cursor: pointer; align-items: center;
  border-bottom: 1px solid var(--wa-line);
}
.chat-room-item:hover, .chat-room-item:focus-visible { background: #f5f6f6; }
.chat-room-item.active { background: #f0f2f5; box-shadow: none; }
.chat-room-item.starred { background: #fffdf5; }

.chat-avatar {
  width: 49px; height: 49px; border-radius: 50%;
  background: #dfe5e7; color: #54656f;
  display: grid; place-items: center; font-weight: 700; flex-shrink: 0;
}
.chat-avatar.private { background: #cfd8dc; color: #37474f; }
.chat-avatar--sm { width: 36px; height: 36px; font-size: 0.8rem; }
.chat-room-meta strong { display: flex; align-items: center; gap: 0.3rem; font-size: 0.92rem; margin-bottom: 0.1rem; }
.chat-room-meta span {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; max-width: none; width: 100%;
  font-size: 0.78rem; color: var(--chat-mute);
}
.chat-room-time { font-size: 0.66rem; color: var(--chat-mute); text-align: right; align-self: start; padding-top: 0.15rem; }
.chat-room-item.unread .chat-room-time { color: var(--chat-green-2); font-weight: 700; }
.chat-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chat-green-2); flex-shrink: 0; }
.chat-unread-count {
  display: inline-grid; place-items: center; min-width: 1.1rem; height: 1.1rem;
  margin-top: 0.3rem; border-radius: 999px; background: var(--chat-green-2); color: #fff; font-size: 0.62rem; font-weight: 800;
}
.chat-badge {
  display: inline-block; margin-top: 0.22rem; font-size: 0.6rem; padding: 0.1rem 0.4rem;
  border-radius: 999px; background: rgba(231,246,236,0.9); color: var(--chat-green-2);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
}
.chat-badge.lock { background: #fff4d6; color: #8a6419; }
.chat-badge.chat-badge--owner { display: inline-block; margin: 0 0 0 0.4rem; vertical-align: middle; background: #e7f6ec; color: var(--chat-green-2); }
.chat-star-icon { color: #d4a017; font-size: 0.72rem; margin-right: 0.2rem; }
.chat-mute-icon { color: var(--chat-mute); font-size: 0.68rem; margin-left: 0.3rem; }
.chat-empty-actions { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.5rem 1rem; }
.chat-empty-actions .theme-btn { width: 100%; }
.chat-empty-hint { margin: 0; text-align: center; color: var(--chat-mute); font-size: 0.9rem; }

.chat-thread {
  display: flex; flex-direction: column; min-height: 0;
  background:
    linear-gradient(rgba(234, 230, 223, 0.92), rgba(234, 230, 223, 0.92)),
    repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(0,0,0,0.015) 12px),
    #eae6df;
}
.chat-thread-empty { flex: 1; display: grid; place-items: center; padding: 1.5rem; }
.chat-welcome {
  width: min(420px, 100%); text-align: center; padding: 1.5rem 1.1rem;
  border-radius: 10px; background: #fff;
  border: 1px solid var(--wa-line); box-shadow: var(--glass-shadow);
}
.chat-welcome--desk .chat-welcome-art { display: grid; place-items: center; margin-bottom: 0.15rem; }
.chat-welcome .chat-welcome-kicker { margin-top: 0.65rem; }
.chat-welcome h2 {
  margin: 0.35rem 0 0.4rem; font-family: var(--font-display);
  font-size: 1.35rem; color: var(--wa-ink); letter-spacing: -0.01em;
}
.chat-welcome > p { margin: 0 0 1.1rem; color: var(--chat-mute); line-height: 1.45; }
.chat-welcome-hint {
  margin: 1.1rem 0 0.45rem !important; font-size: 0.72rem !important; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--chat-mute) !important;
}
.chat-quick-topics, .chat-quick-replies {
  display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 1rem;
}
.chat-quick-replies {
  justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;
  margin: 0; padding: 0.4rem 0.75rem 0; max-height: 44px;
}
.chat-chip {
  border: 1px solid var(--wa-line); background: #fff; color: var(--wa-teal-deep);
  border-radius: 999px; padding: 0.35rem 0.7rem; font: inherit; font-size: 0.78rem;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chat-chip:hover { background: #f0f2f5; }

.chat-active { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-active:not(.hidden):not([hidden]) { display: flex !important; }
.chat-thread-head {
  position: relative; display: flex; align-items: center; gap: 0.65rem;
  padding: 0.45rem 0.85rem;
  background: var(--wa-panel-2);
  border-bottom: 1px solid var(--wa-line);
}
.chat-thread-head .chat-avatar { width: 40px; height: 40px; font-size: 0.9rem; }
.chat-thread-head .info { flex: 1; min-width: 0; }
.chat-thread-head .info strong {
  display: block; font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-thread-head .info span { font-size: 0.74rem; color: var(--chat-mute); }
.chat-thread-tools { display: flex; gap: 0.1rem; }
.chat-thread-tools .chat-icon-btn { color: #52645a; }
.chat-thread-tools .chat-icon-btn:hover { background: rgba(238,243,239,0.9); }
.chat-back-mobile { display: none; color: #52645a; }
@media (max-width: 900px) { .chat-back-mobile { display: grid; } }
@media (max-width: 600px) {
  .chat-thread-tools .chat-icon-btn#btn-invite,
  .chat-thread-tools .chat-icon-btn#btn-audio-call { display: none; } /* keep video + more + search + back */
  .chat-thread-head .info strong { font-size: 0.9rem; }
}

.chat-thread-search {
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0.4rem 0.55rem; background: var(--wa-panel-2);
  border-bottom: 1px solid var(--wa-line);
}
.chat-thread-search > i { color: var(--chat-mute); margin-left: 0.25rem; }
.chat-thread-search input {
  flex: 1; border: 0; border-radius: 8px; padding: 0.45rem 0.65rem;
  font: inherit; outline: none; background: #fff; min-width: 0;
}
.chat-search-count {
  font-size: 0.72rem; font-weight: 700; color: var(--chat-mute);
  white-space: nowrap; padding: 0 0.25rem;
}
.chat-hit {
  background: #ffe082; color: inherit; border-radius: 2px; padding: 0 0.05em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.chat-bubble.is-search-hit {
  outline: 2px solid rgba(0, 128, 105, 0.45);
  outline-offset: 1px;
}
.chat-bubble.is-search-current {
  outline-color: var(--wa-teal);
  box-shadow: 0 0 0 3px rgba(0, 128, 105, 0.18);
}
.chat-reply-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.75rem; background: rgba(238,246,240,0.85); border-bottom: 1px solid rgba(227,235,229,0.8);
}
.chat-reply-bar-copy { flex: 1; min-width: 0; }
.chat-reply-bar-copy strong { display: block; font-size: 0.72rem; color: var(--chat-green-2); }
.chat-reply-bar-copy span {
  display: block; font-size: 0.8rem; color: var(--chat-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-reply-quote {
  border-left: 3px solid var(--chat-green-2); padding: 0.2rem 0.45rem; margin-bottom: 0.3rem;
  background: rgba(21,122,62,0.08); border-radius: 0 8px 8px 0;
}
.chat-reply-quote strong { display: block; font-size: 0.68rem; color: var(--chat-green-2); }
.chat-reply-quote span { font-size: 0.78rem; color: var(--chat-mute); }

.chat-messages-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-messages-wrap.drag-over::after {
  content: "Drop file to send"; position: absolute; inset: 0; z-index: 8;
  display: grid; place-items: center; background: rgba(11,20,26,0.72); color: #fff;
  font-weight: 700; font-size: 1rem; pointer-events: none;
}
.chat-jump-latest {
  position: absolute; right: 1rem; bottom: 0.85rem; z-index: 5;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #fff; color: var(--wa-teal); cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18); display: grid; place-items: center;
}
.chat-thread-head .info {
  min-width: 0; display: flex; flex-direction: column; gap: 0.05rem;
}
.chat-thread-head .info strong {
  font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-thread-head .info span#thread-sub {
  font-size: 0.72rem; color: var(--chat-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-typing-line {
  font-size: 0.72rem; font-weight: 700; color: var(--chat-green-2);
  animation: chatTypingPulse 1.1s ease-in-out infinite;
}
@keyframes chatTypingPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.chat-live-dot {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.28rem 0.5rem; border-radius: 999px;
  background: rgba(198,240,154,0.35); color: var(--chat-green-2);
  margin-right: 0.15rem;
}
.chat-live-dot.is-offline {
  background: rgba(255, 220, 210, 0.7); color: #9b2c1f;
}
.chat-unread-pill {
  display: inline-block; margin-top: 0.2rem; padding: 0.1rem 0.4rem;
  border-radius: 999px; background: var(--chat-green-2); color: #fff;
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}
.chat-deleted { color: var(--chat-mute); font-style: italic; }
.chat-msg-tick.is-pending { color: #8696a0; letter-spacing: 0.05em; }
.chat-messages { scroll-behavior: auto; }
.chat-bubble.is-new { animation: chatBubbleIn 0.28s ease; }
@keyframes chatBubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-day-sep {
  position: sticky; top: 0.35rem; z-index: 2;
  align-self: center; margin: 0.85rem 0 0.55rem; padding: 0.28rem 0.75rem;
  border-radius: 8px; background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 1px rgba(11,20,26,0.08);
  font-size: 0.72rem; font-weight: 600; color: #54656f;
}
.chat-messages {
  flex: 1; overflow-y: auto; padding: 0.65rem 3.5% 1.1rem;
  display: flex; flex-direction: column; gap: 0; min-height: 0;
}
.chat-bubble {
  position: relative;
  max-width: min(85%, 420px); padding: 0.35rem 0.5rem 0.28rem;
  border-radius: 8px; background: var(--wa-in);
  border: 0; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  align-self: flex-start; margin-top: 0.28rem;
}
.chat-bubble.mine { align-self: flex-end; background: var(--wa-out); }
.chat-bubble.group-mid, .chat-bubble.group-end { margin-top: 0.06rem; }
.chat-bubble.group-start:not(.mine), .chat-bubble.group-alone:not(.mine) { border-radius: 0 8px 8px 8px; }
.chat-bubble.group-mid:not(.mine), .chat-bubble.group-end:not(.mine) { border-radius: 0 8px 8px 8px; }
.chat-bubble.group-start.mine, .chat-bubble.group-alone.mine { border-radius: 8px 0 8px 8px; }
.chat-bubble.group-mid.mine, .chat-bubble.group-end.mine { border-radius: 8px 0 8px 8px; }
.chat-bubble.has-media { padding: 0.28rem; max-width: min(78%, 340px); }
.chat-bubble.media-only { padding: 0.2rem; }
.chat-bubble .sender {
  font-size: 0.78rem; font-weight: 700; color: #06cf9c;
  margin: 0.15rem 0.35rem 0.2rem; letter-spacing: 0.01em;
}
.chat-bubble .body {
  font-size: 0.94rem; line-height: 1.45; white-space: pre-wrap;
  word-break: break-word; color: var(--wa-ink);
}
.chat-bubble .body a { color: #027eb5; font-weight: 500; text-decoration: none; }
.chat-caption { padding: 0.35rem 0.4rem 0.1rem; white-space: pre-wrap; }
.chat-bubble .meta {
  text-align: right; font-size: 0.68rem; color: #667781;
  margin: 0.1rem 0.2rem 0.05rem; line-height: 1;
}
.chat-msg-tick { color: #8696a0; font-weight: 700; margin-left: 0.15rem; }
.chat-msg-tick.is-delivered { letter-spacing: -0.15em; }
.chat-msg-tick.is-read { color: #53bdeb; letter-spacing: -0.15em; }
.chat-bubble.mine .chat-msg-tick.is-read { color: #53bdeb; }

.chat-media {
  position: relative; display: block; width: 100%;
  border: 0; padding: 0; background: #0b141a; border-radius: 6px;
  overflow: hidden; cursor: pointer; text-align: left;
  min-height: 120px;
}
.chat-media--image img {
  display: block; width: 100%; max-height: 360px; object-fit: cover;
  background: #1a2329; vertical-align: middle;
}
.chat-media.is-loaded img { background: transparent; }
.chat-media-shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
  background: linear-gradient(transparent, rgba(0,0,0,0.45));
  pointer-events: none;
}
.chat-media-meta {
  position: absolute; right: 0.45rem; bottom: 0.3rem; z-index: 2;
  color: #fff; font-size: 0.68rem; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.chat-media-meta .chat-msg-tick { color: #fff; }
.chat-media-broken {
  display: none; position: absolute; inset: 0; place-items: center;
  color: #c5c5c5; font-size: 0.85rem; font-weight: 600; background: #1a2329;
}
.chat-media.is-broken .chat-media-broken { display: grid; }
.chat-media.is-broken img, .chat-media.is-broken .chat-media-shade { display: none; }
.chat-media--video video {
  display: block; width: 100%; max-height: 320px; background: #000; border-radius: 6px;
}

.chat-audio-msg {
  display: flex; align-items: center; gap: 0.55rem;
  min-width: 220px; max-width: 280px; padding: 0.35rem 0.45rem;
}
.chat-audio-msg audio { display: none; }
.chat-audio-play {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--wa-teal); color: #fff; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
}
.chat-audio-wave {
  flex: 1; display: flex; align-items: center; gap: 3px; height: 28px;
}
.chat-audio-wave span {
  flex: 1; border-radius: 2px; background: rgba(0,128,105,0.35);
  height: 40%;
}
.chat-audio-wave span:nth-child(2) { height: 70%; }
.chat-audio-wave span:nth-child(3) { height: 100%; }
.chat-audio-wave span:nth-child(4) { height: 55%; }
.chat-audio-wave span:nth-child(5) { height: 80%; }
.chat-audio-len { font-size: 0.72rem; font-weight: 700; color: #54656f; }

.chat-file-chip {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.65rem;
  border-radius: 8px; background: rgba(0,0,0,0.04); text-decoration: none; color: inherit;
  max-width: 260px; margin: 0.15rem;
}
.chat-file-chip i { color: var(--wa-teal); font-size: 1.35rem; }
.chat-file-chip span { font-size: 0.86rem; font-weight: 600; word-break: break-word; }

.chat-lightbox {
  position: fixed; inset: 0; z-index: 2000; display: none; place-items: center;
  background: rgba(11,20,26,0.92); padding: 1rem;
}
.chat-lightbox.show { display: grid; }
.chat-lightbox img {
  max-width: min(96vw, 920px); max-height: 82vh; object-fit: contain;
  border-radius: 4px; box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}
.chat-lightbox-close {
  position: absolute; top: 0.85rem; right: 1rem; border: 0; background: transparent;
  color: #fff; font-size: 2rem; cursor: pointer; line-height: 1;
}
.chat-lightbox-open {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  color: #fff; font-weight: 600; font-size: 0.88rem;
}

.chat-msg-actions {
  display: flex; gap: 0.15rem; margin-top: 0.2rem; justify-content: flex-end;
  opacity: 1; /* was hover-only */
}
@media (hover: hover) {
  .chat-bubble .chat-msg-actions { opacity: 0; }
  .chat-bubble:hover .chat-msg-actions,
  .chat-bubble:focus-within .chat-msg-actions,
  .chat-bubble.is-open .chat-msg-actions { opacity: 1; }
}
/* Touch devices: always show a compact "..." trigger since :hover never fires */
.chat-bubble-menu {
  display: none; position: absolute; top: 0.15rem; right: 0.15rem;
  border: 0; background: rgba(255,255,255,0.9); border-radius: 50%;
  width: 24px; height: 24px; place-items: center; color: #54656f;
  font-size: 0.7rem; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
@media (hover: none), (pointer: coarse) {
  .chat-bubble-menu { display: grid; }
}
/* Always-visible message actions trigger, regardless of input/hover capability */
.chat-msg-more {
  display: grid; position: absolute; top: 0.15rem; right: 0.15rem;
  border: 0; background: rgba(255,255,255,0.92); border-radius: 50%;
  width: 22px; height: 22px; place-items: center; color: #54656f;
  font-size: 0.72rem; line-height: 1; cursor: pointer; z-index: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.chat-msg-more:hover, .chat-bubble.is-open .chat-msg-more { background: #fff; color: var(--wa-teal); }
.chat-bubble.system {
  align-self: center; background: rgba(255,255,255,0.92); border: 0;
  font-size: 0.75rem; max-width: 90%; text-align: center; border-radius: 8px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); padding: 0.35rem 0.85rem; margin: 0.55rem 0 0.15rem;
  color: var(--wa-mute);
}
.chat-msg-act {
  border: 0; background: rgba(255,255,255,0.95); border-radius: 50%;
  width: 28px; height: 28px; cursor: pointer; font-size: 0.78rem;
  display: grid; place-items: center; color: #54656f;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.chat-msg-act:hover { background: #fff; color: var(--wa-teal); }
.chat-reactions { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }
.chat-reaction {
  border: 1px solid var(--wa-line); background: #fff; border-radius: 999px;
  padding: 0.1rem 0.4rem; font-size: 0.75rem; cursor: pointer;
}
@keyframes chatBubbleIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.chat-compose-shell {
  background: var(--wa-panel-2);
  border-top: 1px solid var(--wa-line);
  padding-bottom: max(0.25rem, env(safe-area-inset-bottom), var(--kb-offset, 0px));
}
.chat-extra-panel {
  display: none;
  background: #fff;
  border: 1px solid var(--wa-line);
  border-radius: 12px 12px 0 0;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow: hidden;
  box-shadow: 0 -4px 16px rgba(11,20,26,0.08);
}
.chat-extra-panel.show {
  display: flex !important;
  flex-direction: column;
}
.chat-extra-panel[hidden] { display: none !important; }
.emoji-tabs {
  display: flex; gap: 0.15rem; padding: 0.4rem 0.5rem 0;
  border-bottom: 1px solid var(--wa-line); overflow-x: auto;
}
.emoji-tabs button {
  border: 0; background: transparent; color: #54656f; font-size: 1.05rem;
  padding: 0.35rem 0.55rem; border-radius: 8px 8px 0 0; cursor: pointer;
}
.emoji-tabs button.active { color: var(--wa-teal); box-shadow: inset 0 -2px 0 var(--wa-teal); }
.emoji-search {
  margin: 0.45rem 0.65rem 0.25rem; width: calc(100% - 1.3rem);
  border: 1px solid var(--wa-line); border-radius: 8px; padding: 0.45rem 0.65rem;
  font: inherit; outline: none; background: var(--wa-panel-2);
}
.emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.1rem;
  padding: 0.35rem 0.45rem 0.65rem; overflow-y: auto; max-height: 180px;
}
.emoji-grid button, .emoji-btn {
  border: 0; background: transparent; font-size: 1.55rem; cursor: pointer;
  padding: 0.28rem; border-radius: 8px; line-height: 1.15;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.emoji-grid button:hover, .emoji-btn:hover { background: #f0f2f5; }
.chat-compose { display: flex; align-items: flex-end; gap: 0.35rem; padding: 0.4rem 0.55rem 0.5rem; }
.chat-compose-tool { color: #54656f; }
.chat-compose-tool:hover { background: rgba(11,20,26,0.06); }
.chat-compose-field { flex: 1; min-width: 0; }
.chat-compose-field textarea {
  width: 100%; border: 0; border-radius: 24px;
  padding: 0.65rem 0.95rem; font: inherit; resize: none; max-height: 110px;
  min-height: 42px; outline: none; background: #fff; line-height: 1.35; overflow-y: auto;
  box-shadow: 0 1px 1px rgba(0,0,0,0.06);
}
.chat-compose-field textarea:focus {
  border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
#char-count.is-warn { color: #c0392b; font-weight: 700; }
.chat-send {
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--wa-teal); color: #fff; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: none;
}
.chat-send:hover { background: var(--wa-teal-deep); }
.chat-send:disabled, .chat-send.is-sending { opacity: 0.45; cursor: not-allowed; }
.chat-send.is-mic { background: var(--wa-teal); }
.chat-send.is-recording { background: var(--wa-danger); }
@keyframes pulseRec { 50% { opacity: 0.75; } }

.chat-attach-sheet {
  display: none; grid-template-columns: repeat(4, 1fr); gap: 0.75rem;
  padding: 0.85rem 1rem 1rem; background: #fff; border-top: 1px solid var(--wa-line);
}
.chat-attach-sheet.show { display: grid; }
.chat-attach-sheet button {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  display: grid; gap: 0.35rem; justify-items: center; color: var(--wa-ink); font-size: 0.72rem; font-weight: 600;
}
.chat-attach-sheet .ico {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 1.15rem;
}
.chat-attach-sheet .ico.photo { background: #7f66ff; }
.chat-attach-sheet .ico.doc { background: #5157ae; }
.chat-attach-sheet .ico.video { background: #ff2e74; }
.chat-attach-sheet .ico.audio { background: #02a698; }

.chat-voice-bar {
  display: none; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0.9rem; background: #fff; border-top: 1px solid var(--wa-line);
  color: var(--wa-danger); font-weight: 700;
}
.chat-voice-bar.show { display: flex; }
.chat-voice-bar .dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--wa-danger);
  animation: pulseRec 1s ease infinite;
}

.chat-modal {
  position: fixed; inset: 0; background: rgba(11, 20, 26, 0.55);
  display: none; place-items: center; z-index: 1000; padding: 1rem;
}
.chat-modal.show { display: grid; background: rgba(0,0,0,0.45); }
.chat-modal-card {
  width: min(420px, 100%);
  background: #fff;
  border: 1px solid var(--wa-line);
  border-radius: 12px; padding: 1.25rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.chat-modal-card h3 { margin: 0 0 0.75rem; font-family: var(--font-display); color: var(--wa-ink); }
.chat-modal-lede { margin: 0 0 0.75rem; color: var(--chat-mute); font-size: 0.88rem; }
.chat-modal-card label { display: block; font-size: 0.78rem; font-weight: 700; margin: 0.65rem 0 0.25rem; }
.chat-modal-card input, .chat-modal-card select {
  width: 100%; border: 1px solid rgba(227,235,229,0.95); border-radius: 12px;
  padding: 0.65rem 0.75rem; font: inherit; background: rgba(255,255,255,0.85); outline: none;
}
.chat-modal-card input:focus, .chat-modal-card select:focus {
  border-color: rgba(21,122,62,0.45); box-shadow: 0 0 0 3px rgba(21,122,62,0.12);
}
.chat-modal-actions { display: flex; gap: 0.45rem; justify-content: flex-end; margin-top: 1rem; }
.chat-btn-danger { background: var(--wa-danger) !important; }
.chat-btn-danger:hover { background: #c40030 !important; }
.chat-modal-actions--wrap { flex-wrap: wrap; }
.chat-auth-modal-card { width: min(400px, 100%); }
.chat-auth-modal-card .chat-check {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--chat-mute); cursor: pointer;
}
.chat-auth-modal-card .chat-check input { width: auto; margin: 0; }
.btn-google {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem 1rem; border-radius: 12px; border: 1px solid rgba(227,235,229,0.95);
  background: rgba(255,255,255,0.9); color: #222; font: inherit; font-weight: 700; cursor: pointer;
}
.btn-google:hover { background: #fff; }
.btn-google:disabled { opacity: 0.55; cursor: not-allowed; }
.chat-auth-divider {
  display: flex; align-items: center; gap: 0.65rem;
  margin: 0.85rem 0; color: var(--chat-mute); font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.chat-auth-divider::before, .chat-auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(227,235,229,0.95); }
.chat-form-error {
  margin: 0 0 0.65rem; padding: 0.55rem 0.7rem; border-radius: 10px;
  background: #fff1f0; color: #a12622; font-size: 0.84rem; text-align: left;
}
.chat-auth-switch { margin: 0.9rem 0 0; text-align: center; font-size: 0.86rem; color: var(--chat-mute); }
.chat-text-link {
  border: 0; background: none; color: var(--chat-green-2); font: inherit; font-weight: 700;
  cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px;
}
.chat-invite-code {
  font-family: ui-monospace, monospace; font-size: 1.35rem; font-weight: 800;
  letter-spacing: 0.12em; text-align: center; margin: 0.5rem 0; color: var(--chat-green);
}
.chat-invite-link {
  font-size: 0.75rem; color: var(--chat-mute); word-break: break-all; text-align: center; margin: 0 0 0.5rem;
}
.chat-code-input { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.chat-members-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; max-height: 260px; overflow: auto;
}
.chat-members-list li {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.35rem;
  border-bottom: 1px solid rgba(241,244,242,0.9); font-weight: 600; font-size: 0.9rem;
}
.chat-members-list .chat-member-name { flex: 1; }
.chat-load-more {
  display: block; width: calc(100% - 1rem); margin: 0.5rem auto 0.75rem;
  font-size: 0.85rem;
}

.chat-call-overlay {
  position: fixed; inset: 0; z-index: 1100; display: none; place-items: center;
  background: rgba(4,20,12,0.82); color: #fff; text-align: center; padding: 1rem;
}
.chat-call-overlay.show { display: grid; }
.chat-call-videos { position: relative; width: min(720px, 100%); margin: 1rem auto; }
#remote-video { width: 100%; max-height: 70vh; border-radius: 16px; background: #000; }
#local-video {
  position: absolute; right: 12px; bottom: 12px;
  width: 28%; max-width: 140px; min-width: 88px;
  border-radius: 12px; border: 2px solid rgba(255,255,255,0.35);
  max-height: 30vh; z-index: 2;
}
.chat-call-actions { display: flex; gap: 0.75rem; justify-content: center; }
.chat-call-actions button {
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
}
.chat-call-actions .mute { background: #3a4a42; }
.chat-call-actions .hangup { background: #c0392b; }