:root {
  --chat-split-width: 360px;
  --tg-primary: #2aabee;
  --tg-primary-strong: #1f96d6;
  --tg-secondary: #58b9f1;
  --tg-accent: #6fc4f4;
  --tg-bg: #e9edf3;
  --tg-surface: #ffffff;
  --tg-surface-soft: #f6f9fc;
  --tg-line: #dde5ef;
  --tg-text: #12253a;
  --tg-text-soft: #6f7f92;
  --tg-bubble-in: #ffffff;
  --tg-bubble-out: #d9f2ff;
  --app-dvh: 100dvh;
}

[data-bs-theme="dark"] {
  --tg-bg: #0c131d;
  --tg-surface: #111a24;
  --tg-surface-soft: #152130;
  --tg-line: #253241;
  --tg-text: #e4edf7;
  --tg-text-soft: #95a4b7;
  --tg-bubble-in: #1b2a3a;
  --tg-bubble-out: #285875;
}

body {
  background: var(--tg-bg);
  min-height: var(--app-dvh);
  color: var(--tg-text);
}

.app-gradient {
  background: radial-gradient(circle at top right, rgba(34, 158, 217, 0.12), transparent 35%),
              radial-gradient(circle at bottom left, rgba(62, 207, 142, 0.1), transparent 35%),
              var(--tg-bg);
}

.auth-card,
.sidebar-card,
.main-card {
  background: var(--tg-surface);
}

.auth-card {
  border: 1px solid rgba(34, 158, 217, 0.12);
  backdrop-filter: blur(6px);
}

#authContainer {
  min-height: var(--app-dvh);
}

#authContainer .card-body h2 {
  letter-spacing: 0.5px;
}

#authContainer .form-control {
  border-radius: 12px;
  border: 1px solid rgba(34, 158, 217, 0.24);
  min-height: 44px;
}

#authContainer .form-control:focus {
  border-color: rgba(34, 158, 217, 0.6);
  box-shadow: 0 0 0 0.2rem rgba(34, 158, 217, 0.14);
}

#authContainer .btn-primary,
#authContainer .btn-success {
  min-height: 44px;
  font-weight: 600;
}

@media (max-width: 767.98px) {
  #authContainer .row {
    min-height: var(--app-dvh) !important;
    align-items: flex-start !important;
    padding-top: 16px;
    padding-bottom: 24px;
  }

  #authContainer .card {
    max-height: calc(var(--app-dvh) - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.app-shell {
  min-height: calc(100vh - 2rem);
  height: 100%;
}

/* 聊天页滚动架构兜底：确保只有消息区滚动，避免整页被消息撑爆 */
#mainContainer,
#mainContainer > .row,
.app-shell,
.main-card,
.main-card > .card-body,
#messagesView,
#messagesView > .row {
  min-height: 0;
}

#messagesView .chat-pane {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#messagesView #chatHeader,
#messagesView #chatComposer {
  flex: 0 0 auto;
}

#messagesView #messageList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.main-open {
  overflow: hidden;
}

body.main-open #appRoot {
  height: var(--app-dvh);
  min-height: var(--app-dvh);
  overflow: hidden;
}

body.main-open #mainContainer {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.main-open .app-shell {
  height: 100%;
  min-height: 0;
  margin: 0;
  --bs-gutter-x: 0.5rem;
}

body.main-open .main-card {
  height: 100%;
  min-height: 0;
}

body.main-open .main-card > .card-body {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.main-open #messagesView,
body.main-open #messagesView > .row {
  height: 100%;
  min-height: 0;
}

body.main-open #messagesView .conversation-pane,
body.main-open #messagesView .chat-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.main-open .conversation-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

body.main-open .sidebar-card.tg-rail-shell {
  margin-right: 2px;
}

body.main-open .main-card {
  margin-left: 0;
}

body.main-open #chatHeader,
body.main-open #chatComposer {
  flex: 0 0 auto;
}

body.main-open #messageList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.tg-shell {
  border: 1px solid var(--tg-line);
  overflow: hidden;
  background: var(--bg-primary);
}

.nav-btn {
  border-radius: 12px;
  border: 1px solid transparent;
}

.sidebar-card.tg-rail-shell {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-color) 82%, #0f172a), color-mix(in srgb, var(--accent-strong) 88%, #0f172a));
  border: 1px solid rgba(var(--bs-primary-rgb), 0.22);
}

.tg-rail-avatar-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tg-rail-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tg-rail-icons {
  justify-items: center;
}

.tg-rail-btn {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.tg-rail-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
}

.tg-rail-btn.active {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.2);
}

.tg-rail-btn-logout {
  color: rgba(255, 255, 255, 0.86);
}

.tg-rail-icon {
  font-size: 20px;
  line-height: 1;
}

.tg-rail-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ff4b5f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 8px rgba(255, 75, 95, 0.4);
}

.tg-rail-badge-warn {
  background: #ff8b3d;
}

.conversation-pane {
  min-height: 0;
  height: 100%;
  background: var(--panel-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.conversation-list {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px;
}

.conversation-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.conversation-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 42px;
}

.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.online-dot.on {
  background: #24c16c;
}

.online-dot.off {
  background: #adb5bd;
}

.conversation-main {
  min-width: 0;
  flex: 1;
}

.conversation-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.conversation-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.conversation-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.conversation-preview {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-item-btn {
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  background: var(--card-bg) !important;
  margin-bottom: 8px;
  padding: 10px !important;
  transition: all 0.18s ease;
}

.conversation-item-btn:hover {
  background: var(--bg-secondary) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.16) !important;
}

.conversation-item-btn.active {
  background: color-mix(in srgb, var(--card-bg) 68%, var(--accent-soft)) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.28) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.1);
}

.conversation-item-btn.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 99px;
  background: var(--accent-color);
}

.conversation-item-btn.active .conversation-name,
.conversation-item-btn.active .conversation-preview,
.conversation-item-btn.active .conversation-time {
  color: var(--text-primary) !important;
}

.conversation-item-btn.tg-pinned {
  background: color-mix(in srgb, var(--card-bg) 74%, var(--accent-soft)) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.18) !important;
}

[data-bs-theme="dark"] .conversation-item-btn:hover {
  background: #182537 !important;
}

[data-bs-theme="dark"] .conversation-item-btn.tg-pinned {
  background: #40361e !important;
  border-color: #69542a !important;
}

.conversation-item-btn.active.tg-pinned {
  background: color-mix(in srgb, var(--card-bg) 64%, var(--accent-soft)) !important;
}

.tg-conversation-header {
  background: var(--panel-bg);
  border-bottom-color: var(--border-color) !important;
}

.tg-search-wrap {
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-secondary);
}

.tg-search-wrap .input-group-text {
  color: var(--text-muted);
}

.tg-search-wrap .form-control {
  background: transparent;
  font-size: 13px;
  color: var(--text-primary);
}

.tg-search-wrap .form-control::placeholder {
  color: var(--text-secondary);
}

.tg-filter-tabs {
  background: var(--bg-secondary);
  border-radius: 999px;
  padding: 3px;
  display: inline-flex;
  gap: 2px;
}

.tg-filter-tab {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}

.tg-filter-tab.active {
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
}

.tg-create-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  padding: 0;
  border-color: var(--border-color);
  color: var(--text-secondary);
  background: var(--card-bg);
}

.unread-dot {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  font-weight: 700;
  background: #f4476b;
  box-shadow: 0 3px 8px rgba(244, 71, 107, 0.35);
}

.pin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #8a5a00;
  background: rgba(255, 192, 72, 0.26);
}

[data-bs-theme="dark"] .pin-badge {
  color: #ffd27a;
  background: rgba(255, 177, 61, 0.24);
}

.chat-pane {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: pan-y;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
}

.chat-empty-state {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--text-secondary);
  gap: 14px;
  text-align: center;
  background: var(--bg-secondary);
}

.chat-empty-icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-secondary) 72%, var(--panel-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--text-muted);
}

.chat-empty-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-primary);
}

.chat-empty-sub {
  font-size: 14px;
  color: var(--text-secondary);
}

.chat-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-header-main {
  min-width: 0;
  cursor: pointer;
}

.chat-header-main:hover {
  opacity: 0.9;
}

.chat-tools-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chat-tools-row .btn {
  border-radius: 999px;
  min-width: 58px;
  border-color: var(--tg-line);
  background: var(--tg-surface-soft);
  color: var(--tg-text);
}

.chat-tools-row .btn:hover {
  border-color: var(--tg-primary);
  color: var(--tg-primary-strong);
}

#emojiBar {
  background: var(--tg-surface-soft);
  border: 1px solid var(--tg-line);
  border-radius: 14px;
  padding: 8px;
}

#emojiBar .btn {
  border-radius: 10px;
  min-width: 38px;
  border-color: transparent;
  background: transparent;
}

#emojiBar .btn:hover {
  background: rgba(42, 171, 238, 0.12);
}

#emojiToggleBtn.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--tg-primary), var(--tg-accent));
}

.mention-suggest-box {
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}

.message-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--bs-primary-rgb), 0.05), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(var(--bs-primary-rgb), 0.03), transparent 35%),
    var(--bg-secondary);
  min-height: 0;
}

.main-card > .card-body,
#messagesView,
#messagesView > .row,
#messagesView .chat-pane,
#messagesView .conversation-pane {
  min-height: 0;
}

#chatHeader {
  background: var(--panel-bg);
  border-bottom: 1px solid var(--tg-line);
}

#chatComposer {
  background: var(--panel-bg);
  border-top: 1px solid var(--tg-line) !important;
}

#chatHeader .btn,
#chatComposer .input-group .btn {
  border-radius: 12px;
}

.chat-more-btn {
  min-width: 72px;
  font-weight: 600;
}

.chat-more-menu {
  min-width: 160px;
  border-radius: 12px;
  padding: 6px;
}

.chat-more-menu .dropdown-item {
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
}

#messageInput {
  border-radius: 14px;
  border: 1px solid var(--tg-line);
  background: #fff;
}

[data-bs-theme="dark"] #messageInput {
  background: #0e1722;
  color: var(--tg-text);
  border-color: #324155;
}

#messageInput:focus {
  border-color: var(--tg-primary);
  box-shadow: 0 0 0 0.18rem rgba(42, 171, 238, 0.18);
}

.msg-row {
  display: flex;
  margin-bottom: 10px;
}

.msg-row.selected .msg-bubble {
  outline: 2px solid rgba(34, 158, 217, 0.45);
}

.msg-row.system {
  justify-content: center;
}

.msg-row.me {
  justify-content: flex-end;
}

.msg-row.other {
  justify-content: flex-start;
}

.msg-bubble {
  max-width: min(78%, 620px);
  border-radius: 16px;
  padding: 10px 12px;
  font-size: 14px;
  word-break: break-word;
  cursor: default;
  position: relative;
  margin-bottom: 2px;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

.msg-select-check {
  position: absolute;
  left: 8px;
  top: 8px;
}

.msg-bubble.selecting {
  padding-left: 34px;
}

.msg-row.system .msg-bubble {
  background: color-mix(in srgb, var(--panel-bg) 58%, var(--border-color));
  color: var(--text-secondary);
  max-width: 88%;
  border-radius: 999px;
  font-size: 12px;
  padding: 6px 10px;
}

[data-bs-theme="dark"] .msg-row.system .msg-bubble {
  background: rgba(255, 255, 255, 0.12);
  color: #d1d5db;
}

.msg-bubble.pending {
  opacity: 0.82;
}

.msg-bubble.failed {
  border: 1px solid rgba(220, 53, 69, 0.6);
}

.msg-row.me .msg-bubble {
  background: var(--tg-bubble-out);
  color: #0d3a52;
  border-bottom-right-radius: 6px;
  border: 1px solid #bde8ff;
}

.msg-row.other .msg-bubble {
  background: var(--tg-bubble-in);
  color: var(--tg-text);
  border-bottom-left-radius: 6px;
  border: 1px solid #e2eaf3;
}

[data-bs-theme="dark"] .msg-row.other .msg-bubble {
  color: #f0f0f0;
  border-color: #2b3a4d;
}

[data-bs-theme="dark"] .msg-row.me .msg-bubble {
  color: #d8f0ff;
  border-color: #347ba0;
}

.msg-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
}

.msg-reply-preview {
  border-left: 3px solid rgba(255, 255, 255, 0.75);
  padding-left: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.msg-reply-preview:hover {
  background: rgba(255, 255, 255, 0.16);
}

.msg-row.other .msg-reply-preview {
  border-left-color: rgba(0, 0, 0, 0.25);
}

.msg-action-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: transparent;
  font-size: 14px;
  opacity: 0.6;
  cursor: pointer;
}

.msg-action-btn:hover {
  opacity: 1;
}

.msg-image {
  display: block;
  max-width: 260px;
  max-height: 300px;
  border-radius: 10px;
  cursor: zoom-in;
}

.msg-image-wrap {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
}

.msg-image-caption {
  font-size: 13px;
  line-height: 1.5;
  color: inherit;
  white-space: pre-wrap;
}

.image-compose-card {
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.image-compose-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.image-compose-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.image-compose-close-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.image-compose-close-btn:hover {
  background: color-mix(in srgb, var(--bg-secondary) 76%, var(--panel-bg));
  color: var(--text-secondary);
}

.image-compose-card-body {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.image-compose-card-media {
  min-width: 0;
}

.image-compose-preview-box {
  position: relative;
  width: 168px;
  height: 168px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--bg-secondary);
}

.image-compose-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.image-compose-overlay-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
  pointer-events: none;
}

.image-compose-card-main {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.image-compose-textbar {
  display: flex;
  gap: 8px;
  align-items: center;
}

.image-compose-textbar .form-control,
.image-compose-caption-input {
  border-color: var(--border-color);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--input-text);
  box-shadow: none;
}

.image-compose-textbar .form-control {
  min-height: 38px;
}

.image-compose-textbar .btn,
.image-compose-actions .btn {
  border-radius: 11px;
}

.image-compose-caption-input {
  min-height: 76px;
  resize: none;
}

.image-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.image-compose-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.image-compose-text-item {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  cursor: grab;
  user-select: none;
  white-space: nowrap;
}

.image-compose-text-item.dragging {
  cursor: grabbing;
}

.chat-image-drop-hint {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(17, 24, 39, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.chat-image-drop-card {
  min-width: 220px;
  padding: 20px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.18);
  text-align: center;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.chat-image-drop-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

.chat-image-drop-sub {
  margin-top: 4px;
  font-size: 13px;
  color: #7b8794;
}

@media (max-width: 767.98px) {
  .image-compose-card {
    padding: 9px;
  }

  .image-compose-card-body {
    grid-template-columns: 1fr;
  }

  .image-compose-preview-box {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .image-compose-text-item {
    font-size: 20px;
  }
}

#chatSubTitle.typing-active {
  color: #2aabee !important;
  font-weight: 600;
}

[data-bs-theme="dark"] .chat-empty-state {
  background: #111925;
  color: #3d4f64;
}

[data-bs-theme="dark"] .chat-empty-icon {
  background: #1c2938;
  color: #3a4b60;
}

[data-bs-theme="dark"] .chat-empty-title {
  color: #354557;
}

[data-bs-theme="dark"] .chat-empty-sub {
  color: #3b4f63;
}

.tg-conversation-header h6 {
  font-weight: 700;
}

.tg-chat-header #chatTitle {
  font-weight: 700;
}

.tg-chat-header #chatSubTitle {
  color: var(--tg-text-soft) !important;
}

.call-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.call-panel-card {
  width: min(420px, 94vw);
  background: var(--tg-surface);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26);
}

.call-active-card {
  width: min(620px, 96vw);
}

.call-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.call-video-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0c111a;
  min-height: 220px;
}

.call-remote-video {
  width: 100%;
  max-height: 54vh;
  background: #0c111a;
}

.call-local-video {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 120px;
  height: 90px;
  border-radius: 8px;
  object-fit: cover;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.profile-avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--tg-primary);
}

.avatar-picker-btn {
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 999px;
  position: relative;
  transition: transform 0.15s ease;
}

.avatar-picker-btn:hover {
  transform: scale(1.03);
}

.avatar-edit-hint {
  font-size: 12px;
  color: #6c757d;
  margin-top: 8px;
}

.group-member-options {
  max-height: 220px;
  overflow-y: auto;
}

:root {
  --group-drawer-width: 380px;
}

.group-info-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--group-drawer-width);
  max-width: calc(100vw - 16px);
  height: 100dvh;
  z-index: 1200;
  transform: translateX(100%);
  transition: transform 0.24s ease;
}

.group-info-drawer.open {
  transform: translateX(0);
}

.group-info-drawer-panel {
  height: 100%;
  background: var(--tg-surface);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
}

.group-info-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.group-info-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.chat-pane.group-drawer-open {
  padding-right: calc(var(--group-drawer-width) + 8px);
}

.group-member-preview-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 12px;
}

@media (max-width: 991.98px) {
  .group-info-drawer {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    z-index: 1300;
  }
  .group-info-drawer-panel {
    border-left: 0;
    box-shadow: none;
  }
  .chat-pane.group-drawer-open {
    padding-right: 0;
  }
}

#groupMuteListBox .list-group-item {
  border-radius: 10px;
  margin-bottom: 8px;
}

.history-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
}

.history-photo-item {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: var(--tg-surface);
  padding: 6px;
  text-align: left;
}

.history-photo-item img {
  width: 100%;
  height: 88px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.history-photo-meta {
  margin-top: 4px;
  font-size: 11px;
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-photo-locate {
  margin-top: 4px;
  font-size: 11px;
  color: var(--tg-primary);
}

.history-hit .msg-bubble {
  outline: 2px solid rgba(34, 158, 217, 0.6);
}

.mobile-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--tg-surface);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 1050;
}

.mobile-tab {
  border: 0;
  background: transparent;
  padding: 10px 6px;
  font-size: 13px;
}

.mobile-tab.active {
  color: var(--tg-primary);
  font-weight: 700;
}

@media (max-width: 767.98px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior-y: none;
  }

  #appRoot {
    padding: 0 !important;
    min-height: var(--app-dvh);
    height: var(--app-dvh);
    overflow: hidden;
  }

  #mainContainer {
    padding: 0 0 calc(56px + env(safe-area-inset-bottom, 0px)) 0;
    min-height: var(--app-dvh);
    height: var(--app-dvh);
    overflow: hidden;
  }

  .app-shell {
    margin: 0;
    min-height: 100%;
    height: 100%;
  }

  .main-card {
    min-height: 100%;
    height: 100%;
    border-radius: 0 !important;
  }

  .main-card > .card-body {
    height: 100%;
    overflow: hidden;
  }

  #messagesView,
  #messagesView > .row {
    height: 100%;
    min-height: 0;
  }

  .tg-conversation-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  #messagesView .conversation-pane,
  #messagesView .chat-pane {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .conversation-list {
    max-height: none;
    height: calc(100% - 132px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  #chatHeader {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    flex: 0 0 auto;
  }

  #chatComposer {
    flex: 0 0 auto;
    padding: 10px 10px calc(env(safe-area-inset-bottom, 0px) + 12px) 10px !important;
    border-top: 1px solid var(--tg-line);
    background: var(--tg-surface);
  }

  .message-list {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }

  .chat-tools-row .btn,
  #chatComposer .input-group .btn {
    min-height: 42px;
    padding: 9px 12px;
    font-weight: 600;
  }

  #messageInput {
    min-height: 46px;
    font-size: 16px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .call-local-video {
    width: 96px;
    height: 74px;
  }

  .chat-empty-title {
    font-size: 26px;
  }
}

