/* Nexa client UI v5
   One layout contract for desktop, mobile Safari/PWA and Android WebView. */

:root {
  color-scheme: dark;
  --nc-bg: #050817;
  --nc-panel: #091026;
  --nc-panel-2: #0d1630;
  --nc-panel-3: #121b38;
  --nc-line: rgba(135, 155, 220, .18);
  --nc-line-strong: rgba(112, 143, 255, .34);
  --nc-text: #f6f8ff;
  --nc-muted: #9da8c5;
  --nc-soft: #6f7b9a;
  --nc-cyan: #37c9ff;
  --nc-blue: #3978ff;
  --nc-violet: #7b45ff;
  --nc-pink: #d443ef;
  --nc-green: #33d58c;
  --nc-red: #ff5f7e;
  --nc-gradient: linear-gradient(135deg, #31c8ff 0%, #4d62ff 47%, #8c3dff 75%, #d63de9 100%);
  --nc-safe-top: max(10px, env(safe-area-inset-top));
  --nc-safe-bottom: max(10px, env(safe-area-inset-bottom));
  --nc-header: 68px;
  --nc-dock: 70px;
}

/* UI13: real appearance presets, accessible scaling and stable chat media. */
.appearance-preview {
  position: relative !important;
  width: 100% !important;
  min-height: 184px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 28px 18px 18px !important;
  overflow: hidden !important;
  border: 1px solid var(--nc-line-strong) !important;
  border-radius: 16px !important;
  background-position: center !important;
  background-size: cover !important;
}

.appearance-preview__date {
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: rgba(8, 13, 31, .72) !important;
  color: #aeb9d4 !important;
  font-size: 10px !important;
}

.appearance-preview__bubble {
  width: fit-content !important;
  max-width: 78% !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(151, 170, 229, .22) !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

/* UI15: deterministic chat opening, a single interactive voice player and install offer. */
.messages {
  overflow-anchor: none !important;
  overscroll-behavior-y: contain;
}

.message,
.message__bubble,
.media-preview,
.voice-note {
  overflow-anchor: none;
}

.message:has(.voice-note) {
  width: min(74%, 420px) !important;
}

.message.is-me .voice-note {
  align-self: flex-end !important;
}

.voice-note {
  --voice-progress: 0%;
  width: clamp(220px, 32vw, 340px);
  min-width: 0;
  height: 52px;
  display: grid;
  grid-template-columns: 42px minmax(90px, 1fr) 42px;
  align-items: center;
  gap: 9px;
}

.voice-note audio {
  display: none !important;
}

.voice-note__play {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #13bff2 0%, #3157ff 52%, #b22cff 100%);
  box-shadow: 0 6px 18px rgba(63, 70, 255, 0.3);
  cursor: pointer;
}

.voice-note__play span {
  width: 17px;
  display: block;
  font-size: 17px;
  line-height: 1;
  text-align: center;
}

.voice-note.is-playing .voice-note__play span {
  font-size: 15px;
}

.voice-note__seek {
  position: relative;
  height: 36px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.voice-note__wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  pointer-events: none;
}

.voice-note__wave i {
  flex: 1 1 2px;
  min-width: 2px;
  max-width: 3px;
  height: 28%;
  border-radius: 999px;
  background: currentColor;
}

.voice-note__wave i:nth-child(3n + 1) { height: 54%; }
.voice-note__wave i:nth-child(4n + 2) { height: 82%; }
.voice-note__wave i:nth-child(5n) { height: 38%; }
.voice-note__wave i:nth-child(7n) { height: 100%; }
.voice-note__wave--base { color: rgba(174, 187, 221, 0.42); }
.voice-note__wave--played {
  width: var(--voice-progress);
  color: #57dfff;
  filter: drop-shadow(0 0 5px rgba(94, 104, 255, 0.65));
}

.voice-note__time {
  color: var(--muted, #98a4c4);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.onboarding-install {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid rgba(72, 211, 255, 0.28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(17, 190, 241, 0.1), rgba(166, 43, 255, 0.12));
}

.onboarding-install img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.onboarding-install div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.onboarding-install strong { color: #f7f9ff; }
.onboarding-install span { color: var(--muted, #98a4c4); font-size: 12px; line-height: 1.35; }

@media (max-width: 980px) {
  .message:has(.voice-note) { width: min(88%, 390px) !important; }
  .voice-note { width: min(68vw, 320px); }
  .onboarding-install { grid-template-columns: 46px minmax(0, 1fr); }
  .onboarding-install img { width: 46px; height: 46px; }
  .onboarding-install .primary-button { grid-column: 1 / -1; width: 100%; }
}

.appearance-preview__bubble--in { align-self: flex-start !important; border-bottom-left-radius: 5px !important; }
.appearance-preview__bubble--out { align-self: flex-end !important; border-bottom-right-radius: 5px !important; }

.appearance-label {
  margin: 16px 0 8px !important;
  color: var(--nc-text) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

.theme-preset-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
  gap: 9px !important;
}

.theme-preset {
  position: relative !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 4px 8px !important;
  padding: 8px !important;
  border: 1px solid var(--nc-line) !important;
  border-radius: 13px !important;
  background: #0d1730 !important;
  color: var(--nc-text) !important;
  text-align: left !important;
}

.theme-preset.is-selected {
  border-color: #67cfff !important;
  box-shadow: inset 0 0 0 1px rgba(156, 73, 255, .74), 0 0 24px rgba(80, 94, 255, .2) !important;
}

.theme-preset.is-locked { opacity: .66 !important; }
.theme-preset__preview {
  grid-column: 1 / -1 !important;
  height: 72px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 12px !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  background-position: center !important;
  background-size: cover !important;
}

.theme-preset__preview i,
.theme-preset__preview b {
  display: block !important;
  width: 62% !important;
  height: 13px !important;
  border-radius: 8px !important;
}

.theme-preset__preview i { align-self: flex-start !important; }
.theme-preset__preview b { align-self: flex-end !important; }
.theme-preset > span:not(.theme-preset__preview) { overflow: hidden !important; font-size: 11px !important; font-weight: 720 !important; text-overflow: ellipsis !important; }
.theme-preset > small { color: #8f9aba !important; font-size: 8px !important; white-space: nowrap !important; }

.swatch-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
  gap: 8px !important;
}

.swatch-cell {
  min-width: 0 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 5px !important;
  color: #9ba7c5 !important;
  font-size: 8px !important;
  text-align: center !important;
}

.swatch-cell.is-locked { opacity: .62 !important; }
.swatch-cell .swatch { width: 42px !important; height: 42px !important; min-width: 42px !important; border-radius: 50% !important; }
.swatch-cell .swatch--wp { border-radius: 11px !important; }

.appearance-scale-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.appearance-scale {
  min-width: 0 !important;
  display: grid !important;
  gap: 8px !important;
  padding: 13px !important;
  border: 1px solid var(--nc-line) !important;
  border-radius: 13px !important;
  background: #0d1730 !important;
}

.appearance-scale > span { display: flex !important; justify-content: space-between !important; gap: 8px !important; color: var(--nc-text) !important; font-size: 11px !important; }
.appearance-scale output { color: #65d7ff !important; font-weight: 760 !important; }
.appearance-scale small { color: var(--nc-muted) !important; font-size: 9px !important; line-height: 1.35 !important; }
.appearance-scale input[type="range"] { width: 100% !important; accent-color: #7151ff !important; }

.chat-row {
  flex-basis: var(--nexa-chat-row, 68px) !important;
  height: var(--nexa-chat-row, 68px) !important;
  min-height: var(--nexa-chat-row, 68px) !important;
}

.chat-item {
  height: var(--nexa-chat-row, 68px) !important;
  min-height: var(--nexa-chat-row, 68px) !important;
  max-height: var(--nexa-chat-row, 68px) !important;
  grid-template-columns: calc(var(--nexa-ui-avatar, 48px) + 2px) minmax(0, 1fr) 44px !important;
}

.avatar-online-wrap,
.chat-item .avatar {
  width: var(--nexa-ui-avatar, 48px) !important;
  height: var(--nexa-ui-avatar, 48px) !important;
  min-width: var(--nexa-ui-avatar, 48px) !important;
}

.chat-title { font-size: var(--nexa-ui-font, 14px) !important; }
.chat-preview { font-size: calc(var(--nexa-ui-font, 14px) * .86) !important; }
.desktop-workspace-nav button,
.mobile-dock__item,
.settings-menu-item strong { font-size: calc(var(--nexa-ui-font, 14px) * .76) !important; }

.message {
  width: fit-content !important;
  min-width: 0 !important;
}

.message.is-them { margin-right: auto !important; }
.message__bubble {
  width: fit-content !important;
  max-width: 100% !important;
  font-size: var(--nexa-message-font, 14px) !important;
}

.message.has-msg-avatar .msg-content-col { width: fit-content !important; max-width: 100% !important; }
.message:has(.media-preview),
.message:has(.voice-card),
.message:has(.file-card),
.message:has(.poll) { width: min(74%, 610px) !important; }

.media-preview {
  position: relative !important;
  width: min(68vw, 520px) !important;
  max-width: 100% !important;
  aspect-ratio: var(--media-aspect, 1.3333) !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  background-color: #0b142b !important;
  background-position: center !important;
  background-size: cover !important;
}

.media-preview::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: linear-gradient(135deg, rgba(45, 119, 221, .18), rgba(118, 52, 207, .2)) !important;
}

.media-preview .message-media {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: inherit !important;
  object-fit: contain !important;
  background: rgba(4, 8, 22, .5) !important;
}

.media-preview__hint { z-index: 2 !important; }
.media-preview--pending::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  background: linear-gradient(100deg, transparent 22%, rgba(255,255,255,.14) 46%, transparent 70%) !important;
  transform: translateX(-100%) !important;
  animation: nexa-media-loading 1.25s ease-in-out infinite !important;
}

.media-preview__loader {
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  margin: -11px 0 0 -11px !important;
  border: 2px solid rgba(255,255,255,.26) !important;
  border-top-color: #65d7ff !important;
  border-radius: 50% !important;
  animation: spin .75s linear infinite !important;
}

@keyframes nexa-media-loading { to { transform: translateX(100%); } }

@media (min-width: 981px) {
  .conversation { --nc-header: 76px !important; }
  .conversation__header {
    min-height: 76px !important;
    grid-template-columns: 50px minmax(0, 1fr) auto !important;
    gap: 12px !important;
    padding: 12px 18px !important;
  }

  .conversation__header > .mobile-only { display: none !important; }
  .conversation__header > .avatar {
    grid-column: 1 !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }

  .conversation__title { grid-column: 2 !important; justify-self: start !important; }
  .conversation__title h2 { font-size: 17px !important; }
  .conversation__title p { font-size: 12px !important; }
  .conversation__actions {
    grid-column: 3 !important;
    justify-self: end !important;
    margin-left: auto !important;
    gap: 7px !important;
  }
  .conversation__actions .icon-button { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; }
}

@media (max-width: 980px) {
  .appearance-scale-grid { grid-template-columns: 1fr !important; }
  .theme-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .chat-row {
    flex-basis: var(--nexa-mobile-chat-row, 72px) !important;
    height: var(--nexa-mobile-chat-row, 72px) !important;
    min-height: var(--nexa-mobile-chat-row, 72px) !important;
  }
  .chat-item {
    height: var(--nexa-mobile-chat-row, 72px) !important;
    min-height: var(--nexa-mobile-chat-row, 72px) !important;
    max-height: var(--nexa-mobile-chat-row, 72px) !important;
  }
  .message:has(.media-preview),
  .message:has(.voice-card),
  .message:has(.file-card),
  .message:has(.poll) { width: min(86%, 610px) !important; }
  .media-preview { width: min(72vw, 520px) !important; }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  letter-spacing: 0;
}

[hidden] { display: none !important; }

html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--nc-bg);
  color: var(--nc-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before,
body::after,
.app-shell::before,
.app-shell::after {
  display: none !important;
}

button,
input,
textarea,
select {
  font: inherit;
}

button { touch-action: manipulation; }

.app-shell {
  isolation: isolate;
  color: var(--nc-text);
  background: var(--nc-bg);
}

.sidebar,
.conversation,
.details {
  min-width: 0;
  min-height: 0;
  background: var(--nc-panel);
  color: var(--nc-text);
}

.sidebar__header,
.conversation__header,
.details__topbar {
  background: rgba(7, 13, 31, .98) !important;
  box-shadow: none !important;
}

.brand-stack { min-width: 0; }
.brand-logo-wide {
  display: block !important;
  width: 148px !important;
  max-width: 100% !important;
  height: 48px !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: none !important;
}

.connection {
  max-width: 190px;
  margin: 2px 0 0 !important;
  overflow: hidden;
  color: var(--nc-muted) !important;
  font-size: 11px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-button,
.send-button {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid var(--nc-line) !important;
  border-radius: 50% !important;
  background: #111a35 !important;
  box-shadow: none !important;
  color: var(--nc-text) !important;
  line-height: 1 !important;
}

.icon-button:hover { background: #182344 !important; }
.icon-button:focus-visible,
.send-button:focus-visible,
.chat-item:focus-visible,
.mobile-dock__item:focus-visible {
  outline: 2px solid var(--nc-cyan) !important;
  outline-offset: 2px !important;
}

.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.search {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid var(--nc-line) !important;
  border-radius: 13px !important;
  background: #111a34 !important;
  box-shadow: none !important;
  color: var(--nc-muted) !important;
}

.search input {
  width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--nc-text) !important;
  font-size: 14px !important;
}

.search input::placeholder,
#messageInput::placeholder { color: #8490ae !important; }

.tabs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  padding: 0 13px !important;
  border: 1px solid var(--nc-line) !important;
  border-radius: 11px !important;
  background: #10172f !important;
  box-shadow: none !important;
  color: #b3bdd7 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.tab.is-active {
  border-color: rgba(139, 90, 255, .72) !important;
  background: linear-gradient(135deg, #347df7, #7842f7) !important;
  color: #fff !important;
}

.nexa-overview,
.nexa-premium-card { display: none !important; }

.chat-list {
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 4px 4px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #34436c transparent;
  -webkit-overflow-scrolling: touch;
}

.chat-row {
  position: relative !important;
  min-width: 0 !important;
  contain: layout paint style;
}

.chat-row + .chat-row { border-top: 1px solid rgba(136, 154, 211, .1); }

.chat-item {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 68px !important;
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 8px 9px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--nc-text) !important;
  text-align: left !important;
  content-visibility: auto;
  contain-intrinsic-size: 68px;
}

.chat-item:hover { background: #101a35 !important; }
.chat-item.is-active {
  background: linear-gradient(135deg, rgba(40, 113, 234, .42), rgba(104, 61, 204, .36)) !important;
  box-shadow: inset 3px 0 0 var(--nc-cyan) !important;
}

.avatar-online-wrap {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  display: block !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

.avatar,
.msg-avatar,
.incoming-call__avatar,
.call-overlay__avatar {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(166, 188, 255, .45) !important;
  border-radius: 50% !important;
  background-clip: padding-box !important;
  box-shadow: none !important;
  color: white !important;
  font-weight: 780 !important;
}

.avatar img,
.msg-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: inherit !important;
  outline: 0 !important;
  object-fit: cover !important;
}

.chat-item .avatar {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
}

.online-dot {
  position: absolute !important;
  right: -1px !important;
  bottom: 0 !important;
  width: 13px !important;
  height: 13px !important;
  border: 2px solid var(--nc-panel) !important;
  border-radius: 50% !important;
  background: var(--nc-green) !important;
  box-shadow: none !important;
}

.chat-main { min-width: 0 !important; }
.chat-title-row {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 5px !important;
}

.chat-title {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--nc-text) !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.chat-preview {
  min-width: 0 !important;
  margin: 4px 0 0 !important;
  overflow: hidden !important;
  color: var(--nc-muted) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.chat-meta {
  min-width: 40px !important;
  display: grid !important;
  justify-items: end !important;
  align-content: center !important;
  gap: 4px !important;
  color: #8995b3 !important;
  font-size: 10px !important;
}

.badge {
  min-width: 21px !important;
  height: 21px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #7050ef !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 760 !important;
}

.chat-read-state { color: var(--nc-cyan) !important; font-weight: 760 !important; }
.pin { color: #b45cff !important; text-shadow: none !important; }

.chat-row__actions {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 0 0 auto !important;
  display: flex !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.chat-row__action { border: 0 !important; color: white !important; font-size: 11px !important; }

.premium-user-mark {
  display: inline-grid !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  place-items: center !important;
  margin-left: 2px !important;
  border: 1px solid #62ddff !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #1d79ff, #773cff 55%, #df42e8) !important;
  box-shadow: 0 0 9px rgba(118, 78, 255, .48) !important;
  color: white !important;
  font-size: 10px !important;
  line-height: 1 !important;
  vertical-align: .12em !important;
}

.avatar--premium {
  border-color: #5fddff !important;
  outline: 2px solid #b34bff !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 12px rgba(93, 99, 255, .48) !important;
}

.chat-item:has(.avatar--premium) {
  background-image: linear-gradient(90deg, rgba(63, 202, 255, .035), rgba(184, 60, 255, .055)) !important;
}

.conversation {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: var(--nc-header) auto auto minmax(0, 1fr) auto auto !important;
  overflow: hidden !important;
  background: #071020 !important;
}

.conversation__header { grid-row: 1 !important; }
.message-search { grid-row: 2 !important; }
.pinned-bar { grid-row: 3 !important; }
.messages { grid-row: 4 !important; }
.typing-bar { grid-row: 5 !important; }
.composer {
  grid-row: 6 !important;
  align-self: end !important;
}

.conversation__header {
  min-width: 0 !important;
  min-height: var(--nc-header) !important;
  display: grid !important;
  grid-template-columns: auto 44px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nc-line) !important;
}

.conversation__header > .avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
}

.conversation__title { min-width: 0 !important; text-align: left !important; }
.conversation__title h2 {
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--nc-text) !important;
  font-size: 16px !important;
  font-weight: 730 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.conversation__title p {
  margin: 2px 0 0 !important;
  overflow: hidden !important;
  color: var(--nc-muted) !important;
  font-size: 11px !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.conversation__actions { display: flex !important; align-items: center !important; gap: 5px !important; }
.conversation__actions .icon-button { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; }

.message-search {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 14px 0 !important;
  background: #071020 !important;
}

.message-search .search { min-height: 38px !important; border-radius: 11px !important; }

.pinned-bar {
  min-width: 0 !important;
  margin: 7px 14px 0 !important;
  border: 1px solid var(--nc-line) !important;
  border-radius: 10px !important;
  background: #111b37 !important;
  box-shadow: none !important;
}

.messages {
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px max(16px, calc((100% - 780px) / 2)) 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background:
    linear-gradient(rgba(4, 12, 27, .86), rgba(4, 12, 27, .86)),
    url("./assets/wp-night.svg") center / cover fixed !important;
  scrollbar-width: thin;
  scrollbar-color: #34436c transparent;
  -webkit-overflow-scrolling: touch;
}

.message {
  max-width: min(74%, 610px) !important;
  margin: 0 0 9px !important;
  contain: layout paint style;
}

.message.is-me { margin-left: auto !important; margin-right: 0 !important; }
.message__bubble {
  min-width: 0 !important;
  padding: 9px 11px !important;
  border: 1px solid rgba(132, 151, 215, .22) !important;
  border-radius: 15px 15px 15px 5px !important;
  background: #15203e !important;
  box-shadow: none !important;
  color: var(--nc-text) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

.message.is-me .message__bubble {
  border-color: rgba(118, 85, 255, .48) !important;
  border-radius: 15px 15px 5px 15px !important;
  background: linear-gradient(135deg, #286fe9, #6541dc) !important;
}

.message.is-premium-author .message__bubble {
  border-color: rgba(85, 218, 255, .62) !important;
  background: linear-gradient(135deg, #167ddf, #6240e1 62%, #a43ed5) !important;
}

.message__meta,
.message time,
.message__time {
  margin-top: 3px !important;
  color: #8490ae !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}

.message.is-me .message__meta { text-align: right !important; }
.message__tools { box-shadow: none !important; }
.message img,
.message video,
.message .message-media {
  display: block !important;
  max-width: min(100%, 580px) !important;
  max-height: 62dvh !important;
  border-radius: 11px !important;
  object-fit: contain !important;
}

.day-divider,
.unread-divider { margin: 12px auto !important; text-align: center !important; }
.day-divider,
.day-divider span,
.unread-divider span {
  width: fit-content !important;
  padding: 4px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(12, 22, 46, .9) !important;
  box-shadow: none !important;
  color: #aab4cd !important;
  font-size: 10px !important;
}

.composer {
  position: relative !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 38px 44px !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 8px 12px 12px !important;
  padding: 5px !important;
  border: 1px solid var(--nc-line-strong) !important;
  border-radius: 18px !important;
  background: #101933 !important;
  box-shadow: none !important;
}

.composer .reply-bar { grid-column: 1 / -1 !important; }
#messageInput {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  max-height: 116px !important;
  margin: 0 !important;
  padding: 9px 4px !important;
  border: 0 !important;
  outline: 0 !important;
  resize: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--nc-text) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.composer .icon-button { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; }
.send-button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border: 0 !important;
  background: var(--nc-gradient) !important;
  color: white !important;
}

html.is-premium-user .composer {
  border-color: rgba(200, 73, 255, .6) !important;
  box-shadow: inset 0 1px 0 rgba(105, 218, 255, .16) !important;
}

.typing-bar { color: var(--nc-cyan) !important; }

.details {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-left: 1px solid var(--nc-line) !important;
  scrollbar-width: thin;
  scrollbar-color: #34436c transparent;
}

.details__topbar {
  position: sticky !important;
  top: -14px !important;
  z-index: 4 !important;
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
  padding: 6px 0 !important;
}

.details__topbar-title { color: var(--nc-text) !important; font-size: 16px !important; font-weight: 730 !important; }
.details__card,
.details__section {
  margin: 0 0 10px !important;
  padding: 14px !important;
  border: 1px solid var(--nc-line) !important;
  border-radius: 14px !important;
  background: #0d1630 !important;
  box-shadow: none !important;
}

.details__card { text-align: center !important; }
.details__section { text-align: left !important; }
.avatar--large { width: 92px !important; height: 92px !important; margin: 0 auto 9px !important; }
.details__card h2,
.details__section h3 { color: var(--nc-text) !important; }

.nexa-mobile-view {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #34436c transparent;
  -webkit-overflow-scrolling: touch;
}

.nexa-view-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
}

.nexa-view-head img { width: 44px !important; height: 44px !important; border-radius: 13px !important; }
.nexa-view-head strong { display: block !important; color: var(--nc-text) !important; font-size: 24px !important; }
.nexa-view-head span { display: block !important; margin-top: 2px !important; color: var(--nc-muted) !important; font-size: 12px !important; }

.nexa-call-tiles {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-bottom: 18px !important;
}

.nexa-call-tile {
  min-width: 0 !important;
  min-height: 126px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 5px !important;
  padding: 14px !important;
  border: 1px solid var(--nc-line-strong) !important;
  border-radius: 15px !important;
  background: #0d1630 !important;
  box-shadow: none !important;
  color: var(--nc-text) !important;
  text-align: left !important;
}

.nexa-call-tile > span { width: 43px !important; height: 43px !important; display: grid !important; place-items: center !important; border-radius: 50% !important; background: var(--nc-gradient) !important; font-size: 21px !important; }
.nexa-call-tile strong { font-size: 14px !important; }
.nexa-call-tile small { color: var(--nc-muted) !important; font-size: 11px !important; }
.nexa-call-tile:disabled { opacity: .52 !important; }

.nexa-view-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 14px 0 8px !important;
  color: var(--nc-text) !important;
  font-weight: 720 !important;
}

.nexa-view-title small { color: #b875ff !important; font-size: 11px !important; }
.nexa-call-list__box,
.nexa-contact-list__box {
  overflow: hidden !important;
  border: 1px solid var(--nc-line) !important;
  border-radius: 14px !important;
  background: #0b142c !important;
}

.nexa-call-row,
.nexa-contact-row {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 62px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(132, 151, 211, .11) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--nc-text) !important;
  text-align: left !important;
}

.nexa-call-row:last-child,
.nexa-contact-row:last-child { border-bottom: 0 !important; }
.nexa-call-row .avatar,
.nexa-contact-row .avatar { width: 42px !important; height: 42px !important; min-width: 42px !important; }
.nexa-call-row__body,
.nexa-contact-row > span:nth-child(2) { min-width: 0 !important; }
.nexa-call-row strong,
.nexa-contact-row strong { display: block !important; overflow: hidden !important; color: var(--nc-text) !important; font-size: 13px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.nexa-call-row small,
.nexa-contact-row small { display: block !important; margin-top: 2px !important; overflow: hidden !important; color: var(--nc-muted) !important; font-size: 10px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.nexa-contact-row { grid-template-columns: 44px minmax(0, 1fr) 30px 36px !important; }
.nexa-contact-favorite,
.nexa-contact-call,
.nexa-mini-call { display: grid !important; place-items: center !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; color: #866cff !important; }
.nexa-contact-favorite.is-active { color: #e19aff !important; background: rgba(143, 71, 255, .14) !important; }

.nexa-favorite-contacts {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 122px !important;
  gap: 8px !important;
  padding-bottom: 3px !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}

.nexa-favorite-contacts::-webkit-scrollbar { display: none; }
.nexa-favorite-card {
  min-width: 0 !important;
  min-height: 135px !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 5px !important;
  padding: 11px !important;
  border: 1px solid var(--nc-line) !important;
  border-radius: 14px !important;
  background: #0d1630 !important;
  box-shadow: none !important;
  color: var(--nc-text) !important;
}

.nexa-favorite-card .avatar { width: 66px !important; height: 66px !important; }
.nexa-favorite-card strong { max-width: 100% !important; overflow: hidden !important; font-size: 12px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.nexa-favorite-card small { color: var(--nc-green) !important; font-size: 10px !important; }

.nexa-empty-view,
.empty-state {
  margin: 0 !important;
  padding: 28px 16px !important;
  color: var(--nc-muted) !important;
  text-align: center !important;
}

.mobile-dock { display: none !important; }

/* Dialogs share one stable header and never position the close button over a title. */
dialog.modal[open],
dialog.login-modal[open],
dialog.ios-guide-modal[open] {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 20px !important;
  overflow: hidden !important;
  border: 0 !important;
  background: rgba(1, 4, 13, .76) !important;
}

dialog::backdrop { background: rgba(1, 4, 13, .76) !important; }

.login-card,
.modal__content {
  width: min(520px, calc(100vw - 40px)) !important;
  max-width: none !important;
  max-height: calc(100dvh - 40px) !important;
  margin: 0 !important;
  padding: 20px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid var(--nc-line-strong) !important;
  border-radius: 20px !important;
  background: #0c1530 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48) !important;
}

.modal__header {
  min-width: 0 !important;
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.modal__header h2,
#settingsTitle {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--nc-text) !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.modal__header > .icon-button:last-child {
  position: static !important;
  grid-column: 2 !important;
  transform: none !important;
}

.primary-button {
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: var(--nc-gradient) !important;
  box-shadow: none !important;
  color: white !important;
  font-weight: 750 !important;
}

.text-button { color: #c178ff !important; }
.login-card input,
.settings-form input,
.settings-form textarea,
.settings-form select,
.modal__content input,
.modal__content textarea,
.modal__content select {
  max-width: 100% !important;
  border: 1px solid var(--nc-line) !important;
  border-radius: 12px !important;
  background: #101a36 !important;
  box-shadow: none !important;
  color: var(--nc-text) !important;
}

/* Settings are a real navigation surface, not stacked cards from several screens. */
.settings-panel { background: #071020 !important; }
.settings-panel > .modal__header {
  position: sticky !important;
  top: -20px !important;
  z-index: 7 !important;
  grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  padding: 10px 0 !important;
  background: #071020 !important;
}

#settingsBackButton { grid-column: 1 !important; }
#settingsTitle { grid-column: 2 !important; text-align: center !important; }
#closeProfileButton { grid-column: 3 !important; }

.settings-hero-v3 {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 15px !important;
  margin: 0 0 12px !important;
  padding: 16px !important;
  border: 1px solid var(--nc-line) !important;
  border-radius: 16px !important;
  background: #0d1630 !important;
  box-shadow: none !important;
}

.settings-hero-v3__avatar { width: 88px !important; height: 88px !important; }
.settings-hero-v3__body { min-width: 0 !important; }
.settings-hero-v3__body strong { display: block !important; overflow: hidden !important; color: var(--nc-text) !important; font-size: 21px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.settings-hero-v3__body span { display: block !important; color: var(--nc-muted) !important; font-size: 12px !important; }
.settings-hero-v3__body small { display: block !important; margin-top: 3px !important; color: var(--nc-green) !important; font-size: 11px !important; }
.settings-hero-v3__about { width: 100% !important; min-height: 38px !important; margin-top: 8px !important; padding: 0 10px !important; border: 1px solid var(--nc-line) !important; border-radius: 11px !important; background: #111a35 !important; color: var(--nc-muted) !important; text-align: left !important; }

.settings-menu {
  overflow: hidden !important;
  border: 1px solid var(--nc-line) !important;
  border-radius: 16px !important;
  background: #0b142c !important;
}

.settings-menu__row {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto 12px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(132, 151, 211, .11) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--nc-text) !important;
  text-align: left !important;
}

.settings-menu__row:last-child { border-bottom: 0 !important; }
.settings-menu__row:hover { background: #111b37 !important; }
.settings-menu__icon { width: 38px !important; height: 38px !important; display: grid !important; place-items: center !important; border: 1px solid rgba(87, 151, 255, .4) !important; border-radius: 12px !important; background: rgba(27, 70, 140, .23) !important; color: #65b9ff !important; }
.settings-menu__label { min-width: 0 !important; }
.settings-menu__label strong { display: block !important; overflow: hidden !important; color: var(--nc-text) !important; font-size: 14px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.settings-menu__label small { display: block !important; margin-top: 2px !important; overflow: hidden !important; color: var(--nc-muted) !important; font-size: 10px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.settings-menu__chev { color: #77839f !important; }
.settings-menu__pill { padding: 4px 8px !important; border-radius: 999px !important; background: linear-gradient(135deg, #277fff, #9c3ee9) !important; color: white !important; font-size: 9px !important; }

.settings-menu__row[data-section="appUpdateSection"] {
  background: linear-gradient(90deg, rgba(43, 124, 242, .09), rgba(190, 58, 228, .12)) !important;
}

.settings-menu__row[data-section="appUpdateSection"] .settings-menu__icon {
  border-color: rgba(255, 188, 84, .62) !important;
  background: rgba(121, 75, 23, .22) !important;
  color: #ffc36e !important;
}

.settings-section {
  width: 100% !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 1px solid var(--nc-line) !important;
  border-radius: 16px !important;
  background: #0d1630 !important;
  box-shadow: none !important;
}

.settings-section h3 { color: var(--nc-text) !important; }
#appUpdateSection > h3 { display: none !important; }

.premium-plan-card {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding: 14px !important;
  border: 1px solid rgba(191, 78, 255, .5) !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, rgba(30, 103, 211, .24), rgba(139, 46, 192, .24)) !important;
  box-shadow: none !important;
}

.premium-plan-card__mark {
  width: 52px !important;
  height: 52px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(101, 206, 255, .7) !important;
  border-radius: 50% !important;
  background: var(--nc-gradient) !important;
  color: white !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

.premium-plan-card strong,
.premium-plan-card small {
  display: block !important;
}

.premium-plan-card strong { color: var(--nc-text) !important; font-size: 16px !important; }
.premium-plan-card small { margin-top: 3px !important; color: var(--nc-muted) !important; font-size: 11px !important; line-height: 1.35 !important; }

.premium-feature-list {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.premium-feature-list li {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(130, 151, 218, .13) !important;
  border-radius: 12px !important;
  background: #101a35 !important;
  box-shadow: none !important;
}

.premium-feature-list li strong,
.premium-feature-list li span { display: block !important; overflow-wrap: anywhere !important; }
.premium-feature-list li strong { color: var(--nc-text) !important; font-size: 13px !important; line-height: 1.25 !important; }
.premium-feature-list li span { color: var(--nc-muted) !important; font-size: 10px !important; line-height: 1.35 !important; }
.premium-section > .security-hint { margin: 12px 2px 0 !important; }
.premium-section > .primary-button { width: 100% !important; margin-top: 12px !important; }

html.is-premium-user .settings-hero-v3 {
  border-color: rgba(100, 211, 255, .48) !important;
  background: linear-gradient(135deg, rgba(21, 92, 184, .26), rgba(111, 43, 164, .28)) !important;
}

/* Desktop: Telegram-like fixed list, conversation and information pane. */
@media (min-width: 981px) {
  html,
  body { min-width: 1024px !important; }

  .app-shell {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 1024px !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 348px minmax(460px, 1fr) 320px !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: 12px 10px 10px !important;
    overflow: hidden !important;
    border-right: 1px solid var(--nc-line) !important;
  }

  .sidebar__header {
    flex: 0 0 58px !important;
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 4px !important;
    border: 0 !important;
  }

  .header-actions #notificationsButton,
  .header-actions #profileButton,
  .header-actions #logoutButton,
  .mobile-header-search { display: none !important; }

  #newChatButton { display: grid !important; }

  .desktop-workspace-nav {
    flex: 0 0 36px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .desktop-workspace-nav button {
    min-width: 0 !important;
    padding: 0 3px !important;
    overflow: hidden !important;
    border: 1px solid var(--nc-line) !important;
    border-radius: 10px !important;
    background: #0e1730 !important;
    box-shadow: none !important;
    color: #aeb8d1 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .desktop-workspace-nav button.is-active { border-color: rgba(116, 86, 255, .62) !important; background: #5439c8 !important; color: white !important; }
  .sidebar > .search { flex: 0 0 44px !important; }
  .sidebar > .tabs { flex: 0 0 36px !important; }
  .chat-list { flex: 1 1 auto !important; }
  .nexa-mobile-view { flex: 1 1 auto !important; padding: 6px 3px 10px !important; }
  .mobile-only { display: none !important; }
  .details { display: block !important; }
  .details.is-open { display: block !important; }
  .mobile-dock { display: none !important; }

  dialog#profileModal.settings-modal[open] {
    display: grid !important;
    place-items: center !important;
    padding: 24px !important;
    background: rgba(1, 4, 13, .72) !important;
  }

  #profileModal .settings-panel {
    position: relative !important;
    inset: auto !important;
    width: min(680px, calc(100vw - 48px)) !important;
    height: auto !important;
    max-height: calc(100dvh - 48px) !important;
    padding: 20px !important;
    overflow-y: auto !important;
    border: 1px solid var(--nc-line-strong) !important;
    border-radius: 20px !important;
  }
}

@media (min-width: 981px) and (max-width: 1260px) {
  .app-shell { grid-template-columns: 320px minmax(0, 1fr) !important; }
  .details { display: none !important; }
  .details.is-open {
    position: fixed !important;
    z-index: 90 !important;
    inset: 12px 12px 12px auto !important;
    display: block !important;
    width: 320px !important;
    box-shadow: -20px 0 52px rgba(0, 0, 0, .45) !important;
  }
}

/* Mobile: one screen at a time. Nothing slides or scales between routes. */
@media (max-width: 980px) {
  html,
  body {
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body {
    position: fixed !important;
    inset: 0 !important;
  }

  .app-shell {
    position: fixed !important;
    inset: var(--nexa-app-top, 0px) 0 auto 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--nexa-app-height, 100dvh) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .sidebar {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: calc(var(--nc-safe-top) + 4px) 14px calc(var(--nc-dock) + var(--nc-safe-bottom) + 15px) !important;
    overflow: hidden !important;
    border: 0 !important;
  }

  .sidebar__header {
    flex: 0 0 60px !important;
    min-width: 0 !important;
    min-height: 60px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 2px !important;
    border: 0 !important;
  }

  .brand-logo-wide { width: 142px !important; height: 46px !important; }
  .connection { display: none !important; }
  .header-actions { display: flex !important; gap: 7px !important; }
  .header-actions .icon-button { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; }
  .header-actions #notificationsButton,
  .header-actions #profileButton,
  .header-actions #logoutButton { display: none !important; }
  .mobile-header-search,
  #newChatButton { display: grid !important; }
  .desktop-workspace-nav { display: none !important; }
  .sidebar > .search { flex: 0 0 48px !important; min-height: 48px !important; }
  .sidebar > .tabs { flex: 0 0 38px !important; }
  .tabs { width: calc(100% + 14px) !important; padding-right: 14px !important; }
  .tab { min-height: 36px !important; padding: 0 14px !important; font-size: 12px !important; }
  .chat-list { flex: 1 1 auto !important; padding-inline: 0 !important; }
  .chat-item { min-height: 72px !important; grid-template-columns: 52px minmax(0, 1fr) 45px !important; gap: 10px !important; padding: 9px 8px !important; border-radius: 12px !important; }
  .avatar-online-wrap,
  .chat-item .avatar { width: 50px !important; height: 50px !important; min-width: 50px !important; }
  .chat-title { font-size: 15px !important; }
  .chat-preview { font-size: 12px !important; }
  .chat-meta { font-size: 10px !important; }

  .conversation {
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;
    width: 100% !important;
    height: 100% !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto !important;
    border: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  .app-shell:not(.chat-open) .conversation { display: none !important; }
  .app-shell.chat-open .sidebar { display: none !important; }
  .app-shell.chat-open .conversation { display: grid !important; }
  .mobile-only { display: grid !important; }
  .conversation__header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: calc(58px + var(--nc-safe-top)) !important;
    grid-template-columns: 40px 42px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    padding: var(--nc-safe-top) 9px 6px !important;
  }
  .conversation__header > .avatar { width: 42px !important; height: 42px !important; min-width: 42px !important; }
  .conversation__actions { gap: 3px !important; }
  .conversation__actions .icon-button { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
  #muteChatButton,
  #togglePinButton { display: none !important; }
  .message-search { padding: 6px 10px 0 !important; }
  .message-search .search { min-height: 36px !important; }
  .messages {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 10px 10px !important;
    background-attachment: scroll !important;
  }
  .message { max-width: 86% !important; }
  .message__bubble { font-size: 14px !important; }
  .composer {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    min-width: 0 !important;
    grid-template-columns: 40px minmax(0, 1fr) 38px 43px !important;
    margin: 7px 8px max(7px, env(safe-area-inset-bottom)) !important;
    padding: 4px !important;
    border-radius: 18px !important;
  }
  #messageInput { min-height: 39px !important; font-size: 16px !important; }

  .details {
    position: absolute !important;
    z-index: 45 !important;
    inset: 0 !important;
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    padding: calc(var(--nc-safe-top) + 5px) 12px calc(var(--nc-safe-bottom) + 14px) !important;
    border: 0 !important;
    background: var(--nc-bg) !important;
    transform: none !important;
    transition: none !important;
  }
  .details.is-open { display: block !important; }
  .details__topbar { top: calc(-1 * (var(--nc-safe-top) + 5px)) !important; padding-top: var(--nc-safe-top) !important; background: var(--nc-bg) !important; }

  .nexa-mobile-view {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 4px 1px 10px !important;
  }
  .nexa-view-head { flex: 0 0 auto !important; margin-bottom: 12px !important; }
  .nexa-view-head strong { font-size: 23px !important; }

  .mobile-dock {
    position: fixed !important;
    z-index: 30 !important;
    inset: auto 10px var(--nc-safe-bottom) 10px !important;
    width: auto !important;
    height: var(--nc-dock) !important;
    min-height: var(--nc-dock) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 5px !important;
    overflow: visible !important;
    border: 1px solid var(--nc-line) !important;
    border-radius: 22px !important;
    background: #0b142c !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .34) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
  }

  .mobile-dock__item,
  .mobile-dock__item--primary {
    position: relative !important;
    align-self: stretch !important;
    width: auto !important;
    height: 58px !important;
    min-width: 0 !important;
    min-height: 58px !important;
    display: grid !important;
    grid-template-rows: 30px 12px !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 3px 1px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #98a3be !important;
    transform: none !important;
  }

  .mobile-dock__item > span { grid-row: 1 !important; font-size: 20px !important; line-height: 30px !important; }
  .mobile-dock__item small { grid-row: 2 !important; display: block !important; max-width: 100% !important; overflow: hidden !important; color: inherit !important; font-size: 9px !important; font-weight: 700 !important; line-height: 12px !important; text-overflow: ellipsis !important; white-space: nowrap !important; visibility: visible !important; }
  .mobile-dock__item[data-mobile-action="settings"] small { font-size: 8px !important; }
  .mobile-dock__item.is-active { background: #4934b6 !important; color: white !important; }
  .mobile-dock__item--primary img { grid-row: 1 !important; width: 30px !important; height: 30px !important; margin: 0 !important; border-radius: 9px !important; filter: none !important; }
  .mobile-dock__item--primary small { grid-row: 2 !important; height: 12px !important; }
  .mobile-dock__item--primary::after { display: none !important; }

  html.is-premium-user .mobile-dock__item--primary img {
    outline: 1px solid #61deff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 10px rgba(174, 67, 255, .62) !important;
  }
  html.is-premium-user .mobile-dock__item--primary::after {
    content: "✦" !important;
    position: absolute !important;
    top: 4px !important;
    right: calc(50% - 21px) !important;
    display: grid !important;
    width: 13px !important;
    height: 13px !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #9b47ef !important;
    color: white !important;
    font-size: 8px !important;
  }

  .app-shell.chat-open .mobile-dock,
  body.keyboard-open .mobile-dock { display: none !important; }

  dialog.modal[open],
  dialog.login-modal[open],
  dialog.ios-guide-modal[open] {
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
  }
  .login-card,
  .modal__content {
    width: min(100%, 500px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    padding: 16px !important;
    border-radius: 17px !important;
  }

  #newChatModal[open] {
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: var(--nc-bg) !important;
  }
  #newChatModal .modal__content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: calc(var(--nc-safe-top) + 8px) 14px calc(var(--nc-safe-bottom) + 10px) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  #newChatModal .modal__header { flex: 0 0 44px !important; }
  #newChatModal #directCreatePanel,
  #newChatModal #groupCreatePanel { min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; }

  dialog#profileModal.settings-modal[open] {
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: var(--nc-bg) !important;
  }
  #profileModal .settings-panel {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: calc(var(--nc-safe-top) + 4px) 14px calc(var(--nc-safe-bottom) + 14px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .settings-panel > .modal__header { top: calc(-1 * (var(--nc-safe-top) + 4px)) !important; padding-top: var(--nc-safe-top) !important; }
  .settings-hero-v3 { grid-template-columns: 78px minmax(0, 1fr) !important; gap: 12px !important; padding: 13px !important; }
  .settings-hero-v3__avatar { width: 74px !important; height: 74px !important; }
  .settings-hero-v3__body strong { font-size: 19px !important; }
}

@media (max-width: 370px) {
  .sidebar { padding-left: 10px !important; padding-right: 10px !important; }
  .brand-logo-wide { width: 126px !important; }
  .header-actions .icon-button { width: 39px !important; height: 39px !important; min-width: 39px !important; min-height: 39px !important; }
  .chat-item { grid-template-columns: 48px minmax(0, 1fr) 40px !important; gap: 8px !important; }
  .avatar-online-wrap,
  .chat-item .avatar { width: 46px !important; height: 46px !important; min-width: 46px !important; }
  .mobile-dock { left: 6px !important; right: 6px !important; }
  .mobile-dock__item small { font-size: 8px !important; }
}

/* Keep expensive effects off scrolling surfaces. */
.chat-item,
.message__bubble,
.nexa-call-row,
.nexa-contact-row,
.nexa-favorite-card,
.settings-menu__row,
.mobile-dock {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Final cascade contract: hidden state and pane surfaces must always win. */
.sidebar,
.conversation,
.details {
  background-color: var(--nc-panel) !important;
  background-image: none !important;
}

.sidebar::before,
.sidebar::after,
.conversation::before,
.conversation::after,
.details::before,
.details::after {
  display: none !important;
  content: none !important;
}

[hidden] {
  display: none !important;
}

/* Settings are a real master/detail screen, never two screens at once. */
#settingsPanel.settings-menu-mode,
#settingsPanel.settings-detail-mode {
  display: block !important;
}

#settingsPanel.settings-menu-mode > .settings-section {
  display: none !important;
}

#settingsPanel.settings-menu-mode > #settingsMenu {
  display: grid !important;
  height: auto !important;
  overflow: visible !important;
  grid-auto-rows: minmax(64px, auto) !important;
  grid-template-rows: none !important;
}

#settingsPanel.settings-detail-mode > #settingsHeroV3,
#settingsPanel.settings-detail-mode > #settingsMenu,
#settingsPanel.settings-detail-mode > .settings-section {
  display: none !important;
}

#settingsPanel.settings-detail-mode > .settings-section.is-open {
  display: block !important;
}

#settingsPanel.settings-detail-mode > #profileSection.is-open {
  display: grid !important;
}

/* UI11 stability contract: long lists keep their geometry on Safari and Chrome. */
.chat-list {
  flex: 1 1 0 !important;
  height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

.chat-row {
  flex: 0 0 68px !important;
  width: 100% !important;
  height: 68px !important;
  min-height: 68px !important;
  margin: 0 !important;
  overflow: hidden !important;
  contain: none !important;
  content-visibility: visible !important;
}

.chat-item {
  width: 100% !important;
  max-width: 100% !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  contain: none !important;
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
  transform: none;
}

.chat-item--group .premium-user-mark { display: none !important; }
.chat-item--group .avatar {
  outline: 0 !important;
  box-shadow: none !important;
}

/* Calls and contacts own the remaining pane height and always scroll. */
.nexa-mobile-view {
  flex: 1 1 0 !important;
  height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

.nexa-calls-view > *,
.nexa-contacts-view > * {
  flex: none !important;
}

.nexa-call-list,
.nexa-contact-list,
.nexa-favorites,
.nexa-recommended {
  overflow: visible !important;
  contain: none !important;
  content-visibility: visible !important;
}

/* Date separators take a real row instead of collapsing into the message flow. */
.day-divider,
.unread-divider {
  position: relative !important;
  z-index: 2 !important;
  flex: 0 0 28px !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 8px 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
}

.day-divider > span,
.unread-divider > span {
  width: auto !important;
  min-width: 82px !important;
  max-width: calc(100% - 24px) !important;
  display: block !important;
  padding: 5px 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(121, 142, 204, .22) !important;
  border-radius: 999px !important;
  background: rgba(10, 19, 41, .94) !important;
  color: #b5c0d9 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Composer grid is explicit so hidden file inputs cannot move the textarea. */
.composer {
  overflow: hidden !important;
  grid-template-columns: 40px minmax(0, 1fr) 38px 44px !important;
}

.composer > .media-input {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  overflow: hidden !important;
}

#attachButton {
  grid-column: 1 !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
}
#messageInput {
  grid-column: 2 !important;
  width: 100% !important;
  padding: 9px 8px !important;
  text-indent: 0 !important;
  transform: none !important;
}
#voiceButton {
  grid-column: 3 !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
}
.composer > .send-button {
  grid-column: 4 !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
}
.composer > .reply-bar { grid-column: 1 / -1 !important; }

/* Premium mark is part of the name line, not a second row. */
#settingsHeroName {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

#settingsHeroName .settings-hero-v3__name-text {
  min-width: 0 !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#settingsHeroName .premium-user-mark {
  flex: 0 0 18px !important;
  display: inline-grid !important;
  margin: 0 !important;
}

@media (max-width: 980px) {
  .chat-row {
    flex-basis: 72px !important;
    height: 72px !important;
    min-height: 72px !important;
  }

  .chat-item {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
  }

  .nexa-mobile-view {
    flex: 1 1 0 !important;
    height: 0 !important;
    padding-bottom: 12px !important;
  }

  .mobile-dock__item--primary {
    align-self: stretch !important;
    width: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    border-radius: 17px !important;
    transform: none !important;
  }

  .mobile-dock__item--primary img {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    border-radius: 9px !important;
  }

  #newChatModal .modal__content {
    display: block !important;
    padding: calc(var(--nc-safe-top) + 8px) 14px calc(var(--nc-safe-bottom) + 26px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #newChatModal .modal__header {
    position: sticky !important;
    top: calc(-1 * (var(--nc-safe-top) + 8px)) !important;
    z-index: 4 !important;
    margin-bottom: 14px !important;
    padding-top: calc(var(--nc-safe-top) + 8px) !important;
    background: var(--nc-bg) !important;
  }

  #newChatModal #directCreatePanel,
  #newChatModal #groupCreatePanel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 20px !important;
  }
}

/* UI12 viewport contract: inactive routes never participate in flex sizing. */
.chat-list[hidden],
.nexa-mobile-view[hidden] {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.chat-list:not([hidden]) {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.nexa-mobile-view:not([hidden]) {
  display: block !important;
  flex: 1 1 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.nexa-empty-view {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  gap: 5px !important;
}

.nexa-empty-view > span,
.nexa-empty-view > strong,
.nexa-empty-view > small {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.chat-row,
.chat-item {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 980px) {
  .sidebar > .search,
  .sidebar > .tabs,
  .sidebar > .chat-list:not([hidden]),
  .sidebar > .nexa-mobile-view:not([hidden]) {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  .sidebar > .tabs:not([hidden]) {
    display: grid !important;
    grid-template-columns: .72fr 1.42fr .86fr .8fr !important;
    gap: 6px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .sidebar > .tabs > .tab {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 5px !important;
    overflow: hidden !important;
    font-size: 11px !important;
    text-overflow: ellipsis !important;
  }

  #newChatModal[open] {
    inset: var(--nexa-app-top, 0px) 0 auto 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--nexa-app-height, 100dvh) !important;
    max-height: var(--nexa-app-height, 100dvh) !important;
    display: block !important;
    border-radius: 0 !important;
  }

  #newChatModal .modal__content {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
  }

  #newChatModal #directCreatePanel,
  #newChatModal #groupCreatePanel {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #newChatModal #userList,
  #newChatModal #groupMemberList {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* UI13 cascade lock: these geometry rules intentionally come after the mobile stability contract. */
.chat-row {
  flex-basis: var(--nexa-chat-row, 68px) !important;
  height: var(--nexa-chat-row, 68px) !important;
  min-height: var(--nexa-chat-row, 68px) !important;
}

.chat-item {
  height: var(--nexa-chat-row, 68px) !important;
  min-height: var(--nexa-chat-row, 68px) !important;
  max-height: var(--nexa-chat-row, 68px) !important;
  grid-template-columns: calc(var(--nexa-ui-avatar, 48px) + 2px) minmax(0, 1fr) 44px !important;
}

.avatar-online-wrap,
.chat-item .avatar {
  width: var(--nexa-ui-avatar, 48px) !important;
  height: var(--nexa-ui-avatar, 48px) !important;
  min-width: var(--nexa-ui-avatar, 48px) !important;
}

.chat-title { font-size: var(--nexa-ui-font, 14px) !important; }
.chat-preview { font-size: calc(var(--nexa-ui-font, 14px) * .86) !important; }
.message { width: fit-content !important; min-width: 0 !important; }
.message.is-them { margin-right: auto !important; }
.message__bubble { width: fit-content !important; max-width: 100% !important; font-size: var(--nexa-message-font, 14px) !important; }
.message.has-msg-avatar .msg-content-col { width: fit-content !important; max-width: 100% !important; }
.message:has(.media-preview),
.message:has(.voice-card),
.message:has(.file-card),
.message:has(.poll) { width: min(74%, 610px) !important; }

@media (min-width: 981px) {
  .conversation { --nc-header: 76px !important; }
  .conversation__header {
    min-height: 76px !important;
    grid-template-columns: 50px minmax(0, 1fr) auto !important;
    gap: 12px !important;
    padding: 12px 18px !important;
  }
  .conversation__header > .mobile-only { display: none !important; }
  .conversation__header > .avatar {
    grid-column: 1 !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }
  .conversation__title { grid-column: 2 !important; justify-self: start !important; }
  .conversation__title h2 { font-size: 17px !important; }
  .conversation__title p { font-size: 12px !important; }
  .conversation__actions { grid-column: 3 !important; justify-self: end !important; margin-left: auto !important; gap: 7px !important; }
  .conversation__actions .icon-button { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; }
}

@media (max-width: 980px) {
  .chat-row {
    flex-basis: var(--nexa-mobile-chat-row, 72px) !important;
    height: var(--nexa-mobile-chat-row, 72px) !important;
    min-height: var(--nexa-mobile-chat-row, 72px) !important;
  }
  .chat-item {
    height: var(--nexa-mobile-chat-row, 72px) !important;
    min-height: var(--nexa-mobile-chat-row, 72px) !important;
    max-height: var(--nexa-mobile-chat-row, 72px) !important;
  }
  .message:has(.media-preview),
  .message:has(.voice-card),
  .message:has(.file-card),
  .message:has(.poll) { width: min(86%, 610px) !important; }
}

/* UI14: deterministic message ownership alignment and a live scale preview. */
.message:not(.has-msg-avatar) {
  display: flex !important;
  flex-direction: column !important;
}

.message.is-me {
  align-self: flex-end !important;
  align-items: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.message.is-them {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.message.is-me .message__bubble,
.message.is-me .message__meta,
.message.is-me .media-preview,
.message.is-me .voice-card,
.message.is-me .file-card,
.message.is-me .poll,
.message.is-me .call-card {
  align-self: flex-end !important;
}

.appearance-preview {
  --appearance-message-scale: 1;
  --appearance-ui-scale: 1;
  min-height: calc(218px * var(--appearance-ui-scale)) !important;
  justify-content: flex-start !important;
  gap: calc(9px * var(--appearance-ui-scale)) !important;
  padding: calc(14px * var(--appearance-ui-scale)) !important;
}

.appearance-preview__header {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: calc(32px * var(--appearance-ui-scale)) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: calc(9px * var(--appearance-ui-scale)) !important;
  color: #f7f9ff !important;
}

.appearance-preview__header > i {
  width: calc(32px * var(--appearance-ui-scale)) !important;
  height: calc(32px * var(--appearance-ui-scale)) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--nc-gradient) !important;
  font-size: calc(13px * var(--appearance-ui-scale)) !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.appearance-preview__header > span {
  min-width: 0 !important;
  display: grid !important;
  gap: 1px !important;
}

.appearance-preview__header strong {
  font-size: calc(13px * var(--appearance-ui-scale)) !important;
  line-height: 1.15 !important;
}

.appearance-preview__header small {
  color: #65e7b1 !important;
  font-size: calc(9px * var(--appearance-ui-scale)) !important;
}

.appearance-preview__header > b {
  color: #b5bfd8 !important;
  font-size: calc(14px * var(--appearance-ui-scale)) !important;
  letter-spacing: 2px !important;
}

.appearance-preview__date {
  position: static !important;
  align-self: center !important;
  transform: none !important;
  padding: calc(3px * var(--appearance-ui-scale)) calc(10px * var(--appearance-ui-scale)) !important;
  font-size: calc(10px * var(--appearance-ui-scale)) !important;
}

.appearance-preview__bubble {
  padding: calc(9px * var(--appearance-message-scale)) calc(12px * var(--appearance-message-scale)) !important;
  border-radius: calc(14px * var(--appearance-message-scale)) !important;
  font-size: calc(12px * var(--appearance-message-scale)) !important;
  line-height: 1.3 !important;
}

/* Android chat stability: reserve decrypted-media geometry and leave vertical
   gestures entirely to the native scroll container. */
.messages {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  overflow-anchor: none !important;
  scroll-behavior: auto !important;
}

.media-preview {
  display: block !important;
  width: min(520px, 72vw) !important;
  max-width: 100% !important;
  aspect-ratio: var(--media-aspect, 4 / 3) !important;
  contain: layout paint !important;
  background-color: rgba(8, 14, 39, 0.72) !important;
}

.media-preview .message-media {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.composer,
.composer textarea,
.composer button {
  touch-action: manipulation !important;
}

@media (max-width: 720px) {
  .media-preview {
    width: min(74vw, 430px) !important;
  }
}