/* 登录后聊天壳 — 对齐登录页品牌色 / 玻璃感
 * 全部选择器限定在 #app-container:not(.auth-mode)，避免影响登录页。
 */

/* ---------- A: tokens + shell background ---------- */

#app-container:not(.auth-mode) {
  --clr-primary-accent: #4f6ef7;
  --clr-primary-accent-hover: #3d5ce6;
  --clr-primary-accent-focus-shadow: rgba(79, 110, 247, 0.28);
  --clr-primary-accent-transparent-medium: rgba(79, 110, 247, 0.3);
  --clr-primary-action: #4f6ef7;
  --clr-primary-action-hover: #3d5ce6;
  --clr-secondary-accent: #4f6ef7;
  --clr-primary-light-blue: rgba(255, 255, 255, 0.88);
  --clr-light-blue-accent: #4f6ef7;

  --clr-body-background: #f8f9fd;
  --clr-header-stripe-bg: #4f6ef7;
  --clr-text-primary: #4b5563;
  --clr-text-secondary: #6b7280;
  --clr-text-tertiary: #9ca3af;
  --clr-background-off-white: #ffffff;
  --clr-background-light-gray: #f0f2f8;
  --clr-background-extra-light-gray: #eef1f8;
  --clr-background-blue-gray-50: rgba(248, 249, 253, 0.92);
  --clr-background-blue-gray-75: rgba(79, 110, 247, 0.06);
  --clr-background-blue-gray-100: rgba(79, 110, 247, 0.12);
  --clr-background-blue-gray-300: #4f6ef7;
  --clr-blue-wash-light: rgba(79, 110, 247, 0.08);
  --clr-blue-wash-medium: rgba(79, 110, 247, 0.16);
  --clr-primary-wash: rgba(79, 110, 247, 0.12);
  --clr-indigo-50: rgba(79, 110, 247, 0.1);
  --clr-cyan-50: transparent;
  --clr-menu-item-hover-bg: rgba(79, 110, 247, 0.08);

  /* Received = frosted gray; sent (right) = brand blue */
  --clr-bubble-left-bg: rgba(255, 255, 255, 0.92);
  --clr-bubble-left-bg-flash: rgba(226, 232, 240, 0.95);
  --clr-bubble-right-bg: #4f6ef7;
  --clr-bubble-right-bg-flash: #3d5ce6;
  --clr-bubble-text: #1f2937;
  --clr-bubble-meta-text: #6b7280;
  --clr-bubble-meta-deleted-bg: rgba(79, 110, 247, 0.1);
  --clr-bubble-meta-date-bg: rgba(255, 255, 255, 0.75);
  --clr-bubble-timestamp-text: #94a3b8;
  --clr-bubble-author-text: #64748b;

  --clr-reply-quote-border: #4f6ef7;
  --clr-button-primary-bg: #4f6ef7;
  --clr-button-primary-hover-bg: #3d5ce6;
  --clr-button-secondary-text: #4f6ef7;
  --clr-button-outline-text: #4f6ef7;

  --chat-shell-radius: 1rem;
  --chat-glass: rgba(255, 255, 255, 0.78);
  --chat-glass-border: rgba(255, 255, 255, 0.9);
  --chat-panel-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
}

