/*
  Hi! messenger — глобальный UI kit v2 (2026)
  Единые поверхности, глубина, акцент из темы; без «моковых» переопределений палитры.
*/

:root,
body {
  --rd-font: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --rd-radius-sm: 10px;
  --rd-radius-md: 12px;
  --rd-radius-lg: 16px;
  --rd-radius-xl: 18px;
  --rd-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  --rd-shadow-soft: 0 1px 4px rgba(15, 23, 42, 0.04);
  --rd-elev-surface: none;
  --rd-elev-pop: 0 8px 28px rgba(15, 23, 42, 0.1);
  /* Светлая тема: спокойные нейтрали, мягкий акцент */
  --rd-page-bg: #eef0f4;
  --rd-bg-soft: #e8eaef;
  --rd-card: #ffffff;
  --rd-card-muted: #f4f5f8;
  --rd-border: #dfe3eb;
  --rd-text: #1a1d26;
  --rd-muted: #6b7280;
  --rd-accent: #2563eb;
  --rd-accent-strong: #1d4ed8;
  --rd-danger: #c74848;
  --rd-success: #2f9e74;
  --rd-nav: #f8f9fb;
  --rd-nav-active: #eceef2;
  --rd-input-bg: #f8f9fb;
  --rd-input-border: #d8dce4;
  --rd-bubble-in: #eef1f6;
  --rd-bubble-out: #2563eb;
  --rd-bubble-in-text: #1a1d26;
  --rd-bubble-out-text: #ffffff;
}

body[data-theme="dark"],
body[data-theme="midnight"],
body[data-theme="graphite"] {
  --rd-page-bg: #0e1729;
  --rd-bg-soft: #121a2a;
  --rd-card: #151d2e;
  --rd-card-muted: #1a2436;
  --rd-border: #2a3548;
  --rd-text: #e8ecf1;
  --rd-muted: #8b95a8;
  --rd-accent: #5e88ff;
  --rd-accent-strong: #4d72d8;
  --rd-nav: #121a28;
  --rd-nav-active: #1e2838;
  --rd-input-bg: #1a2434;
  --rd-input-border: #2f3d52;
  --rd-bubble-in: #1c2636;
  --rd-bubble-out: #5e88ff;
  --rd-bubble-in-text: #e8ecf1;
  --rd-bubble-out-text: #ffffff;
  --rd-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  --rd-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.16);
  --rd-elev-surface: none;
  --rd-elev-pop: 0 12px 36px rgba(0, 0, 0, 0.32);
}

html {
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--rd-page-bg) !important;
  color: var(--rd-text) !important;
  font-family: var(--rd-font) !important;
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}

h1,
h2,
h3,
h4 {
  margin-top: 0;
  color: var(--rd-text) !important;
  letter-spacing: -0.02em;
}

a {
  color: var(--rd-accent);
  text-decoration: none;
}

a:hover {
  color: var(--rd-accent-strong);
}

::selection {
  background: color-mix(in srgb, var(--rd-accent) 26%, transparent);
  color: var(--rd-text);
}