@media (max-width: 991.98px) {
  #messagesView .conversation-pane,
  #messagesView .tg-conversation-pane,
  #messagesView .chat-pane {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }

  #messagesView .conversation-pane.border-end,
  #messagesView .tg-conversation-pane.border-end {
    border-right: 0 !important;
  }

  #chatSplitHandle {
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #messagesView .conversation-pane {
    display: block !important;
  }

  #messagesView .chat-pane {
    display: none !important;
  }

  #messagesView.mobile-chat-active .conversation-pane {
    display: none !important;
  }

  #messagesView.mobile-chat-active .chat-pane {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }

  #messagesView.mobile-chat-active #chatHeader {
    position: relative;
    top: auto;
    z-index: 4;
  }

  #messagesView.mobile-chat-active #chatComposer {
    position: relative;
    bottom: auto;
    z-index: 4;
  }
}

/* ============================
   微信式通讯录页
============================ */
.contacts-shell {
  background: var(--tg-surface);
}

.contacts-title {
  color: var(--tg-text);
  font-weight: 700;
  font-size: 1.1rem;
}

.contacts-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

.contacts-local-search-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--tg-line);
  background: var(--tg-surface);
  color: var(--tg-text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contacts-local-search-wrap .form-control {
  border-color: var(--tg-line);
}

.contacts-search-group .input-group-text {
  background: var(--tg-surface-soft);
  border-color: var(--tg-line);
  color: var(--tg-text-soft);
}

.contacts-search-group .form-control {
  border-color: var(--tg-line);
}

.contacts-search-group .btn {
  min-width: 78px;
}

.contacts-plus-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--tg-line);
  background: var(--tg-surface);
  color: var(--tg-text);
}

.contacts-plus-btn:hover {
  background: var(--tg-surface-soft);
}

.contacts-plus-menu {
  min-width: 160px;
}

.contacts-layout {
  display: grid;
  grid-template-columns: 1fr 22px;
  gap: 8px;
}

.contacts-main-list {
  min-height: 300px;
}

.contacts-fixed-zone {
  border: 1px solid var(--tg-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--tg-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.contacts-fixed-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--tg-line);
  background: #f8fbff;
  color: var(--tg-text);
  text-align: left;
}

.contacts-fixed-item:last-child {
  border-bottom: 0;
}

.contacts-fixed-item:hover {
  background: #eef5ff;
}

.contacts-fixed-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
}

.contacts-fixed-label {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}

.contacts-friend-groups {
  border: 1px solid var(--tg-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--tg-surface);
}

.contacts-group-title {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tg-text-soft);
  background: var(--tg-surface-soft);
  border-top: 1px solid var(--tg-line);
}

.contacts-group-title:first-child {
  border-top: 0;
}

.contacts-friend-item {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--tg-line);
  background: transparent;
  padding: 10px 12px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.contacts-friend-item:first-of-type {
  border-top: 0;
}

.contacts-friend-item:hover {
  background: var(--tg-surface-soft);
}

.contacts-friend-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.contacts-friend-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 36px;
}

.contacts-friend-avatar-btn {
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 50%;
  line-height: 0;
}

.contacts-friend-name {
  font-weight: 600;
  line-height: 1.1;
}

.contacts-friend-sub {
  color: var(--tg-text-soft);
  font-size: 12px;
}

.contacts-friend-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contacts-friend-right {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tg-text-soft);
}

.contacts-friend-chevron {
  font-size: 12px;
  opacity: 0.75;
}

.friend-profile-body {
  padding-top: 10px;
}

.friend-profile-info {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 12px;
  background: rgba(248, 249, 250, 0.8);
}

.friend-profile-info-title {
  font-weight: 600;
  margin-bottom: 8px;
}

.contacts-az-index {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 4px;
}

.contacts-az-index-btn {
  border: 0;
  background: transparent;
  color: var(--tg-text-soft);
  font-size: 11px;
  line-height: 1;
  padding: 1px 2px;
  border-radius: 4px;
}

.contacts-az-index-btn:hover {
  background: var(--tg-surface-soft);
  color: var(--tg-text);
}

.contacts-search-results .list-group-item {
  border-color: var(--tg-line);
}

.contacts-new-friends-panel {
  background: var(--tg-surface);
  border-top-color: var(--tg-line) !important;
}

.contacts-new-friends-panel h6 {
  font-weight: 700;
  color: var(--tg-text);
}

.contacts-request-tabs {
  display: inline-flex;
  border: 1px solid #d8dde6;
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
  background: #f2f4f7;
}

.contacts-request-tab {
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  background: transparent;
  color: #6b7280;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1;
}

.contacts-request-tab.active {
  background: #ffffff;
  color: #07c160;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.friend-request-item {
  border-color: #e8ebf0 !important;
  border-radius: 12px !important;
  margin-bottom: 10px;
  background: #fff;
  padding: 10px 12px;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px;
}

.friend-request-item:last-child {
  margin-bottom: 0;
}

.friend-request-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e8ebf0;
  flex: 0 0 44px;
}

.friend-request-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.friend-request-body {
  min-width: 0;
}

.friend-request-name {
  font-weight: 700;
  line-height: 1.2;
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-request-meta {
  font-size: 12px;
  color: #8b96a8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.friend-request-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.friend-request-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.friend-request-item .badge {
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 5px 9px;
  border: 1px solid transparent;
}

.friend-request-item .badge.text-bg-warning {
  background: #fff7e6 !important;
  color: #d48806 !important;
  border-color: #ffd591;
}

.friend-request-item .badge.text-bg-success {
  background: #f6ffed !important;
  color: #389e0d !important;
  border-color: #b7eb8f;
}

.friend-request-item .badge.text-bg-secondary {
  background: #f5f5f5 !important;
  color: #595959 !important;
  border-color: #d9d9d9;
}

.friend-request-item .req-accept-btn,
.friend-request-item .req-reject-btn {
  border-radius: 999px;
  min-width: 62px;
  height: 32px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  padding: 0 14px;
  box-shadow: none !important;
}

.friend-request-item .req-accept-btn {
  border-color: #07c160;
  background: linear-gradient(180deg, #20cd77 0%, #07c160 100%);
}

.friend-request-item .req-accept-btn:hover {
  border-color: #05a955;
  background: linear-gradient(180deg, #14bb67 0%, #05a955 100%);
}

.friend-request-item .req-reject-btn {
  border-color: #d7dce5;
  color: #556070;
  background: #fff;
}

.friend-request-item .req-reject-btn:hover {
  background: #f5f8fc;
  border-color: #c8d2df;
}

[data-bs-theme="dark"] .contacts-request-tabs {
  border-color: #2a3443;
  background: #172131;
}

[data-bs-theme="dark"] .contacts-request-tab {
  color: #9aa8bd;
}

[data-bs-theme="dark"] .contacts-request-tab.active {
  background: #111a24;
  color: #2fd178;
}

[data-bs-theme="dark"] .friend-request-item {
  background: #111a24;
  border-color: #2a3443 !important;
}

[data-bs-theme="dark"] .friend-request-avatar {
  border-color: #2a3443;
}

[data-bs-theme="dark"] .friend-request-meta {
  color: #9aa8bd;
}

[data-bs-theme="dark"] .friend-request-item .req-reject-btn {
  border-color: #3a4658;
  color: #c7d2e3;
  background: #111a24;
}

[data-bs-theme="dark"] .friend-request-item .req-reject-btn:hover {
  background: #1a2433;
}

[data-bs-theme="dark"] .friend-request-item .badge.text-bg-warning {
  background: rgba(212, 136, 6, 0.2) !important;
  color: #f2bf5a !important;
  border-color: rgba(212, 136, 6, 0.45);
}

[data-bs-theme="dark"] .friend-request-item .badge.text-bg-success {
  background: rgba(56, 158, 13, 0.2) !important;
  color: #8ed46b !important;
  border-color: rgba(56, 158, 13, 0.45);
}

[data-bs-theme="dark"] .friend-request-item .badge.text-bg-secondary {
  background: rgba(122, 133, 148, 0.2) !important;
  color: #c7d2e3 !important;
  border-color: rgba(122, 133, 148, 0.45);
}

@media (max-width: 991.98px) {
  .contacts-layout {
    grid-template-columns: 1fr;
  }

  .contacts-az-index {
    position: sticky;
    bottom: 8px;
    right: 0;
    z-index: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--tg-line);
  }

  [data-bs-theme="dark"] .contacts-az-index {
    background: rgba(17, 26, 36, 0.92);
  }

  .contacts-request-tabs {
    width: 100%;
  }

  .contacts-request-tab {
    flex: 1 1 0;
    text-align: center;
  }

  .friend-request-item {
    padding: 10px;
    align-items: flex-start !important;
  }

  .friend-request-side {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 138px;
  }

  .friend-request-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .friend-request-item .req-accept-btn,
  .friend-request-item .req-reject-btn {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 8px;
    font-size: 13px;
  }
}

/* ============================
   纯前端视觉改版：轻量手机风
============================ */
:root {
  --tg-primary: #4c84ff;
  --tg-primary-strong: #386ef0;
  --tg-secondary: #7da6ff;
  --tg-accent: #ff7d66;
  --tg-bg: #f5f6f8;
  --tg-surface: #ffffff;
  --tg-surface-soft: #f7f8fa;
  --tg-line: #ebedf0;
  --tg-text: #111827;
  --tg-text-soft: #8a94a6;
  --tg-bubble-in: #ffffff;
  --tg-bubble-out: #edf4ff;
  --app-dvh: 100dvh;
}

body,
.app-gradient,
.tg-shell,
.contacts-shell,
.chat-pane,
.conversation-pane,
.chat-empty-state {
  background: var(--tg-surface);
}

body {
  color: var(--tg-text);
}

.app-gradient {
  background-image: none;
}

.auth-card,
.sidebar-card,
.main-card,
.contacts-shell,
.profile-hero-card,
.profile-form-card {
  box-shadow: none !important;
}

.main-card,
.contacts-shell,
.profile-hero-card,
.profile-form-card {
  border: 1px solid var(--tg-line) !important;
}

.tg-shell {
  border-color: var(--tg-line);
  background: var(--tg-surface);
}

.sidebar-card.tg-rail-shell {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
}

.tg-rail-avatar-wrap {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid var(--tg-line);
}

.tg-rail-btn,
.tg-rail-btn-logout {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  color: #97a1b2;
  background: transparent;
}

.tg-rail-btn:hover,
.tg-rail-btn-logout:hover {
  color: var(--tg-text);
  border-color: var(--tg-line);
  background: var(--tg-surface-soft);
}

.tg-rail-btn.active {
  color: var(--tg-primary);
  border-color: transparent;
  background: #edf3ff;
}

.tg-rail-icon {
  font-size: 19px;
}

.tg-rail-badge,
.unread-dot,
#totalUnreadText.badge,
#newFriendPendingCount.badge,
#friendReqBadgeMobileTab.badge,
#friendReqBadgeDrawer.badge,
#friendReqBadgeDesktop.tg-rail-badge,
#totalUnreadMobile.badge {
  box-shadow: none;
  border: 2px solid #fff;
  background: #ff5b5b !important;
  color: #fff !important;
  font-weight: 700;
}

.tg-rail-badge,
.unread-dot {
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  padding: 0 5px;
}

.mobile-topbar {
  min-height: 58px;
  padding: 10px 14px !important;
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--tg-line) !important;
  backdrop-filter: blur(12px);
}

.mobile-topbar-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--tg-text);
}

.mobile-topbar-btn {
  min-width: 52px;
  border-radius: 999px;
  border-color: var(--tg-line);
  color: var(--tg-text-soft);
  background: var(--tg-surface-soft);
}

.mobile-drawer {
  --bs-offcanvas-width: min(82vw, 320px);
  background: rgba(255, 255, 255, 0.98);
}

.mobile-drawer .offcanvas-header {
  padding: 18px 18px 10px;
  border-bottom: 1px solid var(--tg-line);
}

.mobile-drawer-body {
  padding: 14px 14px 24px;
}

.mobile-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 16px;
  border: 0;
  background: transparent;
  color: var(--tg-text);
}

.mobile-drawer-link span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mobile-drawer-link.active {
  background: #f3f6fb;
  color: var(--tg-primary);
}

.conversation-pane {
  border-right: 1px solid var(--tg-line);
}

.tg-conversation-header {
  background: var(--tg-surface);
  border-bottom-color: var(--tg-line) !important;
}

.tg-search-wrap,
.contacts-search-group,
#messageInput,
#nicknameInput,
#signatureInput {
  border-color: var(--tg-line) !important;
  background: var(--tg-surface-soft);
}

.tg-search-wrap {
  min-height: 42px;
}

.tg-search-wrap .input-group-text,
.contacts-search-group .input-group-text {
  background: transparent;
  color: #a0a8b7;
}

.tg-search-wrap .form-control,
.contacts-search-group .form-control {
  color: var(--tg-text);
  background: transparent;
}

.tg-create-btn,
.contacts-local-search-btn,
.contacts-plus-btn {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--tg-line);
  background: var(--tg-surface);
  color: var(--tg-text-soft);
  box-shadow: none;
}

.tg-filter-tabs,
.contacts-request-tabs {
  background: var(--tg-surface-soft);
  border: 0;
  padding: 3px;
  box-shadow: none;
}

.tg-filter-tab,
.contacts-request-tab {
  color: var(--tg-text-soft);
  font-weight: 600;
}

.tg-filter-tab.active,
.contacts-request-tab.active {
  color: var(--tg-text);
  background: #fff;
  box-shadow: none;
}

.conversation-list {
  padding: 6px 0 12px;
}

.conversation-item-btn {
  margin-bottom: 0;
  padding: 12px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid #f1f3f5 !important;
  border-radius: 0 !important;
  background: #fff !important;
}

.conversation-item-btn:hover {
  background: #fafbfc !important;
  border-color: #f1f3f5 !important;
}

.conversation-item-btn.active,
.conversation-item-btn.active.tg-pinned {
  background: #f5f8ff !important;
  border-color: #eef2f7 !important;
  box-shadow: none;
}

.conversation-item-btn.active::before {
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--tg-primary);
}

.conversation-avatar {
  width: 46px;
  height: 46px;
  border-radius: 16px;
}

.conversation-name,
.contacts-friend-name,
.contacts-fixed-label,
.profile-section-title {
  color: var(--tg-text);
  font-weight: 600;
}

.conversation-time,
.conversation-preview,
.contacts-friend-sub,
.avatar-edit-hint,
.tg-chat-header #chatSubTitle {
  color: var(--tg-text-soft) !important;
}

.online-dot {
  width: 7px;
  height: 7px;
  margin-right: 4px;
}

.online-dot.on {
  background: #33c27f;
}

.chat-pane {
  border-left: 0;
}

#chatHeader,
#chatComposer,
#multiSelectBar {
  background: var(--tg-surface);
  border-color: var(--tg-line) !important;
}

#chatHeader .btn,
#chatComposer .input-group .btn,
.chat-tools-row .btn,
#clearReplyBtn {
  border-radius: 14px;
  box-shadow: none !important;
}

.chat-tools-row .btn {
  min-width: 54px;
  background: var(--tg-surface-soft);
  border-color: transparent;
  color: var(--tg-text-soft);
}

.chat-tools-row .btn:hover {
  background: #eef2f7;
  border-color: transparent;
  color: var(--tg-text);
}

#uploadImageBtn,
#sendMessageBtn {
  border-color: transparent;
}

#sendMessageBtn {
  background: var(--tg-primary);
}

#sendMessageBtn:hover {
  background: var(--tg-primary-strong);
}

.message-list {
  background: #fff;
}

.chat-empty-icon {
  width: 64px;
  height: 64px;
  background: #f3f5f7;
  color: #c6ced9;
}

.chat-empty-title {
  font-size: 24px;
  color: #c5ccd6;
}

.chat-empty-sub {
  color: #a6afbd;
}

.msg-row {
  margin-bottom: 12px;
}

.msg-bubble {
  max-width: min(80%, 560px);
  border-radius: 18px;
  padding: 10px 13px;
  border: 0;
  box-shadow: none;
}

.msg-row.me .msg-bubble {
  background: var(--tg-bubble-out);
  color: #24456f;
  border-bottom-right-radius: 8px;
}

.msg-row.other .msg-bubble {
  background: var(--tg-bubble-in);
  color: var(--tg-text);
  border: 1px solid #f0f2f5;
  border-bottom-left-radius: 8px;
}

.msg-row.system .msg-bubble {
  background: #f4f6f8;
  color: #8b95a5;
}

.contacts-view,
.profile-view {
  background: #fff;
}

.contacts-shell {
  border-radius: 24px;
}

.contacts-topbar {
  min-height: 48px;
  margin-bottom: 12px !important;
}

.contacts-layout {
  gap: 12px;
}

.contacts-fixed-zone,
.contacts-friend-groups,
.friend-profile-info,
.friend-request-item {
  border-color: var(--tg-line);
  border-radius: 18px;
  box-shadow: none;
}

.contacts-fixed-zone {
  background: #fff;
}

.contacts-fixed-item {
  min-height: 56px;
  padding: 0 14px;
  background: #fff;
  border-bottom-color: #f1f3f5;
}

.contacts-fixed-item:hover,
.contacts-friend-item:hover {
  background: #fafbfc;
}

.contacts-fixed-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 15px;
}

.contacts-fixed-item .text-bg-primary {
  background: #edf3ff !important;
  color: var(--tg-primary) !important;
}

.contacts-fixed-item .text-bg-success {
  background: #eefaf3 !important;
  color: #34a86a !important;
}

.contacts-group-title {
  padding: 8px 14px;
  background: #fff;
  border-top-color: #f1f3f5;
  color: #a0a8b7;
}

.contacts-friend-item {
  min-height: 58px;
  padding: 10px 14px;
  border-top-color: #f1f3f5;
}

.contacts-friend-avatar {
  width: 40px;
  height: 40px;
  border-radius: 14px;
}

.contacts-az-index {
  gap: 4px;
}

.contacts-az-index-btn {
  color: #b3bcc9;
}