#app-container:not(.auth-mode).scheme-dark {
  --clr-primary-accent: #6b86ff;
  --clr-primary-accent-hover: #8aa0ff;
  --clr-primary-action: #6b86ff;
  --clr-primary-action-hover: #8aa0ff;
  --clr-secondary-accent: #6b86ff;
  --clr-primary-light-blue: rgba(255, 255, 255, 0.9);
  --clr-light-blue-accent: #8aa0ff;

  --clr-body-background: #12141c;
  --clr-header-stripe-bg: #1a1d2a;
  --clr-bright: #1c1e26;
  --clr-text-primary: #d1d5db;
  --clr-text-secondary: #9ca3af;
  --clr-text-tertiary: #6b7280;
  --clr-background-off-white: #232632;
  --clr-background-light-gray: #1a1d28;
  --clr-background-extra-light-gray: #222632;
  --clr-background-blue-gray-50: rgba(28, 30, 38, 0.92);
  --clr-background-blue-gray-75: rgba(107, 134, 255, 0.1);
  --clr-background-blue-gray-100: rgba(107, 134, 255, 0.18);
  --clr-background-blue-gray-300: #3a4570;
  --clr-blue-wash-light: rgba(107, 134, 255, 0.1);
  --clr-blue-wash-medium: rgba(107, 134, 255, 0.2);
  --clr-primary-wash: rgba(107, 134, 255, 0.14);
  --clr-indigo-50: rgba(107, 134, 255, 0.12);
  --clr-menu-item-hover-bg: rgba(107, 134, 255, 0.12);

  --clr-bubble-left-bg: rgba(40, 44, 56, 0.95);
  --clr-bubble-left-bg-flash: rgba(55, 60, 78, 0.98);
  --clr-bubble-right-bg: #4f6ef7;
  --clr-bubble-right-bg-flash: #6b86ff;
  --clr-bubble-text: #e5e7eb;
  --clr-bubble-meta-text: #9ca3af;
  --clr-bubble-meta-date-bg: rgba(28, 30, 38, 0.8);
  --clr-bubble-timestamp-text: #94a3b8;

  --chat-glass: rgba(28, 30, 38, 0.88);
  --chat-glass-border: rgba(255, 255, 255, 0.08);
  --chat-panel-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

body:has(#app-container:not(.auth-mode)) {
  background-color: #f8f9fd;
  background-image:
    radial-gradient(ellipse 70% 50% at 12% 18%, rgba(79, 110, 247, 0.14), transparent 55%),
    radial-gradient(ellipse 55% 40% at 88% 8%, rgba(125, 160, 255, 0.12), transparent 50%),
    linear-gradient(165deg, #d4e2f8 0%, #f8f9fd 45%, #eef2fb 100%);
  box-shadow: inset 0 8rem #4f6ef7;
}

body:has(#app-container:not(.auth-mode).scheme-dark) {
  background-color: #12141c;
  background-image:
    radial-gradient(ellipse 60% 45% at 15% 10%, rgba(79, 110, 247, 0.22), transparent 55%),
    linear-gradient(165deg, #12141c 0%, #161822 50%, #1a1d28 100%);
  box-shadow: inset 0 8rem #1a1d2a;
}

#app-container:not(.auth-mode) {
  max-width: min(84rem, calc(100% - 1.5rem));
  border-radius: var(--chat-shell-radius);
  border: 1px solid var(--chat-glass-border);
  background: var(--chat-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--chat-panel-shadow);
  overflow: hidden;
}

/* ---------- B: sidepanel + contacts ---------- */

#app-container:not(.auth-mode) #sidepanel {
  background: transparent;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
}

#app-container:not(.auth-mode).scheme-dark #sidepanel {
  border-right-color: rgba(255, 255, 255, 0.06);
}

#app-container:not(.auth-mode) #side-caption-panel,
#app-container:not(.auth-mode) #topic-caption-panel,
#app-container:not(.auth-mode) #info-caption-panel {
  background: #4f6ef7;
  color: #fff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

#app-container:not(.auth-mode).scheme-dark #side-caption-panel,
#app-container:not(.auth-mode).scheme-dark #topic-caption-panel,
#app-container:not(.auth-mode).scheme-dark #info-caption-panel {
  background: linear-gradient(180deg, #3a4570 0%, #2f3858 100%);
}

#app-container:not(.auth-mode) #side-caption-panel a,
#app-container:not(.auth-mode) #topic-caption-panel a,
#app-container:not(.auth-mode) #info-caption-panel a {
  color: rgba(255, 255, 255, 0.88);
}

#app-container:not(.auth-mode) #side-caption-panel :hover,
#app-container:not(.auth-mode) #topic-caption-panel :hover,
#app-container:not(.auth-mode) #info-caption-panel :hover {
  color: #fff;
}

#app-container:not(.auth-mode) #sidepanel-title,
#app-container:not(.auth-mode) .panel-title {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#app-container:not(.auth-mode) .contact-box {
  padding: 0.4rem 0.55rem 0.75rem;
  gap: 0.15rem;
}

#app-container:not(.auth-mode) .contact-box > li {
  border-radius: 0.85rem;
  margin: 0.1rem 0;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
  transition: background-color 0.15s ease;
}

#app-container:not(.auth-mode) .contact-box > li:hover {
  background-color: rgba(79, 110, 247, 0.08);
}