/* Surfaces */
.sidebar,
.chat,
.desktop-panel,
.settings-card,
.auth-card,
.profile-card,
.tg-section-card,
.modal-content,
.market-item,
.market-card,
.market-hero,
.gift-item,
.gift-card,
.gift-shop-card,
.card,
.side,
.content,
.admin-card,
.call-card,
.chat-welcome,
.profile-stage,
.tg-hero-card {
  background: var(--rd-card) !important;
  border: 1px solid var(--rd-border) !important;
  border-radius: var(--rd-radius-lg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.modal-content {
  box-shadow: var(--rd-elev-pop) !important;
}

.sidebar-header,
.chat-header,
.quick-menu,
.search-results-drop,
.search-container,
.search-results,
.stories-container {
  background: var(--rd-card) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
  box-shadow: none !important;
}

.app {
  gap: 12px !important;
  padding: 12px !important;
}

/* Text hierarchy */
.conv-title,
.logo-small,
.tg-nav-title,
.tg-name-row,
.profile-title-row {
  color: var(--rd-text) !important;
  font-weight: 700;
}

.conv-type,
.conv-preview,
.conv-time,
.tg-meta,
.tg-empty,
.profile-stat-label,
.profile-section-title,
.auth-subtitle,
.message-time,
.message-sender {
  color: var(--rd-muted) !important;
}

/* Inputs */
input,
textarea,
select,
#searchInput,
#messageInput,
.create-form-field input,
.create-form-field textarea,
.create-form-field select,
.modal-content input,
.modal-content textarea,
.modal-content select,
.tg-field input,
.tg-field textarea,
.field input,
.field textarea,
.field select {
  background: var(--rd-input-bg) !important;
  color: var(--rd-text) !important;
  border: 1px solid var(--rd-input-border) !important;
  border-radius: var(--rd-radius-md) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder,
#searchInput::placeholder,
#messageInput::placeholder {
  color: var(--rd-muted) !important;
}

.field-icon {
  background: var(--rd-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

/* Buttons */
button:not(.upp-sec-handle):not(.upp-media-fab):not(.upp-banner-edit-fab):not(.set-nav-btn):not(.set-sidebar-btn):not(.seg):not(.edit-msg):not(.delete-msg):not(.tab-btn):not(.nav-hub-btn),
.btn,
.prm-linkbtn,
.prm-primary,
.upp-action,
.theme,
.side-btn,
.tg-quick-btn,
.tg-pill,
.tg-list-item,
.profile-tag-button,
.call-btn,
.attach-btn,
.emoji-btn,
.create-type-btn,
.create-user-item,
.create-toggle {
  border-radius: 999px !important;
  border: 1px solid var(--rd-border) !important;
  box-shadow: none !important;
  transition: 0.2s ease;
}

button:not(.secondary):not(.icon-btn):not(.call-btn):not(.create-type-btn):not(.create-user-item):not(.nav-hub-btn):not(.prm-linkbtn):not(.prm-primary):not(.prm-btn-text):not(.prm-icon):not(.prm-hero-banner-btn):not(.upp-media-fab):not(.upp-banner-edit-fab):not(.upp-sec-handle):not(.prm-chip):not(.set-nav-btn):not(.set-sidebar-btn):not(.seg):not(.edit-msg):not(.delete-msg):not(.tab-btn),
#sendBtn,
.call-controls .accept,
.auth-card button {
  background: var(--rd-accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}

button.secondary,
.secondary,
.tg-quick-btn,
.tg-pill,
.tg-list-item,
.call-btn,
.attach-btn,
.emoji-btn,
.create-type-btn,
.create-user-item,
.create-toggle,
#createMenuBtn {
  background: var(--rd-card-muted) !important;
  color: var(--rd-text) !important;
}

button:hover,
.btn:hover {
  transform: none;
  filter: brightness(1.04);
}

/* Lists and states (результаты поиска с data-type — отдельно, капсула внизу файла) */
.conv-item,
.dropdown-item {
  border-radius: var(--rd-radius-md) !important;
  border: 1px solid transparent !important;
}

.conv-item:hover,
.conv-item.active,
.dropdown-item:hover,
.quick-menu .item:hover,
.quick-menu .item.active,
.market-tab.active,
.tab.active,
.side-btn.active,
.theme-option.active {
  background: var(--rd-nav-active) !important;
  border-color: var(--rd-border) !important;
}

/* Chat bubbles */
.messages-container {
  background: var(--rd-bg-soft) !important;
}

.message-bubble {
  background: var(--rd-bubble-in) !important;
  color: var(--rd-bubble-in-text) !important;
  border: 1px solid color-mix(in srgb, var(--rd-border) 74%, transparent) !important;
  border-radius: 16px !important;
}

.message-own .message-bubble {
  background: var(--rd-bubble-out) !important;
  color: var(--rd-bubble-out-text) !important;
  border-color: transparent !important;
}

.message.message--circle .message-bubble,
.message.message--circle.message-own .message-bubble {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 2px 6px !important;
}

.message-circle-caption {
  color: var(--rd-text) !important;
}

/* Decorative cleanup */
.market-hero,
.gift-shop-card,
.story-avatar.add-story,
.voice-play,
.profile-stage,
.tg-hero-card,
.auth-page,
body.auth-page {
  background-image: none !important;
}

.create-error-box,
.profile-error,
.denied {
  background: color-mix(in srgb, var(--rd-danger) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--rd-danger) 48%, var(--rd-border)) !important;
  color: var(--rd-text) !important;
}

.icon-btn {
  background: var(--rd-card-muted) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
}

.floating-input {
  background: transparent !important;
  border-top: 1px solid var(--rd-border) !important;
  box-shadow: none !important;
}

/* Mobile bottom nav */
@media (max-width: 768px) {
  .app {
    padding: 0 !important;
  }

  .sidebar,
  .chat {
    border-radius: 0 !important;
  }

  nav.mobile-bottom-nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 6px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    border-radius: 999px !important;
    border: 1px solid var(--rd-border) !important;
    background: var(--rd-card) !important;
    box-shadow: var(--rd-shadow-soft) !important;
    backdrop-filter: none !important;
    z-index: 60 !important;
    transform: none !important;
    opacity: 1 !important;
  }

  nav.mobile-bottom-nav button {
    min-height: 56px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--rd-muted) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    transform: none !important;
  }

  nav.mobile-bottom-nav button.active {
    background: var(--rd-nav-active) !important;
    color: var(--rd-accent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd-border) 30%, transparent) !important;
  }

  nav.mobile-bottom-nav button img {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Focus ring and scrollbar */
:focus-visible {
  outline: 2px solid var(--rd-accent);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--rd-border) 80%, var(--rd-muted));
  border-radius: 999px;
}
/*
  Hi! messenger — «минеральный» глобальный редизайн
  Тёплые нейтрали, один яркий акцент (охра/терракота), плоские поверхности.
  Без фиолетово-синих градиентов, без стекломорфизма и «нейрошаблона».
*/