.profile-view .row {
  max-width: 860px;
  margin: 0 auto;
}

.profile-hero-card,
.profile-form-card {
  border-radius: 24px !important;
}

.profile-hero-body {
  padding: 32px 24px;
}

.profile-form-body {
  padding: 28px 24px;
}

.profile-avatar {
  width: 104px;
  height: 104px;
  border: 3px solid #f1f4f8;
}

.avatar-picker-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.avatar-picker-btn:hover {
  transform: none;
}

#nicknameInput,
#signatureInput {
  min-height: 46px;
  border-radius: 14px;
}

#saveProfileBtn,
#friendSearchBtn {
  min-height: 44px;
  border-radius: 14px;
}

.mobile-tabbar {
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  padding: 8px 6px;
  border: 1px solid rgba(235, 237, 240, 0.95);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
  backdrop-filter: blur(16px);
}

.mobile-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 50px;
  border-radius: 16px;
  color: #a0a8b7;
  font-size: 11px;
}

.mobile-tab i {
  font-size: 18px;
  line-height: 1;
}

.mobile-tab.active {
  color: var(--tg-primary);
  font-weight: 600;
  background: #f3f6fb;
}

.mobile-tab .badge {
  position: absolute;
  top: 2px;
  right: 14px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 9px;
}

@media (max-width: 767.98px) {
  #mainContainer {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    background: #fff;
  }

  .main-card {
    border: 0 !important;
  }

  .tg-conversation-header {
    padding: 14px 16px 10px !important;
  }

  .conversation-list {
    height: calc(100% - 122px);
  }

  .conversation-item-btn {
    padding: 12px 16px !important;
  }

  #chatHeader {
    padding: 12px 16px !important;
  }

  #chatComposer {
    padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  }

  .message-list {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .contacts-view,
  .profile-view,
  #groupsView {
    padding: 12px !important;
  }

  .contacts-shell,
  .profile-hero-card,
  .profile-form-card {
    border-radius: 20px !important;
  }

  .profile-hero-body,
  .profile-form-body {
    padding: 24px 18px;
  }
}

/* ============================
   二次收紧：更接近原生手机界面
============================ */
.main-card,
.contacts-shell,
.profile-hero-card,
.profile-form-card {
  border-radius: 20px !important;
}

.tg-conversation-header {
  padding: 18px 18px 12px !important;
}

.tg-conversation-header h6 {
  font-size: 15px;
  font-weight: 600;
}

.tg-search-wrap {
  min-height: 40px;
  border-radius: 14px;
  background: #f5f6f8;
}

.tg-search-wrap .form-control::placeholder,
.contacts-search-group .form-control::placeholder,
#messageInput::placeholder,
#nicknameInput::placeholder,
#signatureInput::placeholder {
  color: #b4bcc8;
}

.tg-create-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.tg-filter-tabs {
  gap: 4px;
  padding: 2px;
  background: transparent;
}

.tg-filter-tab {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
}

.tg-filter-tab.active {
  background: #f3f5f8;
  color: var(--tg-text);
}

.conversation-list {
  padding-top: 2px;
}

.conversation-item-btn {
  padding: 14px 18px !important;
}

.conversation-avatar {
  width: 44px;
  height: 44px;
  border-radius: 15px;
}

.conversation-name {
  font-size: 15px;
  font-weight: 600;
}

.conversation-preview {
  font-size: 13px;
}

.conversation-time {
  font-size: 12px;
}

.unread-dot,
#totalUnreadText.badge,
#newFriendPendingCount.badge,
#friendReqBadgeMobileTab.badge,
#friendReqBadgeDrawer.badge,
#totalUnreadMobile.badge {
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 9px;
}

#totalUnreadText.badge {
  border-radius: 999px;
  padding: 4px 6px;
}

.contacts-shell {
  border-color: #f0f1f3 !important;
}

.contacts-topbar {
  margin-bottom: 14px !important;
}

.contacts-title {
  font-size: 1.2rem;
  font-weight: 700;
}

.contacts-local-search-btn,
.contacts-plus-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border-color: transparent;
  background: #f6f7f9;
}

.contacts-layout {
  gap: 10px;
}

.contacts-fixed-zone,
.contacts-friend-groups {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.contacts-fixed-item,
.contacts-friend-item {
  min-height: 60px;
  padding-left: 2px;
  padding-right: 2px;
  border-bottom-color: #f2f3f5;
}

.contacts-fixed-item {
  gap: 12px;
}

.contacts-fixed-item:hover,
.contacts-friend-item:hover {
  background: transparent;
}

.contacts-fixed-icon,
.contacts-friend-avatar {
  border-radius: 14px;
}

.contacts-fixed-label {
  font-size: 15px;
  font-weight: 500;
}

.contacts-friend-name {
  font-size: 15px;
  font-weight: 500;
}

.contacts-friend-sub {
  margin-top: 2px;
  font-size: 12px;
}

.contacts-group-title {
  padding: 14px 2px 6px;
  border-top: 0;
  background: transparent;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.contacts-az-index {
  padding-top: 12px;
}

.contacts-az-index-btn {
  font-size: 10px;
  font-weight: 500;
}

.profile-view {
  background: #fafafa;
}

.profile-view .row {
  max-width: 720px;
}

.profile-hero-card,
.profile-form-card {
  border-color: #f0f1f3 !important;
  background: #fff;
}

.profile-hero-body {
  padding: 44px 24px 28px;
}

.profile-form-body {
  padding: 24px 22px 28px;
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 28px;
}

.avatar-edit-hint {
  font-size: 11px;
}

.profile-section-title {
  margin-bottom: 18px !important;
  font-size: 16px;
}

.profile-form-body .form-label {
  margin-bottom: 8px;
  font-size: 13px;
  color: #7f8899;
}

#nicknameInput,
#signatureInput {
  background: #f7f8fa;
  border: 0 !important;
}

#toggleThemeBtn {
  border-color: transparent;
  background: #f5f6f8;
  color: #5e6776;
}

#saveProfileBtn {
  width: 100%;
  border-radius: 16px;
  border: 0;
}

.mobile-tabbar {
  left: 10px;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  padding: 6px 4px;
  border-color: #eff1f4;
  border-radius: 20px;
}

.mobile-tab {
  gap: 3px;
  min-height: 48px;
  border-radius: 14px;
  font-size: 10px;
  font-weight: 500;
}

.mobile-tab i {
  font-size: 17px;
  opacity: 0.92;
}

.mobile-tab.active {
  background: transparent;
  color: var(--tg-primary);
}

.mobile-tab.active span {
  font-weight: 600;
}

.mobile-tab .badge {
  top: 4px;
  right: 16px;
}

@media (max-width: 767.98px) {
  .mobile-topbar {
    min-height: 56px;
    padding: 10px 16px !important;
  }

  .tg-conversation-header {
    padding: 16px 16px 10px !important;
  }

  .conversation-item-btn {
    padding: 13px 16px !important;
  }

  .contacts-shell,
  .profile-hero-card,
  .profile-form-card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .contacts-view,
  .profile-view,
  #groupsView {
    padding: 0 !important;
    background: #fff;
  }

  .contacts-shell .card-body,
  .profile-hero-body,
  .profile-form-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .contacts-topbar {
    position: sticky;
    top: 0;
    z-index: 3;
    margin-bottom: 8px !important;
    padding: 12px 0 10px;
    background: rgba(255, 255, 255, 0.96);
  }

  .contacts-group-title {
    padding-left: 0;
    padding-right: 0;
  }

  .contacts-fixed-item,
  .contacts-friend-item {
    padding-left: 0;
    padding-right: 0;
  }

  .profile-view {
    background: #fff;
  }

  .profile-view .row {
    gap: 0 !important;
  }

  .profile-hero-body {
    padding-top: 28px;
    padding-bottom: 18px;
  }

  .profile-form-body {
    padding-top: 12px;
    padding-bottom: 110px;
  }
}

/* ============================
   三次收口：极简、轻、白、原生感
============================ */
:root {
  --tg-primary: #5f86d8;
  --tg-primary-strong: #5077cb;
  --tg-surface-soft: #f8f9fb;
  --tg-line: #f0f2f5;
  --tg-text-soft: #98a1ae;
  --tg-bubble-out: #f3f7ff;
}

.sidebar-card.tg-rail-shell {
  background: #fbfbfc;
  border-color: #f1f3f6;
}

.tg-rail-avatar-wrap {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border-color: #f0f2f5;
  background: #fff;
}

.tg-rail-btn,
.tg-rail-btn-logout {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #a5adba;
}

.tg-rail-btn:hover,
.tg-rail-btn-logout:hover {
  color: #6b7482;
  border-color: transparent;
  background: #f5f7fa;
}

.tg-rail-btn.active {
  color: var(--tg-primary);
  background: #f4f7fc;
}

.tg-rail-icon {
  font-size: 18px;
  font-weight: 400;
}

.tg-rail-badge,
#friendReqBadgeDesktop.tg-rail-badge,
.unread-dot,
#totalUnreadText.badge,
#newFriendPendingCount.badge,
#friendReqBadgeMobileTab.badge,
#friendReqBadgeDrawer.badge,
#totalUnreadMobile.badge {
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-width: 1.5px;
  font-size: 8px;
}

.tg-conversation-header {
  padding: 14px 16px 10px !important;
}

.tg-search-wrap {
  min-height: 36px;
  max-width: 240px;
  border: 1px solid #f1f3f6 !important;
  border-radius: 12px;
  background: #f8f9fb;
}

.tg-search-wrap .input-group-text {
  font-size: 12px;
  color: #b1b8c4;
}

.tg-search-wrap .form-control {
  font-size: 12px;
}

.tg-create-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 11px;
  background: #f7f8fa;
  color: #9aa3af;
}

.tg-create-btn:hover {
  background: #f1f3f6;
  color: #6e7785;
}

.tg-filter-tabs {
  gap: 2px;
  padding: 0;
}

.tg-filter-tab {
  padding: 5px 8px;
  border-radius: 10px;
  color: #a0a8b5;
}

.tg-filter-tab.active {
  background: #f5f7fa;
  color: #4c5563;
}

.conversation-pane {
  border-right-color: #f3f4f7;
}

.conversation-list {
  padding: 0 0 8px;
}

.conversation-item-btn {
  padding: 13px 16px !important;
  border-bottom-color: #f4f5f7 !important;
}

.conversation-item-btn:hover {
  background: #fcfcfd !important;
}

.conversation-item-btn.active,
.conversation-item-btn.active.tg-pinned {
  background: #f7f9fc !important;
  border-color: #f1f3f6 !important;
}

.conversation-item-btn.active::before {
  width: 2px;
  top: 16px;
  bottom: 16px;
  background: #d7e3fb;
}

.conversation-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

.conversation-name {
  font-size: 14px;
  font-weight: 600;
  color: #222a35;
}

.conversation-preview {
  font-size: 12px;
  color: #a0a8b5 !important;
}

.conversation-time {
  font-size: 11px;
  color: #b0b8c4;
}

#chatHeader {
  padding: 12px 16px !important;
  border-bottom-color: #f2f4f7 !important;
}

.chat-header-avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.tg-chat-header #chatTitle {
  font-size: 15px;
  font-weight: 600;
  color: #252d38;
}

.tg-chat-header #chatSubTitle {
  font-size: 11px;
  color: #a2aab7 !important;
}

#chatHeader .btn,
#loadMoreBtn,
#chatGroupMenuBtn {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  border-color: #f1f3f6;
  background: #fafbfd;
  color: #9ba4b1;
}

#loadMoreBtn:hover,
#chatGroupMenuBtn:hover {
  background: #f4f6f9;
  color: #7d8796;
}

.message-list {
  background: #fff;
}

.msg-row {
  margin-bottom: 10px;
}

.msg-bubble {
  max-width: min(78%, 520px);
  border-radius: 16px;
  padding: 9px 12px;
  font-size: 13px;
}

.msg-row.me .msg-bubble {
  background: var(--tg-bubble-out);
  color: #39567f;
  border-bottom-right-radius: 7px;
}

.msg-row.other .msg-bubble {
  border-color: #f3f4f6;
  border-bottom-left-radius: 7px;
}

.msg-meta {
  margin-top: 3px;
  font-size: 10px;
  color: #b2bac6;
  opacity: 1;
}

#chatComposer {
  padding-top: 10px !important;
  border-top-color: #f2f4f7 !important;
}

.chat-tools-row {
  gap: 6px;
}

.chat-tools-row .btn,
#uploadImageBtn {
  min-width: 48px;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 11px;
  background: #f8f9fb;
  color: #98a1ae;
  font-size: 12px;
}

.chat-tools-row .btn:hover,
#uploadImageBtn:hover {
  background: #f1f3f6;
  color: #727c8a;
}

#messageInput {
  min-height: 38px;
  border: 1px solid #f1f3f6 !important;
  border-radius: 12px;
  background: #fafbfc;
  box-shadow: none !important;
}

#sendMessageBtn {
  min-width: 58px;
  border-radius: 12px;
  background: #edf3ff;
  color: #5b78b8;
  font-weight: 600;
}

#sendMessageBtn:hover {
  background: #e6eeff;
  color: #4f6dad;
}

@media (max-width: 767.98px) {
  .tg-search-wrap {
    max-width: none;
    min-height: 35px;
  }

  .conversation-item-btn {
    padding: 12px 16px !important;
  }

  #chatHeader {
    padding: 11px 14px !important;
  }

  #chatComposer {
    padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  }

  .mobile-tabbar {
    border-color: #f2f4f7;
    background: rgba(255, 255, 255, 0.98);
  }

  .mobile-tab {
    color: #a7afbb;
  }
}

/* ============================
   四次收口：最终极简精修
============================ */
:root {
  --tg-primary: #6f8fcf;
  --tg-primary-strong: #6486c8;
  --tg-text: #1f2933;
  --tg-text-soft: #9ca5b3;
  --tg-line: #f2f4f7;
  --tg-bubble-out: #f5f8fe;
}

.sidebar-card.tg-rail-shell {
  border-color: #f4f5f7;
}

.tg-rail-avatar-wrap {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.tg-rail-btn,
.tg-rail-btn-logout {
  width: 39px;
  height: 39px;
  border-radius: 13px;
  color: #adb4bf;
}

.tg-rail-btn.active {
  background: #f6f8fb;
  color: var(--tg-primary);
}

.tg-rail-icon {
  font-size: 17px;
}

.tg-rail-badge,
#friendReqBadgeDesktop.tg-rail-badge,
.unread-dot,
#totalUnreadText.badge,
#newFriendPendingCount.badge,
#friendReqBadgeMobileTab.badge,
#friendReqBadgeDrawer.badge,
#totalUnreadMobile.badge {
  min-width: 14px;
  height: 14px;
  font-size: 8px;
  padding: 0 2px;
}

.tg-conversation-header {
  padding: 12px 15px 9px !important;
}

.tg-search-wrap {
  min-height: 34px;
  max-width: 228px;
  border-color: #f3f5f7 !important;
  border-radius: 11px;
  background: #f9fafb;
}

.tg-search-wrap .input-group-text,
.tg-search-wrap .form-control {
  font-size: 11.5px;
}

.tg-create-btn {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #f8f9fb;
  color: #a6afbb;
}

.tg-filter-tab {
  padding: 4px 7px;
  font-size: 11.5px;
}

.tg-filter-tab.active {
  background: #f7f8fa;
  color: #5d6674;
}

.conversation-item-btn.active,
.conversation-item-btn.active.tg-pinned {
  background: #fafbfd !important;
}

.conversation-item-btn.active::before {
  width: 2px;
  background: #e2e9f7;
}

.conversation-name {
  font-size: 13.5px;
}

.conversation-preview {
  font-size: 11.5px;
}

.conversation-time {
  font-size: 10.5px;
}

#chatHeader {
  padding: 10px 14px !important;
  border-bottom-color: #f4f5f7 !important;
}

.chat-header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 11px;
}

.tg-chat-header #chatTitle {
  font-size: 14px;
}

.tg-chat-header #chatSubTitle {
  font-size: 10.5px;
}

#chatHeader .btn,
#loadMoreBtn,
#chatGroupMenuBtn {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 9px;
  border-color: #f4f5f7;
  background: #fbfcfd;
}

.msg-bubble {
  border-radius: 15px;
  padding: 8px 11px;
  font-size: 12.5px;
}

.msg-row.me .msg-bubble {
  color: #456184;
}

.msg-meta {
  font-size: 9.5px;
  color: #bcc3ce;
}

#chatComposer {
  border-top-color: #f4f5f7 !important;
}

.chat-tools-row .btn,
#uploadImageBtn,
#sendMessageBtn {
  min-height: 32px;
  border-radius: 10px;
  font-size: 11.5px;
}

.chat-tools-row .btn,
#uploadImageBtn {
  min-width: 44px;
  background: #f9fafb;
  color: #9ca5b3;
}

#messageInput {
  min-height: 36px;
  border-color: #f3f5f7 !important;
  border-radius: 11px;
  background: #fbfcfd;
  font-size: 12px;
}

#sendMessageBtn {
  min-width: 54px;
  background: #f1f5fd;
  color: #6a86be;
}

#sendMessageBtn:hover {
  background: #ecf1fb;
  color: #5e7bb4;
}

.mobile-tabbar {
  border-color: #f4f5f7;
}

.mobile-tab.active {
  color: #6a88c3;
}

/* ============================
   五次收口：最后一层柔化
============================ */
:root {
  --tg-primary: #7a95cb;
  --tg-primary-strong: #708bc2;
  --tg-text-soft: #a4acb8;
  --tg-line: #f4f6f8;
  --tg-bubble-out: #f7f9fd;
}

.sidebar-card.tg-rail-shell {
  background: #fcfcfd;
  width: 72px;
}

.tg-rail-avatar-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.tg-rail-btn,
.tg-rail-btn-logout {
  width: 37px;
  height: 37px;
  border-radius: 12px;
  color: #b2b9c4;
}

.tg-rail-btn.active {
  background: #f7f9fc;
}

.tg-rail-badge,
#friendReqBadgeDesktop.tg-rail-badge,
.unread-dot,
#totalUnreadText.badge,
#newFriendPendingCount.badge,
#friendReqBadgeMobileTab.badge,
#friendReqBadgeDrawer.badge,
#totalUnreadMobile.badge {
  min-width: 13px;
  height: 13px;
  font-size: 7.5px;
}

.tg-conversation-header {
  padding: 11px 14px 8px !important;
}

.tg-search-wrap {
  min-height: 33px;
  max-width: 220px;
  border-radius: 10px;
  background: #fafbfc;
}

.tg-create-btn {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.conversation-item-btn.active,
.conversation-item-btn.active.tg-pinned {
  background: #fbfcfe !important;
}

.conversation-item-btn.active::before {
  background: #e8edf8;
}

#chatHeader {
  padding: 9px 13px !important;
}