#app-container:not(.auth-mode) .contact-box > li.selected {
  background-color: rgba(79, 110, 247, 0.14);
  box-shadow: inset 0 0 0 1px rgba(79, 110, 247, 0.18);
}

#app-container:not(.auth-mode) .contact-box > li.tpinned {
  background-color: rgba(79, 110, 247, 0.06);
}

#app-container:not(.auth-mode) .contact-box .contact-title {
  font-weight: 550;
  color: #374151;
}

#app-container:not(.auth-mode).scheme-dark .contact-box .contact-title {
  color: #e5e7eb;
}

#app-container:not(.auth-mode) .contact-box .unread,
#app-container:not(.auth-mode) .badge {
  background-color: #4f6ef7;
}

#app-container:not(.auth-mode) #search-query,
#app-container:not(.auth-mode) input[type="search"],
#app-container:not(.auth-mode) .search-box input {
  border-radius: 999px;
}

#app-container:not(.auth-mode) .menu,
#app-container:not(.auth-mode) .dropdown-menu {
  border-radius: 0.85rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

/* ---------- C: messages / bubbles / composer ---------- */

#app-container:not(.auth-mode) #topic-view {
  background: transparent;
}

#app-container:not(.auth-mode) #messages-container {
  background: transparent;
}

#app-container:not(.auth-mode) #messages-panel {
  background: transparent;
}

#app-container:not(.auth-mode) .bubble {
  border-radius: 1rem;
  padding: 0.7rem 0.75rem;
  filter: drop-shadow(0 1px 1.5px rgba(15, 23, 42, 0.12));
}

#app-container:not(.auth-mode) .left .bubble {
  border: 1px solid rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#app-container:not(.auth-mode).scheme-dark .left .bubble {
  border-color: rgba(255, 255, 255, 0.06);
}

#app-container:not(.auth-mode) .right .bubble {
  color: #fff;
}

#app-container:not(.auth-mode) .right .bubble .timestamp,
#app-container:not(.auth-mode) .right .bubble .material-icons,
#app-container:not(.auth-mode) .right .message-meta,
#app-container:not(.auth-mode) .right .bubble a {
  color: rgba(255, 255, 255, 0.85);
}

#app-container:not(.auth-mode) .right .bubble {
  --clr-bubble-timestamp-text: rgba(255, 255, 255, 0.75);
  --clr-bubble-author-text: rgba(255, 255, 255, 0.8);
  --clr-bubble-text: #fff;
}

#app-container:not(.auth-mode) .left .bubble.tip {
  border-bottom-left-radius: 0.2rem;
}

#app-container:not(.auth-mode) .right .bubble.tip {
  border-bottom-right-radius: 0.2rem;
}

#app-container:not(.auth-mode) .meta .bubble.date {
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

#app-container:not(.auth-mode) #send-message-wrapper,
#app-container:not(.auth-mode) #send-message-panel,
#app-container:not(.auth-mode) .accept-invite-panel {
  background: var(--chat-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.04);
}

#app-container:not(.auth-mode) #send-message-panel {
  gap: 0.35rem;
  padding: 0.55rem 0.65rem;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}

#app-container:not(.auth-mode) #sendMessage,
#app-container:not(.auth-mode) #send-message-input {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 1.15rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 0.45rem 0.85rem;
  min-height: 2.6rem;
}

#app-container:not(.auth-mode).scheme-dark #sendMessage,
#app-container:not(.auth-mode).scheme-dark #send-message-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

#app-container:not(.auth-mode) #send-message-panel .material-icons.secondary:hover {
  color: #4f6ef7 !important;
}

#app-container:not(.auth-mode) #composer-attach-panel {
  background: var(--chat-glass);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#app-container:not(.auth-mode) #composer-attach-panel .composer-attach-item .material-icons {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

#app-container:not(.auth-mode).scheme-dark #composer-attach-panel .composer-attach-item .material-icons {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
}

#app-container:not(.auth-mode) .reply-quote,
#app-container:not(.auth-mode) #reply-quote-preview .reply-quote {
  border-left-color: #4f6ef7;
  border-radius: 0.5rem;
}

/* ---------- D: info / settings / empty state ---------- */

#app-container:not(.auth-mode) #info-view {
  background: var(--chat-glass);
  border-left: 1px solid rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#app-container:not(.auth-mode) .info-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem 0.5rem;
  gap: 0.35rem;
}