/* Типографика: системный гротеск + сериф только для крупных заголовков бренда */
body {
  font-family: var(--font-body, "Inter", "Segoe UI", Roboto, Arial, sans-serif) !important;
  -webkit-font-smoothing: antialiased;
}

.logo-small,
.auth-card .brand-wrap h2,
.auth-card h2,
.tg-nav-title {
  font-family: var(--font-body, "Inter", "Segoe UI", Roboto, Arial, sans-serif) !important;
  letter-spacing: -0.02em !important;
}

/* ——— Токены: тёмные темы (общая база) ——— */
:root,
body,
body[data-theme="dark"],
body[data-theme="midnight"],
body[data-theme="graphite"] {
  --rd-page-bg: #0c1018;
  --rd-bg: #0c1018;
  --rd-bg-soft: #121820;
  --rd-card: #151c28;
  --rd-card-2: #121820;
  --rd-border: #2a323e;
  --rd-text: #e8ecf1;
  --rd-logo-text: #f1f4f8;
  --rd-muted: #8b95a8;
  --rd-accent: #5e88ff;
  --rd-accent-2: #4d72d8;
  --rd-pill: #1a2230;
  --rd-pill-soft: #222b3a;
  --rd-nav: #121820;
  --rd-nav-active: #1e2838;
  --bg-page: #0c1018;
  --bg-sidebar: #121820;
  --bg-card: #151c28;
  --bg-hover: #1e2838;
  --bg-active: #2a323e;
  --border: #2a323e;
  --accent: #5e88ff;
  --accent-hover: #7a9eff;
  --text-primary: #e8ecf1;
  --text-secondary: #c5ccd6;
  --text-muted: #8b95a8;
  --message-out-bg: #5e88ff;
  --message-in-bg: #1c2634;
  --message-out-text: #fffaf6;
  --message-in-text: #f7f2ea;
  --profile-bg: #151413;
  --profile-text: #f0ece6;
  --profile-muted: #9a958c;
  --profile-card-bg: #1f1e1c;
  --profile-card-border: #353330;
  --profile-card-shadow: none;
  --profile-subcard-bg: #191817;
  --profile-subcard-border: #353330;
  --profile-primary: #c4a574;
  --profile-primary-solid: #c4a574;
  --profile-secondary-bg: #252220;
  --profile-secondary-text: #e8e2da;
  --auth-link: #c4a574;
}

body[data-color-theme="blue"] {
  --rd-accent: #2563eb;
  --rd-accent-2: #1d4ed8;
  --accent: #2563eb;
  --accent-hover: #3b82f6;
}

body[data-color-theme="cyan"] {
  --rd-accent: #0ea5b7;
  --rd-accent-2: #0b7f8c;
  --accent: #0ea5b7;
  --accent-hover: #22c3d8;
}

body[data-color-theme="violet"] {
  --rd-accent: #7c5cff;
  --rd-accent-2: #6246d2;
  --accent: #7c5cff;
  --accent-hover: #9376ff;
}

body[data-color-theme="emerald"] {
  --rd-accent: #10b981;
  --rd-accent-2: #0f8f65;
  --accent: #10b981;
  --accent-hover: #21cf97;
}

body[data-theme="midnight"] {
  --rd-page-bg: #0c0b0a;
  --rd-bg: #0c0b0a;
  --rd-bg-soft: #131110;
  --rd-card: #161514;
  --rd-card-2: #10100f;
  --rd-border: #2c2926;
  --rd-text: #ebe8e2;
  --rd-muted: #8f8a82;
  --rd-accent: #b8966a;
  --rd-accent-2: #9a7d55;
  --rd-pill: #1f1d1b;
  --rd-pill-soft: #262422;
  --rd-nav: #141312;
  --rd-nav-active: #262320;
  --message-out-bg: #755c3d;
  --message-in-bg: #171514;
}