#chatHeader .btn,
#loadMoreBtn,
#chatGroupMenuBtn {
  min-height: 26px;
  border-color: #f6f7f9;
  background: #fcfcfd;
}

.msg-bubble {
  border-radius: 14px;
  padding: 8px 10px;
}

.chat-tools-row .btn,
#uploadImageBtn,
#sendMessageBtn {
  min-height: 31px;
  border-radius: 9px;
}

#messageInput {
  min-height: 35px;
  border-radius: 10px;
}

#sendMessageBtn {
  background: #f4f7fc;
  color: #748ec2;
}

#sendMessageBtn:hover {
  background: #eef2f9;
  color: #6a84b8;
}

.mobile-tab.active {
  color: #7590c5;
}

#loadMoreBtn:disabled {
  display: none !important;
}

/* ============================
   Theme System + Appearance Settings
============================ */

html {
  --bg-primary: #f5f6f8;
  --bg-secondary: #f8fafc;
  --panel-bg: #ffffff;
  --card-bg: #ffffff;
  --surface-elevated: #ffffff;
  --modal-bg: #ffffff;
  --overlay-bg: rgba(15, 23, 42, 0.18);
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-muted: #94a3b8;
  --text-on-accent: #ffffff;
  --border-color: #e7edf4;
  --accent-color: #4c84ff;
  --accent-strong: #386ef0;
  --accent-soft: #dbe7ff;
  --input-bg: #ffffff;
  --input-text: #111827;
  --placeholder-color: #8b97a8;
  --message-outgoing-bg: #edf4ff;
  --message-outgoing-text: #183b72;
  --message-incoming-bg: #ffffff;
  --message-incoming-text: #111827;
  --bs-primary: var(--accent-color);
  --bs-primary-rgb: 76, 132, 255;
  --tg-bg: var(--bg-primary);
  --tg-surface: var(--panel-bg);
  --tg-surface-soft: var(--bg-secondary);
  --tg-line: var(--border-color);
  --tg-text: var(--text-primary);
  --tg-text-soft: var(--text-secondary);
  --tg-primary: var(--accent-color);
  --tg-primary-strong: var(--accent-strong);
  --tg-secondary: var(--accent-soft);
  --tg-accent: var(--accent-strong);
  --tg-bubble-in: var(--message-incoming-bg);
  --tg-bubble-out: var(--message-outgoing-bg);
}

html[data-theme-preset="classic"] {
  --bg-primary: #f5f6f8;
  --bg-secondary: #f8fafc;
  --panel-bg: #ffffff;
  --card-bg: #ffffff;
  --border-color: #e7edf4;
  --input-bg: #ffffff;
  --input-text: #111827;
  --message-outgoing-bg: #edf4ff;
  --message-outgoing-text: #183b72;
  --message-incoming-bg: #ffffff;
  --message-incoming-text: #111827;
}

html[data-theme-preset="bright"] {
  --bg-primary: #f3f8fb;
  --bg-secondary: #f7fbfd;
  --panel-bg: #ffffff;
  --card-bg: #ffffff;
  --border-color: #d9e8ee;
  --input-bg: #fdfefe;
  --input-text: #111827;
  --message-outgoing-bg: #e4f6fb;
  --message-outgoing-text: #0f4852;
  --message-incoming-bg: #ffffff;
  --message-incoming-text: #111827;
}

html[data-theme-preset="clean"] {
  --bg-primary: #f6f7f9;
  --bg-secondary: #fafbfc;
  --panel-bg: #ffffff;
  --card-bg: #ffffff;
  --border-color: #e8ebf0;
  --input-bg: #fbfcfd;
  --input-text: #111827;
  --message-outgoing-bg: #eef7f1;
  --message-outgoing-text: #184b2d;
  --message-incoming-bg: #ffffff;
  --message-incoming-text: #111827;
}

html[data-bs-theme="dark"] {
  --bg-primary: #0c131d;
  --bg-secondary: #111a25;
  --panel-bg: #121c27;
  --card-bg: #152130;
  --surface-elevated: #182330;
  --modal-bg: #182330;
  --overlay-bg: rgba(3, 7, 18, 0.62);
  --text-primary: #e6edf5;
  --text-secondary: #98a6b8;
  --text-muted: #7f8da1;
  --text-on-accent: #f8fbff;
  --border-color: #263446;
  --input-bg: #0f1722;
  --input-text: #ecf2f8;
  --placeholder-color: #93a2b6;
  --message-outgoing-bg: #1f4468;
  --message-outgoing-text: #e5f2ff;
  --message-incoming-bg: #182431;
  --message-incoming-text: #edf3f9;
}

html[data-bs-theme="dark"][data-theme-preset="night"] {
  --bg-primary: #0b1220;
  --bg-secondary: #10192a;
  --panel-bg: #101a29;
  --card-bg: #152131;
  --border-color: #243449;
  --input-bg: #111b2a;
  --input-text: #e6edf5;
  --message-outgoing-bg: #352d59;
  --message-outgoing-text: #f4eeff;
  --message-incoming-bg: #162333;
  --message-incoming-text: #e6edf5;
}

html[data-accent="blue"] {
  --accent-color: #4c84ff;
  --accent-strong: #386ef0;
  --accent-soft: #dbe7ff;
  --bs-primary-rgb: 76, 132, 255;
}

html[data-accent="red"] {
  --accent-color: #de6675;
  --accent-strong: #c85262;
  --accent-soft: #fde3e7;
  --bs-primary-rgb: 222, 102, 117;
}

html[data-accent="orange"] {
  --accent-color: #db8a4d;
  --accent-strong: #c46f34;
  --accent-soft: #fbe8d7;
  --bs-primary-rgb: 219, 138, 77;
}

html[data-accent="yellow"] {
  --accent-color: #cda43d;
  --accent-strong: #ae892e;
  --accent-soft: #f8edcc;
  --bs-primary-rgb: 205, 164, 61;
}

html[data-accent="green"] {
  --accent-color: #58a977;
  --accent-strong: #408a5d;
  --accent-soft: #dff1e5;
  --bs-primary-rgb: 88, 169, 119;
}

html[data-accent="cyan"] {
  --accent-color: #4aa7b4;
  --accent-strong: #318b98;
  --accent-soft: #d8f0f4;
  --bs-primary-rgb: 74, 167, 180;
}

html[data-accent="purple"] {
  --accent-color: #8a76cb;
  --accent-strong: #745fb4;
  --accent-soft: #e8e0fb;
  --bs-primary-rgb: 138, 118, 203;
}

html[data-accent="pink"] {
  --accent-color: #d470a0;
  --accent-strong: #bb5b89;
  --accent-soft: #f9dfeb;
  --bs-primary-rgb: 212, 112, 160;
}

#messageInput {
  background: var(--input-bg);
  color: var(--input-text);
  -webkit-text-fill-color: var(--input-text);
  caret-color: var(--accent-color);
}

#messageInput::placeholder {
  color: var(--placeholder-color);
}

.msg-row.me .msg-bubble {
  background: var(--message-outgoing-bg);
  color: var(--message-outgoing-text);
}

.msg-row.other .msg-bubble {
  background: var(--message-incoming-bg);
  color: var(--message-incoming-text);
}

/* Settings page only: restore independent scrolling and keep theme panel readable. */
#profileView.profile-view:not(.d-none) {
  min-height: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-primary);
}

#profileView.profile-view:not(.d-none) .row,
#profileView.profile-view:not(.d-none) .col-12,
#profileView.profile-view:not(.d-none) .col-lg-4,
#profileView.profile-view:not(.d-none) .col-lg-8,
#profileView.profile-view:not(.d-none) .profile-hero-card,
#profileView.profile-view:not(.d-none) .profile-form-card,
#profileView.profile-view:not(.d-none) .profile-hero-body,
#profileView.profile-view:not(.d-none) .profile-form-body,
#profileView.profile-view:not(.d-none) .settings-subview {
  min-height: 0;
}

#profileView.profile-view:not(.d-none) .row {
  align-content: start;
}

#profileView.profile-view:not(.d-none) .profile-hero-card,
#profileView.profile-view:not(.d-none) .profile-form-card {
  height: auto !important;
  background: var(--card-bg);
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}

#profileView.profile-view:not(.d-none) .profile-hero-body,
#profileView.profile-view:not(.d-none) .profile-form-body,
#profileView.profile-view:not(.d-none) .theme-settings-panel,
#profileView.profile-view:not(.d-none) .theme-preset-grid {
  height: auto;
  max-height: none;
  overflow: visible;
}

#profileView.profile-view:not(.d-none) #nicknameInput,
#profileView.profile-view:not(.d-none) #signatureInput {
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border-color) !important;
}

#profileView.profile-view:not(.d-none) #nicknameInput::placeholder,
#profileView.profile-view:not(.d-none) #signatureInput::placeholder {
  color: var(--placeholder-color);
}

.modal-backdrop {
  --bs-backdrop-bg: 12, 18, 32;
  --bs-backdrop-opacity: 0.42;
  background: var(--overlay-bg);
  backdrop-filter: blur(2px);
}

[data-bs-theme="dark"] .modal-backdrop {
  --bs-backdrop-opacity: 0.66;
}

.modal-content,
.popover,
.dropdown-menu,
.group-info-drawer-panel,
.offcanvas.mobile-drawer,
.chat-more-menu,
.contacts-plus-menu {
  background: var(--modal-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.modal-content,
.popover,
.dropdown-menu,
.group-info-drawer-panel,
.offcanvas.mobile-drawer {
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);
}

.modal-header,
.modal-footer,
.group-info-drawer-header,
.offcanvas.mobile-drawer .offcanvas-header {
  border-color: var(--border-color) !important;
}

.modal-title,
.offcanvas.mobile-drawer .offcanvas-title,
.group-info-drawer-header h5,
.dropdown-header,
.popover-header {
  color: var(--text-primary);
}

.modal-body,
.modal-footer,
.offcanvas.mobile-drawer .offcanvas-body,
.group-info-drawer-body,
.popover-body,
.dropdown-item,
.dropdown-menu .small,
.dropdown-menu .text-secondary,
.modal .text-secondary,
.modal .small {
  color: var(--text-secondary) !important;
}

.modal .form-label,
.group-info-drawer .form-label,
.popover .form-label,
.offcanvas.mobile-drawer .form-label {
  color: var(--text-primary);
}

.modal .form-control,
.modal .form-select,
.modal textarea.form-control,
.group-info-drawer .form-control,
.group-info-drawer .form-select,
.offcanvas.mobile-drawer .form-control,
.offcanvas.mobile-drawer .form-select,
.popover .form-control,
.popover .form-select {
  background: var(--input-bg);
  color: var(--input-text);
  border-color: var(--border-color);
}

.modal .form-control::placeholder,
.modal .form-select::placeholder,
.group-info-drawer .form-control::placeholder,
.offcanvas.mobile-drawer .form-control::placeholder,
.popover .form-control::placeholder {
  color: var(--placeholder-color);
}

.modal .form-control:focus,
.modal .form-select:focus,
.group-info-drawer .form-control:focus,
.group-info-drawer .form-select:focus,
.popover .form-control:focus,
.popover .form-select:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.38);
  box-shadow: 0 0 0 0.18rem rgba(var(--bs-primary-rgb), 0.16);
}

.modal .btn-secondary,
.group-info-drawer .btn-outline-secondary,
.group-info-drawer .btn-secondary,
.dropdown-menu .dropdown-item,
.offcanvas.mobile-drawer .btn {
  color: var(--text-primary);
}

.modal .btn-secondary,
.group-info-drawer .btn-outline-secondary,
.group-info-drawer .btn-secondary {
  background: color-mix(in srgb, var(--bg-secondary) 72%, var(--panel-bg));
  border-color: var(--border-color);
}

.modal .btn-primary,
.modal .btn-success,
.group-info-drawer .btn-primary,
.group-info-drawer .btn-success,
.popover .btn-primary,
.popover .btn-success {
  color: var(--text-on-accent);
}

.btn-close {
  filter: none;
  opacity: 0.72;
}

[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.88;
}

.btn-close:hover {
  opacity: 1;
}

.dropdown-menu .dropdown-item {
  border-radius: 10px;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--panel-bg));
  color: var(--text-primary) !important;
}

.message-action-menu {
  min-width: 196px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--modal-bg) 92%, var(--surface-elevated));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.message-action-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border-radius: 12px;
  font-size: 0.95rem;
}

.message-action-menu .dropdown-item.text-danger {
  color: var(--bs-danger) !important;
}

.pinned-message-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 32px);
  margin: 12px 16px 0;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel-bg) 84%, var(--surface-elevated));
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.pinned-message-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-soft) 56%, var(--panel-bg));
  color: var(--accent-color);
  flex: 0 0 auto;
}

.pinned-message-main {
  min-width: 0;
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
}

.pinned-message-sender {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
}

.pinned-message-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.pinned-message-clear {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex: 0 0 auto;
}

.pinned-message-clear:hover {
  background: color-mix(in srgb, var(--accent-soft) 36%, transparent);
  color: var(--text-primary);
}

.dropdown-divider {
  border-color: var(--border-color);
}

.group-member-options,
#groupMuteListBox,
#historySearchResults,
#forwardTargetList,
#historyPhotoGrid {
  color: var(--text-primary);
}

.group-member-options .list-group-item,
#groupMuteListBox .list-group-item,
#forwardTargetList .list-group-item,
#historySearchResults .list-group-item {
  background: color-mix(in srgb, var(--panel-bg) 84%, var(--bg-secondary));
  color: var(--text-primary);
  border-color: var(--border-color);
}

.history-photo-item {
  border-color: var(--border-color);
  background: var(--panel-bg);
}

.history-photo-meta {
  color: var(--text-secondary);
}

.history-photo-locate {
  color: var(--accent-color);
}

.chat-more-menu .dropdown-item,
.contacts-plus-menu .dropdown-item {
  color: var(--text-primary);
}

.mobile-drawer-link.active {
  background: color-mix(in srgb, var(--accent-soft) 44%, var(--panel-bg));
  color: var(--text-primary);
}

.settings-subview {
  display: grid;
  gap: 16px;
}

.settings-home-shell {
  display: grid;
  gap: 16px;
}

.settings-header-block {
  margin-bottom: 2px;
}

.settings-header-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.settings-menu-panel,
.settings-profile-panel,
.theme-settings-panel {
  border: 1px solid var(--border-color);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-bg), var(--panel-bg));
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.settings-menu-panel {
  padding: 10px;
  display: grid;
  gap: 8px;
}

.settings-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: var(--card-bg);
  color: inherit;
  text-align: left;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.settings-menu-item.active,
.settings-menu-item:hover {
  background: var(--bg-secondary);
  border-color: rgba(var(--bs-primary-rgb), 0.18);
  transform: translateY(-1px);
}

.settings-menu-leading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.settings-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-soft) 56%, var(--card-bg));
  color: var(--accent-strong);
  flex: 0 0 auto;
}

.settings-menu-icon i,
.settings-menu-trailing i {
  font-size: 17px;
}

.settings-menu-copy {
  min-width: 0;
}

.settings-menu-trailing {
  color: var(--text-secondary);
  flex: 0 0 auto;
}

.settings-menu-item i {
  color: var(--text-secondary);
}

.settings-menu-item-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 70%, var(--accent-soft)), var(--card-bg));
  border-color: rgba(var(--bs-primary-rgb), 0.18);
}

.settings-menu-title,
.settings-panel-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.settings-menu-sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.settings-profile-panel {
  padding: 18px;
}

.settings-panel-title {
  margin-bottom: 16px;
}

.settings-detail-panel {
  display: grid;
  gap: 16px;
}

.settings-detail-head,
.appearance-page-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.settings-detail-back,
.appearance-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text-secondary);
}