#app-container:not(.auth-mode) .info-hero-name {
  max-width: 100%;
  margin-top: 0.5rem;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.3;
}

#app-container:not(.auth-mode) .info-hero-channel-icon {
  font-size: 1.1rem;
  vertical-align: middle;
  margin-left: 0.15rem;
  opacity: 0.7;
}

#app-container:not(.auth-mode) .info-hero-subtitle {
  font-size: 0.875rem;
  opacity: 0.65;
}

#app-container:not(.auth-mode) .info-hero-badges {
  margin-top: 0.25rem;
}

#app-container:not(.auth-mode) .info-hero-meta,
#app-container:not(.auth-mode) .info-hero-bio {
  width: 100%;
  max-width: 22rem;
  margin-top: 0.35rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.45;
}

#app-container:not(.auth-mode) .info-hero-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

#app-container:not(.auth-mode) .info-meta-label {
  flex-shrink: 0;
  opacity: 0.55;
  font-size: 0.8125rem;
}

#app-container:not(.auth-mode) .info-hero-bio .info-meta-label {
  display: block;
  margin-bottom: 0.15rem;
}

#app-container:not(.auth-mode) .info-start-chat-wrap {
  width: 100%;
  max-width: 22rem;
  margin: 1rem 0 0.5rem;
  padding: 0;
}

#app-container:not(.auth-mode) button.info-start-chat {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.6rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

#app-container:not(.auth-mode) button.info-start-chat .material-icons {
  font-size: 1.25rem;
}

#app-container:not(.auth-mode) .info-section {
  margin: 0.75rem 0.75rem 0;
  padding: 0.35rem 0;
  border-radius: 0.85rem;
  background: rgba(15, 23, 42, 0.035);
}

#app-container:not(.auth-mode).scheme-dark .info-section {
  background: rgba(255, 255, 255, 0.04);
}

#app-container:not(.auth-mode) .info-section-title {
  padding: 0.55rem 0.9rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.55;
}

#app-container:not(.auth-mode) .info-section-subtitle {
  padding: 0.35rem 0.9rem;
  font-size: 0.8125rem;
  opacity: 0.65;
}

#app-container:not(.auth-mode) .info-nav-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.9rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

#app-container:not(.auth-mode) a.info-nav-row:hover {
  background: rgba(79, 110, 247, 0.06);
}

#app-container:not(.auth-mode) .info-nav-row > .material-icons:first-child {
  font-size: 1.25rem;
  opacity: 0.72;
}

#app-container:not(.auth-mode) .info-nav-label {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 0.95rem;
}

#app-container:not(.auth-mode) .info-nav-chevron {
  font-size: 1.25rem;
  opacity: 0.35;
}

#app-container:not(.auth-mode) .info-nav-toggle {
  cursor: default;
}

#app-container:not(.auth-mode) .info-member-toolbar {
  padding: 0.35rem 0.9rem 0.5rem;
}

#app-container:not(.auth-mode) .info-member-toolbar input[type="search"] {
  width: 100%;
}

#app-container:not(.auth-mode) .info-pending-list {
  padding: 0 0.5rem 0.35rem;
}

#app-container:not(.auth-mode) .info-pending-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.4rem;
}

#app-container:not(.auth-mode) .info-pending-row > .ellipsized {
  flex: 1;
  min-width: 0;
}

#app-container:not(.auth-mode) .perm-summary-section {
  padding: 0.35rem 0.75rem 1rem;
}

#app-container:not(.auth-mode) .perm-summary-section-title {
  padding: 0.35rem 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.55;
}

#app-container:not(.auth-mode) .perm-summary-block {
  margin-bottom: 0.85rem;
  padding: 0.55rem 0.75rem 0.65rem;
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.035);
}

#app-container:not(.auth-mode).scheme-dark .perm-summary-block {
  background: rgba(255, 255, 255, 0.04);
}

#app-container:not(.auth-mode) .perm-summary-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

#app-container:not(.auth-mode) .perm-summary-title {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

#app-container:not(.auth-mode) .perm-summary-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: #4f6ef7;
  text-decoration: none;
}

#app-container:not(.auth-mode) .perm-summary-edit .material-icons {
  font-size: 1.1rem;
}