body[data-theme="graphite"] {
  --rd-page-bg: #121418;
  --rd-bg: #121418;
  --rd-bg-soft: #181c22;
  --rd-card: #1a1f26;
  --rd-card-2: #14181e;
  --rd-border: #343b45;
  --rd-text: #e8ecf2;
  --rd-muted: #8b95a5;
  --rd-accent: #9db4c4;
  --rd-accent-2: #7e96a9;
  --rd-pill: #232a33;
  --rd-pill-soft: #2a323c;
  --rd-nav: #181d24;
  --rd-nav-active: #2a313b;
  --accent: #9db4c4;
  --accent-hover: #b3c6d4;
  --message-out-bg: #4a5f72;
  --message-in-bg: #1b222a;
  --message-out-text: #f8fafc;
  --message-in-text: #eef2f7;
}

/* Светлая тема — те же спокойные нейтрали, что в шапке global_redesign */
body[data-theme="light"] {
  --rd-page-bg: #eef0f4;
  --rd-bg: #eef0f4;
  --rd-bg-soft: #e8eaef;
  --rd-card: #ffffff;
  --rd-card-2: #f4f5f8;
  --rd-border: #dfe3eb;
  --rd-text: #1a1d26;
  --rd-logo-text: #1a1d26;
  --rd-muted: #6b7280;
  --rd-accent: #2563eb;
  --rd-accent-2: #1d4ed8;
  --rd-pill: #f0f2f6;
  --rd-pill-soft: #e8ebf1;
  --rd-nav: #f4f5f8;
  --rd-nav-active: #e8ebf1;
  --bg-page: #eef0f4;
  --bg-sidebar: #f4f5f8;
  --bg-card: #ffffff;
  --bg-hover: #e8ebf1;
  --bg-active: #dfe3eb;
  --border: #dfe3eb;
  --accent: #2563eb;
  --accent-hover: #3b82f6;
  --text-primary: #1a1d26;
  --text-secondary: #3d4451;
  --text-muted: #6b7280;
  --message-out-bg: #2563eb;
  --message-in-bg: #eef1f6;
  --message-out-text: #fffaf6;
  --message-in-text: #1a1d26;
  --profile-bg: #eef0f4;
  --profile-text: #1a1d26;
  --profile-muted: #6b7280;
  --profile-card-bg: #ffffff;
  --profile-card-border: #dfe3eb;
  --profile-subcard-bg: #f4f5f8;
  --profile-subcard-border: #dfe3eb;
  --profile-primary: #2563eb;
  --profile-primary-solid: #2563eb;
  --profile-secondary-bg: #e8ebf1;
  --profile-secondary-text: #1a1d26;
  --auth-link: #2563eb;
}

body {
  background: var(--rd-page-bg) !important;
  color: var(--rd-text) !important;
}

/* transform на body ломает position:fixed у потомков (таббар уезжает со скроллом на /profile и др.). */
body.profile-shell {
  transform: none !important;
}

a {
  color: var(--rd-accent);
}

a:hover {
  color: var(--accent-hover, var(--rd-accent-2));
}

.app {
  padding: 10px !important;
  gap: 10px !important;
}