.settings-detail-card,
.settings-placeholder-card {
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-bg), var(--panel-bg));
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.settings-placeholder-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.settings-placeholder-copy {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.theme-settings-panel {
  padding: 18px;
}

.theme-panel-group + .theme-panel-group {
  margin-top: 20px;
}

.theme-panel-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.theme-panel-sub {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.theme-panel-label {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.theme-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.theme-preset-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e6ebf2;
  border-radius: 22px;
  background: #ffffff;
  text-align: left;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.theme-preset-card:hover {
  transform: translateY(-1px);
  border-color: #d4deea;
}

.theme-preset-card.active {
  border-color: var(--accent-color);
  box-shadow:
    0 0 0 1px rgba(var(--bs-primary-rgb), 0.12),
    0 14px 28px rgba(var(--bs-primary-rgb), 0.12);
}

.theme-preset-status {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.theme-preset-card.active .theme-preset-status {
  opacity: 1;
  transform: translateY(0);
}

.theme-preset-preview {
  display: grid;
  gap: 12px;
  min-height: 176px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.theme-preview-appbar {
  display: block;
  height: 12px;
  border-radius: 999px;
  opacity: 0.92;
}

.theme-preview-content {
  display: grid;
  gap: 8px;
}

.theme-preview-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.theme-preview-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.theme-preview-body {
  font-size: 14px;
  line-height: 1.6;
}

.theme-preview-meta {
  font-size: 12px;
}

.theme-preview-chip {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.theme-preview-input {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 12px;
  border: 1px solid transparent;
}

.theme-preset-copy {
  display: grid;
  gap: 4px;
}

.theme-preset-name {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.theme-preset-desc {
  font-size: 12px;
  line-height: 1.55;
  color: #6b7280;
}

.theme-preset-preview-classic {
  background: linear-gradient(180deg, #f8fbff, #eff4fb);
  color: #162233;
}

.theme-preset-preview-classic .theme-preview-appbar {
  background: #d7e4fb;
}

.theme-preset-preview-classic .theme-preview-kicker,
.theme-preset-preview-classic .theme-preview-meta {
  color: #6d7d92;
}

.theme-preset-preview-classic .theme-preview-chip {
  background: #dbe7ff;
  color: #2450a5;
}

.theme-preset-preview-classic .theme-preview-input {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(130, 150, 180, 0.18);
  color: #5d6d82;
}

.theme-preset-preview-bright {
  background: linear-gradient(180deg, #f6fcff, #ebf7fb);
  color: #112633;
}

.theme-preset-preview-bright .theme-preview-appbar {
  background: #d4edf1;
}

.theme-preset-preview-bright .theme-preview-kicker,
.theme-preset-preview-bright .theme-preview-meta {
  color: #65818f;
}

.theme-preset-preview-bright .theme-preview-chip {
  background: #d8f0f4;
  color: #19636f;
}

.theme-preset-preview-bright .theme-preview-input {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(119, 153, 165, 0.16);
  color: #5e7887;
}

.theme-preset-preview-night {
  background: linear-gradient(180deg, #121a2a, #182336);
  color: #eef3fb;
}

.theme-preset-preview-night .theme-preview-appbar {
  background: rgba(255, 255, 255, 0.12);
}

.theme-preset-preview-night .theme-preview-kicker,
.theme-preset-preview-night .theme-preview-meta {
  color: #98a8bf;
}

.theme-preset-preview-night .theme-preview-chip {
  background: rgba(138, 118, 203, 0.26);
  color: #efe8ff;
}

.theme-preset-preview-night .theme-preview-input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.09);
  color: #bbc8da;
}

.theme-preset-preview-clean {
  background: linear-gradient(180deg, #fbfbfc, #f4f6f8);
  color: #1d2430;
}

.theme-preset-preview-clean .theme-preview-appbar {
  background: #e1e6eb;
}

.theme-preset-preview-clean .theme-preview-kicker,
.theme-preset-preview-clean .theme-preview-meta {
  color: #7a8391;
}

.theme-preset-preview-clean .theme-preview-chip {
  background: #e2f0e7;
  color: #2d6f45;
}

.theme-preset-preview-clean .theme-preview-input {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(125, 135, 148, 0.16);
  color: #66707d;
}

.theme-accent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.theme-accent-dot {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.18);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.theme-accent-dot:hover {
  transform: translateY(-1px) scale(1.03);
}

.theme-accent-dot.active {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.92),
    0 0 0 5px rgba(var(--bs-primary-rgb), 0.16),
    0 10px 18px rgba(15, 23, 42, 0.1);
}

.theme-accent-dot[data-theme-accent="blue"] { background: #4c84ff; }
.theme-accent-dot[data-theme-accent="red"] { background: #de6675; }
.theme-accent-dot[data-theme-accent="orange"] { background: #db8a4d; }
.theme-accent-dot[data-theme-accent="yellow"] { background: #cda43d; }
.theme-accent-dot[data-theme-accent="green"] { background: #58a977; }
.theme-accent-dot[data-theme-accent="cyan"] { background: #4aa7b4; }
.theme-accent-dot[data-theme-accent="purple"] { background: #8a76cb; }
.theme-accent-dot[data-theme-accent="pink"] { background: #d470a0; }

.theme-toggle-list {
  display: grid;
  gap: 10px;
}

.theme-toggle-item,
.theme-entry-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--card-bg);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.theme-entry-btn {
  color: inherit;
  text-align: left;
}

.theme-toggle-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.theme-toggle-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.theme-entry-btn i {
  font-size: 14px;
  color: var(--text-secondary);
}

.theme-toggle-item .form-check-input {
  width: 42px;
  height: 24px;
  margin: 0;
  border: 0;
  background-color: color-mix(in srgb, var(--border-color) 84%, var(--panel-bg));
  box-shadow: none;
}

.theme-toggle-item .form-check-input:checked {
  background-color: var(--accent-color);
}

.theme-toggle-item .form-check-input:focus {
  box-shadow: 0 0 0 0.18rem rgba(var(--bs-primary-rgb), 0.18);
}

.appearance-live-preview {
  padding: 6px 0 0;
}

.appearance-live-card {
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--card-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.appearance-live-top,
.appearance-live-composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.appearance-live-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.appearance-live-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-secondary);
}

.appearance-live-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 700;
}

.appearance-live-bubbles {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.appearance-live-bubble {
  max-width: 76%;
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.55;
}

.appearance-live-bubble-in {
  background: var(--message-incoming-bg);
  color: var(--message-incoming-text);
  border: 1px solid var(--border-color);
}

.appearance-live-bubble-out {
  margin-left: auto;
  background: var(--message-outgoing-bg);
  color: var(--message-outgoing-text);
}

.appearance-live-input {
  flex: 1 1 auto;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 13px;
}

.appearance-live-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--accent-color);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  #profileView.profile-view:not(.d-none) {
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  }

  .theme-preset-grid {
    grid-template-columns: 1fr;
  }

  .theme-preset-preview {
    min-height: 160px;
  }

  .appearance-page-head {
    flex-direction: column;
    gap: 10px;
  }
}

/* ============================
   Global Theme Consistency
============================ */

html,
body,
#appRoot,
#mainContainer,
.app-shell,
.main-card,
.main-card > .card-body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.sidebar-card,
.main-card,
.conversation-pane,
.chat-pane,
.contacts-shell,
.contacts-fixed-zone,
.contacts-friend-groups,
.contacts-new-friends-panel,
.friend-profile-info,
.friend-request-item,
.profile-hero-card,
.profile-form-card,
.settings-menu-panel,
.settings-profile-panel,
.settings-detail-card,
.settings-placeholder-card,
.theme-settings-panel,
.history-photo-item,
.image-compose-card,
.call-panel-card {
  background: var(--panel-bg);
  color: var(--text-primary);
  border-color: var(--border-color) !important;
}

.conversation-list,
.message-list,
.chat-empty-state,
.contacts-group-title,
.contacts-fixed-item,
.contacts-friend-item,
.contacts-request-tabs,
.contacts-request-tab,
.contacts-search-group .input-group-text,
.contacts-local-search-btn,
.contacts-plus-btn,
.settings-menu-item,
.settings-detail-back,
.appearance-back-btn {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color) !important;
}

.contacts-fixed-item:hover,
.contacts-friend-item:hover,
.contacts-local-search-btn:hover,
.contacts-plus-btn:hover,
.settings-menu-item:hover,
.settings-menu-item.active {
  background: color-mix(in srgb, var(--bg-secondary) 70%, var(--accent-soft));
}

#mainContainer .form-control,
#mainContainer .form-select,
#mainContainer textarea.form-control {
  background: var(--input-bg);
  color: var(--input-text);
  border-color: var(--border-color);
}

#mainContainer .form-control::placeholder,
#mainContainer .form-select::placeholder,
#mainContainer textarea.form-control::placeholder {
  color: var(--placeholder-color);
}

#mainContainer .input-group-text,
#mainContainer .form-label,
#mainContainer .small,
#mainContainer .text-secondary,
#mainContainer .text-muted {
  color: var(--text-secondary) !important;
}

#mainContainer h1,
#mainContainer h2,
#mainContainer h3,
#mainContainer h4,
#mainContainer h5,
#mainContainer h6,
#mainContainer .conversation-name,
#mainContainer .contacts-title,
#mainContainer .settings-menu-title,
#mainContainer .theme-panel-title,
#mainContainer .settings-placeholder-title,
#mainContainer .appearance-live-name {
  color: var(--text-primary);
}

#mainContainer .btn-secondary,
#mainContainer .btn-outline-secondary,
#mainContainer .btn-light {
  background: color-mix(in srgb, var(--bg-secondary) 72%, var(--panel-bg));
  color: var(--text-primary);
  border-color: var(--border-color);
}

#mainContainer .btn-primary,
#mainContainer .btn-success {
  color: var(--text-on-accent);
}

.contacts-request-tabs,
.tg-filter-tabs {
  background: color-mix(in srgb, var(--bg-secondary) 78%, var(--panel-bg));
}

.contacts-request-tab.active,
.tg-filter-tab.active,
.mobile-tab.active,
.mobile-drawer-link.active {
  background: color-mix(in srgb, var(--card-bg) 70%, var(--accent-soft));
  color: var(--text-primary);
}

.theme-preset-card {
  background: var(--card-bg);
  border-color: var(--border-color);
}

.theme-preset-name,
.theme-preset-desc {
  color: var(--text-primary);
}

.theme-preset-desc,
.appearance-live-sub,
.settings-placeholder-copy,
.settings-menu-sub,
.theme-toggle-sub {
  color: var(--text-secondary);
}

[data-bs-theme="dark"] .theme-preset-card {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

[data-bs-theme="dark"] .theme-preset-status {
  background: rgba(15, 23, 42, 0.72);
  color: #f8fbff;
}

[data-bs-theme="dark"] .conversation-item-btn,
[data-bs-theme="dark"] .contacts-fixed-item,
[data-bs-theme="dark"] .contacts-friend-item,
[data-bs-theme="dark"] .settings-menu-item,
[data-bs-theme="dark"] .history-photo-item {
  background: color-mix(in srgb, var(--panel-bg) 84%, var(--bg-secondary));
}

[data-bs-theme="dark"] .message-list,
[data-bs-theme="dark"] .chat-empty-state,
[data-bs-theme="dark"] .chat-pane,
[data-bs-theme="dark"] .conversation-pane {
  background-color: var(--bg-secondary);
}

/* Final dark theme polish for conversation header and welcome state */
[data-bs-theme="dark"] .tg-conversation-header {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 92%, #ffffff 8%), var(--panel-bg));
  border-bottom-color: color-mix(in srgb, var(--border-color) 82%, #ffffff 18%) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}

[data-bs-theme="dark"] .tg-conversation-header h6 {
  color: var(--text-primary) !important;
  letter-spacing: 0.01em;
}

[data-bs-theme="dark"] .tg-search-wrap {
  background: color-mix(in srgb, var(--panel-bg) 62%, var(--bg-secondary));
  border-color: color-mix(in srgb, var(--border-color) 76%, #ffffff 24%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .tg-search-wrap .input-group-text {
  background: transparent;
  color: var(--text-secondary);
}

[data-bs-theme="dark"] .tg-search-wrap .form-control {
  color: var(--text-primary);
}

[data-bs-theme="dark"] .tg-search-wrap .form-control::placeholder {
  color: var(--placeholder-color);
}

[data-bs-theme="dark"] .tg-filter-tabs {
  background: color-mix(in srgb, var(--panel-bg) 58%, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--border-color) 78%, #ffffff 22%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

[data-bs-theme="dark"] .tg-filter-tab {
  color: var(--text-secondary);
}

[data-bs-theme="dark"] .tg-filter-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .tg-filter-tab.active {
  background: color-mix(in srgb, var(--card-bg) 72%, var(--accent-soft));
  color: var(--text-primary);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .tg-create-btn {
  background: color-mix(in srgb, var(--panel-bg) 68%, var(--bg-secondary));
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--border-color) 76%, #ffffff 24%);
}

[data-bs-theme="dark"] .tg-create-btn:hover {
  background: color-mix(in srgb, var(--card-bg) 72%, var(--accent-soft));
  color: var(--text-primary);
}

[data-bs-theme="dark"] .chat-empty-state {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.035), transparent 38%),
    var(--bg-secondary);
}

[data-bs-theme="dark"] .chat-empty-icon {
  background: color-mix(in srgb, var(--panel-bg) 74%, var(--card-bg));
  color: var(--text-secondary);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 36px rgba(0, 0, 0, 0.24);
}

[data-bs-theme="dark"] .chat-empty-title {
  color: #f3f7fc;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.24);
}

[data-bs-theme="dark"] .chat-empty-sub {
  color: #aab8ca;
}

/* Dark theme polish: icon colors, contacts clarity, auth surfaces */
[data-bs-theme="dark"] .tg-rail-btn[data-view="messagesView"] .tg-rail-icon,
[data-bs-theme="dark"] .mobile-tab[data-view="messagesView"] i,
[data-bs-theme="dark"] .chat-empty-icon i,
[data-bs-theme="dark"] .settings-menu-item[data-settings-section="profile"] .settings-menu-icon i,
[data-bs-theme="dark"] .settings-menu-item[data-settings-section="appearance"] .settings-menu-icon i {
  color: #7eb6ff;
}

[data-bs-theme="dark"] .tg-rail-btn[data-view="friendsView"] .tg-rail-icon,
[data-bs-theme="dark"] .mobile-tab[data-view="friendsView"] i,
[data-bs-theme="dark"] .contacts-fixed-item .contacts-fixed-icon.text-bg-success i,
[data-bs-theme="dark"] .settings-menu-item[data-settings-section="notifications"] .settings-menu-icon i {
  color: #63d394;
}

[data-bs-theme="dark"] .tg-rail-btn[data-view="groupsView"] .tg-rail-icon,
[data-bs-theme="dark"] .contacts-fixed-item .contacts-fixed-icon.text-bg-primary i,
[data-bs-theme="dark"] .contacts-plus-btn i,
[data-bs-theme="dark"] .tg-create-btn i,
[data-bs-theme="dark"] #uploadImageBtn,
[data-bs-theme="dark"] .settings-menu-item[data-settings-section="security"] .settings-menu-icon i {
  color: #ffb15c;
}

[data-bs-theme="dark"] .tg-rail-btn[data-view="profileView"] .tg-rail-icon,
[data-bs-theme="dark"] .settings-menu-item[data-settings-section="privacy"] .settings-menu-icon i,
[data-bs-theme="dark"] .settings-menu-item[data-settings-section="about"] .settings-menu-icon i {
  color: #b497ff;
}

[data-bs-theme="dark"] .tg-search-wrap .bi-search,
[data-bs-theme="dark"] .contacts-search-group .bi-search,
[data-bs-theme="dark"] .appearance-back-btn i,
[data-bs-theme="dark"] .settings-detail-back i,
[data-bs-theme="dark"] .settings-menu-trailing i,
[data-bs-theme="dark"] .image-compose-close-btn i,
[data-bs-theme="dark"] #chatGroupMenuBtn,
[data-bs-theme="dark"] #loadMoreBtn,
[data-bs-theme="dark"] .chat-more-btn,
[data-bs-theme="dark"] .chat-more-menu .dropdown-item i {
  color: #c4d0df;
}

[data-bs-theme="dark"] #emojiToggleBtn,
[data-bs-theme="dark"] #voiceCallBtn,
[data-bs-theme="dark"] #videoCallBtn {
  color: #d7e3f2;
}

[data-bs-theme="dark"] #emojiToggleBtn:hover,
[data-bs-theme="dark"] #voiceCallBtn:hover,
[data-bs-theme="dark"] #videoCallBtn:hover {
  color: #ffffff;
}

[data-bs-theme="dark"] .contacts-topbar,
[data-bs-theme="dark"] .contacts-local-search-wrap,
[data-bs-theme="dark"] .contacts-fixed-zone,
[data-bs-theme="dark"] .contacts-new-friends-panel,
[data-bs-theme="dark"] #addFriendPanel {
  background: transparent;
}

[data-bs-theme="dark"] .contacts-fixed-item {
  background: color-mix(in srgb, var(--panel-bg) 82%, var(--bg-secondary));
  border-color: color-mix(in srgb, var(--border-color) 76%, #ffffff 24%);
}

[data-bs-theme="dark"] .contacts-fixed-item:hover,
[data-bs-theme="dark"] .contacts-friend-item:hover {
  background: color-mix(in srgb, var(--panel-bg) 66%, var(--accent-soft));
}

[data-bs-theme="dark"] .contacts-fixed-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 18px rgba(0, 0, 0, 0.22);
}

[data-bs-theme="dark"] .contacts-fixed-item .contacts-fixed-icon.text-bg-primary {
  background: linear-gradient(180deg, #ffb96e, #f18b36) !important;
}

[data-bs-theme="dark"] .contacts-fixed-item .contacts-fixed-icon.text-bg-success {
  background: linear-gradient(180deg, #71dfa5, #33b36f) !important;
}

[data-bs-theme="dark"] .contacts-fixed-label,
[data-bs-theme="dark"] .contacts-title,
[data-bs-theme="dark"] .contacts-group-title,
[data-bs-theme="dark"] #friendToolsPanel h6,
[data-bs-theme="dark"] #addFriendPanel h6 {
  color: #eef4fb;
}

[data-bs-theme="dark"] .contacts-group-title,
[data-bs-theme="dark"] .contacts-friend-item .small,
[data-bs-theme="dark"] .contacts-request-tab,
[data-bs-theme="dark"] .contacts-search-results .list-group-item,
[data-bs-theme="dark"] .contacts-new-friends-panel .small {
  color: #b2bfd0;
}

[data-bs-theme="dark"] .contacts-fixed-item,
[data-bs-theme="dark"] .contacts-friend-item,
[data-bs-theme="dark"] .contacts-request-tabs,
[data-bs-theme="dark"] .contacts-search-group,
[data-bs-theme="dark"] .contacts-new-friends-panel,
[data-bs-theme="dark"] #addFriendPanel {
  border-color: color-mix(in srgb, var(--border-color) 82%, #ffffff 18%) !important;
}

[data-bs-theme="dark"] #authContainer {
  background:
    radial-gradient(circle at top, rgba(var(--bs-primary-rgb), 0.16), transparent 34%),
    radial-gradient(circle at bottom left, rgba(92, 214, 146, 0.11), transparent 28%),
    var(--bg-primary);
}

[data-bs-theme="dark"] .auth-card {
  background: color-mix(in srgb, var(--panel-bg) 90%, var(--bg-secondary));
  border-color: color-mix(in srgb, var(--border-color) 78%, #ffffff 22%);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] #authContainer .card-body h2,
[data-bs-theme="dark"] #authContainer .form-label,
[data-bs-theme="dark"] #authContainer .form-check-label,
[data-bs-theme="dark"] #authContainer .text-center,
[data-bs-theme="dark"] #authContainer .small {
  color: #edf3fb !important;
}

[data-bs-theme="dark"] #authContainer .text-secondary,
[data-bs-theme="dark"] #authContainer .form-check-label.small.text-secondary {
  color: #b2bfd0 !important;
}

[data-bs-theme="dark"] #authContainer .form-control {
  background: color-mix(in srgb, var(--input-bg) 86%, var(--panel-bg));
  color: #eef4fb;
  border-color: color-mix(in srgb, var(--border-color) 76%, #ffffff 24%);
}

[data-bs-theme="dark"] #authContainer .form-control::placeholder {
  color: #94a4b8;
}

[data-bs-theme="dark"] #authContainer .form-check-input {
  background-color: color-mix(in srgb, var(--input-bg) 82%, var(--panel-bg));
  border-color: color-mix(in srgb, var(--border-color) 76%, #ffffff 24%);
}

[data-bs-theme="dark"] #authContainer .form-check-input:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

[data-bs-theme="dark"] #authContainer a,
[data-bs-theme="dark"] #authContainer .btn-link {
  color: #9fc7ff;
}

[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .small,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-text,
[data-bs-theme="dark"] .modal-body .small,
[data-bs-theme="dark"] .dropdown-menu .small,
[data-bs-theme="dark"] .list-group-item .small {
  color: #b2bfd0 !important;
}

[data-bs-theme="dark"] .input-group-text,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-danger {
  color: #d7e3f2;
}

/* Chat home and contacts refresh */
.chat-home-topbar,
.contacts-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.chat-home-topbar-side {
  display: block;
  width: 40px;
  height: 40px;
}

.chat-home-title,
.contacts-title {
  text-align: left;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-primary);
}

.chat-home-action,
.contacts-sort-btn,
.contacts-plus-btn {
  min-width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--panel-bg) 78%, var(--bg-secondary));
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: none;
}

.contacts-sort-btn {
  justify-self: start;
  width: auto;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
}

.chat-home-action {
  justify-self: end;
}

.contacts-plus-btn {
  justify-self: end;
}