#app-container:not(.auth-mode) .perm-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#app-container:not(.auth-mode) .perm-summary-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.7rem;
  font-size: 0.9rem;
}

#app-container:not(.auth-mode) .perm-summary-item .material-icons {
  font-size: 1.05rem;
  color: #22a06b;
}

#app-container:not(.auth-mode) .perm-summary-empty {
  font-size: 0.875rem;
  opacity: 0.55;
  padding: 0.15rem 0;
}

#app-container:not(.auth-mode) .permission-editor-panel {
  padding: 0.5rem 0.75rem 1rem;
}

#app-container:not(.auth-mode) table.permission-editor {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.15rem;
}

#app-container:not(.auth-mode) table.permission-editor th {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.55;
  text-align: center;
  padding: 0.25rem 0.35rem;
}

#app-container:not(.auth-mode) table.permission-editor th:first-child {
  text-align: left;
}

#app-container:not(.auth-mode) table.permission-editor td.permission-editor-name {
  font-size: 0.95rem;
  padding: 0.45rem 0.35rem;
  text-align: left;
}

#app-container:not(.auth-mode) table.permission-editor td.checkbox {
  width: 3rem;
  text-align: center;
}

#app-container:not(.auth-mode) .meta .bubble.notice {
  font-size: 0.8125rem;
  line-height: 1.45;
  max-width: 85%;
  padding: 0.4rem 0.85rem;
  text-align: center;
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.55);
}

#app-container:not(.auth-mode).scheme-dark .meta .bubble.notice {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}

#app-container:not(.auth-mode).scheme-dark #info-view {
  border-left-color: rgba(255, 255, 255, 0.06);
}

#app-container:not(.auth-mode) .panel-form,
#app-container:not(.auth-mode) .scrollable-panel,
#app-container:not(.auth-mode) .accordion,
#app-container:not(.auth-mode) .tabbed-panel {
  background: transparent;
}

#app-container:not(.auth-mode) .panel-form-row,
#app-container:not(.auth-mode) .group {
  border-radius: 0.75rem;
}

#app-container:not(.auth-mode) button.primary,
#app-container:not(.auth-mode) .btn.primary,
#app-container:not(.auth-mode) button.blue {
  background-color: #4f6ef7;
  border-radius: 999px;
}

#app-container:not(.auth-mode) button.primary:hover,
#app-container:not(.auth-mode) .btn.primary:hover,
#app-container:not(.auth-mode) button.blue:hover {
  background-color: #3d5ce6;
}

#app-container:not(.auth-mode) button.outline,
#app-container:not(.auth-mode) button.secondary {
  border-radius: 999px;
}

#app-container:not(.auth-mode) #dummy-view {
  background:
    radial-gradient(ellipse 50% 40% at 50% 40%, rgba(79, 110, 247, 0.1), transparent 70%),
    transparent;
  color: #6b7280;
}

#app-container:not(.auth-mode).scheme-dark #dummy-view {
  background:
    radial-gradient(ellipse 50% 40% at 50% 40%, rgba(79, 110, 247, 0.18), transparent 70%),
    transparent;
  color: #9ca3af;
}

#app-container:not(.auth-mode) #dummy-view .logo-view-brand {
  padding: 1.5rem;
  max-width: 18rem;
}

#app-container:not(.auth-mode) #dummy-view .logo-view-name {
  color: #4f6ef7;
  font-size: 1.85rem;
}

#app-container:not(.auth-mode).scheme-dark #dummy-view .logo-view-name {
  color: #8aa0ff;
}

#app-container:not(.auth-mode) #dummy-view .logo-view-hint {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: center;
  color: inherit;
}

#app-container:not(.auth-mode) #dummy-view #logo {
  max-width: min(96px, 26vw);
  max-height: 96px;
  filter: drop-shadow(0 8px 18px rgba(79, 110, 247, 0.2));
}

/* Chat list: All / People / Groups filter (no separate contacts book) */
#app-container:not(.auth-mode) .chat-list-panel {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

#app-container:not(.auth-mode) .chat-list-panel > .contact-box {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

#app-container:not(.auth-mode) .chat-list-filter {
  display: flex;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem 0.35rem;
  flex-shrink: 0;
}

#app-container:not(.auth-mode) .chat-list-filter button {
  border: none;
  background: transparent;
  color: var(--clr-text-secondary, #6b7280);
  font-size: 0.8rem;
  padding: 0.3rem 0.65rem;
  border-radius: 0.45rem;
  cursor: pointer;
}

