* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --brand: #1877f2;
  --brand2: #1877f2;
  --page-bg: #f3f4f8;
  --card: #fff;
  --text: #1f2233;
  --muted: #7a7f93;
  --line: #dcdcf3;
  --success-color: #198754;
  --them: #fff;
  --r: 16px;
}
.dark-mode {
  --page-bg: #0b1220;
  --card: #101a2d;
  --text: #e7edf8;
  --muted: #91a2bd;
  --line: #22314d;
  --success-color: #75b798;
  --them: #33333b;
  background: #0b1220;
  color: #e7edf8;
}
html,
body {
  height: 100%;
}
body {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  color: var(--text);
  background: var(--page-bg);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.hide {
  display: none !important;
}
.app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}
/* navbar */
.nav-md {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--brand);
  border-radius: var(--r);
  color: #fff;
}
.nav-md__light {
  background: var(--brand);
}
.dark-mode .nav-md {
  background: transparent;
}
.logo-title {
  font-size: 1.5rem;
  font-weight: 800;
}
.navbar-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}
.notification-trigger {
  position: relative;
}
.notification-indicator {
  position: absolute;
  z-index: 20;
  top: 1px;
  right: 1px;
  display: block;
  pointer-events: none;
}
.notification-dot {
  display: block;
  width: 11px;
  height: 11px;
  border: 2px solid var(--brand);
  border-radius: 50%;
  background: #24a8ff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
  animation: notification-pulse 1.8s ease-in-out infinite;
}
.notification-preview {
  position: absolute;
  right: -4px;
  bottom: 17px;
  width: max-content;
  max-width: min(300px, 75vw);
  overflow: hidden;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px 14px 4px 14px;
  background: #168fe8;
  color: #fff;
  box-shadow: 0 8px 24px rgba(18, 105, 180, 0.28);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transform-origin: bottom right;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}
.notification-indicator.previewing .notification-preview {
  opacity: 1;
  transform: none;
}
.notification-indicator.dot-only .notification-preview {
  display: none;
}
@keyframes notification-pulse {
  50% {
    box-shadow: 0 0 0 5px rgba(36, 168, 255, 0.2);
  }
}
.navbar-btn,
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: inherit;
  font-weight: 600;
  font-size: 1.15rem;
}
.navbar-btn:hover,
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}
.navbar-btn.active {
  background: rgba(255, 255, 255, 0.2);
}
.nav-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.nav-md .lang-switch {
  width: auto;
  background-image: none;
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 6px 10px;
}
.nav-md .lang-switch option {
  color: #000;
}
/* layout */
.app-main {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
}
/* chat */
.selected-chat {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--page-bg);
}
.empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
}
.empty img {
  height: 100px;
}
.empty h4 {
  max-width: 420px;
  font-size: 1.05rem;
}
.selected {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chat-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--brand);
  color: #fff;
}
.peer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}
.chat-header img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.header-info h5 {
  margin: 0;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.network-status {
  font-size: 0.8rem;
  font-weight: 600;
  color: #c9ffd9;
}
.network-status.off {
  color: rgba(255, 255, 255, 0.75);
}
.network-status.typing { display: flex; align-items: center; gap: 2px; }
.typing-dots { display: inline-flex; align-items: center; gap: 2px; height: 1em; }
.typing-dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: typing-bounce 1s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { opacity: .4; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.back {
  display: none;
}
.chat-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.msg {
  max-width: min(78%, 520px);
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 18px 18px 18px 6px;
  background: var(--them);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.me {
  align-self: flex-end;
  border-radius: 18px 18px 6px 18px;
  background: var(--brand);
  color: #fff;
}
.msg time {
  display: block;
  margin-top: 2px;
  text-align: right;
  font-size: 0.7rem;
  opacity: 0.7;
}
.msg-img {
  display: block;
  max-width: 100%;
  max-height: 300px;
  margin-bottom: 4px;
  border-radius: 12px;
}
.msg-video-player {
  width: min(100%, 360px);
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: #11131b;
  box-shadow: 0 8px 24px rgba(15, 18, 35, 0.2);
}
.msg-video-stage {
  position: relative;
  display: grid;
  width: 100%;
  place-items: center;
  background: #090a0f;
}
.msg-video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  background: #090a0f;
  cursor: pointer;
}
.video-feedback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: #fff;
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}
.video-feedback i {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  padding-left: 4px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 50%;
  background: rgba(10, 10, 14, 0.56);
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.25);
  font-size: 3rem;
}
.msg-video-player.show-playback-feedback .video-feedback {
  opacity: 1;
  transform: scale(1);
}
.msg-video-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 5px 9px;
  background: #171824;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.video-control {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.05rem;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}
.video-control:hover,
.video-control:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}
.video-control:active {
  transform: scale(0.92);
}
.video-current,
.video-duration {
  flex: none;
  min-width: 34px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
  text-align: center;
}
.video-seek {
  flex: 1;
  min-width: 24px;
  height: 22px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: pan-x;
}
.video-seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 5px;
  background: linear-gradient(
    to right,
    #a99cff var(--video-progress, 0%),
    rgba(255, 255, 255, 0.28) var(--video-progress, 0%)
  );
}
.video-seek::-moz-range-track {
  height: 4px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.28);
}
.video-seek::-moz-range-progress {
  height: 4px;
  border-radius: 5px;
  background: #a99cff;
}
.video-seek::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 2px solid #fff;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: #806cff;
  box-shadow: 0 1px 4px #0008;
}
.video-seek::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #806cff;
  box-shadow: 0 1px 4px #0008;
}
.msg-video-player:fullscreen {
  display: flex;
  width: 100vw !important;
  height: 100dvh;
  max-width: 100vw;
  flex-direction: column;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: #08090e;
}
.msg-video-player:fullscreen .msg-video {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: calc(100dvh - 110px);
  object-fit: contain;
}
.msg-video-player:fullscreen .msg-video-controls,
.msg-video-player:fullscreen .msg-video-caption {
  width: min(100%, 720px);
  align-self: center;
}
.msg-video-player:fullscreen .msg-video-caption {
  margin-top: 6px;
}
.msg-video-player:fullscreen .msg-video-controls {
  min-height: 58px;
}
.msg-video-player:fullscreen .video-control {
  width: 40px;
  height: 40px;
}
.msg-video-player:fullscreen .video-current,
.msg-video-player:fullscreen .video-duration {
  min-width: 44px;
  font-size: 0.82rem;
}
.msg-video-player:fullscreen .video-seek {
  height: 36px;
}
.msg-video-player:fullscreen .video-seek::-webkit-slider-runnable-track {
  height: 5px;
}
.msg-video-player:fullscreen .video-seek::-moz-range-track,
.msg-video-player:fullscreen .video-seek::-moz-range-progress {
  height: 5px;
}
.msg-video-player:fullscreen .video-seek::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  margin-top: -5px;
}
.msg-video-player:fullscreen .video-seek::-moz-range-thumb {
  width: 13px;
  height: 13px;
}
.msg-video-player:fullscreen .msg-video-caption {
  flex: none;
}
.msg-video-player:fullscreen .msg-video-caption > i {
  display: none;
}
.msg-video-player:fullscreen .msg-video-caption small {
  display: none;
}
.msg-video-player:fullscreen .msg-video-caption span {
  text-align: center;
}
.msg-video-player:fullscreen .msg-video-caption {
  justify-content: center;
}
.msg-video-player:fullscreen .msg-video-controls {
  flex: none;
}
.msg-video-player:fullscreen video {
  flex: 0 1 auto;
}
.msg-video-player:fullscreen .video-control:focus-visible,
.msg-video-player:fullscreen .video-seek:focus-visible {
  outline: 2px solid #a99cff;
  outline-offset: 2px;
}
.msg-video-player:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh;
  max-width: 100vw;
  border: 0;
  border-radius: 0;
  background: #08090e;
}
.msg-video-player.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  width: 100vw !important;
  height: 100dvh;
  max-width: 100vw;
  flex-direction: column;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: #08090e;
}
.msg-video-player.is-fullscreen .msg-video {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: calc(100dvh - 110px);
  object-fit: contain;
}
.msg-video-player.is-fullscreen .msg-video-controls,
.msg-video-player.is-fullscreen .msg-video-caption {
  width: min(100%, 720px);
  align-self: center;
  flex: none;
}
.msg-video-player.is-fullscreen .msg-video-caption {
  justify-content: center;
  margin-top: 6px;
}
.msg-video-player.is-fullscreen .msg-video-caption > i,
.msg-video-player.is-fullscreen .msg-video-caption small {
  display: none;
}
.msg-video-player.is-fullscreen .msg-video-caption span {
  text-align: center;
}
.msg-video-player.is-fullscreen .msg-video-controls {
  min-height: 58px;
}
.msg-video-player.is-fullscreen .video-control {
  width: 40px;
  height: 40px;
}
.msg-video-player.is-fullscreen .video-current,
.msg-video-player.is-fullscreen .video-duration {
  min-width: 44px;
  font-size: 0.82rem;
}
.msg-video-player.is-fullscreen .video-seek {
  height: 36px;
}
.msg-video-player.is-fullscreen .video-seek::-webkit-slider-runnable-track {
  height: 5px;
}
.msg-video-player.is-fullscreen .video-seek::-moz-range-track,
.msg-video-player.is-fullscreen .video-seek::-moz-range-progress {
  height: 5px;
}
.msg-video-player.is-fullscreen .video-seek::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  margin-top: -5px;
}
.msg-video-player.is-fullscreen .video-seek::-moz-range-thumb {
  width: 13px;
  height: 13px;
}
.msg-video-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 9px;
  color: #f7f6ff;
  font-size: 0.8rem;
}
.msg-video-caption > i {
  flex: none;
  color: #a99cff;
  font-size: 1rem;
}
.msg-video-caption span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-video-caption small {
  flex: none;
  margin-left: auto;
  color: rgba(247, 246, 255, 0.68);
}
.msg.media:has(.msg-video-player) {
  max-width: min(78%, 460px);
}
.msg.media:has(.msg-video-player) .msg-footer {
  position: static;
  margin: 0;
  padding: 5px 8px 0;
}
.msg.media:has(.msg-video-player) .msg-footer time {
  position: static;
  margin: 0 auto 0 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
}
/* faqat rasm (matnsiz): ko'k/kulrang pufaksiz, vaqt rasm ustida */
.msg.media {
  position: relative;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.msg.media .msg-img {
  margin-bottom: 0;
  border-radius: 16px;
}
.msg.media time {
  position: absolute;
  right: 8px;
  bottom: 8px;
  margin: 0;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 1;
}
.msg.media .who {
  padding: 0 4px;
}
.msg-file {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  white-space: normal;
}
.msg-file i {
  font-size: 1.8rem;
}
.msg-file small {
  display: block;
  opacity: 0.7;
}
.input-box {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--card);
  border-top: 1px solid var(--line);
}
.mention-suggestions {
  position: absolute;
  z-index: 1200;
  right: 62px;
  bottom: calc(100% + 7px);
  left: 58px;
  max-height: min(280px, 45vh);
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(0,0,0,.24);
}
.mention-suggestions[hidden] { display: none !important; }
.post-compose-wrap { position: relative; }
.post-compose-wrap .post-mention-suggestions { right: 0; bottom: calc(100% + 4px); left: 0; }
.mention-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.mention-option.active, .mention-option:hover { background: rgba(101,77,255,.14); }
.mention-option img { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; object-fit: cover; }
.mention-option > span { display: grid; min-width: 0; flex: 1; }
.mention-option b, .mention-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-option small { color: var(--muted); }
.message-mention { color: #1683ff; font-weight: 700; cursor: pointer; }
.message-mention:hover { text-decoration: underline; }
.msg.me .message-mention { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); }
.message-link { color: #1683ff; text-decoration: underline; overflow-wrap: anywhere; }
.msg.me .message-link { color: #fff; text-decoration-color: rgba(255,255,255,.55); }
.input-box .icon-btn {
  color: var(--brand);
}
.input-box .icon-btn:hover {
  background: rgba(101, 77, 255, 0.1);
}
.message-input {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  border: 1px solid var(--brand);
  border-radius: 22px;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}
.send-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--brand2);
  color: #fff;
  font-size: 1.1rem;
  transition:
    background-color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
.send-btn:hover {
  background: #463dd2;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(101 77 255 / 28%);
}
.message-input {
  min-height: 48px;
  line-height: 1.35;
  background: var(--card);
}
.message-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.message-input::placeholder { color: var(--muted); opacity: 1; }
.input-box .send-btn {
  display: grid;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  flex: 0 0 48px;
  place-items: center;
}
@media (max-width: 767px) {
  .input-box {
    gap: 8px;
    padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px));
  }
  .input-box #attach { width: 38px; min-width: 38px; flex: 0 0 38px; }
  .message-input { height: 50px; min-height: 50px; padding: 0 16px; border-radius: 18px; }
  .input-box .send-btn { width: 50px; height: 50px; min-width: 50px; min-height: 50px; flex-basis: 50px; }
  html.android-webview .input-box {
    padding-bottom: max(30px, env(safe-area-inset-bottom, 0px));
  }
}
.send-btn:focus-visible {
  color: #fff;
  outline: 3px solid rgb(101 77 255 / 30%);
  outline-offset: 3px;
}
.send-btn:active {
  background: #4038c4;
  color: #fff;
  transform: scale(0.96);
}
.send-btn:disabled {
  opacity: 0.5;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}