.chat-home-menu,
.contacts-sort-menu {
  min-width: 176px;
  padding: 8px;
  border-radius: 18px;
}

.chat-home-menu .dropdown-item,
.contacts-sort-menu .dropdown-item {
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
}

.tg-conversation-header {
  padding: 14px 14px 10px !important;
}

.conversation-home-search {
  margin-top: 12px;
}

#messagesView .conversation-home-search .input-group {
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel-bg) 76%, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
}

#messagesView .conversation-home-search .input-group-text,
#messagesView .conversation-home-search .form-control {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#messagesView .conversation-home-search .input-group-text {
  padding-left: 14px;
  color: var(--text-secondary);
}

#messagesView .conversation-home-search .form-control {
  padding: 11px 14px 11px 4px;
  color: var(--text-primary);
}

#messagesView .conversation-home-search .form-control::placeholder {
  color: var(--text-muted);
}

.tg-filter-tabs {
  width: 100%;
}

.tg-filter-tab {
  flex: 1 1 0;
  text-align: center;
}

.conversation-list {
  padding: 6px 8px 12px;
}

.conversation-item-btn {
  position: relative;
  margin-bottom: 2px;
  padding: 12px 10px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
}

.conversation-item-btn:hover {
  background: color-mix(in srgb, var(--card-bg) 70%, transparent) !important;
}

.conversation-item-btn.active,
.conversation-item-btn.active.tg-pinned {
  background: color-mix(in srgb, var(--card-bg) 78%, var(--accent-soft)) !important;
  border-color: transparent !important;
}

.conversation-item {
  gap: 12px;
}

.conversation-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.conversation-name {
  font-size: 15px;
  font-weight: 700;
}

.conversation-preview {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.conversation-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.unread-dot {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 10px;
}

.conversation-empty-hint {
  padding: 22px 16px;
  text-align: center;
}

.conversation-empty-title {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
}

.conversation-empty-copy {
  margin-top: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.conversation-flag {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1;
}

.contacts-shell {
  border-radius: 24px !important;
}

.contacts-local-search-wrap {
  display: block !important;
  margin-bottom: 12px !important;
}

.contacts-search-group {
  min-height: 44px;
  border-radius: 14px;
  overflow: hidden;
}

.contacts-fixed-zone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.contacts-fixed-item {
  min-height: 56px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  gap: 12px;
  justify-content: flex-start;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.contacts-fixed-item:last-child {
  border-bottom: 0;
}

.contacts-fixed-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 16px;
}

.contacts-fixed-label {
  font-size: 15px;
  font-weight: 700;
}

.contacts-friend-groups {
  border: 0;
  background: transparent;
}

.contacts-group-title {
  padding: 14px 8px 8px;
  background: transparent;
  border-top: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.contacts-friend-item {
  margin-bottom: 2px;
  padding: 12px 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
}

.contacts-friend-item:first-of-type {
  border-top: 0;
}

.contacts-friend-item:hover {
  background: color-mix(in srgb, var(--card-bg) 74%, transparent);
}

.contacts-friend-avatar {
  border-radius: 50%;
}

.contacts-friend-sub {
  color: var(--text-secondary);
}

.contacts-friend-status {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.contacts-friend-status.online {
  color: var(--text-secondary);
}

.contacts-friend-chevron {
  color: var(--text-muted);
}

#friendToolsPanel,
#addFriendPanel {
  border-top: 0 !important;
  padding-top: 6px !important;
  margin-top: 10px !important;
}

#friendToolsPanel .list-group-item,
#addFriendPanel .list-group-item,
.friend-request-item,
.contacts-search-results .list-group-item {
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  margin-bottom: 4px;
}

#groupsView {
  padding: 18px 18px 16px;
}

.groups-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.groups-page-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--text-primary);
}

.groups-page-action {
  min-width: 44px;
  height: 44px;
  border-radius: 14px;
  padding: 0 14px;
}

#groupList {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.groups-list-item {
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  padding: 12px 10px !important;
}

.groups-list-item:hover {
  background: color-mix(in srgb, var(--card-bg) 74%, transparent) !important;
}

.groups-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.groups-list-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.group-avatar {
  border-radius: 50%;
}

.groups-list-copy {
  min-width: 0;
}

.groups-list-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.groups-list-meta {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.groups-list-side {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.groups-owner-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.groups-manage-btn {
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 12px;
}

.groups-empty-hint {
  padding: 20px 8px;
  color: var(--text-muted);
  font-size: 13px;
}

.contacts-friend-avatar {
  width: 46px;
  height: 46px;
}

.contacts-friend-name {
  font-size: 15px;
  font-weight: 700;
}

.contacts-friend-sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.contacts-friend-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
}

.contacts-friend-chevron {
  font-size: 15px;
}

[data-bs-theme="dark"] .chat-home-action,
[data-bs-theme="dark"] .contacts-sort-btn,
[data-bs-theme="dark"] .contacts-plus-btn,
[data-bs-theme="dark"] .contacts-search-group,
[data-bs-theme="dark"] .conversation-item-btn,
[data-bs-theme="dark"] .contacts-fixed-item,
[data-bs-theme="dark"] .contacts-friend-item {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 30px rgba(0, 0, 0, 0.16);
}

[data-bs-theme="dark"] .chat-home-menu .dropdown-item,
[data-bs-theme="dark"] .contacts-sort-menu .dropdown-item {
  color: var(--text-primary);
}

[data-bs-theme="dark"] .chat-home-menu .dropdown-item:hover,
[data-bs-theme="dark"] .contacts-sort-menu .dropdown-item:hover,
[data-bs-theme="dark"] .contacts-sort-menu .dropdown-item.active {
  background: color-mix(in srgb, var(--card-bg) 70%, var(--accent-soft));
}

@media (max-width: 991.98px) {
  .chat-home-topbar,
  .contacts-topbar {
    grid-template-columns: 72px 1fr 72px;
  }

  .contacts-fixed-zone {
    grid-template-columns: 1fr;
  }
}

/* WeChat-like chat home cleanup */
.chat-home-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.chat-home-topbar {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.chat-home-title {
  text-align: left;
  justify-self: start;
  margin-left: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}

.chat-home-action {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-radius: 12px;
  padding: 0;
  border-color: color-mix(in srgb, var(--border-color) 88%, transparent);
  background: color-mix(in srgb, var(--panel-bg) 92%, var(--bg-primary));
}

.chat-home-action i {
  font-size: 16px;
}

.tg-conversation-header {
  padding-bottom: 8px !important;
}

.tg-conversation-header .tg-search-wrap {
  margin-top: 10px;
}

.tg-search-wrap {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.tg-search-wrap .input-group {
  border-radius: 14px;
  background: color-mix(in srgb, var(--card-bg) 82%, var(--panel-bg));
  border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
  overflow: hidden;
}

.tg-search-wrap .input-group-text,
.tg-search-wrap .form-control {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.conversation-list {
  padding: 2px 0 8px;
}

.conversation-item-btn {
  margin-bottom: 0;
  padding: 13px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 42%, transparent) !important;
}

.conversation-item-btn:hover {
  background: color-mix(in srgb, var(--card-bg) 60%, transparent) !important;
}

.conversation-item-btn.active,
.conversation-item-btn.active.tg-pinned {
  background: color-mix(in srgb, var(--accent-soft) 34%, transparent) !important;
  border-color: color-mix(in srgb, var(--border-color) 42%, transparent) !important;
}

.conversation-avatar {
  width: 50px;
  height: 50px;
  border-radius: 16px;
}

.conversation-name {
  font-size: 15px;
  font-weight: 600;
}

.conversation-preview {
  font-size: 13px;
  color: var(--text-secondary);
}

.conversation-time {
  color: var(--text-muted);
}

.unread-dot {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
}

.conversation-empty-hint {
  padding: 22px 16px;
}

.conversation-empty-title {
  display: none;
}

.conversation-empty-copy {
  margin-top: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.chat-empty-state {
  gap: 14px;
}

.chat-empty-icon {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  font-size: 28px;
  opacity: 0.92;
}

.chat-empty-title {
  display: none;
}

.chat-empty-sub {
  max-width: 240px;
  font-size: 14px;
  color: var(--text-secondary);
}

@media (max-width: 991.98px) {
  .chat-home-topbar {
    gap: 10px;
  }

  .chat-home-actions {
    gap: 8px;
  }

  #messagesView .conversation-home-search {
    margin-top: 10px;
  }

  .conversation-item-btn {
    padding: 12px 8px !important;
  }
}

/* Final dark surface unification */
[data-bs-theme="dark"] html,
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] #appRoot,
[data-bs-theme="dark"] #mainContainer,
[data-bs-theme="dark"] .app-shell,
[data-bs-theme="dark"] .main-card,
[data-bs-theme="dark"] .main-card > .card-body,
[data-bs-theme="dark"] .tg-shell,
[data-bs-theme="dark"] .contacts-shell,
[data-bs-theme="dark"] .contacts-shell .card-body,
[data-bs-theme="dark"] #messagesView,
[data-bs-theme="dark"] #friendsView,
[data-bs-theme="dark"] #groupsView,
[data-bs-theme="dark"] #profileView,
[data-bs-theme="dark"] .profile-view,
[data-bs-theme="dark"] .settings-home-shell,
[data-bs-theme="dark"] .settings-detail-card,
[data-bs-theme="dark"] .settings-placeholder-card,
[data-bs-theme="dark"] .settings-profile-panel,
[data-bs-theme="dark"] .theme-settings-panel,
[data-bs-theme="dark"] .appearance-live-card,
[data-bs-theme="dark"] .theme-panel-group,
[data-bs-theme="dark"] .profile-hero-card,
[data-bs-theme="dark"] .profile-form-card,
[data-bs-theme="dark"] #friendToolsPanel,
[data-bs-theme="dark"] #addFriendPanel,
[data-bs-theme="dark"] .contacts-new-friends-panel,
[data-bs-theme="dark"] .friend-profile-info,
[data-bs-theme="dark"] .contacts-main-list,
[data-bs-theme="dark"] .contacts-layout,
[data-bs-theme="dark"] .contacts-friend-groups,
[data-bs-theme="dark"] #friendList,
[data-bs-theme="dark"] #groupList,
[data-bs-theme="dark"] .call-panel-card {
  background: var(--bg-primary) !important;
  color: var(--text-primary);
}

[data-bs-theme="dark"] .conversation-pane,
[data-bs-theme="dark"] .chat-pane,
[data-bs-theme="dark"] .tg-conversation-header,
[data-bs-theme="dark"] #chatHeader,
[data-bs-theme="dark"] #chatComposer,
[data-bs-theme="dark"] #multiSelectBar,
[data-bs-theme="dark"] .chat-empty-state,
[data-bs-theme="dark"] .conversation-list,
[data-bs-theme="dark"] .message-list,
[data-bs-theme="dark"] .contacts-search-group,
[data-bs-theme="dark"] .contacts-request-tabs,
[data-bs-theme="dark"] .contacts-sort-btn,
[data-bs-theme="dark"] .contacts-plus-btn,
[data-bs-theme="dark"] .chat-home-action,
[data-bs-theme="dark"] .chat-home-menu,
[data-bs-theme="dark"] .contacts-sort-menu,
[data-bs-theme="dark"] .chat-more-menu,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .group-info-drawer-panel,
[data-bs-theme="dark"] .image-compose-card,
[data-bs-theme="dark"] .history-photo-item,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .friend-request-item,
[data-bs-theme="dark"] #forwardTargetList .list-group-item,
[data-bs-theme="dark"] #historySearchResultList .list-group-item,
[data-bs-theme="dark"] #historySearchResults .list-group-item,
[data-bs-theme="dark"] #groupMuteListBox .list-group-item,
[data-bs-theme="dark"] .group-member-options .list-group-item {
  background: var(--panel-bg) !important;
  color: var(--text-primary);
  border-color: var(--border-color) !important;
}

[data-bs-theme="dark"] .contacts-fixed-item,
[data-bs-theme="dark"] .contacts-friend-item,
[data-bs-theme="dark"] .conversation-item-btn,
[data-bs-theme="dark"] .settings-menu-item,
[data-bs-theme="dark"] .theme-preset-card,
[data-bs-theme="dark"] .appearance-live-bubble,
[data-bs-theme="dark"] .appearance-live-input,
[data-bs-theme="dark"] .contacts-request-tab.active,
[data-bs-theme="dark"] .tg-filter-tab.active {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

[data-bs-theme="dark"] .contacts-fixed-zone,
[data-bs-theme="dark"] .contacts-group-title,
[data-bs-theme="dark"] .contacts-topbar,
[data-bs-theme="dark"] .contacts-local-search-wrap,
[data-bs-theme="dark"] .chat-tools-row,
[data-bs-theme="dark"] #emojiBar,
[data-bs-theme="dark"] #replyPreviewBar,
[data-bs-theme="dark"] #muteHintBar {
  background: transparent !important;
}

[data-bs-theme="dark"] #messageInput,
[data-bs-theme="dark"] #nicknameInput,
[data-bs-theme="dark"] #signatureInput,
[data-bs-theme="dark"] #loginPhone,
[data-bs-theme="dark"] #loginPassword,
[data-bs-theme="dark"] #registerPhone,
[data-bs-theme="dark"] #registerNickname,
[data-bs-theme="dark"] #registerPassword,
[data-bs-theme="dark"] #registerPasswordConfirm,
[data-bs-theme="dark"] #contactsLocalSearchInput,
[data-bs-theme="dark"] #friendSearchInput,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] textarea.form-control,
[data-bs-theme="dark"] .image-compose-caption-input {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--border-color) !important;
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-select::placeholder,
[data-bs-theme="dark"] textarea.form-control::placeholder,
[data-bs-theme="dark"] #messageInput::placeholder,
[data-bs-theme="dark"] #friendSearchInput::placeholder,
[data-bs-theme="dark"] #contactsLocalSearchInput::placeholder {
  color: var(--placeholder-color) !important;
}

[data-bs-theme="dark"] .contacts-group-title,
[data-bs-theme="dark"] .contacts-friend-sub,
[data-bs-theme="dark"] .conversation-preview,
[data-bs-theme="dark"] .conversation-time,
[data-bs-theme="dark"] .chat-empty-sub,
[data-bs-theme="dark"] .settings-menu-sub,
[data-bs-theme="dark"] .settings-placeholder-copy,
[data-bs-theme="dark"] .appearance-live-sub,
[data-bs-theme="dark"] .theme-preset-desc,
[data-bs-theme="dark"] .theme-toggle-sub,
[data-bs-theme="dark"] .friend-request-meta,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .small,
[data-bs-theme="dark"] .form-text {
  color: var(--text-secondary) !important;
}

[data-bs-theme="dark"] .conversation-name,
[data-bs-theme="dark"] .contacts-title,
[data-bs-theme="dark"] .contacts-fixed-label,
[data-bs-theme="dark"] .contacts-friend-name,
[data-bs-theme="dark"] .chat-empty-title,
[data-bs-theme="dark"] .settings-menu-title,
[data-bs-theme="dark"] .settings-panel-title,
[data-bs-theme="dark"] .theme-panel-title,
[data-bs-theme="dark"] .theme-preset-name,
[data-bs-theme="dark"] .friend-request-name,
[data-bs-theme="dark"] .appearance-live-name,
[data-bs-theme="dark"] #chatTitle,
[data-bs-theme="dark"] #chatSubTitle {
  color: var(--text-primary) !important;
}

[data-bs-theme="dark"] #authContainer,
[data-bs-theme="dark"] #authContainer .row,
[data-bs-theme="dark"] #authContainer .col-lg-5,
[data-bs-theme="dark"] .auth-card,
[data-bs-theme="dark"] #loginPage,
[data-bs-theme="dark"] #registerPage {
  background: var(--bg-primary) !important;
}

[data-bs-theme="dark"] .auth-card .card-body,
[data-bs-theme="dark"] #authContainer .alert,
[data-bs-theme="dark"] #authContainer .form-check,
[data-bs-theme="dark"] #authContainer .text-center,
[data-bs-theme="dark"] #authContainer .small {
  background: transparent !important;
}

[data-bs-theme="dark"] .auth-card {
  background: var(--panel-bg) !important;
}

/* Layout and auth restore */
.chat-layout-row {
  display: flex;
  flex-wrap: nowrap !important;
  min-width: 0;
  overflow-x: auto;
}

#messagesView .conversation-pane {
  flex: 0 0 var(--chat-split-width);
  width: var(--chat-split-width);
  min-width: 280px;
  max-width: 560px;
}

#messagesView .chat-pane {
  flex: 1 1 auto;
  min-width: 320px;
}

.chat-split-handle {
  flex: 0 0 12px;
  width: 12px;
  cursor: col-resize;
  position: relative;
  align-self: stretch;
  background: transparent;
}

.chat-split-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--border-color) 78%, transparent);
  border-radius: 99px;
}

.chat-split-handle:hover::before,
body.chat-split-resizing .chat-split-handle::before {
  background: var(--accent-color);
}

body.chat-split-resizing {
  cursor: col-resize;
  user-select: none;
}

.search-panel-dialog {
  max-width: min(720px, calc(100vw - 32px));
}

#mainContainer > .row.app-shell {
  --bs-gutter-x: 0.5rem;
}

#mainContainer > .row.app-shell > aside {
  padding-right: 4px;
}

#mainContainer > .row.app-shell > main {
  padding-left: 4px;
}

#createGroupBtn[disabled] {
  opacity: 0.72;
  cursor: not-allowed;
}

.search-panel-content {
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
  background: color-mix(in srgb, var(--panel-bg) 96%, var(--bg-primary));
}

.search-panel-header {
  align-items: center;
  gap: 14px;
  border-bottom-color: color-mix(in srgb, var(--border-color) 72%, transparent);
}

.search-panel-input-wrap {
  position: relative;
  flex: 1 1 auto;
}

.search-panel-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 14px;
}

.search-panel-input {
  height: 46px;
  padding-left: 40px;
  border-radius: 14px;
}

.search-panel-body {
  padding-top: 16px;
}

.search-panel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.search-panel-tab {
  border: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
  background: color-mix(in srgb, var(--card-bg) 74%, transparent);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}

.search-panel-tab.active {
  background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent-color) 32%, var(--border-color));
}

.search-panel-results {
  max-height: min(58vh, 520px);
  overflow-y: auto;
  display: grid;
  gap: 8px;
}

.search-result-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border-color) 56%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card-bg) 84%, transparent);
  color: inherit;
  text-align: left;
}

.search-result-item:hover {
  background: color-mix(in srgb, var(--card-bg) 60%, var(--accent-soft));
}

.search-result-avatar,
.search-result-photo-thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
}