#app-container:not(.auth-mode) .chat-list-filter button.active {
  background: var(--clr-blue-wash-medium, rgba(79, 110, 247, 0.16));
  color: var(--clr-primary-accent, #4f6ef7);
  font-weight: 600;
}

#app-container:not(.auth-mode) .contacts-shell-tabs {
  border-bottom: 1px solid var(--clr-border-light, rgba(0, 0, 0, 0.06));
  padding-top: 0.15rem;
}

#app-container:not(.auth-mode) .contacts-shell-tabs button {
  flex: 1;
  text-align: center;
  font-size: 0.85rem;
  padding: 0.45rem 0.35rem;
}

#app-container:not(.auth-mode) .contacts-shell-tabs .shell-tab-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  max-width: 100%;
}

#app-container:not(.auth-mode) .contacts-shell-tabs .shell-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.28rem;
  border-radius: 0.55rem;
  background: #fa5151;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

#app-container:not(.auth-mode) .contacts-shell-tabs button.active .shell-tab-badge {
  background: #fa5151;
}

#app-container:not(.auth-mode) .contact-section-header {
  padding: 0.55rem 0.85rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--clr-text-secondary, #6b7280);
}

#app-container:not(.auth-mode) .contacts-people-panel {
  flex: 1 1 auto;
  min-height: 0;
}

#app-container:not(.auth-mode) .contacts-people-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--clr-text-secondary, #6b7280);
  font-size: 0.95rem;
}

#app-container:not(.auth-mode) .friend-requests-entry {
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
}

#app-container:not(.auth-mode) .friend-requests-entry:hover {
  background-color: var(--clr-background-blue-gray-75, rgba(79, 110, 247, 0.08));
}

#app-container:not(.auth-mode) .friend-requests-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fa9d3b;
  color: #fff;
  flex-shrink: 0;
}

#app-container:not(.auth-mode) .friend-requests-icon.is-back {
  background: #8e8e93;
}

#app-container:not(.auth-mode) .friend-requests-icon svg {
  width: 1.55rem;
  height: 1.55rem;
  display: block;
}

#app-container:not(.auth-mode) .friend-requests-entry .text-box {
  flex: 1 1 auto;
  min-width: 0;
}

#app-container:not(.auth-mode) .friend-requests-icon.is-group {
  background: #10ae5c;
}

#app-container:not(.auth-mode) .request-list .request-row {
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
  padding-right: 0.65rem;
}

#app-container:not(.auth-mode) .request-list .request-row .text-box {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

#app-container:not(.auth-mode) .request-list .request-row .text-box > div {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app-container:not(.auth-mode) .request-list .request-row .contact-title {
  max-width: 100%;
}

#app-container:not(.auth-mode) .request-list .request-row.accepted {
  opacity: 0.72;
}

#app-container:not(.auth-mode) .request-list .request-status {
  font-size: 0.75rem;
  color: var(--clr-text-secondary, #6b7280);
  margin-top: 0.1rem;
}

#app-container:not(.auth-mode) .request-list .request-status.accepted {
  color: #10ae5c;
}

#app-container:not(.auth-mode) .request-list .request-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.3rem;
  margin-left: 0.25rem;
}

#app-container:not(.auth-mode) .request-list .request-actions button.compact {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.2rem 0.55rem;
  min-width: 0;
  min-height: 0;
  line-height: 1.25;
  margin: 0;
  white-space: nowrap;
  text-transform: none;
  box-shadow: none;
}

#app-container:not(.auth-mode) .request-list .request-row > .material-icons.as-button {
  margin-left: auto;
  flex-shrink: 0;
}

#app-container:not(.auth-mode) .friend-requests-badge {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  margin-right: 0.5rem;
  border-radius: 0.65rem;
  background: #fa5151;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.25rem;
  text-align: center;
  font-weight: 600;
}

#app-container:not(.auth-mode) .info-box.info {
  background-color: rgba(79, 110, 247, 0.12);
  border-bottom-color: rgba(79, 110, 247, 0.28);
  color: #1e3a8a;
}

#app-container:not(.auth-mode) .info-box.info .icon .material-icons,
#app-container:not(.auth-mode) .info-box.info .cancel .material-icons {
  color: #3b5bdb;
}