.saved-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 320px;
  margin: auto;
  padding: 32px 20px;
  color: var(--muted);
  text-align: center;
}
.saved-empty img {
  width: 54px;
  height: 54px;
}
.saved-empty strong {
  color: var(--text);
  font-size: 1.05rem;
}
/* chat list */
.chat-sidebar {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--brand);
  border-radius: var(--r);
  background: var(--card);
}
.chat-sidebar__title {
  flex: none;
  margin: 0;
  padding: 12px 16px;
  background: var(--brand);
  color: #111;
  font-size: 1.4rem;
}
.chat-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 12px;
  background: #e54872;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
}
.search-box {
  padding: 10px 10px 0;
}
.search-box input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}
.chat-list {
  flex: 1;
  min-height: 0;
  list-style: none;
  padding: 8px;
  overflow-y: auto;
}
.person-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: 0.15s;
}
.person-card:hover,
.person-card.active {
  border-color: var(--brand);
  background: rgba(101, 77, 255, 0.08);
}
.person-card > div:nth-child(2) {
  min-width: 0;
}
.username-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}
.chat-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  padding: 0;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.chat-avatar .username-img {
  display: block;
}
.avatar-loading {
  display: none;
  position: absolute;
  inset: -3px;
  border: 3px solid transparent;
  border-top-color: var(--brand);
  border-right-color: var(--brand);
  border-radius: 50%;
  animation: avatar-spin 0.75s linear infinite;
}
.chat-avatar.loading .avatar-loading {
  display: block;
}
@keyframes avatar-spin {
  to {
    transform: rotate(360deg);
  }
}
.username {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.username-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.message-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recieve-time {
  color: var(--muted);
  font-size: 0.75rem;
}
.new-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem;
}
.list-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--muted);
}
.nav-mobile {
  display: none;
}
/* modals, toast */
.avatar-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 14px;
}
.avatar-wrap img {
  width: 100%;
  height: 100%;
  border: 3px solid var(--brand);
  border-radius: 50%;
  object-fit: cover;
}
.avatar-wrap label {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand2);
  color: #fff;
  cursor: pointer;
}
.avatar-crop {
  max-width: 320px;
  margin: 0 auto 16px;
}
.avatar-crop-stage {
  position: relative;
  width: min(260px, 75vw);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: #111;
  touch-action: none;
  cursor: grab;
}
.avatar-crop-stage:active {
  cursor: grabbing;
}
.avatar-crop-stage img {
  position: absolute;
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  object-fit: unset;
  pointer-events: none;
  user-select: none;
}
.modal-content {
  background: var(--card);
  color: var(--text);
  border-radius: var(--r);
}
.modal-content .form-control {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
  font-size: 16px;
}
.dark-mode .btn-close {
  filter: invert(1);
}
.dark-mode .chat-sidebar__title {
  color: #fff;
}
.btn-brand {
  padding: 10px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--brand2);
  color: #fff;
  font-weight: 600;
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}
.btn-brand:hover:not(:disabled) {
  background-color: #463dd2;
  color: #fff;
  box-shadow: 0 4px 12px rgb(79 70 229 / 22%);
}
.btn-brand:focus-visible:not(:disabled) {
  background-color: #463dd2;
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgb(79 70 229 / 28%);
}
.btn-brand:active:not(:disabled) {
  background-color: #4038c4;
  color: #fff;
}
.peer-profile-dialog {
  max-width: 460px;
}
.peer-profile-dialog .modal-content {
  overflow: hidden;
}
.peer-profile-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}
.peer-profile-side {
  min-width: 0;
  padding: 8px 20px 16px;
  text-align: center;
}
.peer-identity {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  text-align: left;
}
.peer-identity .avatar-wrap {
  justify-self: start;
  width: 72px;
  height: 72px;
  margin: 0;
}
.peer-identity .avatar-wrap img {
  border: 0;
}
.peer-identity-copy {
  min-width: 0;
  text-align: left;
}
.peer-identity-copy h5 {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
  font-size: 1.08rem;
  font-weight: 700;
}
.peer-username {
  color: var(--muted);
  font-size: 0.9rem;
}
.peer-profile-side > .follow-stats {
  justify-content: center;
  gap: 0;
  width: 100%;
  margin: 10px 0 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.peer-profile-side > .follow-stats button {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.peer-profile-side > .follow-stats b {
  display: inline;
}
.peer-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 20px;
}
.peer-actions button {
  display: inline-flex;
  min-height: 40px;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.peer-message-btn {
  background: transparent;
  color: var(--text);
}
.peer-message-btn:hover {
  background: rgba(127, 127, 150, 0.1);
}
.peer-follow-btn {
  border-color: #1689ff !important;
  background: #1689ff;
  color: #fff;
}
.peer-follow-btn:hover {
  background: #087be8;
}
.peer-follow-btn.is-following {
  border-color: #171717 !important;
  background: #171717;
  color: #fff;
}
.peer-follow-btn.is-following:hover {
  border-color: #000 !important;
  background: #000;
}
.peer-info-block {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.peer-info-label {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.peer-info-block p {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.peer-info-block#pm-bio-block {
  text-align: left;
}
.peer-info-block#pm-bio-block .peer-info-label {
  text-align: left;
}
.peer-info-block .peer-note {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.peer-profile-content {
  min-width: 0;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.peer-profile-content .follow-stats {
  justify-content: center;
  margin-bottom: 18px;
}
.peer-profile-content .account-posts {
  max-height: 340px;
  text-align: left;
}
.peer-profile-content .account-posts-title {
  text-align: left;
}
.peer-note:empty {
  display: none;
}
#toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  z-index: 2000;
  max-width: 90vw;
  padding: 10px 18px;
  border-radius: 12px;
  background: #222;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition: 0.25s;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* mobile (iOS / Android) */
@media (max-width: 767px) {
  .app {
    gap: 8px;
    padding: 8px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .app-main {
    grid-template-columns: 1fr;
  }
  .selected-chat {
    display: none;
  }
  .app-main.chat-open .selected-chat {
    display: block;
  }
  .app-main.chat-open .chat-sidebar {
    display: none;
  }
  .app-main.chat-open .nav-mobile {
    display: none;
  }
  .app-main.feed-open .selected-chat {
    display: block;
  }
  .app-main.feed-open .chat-sidebar {
    display: none;
  }
  .desktop-icon {
    display: none;
  }
  .back {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.2rem;
    touch-action: manipulation;
  }
  .chat-list {
    padding-bottom: 76px;
  }
  .msg {
    max-width: 86%;
  }
  .msg.media:has(.msg-video-player) {
    max-width: 92%;
  }
  .msg-video-controls {
    gap: 4px;
    min-height: 46px;
    padding: 4px 6px;
  }
  .video-control {
    width: 30px;
    height: 32px;
  }
  .video-current,
  .video-duration {
    min-width: 32px;
    font-size: 0.68rem;
  }
  .nav-mobile {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    justify-content: space-around;
    padding: 6px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.15),
      inset 0 1px 1px rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
  }
  .dark-mode .nav-mobile {
    background: rgba(40, 40, 48, 0.72);
  }
  .nav-mobile button {
    position: relative;
    padding: 6px 16px;
    border: 0;
    background: none;
    color: var(--brand);
    font-size: 24px;
  }
  #toast {
    bottom: 100px;
  }
}
/* v0.6: tablar, note, postlar */
.tabs {
  display: flex;
  gap: 6px;
  padding: 10px 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs button {
  flex: 1 0 auto;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.tabs button.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.tabs .tab-chat-button {
  gap: 12px;
}
.tabs .search-toggle {
  flex: 0 0 40px;
  padding: 7px;
  border-color: transparent;
}
.notes {
  display: flex;
  gap: 14px;
  padding: 30px 12px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.note {
  position: relative;
  flex: none;
  width: 64px;
  text-align: center;
  cursor: pointer;
}
.note img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand);
  padding: 2px;
}
.note small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.72rem;
}
.who {
  display: block;
  margin-bottom: 2px;
  color: var(--brand);
  font-size: 0.78rem;
}
.join-btn {
  padding: 5px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--brand2);
  color: #fff;
  font-size: 0.8rem;
}
.add-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(101, 77, 255, 0.12);
  color: var(--brand);
  font-size: 1.4rem;
}
.feed-list {
  flex: 1;
  min-height: 0;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.post {
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.post-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.post-h img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.post-h > div {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.post-h small {
  display: block;
  color: var(--muted);
}
.post p {
  margin: 0 0 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.post-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78vh, 760px);
  border: 0;
  border-radius: 0;
  object-fit: contain;
}
.post .del {
  color: var(--muted);
}
/* v0.7: note, tab ikonkalari, sozlamalar, lightbox, liquid glass nav */
.tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tabs i {
  font-size: 1rem;
}
.tab-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.section-unread-badge {
  position: absolute;
  z-index: 2;
  top: -6px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid var(--card);
  border-radius: 10px;
  background: #e54872;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.tabs button.on .section-unread-badge {
  border-color: var(--brand);
}
.notes {
  padding: 62px 24px 4px;
  gap: 12px;
  scroll-padding-inline: 24px;
}
.note {
  width: 84px;
}
.note img {
  width: 64px;
  height: 64px;
  border-width: 3px;
}
.note small {
  font-size: 0.78rem;
  margin-top: 2px;
}
.s-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: inherit;
  text-align: left;
  font-size: 1rem;
}
.s-row:last-child {
  border-bottom: 0;
}
.s-help-link > span {
  display: flex;
  align-items: center;
  gap: 12px;
}
.s-help-link > span > i {
  width: 20px;
  color: var(--muted);
  text-align: center;
}
.s-help-link > .bi-chevron-right {
  color: var(--muted);
  font-size: 0.82rem;
}
.s-help-link:hover {
  background: rgba(127, 127, 150, 0.08);
}
#logout-mobile.s-row {
  border-bottom: 0;
}
.s-me img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.s-me {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 8px;
}
.s-me > img { grid-column: 1; grid-row: 1; }
.s-me > .s-me-identity {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.s-me #s-name { display: flex; align-items: center; gap: 5px; min-width: 0; }
.s-me #s-name .premium-badge { flex: 0 0 auto; }
.s-me > .s-me-chevron { grid-column: 3; grid-row: 1; }
.s-me > .settings-human-status {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: .76rem;
  line-height: 1.3;
}
.s-me .settings-human-status > span { flex: 0 0 auto; }
.s-me .settings-human-status > .human-status-icon { width: 22px; height: 22px; flex-basis: 22px; }
.s-me .settings-human-status .human-status-copy { flex: 1; min-width: 0; }
.s-me .settings-human-status .human-status-copy b,
.s-me .settings-human-status .human-status-copy small { overflow-wrap: anywhere; }
.s-me small {
  color: var(--muted);
}
@media (max-width: 575px) {
  .s-me { row-gap: 8px; column-gap: 12px; }
  #settings-modal .modal-dialog {
    width: calc(100% - 24px);
    max-width: 560px;
    margin: max(12px, env(safe-area-inset-top)) auto
      max(12px, env(safe-area-inset-bottom));
  }
  #settings-modal .modal-content {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: hidden;
    border-radius: 22px;
  }
  #settings-modal .modal-header {
    flex: 0 0 auto;
    padding: 18px 20px 12px;
  }
  #settings-modal .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px max(18px, env(safe-area-inset-bottom));
  }
}
.s-row .lang-switch {
  width: auto;
  background-color: transparent;
  color: var(--text);
  border-color: var(--line);
}
.s-row .lang-switch option {
  color: #000;
}
#p-av,
#pm-av,
#peer-av {
  cursor: zoom-in;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px 24px;
  background: rgba(5, 6, 12, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.48);
  cursor: zoom-out;
}
.lightbox-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}
.msg-img {
  cursor: zoom-in;
}
@media (max-width: 767px) {
  .lightbox {
    padding: 58px 8px max(8px, env(safe-area-inset-bottom));
  }
  .lightbox img {
    max-width: 100%;
    max-height: 100%;
  }
}
@media (max-width: 767px) {
  .tabs {
    display: none;
  }
  .chat-list {
    padding-bottom: 100px;
  }
  .nav-mobile {
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    gap: 2px;
    padding: 6px;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.28)
    );
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    backdrop-filter: blur(24px) saturate(190%);
    box-shadow:
      0 12px 32px rgba(31, 34, 51, 0.2),
      inset 0 1px 1px rgba(255, 255, 255, 0.9),
      inset 0 -1px 1px rgba(255, 255, 255, 0.25);
  }
  .dark-mode .nav-mobile {
    border-color: rgba(255, 255, 255, 0.16);
    background: linear-gradient(
      180deg,
      rgba(70, 70, 88, 0.55),
      rgba(40, 40, 52, 0.4)
    );
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.5),
      inset 0 1px 1px rgba(255, 255, 255, 0.22);
  }
  .nav-mobile button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 2px;
    border: 0;
    border-radius: 26px;
    background: none;
    color: var(--text);
    opacity: 0.72;
    font-size: 0.66rem;
    font-weight: 600;
    transition: 0.2s;
  }
  .nav-mobile button i {
    font-size: 1.4rem;
    line-height: 1;
  }
  .section-unread-badge {
    top: -5px;
    right: -7px;
    border-color: var(--card);
  }
  .nav-mobile button.on {
    background: rgba(101, 77, 255, 0.2);
    color: var(--brand);
    opacity: 1;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7);
  }
  .dark-mode .nav-mobile button.on {
    color: #b7abff;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18);
  }
}
@media (max-width: 600px) {
  .msg-tools {
    opacity: 1;
    transform: none;
  }
  .nav-mobile {
    overflow-x: auto;
  }
  .nav-mobile button {
    min-width: 56px;
    flex: 1 0 auto;
  }
  .nav-mobile button span:not(.notif-badge):not(.section-unread-badge) {
    font-size: 0.62rem;
  }
}

@media (max-width: 767px) {
  .chat-categories {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 12px 8px;
    scrollbar-width: none;
  }
  .chat-categories::-webkit-scrollbar {
    display: none;
  }
  .chat-categories button {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.38);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 650;
    white-space: nowrap;
  }
  .dark-mode .chat-categories button {
    background: rgba(255, 255, 255, 0.06);
  }
  .chat-categories button.on {
    border-color: rgba(101, 77, 255, 0.3);
    background: rgba(101, 77, 255, 0.14);
    color: var(--brand);
  }
  .nav-mobile-avatar {
    width: 27px;
    height: 27px;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    object-fit: cover;
  }
  .nav-mobile button.on .nav-mobile-avatar {
    border-color: var(--brand);
  }
  .dark-mode .nav-mobile-avatar {
    border-color: rgba(255, 255, 255, 0.5);
  }
  .dark-mode .nav-mobile button.on .nav-mobile-avatar {
    border-color: #b7abff;
  }
  .nav-mobile {
    z-index: 20;
  }
  .feed-list {
    padding-bottom: 100px;
  }
}
@media (max-width: 600px) {
  .nav-mobile {
    overflow-x: hidden;
  }
  .nav-mobile button {
    min-width: 0;
    flex: 1 1 0;
    padding-right: 1px;
    padding-left: 1px;
  }
  .nav-mobile button span:not(.notif-badge):not(.section-unread-badge) {
    font-size: 0.58rem;
  }
}

/* iPhone-style floating glass navigation for touch layouts. */
.chat-msg-status {
  margin-right: 4px;
  color: var(--brand);
  font-size: 0.72em;
  font-weight: 650;
}
.chat-categories {
  display: none;
}
@media (max-width: 767px) {
  .chat-categories {
    display: flex;
  }
  .nav-mobile {
    bottom: max(12px, env(safe-area-inset-bottom));
    padding: 5px;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 28px;
    background: linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.58),
      rgba(244, 245, 252, 0.3)
    );
    -webkit-backdrop-filter: blur(30px) saturate(190%);
    backdrop-filter: blur(30px) saturate(190%);
    box-shadow:
      0 12px 34px rgba(20, 24, 40, 0.2),
      inset 0 1px 1px rgba(255, 255, 255, 0.85),
      inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  }
  .dark-mode .nav-mobile {
    border-color: rgba(255, 255, 255, 0.18);
    background: linear-gradient(
      155deg,
      rgba(75, 77, 94, 0.68),
      rgba(34, 35, 47, 0.62)
    );
    box-shadow:
      0 12px 34px rgba(0, 0, 0, 0.46),
      inset 0 1px 1px rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  }
  .nav-mobile button {
    border-radius: 23px;
  }
  .nav-mobile button.on {
    background: rgba(255, 255, 255, 0.54);
    box-shadow:
      0 2px 8px rgba(34, 38, 56, 0.1),
      inset 0 1px 1px rgba(255, 255, 255, 0.82);
  }
  .dark-mode .nav-mobile button.on {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18);
  }
}

/* ===================== v0.8 ===================== */
/* --- Dark mode: input / textarea / placeholder / yordamchi matnlar oq bo'lsin --- */
[data-bs-theme="dark"] {
  color-scheme: dark;
}
.dark-mode .modal-content .form-control,
.dark-mode .modal-content .form-control:focus,
.dark-mode .modal-content .form-select,
.dark-mode .search-box input,
.dark-mode .message-input,
.dark-mode .form-control,
.dark-mode textarea,
.dark-mode input {
  color: #fff;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
}
.dark-mode .modal-content .form-control {
  background-color: rgba(255, 255, 255, 0.06);
}
.dark-mode .modal-content .form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.35);
}
.dark-mode ::placeholder,
.dark-mode .form-control::placeholder {
  color: #a3a6b8 !important;
  -webkit-text-fill-color: #a3a6b8;
  opacity: 1;
}
.dark-mode input:-webkit-autofill,
.dark-mode textarea:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s ease-out;
}
.dark-mode .modal-content,
.dark-mode .modal-title,
.dark-mode .form-label,
.dark-mode .modal-body {
  color: #fff;
}
.dark-mode .text-muted,
.dark-mode .small.text-muted {
  color: var(--muted) !important;
}

/* --- Ixcham Stories uslubidagi note qatori --- */
.notes {
  align-items: flex-start;
  gap: 8px;
  padding: 12px 12px 10px;
  scroll-padding-inline: 12px;
  scroll-snap-type: x proximity;
}
.note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: none;
  width: 76px;
  scroll-snap-align: start;
}
.note-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  padding: 2px;
  border: 2px solid var(--brand);
  border-radius: 50%;
}
.note-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
}
.note-add {
  position: absolute;
  right: -3px;
  bottom: -1px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid var(--card);
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
}
.note-t {
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
}
.note small {
  width: 100%;
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 600;
}
@media (max-width: 767px) {
  .notes {
    gap: 6px;
    padding: 8px 8px 6px;
    scroll-padding-inline: 8px;
  }
  .note {
    width: 68px;
  }
  .note-avatar {
    width: 46px;
    height: 46px;
  }
  .note-add {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
  .note small,
  .note-t {
    font-size: 0.64rem;
  }
}

/* --- Xabar holati: samolyot -> samolyot+belgi -> ko'z --- */
.msg time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.st {
  font-size: 0.78rem;
  line-height: 1;
}
.msg.me .st-sending {
  opacity: 0.7;
  animation: st-blink 1s ease-in-out infinite;
}
.msg.me .st-sent {
  opacity: 0.85;
}
.msg.me .st-delivered {
  opacity: 1;
}
.msg.me .st-read {
  color: #8dffc0;
  opacity: 1;
  text-shadow: 0 0 8px rgba(141, 255, 192, 0.8);
}
.st.pop {
  animation: st-fly 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
@keyframes st-blink {
  50% {
    opacity: 0.25;
  }
}
@keyframes st-fly {
  0% {
    opacity: 0;
    transform: translate(-10px, 8px) scale(0.5) rotate(-25deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.seen-line {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: -2px 6px 0 0;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(127, 127, 150, 0.16);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}
.seen-line.st-read {
  background: rgba(79, 70, 229, 0.14);
  color: var(--brand);
}
.dark-mode .seen-line.st-read {
  color: #b7abff;
}
.msg {
  position: relative;
}
.msg-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-height: 25px;
}
.msg-footer time {
  margin-left: auto;
}
.msg-tools {
  display: flex;
  flex: none;
  opacity: 1;
}
.msg-tools button {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  padding: 0;
  background: rgba(100, 77, 255, 0.13);
  color: var(--brand);
}
.msg.media .msg-footer {
  margin-top: 7px;
  justify-content: space-between;
  gap: 16px;
  padding: 0 5px;
}
.msg.media .msg-footer time {
  position: static;
  inset: auto;
  margin: 0 auto 0 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #55586a;
  opacity: 1;
}
.dark-mode .msg.media .msg-footer time {
  color: #d0d2dc;
}
.group-handle {
  color: var(--brand);
  font-weight: 650;
}
.group-link-btn {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  width: 34px;
  height: 34px;
  color: var(--brand);
  background: rgba(100, 77, 255, 0.1);
  font-size: 1.25rem;
}
.group-link-btn:hover {
  background: rgba(100, 77, 255, 0.2);
}
.room-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.group-details {
  margin: 14px auto;
  max-width: 420px;
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 92%, var(--brand) 8%);
  text-align: left;
}
.group-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}
.group-detail-row span,
.group-invite small {
  color: var(--muted);
  font-size: 0.82rem;
}
.group-detail-row b {
  color: var(--text);
  font-size: 0.92rem;
}
.group-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 2px;
}
.group-invite > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.group-invite code {
  color: var(--brand);
  overflow-wrap: anywhere;
  font-size: 0.78rem;
}
.group-invite .group-link-btn {
  flex: none;
}
.msg-quote {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 3px solid var(--brand);
  background: rgba(100, 77, 255, 0.1);
  border-radius: 5px;
  padding: 5px 8px;
  margin-bottom: 6px;
  font-size: 0.78rem;
  max-width: 260px;
  overflow: hidden;
}
.msg-quote b {
  color: var(--brand);
  font-size: 0.73rem;
}
.msg-quote span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
}
.msg.me .msg-quote {
  border-left-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.msg.me .msg-quote b {
  color: #fff;
}
.reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 14px;
  border-left: 3px solid var(--brand);
  background: rgba(100, 77, 255, 0.08);
  color: var(--muted);
}
.reply-preview span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.message-text .st {
  margin-right: 3px;
  color: var(--muted);
}
.message-text .st-read {
  color: var(--brand);
}
.dark-mode .message-text .st-read {
  color: #b7abff;
}