.search-result-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.search-result-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.search-result-sub {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--accent-soft) 34%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.search-panel-empty {
  padding: 36px 12px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

.sidebar-card.tg-rail-shell {
  background: linear-gradient(180deg, #101821, #0b121a) !important;
  border-color: #1b2a38 !important;
}

.tg-rail-btn {
  color: #b8c6d8;
}

.tg-rail-btn.active {
  background: color-mix(in srgb, var(--accent-soft) 40%, rgba(255, 255, 255, 0.08));
  color: #ffffff;
}

#chatComposer {
  background: color-mix(in srgb, var(--panel-bg) 86%, var(--bg-secondary)) !important;
}

.chat-tools-row .btn,
#uploadImageBtn,
#sendMessageBtn,
#emojiToggleBtn,
#voiceCallBtn,
#videoCallBtn {
  min-height: 40px;
  font-weight: 600;
}

.chat-tools-row .btn {
  background: color-mix(in srgb, var(--input-bg) 82%, var(--panel-bg));
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.chat-tools-row .btn:hover,
#uploadImageBtn:hover {
  background: color-mix(in srgb, var(--card-bg) 72%, var(--accent-soft));
  color: var(--text-primary);
}

#uploadImageBtn {
  background: color-mix(in srgb, var(--input-bg) 82%, var(--panel-bg));
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

#sendMessageBtn {
  background: var(--accent-color);
  color: var(--text-on-accent);
  border: 1px solid transparent;
}

#sendMessageBtn:hover {
  background: var(--accent-strong);
  color: var(--text-on-accent);
}

#sendMessageBtn:disabled,
.chat-tools-row .btn:disabled,
#uploadImageBtn:disabled {
  opacity: 0.55;
  color: var(--text-secondary);
}

#messageInput {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--border-color) !important;
}

#messageInput::placeholder {
  color: var(--placeholder-color) !important;
}

.contacts-topbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.contacts-search-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.contacts-search-group .form-control {
  min-width: 0;
  flex: 1 1 auto;
}

.contacts-search-group .btn {
  flex: 0 0 auto;
}

@media (max-width: 991.98px) {
  #friendsView {
    padding: 14px;
  }

  .contacts-shell .card-body {
    padding: 14px !important;
  }

  :root {
    --chat-split-width: 320px;
  }

  .chat-split-handle {
    display: none !important;
  }

  #messagesView .chat-layout-row {
    flex-wrap: nowrap;
  }

  #messagesView .conversation-pane {
    min-width: 260px;
  }

  #messagesView .chat-pane {
    min-width: 300px;
  }

  .search-panel-dialog {
    max-width: 100vw;
    margin: 0;
  }

  .search-panel-content {
    min-height: 100dvh;
    border-radius: 0 !important;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .search-panel-results {
    max-height: calc(100dvh - 170px);
  }
}

/* Layout spacing tune */
#mainContainer > .row.app-shell {
  --bs-gutter-x: 0.35rem;
}

#mainContainer > .row.app-shell > aside {
  padding-right: 2px;
}

#mainContainer > .row.app-shell > main {
  padding-left: 2px;
}

.main-card {
  margin-left: 0;
}

.tg-conversation-header {
  padding: 11px 12px 7px !important;
}

.conversation-list {
  padding: 0 4px 8px;
}

.conversation-item-btn {
  padding: 13px 12px !important;
}

@media (max-width: 991.98px) {
  #groupsView {
    padding: 14px 14px calc(56px + env(safe-area-inset-bottom, 0px) + 8px) !important;
    background: var(--bg-primary) !important;
  }

  .groups-page-header {
    margin-bottom: 10px;
  }

  .groups-page-title {
    font-size: 20px;
  }

  .contacts-fixed-item,
  .contacts-friend-item,
  .groups-list-item {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Chat-only surface and spacing fix */
body.main-open #messagesView .conversation-pane,
body.main-open #messagesView .chat-pane,
body.main-open #messagesView .conversation-list,
body.main-open #messagesView .message-list,
body.main-open #messagesView .chat-empty-state {
  background: var(--bg-primary) !important;
}

body.main-open #messagesView .tg-conversation-header,
body.main-open #messagesView #chatHeader,
body.main-open #messagesView #chatComposer {
  background: var(--panel-bg) !important;
  border-color: color-mix(in srgb, var(--border-color) 70%, transparent) !important;
  box-shadow: none !important;
}

body.main-open #messagesView .tg-conversation-header {
  padding: 10px 12px 6px !important;
}

body.main-open #messagesView #chatHeader {
  padding: 12px 14px !important;
}

body.main-open #messagesView #chatComposer {
  padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
}

body.main-open #messagesView .conversation-list {
  padding: 0 4px 8px;
}

body.main-open #messagesView .conversation-item-btn {
  padding: 13px 12px !important;
}

body.main-open .mobile-topbar,
body.main-open .mobile-tabbar {
  background: color-mix(in srgb, var(--panel-bg) 94%, var(--bg-primary)) !important;
  border-color: color-mix(in srgb, var(--border-color) 70%, transparent) !important;
}

/* ============================
   Telegram Official Dark Theme Override
   Scope: visual layer only
   ============================ */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --tg-telegram-bg: #171717;
  --tg-telegram-sidebar: #1e1e1e;
  --tg-telegram-topbar: #212121;
  --tg-telegram-input: #242424;
  --tg-telegram-bubble-out: #267bc4;
  --tg-telegram-bubble-in: #2b2b2b;
  --tg-telegram-text: #f0f0f0;
  --tg-telegram-text-soft: #999999;
  --tg-telegram-danger: #ff4b4b;
  --tg-telegram-line: #333333;
  --tg-telegram-hover: #262626;
  --tg-telegram-elevated: #202020;
  --tg-telegram-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);

  --bg-primary: var(--tg-telegram-bg);
  --bg-secondary: var(--tg-telegram-sidebar);
  --bg-tertiary: var(--tg-telegram-topbar);
  --panel-bg: var(--tg-telegram-sidebar);
  --surface-elevated: var(--tg-telegram-elevated);
  --card-bg: var(--tg-telegram-sidebar);
  --chat-bg: var(--tg-telegram-bg);
  --composer-bg: var(--tg-telegram-topbar);
  --modal-bg: var(--tg-telegram-sidebar);
  --overlay-bg: rgba(0, 0, 0, 0.62);
  --input-bg: var(--tg-telegram-input);
  --border-color: var(--tg-telegram-line);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --accent-color: #267bc4;
  --accent-hover: #2e8adb;
  --accent-strong: #267bc4;
  --accent-soft: rgba(38, 123, 196, 0.18);
  --accent-ghost: rgba(38, 123, 196, 0.1);
  --message-outgoing-bg: var(--tg-telegram-bubble-out);
  --message-incoming-bg: var(--tg-telegram-bubble-in);
  --text-primary: var(--tg-telegram-text);
  --text-secondary: #b2b2b2;
  --text-muted: var(--tg-telegram-text-soft);
  --text-on-accent: #f0f0f0;
  --placeholder-color: #8b8b8b;

  --tg-primary: var(--accent-color);
  --tg-primary-strong: var(--accent-hover);
  --tg-secondary: #5b9fda;
  --tg-accent: #5b9fda;
  --tg-bg: var(--bg-primary);
  --tg-surface: var(--panel-bg);
  --tg-surface-soft: var(--surface-elevated);
  --tg-line: var(--border-color);
  --tg-text: var(--text-primary);
  --tg-text-soft: var(--text-secondary);
  --tg-bubble-in: var(--message-incoming-bg);
  --tg-bubble-out: var(--message-outgoing-bg);
}

html,
body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

body,
body * {
  scrollbar-color: #4a4a4a #1a1a1a;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: #1a1a1a;
}

*::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #5b5b5b;
}

.app-gradient,
#appRoot,
#mainContainer,
.app-shell,
.main-card,
.main-card > .card-body,
.tg-shell,
#messagesView,
#friendsView,
#groupsView,
#profileView,
.chat-pane,
.conversation-pane,
.contacts-shell,
.settings-home-shell,
.settings-detail-card,
.settings-profile-panel,
.theme-settings-panel,
.appearance-live-card,
#friendToolsPanel,
#addFriendPanel,
.contacts-new-friends-panel,
.friend-profile-info,
.search-panel-content,
.search-panel-results,
.chat-empty-state,
.message-list,
.conversation-list {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.main-card,
.sidebar-card,
.auth-card,
.theme-settings-panel,
.settings-detail-card,
.settings-profile-panel,
.profile-hero-card,
.profile-form-card,
#friendToolsPanel,
#addFriendPanel,
.contacts-new-friends-panel,
.friend-profile-info,
.appearance-live-card,
.search-panel-content,
.modal-content,
.dropdown-menu,
.offcanvas,
.offcanvas.mobile-drawer,
.group-info-drawer-panel {
  background: var(--panel-bg) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--tg-telegram-shadow) !important;
  color: var(--text-primary) !important;
}

.auth-card,
.main-card,
.sidebar-card,
.theme-settings-panel,
.settings-detail-card,
.settings-profile-panel,
.profile-hero-card,
.profile-form-card {
  border: 1px solid var(--border-color) !important;
}

.mobile-topbar,
.mobile-tabbar,
.tg-conversation-header,
#chatHeader,
#chatComposer,
.contacts-topbar,
.chat-home-topbar,
.contacts-quick-entry,
.contacts-sort-menu,
.settings-home-header,
.settings-detail-header,
.modal-header,
.modal-footer,
.offcanvas-header {
  background: var(--tg-telegram-topbar) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.sidebar-card.tg-rail-shell,
.tg-conversation-pane,
.contacts-shell .card-body,
.contacts-list-wrap,
.group-list-shell,
.profile-view .profile-form-body,
.profile-view .profile-hero-body {
  background: var(--tg-telegram-sidebar) !important;
}

.conversation-list,
.message-list,
#groupList,
#friendList,
#groupMemberManageList,
#historySearchResultList,
#historyPhotosList,
#forwardTargetList {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
}

.conversation-item-btn,
.contact-list-item,
.contacts-quick-entry-item,
.group-member-preview-item,
.list-group-item,
.search-result-item,
.settings-menu-item,
.theme-preset-card,
.theme-entry-btn,
.theme-toggle-item,
.message-bubble,
.friend-request-item {
  background: transparent !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.conversation-item-btn:hover,
.contact-list-item:hover,
.contacts-quick-entry-item:hover,
.list-group-item:hover,
.settings-menu-item:hover,
.theme-entry-btn:hover,
.theme-toggle-item:hover,
.dropdown-item:hover,
.dropdown-item:focus,
.search-result-item:hover {
  background: var(--tg-telegram-hover) !important;
  color: var(--text-primary) !important;
}

.conversation-item-btn.active,
.conversation-item-btn.active.tg-pinned,
.settings-menu-item.active,
.theme-preset-card.active,
.theme-preset-card.selected,
.tg-filter-tab.active,
.mobile-tab.active,
.tg-rail-btn.active {
  background: rgba(38, 123, 196, 0.18) !important;
  border-color: rgba(38, 123, 196, 0.4) !important;
  color: var(--text-primary) !important;
}

.tg-rail-btn,
.tg-rail-btn-logout,
.mobile-tab,
.mobile-topbar-btn,
.chat-home-action,
.tg-create-btn,
.contacts-sort-btn,
.contacts-add-btn,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-danger,
.btn-outline-warning {
  background: var(--tg-telegram-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.tg-rail-btn:hover,
.tg-rail-btn-logout:hover,
.mobile-tab:hover,
.mobile-topbar-btn:hover,
.chat-home-action:hover,
.tg-create-btn:hover,
.contacts-sort-btn:hover,
.contacts-add-btn:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover {
  background: var(--tg-telegram-hover) !important;
  color: var(--text-primary) !important;
  border-color: #3b3b3b !important;
}

.btn-primary,
.btn-success,
#sendMessageBtn {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: var(--text-on-accent) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-success:hover,
#sendMessageBtn:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.btn:disabled,
button:disabled,
.form-control:disabled,
.form-select:disabled {
  opacity: 0.58 !important;
  cursor: not-allowed !important;
}

.form-control,
.form-select,
textarea.form-control,
input.form-control,
#messageInput,
#conversationSearchInput,
#contactSearchInput,
#friendSearchInput,
#historySearchInput,
#globalSearchInput,
#loginPhone,
#loginPassword,
#regPhone,
#regPassword,
#regPasswordConfirm,
#nicknameInput,
#signatureInput {
  background: var(--tg-telegram-input) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
input.form-control:focus,
#messageInput:focus {
  background: var(--tg-telegram-input) !important;
  border-color: rgba(38, 123, 196, 0.55) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 0 0.14rem rgba(38, 123, 196, 0.22) !important;
}

.form-control::placeholder,
.form-select::placeholder,
textarea.form-control::placeholder,
input.form-control::placeholder,
#messageInput::placeholder {
  color: var(--placeholder-color) !important;
  opacity: 1 !important;
}

.form-label,
.modal-title,
.offcanvas-title,
h1, h2, h3, h4, h5, h6,
.chat-home-title,
.mobile-topbar-title,
.contacts-page-title,
.settings-title,
.theme-panel-title,
#chatTitle,
.tg-conversation-header h5,
.tg-conversation-header h6 {
  color: var(--text-primary) !important;
}

.text-secondary,
.small,
.chat-empty-sub,
.chat-subtitle,
.contact-status,
.conversation-snippet,
.search-result-sub,
.settings-menu-desc,
.theme-panel-sub,
.theme-entry-desc,
#chatSubTitle,
.form-text,
.form-check-label.small.text-secondary {
  color: var(--text-secondary) !important;
}

.text-muted,
.message-meta,
.message-time,
.conversation-time,
.placeholder,
.helper-text,
.search-panel-empty,
.empty-note {
  color: var(--text-muted) !important;
}

.tg-search-wrap,
.contacts-search-group,
.search-panel-box,
.search-panel-input,
.search-panel-tabs,
.contacts-quick-entry,
.theme-entry-btn,
.theme-toggle-item,
.settings-menu-item,
.theme-preset-card,
.messageActionMenu,
.pinned-message-bar,
.chat-image-compose-card {
  background: var(--surface-elevated) !important;
  border-color: var(--border-color) !important;
}

.tg-search-wrap .input-group-text,
.contacts-search-group .input-group-text,
.search-panel-icon {
  background: transparent !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

.tg-search-wrap .bi-search,
.contacts-search-group .bi-search,
.chat-home-action i,
.tg-create-btn i,
.mobile-tab i,
.tg-rail-icon i,
.theme-entry-icon,
.settings-menu-icon,
.contacts-quick-entry-icon i {
  color: inherit !important;
}

.tg-rail-btn[data-view="messagesView"] .tg-rail-icon,
.mobile-tab[data-view="messagesView"] i,
.chat-home-action.search i,
.settings-menu-item[data-settings-section="appearance"] .settings-menu-icon {
  color: #5aa9ff !important;
}

.tg-rail-btn[data-view="friendsView"] .tg-rail-icon,
.mobile-tab[data-view="friendsView"] i,
.contacts-add-btn i,
.contacts-quick-entry-item.new-friends .contacts-quick-entry-icon i {
  color: #63d48f !important;
}

.tg-rail-btn[data-view="groupsView"] .tg-rail-icon,
.mobile-tab[data-view="groupsView"] i,
.chat-home-action.plus i,
.contacts-quick-entry-item.groups .contacts-quick-entry-icon i {
  color: #f3b34a !important;
}

.tg-rail-btn[data-view="profileView"] .tg-rail-icon,
.mobile-tab[data-view="profileView"] i,
.settings-menu-item .settings-menu-icon {
  color: #b089ff !important;
}

#friendReqBadgeDesktop,
#friendReqBadgeMobile,
.tg-rail-badge,
.unread-badge,
.message-unread-badge,
.search-result-badge-danger {
  background: var(--tg-telegram-danger) !important;
  color: #fff !important;
  border: 0 !important;
}

.conversation-avatar,
.tg-rail-avatar,
.chat-header-avatar,
.contact-avatar,
.friend-avatar,
.message-avatar,
.group-avatar {
  border-radius: 999px !important;
  object-fit: cover !important;
}

.message-row {
  gap: 8px;
}

.message-bubble,
.bubble,
.msg-bubble,
.message-content {
  border-radius: 20px !important;
  box-shadow: none !important;
}

.message-outgoing .message-bubble,
.message-outgoing .bubble,
.message-row.outgoing .message-bubble,
.msg-out .msg-bubble {
  background: var(--message-outgoing-bg) !important;
  color: var(--text-on-accent) !important;
}

.message-incoming .message-bubble,
.message-incoming .bubble,
.message-row.incoming .message-bubble,
.msg-in .msg-bubble,
.message-bubble {
  background: var(--message-incoming-bg) !important;
  color: var(--text-primary) !important;
}

.message-outgoing .message-meta,
.message-outgoing .message-time,
.message-row.outgoing .message-time {
  color: rgba(240, 240, 240, 0.72) !important;
}

.message-incoming .message-meta,
.message-incoming .message-time,
.message-row.incoming .message-time {
  color: var(--text-muted) !important;
}

#chatComposer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: var(--tg-telegram-topbar) !important;
}

.chat-tools-row .btn,
#uploadImageBtn,
#emojiToggleBtn,
#voiceCallBtn,
#videoCallBtn {
  background: var(--tg-telegram-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.chat-tools-row .btn:hover,
#uploadImageBtn:hover,
#emojiToggleBtn:hover,
#voiceCallBtn:hover,
#videoCallBtn:hover {
  background: var(--tg-telegram-hover) !important;
  color: var(--text-primary) !important;
}

.chat-empty-state,
#chatEmptyState,
#welcomeState,
.empty-state {
  background: var(--bg-primary) !important;
  color: var(--text-secondary) !important;
}

.chat-empty-icon,
.chat-empty-icon i {
  color: #5aa9ff !important;
  background: rgba(38, 123, 196, 0.14) !important;
}

.chat-empty-title {
  color: var(--text-primary) !important;
}

.conversation-pane {
  width: var(--chat-split-width);
  max-width: var(--chat-split-width);
  flex: 0 0 var(--chat-split-width);
}

.chat-pane {
  flex: 1 1 auto;
}

.chat-layout-row,
#messagesView > .row {
  gap: 0 !important;
}

.chat-split-handle {
  background: var(--border-color) !important;
}

.chat-split-handle:hover,
.chat-split-handle.dragging {
  background: #4a4a4a !important;
}

.mobile-topbar,
.mobile-tabbar {
  backdrop-filter: none !important;
}

.mobile-tab {
  color: var(--text-secondary) !important;
}

.mobile-tab.active {
  color: var(--text-primary) !important;
}

@media (min-width: 992px) {
  #messagesView .chat-layout-row,
  #messagesView > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  #chatSplitHandle {
    display: block !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #chatSplitHandle::before {
    background: rgba(255, 255, 255, 0.14) !important;
  }

  #messagesView .conversation-pane,
  #messagesView .tg-conversation-pane {
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
  }

  #messagesView .conversation-pane.border-end,
  #messagesView .tg-conversation-pane.border-end {
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
}