#app-container:not(.auth-mode).scheme-dark .info-box.info {
  background-color: rgba(129, 212, 250, 0.16);
  border-bottom-color: rgba(129, 212, 250, 0.35);
  color: #e1f5fe;
}

#app-container:not(.auth-mode).scheme-dark .info-box.info .icon .material-icons,
#app-container:not(.auth-mode).scheme-dark .info-box.info .cancel .material-icons {
  color: #81d4fa;
}

#app-container:not(.auth-mode) .newtpk-hint {
  margin: 0.5rem 0.85rem 0.15rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* ---------- Account / settings panels ---------- */

#app-container:not(.auth-mode) .settings-panel {
  padding: 0.35rem 0.65rem 1.25rem;
}

#app-container:not(.auth-mode) .settings-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.75rem 1.1rem;
  margin-bottom: 0.35rem;
  border-radius: 0.85rem;
  background: rgba(79, 110, 247, 0.06);
  text-align: center;
}

#app-container:not(.auth-mode).scheme-dark .settings-hero {
  background: rgba(79, 110, 247, 0.12);
}

#app-container:not(.auth-mode) .settings-hero-edit {
  margin-bottom: 0.75rem;
}

#app-container:not(.auth-mode) .settings-hero-name {
  margin-top: 0.65rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  max-width: 100%;
  word-break: break-word;
}

#app-container:not(.auth-mode) .settings-hero-meta {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  opacity: 0.65;
  word-break: break-all;
}

#app-container:not(.auth-mode) .settings-hero-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
}

#app-container:not(.auth-mode) .settings-hero-bio {
  margin-top: 0.55rem;
  max-width: 18rem;
  font-size: 0.875rem;
  line-height: 1.45;
  opacity: 0.8;
}

#app-container:not(.auth-mode) .settings-hero-badges {
  margin-top: 0.45rem;
}

#app-container:not(.auth-mode) .settings-hero-hint {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  opacity: 0.55;
}

#app-container:not(.auth-mode) .settings-edit-link {
  display: inline-flex;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: #4f6ef7;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: none;
}

#app-container:not(.auth-mode) .settings-edit-link:hover {
  background: #3d5ce6;
}

#app-container:not(.auth-mode) .settings-section {
  margin-top: 0.85rem;
}

#app-container:not(.auth-mode) .settings-section-compact {
  margin-top: 0.35rem;
}

#app-container:not(.auth-mode) .settings-section-title {
  padding: 0.15rem 0.55rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.55;
  text-transform: none;
}

#app-container:not(.auth-mode) .settings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 0.85rem;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.035);
}

#app-container:not(.auth-mode).scheme-dark .settings-list {
  background: rgba(255, 255, 255, 0.04);
}

#app-container:not(.auth-mode) .settings-list-choices {
  padding: 0.15rem 0;
}

#app-container:not(.auth-mode) .settings-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0.55rem 0.75rem;
  color: inherit;
  text-decoration: none;
  text-transform: none;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

#app-container:not(.auth-mode).scheme-dark .settings-row {
  border-top-color: rgba(255, 255, 255, 0.06);
}

#app-container:not(.auth-mode) .settings-list > :first-child,
#app-container:not(.auth-mode) .settings-list > .settings-row:first-child,
#app-container:not(.auth-mode) .settings-list > .settings-choice-item:first-child .settings-choice {
  border-top: none;
}

#app-container:not(.auth-mode) a.settings-row:hover,
#app-container:not(.auth-mode) a.settings-perm-block:hover {
  background: rgba(79, 110, 247, 0.06);
}

#app-container:not(.auth-mode).scheme-dark a.settings-row:hover,
#app-container:not(.auth-mode).scheme-dark a.settings-perm-block:hover {
  background: rgba(79, 110, 247, 0.12);
}

#app-container:not(.auth-mode) .settings-row-icon {
  flex-shrink: 0;
  width: 1.35rem;
  font-size: 1.35rem;
  color: #4f6ef7;
}

#app-container:not(.auth-mode) .settings-row-body {
  flex: 1;
  min-width: 0;
}

#app-container:not(.auth-mode) .settings-row-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

#app-container:not(.auth-mode) .settings-row-desc {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  opacity: 0.6;
}