/* --- Obunachilar --- */
.follow-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 0 0 14px;
}
.follow-stats button {
  padding: 4px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  text-align: center;
  line-height: 1.15;
}
.follow-stats button:hover {
  background: rgba(127, 127, 150, 0.14);
}
.follow-stats b {
  display: block;
  font-size: 1.2rem;
}
.follow-stats span {
  font-size: 0.8rem;
  color: var(--muted);
}
.follow-btn {
  width: 100%;
  margin-bottom: 14px;
}
.follow-btn.on,
.join-btn.on {
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--brand);
}
.dark-mode .follow-btn.on,
.dark-mode .join-btn.on {
  color: #b7abff;
  border-color: #7c72c9;
}
.feed-tabs {
  flex: none;
  display: flex;
  gap: 6px;
  padding: 10px 12px 0;
}
.feed-tabs button {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}
.feed-tabs button.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.people-list {
  min-height: 220px;
}
.post-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.post-actions button {
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 18px;
  padding: 5px 9px;
  transition:
    transform 0.18s ease,
    background 0.18s ease;
}
.post-actions button:hover {
  transform: scale(1.08);
  background: rgba(100, 77, 255, 0.1);
}
.post-actions .reacted {
  color: #e54872;
  animation: react-pop 0.28s ease;
}
@keyframes react-pop {
  50% {
    transform: scale(1.35);
  }
}
.reaction-summary {
  margin-left: auto;
  display: flex;
  gap: 6px;
  color: var(--muted);
  font-size: 0.8rem;
}
.reaction-count {
  background: rgba(100, 77, 255, 0.08);
  border-radius: 12px;
  padding: 3px 7px;
}
.reaction-picker {
  display: flex;
  gap: 4px;
  padding: 6px;
  margin-top: 6px;
  width: max-content;
  background: var(--bs-body-bg);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 8px 24px #0002;
  animation: picker-in 0.16s ease-out;
}
.reaction-picker button {
  border: 0;
  background: transparent;
  font-size: 1.35rem;
  transition: transform 0.15s ease;
}
.reaction-picker button:hover {
  transform: scale(1.3) translateY(-2px);
}
@keyframes picker-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.comment-area {
  padding-top: 8px;
}
.post-comment {
  padding: 5px 0;
  font-size: 0.9rem;
}
.post-comment b {
  margin-right: 5px;
}
.comment-compose {
  display: flex;
  gap: 7px;
  margin-top: 6px;
}
.comment-compose input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bs-body-bg);
  color: var(--text);
  padding: 7px 12px;
  outline: none;
}
.comment-compose button {
  border: 0;
  background: var(--brand);
  color: #fff;
  width: 36px;
  border-radius: 50%;
}
.post-actions .vote-btn {
  min-width: 58px;
  font-size: 1.05rem;
}
.post-actions .vote-btn.reacted {
  color: var(--brand);
  background: rgba(100, 77, 255, 0.12);
  animation: react-pop 0.28s ease;
}
.post-actions .post-stats-btn {
  margin-left: auto;
  color: var(--muted);
}
.post-actions .post-stats-btn:hover {
  color: var(--brand);
}
.post-stats-btn span {
  margin-left: 5px;
  font-size: 0.82rem;
}
.post-stats-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--line);
}
.post-stats-summary > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 14px;
  background: rgba(127, 127, 150, 0.1);
  font-size: 0.82rem;
}
.post-stat-section {
  padding-top: 14px;
}
.post-stat-section h6 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.post-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
.post-stat-row > img {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.post-stat-person {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.post-stat-person b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}
.post-stat-person small {
  color: var(--muted);
  font-size: 0.76rem;
}
.post-stat-person p {
  margin: 4px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}
.post-stat-emoji {
  font-size: 1.15rem;
}
.post-stat-empty {
  padding: 12px 4px;
  color: var(--muted);
  font-size: 0.88rem;
}
.notification-item {
  width: 100%;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
}
.notification-item:hover {
  background: rgba(127, 127, 150, 0.1);
}
.notification-copy {
  min-width: 0;
  flex: 1;
}
.notification-kind-icon {
  color: var(--brand);
}
.post-comment.notification-focus {
  background: rgba(100, 77, 255, 0.12);
  border-radius: 8px;
  animation: notification-pulse 2.6s ease;
}
@keyframes notification-pulse {
  0%,
  100% {
    background: transparent;
  }
  20%,
  65% {
    background: rgba(100, 77, 255, 0.18);
  }
}
#profile-modal .modal-body {
  position: relative;
}
#profile-modal .my-profile-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 12px 14px;
  text-align: center;
}
#profile-modal .profile-edit-trigger {
  position: absolute;
  top: 0;
  right: 4px;
  z-index: 2;
}
#profile-modal .my-profile-hero .avatar-wrap {
  width: 96px;
  height: 96px;
  margin: 0 auto 8px;
}
.profile-display-name { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0; font-size: 1.25rem; font-weight: 700; }
.profile-display-user { color: var(--muted); font-size: .9rem; }
.profile-online { display: flex; align-items: center; gap: 6px; color: #1683ff; font-size: .82rem; }
.profile-online i { font-size: .48rem; }
.profile-human-status { margin-top: 5px; color: var(--muted); font-size: .82rem; }
.profile-human-status, .settings-human-status { align-items: center; gap: 7px; }
.profile-human-status { display: flex; justify-content: center; }
.settings-human-status { display: flex !important; flex-direction: row !important; }
.profile-human-status.verified, .settings-human-status.verified { color: var(--success-color); }
.human-status-icon { display: inline-flex !important; flex: 0 0 22px; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 50%; font-size: .72rem; line-height: 1; }
.human-status-icon i { line-height: 1; }
.human-status-copy, .s-me .human-status-copy { display: flex; flex-direction: column; gap: 2px; }
.human-status-copy small { color: var(--muted); font-size: .74rem; }
.p-google-link { margin-top: 8px; padding: 4px 10px; font-size: .8rem; }
.p-google-link[hidden] { display: none !important; }
.p-google-unlink { margin: 8px 0 0 5px; padding: 4px 10px; font-size: .8rem; }
.p-google-unlink[hidden] { display: none !important; }
.profile-edit-fields { display: none; margin: 10px 0 16px; }
#profile-modal.is-editing .profile-edit-fields { display: block; }
.settings-human-status { font-size: .76rem; }
.profile-verification-actions { margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; text-align: center; }
#profile-modal .profile-view-field:disabled {
  opacity: 1;
  cursor: default;
  color: var(--text);
  background: rgba(127, 127, 150, 0.08);
  border-color: transparent;
}
.xcoin-panel, .premium-panel {
  margin: 14px 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(101, 77, 255, 0.045);
}
.xcoin-balance, .xcoin-section-title, .xcoin-link-row { display: flex; align-items: center; gap: 8px; }
.xcoin-balance { width: 100%; justify-content: space-between; border: 0; padding: 4px 2px; background: transparent; font-weight: 700; color: var(--text); text-align: left; }
.xcoin-balance strong { color: var(--brand); font-size: 2rem; line-height: 1; }
.xcoin-balance strong small { font-size: .72rem; }
.earn-xcoin-btn { display: inline-flex; align-items: center; margin: 8px 0 0; padding: 5px 11px; border: 1px solid var(--brand); border-radius: 8px; background: transparent; color: var(--brand); font-size: .78rem; font-weight: 700; }
.earn-xcoin-btn:hover, .earn-xcoin-btn[aria-expanded="true"] { background: var(--brand); color: #fff; }
.xcoin-send-btn { margin-left: 6px; }
.xcoin-tasks { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.xcoin-tasks[hidden] { display: none; }
.xcoin-task { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 10px 2px; color: var(--text); text-decoration: none; }
.xcoin-task + .xcoin-task { border-top: 1px solid var(--line); }
.xcoin-task-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: rgba(101,77,255,.12); color: #654dff; font-size: 1.15rem; }
.xcoin-task-copy { display: grid; gap: 3px; }
.xcoin-task-copy small { color: var(--muted); font-size: .76rem; }
.xcoin-task > strong { color: #16803c; font-size: 1rem; }
.xcoin-task .xcoin-link-row { grid-column: 2 / -1; min-width: 0; }
.xcoin-balance i, .xcoin-section-title i { color: var(--brand); }
.xcoin-section-title { font-weight: 700; }
.xcoin-note, .premium-hint { margin: 7px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.xcoin-google-btn { width: 100%; margin-top: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); padding: 9px; font-weight: 600; }
.xcoin-google-btn i { color: #4285f4; margin-right: 7px; }
.xcoin-google-btn.verified { color: #16803c; border-color: rgba(22,128,60,.35); }
.xcoin-link-row { margin-top: 9px; background: rgba(127,127,150,.1); padding: 5px 5px 5px 10px; border-radius: 9px; }
.xcoin-link-row code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; color: var(--muted); font-size: .72rem; }
.telegram-task-actions { flex-wrap: wrap; }
.telegram-link-btn, .telegram-login-container { grid-column: 2 / -1; }
.premium-panel { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: linear-gradient(135deg, rgba(101,77,255,.12), rgba(101,77,255,.04)); }
.premium-panel .premium-hint { grid-column: 1 / -1; border-top: 1px solid rgba(127,127,150,.18); padding-top: 9px; }
.premium-panel.premium-active { border-color: var(--success-color); background: #212529; color: var(--success-color); }
.premium-panel.premium-active .xcoin-note { color: #c1c5c9; }
.premium-panel.premium-active .premium-dates { color: #c1c5c9; }
.premium-panel.premium-active #p-buy-premium {
  display: inline-flex;
  min-width: 72px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border: 1px solid var(--success-color);
  border-radius: 999px;
  background: rgba(25, 135, 84, .12);
  box-shadow: none;
  color: var(--success-color);
  font-size: .82rem;
  font-weight: 700;
  cursor: default;
  opacity: 1;
}
.premium-panel.premium-active .premium-hint[hidden] { display: none !important; }
.premium-dates { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .8rem; }
.premium-badge, .human-badge { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 4px; font-size: .86em; }
.premium-badge, .human-badge { flex: 0 0 auto; justify-content: center; line-height: 1; }
.premium-badge i, .human-badge i { display: block; line-height: 1; }
.premium-badge { color: #1683ff; }.human-badge { color: #16803c; }
.official-badge { display: inline-flex; margin-left: 4px; color: #1683ff; vertical-align: middle; }
.official-badge i { display: block; line-height: 1; }
.note-view-dialog { max-width: 420px; }
.note-view-card { overflow: hidden; border: 1px solid rgba(120, 100, 255, .18); border-radius: 26px; background: var(--card); box-shadow: 0 24px 70px rgba(32, 24, 80, .22); }
.note-view-author { display: flex; align-items: center; gap: 12px; }
.note-view-author img { width: 46px; height: 46px; border: 2px solid var(--brand); border-radius: 50%; object-fit: cover; }
.note-view-author span { display: grid; gap: 2px; }
.note-view-author small { color: var(--muted); }
.note-view-text { margin: 6px 0 22px; padding: 22px; border-radius: 22px; background: linear-gradient(145deg, rgba(101,77,255,.13), rgba(101,77,255,.045)); color: var(--text); font-size: 1.2rem; line-height: 1.6; overflow-wrap: anywhere; }
.note-view-reaction-label { margin: 0 0 10px; color: var(--muted); font-size: .85rem; }
.note-view-reactions { display: flex; flex-wrap: wrap; gap: 9px; }
.note-reaction { min-width: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--text); font-size: 1.05rem; transition: transform .15s, background .15s, border-color .15s; }
.note-reaction:hover { transform: translateY(-2px); }
.note-reaction.active { border-color: var(--brand); background: rgba(101,77,255,.12); }
.note-reaction b { font-size: .72rem; font-weight: 650; }
.google-offer-content .modal-title i { color: #16803c; margin-right: 5px; }.google-offer-content ul { padding-left: 1.2rem; }.google-offer-content li { margin: 7px 0; }
.dark-mode #profile-modal .profile-view-field:disabled {
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}
.comment-compose .comment-emoji-btn {
  flex: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
}
.comment-emoji-btn:hover {
  color: var(--brand);
}
.post-comment.reaction-comment span {
  display: inline-block;
  font-size: 1.7rem;
  vertical-align: middle;
  animation: comment-reaction 0.65s cubic-bezier(0.2, 0.8, 0.25, 1.3);
}
@keyframes comment-reaction {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-25deg);
  }
  65% {
    opacity: 1;
    transform: scale(1.35) rotate(8deg);
  }
  100% {
    transform: scale(1);
  }
}
.account-posts-title {
  margin: 16px 0 8px;
  text-align: left;
  font-weight: 700;
}
.account-posts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 250px;
  overflow: auto;
  text-align: left;
}
.account-post {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.82rem;
}
.account-post img {
  display: block;
  width: 100%;
  max-height: 130px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 6px;
}
.account-post p {
  margin: 0 0 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.account-post small,
.account-post-empty {
  color: var(--muted);
  font-size: 0.76rem;
}
.account-post-empty {
  grid-column: 1/-1;
  padding: 12px;
  text-align: center;
}
@media (max-width: 575px) {
  #profile-modal .modal-dialog {
    width: calc(100% - 24px);
    max-width: 560px;
    margin: max(12px, env(safe-area-inset-top)) auto
      max(12px, env(safe-area-inset-bottom));
  }
  #profile-modal .modal-content {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: hidden;
    border-radius: 22px;
  }
  #profile-modal .modal-header,
  #profile-modal .modal-footer { flex: 0 0 auto; }
  #profile-modal .modal-header { padding: 14px 18px 8px; }
  #profile-modal .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px max(18px, env(safe-area-inset-bottom));
  }
  #profile-modal .my-profile-hero { padding-top: 10px; }
  #profile-modal .my-profile-hero .avatar-wrap { width: 88px; height: 88px; }
  #profile-modal .xcoin-panel,
  #profile-modal .premium-panel,
  #profile-modal .profile-verification-actions { margin-block: 10px; }
  #profile-modal .account-posts { max-height: 32dvh; }
}
.msg-video-player.video-unloaded .msg-video { visibility: hidden; }
.msg-video-player.video-unloaded .video-skeleton { display: none; }
.msg-video-player.video-unloaded .msg-video-stage { cursor: pointer; }
.msg-video-download {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border-radius: 50%;
  background: rgba(17, 24, 39, .76);
  color: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.msg-video-download-ring {
  position: absolute;
  inset: 0;
  border: 3px solid rgba(255,255,255,.34);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  transform: rotate(-40deg);
}
.msg-video-download > i { font-size: 1.75rem; }
.msg-video-download > b { display: none; font-size: .85rem; }
.msg-video-player.video-loading .msg-video-download-ring { opacity: 1; animation: video-spin .8s linear infinite; }
.msg-video-player.video-loading .msg-video-download > i { display: none; }
.msg-video-player.video-loading .msg-video-download > b { display: block; }
.msg-video-player:not(.video-unloaded) .msg-video-download { display: none; }
.msg-video-player.video-unloaded .msg-video-stage {
  display: grid;
  min-height: 190px;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: #111;
}
.msg-video-player.video-unloaded .video-feedback {
  position: absolute;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #111;
  pointer-events: none;
}
.msg-video-player.video-unloaded .video-feedback i { font-size: 2rem; }
.notification-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 12px;
}
.notification-list:not(.hide) {
  display: block;
  height: 0;
  flex: 1 1 0;
}
.notification-item {
  display: flex;
  gap: 10px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  border-radius: 8px;
}
.notification-item.unread {
  background: rgba(100, 77, 255, 0.08);
}
.notification-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.notification-item small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}
.notif-badge {
  display: inline-flex;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #e54872;
  color: #fff;
  font-size: 10px;
}
.people-list .person-card {
  grid-template-columns: 52px 1fr auto;
}
.group-members-open { border: 0; padding: 0; background: transparent; color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.room-edit-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-width: 116px; margin: 8px 0 7px; padding: 8px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-size: .84rem; font-weight: 650; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.room-edit-trigger:hover { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); transform: translateY(-1px); }
.room-edit-trigger i { color: var(--brand); }
.room-edit-modal .modal-content { overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line)); border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgba(25, 20, 70, .22); }
.modal-backdrop.show { opacity: 1; background: rgba(5, 9, 20, .68); -webkit-backdrop-filter: blur(14px) saturate(.58); backdrop-filter: blur(14px) saturate(.58); }
.room-edit-modal .modal-content { background: color-mix(in srgb, var(--surface) 89%, transparent); -webkit-backdrop-filter: blur(32px) saturate(1.55); backdrop-filter: blur(32px) saturate(1.55); }
.peer-profile-dialog .modal-content { border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line)); border-radius: 24px; background: color-mix(in srgb, var(--surface) 91%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.45); backdrop-filter: blur(28px) saturate(1.45); box-shadow: 0 24px 70px rgba(10, 12, 28, .2); }
.room-edit-cover { height: 94px; background: radial-gradient(circle at 82% 15%, rgba(255,255,255,.65), transparent 24%), linear-gradient(125deg, #654dff 0%, #8b5cf6 52%, #c084fc 100%); }
.room-edit-modal .modal-header { margin-top: -70px; padding: 20px 22px 12px; color: #fff; }
.room-edit-eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; opacity: .8; }
.room-edit-modal .modal-header .modal-title { font-weight: 750; }
.room-edit-modal .modal-header .btn-close { filter: brightness(0) invert(1); opacity: .9; }
.room-edit-identity { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--card) 90%, var(--brand) 10%); }
.room-edit-identity > img { width: 72px; height: 72px; border: 3px solid var(--surface); border-radius: 22px; object-fit: cover; box-shadow: 0 5px 18px rgba(30, 20, 70, .18); }
.room-edit-identity > div { display: grid; gap: 3px; min-width: 0; }
.room-edit-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-edit-identity small { color: var(--muted); font-size: .78rem; }
.room-edit-photo-btn { display: grid; place-items: center; width: 38px; height: 38px; margin-left: auto; border-radius: 13px; background: var(--brand); color: #fff; cursor: pointer; }
.room-edit-modal .form-control { border-radius: 13px; }
.room-edit-modal .modal-footer { padding: 0 22px 22px; }

/* v0.14 */
.notification-dot.has-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 10px;
  background: #e54872;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  animation: none;
}
.notification-item {
  cursor: pointer;
}
.post-author {
  cursor: pointer;
}
.account-post-meta {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.76rem;
}
.account-post-meta i {
  margin-right: 2px;
}