.sidebar,
.chat,
.desktop-panel,
.settings-card,
.auth-card,
.profile-card,
.tg-section-card,
.modal-content,
.market-item,
.market-card,
.market-hero,
.gift-item,
.gift-card,
.gift-shop-card,
.card,
.side,
.content,
.admin-card {
  background: var(--rd-card) !important;
  border: 1px solid var(--rd-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.sidebar,
.chat,
.desktop-panel {
  border-radius: var(--rd-radius-lg) !important;
}

.modal-content {
  box-shadow: var(--rd-elev-pop) !important;
}

/* mobile-bottom-nav вынесен: у неё своя подложка в @media и в tabbar_shell / нижний блок */
.sidebar-header,
.chat-header,
.quick-menu,
.search-results-drop {
  background: var(--rd-card) !important;
  border-color: var(--rd-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.floating-input {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.quick-menu {
  border-radius: 12px !important;
}

.quick-menu .item {
  color: var(--rd-text) !important;
  border-bottom-color: var(--rd-border) !important;
}

.quick-menu .item:hover,
.conv-item:hover,
.conv-item.active,
.dropdown-item:hover {
  background: var(--rd-pill-soft) !important;
}

.logo-small {
  color: var(--rd-logo-text) !important;
}

#searchInput,
#messageInput,
.create-form-field input,
.create-form-field textarea,
.create-form-field select,
.modal-content input,
.modal-content textarea,
.modal-content select,
.tg-field input,
.tg-field textarea,
.field input,
.field textarea,
.field select {
  background: var(--rd-pill) !important;
  border: 1px solid var(--rd-border) !important;
  color: var(--rd-text) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

#searchInput::placeholder,
#messageInput::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--rd-muted) !important;
}

.conv-avatar,
.chat-avatar,
.user-avatar,
.tg-avatar,
.profile-avatar-big {
  background-color: var(--rd-pill-soft) !important;
  border: 1px solid var(--rd-border) !important;
  box-shadow: none !important;
}

.message-bubble {
  background: var(--message-in-bg) !important;
  border: 1px solid var(--rd-border) !important;
  box-shadow: none !important;
  color: var(--message-in-text) !important;
}

.message-own .message-bubble {
  background: var(--message-out-bg) !important;
  border-color: transparent !important;
  color: var(--message-out-text) !important;
}

.message-gift .message-bubble {
  background: var(--rd-pill) !important;
  border-color: var(--rd-border) !important;
}

/* Видео-кружок в чате: без «пузыря», только круг и подпись */
.message.message--circle .message-bubble {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 2px 6px !important;
  color: var(--rd-text) !important;
}

.message.message--circle.message-own .message-bubble {
  background: transparent !important;
  border: none !important;
}

.message.message--circle .message-sender {
  color: var(--rd-muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.message.message--circle .message-time {
  color: var(--rd-muted);
  margin-top: 6px;
}

.message-circle-caption {
  margin-top: 8px;
  padding: 0 4px;
  font-size: 15px;
  line-height: 1.38;
  color: var(--rd-text);
  word-break: break-word;
}

.chat-welcome,
.call-card {
  background: var(--rd-card) !important;
  border: 1px solid var(--rd-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.call-overlay {
  background: rgba(12, 10, 8, 0.88) !important;
  backdrop-filter: none !important;
}

button,
.btn,
#sendBtn,
.attach-btn,
.emoji-btn,
.call-btn,
.create-type-btn,
.create-user-item,
.create-toggle,
.profile-actions button,
.tg-quick-btn,
.tg-pill,
.tg-list-item,
.profile-tag-button {
  box-shadow: none !important;
}

#createMenuBtn {
  background: var(--rd-pill) !important;
  border: 1px solid var(--rd-border) !important;
  color: var(--rd-text) !important;
}

#createMenuBtn:hover {
  background: var(--rd-pill-soft) !important;
}

#createModal .modal-content {
  background: var(--rd-card) !important;
  border: 1px solid var(--rd-border) !important;
}

.create-type-btn {
  background: var(--rd-pill) !important;
  border: 1px solid var(--rd-border) !important;
  color: var(--rd-text) !important;
}

.create-type-btn strong {
  color: var(--rd-text) !important;
}

.create-type-btn span {
  color: var(--rd-muted) !important;
}

.create-type-btn.active {
  background: var(--rd-pill-soft) !important;
  border-color: var(--rd-accent) !important;
}

.create-user-search-list,
.create-selected-list {
  background: var(--rd-bg-soft) !important;
  border-color: var(--rd-border) !important;
}

#sendBtn,
.call-controls .accept,
button:not(.secondary):not(.icon-btn):not(.call-btn):not(.create-type-btn):not(.create-user-item):not(.nav-hub-btn):not(.prm-linkbtn):not(.prm-primary):not(.prm-btn-text):not(.prm-icon):not(.prm-hero-banner-btn):not(.upp-media-fab):not(.upp-banner-edit-fab):not(.upp-sec-handle):not(.prm-chip):not(.set-nav-btn):not(.set-sidebar-btn):not(.seg):not(.edit-msg):not(.delete-msg):not(.tab-btn) {
  background: var(--rd-accent) !important;
  color: #fff !important;
}

button.secondary,
.secondary,
.call-btn,
.attach-btn,
.emoji-btn,
.create-type-btn,
.create-user-item,
.create-toggle,
.tg-quick-btn,
.tg-pill,
.tg-list-item {
  background: var(--rd-pill) !important;
  border: 1px solid var(--rd-border) !important;
  color: var(--rd-text) !important;
}

button:not(.nav-hub-btn):not(.upp-sec-handle):not(.upp-media-fab):not(.upp-banner-edit-fab):not(.set-nav-btn):not(.set-sidebar-btn):not(.seg):not(.edit-msg):not(.delete-msg):not(.tab-btn),
.btn,
.prm-linkbtn,
.prm-primary,
.upp-action,
.theme,
.side-btn {
  border-radius: 12px !important;
  border: 1px solid var(--rd-border) !important;
  min-height: 40px;
}

.market-hero,
.gift-shop-card,
.story-avatar.add-story,
.voice-play,
.message-own .message-bubble,
.profile-stage,
.tg-hero-card,
.auth-page,
body.auth-page {
  background-image: none !important;
}

.side-btn.active,
.market-tab.active,
.tab.active,
.theme-option.active {
  background: var(--rd-pill-soft) !important;
  border-color: var(--rd-border) !important;
}

.market-item,
.gift-item,
.gift-shop-card,
.card {
  border-radius: 12px !important;
}

.create-error-box,
.profile-error,
.denied {
  background: #3a2220 !important;
  border-color: #6b3a32 !important;
  color: #f5ded8 !important;
}

body[data-theme="light"] .create-error-box,
body[data-theme="light"] .profile-error,
body[data-theme="light"] .denied {
  background: #fce8e6 !important;
  border-color: #e8b4ae !important;
  color: #5c2018 !important;
}

.profile-stage,
.tg-hero-card,
.profile-hero {
  background: var(--rd-card) !important;
  border: 1px solid var(--rd-border) !important;
  box-shadow: none !important;
}

.profile-stage::before,
.profile-stage::after,
.tg-hero-card::before,
.tg-hero-card::after {
  display: none !important;
}

.tg-name-row,
.profile-title-row,
.tg-nav-title,
.tg-handle,
.tg-status,
.profile-hero-tag {
  color: var(--rd-text) !important;
}

.profile-hero-tag {
  background: var(--rd-pill) !important;
  border: 1px solid var(--rd-border) !important;
}

.tg-nav-btn {
  background: var(--rd-pill) !important;
  border: 1px solid var(--rd-border) !important;
  color: var(--rd-text) !important;
}

.tg-section-card h3,
.profile-section-title,
.profile-stat-label,
.tg-meta,
.tg-empty,
.create-type-btn span,
.create-form-field label {
  color: var(--rd-muted) !important;
}

.auth-page,
body.auth-page,
body.profile-shell,
.modern-profile.profile-shell {
  background: var(--rd-page-bg) !important;
}

.auth-card button,
.profile-actions button:not(.secondary),
.profile-row-actions button:not(.secondary) {
  background: var(--rd-accent) !important;
  color: #fff !important;
}

.modern-profile.profile-shell {
  color: var(--rd-text) !important;
}

/* Светлый профиль: profile_rework задаёт тёмно-синий текст на светлом — выравниваем под токены */
body[data-theme="light"].profile-shell.modern-profile {
  background: var(--rd-page-bg) !important;
  color: var(--rd-text) !important;
}

body[data-theme="light"] .modern-profile .profile-stage,
body[data-theme="light"] .modern-profile .tg-hero-card {
  color: var(--rd-text) !important;
}

.icon-btn {
  border-color: var(--rd-border) !important;
  background: var(--rd-pill) !important;
  color: var(--rd-text) !important;
}

:focus-visible {
  outline: 2px solid var(--rd-accent);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .app {
    padding: 0 !important;
  }
  .sidebar,
  .chat {
    border-radius: 0 !important;
  }
}

/* Крупные панели и модалки — радиус без привязки к монохрому */
.sidebar,
.chat,
.desktop-panel,
.auth-card,
.profile-card,
.settings-card,
.modal-content {
  border-radius: var(--rd-radius-xl, 28px) !important;
}

#searchInput,
#messageInput,
.auth-card input,
.create-form-field input,
.create-form-field textarea,
.create-form-field select {
  background: var(--rd-input-bg, var(--rd-pill)) !important;
  color: var(--rd-text) !important;
  border: 1px solid var(--rd-input-border, var(--rd-border)) !important;
  border-radius: var(--rd-radius-md, 16px) !important;
}

#searchInput::placeholder,
#messageInput::placeholder,
.auth-card input::placeholder {
  color: var(--rd-muted) !important;
}

.field-icon {
  background: var(--rd-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

.auth-card button,
#sendBtn,
.composer-send,
.primary,
button:not(.secondary):not(.icon-btn):not(.call-btn):not(.create-type-btn):not(.create-user-item):not(.nav-hub-btn):not(.prm-linkbtn):not(.prm-primary):not(.prm-btn-text):not(.prm-icon):not(.prm-hero-banner-btn):not(.upp-media-fab):not(.upp-banner-edit-fab):not(.upp-sec-handle):not(.prm-chip):not(.set-nav-btn):not(.set-sidebar-btn):not(.seg):not(.edit-msg):not(.delete-msg):not(.tab-btn) {
  background: var(--rd-accent) !important;
  color: #fff !important;
  border-color: transparent !important;
  border-radius: 999px !important;
}

/* Таббар: одна подложка у <nav>. У кнопок без .active — никакой своей заливки/тени; .active = единственная доп. пилюля */
.mobile-bottom-nav button:not(.active) {
  color: var(--rd-muted, #efefef) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.mobile-bottom-nav button.active {
  background: color-mix(in srgb, var(--rd-nav-active) 94%, transparent) !important;
  color: var(--rd-accent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd-border) 28%, transparent) !important;
  transform: none !important;
}

/* ========== Полный слой UI: отступы, списки, модалки, сторис, скроллбар ========== */
:root {
  --rd-r-sm: var(--rd-radius-sm, 12px);
  --rd-r-md: var(--rd-radius-md, 16px);
  --rd-r-lg: var(--rd-radius-lg, 22px);
  --rd-ui-pad: 12px;
}

body {
  line-height: 1.5 !important;
  letter-spacing: normal;
}

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rd-text) !important;
}

::selection {
  background: color-mix(in srgb, var(--rd-accent) 35%, transparent);
  color: var(--rd-text);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--rd-border);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--rd-muted);
}

hr {
  border: none;
  border-top: 1px solid var(--rd-border);
}

.modal {
  background: rgba(15, 18, 24, 0.55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal-content {
  border-radius: var(--rd-r-lg) !important;
}

.conv-item {
  border-radius: var(--rd-r-md) !important;
  border: 1px solid transparent !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.conv-item:hover,
.conv-item.active {
  background: var(--rd-pill-soft) !important;
  border-color: var(--rd-border) !important;
}

.conv-title {
  color: var(--rd-text) !important;
}

.conv-type,
.conv-preview,
.conv-time {
  color: var(--rd-muted) !important;
}

.chat-header {
  border-bottom: 1px solid var(--rd-border) !important;
  color: var(--rd-text) !important;
}

.messages-container {
  background: var(--rd-bg-soft) !important;
}

.message-time {
  color: var(--rd-muted) !important;
}

.message-sender {
  color: var(--rd-muted) !important;
}

.stories-container {
  background: var(--rd-card) !important;
  border-color: var(--rd-border) !important;
}

.story-avatar {
  border: 1px solid var(--rd-border) !important;
}

.story-avatar.add-story {
  background: var(--rd-accent) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.story-avatar.add-story .story-add-svg {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
}

.story-progress-fill {
  background: var(--rd-accent) !important;
}

.search-container,
.search-results {
  background: var(--rd-card) !important;
  color: var(--rd-text) !important;
}

.floating-input {
  border-top: 1px solid var(--rd-border) !important;
  border-radius: 0 0 var(--rd-r-lg) var(--rd-r-lg) !important;
}

.desktop-panel {
  color: var(--rd-text) !important;
}

.auth-card {
  border-radius: var(--rd-r-lg) !important;
}

.auth-card input {
  border-radius: var(--rd-r-md) !important;
}

.field-icon {
  background: var(--rd-accent) !important;
}

.auth-card button {
  background: var(--rd-accent) !important;
  box-shadow: none !important;
}

body.auth-page {
  color: var(--rd-text) !important;
}

body.auth-page .auth-subtitle {
  color: var(--rd-muted) !important;
}

body.auth-page .auth-card input {
  background: var(--rd-pill) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
}

body.auth-page .auth-card input::placeholder {
  color: var(--rd-muted) !important;
}

table {
  border-color: var(--rd-border) !important;
}

th,
td {
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
}

thead th {
  background: var(--rd-pill-soft) !important;
}

.gift-shop-card,
.gift-item,
.gift-card {
  color: var(--rd-text) !important;
}

.settings-card,
.settings-page .card,
.st-hub .card {
  color: var(--rd-text) !important;
}

/* Публичный / канал / группа — карточки как везде */
.public-profile-page .tg-section-card,
.channel-profile-page .tg-section-card,
.group-profile-page .tg-section-card {
  background: var(--rd-card) !important;
  border: 1px solid var(--rd-border) !important;
  color: var(--rd-text) !important;
}

/* Мобильный таббар: «парящая» пилюля, fixed к вьюпорту; safe-area — отступ снизу от края экрана. */
@media (max-width: 768px) {
  body.page-transitioning {
    opacity: 1 !important;
    transform: none !important;
  }

  .mobile-bottom-nav.nav-exit,
  body.page-transitioning .mobile-bottom-nav {
    opacity: 1 !important;
    transform: none !important;
  }

  .mobile-bottom-nav.nav-entered,
  body.page-entered .mobile-bottom-nav {
    opacity: 1 !important;
    transform: none !important;
  }

  nav.mobile-bottom-nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 5px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    align-items: stretch !important;
    z-index: 60 !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    border: 1px solid var(--rd-border) !important;
    background: var(--rd-card) !important;
    box-shadow: var(--rd-shadow-soft) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    opacity: 1 !important;
    overflow: hidden !important;
  }

  nav.mobile-bottom-nav button:not(.active) {
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--rd-muted, #b8b8b8) !important;
    min-height: 56px !important;
    padding: 6px 4px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transform: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  nav.mobile-bottom-nav button:not(.active):hover,
  nav.mobile-bottom-nav button:not(.active):active {
    background: transparent !important;
    box-shadow: none !important;
  }

  nav.mobile-bottom-nav button img {
    width: 20px !important;
    height: 20px !important;
    opacity: 0.95 !important;
  }

  /* Иконки в таббаре: тёмные SVG на тёмной «пилюле» — инвертируем */
  body[data-theme="dark"] nav.mobile-bottom-nav button img,
  body[data-theme="midnight"] nav.mobile-bottom-nav button img,
  body[data-theme="graphite"] nav.mobile-bottom-nav button img {
    filter: brightness(0) invert(1);
    opacity: 0.86 !important;
  }

  body[data-theme="dark"] nav.mobile-bottom-nav button.active img,
  body[data-theme="midnight"] nav.mobile-bottom-nav button.active img,
  body[data-theme="graphite"] nav.mobile-bottom-nav button.active img {
    opacity: 1 !important;
  }

  nav.mobile-bottom-nav button .nav-label {
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  nav.mobile-bottom-nav button.active {
    min-width: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    min-height: 56px !important;
    padding: 6px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    -webkit-tap-highlight-color: transparent;
    background: color-mix(in srgb, var(--rd-nav-active) 92%, transparent) !important;
    color: var(--rd-accent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rd-border) 26%, transparent) !important;
    transform: none !important;
    position: relative !important;
    z-index: 1 !important;
  }

  nav.mobile-bottom-nav button.active::after {
    display: none !important;
    content: none !important;
  }

  body .app.app--show-chat + .mobile-bottom-nav {
    opacity: 0 !important;
    transform: translateY(calc(100% + 28px)) !important;
    pointer-events: none !important;
  }
}

/*
 * Результаты поиска в сайдбаре /app: «пилюля» вокруг круглого аватара.
 * Раньше сюда попадали общие .search-result-item { border-radius !important } — они глушили стили из app.html.
 */
.search-results-drop .search-results {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 6px 6px 12px !important;
}

.search-results-drop .search-category {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--rd-muted) !important;
  margin: 6px 10px 2px !important;
}

.search-results-drop .search-result-item[data-type] {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 999px !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  padding: 4px 14px 4px 4px !important;
  margin: 0 2px !important;
  border: 1px solid color-mix(in srgb, var(--rd-border) 70%, transparent) !important;
  border-bottom: none !important;
  background: color-mix(in srgb, var(--rd-card) 50%, transparent) !important;
  color: var(--rd-text) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.search-results-drop .search-result-item[data-type]:hover,
.search-results-drop .search-result-item[data-type]:focus-visible {
  background: var(--rd-pill-soft) !important;
  border-color: color-mix(in srgb, var(--rd-accent) 38%, var(--rd-border)) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14) !important;
  outline: none !important;
}

body[data-theme="light"] .search-results-drop .search-result-item[data-type] {
  background: color-mix(in srgb, #fff 86%, var(--rd-pill-soft)) !important;
}

body[data-theme="light"] .search-results-drop .search-result-item[data-type]:hover,
body[data-theme="light"] .search-results-drop .search-result-item[data-type]:focus-visible {
  background: #edf3ff !important;
  border-color: color-mix(in srgb, var(--rd-accent) 28%, var(--rd-border)) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12) !important;
}

.search-results-drop .search-result-hint {
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: var(--rd-muted) !important;
  cursor: default !important;
}