#app-container:not(.auth-mode) .settings-row-chevron,
#app-container:not(.auth-mode) .settings-row-trailing {
  flex-shrink: 0;
  color: rgba(15, 23, 42, 0.35);
}

#app-container:not(.auth-mode).scheme-dark .settings-row-chevron,
#app-container:not(.auth-mode).scheme-dark .settings-row-trailing {
  color: rgba(255, 255, 255, 0.35);
}

#app-container:not(.auth-mode) .settings-row-chevron {
  font-size: 1.35rem;
}

#app-container:not(.auth-mode) .settings-row-static {
  cursor: default;
}

#app-container:not(.auth-mode) .settings-row-action {
  display: inline-flex;
  padding: 0.15rem;
  color: rgba(15, 23, 42, 0.45);
  text-decoration: none;
}

#app-container:not(.auth-mode) .settings-row-pending {
  color: #c27803;
}

#app-container:not(.auth-mode) .settings-row-pending-icon {
  font-size: 1.1rem;
  color: #c27803;
}

#app-container:not(.auth-mode) .settings-row-field,
#app-container:not(.auth-mode) .settings-row-toggle,
#app-container:not(.auth-mode) .settings-row-range {
  align-items: flex-start;
  min-height: auto;
}

#app-container:not(.auth-mode) .settings-row-toggle {
  align-items: center;
}

#app-container:not(.auth-mode) .settings-row-control {
  margin-top: 0.35rem;
}

#app-container:not(.auth-mode) .settings-row-range {
  flex-direction: column;
  gap: 0.35rem;
}

#app-container:not(.auth-mode) .settings-row-range input[type="range"] {
  width: 100%;
}

#app-container:not(.auth-mode) .settings-range-value {
  align-self: flex-end;
  font-size: 0.8125rem;
  opacity: 0.65;
}

#app-container:not(.auth-mode) .settings-row-disabled {
  opacity: 0.45;
  pointer-events: none;
}

#app-container:not(.auth-mode) .settings-section-danger .settings-list {
  background: rgba(220, 38, 38, 0.05);
}

#app-container:not(.auth-mode).scheme-dark .settings-section-danger .settings-list {
  background: rgba(248, 113, 113, 0.08);
}

#app-container:not(.auth-mode) .settings-row-danger .settings-row-icon,
#app-container:not(.auth-mode) .settings-row-danger .settings-row-title {
  color: #dc2626;
}

#app-container:not(.auth-mode) .settings-choice-item {
  list-style: none;
}

#app-container:not(.auth-mode) .settings-choice {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  cursor: pointer;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

#app-container:not(.auth-mode).scheme-dark .settings-choice {
  border-top-color: rgba(255, 255, 255, 0.06);
}

#app-container:not(.auth-mode) .settings-list-choices > .settings-choice:first-child,
#app-container:not(.auth-mode) .settings-list-choices > .settings-choice-item:first-child .settings-choice {
  border-top: none;
}

#app-container:not(.auth-mode) .settings-choice-body {
  flex: 1;
  min-width: 0;
}

#app-container:not(.auth-mode) .settings-choice-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}

#app-container:not(.auth-mode) .settings-choice-hint {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  opacity: 0.6;
}

#app-container:not(.auth-mode) .settings-theme-icon {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
}

#app-container:not(.auth-mode) .settings-perm-section {
  padding: 0;
}

#app-container:not(.auth-mode) .settings-perm-block {
  display: block;
  margin-bottom: 0.55rem;
  color: inherit;
  text-decoration: none;
}

#app-container:not(.auth-mode) .settings-perm-block:last-child {
  margin-bottom: 0;
}

#app-container:not(.auth-mode) #settings-form.settings-panel ul.settings-list-choices {
  margin: 0;
  padding: 0;
}

/* Mobile: softer shell radius, full-bleed feel */
@media (max-width: 640px) {
  #app-container:not(.auth-mode) {
    max-width: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--clr-body-background, #f8f9fd);
  }

  body:has(#app-container:not(.auth-mode)) {
    background-image: none;
    box-shadow: none;
  }

  #app-container:not(.auth-mode) .contact-box {
    padding-left: max(0.4rem, env(safe-area-inset-left));
    padding-right: max(0.4rem, env(safe-area-inset-right));
  }

  #app-container:not(.auth-mode) #send-message-panel {
    padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
  }
}