/* v0.15: lenta yuklanishi, akkaunt postlari lentasi */
.feed-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 16px;
  color: var(--muted);
  font-size: 0.95rem;
}
.feed-error {
  padding: 32px 16px;
}
.feed-user-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 0;
  font-weight: 700;
}
.feed-user-bar span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-post[data-open-post] {
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.account-post[data-open-post]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(100, 77, 255, 0.18);
}
.account-post[data-open-post]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.post.post-focus {
  animation: post-focus 2.2s ease;
}
@keyframes post-focus {
  0%,
  60% {
    background: rgba(100, 77, 255, 0.16);
  }
  100% {
    background: transparent;
  }
}
@media (max-width: 575px) {
  .peer-profile-side {
    padding: 8px 16px 14px;
  }
  .peer-profile-content {
    padding: 14px 16px 16px;
  }
  .peer-profile-dialog {
    margin: 10px;
  }
}

/* --- v0.9.0: chat menyusi, do'stlar, bloklash, xabarni o'chirish --- */
.chat-header .dropdown-menu {
  min-width: 230px;
  z-index: 1050;
}
.chat-header .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
}
.chat-header .dropdown-item i {
  font-size: 1.05rem;
}
.block-banner {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: 0.9rem;
}
.block-banner button {
  flex: none;
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}
.msg-tools {
  gap: 4px;
}
.tabs button {
  padding: 7px 10px;
  gap: 5px;
}
@media (max-width: 767px) {
  .nav-mobile button {
    min-width: 48px;
  }
}
.msg {
  cursor: pointer;
  -webkit-touch-callout: none;
}
.msg-menu {
  position: fixed;
  z-index: 2100;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25);
}
.msg-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 0.95rem;
  text-align: left;
}
.msg-menu button:hover,
.msg-menu button:active {
  background: rgba(127, 127, 150, 0.14);
}
.msg-menu button.danger {
  color: #e54872;
}
.msg-menu button i {
  font-size: 1.1rem;
}
.am-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.95rem;
}
.am-check input {
  width: 1.2em;
  height: 1.2em;
  margin: 0;
  flex: none;
}

/* v0.9.3: kun ajratgichlari */
.day-sep {
  align-self: center;
  margin: 8px 0 2px;
}
.day-sep span {
  display: inline-block;
  padding: 3px 13px;
  border-radius: 999px;
  background: rgba(127, 127, 150, 0.18);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

/* v0.9.3: tarixni tozalash animatsiyasi (supurgi + axlat savati) */
.chat-clear-anim,
.chat-cleared {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  text-align: center;
}
.chat-clear-anim p {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}
.chat-clear-anim {
  animation: ca-in 0.3s ease;
}
.ca-floor {
  stroke: var(--line);
  stroke-width: 2;
  stroke-linecap: round;
}
.ca-bin-body {
  fill: rgba(79, 70, 229, 0.14);
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.ca-lid rect {
  fill: var(--brand);
}
.ca-lid {
  transform-origin: 106px 44px;
  animation: ca-lid 1.1s ease-in-out infinite;
}
.ca-rib {
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.55;
}
.ca-handle {
  stroke: #b9854a;
  stroke-width: 4;
  stroke-linecap: round;
}
.ca-bristle {
  fill: #e6b84d;
  stroke: #b98a1f;
  stroke-width: 2;
  stroke-linejoin: round;
}
.ca-strand {
  stroke: #b98a1f;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.7;
}
.ca-broom {
  transform-origin: 30px 14px;
  animation: ca-sweep 1.1s ease-in-out infinite;
}
.ca-dust {
  fill: var(--muted);
  opacity: 0;
  animation: ca-dust 1.1s ease-out infinite;
}
.ca-dust.d2 {
  animation-delay: 0.12s;
}
.ca-dust.d3 {
  animation-delay: 0.24s;
}
.ca-dust.d4 {
  animation-delay: 0.36s;
}
@keyframes ca-sweep {
  0%,
  100% {
    transform: translateX(0) rotate(-12deg);
  }
  50% {
    transform: translateX(26px) rotate(10deg);
  }
}
@keyframes ca-dust {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(58px, -22px) scale(0.4);
  }
}
@keyframes ca-lid {
  0%,
  55%,
  100% {
    transform: rotate(0);
  }
  72% {
    transform: rotate(-22deg);
  }
}
@keyframes ca-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.chat-cleared {
  animation: ca-in 0.35s ease;
}
.chat-cleared i {
  font-size: 2.4rem;
  color: var(--brand);
}
.chat-cleared span {
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(127, 127, 150, 0.18);
  font-weight: 600;
  font-size: 0.9rem;
}
@media (prefers-reduced-motion: reduce) {
  .ca-broom,
  .ca-lid,
  .ca-dust,
  .chat-clear-anim,
  .chat-cleared {
    animation: none;
  }
  .ca-dust {
    opacity: 0.8;
  }
}

/* v0.9.4: navbar tartibi (qo'ng'iroqcha chapda, profil o'ngda) va qo'ng'iroqcha jiringlashi */
.nav-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.feed-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.feed-header-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
}
.feed-header-link:hover,
.feed-header-link:focus-visible {
  background: #4338ca;
  color: #fff;
}
@media (max-width: 767px) {
  .feed-header-actions {
    gap: 5px;
  }
  .feed-header-link {
    display: none;
  }
  .feed-create-btn {
    padding: 7px 9px;
    font-size: 0.78rem;
  }
}
@media (max-width: 360px) {
  .feed-header-link {
    display: none;
  }
}
@media (min-width: 768px) {
  .app-main.feed-open {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-main.feed-open .chat-sidebar {
    display: none;
  }
}
.notification-preview {
  right: auto;
  left: -34px;
  bottom: auto;
  top: 24px;
  border-radius: 4px 14px 14px 14px;
  transform-origin: top left;
  transform: translateY(-6px) scale(0.96);
}
.notification-trigger .bi-bell-fill {
  display: inline-block;
  transform-origin: 50% 12%;
}
.notification-trigger.ringing .bi-bell-fill {
  animation: bell-ring 0.95s ease-in-out 2;
}
@keyframes bell-ring {
  0%,
  100% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(24deg);
  }
  22% {
    transform: rotate(-22deg);
  }
  34% {
    transform: rotate(18deg);
  }
  46% {
    transform: rotate(-14deg);
  }
  58% {
    transform: rotate(9deg);
  }
  70% {
    transform: rotate(-5deg);
  }
  82% {
    transform: rotate(2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .notification-trigger.ringing .bi-bell-fill {
    animation: none;
  }
}

/* v0.9.7: uzatilgan xabar, uzatish oynasi, Saqlangan xabarlar, profilda postlar tugmasi */
.msg-fwd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 0.76rem;
  color: var(--brand);
  max-width: 260px;
}
.msg-fwd i {
  transform: scaleX(-1);
  flex: none;
}
.msg-fwd span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg.me .msg-fwd {
  color: rgba(255, 255, 255, 0.92);
}
.fwd-preview {
  margin-bottom: 10px;
  padding: 7px 10px;
  border-left: 3px solid var(--brand);
  border-radius: 6px;
  background: rgba(100, 77, 255, 0.1);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fwd-preview:empty {
  display: none;
}
.fwd-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 42vh;
  overflow-y: auto;
}
.fwd-item {
  display: grid;
  grid-template-columns: 22px 42px 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 12px;
  cursor: pointer;
}
.fwd-item:hover {
  background: rgba(127, 127, 150, 0.14);
}
.fwd-item img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.fwd-item span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fwd-item b,
.fwd-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fwd-item small {
  color: var(--muted);
}
.fwd-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.fwd-mode {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}
.fwd-mode span {
  display: flex;
  flex-direction: column;
}
.fwd-mode small {
  color: var(--muted);
}
.account-posts-gate {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.account-posts-gate .gate-count {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Video: keep the picture clear and split playback from secondary actions. */
.msg-video-player {
  container-type: inline-size;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(10, 12, 24, 0.24);
}
.msg-video-stage {
  overflow: hidden;
  border-radius: inherit;
}
.video-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  background: linear-gradient(
    180deg,
    rgba(4, 6, 12, 0.58),
    transparent 26%,
    transparent 54%,
    rgba(4, 6, 12, 0.74)
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.msg-video-player.controls-visible .video-overlay,
.msg-video-player:hover .video-overlay,
.msg-video-player:focus-within .video-overlay {
  opacity: 1;
}
.video-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  max-width: min(100%, 340px);
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(14, 16, 22, 0.48);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.2;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.video-heading span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-heading small {
  flex: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.68rem;
}
.video-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}
.video-control-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  color: #fff;
}
.video-control-spacer {
  flex: 1;
}
.video-save-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 7px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(13, 15, 20, .58);
  color: #fff;
  font-size: .78rem;
  font-weight: 650;
  pointer-events: auto;
}
.video-save-action:hover,
.video-save-action:focus-visible { background: rgba(255, 255, 255, .22); outline: 2px solid rgba(255, 255, 255, .55); }
.video-save-action:disabled { opacity: .6; }
.video-save-mobile { display: none; }
.video-save-action { display: none !important; }
.msg-video-player .video-more-mobile { display: none; }
.video-control {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(13, 15, 20, 0.46);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.video-control.video-play {
  width: 44px;
  height: 44px;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.2);
  font-size: 1.45rem;
}
.video-control:hover,
.video-control:focus-visible {
  background: rgba(255, 255, 255, 0.25);
}
.video-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px #000;
}
.video-time-divider {
  color: rgba(255, 255, 255, 0.56);
}
.video-seek {
  display: block;
  width: 100%;
  min-width: 0;
  height: 18px;
  padding: 0;
  opacity: 0.92;
}
.video-seek::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(
    to right,
    #a99cff var(--video-progress, 0%),
    rgba(255, 255, 255, 0.5) var(--video-progress, 0%)
  );
}
.video-seek::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.5);
}
.video-seek::-moz-range-progress {
  height: 4px;
  background: #a99cff;
}
.video-seek::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
}
.video-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
}
.video-feedback {
  z-index: 3;
}
.video-feedback i {
  width: 68px;
  height: 68px;
  font-size: 2.8rem;
}
@container (max-width: 220px) {
  .video-overlay {
    padding: 5px;
  }
  .video-heading {
    gap: 4px;
    max-width: 100%;
    padding: 4px 7px;
    font-size: 0.62rem;
  }
  .video-heading small {
    display: none;
  }
  .video-bottom {
    gap: 2px;
  }
  .video-control-row {
    gap: 3px;
    min-height: 30px;
  }
  .video-control,
  .video-control.video-play {
    width: 29px;
    height: 29px;
    font-size: 0.95rem;
  }
  .video-time {
    gap: 2px;
    font-size: 0.58rem;
  }
  .video-duration,
  .video-time-divider {
    display: none;
  }
}
.msg-video-player:fullscreen .video-overlay,
.msg-video-player.is-fullscreen .video-overlay {
  padding: 22px max(22px, env(safe-area-inset-left));
}
.msg-video-player:fullscreen .video-bottom,
.msg-video-player.is-fullscreen .video-bottom {
  width: min(100%, 760px);
  align-self: center;
}
.msg-video-player:fullscreen .video-control,
.msg-video-player.is-fullscreen .video-control {
  width: 48px;
  height: 48px;
}
.msg-video-player:fullscreen .video-control.video-play,
.msg-video-player.is-fullscreen .video-control.video-play {
  width: 52px;
  height: 52px;
}
@media (max-width: 767px) {
  .video-overlay {
    padding: 9px;
  }
  .video-bottom {
    gap: 5px;
  }
  .video-control-row {
    gap: 7px;
    min-height: 40px;
  }
  .video-control {
    width: 40px;
    height: 40px;
  }
  .video-control.video-play {
    width: 42px;
    height: 42px;
  }
  .video-heading {
    max-width: 100%;
    padding: 5px 9px;
    font-size: 0.72rem;
  }
  .video-time {
    font-size: 0.7rem;
  }
  .video-feedback i {
    width: 58px;
    height: 58px;
    font-size: 2.4rem;
  }
}
/* Keep the secondary controls inside especially narrow portrait videos on mobile. */
@container (max-width: 220px) {
  .msg-video-player .video-overlay {
    padding: 5px;
  }
  .msg-video-player .video-bottom {
    gap: 2px;
  }
  .msg-video-player .video-control-row {
    gap: 2px;
    min-height: 28px;
  }
  .msg-video-player .video-control,
  .msg-video-player .video-control.video-play {
    width: 25px;
    height: 25px;
    font-size: 0.85rem;
  }
  .msg-video-player .video-time {
    gap: 1px;
    font-size: 0.55rem;
  }
  .msg-video-player .video-current {
    min-width: 24px;
  }
  .msg-video-player .video-duration,
  .msg-video-player .video-time-divider {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .video-overlay,
  .video-feedback {
    transition: none;
  }
}

/* ===== Video: tor (vertikal) videolarda boshqaruv tugmalari chetga chiqib ketmasin ===== */
.msg-video-player {
  min-width: 220px;
}
.msg-video-player .video-overlay {
  box-sizing: border-box;
  overflow: hidden;
}
.msg-video-player .video-bottom,
.msg-video-player .video-control-row {
  min-width: 0;
  max-width: 100%;
}
.msg-video-player .video-control {
  flex: none;
}
.msg-video-player .video-time {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
@container (max-width: 290px) {
  .msg-video-player .video-control-row {
    gap: 4px;
  }
  .msg-video-player .video-control {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }
  .msg-video-player .video-control.video-play {
    width: 38px;
    height: 38px;
    font-size: 1.25rem;
  }
  .msg-video-player .video-duration,
  .msg-video-player .video-time-divider {
    display: none;
  }
}
@container (max-width: 235px) {
  .msg-video-player .video-overlay {
    padding: 6px;
  }
  .msg-video-player .video-control,
  .msg-video-player .video-control.video-play {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
}

/* Fullscreen controls stay anchored to the video frame with room for the title. */
.msg-video-player:fullscreen,
.msg-video-player.is-fullscreen {
  box-sizing: border-box;
  padding: 0;
}
.msg-video-player:fullscreen .msg-video-stage,
.msg-video-player.is-fullscreen .msg-video-stage {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
}
.msg-video-player:fullscreen .msg-video,
.msg-video-player.is-fullscreen .msg-video {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: calc(100dvh - 150px);
  object-fit: contain;
}
.msg-video-player:fullscreen .video-overlay,
.msg-video-player.is-fullscreen .video-overlay {
  padding: max(18px, env(safe-area-inset-top))
    max(22px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom))
    max(22px, env(safe-area-inset-left));
}
.msg-video-player:fullscreen .video-heading,
.msg-video-player.is-fullscreen .video-heading {
  align-self: flex-start;
  max-width: min(100%, 760px);
  margin: 0 auto;
  font-size: 0.9rem;
}
.msg-video-player:fullscreen .video-bottom,
.msg-video-player.is-fullscreen .video-bottom {
  width: min(100%, 760px);
  align-self: center;
}

/* ===== Yuklanish kartasi (Telegram uslubi): qora quti + aylanuvchi halqa + foiz ===== */
.msg.uploading {
  max-width: min(78%, 460px);
}
.msg.uploading .up-box {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 220px;
  min-height: 132px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: #fff;
  background: radial-gradient(
    120% 90% at 50% 0%,
    #1b1d2b 0%,
    #0b0c12 62%,
    #050609 100%
  );
  box-shadow: 0 8px 24px rgba(10, 12, 24, 0.24);
}
.msg.uploading .up-box.up-file {
  width: min(100%, 300px);
  height: auto;
  flex-direction: row;
  justify-content: flex-start;
  gap: 14px;
  padding: 14px 16px;
  min-height: 0;
}
.up-ring {
  position: relative;
  flex: none;
  width: 58px;
  height: 58px;
}
.up-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  animation: up-spin 1.1s linear infinite;
}
.up-ring circle {
  fill: none;
  stroke-width: 3;
}
.up-ring .up-track {
  stroke: rgba(255, 255, 255, 0.14);
}
.up-ring .up-arc {
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s ease;
  filter: drop-shadow(0 0 4px rgba(128, 108, 255, 0.55));
}
.up-cancel {
  position: absolute;
  inset: 9px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}
.up-cancel:hover,
.up-cancel:focus-visible {
  background: rgba(255, 255, 255, 0.22);
}
.up-cancel:active {
  transform: scale(0.9);
}
.upload-complete .up-ring svg {
  animation: none;
}
.upload-complete .up-ring .up-arc {
  stroke: #36d780;
  filter: drop-shadow(0 0 5px rgba(54, 215, 128, 0.45));
}
.upload-complete .up-cancel,
.upload-complete .up-cancel:disabled {
  border: 1px solid rgba(54, 215, 128, 0.42);
  background: rgba(28, 157, 88, 0.22);
  color: #58e995;
  cursor: default;
}
.upload-complete .up-cancel:active {
  transform: none;
}
.upload-complete .up-label {
  color: #8df0b4;
}
.up-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.up-file .up-info {
  align-items: flex-start;
  text-align: left;
}
.up-pct {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.up-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.72);
}
.up-size {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
}
@keyframes up-spin {
  to {
    transform: rotate(270deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .up-ring svg {
    animation: none;
  }
  .up-ring .up-arc {
    transition: none;
  }
}
@media (max-width: 767px) {
  .msg.uploading {
    max-width: 92%;
  }
}

/* ===================== v0.9.10 — mobil: kategoriya ikonlari, zamonaviy qidiruv va tarixi ===================== */
.search-toggle,
.search-field__back,
.search-field__clear,
.search-history {
  display: none;
}
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.search-field__ic {
  position: absolute;
  left: 12px;
  color: var(--muted);
  pointer-events: none;
  font-size: 0.95rem;
}
.search-field input {
  width: 100%;
  padding: 10px 38px 10px 36px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.search-field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(101, 77, 255, 0.12);
}
.search-field__clear {
  display: inline-flex;
  position: absolute;
  right: 10px;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.05rem;
  cursor: pointer;
}
.search-field__clear.hide {
  display: none !important;
}

/* Desktop qidiruv tarixi */
.search-history {
  display: block;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.dark-mode .search-history {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.1);
}
.search-history.hide {
  display: none !important;
}
.search-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.search-history__head button {
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.search-history__head button:hover {
  text-decoration: underline;
}
.search-history__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}
.search-history__item:hover,
.search-history__item:active {
  background: rgba(101, 77, 255, 0.08);
}
.dark-mode .search-history__item:hover,
.dark-mode .search-history__item:active {
  background: rgba(255, 255, 255, 0.06);
}
.search-history__item > i {
  color: var(--muted);
  font-size: 0.95rem;
  flex: none;
}
.search-history__q {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}
.search-history__del {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
  opacity: 0.7;
}
.search-history__del:hover,
.search-history__del:active {
  opacity: 1;
  color: #e54872;
}
.search-history__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 12px;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}
.search-history__empty i {
  font-size: 1.5rem;
  opacity: 0.5;
}

@media (max-width: 767px) {
  .chat-sidebar__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .search-toggle {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.24);
    color: inherit;
    font-size: 1.05rem;
    transition:
      background 0.2s,
      transform 0.15s;
    cursor: pointer;
  }
  .search-toggle:active {
    transform: scale(0.92);
  }
  .search-toggle.on {
    background: rgba(255, 255, 255, 0.45);
  }

  /* Qidiruv mobilda yopiq turganda */
  .chat-sidebar .search-box {
    display: none;
    padding: 10px 12px 2px;
  }

  /* ========================================================================= */
  /* Qidiruv ochilganda (search-open): Navbar HIDE, Note HIDE, Zamonaviy UI!   */
  /* ========================================================================= */
  body.search-open .header,
  body.search-open .nav-mobile,
  .chat-sidebar.search-open .chat-sidebar__title,
  .chat-sidebar.search-open .chat-categories,
  .chat-sidebar.search-open .notes {
    display: none !important;
  }

  body.search-open .chat-sidebar {
    height: 100dvh;
    border-radius: 0;
  }

  .chat-sidebar.search-open .search-box {
    display: flex;
    flex-direction: column;
    padding: max(10px, env(safe-area-inset-top)) 10px 8px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .chat-sidebar.search-open .search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    width: 100%;
  }

  .chat-sidebar.search-open .search-field__back {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.15s;
  }
  .chat-sidebar.search-open .search-field__back:active {
    background: rgba(101, 77, 255, 0.12);
  }

  .chat-sidebar.search-open .search-field input {
    flex: 1;
    min-width: 0;
    padding: 10px 36px 10px 38px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(120, 120, 128, 0.08);
    color: var(--text);
    font-size: 16px;
  }
  .dark-mode .chat-sidebar.search-open .search-field input {
    background: rgba(255, 255, 255, 0.06);
  }

  .chat-sidebar.search-open .search-field__ic {
    left: 54px;
    font-size: 0.92rem;
  }

  .chat-sidebar.search-open .search-field__clear {
    right: 10px;
  }

  /* Qidiruv paytida agar so'rov yozilmagan bo'lsa, chat-list (suhbatlar ro'yxati) umuman chiqmasin */
  body.search-open:not(.search-has-query) .chat-list {
    display: none !important;
  }

  body.search-open .chat-list {
    padding-bottom: 24px !important;
  }

  /* Shaxsiy / Guruhlar / Jamiyatlar: tepadan masofa + ikonlar */
  .chat-categories {
    margin-top: 14px;
    padding-top: 2px;
  }
  .chat-categories button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .chat-categories button i {
    font-size: 0.95rem;
    line-height: 1;
  }
}