.contacts-quick-entry-item,
#friendToolsPanel .list-group-item,
#addFriendPanel .list-group-item,
#groupsView .list-group-item,
#friendsView .list-group-item,
#profileView .list-group-item {
  border-bottom: 1px solid var(--border-color) !important;
}

#groupsView,
#friendsView,
#profileView,
#messagesView {
  background: var(--bg-primary) !important;
}

#groupsView .btn,
#friendsView .btn,
#profileView .btn,
#authContainer .btn {
  box-shadow: none !important;
}

#authContainer,
#authContainer .row,
#authContainer .col-12,
#authContainer .col-md-8,
#authContainer .col-lg-6 {
  background: transparent !important;
}

#authContainer .auth-card,
#authContainer .card,
#authContainer .card-body {
  background: var(--panel-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

#authContainer .alert,
#authContainer .form-check,
#authContainer .text-center,
#authContainer .small {
  background: transparent !important;
  color: var(--text-secondary) !important;
}

#authContainer .btn-link,
#authContainer a {
  color: #78b8ff !important;
}

/* Settings/Profile page refinement */
#profileView.profile-view {
  padding: 20px !important;
}

#profileView .row.g-3 {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

#profileView .profile-hero-card,
#profileView .profile-form-card,
#profileView .settings-profile-panel,
#profileView .settings-detail-card,
#profileView .settings-placeholder-card,
#profileView .theme-settings-panel,
#profileView .appearance-live-card {
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

#profileView .profile-hero-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 92%, white 2%), var(--panel-bg)) !important;
  border-radius: 26px !important;
}

#profileView .profile-hero-body {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 28px 24px !important;
  text-align: center;
}

#profileView .avatar-picker-btn {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#profileView .profile-avatar {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

#profileView .avatar-edit-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

#profileView .profile-hero-body small.text-secondary {
  display: inline-block;
  max-width: 220px;
  line-height: 1.6;
  color: var(--text-muted) !important;
}

#profileView .profile-form-card {
  background: var(--panel-bg) !important;
  border-radius: 28px !important;
}

#profileView .profile-form-body {
  padding: 22px 22px 24px !important;
}

#profileView .settings-home-shell {
  gap: 14px;
}

#profileView .settings-header-block {
  margin-bottom: 0;
  padding: 2px 2px 4px;
}

#profileView .profile-section-title,
#profileView .theme-panel-title {
  letter-spacing: -0.02em;
}

#profileView .settings-header-sub,
#profileView .theme-panel-sub,
#profileView .settings-placeholder-copy {
  color: var(--text-muted) !important;
}

#profileView .settings-menu-panel {
  padding: 4px 0;
  border-radius: 22px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#profileView .settings-menu-item {
  min-height: 76px;
  padding: 14px 18px;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

#profileView .settings-menu-item:first-child {
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}

#profileView .settings-menu-item:last-child {
  border-bottom: 0 !important;
  border-bottom-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
}

#profileView .settings-menu-item:hover,
#profileView .settings-menu-item.active {
  background: rgba(255, 255, 255, 0.035) !important;
}

#profileView .settings-menu-item.settings-menu-item-primary {
  background: rgba(var(--bs-primary-rgb), 0.08) !important;
}

#profileView .settings-menu-leading {
  gap: 12px;
}

#profileView .settings-menu-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

#profileView .settings-menu-title,
#profileView .settings-panel-title,
#profileView .settings-placeholder-title {
  font-size: 14px;
  font-weight: 700;
}

#profileView .settings-menu-sub {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

#profileView .settings-menu-trailing,
#profileView .settings-menu-item i {
  color: rgba(255, 255, 255, 0.46) !important;
}

#profileView .settings-profile-panel,
#profileView .settings-detail-card,
#profileView .settings-placeholder-card,
#profileView .theme-settings-panel,
#profileView .appearance-live-card {
  padding: 18px !important;
  border-radius: 22px !important;
  background: color-mix(in srgb, var(--panel-bg) 94%, white 2%) !important;
}

#profileView .settings-detail-head,
#profileView .appearance-page-head {
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}

#profileView .settings-detail-back,
#profileView .appearance-back-btn {
  min-height: 38px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

#profileView .theme-settings-panel .theme-panel-group + .theme-panel-group {
  margin-top: 18px;
}

#profileView .theme-panel-label {
  margin-bottom: 8px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

#profileView .theme-preset-grid {
  gap: 12px;
}

#profileView .theme-preset-card {
  border-radius: 18px;
}

#profileView .appearance-live-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.03)) !important;
}

@media (max-width: 991.98px) {
  #profileView.profile-view {
    padding: 14px 12px calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
  }

  #profileView .profile-hero-body,
  #profileView .profile-form-body {
    padding: 18px !important;
  }

  #profileView .settings-menu-item {
    min-height: 70px;
    padding: 13px 15px;
  }
}

/* Chat light theme visibility */
[data-bs-theme="light"] #chatHeader,
[data-bs-theme="light"] #chatComposer {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(16px);
}

[data-bs-theme="light"] .tg-chat-pane,
[data-bs-theme="light"] #messageList,
[data-bs-theme="light"] .message-list {
  background-color: #eef3f9 !important;
  background-image:
    radial-gradient(circle at 24px 24px, rgba(153, 170, 191, 0.16) 0, rgba(153, 170, 191, 0.16) 1.2px, transparent 1.2px),
    radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.55) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
}

@media (min-width: 681px) {
  [data-bs-theme="light"] #chatSplitHandle::before {
    width: 1px !important;
    background: rgba(97, 113, 135, 0.38) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
  }
}

/* Telegram-like sent/read ticks */
.msg-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.msg-meta-time,
.msg-meta-state {
  display: inline-flex;
  align-items: center;
}

.msg-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

.msg-status-sent {
  color: rgba(240, 240, 240, 0.66);
}

.msg-status-read {
  color: #8fd3ff;
}

.msg-row.me .msg-status-sent {
  color: rgba(247, 251, 255, 0.76);
}

.msg-row.me .msg-status-read {
  color: #d8efff;
}

/* Group profile simplification */
.group-info-drawer-panel {
  width: min(420px, calc(100vw - 24px)) !important;
  border-radius: 26px 0 0 26px !important;
}

.group-info-drawer-header {
  padding: 18px 18px 14px !important;
}

.group-top-actions-btn {
  min-width: 0 !important;
  padding-inline: 12px !important;
}

.group-info-drawer-body {
  display: grid;
  gap: 12px;
  padding: 0 18px 18px !important;
}

.group-manage-summary {
  padding: 2px 2px 8px;
  margin-bottom: 0 !important;
}

.group-manage-section {
  margin-bottom: 0 !important;
  padding: 16px !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--panel-bg) 94%, white 2%) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

.group-manage-section .small.text-secondary,
.group-manage-section .form-label,
.group-manage-meta-section .small.text-secondary {
  color: var(--text-muted) !important;
}

.group-manage-member-preview .btn,
#groupMemberSection .input-group .btn,
#groupSettingsSection .btn {
  min-height: 34px;
}

#groupMemberPreviewList {
  gap: 8px !important;
}

.group-member-preview-item {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#groupMemberSection .border-top {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

#groupMemberManageList {
  border-radius: 14px;
  overflow: hidden;
}

.group-manage-danger-zone {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.group-manage-danger-zone .btn {
  justify-content: center;
}

@media (max-width: 991.98px) {
  .group-info-drawer-panel {
    width: 100% !important;
    border-radius: 0 !important;
  }

  .group-info-drawer-header {
    padding: 14px 14px 12px !important;
  }

  .group-info-drawer-body {
    padding: 0 14px calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
  }

  .group-manage-section {
    padding: 14px !important;
    border-radius: 16px !important;
  }
}

/* Message receipt polish */
.msg-meta {
  gap: 4px;
}

.msg-status {
  margin-left: 1px;
  transform: translateY(0.5px);
}

.msg-status i {
  font-size: 12px;
}

/* Group drawer simplify to current group context */
.group-info-drawer .dropdown-menu #groupTopOpenProfileItem,
.group-info-drawer .dropdown-menu #groupTopEditNameItem,
.group-info-drawer .dropdown-menu #groupTopEditDescriptionItem,
.group-info-drawer .dropdown-menu #groupTopEditNoticeItem,
.group-info-drawer .dropdown-menu #groupTopAvatarItem,
.group-info-drawer .dropdown-menu #groupTopHistorySearchItem,
.group-info-drawer .dropdown-menu #groupTopHistoryPhotosItem {
  display: none !important;
}

.group-info-drawer #groupManageQr {
  display: none !important;
}

.group-info-drawer .group-manage-meta-section > div:last-child {
  display: none !important;
}

.modal-backdrop {
  background: var(--overlay-bg) !important;
}

.modal-backdrop.show {
  opacity: 1 !important;
}

.dropdown-item,
.modal-body,
.modal-footer,
.offcanvas-body {
  color: var(--text-primary) !important;
}

.dropdown-divider,
hr,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--border-color) !important;
}

.search-panel-tab {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border-color: transparent !important;
}

.search-panel-tab.active {
  background: rgba(38, 123, 196, 0.18) !important;
  border-color: rgba(38, 123, 196, 0.35) !important;
  color: var(--text-primary) !important;
}

.pinned-message-bar {
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.pinned-message-accent {
  color: #5aa9ff !important;
}

.pinned-message-clear {
  color: var(--text-secondary) !important;
}

.pinned-message-clear:hover {
  color: var(--text-primary) !important;
}

.messageActionMenu,
#messageActionMenu {
  background: var(--panel-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--tg-telegram-shadow) !important;
}

.messageActionMenu .dropdown-item,
#messageActionMenu .dropdown-item {
  color: var(--text-primary) !important;
}

.messageActionMenu .dropdown-item.text-danger,
#messageActionMenu .dropdown-item.text-danger {
  color: #ff8080 !important;
}

@media (max-width: 991.98px) {
  .mobile-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    padding: 10px 12px !important;
  }

  .mobile-topbar-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 18px;
    line-height: 1.2;
  }

  .mobile-topbar-btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px !important;
  }

  .tg-conversation-header {
    padding: 10px 12px !important;
  }

  .chat-home-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    gap: 8px;
  }

  .chat-home-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-size: 18px;
    line-height: 1.2;
    margin: 0 !important;
  }

  .chat-home-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
  }

  .chat-home-action,
  #conversationSearchFocusBtn,
  #conversationCreateBtn {
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
  }

  #appRoot {
    padding: 0 !important;
  }

  #mainContainer {
    padding: 0 !important;
  }

  .main-card {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    margin: 0 !important;
  }

  .sidebar-card.tg-rail-shell,
  .chat-split-handle {
    display: none !important;
  }

  #messagesView .chat-layout-row,
  #messagesView > .row {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  #messagesView .conversation-pane {
    display: block !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: none !important;
  }

  #messagesView .chat-pane {
    min-width: 0 !important;
    min-width: 100% !important;
    width: 100% !important;
    flex: none !important;
  }

  #messagesView.mobile-chat-active .conversation-pane {
    display: none !important;
  }

  #messagesView.mobile-chat-active .chat-pane {
    display: flex !important;
  }

  .mobile-topbar,
  .mobile-tabbar {
    background: var(--tg-telegram-topbar) !important;
  }

  #chatComposer {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  }
}

@media (min-width: 992px) {
  #messagesView > .chat-layout-row {
    position: relative;
  }

  #messagesView .conversation-pane,
  #messagesView .tg-conversation-pane,
  #messagesView .conversation-pane.border-end,
  #messagesView .tg-conversation-pane.border-end {
    border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04) !important;
  }

  #chatSplitHandle {
    display: block !important;
    width: 12px !important;
    min-width: 12px !important;
    flex: 0 0 12px !important;
    align-self: stretch !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #chatSplitHandle::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 2px !important;
    transform: translateX(-50%) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 991.98px) {
  .mobile-topbar {
    display: grid !important;
    grid-template-columns: minmax(64px, max-content) 1fr minmax(64px, max-content) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .mobile-topbar-title {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    justify-self: center !important;
  }

  .mobile-topbar-btn:first-child {
    justify-self: start !important;
  }

  .mobile-topbar-btn:last-child {
    justify-self: end !important;
  }

  #messagesView .tg-conversation-header {
    padding: 10px 12px !important;
  }

  #messagesView .chat-home-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 10px !important;
  }

  #messagesView .chat-home-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #messagesView .chat-home-actions {
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  #messagesView .chat-home-action,
  #messagesView #conversationSearchFocusBtn,
  #messagesView #conversationCreateBtn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
  }

  #chatSplitHandle,
  #chatSplitHandle::before {
    display: none !important;
  }

  #messagesView .conversation-pane,
  #messagesView .tg-conversation-pane,
  #messagesView .conversation-pane.border-end,
  #messagesView .tg-conversation-pane.border-end,
  #messagesView .chat-pane {
    border-right: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
  }
}

@media (min-width: 768px) {
  #messagesView .chat-layout-row,
  #messagesView > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  #messagesView .conversation-pane,
  #messagesView .tg-conversation-pane {
    display: block !important;
    flex: 0 0 var(--chat-split-width) !important;
    width: var(--chat-split-width) !important;
    min-width: 280px !important;
    max-width: 560px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04) !important;
  }

  #messagesView .conversation-pane.border-end,
  #messagesView .tg-conversation-pane.border-end {
    border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
  }

  #messagesView .chat-pane {
    flex: 1 1 auto !important;
    min-width: 320px !important;
    width: auto !important;
    border-left: 0 !important;
  }

  #chatSplitHandle {
    display: block !important;
    width: 12px !important;
    min-width: 12px !important;
    flex: 0 0 12px !important;
    align-self: stretch !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #chatSplitHandle::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 2px !important;
    transform: translateX(-50%) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 767.98px) {
  #chatSplitHandle,
  #chatSplitHandle::before {
    display: none !important;
  }

  #messagesView .conversation-pane,
  #messagesView .tg-conversation-pane,
  #messagesView .conversation-pane.border-end,
  #messagesView .tg-conversation-pane.border-end,
  #messagesView .chat-pane {
    border-right: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
  }
}

@media (min-width: 681px) {
  #messagesView .chat-layout-row,
  #messagesView > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  #messagesView .conversation-pane,
  #messagesView .tg-conversation-pane {
    display: block !important;
    flex: 0 0 var(--chat-split-width) !important;
    width: var(--chat-split-width) !important;
    min-width: 280px !important;
    max-width: 560px !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }

  #messagesView .conversation-pane.border-end,
  #messagesView .tg-conversation-pane.border-end {
    border-right: 0 !important;
  }

  #messagesView .chat-pane {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 320px !important;
    width: auto !important;
    border-left: 0 !important;
  }

  #chatSplitHandle {
    display: block !important;
    width: 12px !important;
    min-width: 12px !important;
    flex: 0 0 12px !important;
    align-self: stretch !important;
    position: relative !important;
    z-index: 4 !important;
    pointer-events: auto !important;
    touch-action: none !important;
    cursor: col-resize !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #chatSplitHandle::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 2px !important;
    transform: translateX(-50%) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    pointer-events: none !important;
  }
}

@media (max-width: 680.98px) {
  #chatSplitHandle,
  #chatSplitHandle::before {
    display: none !important;
  }

  #messagesView .conversation-pane,
  #messagesView .tg-conversation-pane,
  #messagesView .conversation-pane.border-end,
  #messagesView .tg-conversation-pane.border-end,
  #messagesView .chat-pane {
    border-right: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
  }
}

@media (min-width: 681px) {
  .sidebar-card.tg-rail-shell {
    background: linear-gradient(180deg, #1c1d21 0%, #191a1e 100%) !important;
  }

  .tg-rail-btn,
  .tg-rail-btn-logout {
    color: rgba(240, 240, 240, 0.56) !important;
    background: transparent !important;
    border-color: transparent !important;
  }

  .tg-rail-btn:hover,
  .tg-rail-btn-logout:hover {
    color: rgba(240, 240, 240, 0.78) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
  }

  .tg-rail-btn.active {
    color: rgba(240, 240, 240, 0.92) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
  }

  .tg-rail-btn .tg-rail-icon,
  .tg-rail-btn-logout .tg-rail-icon {
    opacity: 0.82;
    filter: saturate(0.78) brightness(0.92);
  }

  .tg-rail-btn.active .tg-rail-icon {
    opacity: 0.96;
    filter: saturate(0.88) brightness(0.98);
  }
}

@media (max-width: 991.98px) {
  body.mobile-chat-open #mainContainer {
    padding-bottom: 0 !important;
  }

  body.mobile-chat-open #messagesView,
  body.mobile-chat-open #messagesView.mobile-chat-active,
  body.mobile-chat-open #messagesView.mobile-chat-active > .chat-layout-row,
  body.mobile-chat-open #messagesView.mobile-chat-active .chat-pane,
  body.mobile-chat-open #messagesView.mobile-chat-active #messageList {
    min-height: 0 !important;
    height: 100% !important;
  }

  body.mobile-chat-open #messagesView.mobile-chat-active #chatHeader {
    padding: 10px 12px !important;
  }

  body.mobile-chat-open #messagesView.mobile-chat-active #chatHeader .chat-header-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  body.mobile-chat-open #messagesView.mobile-chat-active #chatTitle {
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
  }

  body.mobile-chat-open #messagesView.mobile-chat-active #chatSubTitle {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  body.mobile-chat-open #messagesView.mobile-chat-active #mobileBackToListBtn,
  body.mobile-chat-open #messagesView.mobile-chat-active #mobileChatMoreBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
  }

  body.mobile-chat-open #messagesView.mobile-chat-active #chatGroupMenuWrap,
  body.mobile-chat-open #messagesView.mobile-chat-active #loadMoreBtn {
    display: none !important;
  }

  body.mobile-chat-open #messagesView.mobile-chat-active #chatComposer {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  }
}

@media (min-width: 681px) {
  #messagesView .chat-layout-row,
  #messagesView > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  #messagesView .conversation-pane,
  #messagesView .tg-conversation-pane {
    display: block !important;
    flex: 0 0 var(--chat-split-width) !important;
    width: var(--chat-split-width) !important;
    min-width: 280px !important;
    max-width: 560px !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }

  #chatSplitHandle {
    display: block !important;
    width: 12px !important;
    min-width: 12px !important;
    flex: 0 0 12px !important;
    align-self: stretch !important;
    position: relative !important;
    z-index: 4 !important;
    pointer-events: auto !important;
    touch-action: none !important;
    cursor: col-resize !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #chatSplitHandle::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 2px !important;
    transform: translateX(-50%) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    pointer-events: none !important;
  }
}

@media (max-width: 680.98px) {
  #chatSplitHandle,
  #chatSplitHandle::before {
    display: none !important;
  }
}