/* === bulutli note, kashf qilish, to'liq ekran rasm oynasi === */

/* Note: matn oq bulutda, ism kichik va kulrang */
.note {
  gap: 2px;
}
.note-cloud {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 30px;
  margin-bottom: 7px;
  padding: 5px 8px;
  border-radius: 16px;
  background: #fff;
  color: #1c1c21;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.note-cloud span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.66rem;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}
.note-cloud.empty {
  color: #7b7b86;
}
/* bulut "dumi": ikkita kichik aylana */
.note-cloud::before,
.note-cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
.note-cloud::before {
  bottom: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
}
.note-cloud::after {
  bottom: -9px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -9px;
}
.note-name {
  width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note .note-avatar {
  margin-top: 4px;
}

/* Friends: kashf qilish */
.explore-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 14px 16px 6px;
  list-style: none;
}
.explore-head b {
  font-size: 0.95rem;
}
.explore-head small {
  color: var(--muted);
  font-size: 0.75rem;
}
.explore-card .join-btn {
  white-space: nowrap;
}
.explore-more {
  display: flex;
  justify-content: center;
  padding: 8px 16px 16px;
  list-style: none;
}
.explore-more button {
  padding: 8px 22px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: transparent;
  color: var(--brand);
  font-weight: 600;
  cursor: pointer;
}
.explore-more button:hover {
  background: var(--brand);
  color: #fff;
}

/* Rasm oynasi: butun ekran, chap yuqorida yopish, o'ngda ⋮ menyu */
body.lightbox-open {
  overflow: hidden;
}
.lightbox {
  padding: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.lightbox img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}
.lightbox-close {
  left: max(14px, env(safe-area-inset-left));
  right: auto;
  z-index: 2;
  background: rgba(0, 0, 0, 0.45);
}
.lightbox-more {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}
.lightbox-more:hover,
.lightbox-more:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}
.lightbox-menu {
  position: absolute;
  top: calc(max(16px, env(safe-area-inset-top)) + 52px);
  right: max(14px, env(safe-area-inset-right));
  z-index: 3;
  min-width: 210px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(28, 28, 34, 0.96);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.lightbox-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}
.lightbox-menu button:hover,
.lightbox-menu button:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}
.lightbox-menu.hide {
  display: none;
}
.post-img {
  cursor: zoom-in;
}
@media (max-width: 767px) {
  .lightbox {
    padding: 0;
  }
  .lightbox img {
    max-width: 100%;
    max-height: 100%;
  }
}

/* Video yuklab bo'lmasa (masalan HEVC .mov): yuklab olish havolasi */
.video-fallback {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.85rem;
  text-decoration: none;
}

/* ===== v0.9.11: Explore tugmalari (Do'stlashish / Kuzatish) ===== */
.explore-card {
  grid-template-columns: 56px 1fr;
  row-gap: 10px;
  padding: 10px;
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}
.explore-card.leaving {
  opacity: 0;
  transform: translateX(26px) scale(0.97);
  pointer-events: none;
}
.explore-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.xbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 12px;
  border: 1.5px solid transparent;
  border-radius: 13px;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.xbtn i {
  font-size: 1.02rem;
  transition: transform 0.25s ease;
}
.xbtn:active:not(:disabled) {
  transform: scale(0.96);
}
.xbtn:disabled {
  cursor: default;
}
/* Kuzatish (asosiy) - gradient; Do'stlashish (ikkinchi darajali) - chegarali */
.xbtn-follow {
  color: #fff;
  background: linear-gradient(135deg, #7a62ff 0%, #4f46e5 100%);
  box-shadow: 0 6px 16px -6px rgba(79, 70, 229, 0.75);
}
.xbtn-follow:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(79, 70, 229, 0.85);
}
.xbtn-follow:hover:not(:disabled) i {
  transform: scale(1.15) rotate(90deg);
}
.xbtn-follow.on {
  color: var(--muted);
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
  --spin: var(--brand);
}
.xbtn-follow.on i {
  color: #10b981;
}
.xbtn-follow.on:hover:not(:disabled) {
  box-shadow: none;
}
.xbtn-follow.on:hover:not(:disabled) i {
  transform: none;
}
.dark-mode .xbtn-follow.on {
  color: #c9cbd8;
}
.xbtn-friend {
  color: var(--brand);
  background: rgba(79, 70, 229, 0.08);
  border-color: rgba(79, 70, 229, 0.45);
  --spin: var(--brand);
}
.xbtn-friend:hover:not(:disabled) {
  background: rgba(79, 70, 229, 0.15);
  transform: translateY(-1px);
}
.xbtn-friend:hover:not(:disabled) i {
  transform: scale(1.15) rotate(-6deg);
}
.dark-mode .xbtn-friend {
  color: #b7abff;
  background: rgba(124, 114, 201, 0.16);
  border-color: rgba(124, 114, 201, 0.55);
}
.xbtn-friend.done,
.dark-mode .xbtn-friend.done {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #34d399, #10b981);
  box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.7);
  animation: xbtn-pop 0.4s ease;
}
.xbtn.pop {
  animation: xbtn-pop 0.35s ease;
}
@keyframes xbtn-pop {
  0% {
    transform: scale(0.92);
  }
  60% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .xbtn,
  .xbtn i,
  .explore-card {
    transition: none;
  }
  .xbtn.pop,
  .xbtn-friend.done {
    animation: none;
  }
}

/* ===== v0.9.11: Chat foni ===== */
.chat-body.has-bg,
.bgp-preview.has-bg {
  background: var(--chat-bg);
}
.dark-mode .chat-body.has-bg,
.dark-mode .bgp-preview.has-bg {
  background: var(--chat-bg-dark);
}
.chat-body.has-bg .day-sep span,
.chat-body.has-bg .seen-line,
.chat-body.has-bg .seen-line.st-read {
  background: rgba(20, 20, 38, 0.42);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.chat-body.has-bg .saved-empty,
.chat-body.has-bg .chat-cleared {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.chat-body.has-bg .saved-empty strong {
  color: #fff;
}
#bg-modal .modal-content {
  border-radius: 20px;
}
.bgp-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  transition: background 0.25s ease;
}
.bgp-bubble {
  max-width: 78%;
  padding: 8px 13px;
  border-radius: 18px;
  font-size: 0.92rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.bgp-bubble.them {
  align-self: flex-start;
  background: var(--them);
  color: var(--text);
  border-bottom-left-radius: 6px;
}
.bgp-bubble.me {
  align-self: flex-end;
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.bgp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.bgp-sw {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--sw, var(--card));
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.dark-mode .bgp-sw {
  background: var(--sw-dark, var(--sw, var(--card)));
}
.bgp-sw > i {
  font-size: 1.3rem;
}
.bgp-sw:hover {
  transform: translateY(-2px);
}
.bgp-sw:active {
  transform: scale(0.95);
}
.bgp-sw.on {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}
.bgp-tick {
  position: absolute;
  right: 5px;
  top: 5px;
  display: none;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem !important;
}
.bgp-sw.on .bgp-tick {
  display: inline-flex;
}
.bgp-upload {
  border-style: dashed;
}
.bgp-upload.on {
  border-style: solid;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.bgp-dim {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 0.88rem;
  font-weight: 600;
}
.bgp-dim input {
  flex: 1;
  accent-color: var(--brand);
}
.bgp-scope {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  cursor: pointer;
}
.bgp-scope .form-check-input {
  flex: none;
  margin-top: 3px;
}
.bgp-scope span {
  display: flex;
  flex-direction: column;
  font-size: 0.92rem;
}
.bgp-scope small {
  color: var(--muted);
  font-size: 0.76rem;
}
.bgp-save {
  min-width: 120px;
  padding: 10px 22px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #7a62ff, #4f46e5);
  color: #fff;
  font-weight: 650;
  box-shadow: 0 6px 16px -6px rgba(79, 70, 229, 0.75);
  transition: transform 0.15s ease;
}
.bgp-save:active {
  transform: scale(0.97);
}
@media (max-width: 400px) {
  .bgp-grid {
    gap: 8px;
  }
}

/* ===== Video v2: iPhone uchun ishonchli pleyer (qora sakrashsiz, to'liq ekran, boshqaruv) ===== */
.msg-video-player {
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.msg-video-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9; /* o'lcham noma'lum bo'lsa vaqtincha; keyin inline aspect-ratio bilan almashadi */
  overflow: hidden;
  background: #090a0f;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(
    white,
    black
  ); /* iOS: border-radius + video qora ko'rinish xatosi */
}
.msg-video-player:not(.vfs) .msg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: contain;
  background: transparent;
  transition: opacity 0.2s ease;
}
.msg-video-player.is-loading:not(.vfs) .msg-video {
  opacity: 0;
}
.video-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.msg-video-player.is-loading .video-skeleton {
  background: linear-gradient(110deg, #14161f 30%, #202437 50%, #14161f 70%);
  background-size: 200% 100%;
  animation: video-shimmer 1.3s linear infinite;
}
.video-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: video-spin 0.8s linear infinite;
  transition: opacity 0.15s ease;
}
.msg-video-player.is-loading .video-spinner,
.msg-video-player.is-buffering .video-spinner {
  opacity: 0.9;
}
.msg-video-player.is-loading.controls-visible .video-spinner {
  opacity: 0;
} /* o'lcham noma'lum paytda play tugmasi ko'rinib tursin */
@keyframes video-shimmer {
  to {
    background-position: -200% 0;
  }
}
@keyframes video-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Boshqaruv yashirin bo'lsa tugmalar tasodifan bosilmasin; iPhone'da :hover yopishib qolmasin */
.msg-video-player .video-bottom {
  pointer-events: none;
}
.msg-video-player.controls-visible .video-bottom {
  pointer-events: auto;
}
@media (hover: hover) {
  .msg-video-player:hover .video-bottom {
    pointer-events: auto;
  }
}
@media (hover: none) {
  .msg-video-player:hover:not(.controls-visible):not(:focus-within)
    .video-overlay {
    opacity: 0;
  }
}
.video-seek {
  touch-action: none;
}
@media (pointer: coarse) {
  .video-seek {
    height: 28px;
  }
  .video-seek::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -6px;
  }
}

/* To'liq ekran (iPhone'da native pleyer ochilmasa): body'ga ko'chiriladi, shuning uchun chat sarlavhasi/yozish paneli qoplamaydi */
body.video-fs-open {
  overflow: hidden;
}
.msg-video-player.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100vw !important;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  max-width: 100vw;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}
.msg-video-player.vfs .msg-video-stage {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
  aspect-ratio: auto !important;
  border-radius: 0;
  background: transparent;
  -webkit-mask-image: none;
}
.msg-video-player.vfs .msg-video {
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: calc(
    100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
  );
  opacity: 1 !important;
  object-fit: contain;
}
.msg-video-player.vfs .video-skeleton {
  display: none;
}
.msg-video-player.vfs .video-overlay {
  padding-top: max(18px, env(safe-area-inset-top, 0px));
  padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
}
.video-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.15rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.video-close:active {
  transform: scale(0.92);
}
@media (prefers-reduced-motion: reduce) {
  .msg-video-player.is-loading .video-skeleton,
  .video-spinner {
    animation: none;
  }
}
/* ===== v0.9.12: chat foni menyuda, reaksiya stikerlari, ovozli xabar ===== */
.chat-header .dropdown-item .cm-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(135deg, #9a8cff, #4f46e5);
  color: #fff;
  box-shadow: 0 3px 8px rgba(79, 70, 229, 0.35);
}
.chat-header .dropdown-item .cm-ico i {
  font-size: 1rem;
}

/* animatsiyali stikerlar (Noto Animated Emoji) */
.stk {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.stk-txt {
  font-size: 1.15rem;
  line-height: 1;
}

/* xabar tagidagi reaksiya chiplari */
.msg-reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  white-space: normal;
}
.rx {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 30px;
  padding: 0 9px 0 5px;
  border: 1px solid rgba(79, 70, 229, 0.25);
  border-radius: 15px;
  background: rgba(79, 70, 229, 0.1);
  color: inherit;
  font-size: 0.8rem;
  line-height: 1;
}
.rx .stk {
  width: 20px;
  height: 20px;
}
.rx b {
  font-weight: 600;
}
.rx.mine {
  border-color: var(--brand);
  background: rgba(79, 70, 229, 0.22);
}
.msg.me .rx {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.18);
}
.msg.me .rx.mine {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.34);
}
.rx.pop {
  animation: rx-pop 0.42s cubic-bezier(0.2, 1.6, 0.4, 1) 3;
}
@keyframes rx-pop {
  0% {
    transform: scale(0.82);
  }
  45% {
    transform: scale(1.18);
  }
  75% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
  }
}

/* xabar menyusining tepasidagi stikerlar qatori */
.msg-menu .rx-row {
  display: flex;
  gap: 2px;
  margin-bottom: 4px;
  padding: 2px 2px 6px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.msg-menu .rx-row::-webkit-scrollbar {
  display: none;
}
.msg-menu .rx-row button {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  animation: rx-in 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) both;
  animation-delay: calc(var(--i) * 28ms);
}
.msg-menu .rx-row button .stk {
  width: 32px;
  height: 32px;
  transition: transform 0.15s ease;
}
.msg-menu .rx-row button:hover .stk,
.msg-menu .rx-row button:active .stk {
  transform: scale(1.25);
}
.msg-menu .rx-row button.on {
  background: rgba(79, 70, 229, 0.2);
}
@keyframes rx-in {
  from {
    transform: translateY(8px) scale(0.5);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ovozli xabar pleyeri */
.msg-voice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(260px, 64vw);
  min-width: 200px;
  padding: 2px 0;
  white-space: normal;
}
.vp-play {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35);
}
.vp-play:active {
  transform: scale(0.94);
}
.msg.me .vp-play {
  background: #fff;
  color: var(--brand);
}
.vp-body {
  flex: 1;
  min-width: 0;
}
.vp-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  cursor: pointer;
}
.vp-wave i {
  flex: 1;
  min-width: 2px;
  height: var(--h);
  min-height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.3;
  transition: opacity 0.15s ease;
}
.vp-wave i.on {
  opacity: 1;
}
.msg:not(.me) .vp-wave i.on {
  background: var(--brand);
}
.vp-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 1px;
  font-size: 0.72rem;
  opacity: 0.85;
}
.vp-time {
  font-variant-numeric: tabular-nums;
}
.vp-speed {
  border: 0;
  border-radius: 10px;
  padding: 1px 7px;
  background: rgba(127, 127, 150, 0.22);
  color: inherit;
  font-size: 0.7rem;
  font-weight: 700;
}
.msg.me .vp-speed {
  background: rgba(255, 255, 255, 0.25);
}

/* ovoz yozish paneli */
.rec-bar {
  display: none;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.input-box.recording > :not(.rec-bar) {
  display: none !important;
}
.input-box.recording > .rec-bar {
  display: flex;
}
.rec-cancel {
  color: #e54872 !important;
}
.rec-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  animation: rec-pulse 1s ease-in-out infinite;
}
.rec-time {
  flex: none;
  min-width: 44px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rec-wave {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 30px;
  min-width: 0;
  overflow: hidden;
}
.rec-wave i {
  flex: none;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleY(0.15);
  animation: rec-bar 1s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.75);
  }
}
@keyframes rec-bar {
  0%,
  100% {
    transform: scaleY(0.15);
  }
  50% {
    transform: scaleY(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rec-dot,
  .rec-wave i,
  .rx.pop,
  .msg-menu .rx-row button {
    animation: none;
  }
}
HEAD .bgp-save:active {
  transform: scale(0.97);
}
@media (max-width: 400px) {
  .bgp-grid {
    gap: 8px;
  }
}

/* ===== Video v2: iPhone uchun ishonchli pleyer (qora sakrashsiz, to'liq ekran, boshqaruv) ===== */
.msg-video-player {
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.msg-video-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9; /* o'lcham noma'lum bo'lsa vaqtincha; keyin inline aspect-ratio bilan almashadi */
  overflow: hidden;
  background: #090a0f;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(
    white,
    black
  ); /* iOS: border-radius + video qora ko'rinish xatosi */
}
.msg-video-player:not(.vfs) .msg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: contain;
  background: transparent;
  transition: opacity 0.2s ease;
}
.msg-video-player.is-loading:not(.vfs) .msg-video {
  opacity: 0;
}
.video-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.msg-video-player.is-loading .video-skeleton {
  background: linear-gradient(110deg, #14161f 30%, #202437 50%, #14161f 70%);
  background-size: 200% 100%;
  animation: video-shimmer 1.3s linear infinite;
}
.video-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: video-spin 0.8s linear infinite;
  transition: opacity 0.15s ease;
}
.msg-video-player.is-loading .video-spinner,
.msg-video-player.is-buffering .video-spinner {
  opacity: 0.9;
}
.msg-video-player.is-loading.controls-visible .video-spinner {
  opacity: 0;
} /* o'lcham noma'lum paytda play tugmasi ko'rinib tursin */
@keyframes video-shimmer {
  to {
    background-position: -200% 0;
  }
}
@keyframes video-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Boshqaruv yashirin bo'lsa tugmalar tasodifan bosilmasin; iPhone'da :hover yopishib qolmasin */
.msg-video-player .video-bottom {
  pointer-events: none;
}
.msg-video-player.controls-visible .video-bottom {
  pointer-events: auto;
}
@media (hover: hover) {
  .msg-video-player:hover .video-bottom {
    pointer-events: auto;
  }
}
@media (hover: none) {
  .msg-video-player:hover:not(.controls-visible):not(:focus-within)
    .video-overlay {
    opacity: 0;
  }
}
.video-seek {
  touch-action: none;
}
@media (pointer: coarse) {
  .video-seek {
    height: 28px;
  }
  .video-seek::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -6px;
  }
}

/* To'liq ekran (iPhone'da native pleyer ochilmasa): body'ga ko'chiriladi, shuning uchun chat sarlavhasi/yozish paneli qoplamaydi */
body.video-fs-open {
  overflow: hidden;
}
.msg-video-player.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100vw !important;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  max-width: 100vw;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}
.msg-video-player.vfs .msg-video-stage {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
  aspect-ratio: auto !important;
  border-radius: 0;
  background: transparent;
  -webkit-mask-image: none;
}
.msg-video-player.vfs .msg-video {
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: calc(
    100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
  );
  opacity: 1 !important;
  object-fit: contain;
}
.msg-video-player.vfs .video-skeleton {
  display: none;
}
.msg-video-player.vfs .video-overlay {
  padding-top: max(18px, env(safe-area-inset-top, 0px));
  padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
}
.video-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.15rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.video-close:active {
  transform: scale(0.92);
}
@media (prefers-reduced-motion: reduce) {
  .msg-video-player.is-loading .video-skeleton,
  .video-spinner {
    animation: none;
  }
}

/* ===== v0.9.12: chat foni menyuda, reaksiya stikerlari, ovozli xabar ===== */
.chat-header .dropdown-item .cm-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(135deg, #9a8cff, #4f46e5);
  color: #fff;
  box-shadow: 0 3px 8px rgba(79, 70, 229, 0.35);
}
.chat-header .dropdown-item .cm-ico i {
  font-size: 1rem;
}

/* animatsiyali stikerlar (Noto Animated Emoji) */
.stk {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.stk-txt {
  font-size: 1.15rem;
  line-height: 1;
}

/* xabar tagidagi reaksiya chiplari */
.msg-reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  white-space: normal;
}
.rx {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 30px;
  padding: 0 9px 0 5px;
  border: 1px solid rgba(79, 70, 229, 0.25);
  border-radius: 15px;
  background: rgba(79, 70, 229, 0.1);
  color: inherit;
  font-size: 0.8rem;
  line-height: 1;
}
.rx .stk {
  width: 20px;
  height: 20px;
}
.rx b {
  font-weight: 600;
}
.rx.mine {
  border-color: var(--brand);
  background: rgba(79, 70, 229, 0.22);
}
.msg.me .rx {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.18);
}
.msg.me .rx.mine {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.34);
}
.rx.pop {
  animation: rx-pop 0.42s cubic-bezier(0.2, 1.6, 0.4, 1) 3;
}
@keyframes rx-pop {
  0% {
    transform: scale(0.82);
  }
  45% {
    transform: scale(1.18);
  }
  75% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
  }
}

/* xabar menyusining tepasidagi stikerlar qatori */
.msg-menu .rx-row {
  display: flex;
  gap: 2px;
  margin-bottom: 4px;
  padding: 2px 2px 6px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.msg-menu .rx-row::-webkit-scrollbar {
  display: none;
}
.msg-menu .rx-row button {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  animation: rx-in 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) both;
  animation-delay: calc(var(--i) * 28ms);
}
.msg-menu .rx-row button .stk {
  width: 32px;
  height: 32px;
  transition: transform 0.15s ease;
}
.msg-menu .rx-row button:hover .stk,
.msg-menu .rx-row button:active .stk {
  transform: scale(1.25);
}
.msg-menu .rx-row button.on {
  background: rgba(79, 70, 229, 0.2);
}
@keyframes rx-in {
  from {
    transform: translateY(8px) scale(0.5);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ovozli xabar pleyeri */
.msg-voice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(260px, 64vw);
  min-width: 200px;
  padding: 2px 0;
  white-space: normal;
}
.vp-play {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35);
}
.vp-play:active {
  transform: scale(0.94);
}
.msg.me .vp-play {
  background: #fff;
  color: var(--brand);
}
.vp-body {
  flex: 1;
  min-width: 0;
}
.vp-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  cursor: pointer;
}
.vp-wave i {
  flex: 1;
  min-width: 2px;
  height: var(--h);
  min-height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.3;
  transition: opacity 0.15s ease;
}
.vp-wave i.on {
  opacity: 1;
}
.msg:not(.me) .vp-wave i.on {
  background: var(--brand);
}
.vp-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 1px;
  font-size: 0.72rem;
  opacity: 0.85;
}
.vp-time {
  font-variant-numeric: tabular-nums;
}
.vp-speed {
  border: 0;
  border-radius: 10px;
  padding: 1px 7px;
  background: rgba(127, 127, 150, 0.22);
  color: inherit;
  font-size: 0.7rem;
  font-weight: 700;
}
.msg.me .vp-speed {
  background: rgba(255, 255, 255, 0.25);
}

/* ovoz yozish paneli */
.rec-bar {
  display: none;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.input-box.recording > :not(.rec-bar) {
  display: none !important;
}
.input-box.recording > .rec-bar {
  display: flex;
}
.rec-cancel {
  color: #e54872 !important;
}
.rec-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  animation: rec-pulse 1s ease-in-out infinite;
}
.rec-time {
  flex: none;
  min-width: 44px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rec-wave {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 30px;
  min-width: 0;
  overflow: hidden;
}
.rec-wave i {
  flex: none;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleY(0.15);
  animation: rec-bar 1s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.75);
  }
}
@keyframes rec-bar {
  0%,
  100% {
    transform: scaleY(0.15);
  }
  50% {
    transform: scaleY(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rec-dot,
  .rec-wave i,
  .rx.pop,
  .msg-menu .rx-row button {
    animation: none;
  }
}

/* ===== v0.9.13: post lentasi — bir xil kenglikdagi zamonaviy kartalar, yurakcha ===== */
.feed-list {
  align-items: center;
  gap: 18px;
  padding-top: 16px;
  padding-inline: 12px;
}
.feed-list > * {
  width: 100%;
  max-width: none;
  flex: none;
}
.post {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 6px 22px rgba(30, 30, 70, 0.07);
  overflow: hidden;
}
.dark-mode .post {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}
.post-h {
  gap: 12px;
  margin: 0;
  padding: 12px 14px 10px;
}
.post-h img {
  flex: none;
  width: 42px;
  height: 42px;
  margin: 3px;
  box-shadow:
    0 0 0 2px var(--card),
    0 0 0 4px #8b7cff;
}
.post-h b {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}
.post-h b > :first-child:not(.premium-badge):not(.official-badge) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-h small {
  font-size: 0.78rem;
}

/* Full-screen feed layout with a compact, focused app header. */
.app {
  gap: 0;
  padding: 0;
}
.app > header {
  flex: none;
  z-index: 5;
}
.nav-md {
  min-height: 48px;
  padding: 2px 12px;
  border-radius: 0;
  border-width: 0 0 1px;
}
.logo-title {
  font-size: 1.15rem;
}
.navbar-btn,
.icon-btn {
  min-width: 36px;
  min-height: 36px;
}
.app-main {
  gap: 0;
}
.selected-chat {
  border: 0;
  border-radius: 0;
}
.app-main.feed-open .selected-chat {
  background: var(--page-bg);
}
.app-main.feed-open .selected {
  border-radius: 0;
}
.app-main.feed-open .chat-header {
  min-height: 48px;
  padding: 4px 12px;
}
.app-main.feed-open .feed-list {
  padding: 8px 0 96px;
  gap: 8px;
}
.app-main.feed-open .post {
  border-radius: 0;
}
@media (max-width: 767px) {
  .app {
    padding: 0;
  }
  .nav-md {
    min-height: 42px;
    padding: 0 10px;
  }
  .logo-title {
    font-size: 1.05rem;
  }
  .navbar-btn,
  .icon-btn {
    min-width: 34px;
    min-height: 34px;
    padding: 0 7px;
  }
  .app-main.feed-open .selected-chat {
    height: 100%;
  }
  .app-main.feed-open .chat-header {
    min-height: 42px;
    padding: 2px 10px;
  }
  .app-main.feed-open .chat-header .back {
    width: 34px;
    height: 34px;
  }
  .app-main.feed-open .feed-list {
    padding: 4px 0 88px;
    gap: 6px;
  }
  .nav-mobile {
    left: 16px;
    right: 16px;
    bottom: max(8px, env(safe-area-inset-bottom));
    gap: 0;
    padding: 4px;
    border-radius: 24px;
  }
  .nav-mobile button {
    padding: 5px 1px;
    gap: 1px;
    font-size: 0.62rem;
  }
  .nav-mobile button i {
    font-size: 1.2rem;
  }
  .nav-mobile-avatar {
    width: 24px;
    height: 24px;
  }
}
.chat-sidebar__title {
  min-height: 46px;
  padding: 6px 12px;
  border-radius: 0;
  background: var(--brand);
  color: #fff;
  font-size: 1.15rem;
}
.dark-mode .chat-sidebar__title {
  background: #111;
  color: #fff;
}
.nav-md {
  min-height: 50px;
}
@media (max-width: 767px) {
  .nav-md {
    min-height: 50px;
  }
  .chat-sidebar__title {
    min-height: 46px;
    font-size: 1.1rem;
  }
}
.room-readonly-banner {
  flex: none;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}
.community-comment-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: rgba(127,127,150,.12);
  color: var(--muted);
  font-size: .78rem;
}
.community-comments {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border-top: 1px solid var(--line);
}
.community-comment-row { display: flex; gap: 8px; padding: 6px 0; font-size: .82rem; }
.community-comment-row img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.community-comment-row > div { display: grid; min-width: 0; }
.community-comment-row b { font-size: .78rem; }
.community-comment-row span { overflow-wrap: anywhere; }
.community-comment-row small, .community-comment-empty, .community-comment-loading { color: var(--muted); font-size: .72rem; }
.community-comment-compose { display: flex; gap: 6px; margin-top: 8px; }
.community-comment-compose input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 18px; padding: 7px 11px; background: var(--surface); color: var(--text); outline: 0; }
.community-comment-compose button { border: 0; border-radius: 50%; width: 34px; background: var(--brand); color: #fff; }
/* Keep the app masthead and section title visually joined as one surface. */
.app > header,
.nav-md,
.chat-sidebar,
.chat-sidebar__title {
  border: 0;
  border-radius: 0;
}
.nav-md__light,
.chat-sidebar__title {
  background: var(--brand);
}
.nav-md__light {
  color: #fff;
}
.dark-mode .nav-md,
.dark-mode .nav-md__light,
.dark-mode .chat-sidebar__title {
  background: #111;
  color: #fff;
}
.chat-sidebar__title {
  min-height: 60px;
  box-sizing: border-box;
  padding: 8px 12px;
  background: #212121;
}
.dark-mode .chat-sidebar__title {
  background: #212121;
}
@media (min-width: 768px) {
  .chat-header {
    height: 60px;
    min-height: 60px;
    box-sizing: border-box;
    padding: 8px 12px;
    background: #212121;
    color: #fff;
  }
  .chat-sidebar__title {
    height: 60px;
  }
}
.search-toggle {
  border-radius: 0;
  background: transparent;
  color: inherit;
}
.search-toggle:hover,
.search-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}
.post-media {
  position: relative;
  background: #0e0e14;
  line-height: 0;
}
.app-main.feed-open .feed-list {
  align-items: center;
  padding: 16px 20px 96px;
}
.app-main.feed-open .feed-list > * {
  width: min(100%, 820px);
  max-width: 820px;
  margin-inline: auto;
}
.app-main.feed-open .post {
  border-radius: 22px;
}
.app-main.feed-open .feed-tabs {
  justify-content: center;
  gap: 8px;
  padding: 10px 16px 4px;
}
.app-main.feed-open .feed-tabs button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 13px;
  border-radius: 12px;
  font-size: 0.85rem;
}
.app-main.feed-open .feed-tabs button i {
  font-size: 0.95rem;
}
.post-media {
  position: relative;
  background: transparent;
}
.post-media-video { line-height: normal; }
.post-video { display: block; width: 100%; max-height: min(78vh, 760px); background: #000; object-fit: contain; }
.post-video[preload="none"] { pointer-events: none; }
.post-media-video.video-unloaded {
  position: relative;
  display: grid;
  min-height: 220px;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 72% 35%, rgba(48, 77, 125, .7), transparent 34%),
    radial-gradient(ellipse at 28% 62%, rgba(139, 73, 94, .62), transparent 42%),
    #171b2a;
  cursor: pointer;
}
.post-video-poster {
  position: absolute;
  inset: -18px;
  background-position: center;
  background-size: cover;
  filter: blur(18px);
  opacity: .88;
  transform: scale(1.06);
}
.post-media-video.video-unloaded::after {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 16, .22);
  content: "";
}
.post-video-load-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  background: rgba(18, 22, 34, .62);
  color: #fff;
  box-shadow: 0 5px 22px rgba(0,0,0,.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.post-video-load-icon svg { width: 32px; height: 32px; }
.post-media-video.video-unloaded > .post-video { display: none; }
.post-media-video:not(.video-unloaded) .post-video-poster,
.post-media-video:not(.video-unloaded) .post-video-load-icon { display: none; }
.post-media-video:not(.video-unloaded) > .post-video { width: 100%; }
.chat-header { background: var(--card); color: var(--text); border-bottom: 1px solid var(--line); }
.chat-header .network-status { color: #16834a; }
.chat-header .network-status.off { color: var(--muted); }
.chat-header .back { color: var(--text); }
@media (max-width: 767px) {
  .nav-mobile { border: 0 !important; }
  .chat-header .network-status { color: #16834a; }
}
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .msg-video-player .video-save-action { display: none !important; }
  .msg-video-player .video-more-mobile { display: grid; }
}
.app-main.feed-open .post-media--portrait,
.app-main.feed-open .post-media--wide {
  overflow: hidden;
}
.app-main.feed-open .post-media--portrait {
  aspect-ratio: 4 / 5;
}
.app-main.feed-open .post-media--wide {
  aspect-ratio: 1.91 / 1;
}
.app-main.feed-open .post-media--portrait > .post-img,
.app-main.feed-open .post-media--wide > .post-img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
.post-image-expand {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(20, 20, 24, 0.72);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.post-image-expand:hover,
.post-image-expand:focus-visible {
  background: rgba(20, 20, 24, 0.92);
}
.app-main.feed-open .post-img {
  height: auto;
  min-height: 0;
  max-height: none;
  object-fit: contain;
}
/* Full-width Bootstrap-style desktop feed inspired by the supplied reference. */
@media (min-width: 768px) {
  body:has(.app-main.feed-open) {
    --feed-navy: #0b1220;
    background: var(--feed-navy);
  }
  .app:has(.app-main.feed-open) {
    width: 100%;
    max-width: none;
    padding: 0;
    gap: 0;
    background: var(--feed-navy);
  }
  .app:has(.app-main.feed-open) > header { display: none; }
  .app-main.feed-open {
    grid-template-columns: minmax(220px, 26.4%) minmax(0, 1fr);
    gap: 0;
    width: 100%;
    background: var(--feed-navy);
  }
  .app-main.feed-open .desktop-feed-nav {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    color: var(--text);
  }
  .desktop-feed-nav {
    display: none;
    padding: 24px clamp(14px, 2vw, 32px) 18px;
    border-right: 1px solid var(--line);
  }
  .desktop-feed-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px 8px;
    color: var(--text);
    font-size: 1.45rem;
    font-weight: 800;
    text-decoration: none;
  }
  .desktop-feed-brand__mark {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 17px;
    background: var(--brand);
    color: #fff;
  }
  .desktop-feed-links { display: grid; gap: 6px; }
  .desktop-feed-links button {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 48px;
    padding: 8px 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    font-weight: 650;
    text-align: left;
  }
  .desktop-feed-links button i { width: 24px; font-size: 1.25rem; }
  .desktop-feed-tools { display: grid; gap: 6px; margin-top: 8px; }
  .desktop-feed-tools button {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 44px;
    padding: 8px 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    font-weight: 650;
    text-align: left;
  }
  .desktop-feed-tools button i { width: 24px; font-size: 1.2rem; }
  .desktop-feed-links button,
  .desktop-feed-compose,
  .desktop-feed-nav > .desktop-logout {
    width: 100%;
  }
  .desktop-feed-tools button:hover,
  .desktop-feed-tools button:focus-visible { background: color-mix(in srgb, var(--brand) 14%, transparent); color: #438df8; outline: none; }
.desktop-feed-nav > .desktop-logout {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  margin-top: auto;
  margin-bottom: 10px;
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, #dc3545 24%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, #dc3545 8%, transparent);
  color: #c52c3c;
  font-size: 1rem;
  font-weight: 650;
  text-align: left;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.desktop-feed-nav > .desktop-logout i { display: grid; width: 24px; place-items: center; font-size: 1.2rem; }
.desktop-feed-nav > .desktop-logout:hover,
.desktop-feed-nav > .desktop-logout:focus-visible {
  border-color: #dc3545;
  background: #dc3545;
  color: #fff;
  box-shadow: 0 7px 18px rgba(220, 53, 69, .22);
  outline: none;
  transform: translateY(-1px);
}
.desktop-feed-nav > .desktop-logout:active { transform: translateY(0) scale(.985); }
  .desktop-feed-links button:hover,
  .desktop-feed-links button.on { background: color-mix(in srgb, var(--brand) 14%, transparent); color: #438df8; }
  .desktop-feed-compose {
    min-height: 52px;
    margin: 18px 0;
    border: 0;
    border-radius: 28px;
    background: var(--brand);
    color: #fff;
    font-weight: 750;
  }
  .desktop-feed-account {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    margin-top: 0;
    padding: 10px 4px;
  }
  .desktop-feed-account img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
  .desktop-feed-account span { display: grid; min-width: 0; }
  .desktop-feed-account b,.desktop-feed-account small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .desktop-feed-account small { color: var(--muted); }
  .desktop-feed-account > i { margin-left: auto; }
  .app-main.feed-open .selected-chat { border-right: 1px solid var(--line); background: var(--page-bg); }
  .app-main.feed-open .chat-sidebar { display: none; }
  .app-main.feed-open .selected { height: 100%; }
  .app-main.feed-open .chat-header { justify-content: flex-start; min-height: 60px; padding: 8px 20px; border-bottom: 1px solid var(--line); background: var(--page-bg); }
  .app-main.feed-open .feed-title { display: block; margin-right: auto !important; font-size: 1.25rem; font-weight: 800; }
  .app-main.feed-open .feed-header-actions { display: none; }
  .app-main.feed-open .feed-tabs { align-self: center; align-items: center; gap: 0; padding: 4px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
  .app-main.feed-open .feed-tabs button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: .95rem; line-height: 1.2; white-space: nowrap; }
  .app-main.feed-open .feed-tabs button i { display: inline-flex; align-items: center; line-height: 1; }
  .app-main.feed-open .feed-tabs button.on { border-bottom-color: var(--brand); background: transparent; color: var(--text); }
  .app-main.feed-open .feed-list { align-items: stretch; padding: 16px 18px 40px; gap: 14px; }
  .app-main.feed-open .feed-list > * { width: 100%; max-width: 820px; margin: 0 auto; }
  .app-main.feed-open .post { padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 5px 18px rgba(3, 12, 28, .12); }
  .app-main.feed-open .post-h { padding: 0 0 8px; }
  .app-main.feed-open .post-text { padding-left: 56px; }
}
@media (min-width: 768px) and (max-width: 1050px) {
  .app-main.feed-open { grid-template-columns: 76px minmax(0, 1fr); }
  .app-main.feed-open .desktop-feed-nav { align-items: center; padding-inline: 8px; }
  .desktop-feed-brand { margin-inline: 0; }
  .desktop-feed-brand > span:last-child,.desktop-feed-links button > span:not(.desktop-nav-icon),.desktop-feed-compose,.desktop-feed-account span,.desktop-feed-account > i { display: none; }
  .desktop-feed-tools button span { display: none; }
  .desktop-feed-tools { width: 52px; }
  .desktop-feed-tools button { justify-content: center; width: 52px; padding: 8px; }
  .desktop-feed-links button { justify-content: center; width: 52px; padding: 8px; }
  .desktop-feed-account { margin-inline: auto; }
}
@media (max-width: 767px) {
  .desktop-feed-nav { display: none !important; }
}
.feed-create-btn {
  min-width: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}
.feed-create-btn:hover,
.feed-create-btn:focus-visible {
  background: #4338ca;
  color: #fff;
}
@media (max-width: 767px) {
  .app-main.feed-open .feed-list {
    padding: 10px 12px calc(158px + env(safe-area-inset-bottom));
  }
  .feed-create-btn {
    position: fixed;
    right: 22px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    z-index: 1200;
    display: grid;
    width: 58px;
    height: 58px;
    padding: 0;
    place-items: center;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(36, 100, 230, 0.38);
  }
  .feed-create-btn i {
    font-size: 1.3rem;
  }
  .feed-create-btn span {
    display: none;
  }
  .app-main.feed-open .post-img {
    height: auto;
    max-height: none;
    object-fit: contain;
  }
  .app-main.feed-open .feed-tabs {
    justify-content: flex-start;
    padding-inline: 12px;
    overflow-x: auto;
  }
  .app-main.feed-open .feed-tabs button {
    min-height: 34px;
    padding: 5px 10px;
    font-size: 0.78rem;
  }
}
.post-img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 200px;
  max-height: min(75vh, 620px);
  object-fit: cover;
}
.post-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 5.5rem;
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.post-burst.go {
  animation: post-burst 0.85s ease both;
}
@keyframes post-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.25);
  }
  30% {
    transform: translate(-50%, -50%) scale(0.95);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
  }
}
.post .post-actions {
  gap: 4px;
  padding: 8px 10px 0;
  border-top: 0;
}
.post .post-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1;
}
.post .post-actions button i {
  font-size: 1.55rem;
}
.post .post-actions button:hover {
  transform: none;
  background: rgba(127, 127, 150, 0.12);
}
.post .post-actions .post-stats-btn {
  margin-left: auto;
  color: var(--muted);
}
.post .post-actions .post-stats-btn i {
  font-size: 1.3rem;
}
.post .post-actions .like-btn.reacted {
  background: transparent;
  color: #ff3b5c;
  animation: none;
}
.post .post-actions .like-btn.reacted i {
  color: #ff3b5c;
}
.post .post-actions .like-count {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.post .post-actions .like-btn.pop i {
  animation: like-pop 0.45s cubic-bezier(0.2, 1.8, 0.4, 1);
}
@keyframes like-pop {
  0% {
    transform: scale(0.4);
  }
  60% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}
.post-likes {
  padding: 4px 16px 0;
  font-weight: 700;
  font-size: 0.92rem;
}
.post .post-text {
  margin: 4px 16px 12px;
  line-height: 1.45;
}
.post .post-text b {
  margin-right: 4px;
}
.post .post-text.only {
  margin: 0 16px 4px;
  font-size: 1.05rem;
}
.post .comment-area {
  margin-top: 6px;
  padding: 8px 16px 14px;
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) {
  .app-main.feed-open .feed-tabs {
    width: fit-content;
    margin-left: auto;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
  }
  .app-main.feed-open .feed-header-actions {
    margin-left: 12px;
  }
}
@media (max-width: 767px) {
  .app-main.feed-open .chat-header {
    height: 50px;
    min-height: 42px;
    flex-wrap: nowrap;
    gap: 7px;
  }
  .app-main.feed-open .feed-title {
    flex: 0 0 auto;
    min-width: 0;
    font-size: 1rem;
    white-space: nowrap;
  }
  .app-main.feed-open .feed-header-actions {
    margin-left: 0;
  }
  .app-main.feed-open .feed-tabs {
    order: 0;
    flex: 0 1 auto;
    width: auto;
    max-width: calc(100% - 100px);
    margin: 0 0 0 auto;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    gap: 3px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .app-main.feed-open .feed-tabs::-webkit-scrollbar {
    display: none;
  }
  .app-main.feed-open .feed-tabs button {
    flex: 0 0 auto;
    min-height: 29px;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 9px;
    font-size: 0.68rem;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .app-main.feed-open .feed-tabs button i {
    font-size: 0.75rem;
  }
}
/* Keep chat navigation, conversations, and the feed inside one full-window shell. */
@media (min-width: 768px) {
  .app:has(.app-main.chat-section-open) > header { display: none; }
  .app-main.chat-section-open {
    grid-template-columns: 260px minmax(0, 1fr) minmax(360px, 34%);
    gap: 0;
    width: 100%;
    background: var(--page-bg);
  }
  .app-main.chat-section-open .desktop-feed-nav {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    border-right: 1px solid var(--line);
    background: var(--page-bg);
    color: var(--text);
  }
  .app-main.chat-section-open:not(.chat-open) .selected-chat { display: none; }
  .app-main.chat-section-open:not(.chat-open) .chat-sidebar { grid-column: 2 / -1; }
  .app-main.chat-section-open .selected-chat,
  .app-main.chat-section-open .chat-sidebar {
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: var(--page-bg);
  }
  .app-main.chat-section-open .chat-header {
    background: var(--page-bg);
    color: var(--text);
  }
  .app-main.chat-section-open .tabs {
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px 12px;
    border-bottom: 1px solid var(--line);
  }
  .app-main.chat-section-open .tabs button:not(.search-toggle) {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: .84rem;
  }
  .app-main.chat-section-open .tabs button { align-items: center; justify-content: center; }
  .app-main.chat-section-open .search-box { order: 0; padding: 14px 14px 0; }
  .app-main.chat-section-open .tabs { order: 1; }
  .app-main.chat-section-open .chat-categories { padding-inline: 14px; }
  .app-main.chat-section-open .notes { padding: 18px 14px 4px; }
  .app-main.chat-section-open .chat-list { padding: 8px 12px; }
}
@media (min-width: 768px) and (max-width: 900px) {
  .app-main.chat-section-open { grid-template-columns: 76px minmax(0, 1fr) minmax(320px, 42%); }
  .app-main.chat-section-open .desktop-feed-nav { align-items: center; padding-inline: 8px; }
  .app-main.chat-section-open .desktop-feed-brand { margin-inline: 0; }
  .app-main.chat-section-open .desktop-feed-brand > span:last-child,
  .app-main.chat-section-open .desktop-feed-links button span,
  .app-main.chat-section-open .desktop-feed-compose,
  .app-main.chat-section-open .desktop-feed-account span,
  .app-main.chat-section-open .desktop-feed-account > i { display: none; }
  .app-main.chat-section-open .desktop-feed-links button { justify-content: center; width: 52px; padding: 8px; }
  .app-main.chat-section-open .desktop-feed-account { margin-inline: auto; }
}
@media (max-width: 767px) {
  .app-main.chat-section-open .desktop-feed-nav { display: none !important; }
  .app-main.chat-section-open .tabs { display: flex; order: 1; }
  .app-main.chat-section-open .tabs [data-tab] { display: none; }
  .app-main.chat-section-open .search-toggle { display: inline-flex; }
}
.chat-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  color: var(--muted);
  text-align: center;
}
.chat-loading strong { color: var(--text); font-size: .98rem; font-weight: 650; }
.chat-loading__spinner {
  position: relative;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 4px solid color-mix(in srgb, var(--brand) 16%, transparent);
  border-top-color: var(--brand);
  border-right-color: color-mix(in srgb, var(--brand) 55%, transparent);
  border-radius: 50%;
  animation: chat-loading-spin .85s cubic-bezier(.55,.15,.45,.85) infinite;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--brand) 30%, transparent));
}
.chat-loading__spinner::after {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  content: "";
}
@keyframes chat-loading-spin { to { transform: rotate(360deg); } }

/* Brand splash shown until the first feed and conversation list are ready. */
.app-splash {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  background: var(--page-bg, #0b1220);
  color: var(--text, #f4f7ff);
  opacity: 1;
  transition: opacity .24s ease, visibility .24s ease;
}
.app-splash img { width: 76px; height: 76px; object-fit: contain; }
.app-splash strong { font-size: 1.35rem; font-weight: 750; }
.app-splash__spinner {
  width: 24px;
  height: 24px;
  margin-top: 4px;
  border: 3px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: chat-loading-spin .75s linear infinite;
}
.app-splash.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.logo-title-img { display: block; width: 34px; height: 34px; object-fit: contain; }

@media (min-width: 768px) {
  .desktop-feed-logo { width: 48px; height: 48px; flex: none; object-fit: contain; }
  .desktop-feed-account {
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
  }
  .desktop-feed-account:hover,
  .desktop-feed-account:focus-visible { background: color-mix(in srgb, var(--brand) 14%, transparent); outline: none; }
  .app-main.chat-section-open { grid-template-columns: 260px minmax(290px, 34%) minmax(0, 1fr); }
  .app-main.chat-section-open .desktop-feed-nav { position: relative; z-index: 1301; grid-column: 1; grid-row: 1; }
  .app-main.chat-section-open .chat-sidebar { grid-column: 2; grid-row: 1; min-width: 0; }
  .app-main.chat-section-open .selected-chat { display: block !important; grid-column: 3; grid-row: 1; min-width: 0; }
  .app-main.chat-section-open .selected { width: 100%; min-width: 0; height: 100%; }
  /* During loading, anchor the indicator to the entire selected conversation panel,
     bypassing the scroll body's intrinsic sizing. */
  #room { position: relative; width: 100%; }
  #chat-body:has(> .chat-loading) { display: contents; }
  #room > #chat-body > .chat-loading { inset: 60px 0 0; width: auto; height: auto; }
  .app-main.chat-section-open::before { content: none; }
  .app-main.notifications-open::before {
    position: fixed;
    inset: 0;
    z-index: 1290;
    display: block;
    background: rgba(2, 8, 20, .58);
    content: "";
    cursor: pointer;
  }
  .app-main.notifications-open .notification-list:not(.hide) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1310;
    width: min(410px, calc(100vw - 90px));
    height: auto;
    padding: 18px 16px;
    border-left: 1px solid var(--line);
    background: var(--page-bg);
    box-shadow: -18px 0 48px rgba(0, 0, 0, .28);
    animation: notification-drawer-in .22s ease-out both;
  }
  @keyframes notification-drawer-in { from { opacity: .6; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
}
@media (min-width: 768px) and (max-width: 900px) {
  .app-main.chat-section-open { grid-template-columns: 76px minmax(250px, 33%) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .desktop-feed-account { display: none !important; }
  .logo-title-img { width: 30px; height: 30px; }
}
.notification-empty {
  display: flex;
  width: min(100%, 520px);
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px;
  text-align: center;
}
.notification-empty__icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 20px;
  background: color-mix(in srgb, var(--brand) 12%, var(--card));
  color: var(--brand);
  font-size: 1.7rem;
}
.notification-empty h2 { margin: 4px 0 0; color: var(--text); font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 750; }
.notification-empty p { max-width: 440px; margin: 0; color: var(--muted); line-height: 1.65; }
.notification-empty__tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
  text-align: left;
}
.notification-empty__tip i { flex: none; margin-top: 2px; color: var(--brand); }
.notification-empty__action {
  min-height: 42px;
  margin-top: 2px;
  padding: 8px 16px;
  border: 0;
  border-radius: 11px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}
.notification-empty__action:hover, .notification-empty__action:focus-visible { background: #0d66d0; outline: 3px solid color-mix(in srgb, var(--brand) 25%, transparent); }
@media (max-width: 767px) {
  .notification-empty { gap: 11px; padding: 20px 16px; }
  .notification-empty__icon { width: 54px; height: 54px; border-radius: 17px; font-size: 1.45rem; }
}

/* Keep the desktop feed filters centered in the header, independent of the title. */
@media (min-width: 768px) {
  .app-main.feed-open .chat-header { position: relative; }
  .app-main.feed-open .feed-tabs {
    position: absolute;
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
    z-index: 1;
  }
}

/* Desktop feed: keep the theme control at the former top-right header position. */
@media (min-width: 768px) {
  .app-main.feed-open #desktop-theme-toggle {
    position: fixed;
    top: 12px;
    right: 20px;
    z-index: 1400;
    display: inline-flex;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    color: var(--brand);
    box-shadow: 0 4px 14px rgba(3, 12, 28, .14);
  }
  .app-main.feed-open #desktop-theme-toggle span { display: none; }
  .app-main.feed-open #desktop-theme-toggle:hover,
  .app-main.feed-open #desktop-theme-toggle:focus-visible { background: color-mix(in srgb, var(--brand) 12%, var(--card)); outline: 2px solid color-mix(in srgb, var(--brand) 28%, transparent); }

  body:not(.dark-mode) .app-main.feed-open .desktop-feed-nav {
    background: #1877f2;
    color: #fff;
  }
  body:not(.dark-mode) .app-main.feed-open .desktop-feed-brand,
  body:not(.dark-mode) .app-main.feed-open .desktop-feed-account,
  body:not(.dark-mode) .app-main.feed-open .desktop-feed-account small { color: #fff; }
  body:not(.dark-mode) .app-main.feed-open .desktop-feed-account small { opacity: .82; }
  body:not(.dark-mode) .app-main.feed-open .desktop-feed-links button,
  body:not(.dark-mode) .app-main.feed-open .desktop-feed-tools button { color: #fff; }
  body:not(.dark-mode) .app-main.feed-open .desktop-feed-links button:hover,
  body:not(.dark-mode) .app-main.feed-open .desktop-feed-tools button:hover,
  body:not(.dark-mode) .app-main.feed-open .desktop-feed-links button:focus-visible,
  body:not(.dark-mode) .app-main.feed-open .desktop-feed-tools button:focus-visible { background: rgba(255, 255, 255, .16); color: #fff; }
  body:not(.dark-mode) .app-main.feed-open .desktop-feed-links button.on {
    background: #fff;
    color: #1877f2;
  }
  body:not(.dark-mode) .app-main.feed-open .desktop-feed-compose {
    background: #fff;
    color: #1877f2;
  }
  body:not(.dark-mode) .app-main.feed-open .desktop-feed-nav { border-right-color: rgba(255, 255, 255, .24); }

  body:not(.dark-mode) .app-main.chat-section-open .search-box input {
    border-color: #25334a;
    color: #111827;
  }
  body:not(.dark-mode) .app-main.chat-section-open .search-box input::placeholder {
    color: #111827;
    opacity: .82;
  }
  body:not(.dark-mode) .app-main.chat-section-open .search-box .search-field__ic { color: #25334a; }

  .app-main.feed-open .chat-header { color: var(--text); }
  .app-main.feed-open .feed-title { color: var(--text); }
  .app-main.feed-open .feed-tabs {
    width: min(calc(100% - 40px), 820px);
    justify-content: center;
    gap: 8px;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--card) 68%, transparent);
    box-shadow: 0 8px 30px rgba(12, 24, 48, .12), inset 0 1px rgba(255, 255, 255, .34);
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
  }
  .app-main.feed-open .feed-tabs button { flex: 1 1 0; min-width: 0; }
  .app-main.feed-open .feed-tabs button.on {
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    color: var(--brand);
  }

  .app-main.feed-open .desktop-feed-links button { position: relative; }
  .app-main.feed-open .desktop-nav-icon { position: relative; display: inline-flex; width: 24px; height: 24px; flex: 0 0 24px; align-items: center; justify-content: center; }
  .app-main.feed-open .desktop-nav-icon > i { width: auto; }
  .desktop-nav-badge {
    position: absolute;
    top: -8px;
    right: -9px;
    z-index: 2;
    display: inline-flex;
    min-width: 21px;
    height: 21px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 6px;
    border: 2px solid var(--page-bg);
    border-radius: 999px;
    background: #f02d55;
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(10, 14, 24, .24);
  }
  .app-main.feed-open .desktop-feed-links button.ringing .desktop-nav-icon > i {
    transform-origin: 50% 12%;
    animation: bell-ring .95s ease-in-out 2;
  }
  .app-main.feed-open .feed-tabs {
    border-radius: 0;
    border: 0;
    background: var(--page-bg);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .app-main.feed-open .post { overflow: hidden; }
  .app-main.feed-open .post > .post-media {
    width: calc(100% + 28px);
    margin-inline: -14px;
  }
  .app-main.feed-open #desktop-theme-toggle { align-items: center; top: 9px; line-height: 1; }
}
@media (min-width: 768px) and (max-width: 1050px) {
  .app-main.feed-open .chat-header { min-height: 104px; align-items: flex-start; }
  .app-main.feed-open .feed-title { margin-top: 3px; }
  .app-main.feed-open .feed-tabs {
    top: 54px;
    width: min(calc(100% - 36px), 820px);
  }
  .app-main.feed-open .desktop-feed-links button { overflow: visible; }
  .app-main.feed-open .desktop-nav-badge {
    top: -8px;
    right: -9px;
    min-width: 19px;
    height: 19px;
    margin: 0;
    padding: 0 4px;
    border-width: 2px;
    font-size: .64rem;
  }
  .app-main.feed-open .desktop-feed-links .desktop-nav-icon { display: inline-flex; }
  .app-main.feed-open .desktop-feed-links .desktop-nav-badge { display: inline-flex; }
}

/* Desktop chats: keep the list compact when no conversation is selected. */
@media (min-width: 768px) {
  .app-main.chat-section-open:not(.chat-open) {
    grid-template-columns: 260px minmax(340px, 34%) minmax(0, 1fr);
  }
  .app-main.chat-section-open:not(.chat-open) .chat-sidebar {
    grid-column: 2;
    min-width: 0;
  }
  .app-main.chat-section-open:not(.chat-open) .selected-chat {
    display: block;
    grid-column: 3;
    min-width: 0;
  }
  .app-main.chat-section-open .tabs {
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 100%;
  }
  .app-main.chat-section-open .tabs .search-toggle { display: none; }
}
@media (min-width: 768px) and (max-width: 900px) {
  .app-main.chat-section-open:not(.chat-open) {
    grid-template-columns: 76px minmax(290px, 42%) minmax(0, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  .app-main.chat-section-open .desktop-feed-tools { width: 52px; }
  .app-main.chat-section-open .desktop-feed-tools button { width: 52px; justify-content: center; padding-inline: 8px; }
  .app-main.chat-section-open .desktop-feed-tools button span { display: none; }
}
@media (min-width: 768px) {
  .app-main.chat-section-open .chat-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    min-width: 0;
  }
  .app-main.chat-section-open .chat-sidebar > .search-box {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 8px 14px;
  }
  .app-main.chat-section-open .chat-sidebar > .search-box input {
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 0 38px 0 36px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
  }
  .app-main.chat-section-open .chat-sidebar > .search-box .search-field {
    min-width: 0;
  }
  .app-main.chat-section-open .chat-sidebar > .tabs {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: auto;
    align-items: center;
    padding: 0 12px 0 4px;
    border: 0;
  }
  .app-main.chat-section-open .chat-sidebar > .tabs button:not(.search-toggle) {
    flex: 0 0 auto;
    height: 42px;
    min-height: 42px;
    padding: 0 10px;
    font-size: .8rem;
  }
  .app-main.chat-section-open .chat-sidebar > .chat-categories { grid-column: 1 / -1; grid-row: 2; }
  .app-main.chat-section-open .chat-sidebar > .notes { grid-column: 1 / -1; grid-row: 3; }
  .app-main.chat-section-open .chat-sidebar > .notification-list,
  .app-main.chat-section-open .chat-sidebar > .chat-list { grid-column: 1 / -1; grid-row: 4; min-height: 0; }
  .app-main.chat-section-open .chat-sidebar > .tabs .search-toggle { display: none; }
}

/* Keep the notification empty state centered in the visible area beside its drawer. */
@media (min-width: 768px) {
  .app-main.notifications-open {
    --notification-nav-width: 236px;
    --notification-drawer-width: min(410px, calc(100vw - 90px));
  }
  .app-main.notifications-open #notification-empty {
    position: fixed;
    z-index: 1295;
    top: 50vh;
    left: calc(
      var(--notification-nav-width) +
      (100vw - var(--notification-nav-width) - var(--notification-drawer-width)) / 2
    );
    width: min(
      520px,
      calc(100vw - var(--notification-nav-width) - var(--notification-drawer-width) - 32px)
    );
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    transform: translate(-50%, -50%);
  }
}
@media (min-width: 768px) and (max-width: 1050px) {
  .app-main.notifications-open { --notification-nav-width: 76px; }
}

/* Notifications use their own drawer and empty state, without chat navigation chrome. */
.app-main.notifications-open .chat-sidebar > .search-box,
.app-main.notifications-open .chat-sidebar > .tabs,
.app-main.notifications-open .chat-sidebar > .chat-categories,
.app-main.notifications-open .chat-sidebar > .notes,
.app-main.notifications-open .chat-sidebar > .chat-list,
.app-main.notifications-open #notification-feed-cta {
  display: none !important;
}
.app-main.notifications-open .chat-sidebar,
.app-main.notifications-open .selected-chat {
  border: 0 !important;
}

.nav-brand-title {
  color: #111827;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.dark-mode .nav-brand-title {
  color: #fff;
}

/* Keep chat controls comfortable and the viewport predictable in mobile Firefox. */
@media (max-width: 767px) {
  /* Android WebView may overlay the status bar without exposing its safe-area inset. */
  .app { padding-top: env(safe-area-inset-top, 0px); }
  .app > header { padding-top: 0; }
  .nav-md {
    height: 50px;
    min-height: 50px;
    box-sizing: border-box;
    padding-block: 0;
  }
  .dark-mode .nav-md__light { background: var(--brand); }
  .nav-md .navbar-btns { min-height: 50px; gap: 4px; }
  .nav-md .navbar-btn { width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; }
  .app,
  .app-main,
  .app-main.chat-section-open,
  .app-main.chat-section-open .chat-sidebar,
  .app-main.chat-section-open .selected-chat {
    min-width: 0;
    min-height: 0;
  }
  .app-main.chat-section-open .chat-categories button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    touch-action: manipulation;
  }
  .app-main.chat-section-open .chat-sidebar.search-open {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
  }
  .app-main.chat-section-open .chat-sidebar.search-open .search-field input {
    min-width: 0;
    min-height: 42px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
  }
  .app-main.chat-section-open .chat-list,
  .app-main.chat-section-open .notification-list {
    min-width: 0;
    overscroll-behavior-y: contain;
  }
}

@media (max-width: 767px) {
  body.mobile-keyboard-open .app {
    height: var(--xabarim-visual-height);
    min-height: 0;
    max-height: var(--xabarim-visual-height);
  }
  body.mobile-keyboard-open .app-main,
  body.mobile-keyboard-open .app-main.chat-open,
  body.mobile-keyboard-open .app-main.chat-open .selected-chat,
  body.mobile-keyboard-open .app-main.chat-open .selected {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  body.mobile-keyboard-open .app-main.chat-open .chat-body {
    min-height: 0;
    overscroll-behavior: contain;
  }
}

/* Friend discovery uses compact profile tiles rather than long horizontal rows. */
.explore-shelf { grid-column: 1 / -1; min-width: 0; list-style: none; }
.explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.explore-card {
  width: 100%;
  min-width: 0;
  margin: 0;
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: start;
  padding: 12px;
  border-radius: 16px;
  background: var(--card);
}
.explore-card .chat-avatar,
.explore-card .username-img { width: 46px; height: 46px; }
.explore-card .username { min-width: 0; }
.explore-card .username-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explore-card .message-text { margin: 3px 0 0; }
.explore-card .explore-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.explore-card .xbtn { min-width: 0; min-height: 36px; padding: 7px 6px; font-size: .76rem; }
.explore-shelf .explore-more { padding: 12px 4px 16px; }
.app-main.chat-section-open .desktop-feed-tools { margin-top: 0; margin-bottom: 8px; }
.app-main.chat-section-open #desktop-feed-saved { white-space: nowrap; }
.delete-account-dialog { overflow: hidden; padding: 4px 8px 8px; border: 1px solid color-mix(in srgb, #dc3545 18%, var(--line)); box-shadow: 0 20px 60px rgba(18, 22, 35, .22); }
.delete-account-dialog .modal-header { align-items: center; padding: 20px 20px 12px; }
.delete-account-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: color-mix(in srgb, #dc3545 12%, var(--card)); color: #dc3545; font-size: 1.25rem; }
.delete-account-dialog .modal-body { padding: 0 20px 20px; }
.delete-account-dialog .modal-title { margin: 0 0 10px; font-size: 1.2rem; font-weight: 750; }
.delete-account-warning { margin: 0; color: var(--muted); line-height: 1.55; }
.delete-account-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.delete-account-actions .btn { min-height: 42px; border-radius: 11px; font-weight: 650; }
@media (max-width: 480px) { .delete-account-actions { flex-direction: column-reverse; } }

/* Search history floats over the list so the chat tabs never move. */
@media (min-width: 768px) {
  .app-main.chat-section-open .chat-sidebar > .search-box {
    position: relative;
  }
  .app-main.chat-section-open .chat-sidebar > .search-box > .search-history {
    position: absolute;
    z-index: 1500;
    top: 100%;
    right: 14px;
    left: 14px;
    width: auto;
    max-height: min(50vh, 360px);
    margin-top: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .app-main.chat-section-open #desktop-theme-toggle {
    display: inline-flex !important;
  }
  #logout-mobile { display: none !important; }
}