/* VK 2018 — Telegram Web K (web.telegram.org/k/) */
:root, html, html.night, html.night body, body {
  --primary-color: #5181b8 !important;
  --primary-color-rgb: 81,129,184 !important;
  --dark-primary-color: #4a76a8 !important;
  --light-primary-color: #f0f2f5 !important;
  --light-filled-primary-color: #f0f2f5 !important;
  --saved-color: #5181b8 !important;
  --link-color: #2a5885 !important;
  --surface-color: #ffffff !important;
  --surface-color-rgb: 255,255,255 !important;
  --background-color: #ffffff !important;
  --background-color-rgb: 255,255,255 !important;
  --body-background-color: #edeef0 !important;
  --body-background-color-rgb: 237,238,240 !important;
  --border-color: #e7e8ec !important;
  --primary-text-color: #000000 !important;
  --primary-text-color-rgb: 0,0,0 !important;
  --secondary-text-color: #818c99 !important;
  --secondary-text-color-rgb: 129,140,153 !important;
  --light-secondary-text-color: #f0f2f5 !important;
  --light-filled-secondary-text-color: #f0f2f5 !important;
  --secondary-color: #818c99 !important;
  --message-background-color: #f0f2f5 !important;
  --message-out-background-color: #e5ebf1 !important;
  --message-out-background-color-rgb: 229,235,241 !important;
  --light-filled-message-out-background-color: #e5ebf1 !important;
  --message-out-primary-color: #2a5885 !important;
  --message-out-primary-color-rgb: 42,88,133 !important;
  --input-search-background-color: #ebedf0 !important;
  --green-color: #4bb34b !important;
  --border-radius: 3px !important;
  --border-radius-medium: 4px !important;
  --border-radius-big: 4px !important;
  --messages-border-radius: 4px !important;
  color-scheme: light !important;
}

html.vk2018, html.vk2018 body { background: #edeef0 !important; font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; }

/* Приложение уезжает вправо/вниз под шапку и меню */
html.vk2018 #page-chats, html.vk2018 .page-chats {
  position: fixed !important; top: 42px !important; left: 170px !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important; background: transparent !important;
}
html.vk2018 .chats-container { height: 100% !important; gap: 0 !important; }

/* Шапка */
#vk-header { position: fixed; inset: 0 0 auto 0; height: 42px; z-index: 9999; background: #4a76a8;
  display: flex; align-items: center; gap: 20px; padding: 0 24px; color: #fff; }
#vk-header .vk-logo { font: 800 19px/1 Arial; letter-spacing: -.3px; width: 130px; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
#vk-header .vk-search { background: #3f6a9b; color: #a3bbd5; border-radius: 15px; padding: 5px 14px; width: 300px; font-size: 13px; }

/* Левое меню */
#vk-nav { position: fixed; top: 54px; left: 0; width: 170px; z-index: 9000; padding-left: 16px; }
#vk-nav a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 4px;
  color: #2a5885; font-size: 13px; cursor: pointer; user-select: none; }
#vk-nav a span { width: 20px; text-align: center; filter: grayscale(1) opacity(.7); }
#vk-nav a:hover { background: #e1e5ec; }
#vk-nav a.on { font-weight: 700; }

/* Плоские колонки вместо плавающих карточек */
#column-left, #column-center, #column-right, .sidebar-left, .sidebar-right {
  border-radius: 0 !important; margin: 0 !important; box-shadow: none !important;
  background: #fff !important; backdrop-filter: none !important; max-height: none !important;
}
#column-left { border: 1px solid #e7e8ec; border-top: 0; height: 100% !important; }
#column-center { border-top: 0; height: 100% !important; }
.chat-background, .chat-background-item, .chat-background-item-pattern, .chat-background-item-color { display: none !important; }
#column-center .chat, .bubbles, .bubbles-inner { background: #fff !important; }
#column-left *, #column-center * { backdrop-filter: none; }

/* Шапка левой колонки + поиск */
.sidebar-header { background: #fff !important; border-bottom: 1px solid #e7e8ec; box-shadow: none !important; }
.input-search-input, .input-search { background: #ebedf0 !important; border-radius: 3px !important; color: #000 !important; }

/* Папки как вкладки ВК */
.menu-horizontal-div { background: #fff !important; border-bottom: 1px solid #e7e8ec; border-radius: 0 !important; }
.menu-horizontal-div-item { color: #2a5885 !important; border-radius: 0 !important; background: transparent !important; }
.menu-horizontal-div-item.active { color: #000 !important; font-weight: 700; }
.menu-horizontal-div-item > i { background: #5181b8 !important; height: 2px !important; border-radius: 0 !important; }
.menu-horizontal-div-item-badge { background: #aeb7c2 !important; color: #fff !important; border-radius: 3px !important; }

/* Диалоги */
.chatlist-chat { border-radius: 0 !important; border-bottom: 1px solid #f0f2f5; margin: 0 !important; }
.chatlist-chat:hover:not(.active) { background: #f0f2f5 !important; }
.chatlist-chat.active, .chatlist-chat.active:hover { background: #5181b8 !important; }
.chatlist-chat.active *, .chatlist-chat.active .peer-title { color: #fff !important; }
.dialog-subtitle-badge { background: #5181b8 !important; color: #fff !important; border-radius: 3px !important; }
.dialog-subtitle-badge.badge-gray { background: #aeb7c2 !important; }
.chatlist-chat.active .dialog-subtitle-badge { background: #fff !important; color: #5181b8 !important; }
.peer-title { font-weight: 700; font-size: 13px; }
.btn-circle.btn-corner, .chatlist-container .btn-corner { background: #5181b8 !important; }

/* Шапка чата */
#column-center .sidebar-header.topbar, .chat-info-container { background: #fff !important; border-bottom: 1px solid #e7e8ec; }
.chat-info .peer-title { color: #2a5885 !important; }

/* Сообщения */
.bubble .bubble-content { border-radius: 4px !important; box-shadow: none !important; background: #f0f2f5 !important; color: #000 !important; }
.bubble.is-out .bubble-content { background: #e5ebf1 !important; }
.bubble .bubble-content::before, .bubble .bubble-content::after, .bubble svg.bubble-tail { display: none !important; }
.bubble .peer-title, .bubble .name { color: #2a5885 !important; }
.bubble .time, .bubble .time * { color: #818c99 !important; }
.bubble .reply { border-left-color: #5181b8 !important; }
.bubble a { color: #2a5885 !important; }

/* Ввод — «Что у Вас нового?» */
.chat-input, .chat-input-container, .chat-input-wrapper { background: #fff !important; box-shadow: none !important; }
.new-message-wrapper .rows-wrapper, .rows-wrapper-wrapper, .input-message-container { background: #fff !important; box-shadow: none !important; }
.rows-wrapper { border: 1px solid #d3d9de; border-radius: 3px !important; }
.input-message-placeholder { font-size: 0 !important; }
.input-message-placeholder::before { content: "Напишите сообщение..."; font-size: 14px; color: #818c99; }
.btn-send-container .btn-circle, .btn-send { background: #5181b8 !important; border-radius: 3px !important; }

/* Профили / настройки как страница ВК */
.profile-container, .sidebar-content, .sidebar-slider .tabs-tab { background: #fff !important; }
.profile-avatars-container, .profile-avatars-avatar, .profile-avatars-avatar .avatar-relative { border-radius: 3px !important; }
.profile-avatars-container .avatar, .profile-container .avatar-xl, .profile-container .avatar-120 { border-radius: 3px !important; }
.profile-name, .profile-name .peer-title { font-size: 20px !important; font-weight: 400 !important; color: #000 !important; text-align: left !important; }
.profile-subtitle { color: #818c99 !important; text-align: left !important; }
.sidebar-left-section { background: #fff !important; border: 0 !important; border-bottom: 1px solid #edeef0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
.row { border-radius: 0 !important; border-bottom: 1px solid #f0f2f5; }
.row:hover { background: #f0f2f5 !important; }
.row-subtitle { color: #818c99 !important; }
.row-title { color: #000 !important; }
.row-title.tgico, .row-subtitle a { color: #2a5885 !important; }
.row-icon, .row .tgico:before { color: #818c99 !important; }
.btn-menu { border-radius: 4px !important; box-shadow: 0 2px 10px rgba(0,0,0,.2) !important; background: #fff !important; }
.btn-menu-item:hover { background: #f0f2f5 !important; }

/* Лента */
#vk-feed { display: none; position: fixed; top: 42px; right: 0; bottom: 0; z-index: 8000; background: #edeef0;
  overflow-y: auto; padding: 12px 16px; font: 13px -apple-system, Roboto, Arial, sans-serif; color: #000; }
#vk-feed.open { display: block; }
#vk-feed .vk-newpost, .vk-tabs, .vk-post { background: #fff; border: 1px solid #e7e8ec; border-radius: 4px; max-width: 640px; margin: 0 auto 10px; }
.vk-newpost { padding: 16px; color: #818c99; cursor: text; }
.vk-tabs { padding: 12px 16px; display: flex; gap: 20px; color: #2a5885; }
.vk-tabs b { color: #000; border-bottom: 2px solid #5181b8; padding-bottom: 10px; margin-bottom: -12px; }
.vk-post { padding: 14px 16px; cursor: pointer; }
.vk-post:hover { background: #fafbfc; }
.vk-post-head { display: flex; gap: 10px; align-items: center; }
.vk-post-head img, .vk-post-head .ph { width: 40px; height: 40px; border-radius: 50%; background: #dce1e6; object-fit: cover; }
.vk-post-head b { display: block; color: #2a5885; font-size: 13px; }
.vk-post-head small { color: #818c99; }
.vk-badge { margin-left: auto; background: #5181b8; color: #fff; font-style: normal; border-radius: 3px; padding: 1px 7px; }
.vk-post-text { margin: 10px 0; line-height: 1.4; }
.vk-post-foot { color: #818c99; border-top: 1px solid #f0f2f5; padding-top: 8px; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #c8cdd2; border-radius: 4px; }

/* ===== v3.1: белый фон как в ВК 2018 ===== */
/* Всё внутри левой колонки — белое (чатлист, папки, сторис, архив, оверлеи) */
html.vk2018 #column-left,
html.vk2018 #column-left .sidebar-slider,
html.vk2018 #column-left .sidebar-slider-item,
html.vk2018 #column-left .tabs-tab,
html.vk2018 #column-left .tabs-container,
html.vk2018 #column-left .sidebar-content,
html.vk2018 #column-left .transition-item,
html.vk2018 #column-left .connection-status-bottom,
html.vk2018 #column-left .chatlist-overlay,
html.vk2018 #column-left .chatlist-parts,
html.vk2018 #column-left .chatlist-top,
html.vk2018 #column-left .chatlist-bottom,
html.vk2018 #column-left .chatlist,
html.vk2018 #column-left .folders-scrollable,
html.vk2018 #column-left .menu-horizontal-scrollable,
html.vk2018 #column-left .stories-list,
html.vk2018 #column-left .stories-list > div,
html.vk2018 #column-left .sidebar-header,
html.vk2018 #column-left archive-dialog,
html.vk2018 #column-left .sidebar-search,
html.vk2018 #column-left .search-super {
  background: #fff !important;
  background-color: #fff !important;
}

/* Градиенты по краям вкладок папок давали тёмные/серые края — убираем */
html.vk2018 .menu-horizontal-gradient,
html.vk2018 .menu-horizontal-gradient-container { display: none !important; }

/* Строки чатов: белые, при наведении светло-серые, активный — синий */
html.vk2018 .chatlist-chat,
html.vk2018 archive-dialog { background: #fff !important; }
html.vk2018 .chatlist-chat:hover:not(.active),
html.vk2018 archive-dialog:hover { background: #f0f2f5 !important; }
html.vk2018 .chatlist-chat.active { background: #5181b8 !important; }

/* Текст на белом */
html.vk2018 .chatlist-chat .peer-title,
html.vk2018 .chatlist-chat .row-title { color: #000 !important; }
html.vk2018 .chatlist-chat .dialog-subtitle,
html.vk2018 .chatlist-chat .dialog-subtitle-span,
html.vk2018 .chatlist-chat .message-time { color: #818c99 !important; }
html.vk2018 .chatlist-chat.active .peer-title,
html.vk2018 .chatlist-chat.active .dialog-subtitle,
html.vk2018 .chatlist-chat.active .dialog-subtitle-span,
html.vk2018 .chatlist-chat.active .message-time { color: #fff !important; }

/* Бейджи: у заглушённых чатов серые, как в ВК */
html.vk2018 .chatlist-chat.is-muted .dialog-subtitle-badge-unread { background: #aeb7c2 !important; }
html.vk2018 .chatlist-chat.is-muted.active .dialog-subtitle-badge-unread { background: #fff !important; color: #5181b8 !important; }

/* Центральная колонка (чат) — тоже белая, без обоев */
html.vk2018 #column-center,
html.vk2018 #column-center .chat,
html.vk2018 #column-center .bubbles,
html.vk2018 #column-center .bubbles-inner,
html.vk2018 #column-center .scrollable,
html.vk2018 #column-center .topbar,
html.vk2018 #column-center .chat-utils,
html.vk2018 #column-center .pinned-container,
html.vk2018 #column-center .chat-input,
html.vk2018 #column-center .chat-input-container { background: #fff !important; background-image: none !important; }

/* Стрелки/кнопки поверх белого */
html.vk2018 .btn-icon { color: #818c99 !important; }
html.vk2018 .tgico.button-icon, html.vk2018 .input-search-icon { color: #818c99 !important; }

/* ===== v3.2: фикс по скриншоту ===== */
/* 1. Новые обои Telegram (canvas-слой в начале body) — убираем, это и был тёмный фон */
html.vk2018 body > div:has(> [class*="_Layer_"]),
html.vk2018 [class*="_Layer_1kj7f"],
html.vk2018 [class*="_GradientCanvas_"],
html.vk2018 .chat-background,
html.vk2018 .chat-background-item { display: none !important; }
html.vk2018, html.vk2018 body, html.vk2018 #page-chats { background: #edeef0 !important; background-image: none !important; }

/* 2. Убираем отступы «плавающих секций» — из-за них центр начинался на 16px ниже */
html.vk2018 #column-center { --page-chats-padding: 0px !important; padding: 0 !important; margin: 0 !important; }
html.vk2018 #main-columns { padding: 0 !important; gap: 0 !important; }
html.vk2018 body.rounded-sections #column-left,
html.vk2018 body.rounded-sections #column-center { border-radius: 0 !important; }

/* 3. Плавающая «таблетка» с папками → плоская полоса */
html.vk2018 .chatlist-overlay { border-radius: 0 !important; box-shadow: none !important; background: #fff !important; border-bottom: 1px solid #e7e8ec; }

/* 4. Активная папка: линия снизу, а не зачёркивание текста */
html.vk2018 .menu-horizontal-div-item-background { display: none !important; }
html.vk2018 .menu-horizontal-div-item.active .menu-horizontal-div-item-background {
  display: block !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  width: auto !important; height: 2px !important; transform: none !important; border-radius: 0 !important; background: #5181b8 !important;
}
html.vk2018 .menu-horizontal-div-item { position: relative; }

/* 5. Иконки шапки (бургер, поиск) — видимые на белом */
html.vk2018 .animated-menu-icon,
html.vk2018 .animated-menu-icon::before,
html.vk2018 .animated-menu-icon::after { background-color: #818c99 !important; }
html.vk2018 .sidebar-header .btn-icon, html.vk2018 .sidebar-header .tgico { color: #818c99 !important; }

/* ===== v4.0: расширенные профили и редактор публикаций ===== */
#vk-profile-modal, #vk-composer { display:none; position:fixed; inset:0; z-index:10050; }
#vk-profile-modal.open, #vk-composer.open { display:block; }
.vk-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); }
.vk-profile-card, .vk-composer-card { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(680px,calc(100vw - 40px)); max-height:calc(100vh - 40px); overflow:auto; background:#fff; border-radius:4px; box-shadow:0 8px 35px rgba(0,0,0,.25); }
.vk-profile-cover { height:110px; background:#5181b8; }
.vk-profile-main { padding:0 28px 28px; position:relative; }
.vk-profile-avatar { width:120px; height:120px; object-fit:cover; border-radius:3px; border:4px solid #fff; margin-top:-60px; background:#dce1e6; }
.vk-profile-avatar.ph { display:block; }
.vk-profile-main h2 { margin:12px 0 3px; font-size:24px; font-weight:400; }
.vk-profile-status { color:#818c99; }
.vk-profile-stats { display:flex; gap:45px; border-top:1px solid #e7e8ec; border-bottom:1px solid #e7e8ec; margin:20px 0; padding:14px 0; }
.vk-profile-stats span { display:flex; flex-direction:column; }
.vk-profile-stats b { color:#2a5885; font-size:20px; font-weight:400; }
.vk-profile-stats small { color:#818c99; }
.vk-profile-music { padding:12px; background:#f0f2f5; color:#2a5885; margin-bottom:15px; }
.vk-profile-fields > div { display:flex; gap:20px; padding:10px 0; border-bottom:1px solid #f0f2f5; }
.vk-profile-fields b { width:120px; color:#818c99; font-weight:400; }
.vk-profile-fields span { color:#000; }
.vk-modal-close { position:absolute; right:14px; top:10px; border:0; background:none; color:#818c99; font-size:28px; cursor:pointer; z-index:2; }
.vk-composer-card { width:min(700px,calc(100vw - 40px)); }
.vk-composer-head { padding:15px 18px; border-bottom:1px solid #e7e8ec; font-size:16px; color:#000; position:relative; }
.vk-composer-body { padding:18px; }
#vk-post-text { width:100%; min-height:130px; resize:vertical; box-sizing:border-box; border:1px solid #d3d9de; border-radius:3px; padding:12px; font:14px Arial,sans-serif; outline:none; }
#vk-post-text:focus { border-color:#5181b8; }
.vk-composer-row { display:flex; gap:8px; margin:12px 0; }
.vk-file-btn { display:inline-block; padding:9px 12px; background:#f0f2f5; color:#2a5885; border-radius:3px; cursor:pointer; }
.vk-file-btn input { display:none; }
.vk-attachments { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.vk-attachment { background:#f0f2f5; padding:6px 9px; border-radius:3px; color:#2a5885; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vk-publish-row { display:flex; gap:10px; align-items:center; border-top:1px solid #e7e8ec; padding-top:15px; }
#vk-target { flex:1; padding:9px; border:1px solid #d3d9de; border-radius:3px; background:#fff; }
#vk-publish { background:#5181b8; color:#fff; border:0; border-radius:3px; padding:10px 20px; cursor:pointer; }
.vk-composer-note { margin-top:12px; color:#818c99; font-size:12px; line-height:1.4; }

/* ===== v5.0: страница профиля как в ВК 2018 ===== */
#vk-header .vk-search-input { border: 0; outline: 0; color: #fff; font: 13px -apple-system, Roboto, Arial, sans-serif; box-sizing: border-box; }
#vk-header .vk-search-input::placeholder { color: #a3bbd5; }
#vk-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: rgba(0,0,0,.8); color: #fff; padding: 10px 18px; border-radius: 4px; font: 13px Arial, sans-serif; z-index: 20000; opacity: 0; pointer-events: none; transition: opacity .2s; }
#vk-toast.on { opacity: 1; }

#vk-page { display: none; position: fixed; top: 42px; right: 0; bottom: 0; z-index: 8000; background: #edeef0; overflow-y: auto; padding: 12px 16px; font: 13px -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; color: #000; }
#vk-page.open { display: block; }
#vk-page .vk-card { background: #fff; border: 1px solid #e7e8ec; border-radius: 4px; padding: 14px 16px; margin-bottom: 10px; box-sizing: border-box; }
.vkp-cols { display: flex; gap: 12px; max-width: 980px; margin: 0 auto; align-items: flex-start; }
.vkp-left { width: 250px; flex: none; }
.vkp-right { flex: 1; min-width: 0; }

.vkp-ava { padding: 10px !important; }
.vkp-avatar { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; background: #dce1e6; }
.vkp-btns { display: flex; gap: 8px; margin-top: 10px; }
.vkp-btn { flex: 1; text-align: center; background: #e5ebf1; color: #55677d; border-radius: 4px; padding: 8px 6px; cursor: pointer; user-select: none; }
.vkp-btn:hover { background: #dce4ec; }
.vkp-btn.sm { flex: none; width: 36px; padding: 8px 0; }

.vkp-fr h4, .vkp-photos h4 { margin: 0 0 12px; font-size: 13px; font-weight: 400; color: #000; }
.vkp-photos h4 span { color: #818c99; margin-left: 4px; }
.vkp-fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 6px; }
.vkp-friend { text-align: center; cursor: pointer; min-width: 0; }
.vkp-friend img, .vkp-friend .ph { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #dce1e6; display: block; margin: 0 auto 4px; }
.vkp-friend small { color: #2a5885; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vkp-info { padding: 20px 20px 0 !important; }
.vkp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vkp-top h2 { margin: 0; font-size: 20px; font-weight: 400; color: #000; }
.vkp-online { color: #818c99; font-size: 13px; white-space: nowrap; }
.vkp-music { margin-top: 6px; color: #2a5885; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.vkp-music:hover { text-decoration: underline; }
.vkp-music .eq { color: #5181b8; font-size: 9px; letter-spacing: -1px; }
.vkp-bio { margin-top: 6px; color: #000; line-height: 1.4; white-space: pre-wrap; }
.vkp-fields { border-top: 1px solid #e7e8ec; margin-top: 16px; padding: 14px 0 16px; }
.vkp-field { display: flex; padding: 4px 0; line-height: 1.5; }
.vkp-field span { width: 200px; flex: none; color: #818c99; }
.vkp-field b { font-weight: 400; color: #2a5885; word-break: break-word; }
.vkp-stats { display: flex; flex-wrap: wrap; justify-content: space-around; border-top: 1px solid #e7e8ec; margin: 0 -20px; padding: 14px 10px; }
.vkp-stat { text-align: center; cursor: pointer; padding: 0 10px; }
.vkp-stat i { display: block; font-style: normal; font-size: 22px; color: #2a5885; line-height: 1.2; }
.vkp-stat small { color: #818c99; font-size: 13px; }
.vkp-stat:hover small { color: #2a5885; }

.vkp-pgrid { display: flex; gap: 4px; overflow: hidden; }
.vkp-pgrid img { height: 130px; width: auto; max-width: 33%; object-fit: cover; border-radius: 2px; background: #dce1e6; }
#vk-page .vkp-newpost { color: #818c99; cursor: text; padding: 16px !important; }
#vk-page .vkp-walltabs { display: flex; gap: 20px; color: #2a5885; padding: 12px 16px 0 !important; }
.vkp-walltabs b { color: #000; border-bottom: 2px solid #5181b8; padding-bottom: 10px; font-weight: 400; }
.vkp-empty { color: #818c99; text-align: center; padding: 30px !important; }
#vk-page .vk-post { max-width: none; margin: 0 0 10px; }
.vkp-wallimg { max-width: 100%; border-radius: 3px; margin-bottom: 8px; display: block; }

/* ===== v6.0: мессенджер и чат как в ВК 2018 ===== */

/* --- Поиск в списке диалогов: лупа слева, «+» справа, плоская белая шапка --- */
html.vk2018 #column-left .sidebar-header.main-search-sidebar-header { height: 52px !important; padding: 0 12px !important; border-bottom: 1px solid #e7e8ec !important; }
html.vk2018 #column-left .input-search { background: transparent !important; border-radius: 0 !important; }
html.vk2018 #column-left .input-search-input { background: transparent !important; font-size: 13px !important; color: #000 !important; }
html.vk2018 #column-left .input-search-placeholder { color: #aeb7c2 !important; font-size: 13px !important; }
html.vk2018 #column-left .input-field-border { display: none !important; }
html.vk2018 #column-left .btn-new-menu { width: 40px !important; height: 40px !important; right: 12px !important; bottom: 16px !important; box-shadow: 0 2px 8px rgba(0,0,0,.2) !important; }

/* --- Строки диалогов: аватар 50px, жирное имя, серый превью, время справа --- */
html.vk2018 .chatlist-chat { padding-left: 14px !important; padding-right: 14px !important; border-bottom: 1px solid #e7e8ec !important; }
html.vk2018 .chatlist-chat .dialog-avatar { --size: 50px; width: 50px !important; height: 50px !important; min-width: 50px; border-radius: 50% !important; }
html.vk2018 .chatlist-chat .dialog-avatar .avatar-photo { border-radius: 50% !important; }
html.vk2018 .chatlist-chat .row-title, html.vk2018 .chatlist-chat .peer-title { font-size: 13px !important; font-weight: 700 !important; color: #000 !important; }
html.vk2018 .chatlist-chat .dialog-subtitle-span, html.vk2018 .chatlist-chat .row-subtitle { font-size: 13px !important; color: #656565 !important; }
html.vk2018 .chatlist-chat .message-time, html.vk2018 .chatlist-chat .dialog-title-details { font-size: 12px !important; color: #999 !important; }
html.vk2018 .dialog-muted-icon { color: #aeb7c2 !important; }
html.vk2018 .chatlist-chat .message-status { color: #5181b8 !important; }

/* Непрочитанный диалог — светло-голубая подложка и синий счётчик, как в ВК */
html.vk2018 .chatlist-chat:has(.dialog-subtitle-badge-unread.is-visible):not(.active),
html.vk2018 .chatlist-chat.is-unread:not(.active) { background: #f0f4f8 !important; }
html.vk2018 .dialog-subtitle-badge { min-width: 20px; height: 20px !important; line-height: 20px !important; font-size: 11px !important; font-weight: 700; border-radius: 10px !important; }
html.vk2018 .dialog-subtitle-badge-pinned { background: transparent !important; color: #aeb7c2 !important; }
html.vk2018 .chatlist-chat.active .dialog-subtitle-span, html.vk2018 .chatlist-chat.active .row-subtitle,
html.vk2018 .chatlist-chat.active .message-time { color: #e4ecf5 !important; }

/* Архив */
html.vk2018 archive-dialog { border-bottom: 1px solid #e7e8ec !important; }

/* --- Шапка чата: «‹ Назад» слева, название по центру, лупа и «···» справа --- */
html.vk2018 #column-center .sidebar-header.topbar { height: 52px !important; padding: 0 12px !important; border-bottom: 1px solid #e7e8ec !important; background: #fff !important; box-shadow: none !important; }
html.vk2018 #column-center .chat-info { justify-content: center !important; text-align: center; }
html.vk2018 #column-center .chat-info .person, html.vk2018 #column-center .chat-info .content { align-items: center !important; }
html.vk2018 #column-center .chat-info .avatar { display: none !important; }
html.vk2018 #column-center .chat-info .peer-title { font-size: 13px !important; font-weight: 700 !important; color: #000 !important; }
html.vk2018 #column-center .chat-info .info, html.vk2018 #column-center .chat-info .bottom { font-size: 12px !important; color: #818c99 !important; }
html.vk2018 #column-center .topbar .sidebar-close-button, html.vk2018 #column-center .topbar .chat-back-button { color: #5181b8 !important; }
html.vk2018 #column-center .topbar .btn-icon { color: #aeb7c2 !important; }
html.vk2018 #column-center .topbar .btn-icon:hover { color: #5181b8 !important; background: transparent !important; }

/* --- Сообщения: плоские строки без «пузырей», имя синим, время серым --- */
html.vk2018 #column-center .bubbles { padding: 0 !important; }
html.vk2018 .bubbles-inner { max-width: none !important; width: 100% !important; padding: 8px 16px !important; }
html.vk2018 .bubble { max-width: none !important; padding: 2px 0 !important; }
html.vk2018 .bubble .bubble-content-wrapper { max-width: 100% !important; }
html.vk2018 .bubble .bubble-content, html.vk2018 .bubble.is-out .bubble-content, html.vk2018 .bubble.is-in .bubble-content {
  background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 2px 8px !important; max-width: 100% !important; }
html.vk2018 .bubble:hover .bubble-content { background: #f5f7fa !important; }
html.vk2018 .bubble .message { font-size: 13px !important; line-height: 1.45; color: #000 !important; }
html.vk2018 .bubble .name, html.vk2018 .bubble .peer-title { font-size: 13px !important; font-weight: 700 !important; color: #2a5885 !important; }
html.vk2018 .bubble .time, html.vk2018 .bubble .time .i18n { font-size: 11px !important; color: #999 !important; }
html.vk2018 .bubble .time .tgico, html.vk2018 .bubble .message-status { color: #5181b8 !important; }
html.vk2018 .bubble .avatar { border-radius: 50% !important; }
html.vk2018 .bubble .reply { border-left: 2px solid #5181b8 !important; background: transparent !important; border-radius: 0 !important; }
html.vk2018 .bubble .reply-title { color: #2a5885 !important; font-weight: 700; }
html.vk2018 .bubble .reply-subtitle { color: #656565 !important; }
html.vk2018 .bubble .attachment, html.vk2018 .bubble .media-container { border-radius: 3px !important; }
html.vk2018 .bubble .reactions .reaction { border-radius: 10px !important; background: #f0f2f5 !important; color: #2a5885 !important; }
html.vk2018 .bubble.is-selected .bubble-content { background: #e5ebf1 !important; }

/* Разделитель дат и служебные сообщения — тонкая серая строка */
html.vk2018 .bubble.service .bubble-content, html.vk2018 .bubble.is-date .bubble-content { background: transparent !important; color: #818c99 !important; font-size: 12px !important; text-align: center; }
html.vk2018 .bubble.service .service-msg, html.vk2018 .bubble.service .service-msg * { color: #818c99 !important; background: transparent !important; }

/* Кнопка «Перейти в конец истории» */
html.vk2018 .bubbles-go-down { background: #fff !important; border: 1px solid #d3d9de !important; border-radius: 17px !important; box-shadow: 0 1px 4px rgba(0,0,0,.12) !important; color: #5181b8 !important; width: auto !important; min-width: 34px; height: 34px !important; padding: 0 12px 0 8px; }
html.vk2018 .bubbles-go-down .tgico { color: #818c99 !important; }
html.vk2018 .bubbles-go-down::after { content: "Перейти в конец истории"; font-size: 13px; color: #2a5885; margin-left: 6px; white-space: nowrap; }
html.vk2018 .bubbles-go-down .badge { background: #5181b8 !important; }

/* --- Поле ввода: скрепка, «Напишите сообщение…», камера/смайл/микрофон --- */
html.vk2018 .chat-input { border-top: 1px solid #e7e8ec !important; padding: 8px 12px !important; }
html.vk2018 .chat-input .rows-wrapper { border: 1px solid #d3d9de !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; min-height: 38px; }
html.vk2018 .chat-input .rows-wrapper:focus-within { border-color: #5181b8 !important; }
html.vk2018 .chat-input .input-message-input { font-size: 13px !important; color: #000 !important; }
html.vk2018 .chat-input .btn-icon, html.vk2018 .chat-input .toggle-emoji, html.vk2018 .chat-input .attach-file { color: #aeb7c2 !important; background: transparent !important; }
html.vk2018 .chat-input .btn-icon:hover, html.vk2018 .chat-input .toggle-emoji:hover { color: #5181b8 !important; }
html.vk2018 .chat-input .btn-send-container .btn-circle { background: transparent !important; color: #aeb7c2 !important; box-shadow: none !important; width: 38px; height: 38px; }
html.vk2018 .chat-input .btn-send-container .btn-circle.send, html.vk2018 .chat-input .btn-send.send { background: #5181b8 !important; color: #fff !important; border-radius: 50% !important; }

/* Меню и контекстные меню */
html.vk2018 .btn-menu-item { font-size: 13px !important; color: #2a5885 !important; }
html.vk2018 .btn-menu-item .tgico { color: #818c99 !important; }
html.vk2018 .btn-menu-item.danger, html.vk2018 .btn-menu-item.danger .tgico { color: #e64646 !important; }

/* ===== v6.1: фикс «съехавшего» списка и шапки чата ===== */

/* --- Список диалогов: явная раскладка, строка 72px, аватар слева, текст со смещением --- */
html.vk2018 #column-left .chatlist-top, html.vk2018 #column-left .chatlist-bottom { padding: 0 !important; }
html.vk2018 #column-left .chatlist { padding: 0 !important; margin: 0 !important; }
html.vk2018 #column-left .chatlist-chat, html.vk2018 #column-left archive-dialog {
  position: absolute !important; left: 0 !important; right: 0 !important; width: 100% !important; box-sizing: border-box !important;
  height: 72px !important; margin: 0 !important; border-radius: 0 !important;
  padding: 0 14px 0 76px !important; border-bottom: 1px solid #e7e8ec !important;
}
html.vk2018 #column-left .chatlist-chat .dialog-avatar,
html.vk2018 #column-left archive-dialog [class*="_Media_"] {
  position: absolute !important; left: 14px !important; top: 11px !important; bottom: auto !important; right: auto !important;
  width: 50px !important; height: 50px !important; min-width: 50px !important; margin: 0 !important; border-radius: 50% !important; overflow: hidden;
}
html.vk2018 #column-left .chatlist-chat .dialog-avatar img, html.vk2018 #column-left .chatlist-chat .dialog-avatar canvas { width: 100% !important; height: 100% !important; border-radius: 50% !important; }
html.vk2018 #column-left .chatlist-chat .row-row, html.vk2018 #column-left archive-dialog .row-row { padding-left: 0 !important; margin-left: 0 !important; }
html.vk2018 #column-left .chatlist-chat .row-title-row { padding-top: 14px !important; }
html.vk2018 #column-left .chatlist-chat .row-subtitle-row { padding-top: 2px !important; }
html.vk2018 #column-left .chatlist-chat .dialog-subtitle-media { display: none !important; }

/* Плавающая «таблетка» папок → плоская полоса */
html.vk2018 #column-left .chatlist-overlay,
html.vk2018 #column-left .menu-horizontal-scrollable,
html.vk2018 #column-left .folders-tabs-scrollable,
html.vk2018 #column-left .menu-horizontal-div { border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; border: 0 !important; background: #fff !important; width: 100% !important; max-width: none !important; }
html.vk2018 #column-left .chatlist-overlay { border-bottom: 1px solid #e7e8ec !important; padding: 0 !important; }
html.vk2018 #column-left .menu-horizontal-div-item { font-size: 13px !important; text-transform: none !important; padding: 0 12px !important; }
html.vk2018 #column-left .stories-list { display: none !important; }

/* --- Шапка чата: плоская белая полоса вместо плавающих «таблеток» --- */
html.vk2018 #column-center .sidebar-header.topbar { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; height: 52px !important; background: #fff !important; border-bottom: 1px solid #e7e8ec !important; box-shadow: none !important; border-radius: 0 !important; transform: none !important; }
html.vk2018 #column-center .chat-info-container {
  position: relative !important; display: flex !important; align-items: center; width: 100% !important; height: 52px !important;
  margin: 0 !important; padding: 0 12px !important; box-sizing: border-box; background: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
}
/* «‹ Назад» слева */
html.vk2018 #column-center .topbar .sidebar-close-button { display: flex !important; align-items: center; width: auto !important; padding: 0 8px !important; height: 36px; flex: none; color: #818c99 !important; }
html.vk2018 #column-center .topbar .sidebar-close-button::after { content: "Назад"; font-size: 13px; color: #818c99; margin-left: 2px; }
html.vk2018 #column-center .topbar .sidebar-close-button .badge { display: none !important; }
/* название и «online» по центру */
html.vk2018 #column-center .chat-info { flex: 1 !important; min-width: 0; display: flex !important; justify-content: center !important; padding: 0 !important; }
html.vk2018 #column-center .chat-info .person { display: flex !important; justify-content: center !important; width: 100%; }
html.vk2018 #column-center .chat-info .content { text-align: center !important; align-items: center !important; flex: 0 1 auto !important; padding: 0 !important; }
html.vk2018 #column-center .chat-info .top, html.vk2018 #column-center .chat-info .bottom { justify-content: center !important; text-align: center; }
html.vk2018 #column-center .chat-info .user-title .peer-title { font-size: 13px !important; font-weight: 700 !important; color: #000 !important; }
html.vk2018 #column-center .chat-info .bottom .info { font-size: 12px !important; color: #818c99 !important; }
/* аватар собеседника справа от иконок, как в ВК */
html.vk2018 #column-center .chat-info .person-avatar { display: block !important; position: absolute !important; right: 12px !important; top: 8px !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; }
html.vk2018 #column-center .chat-info .person-avatar img { width: 100% !important; height: 100% !important; border-radius: 50% !important; }
html.vk2018 #column-center .chat-utils { flex: none; margin-right: 48px !important; gap: 0 !important; }
html.vk2018 #column-center .chat-utils .btn-icon { width: 34px !important; height: 34px !important; font-size: 20px; }

/* Закреплённое сообщение — тонкая плоская строка под шапкой */
html.vk2018 #column-center .topbar-floating-plates { position: absolute !important; top: 52px !important; left: 0 !important; right: 0 !important; padding: 0 !important; margin: 0 !important; z-index: 5; }
html.vk2018 #column-center .topbar-floating-plates .pinned-container { width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important; border-bottom: 1px solid #e7e8ec !important; background: #fff !important; backdrop-filter: none !important; }
html.vk2018 .pinned-message-title, html.vk2018 .pinned-container-title { color: #2a5885 !important; font-size: 13px !important; font-weight: 700; }
html.vk2018 .pinned-message-subtitle, html.vk2018 .pinned-container-subtitle { color: #656565 !important; font-size: 13px !important; }
html.vk2018 .pinned-message-border { display: none !important; }

/* --- Сообщения: зазор под шапку и ровная колонка как в ВК --- */
html.vk2018 #column-center .bubbles-inner { padding-top: 64px !important; padding-left: 24px !important; padding-right: 24px !important; }
html.vk2018 .bubbles-group { padding: 6px 0 !important; }
html.vk2018 .bubble.is-in .bubble-content-wrapper, html.vk2018 .bubble.is-out .bubble-content-wrapper { margin: 0 !important; }
html.vk2018 .bubble.is-out { flex-direction: row !important; justify-content: flex-start !important; }
html.vk2018 .bubble .forward, html.vk2018 .bubble .forward .peer-title, html.vk2018 .bubble .forward .name { color: #2a5885 !important; font-size: 13px !important; }
html.vk2018 .bubble .forward-title { color: #818c99 !important; }

/* ===== v6.2: заголовки групп сообщений (аватар, имя, время) — только личные чаты ===== */
html.vk2018 .bubbles.vk-private .bubble { position: relative; }
html.vk2018 .bubbles.vk-private .bubble:not(.service):not(.is-date) .bubble-content-wrapper { margin-left: 48px !important; }
html.vk2018 .bubbles.vk-private .bubble.vk-first { padding-top: 24px !important; }
html.vk2018 .vk-ghead { position: absolute; left: 0; top: 2px; right: 0; height: 36px; pointer-events: none; font-size: 13px; display: flex; align-items: flex-start; gap: 8px; padding-left: 52px; box-sizing: border-box; line-height: 18px; }
html.vk2018 .vk-gava { position: absolute; left: 8px; top: 2px; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #dce1e6; pointer-events: auto; cursor: pointer; }
html.vk2018 .vk-gava img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.vk2018 .vk-gava.ph { background: #5181b8; color: #fff; font-weight: 700; font-size: 15px; line-height: 36px; text-align: center; }
html.vk2018 .vk-gname { color: #2a5885; font-weight: 700; pointer-events: auto; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
html.vk2018 .vk-gname:hover { text-decoration: underline; }
html.vk2018 .vk-gtime { color: #999; font-size: 12px; white-space: nowrap; }

/* ===== v6.4: фикс обрезанного поля ввода, плоское закрепление, цвета голосовых ===== */

/* Шапка НЕ должна занимать место в потоке (в Telegram она плавающая) — иначе вся колонка
   сдвигается вниз на высоту шапки и поле ввода уезжает за нижний край окна. */
html.vk2018 #column-center .sidebar-header.topbar {
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 6 !important; height: 52px !important;
}
html.vk2018 #column-center .chat { height: 100% !important; max-height: 100% !important; }
html.vk2018 #column-center .chat-input { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 6; transform: none !important; background: #fff !important; }
html.vk2018 #column-center .chat-input-container, html.vk2018 #column-center .chat-input-wrapper { max-width: none !important; width: 100% !important; }

/* Место под шапку: обычная — 52px, с закреплённым сообщением — ещё 48px */
html.vk2018 #column-center .bubbles-inner { padding-top: 60px !important; padding-bottom: 12px !important; }
html.vk2018 #column-center:has(.topbar-floating-plates .pinned-container:not(.hide)) .bubbles-inner { padding-top: 108px !important; }

/* Закреплённое сообщение: убираем «таблетку» (скругление, тень, фон-псевдоэлементы) */
html.vk2018 #column-center .topbar-floating-plates .pinned-container,
html.vk2018 #column-center .topbar-floating-plates .pinned-container::before,
html.vk2018 #column-center .topbar-floating-plates .pinned-container::after,
html.vk2018 #column-center .topbar-floating-plates .pinned-container-wrapper,
html.vk2018 #column-center .topbar-floating-plates .pinned-container-wrapper::before,
html.vk2018 #column-center .topbar-floating-plates .pinned-container-wrapper::after,
html.vk2018 #column-center .topbar-floating-plates .pinned-message-wrapper {
  border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
}
html.vk2018 #column-center .topbar-floating-plates .pinned-container { margin: 0 !important; width: 100% !important; left: 0 !important; right: 0 !important; transform: none; background: #fff !important; border-bottom: 1px solid #e7e8ec !important; }
html.vk2018 #column-center .topbar-floating-plates .pinned-container-wrapper { background: transparent !important; padding-left: 12px; }
html.vk2018 .pinned-message-media { border-radius: 3px !important; }

/* Подсказка в поле ввода, как в ВК */
html.vk2018 .chat-input .input-message-placeholder { font-size: 0 !important; }
html.vk2018 .chat-input .input-message-placeholder::before { content: "Напишите сообщение…"; font-size: 13px; color: #939393; }
html.vk2018 .chat-input .input-message-input { min-height: 20px; }

/* Время внутри сообщения — только при наведении (в заголовке группы оно уже есть) */
html.vk2018 .bubbles.vk-private .bubble:not(.vk-no-hide) .message .time { opacity: 0; transition: opacity .12s; }
html.vk2018 .bubbles.vk-private .bubble:hover .message .time { opacity: 1; }

/* Голосовые и аудио в цветах ВК */
html.vk2018 { --message-primary-color: #5181b8; --message-in-primary-color: #5181b8; --message-out-primary-color: #5181b8; --message-out-primary-color-rgb: 81,129,184; }
html.vk2018 .audio-element .audio-toggle, html.vk2018 .audio-element .audio-download,
html.vk2018 .bubble.is-out .audio-element .audio-toggle, html.vk2018 .bubble.is-out .audio-element .audio-download { background: #5181b8 !important; color: #fff !important; }
html.vk2018 .audio-element .audio-time, html.vk2018 .audio-element .audio-subtitle { color: #818c99 !important; }
html.vk2018 .bubble.is-out .audio-element .audio-time { color: #818c99 !important; }
html.vk2018 .bubble .audio-to-text-button { background: #f0f2f5 !important; color: #5181b8 !important; border-radius: 3px !important; }


/* ===== v6.5: высота колонок под шапку ВК, поле ввода, закреп; переписка как в v6.1 ===== */

/* Telegram считает высоту колонок от полной высоты окна (100vh), а страница сдвинута вниз на 42px
   под синюю шапку — из-за этого низ чата (поле ввода) и список диалогов уезжали за край окна. */
html.vk2018 { --vh: calc((100vh - 42px) / 100) !important; }
html.vk2018 #main-columns, html.vk2018 #column-left, html.vk2018 #column-right {
  height: calc(100vh - 42px) !important; max-height: calc(100vh - 42px) !important;
}
html.vk2018 #column-center, html.vk2018 #column-center > .chats-container {
  height: 100% !important; max-height: 100% !important;
}

/* Поле ввода лежит поверх чата — оставляем под ним место, чтобы последние сообщения не прятались */
html.vk2018 #column-center .bubbles-inner { padding-bottom: 84px !important; }

/* ===== v6.6: правки по реальной вёрстке #column-center ===== */

/* Закреплённое сообщение: плашка (.pinned-container) на всю ширину, без скруглений и смещения.
   Внутренние кнопки (меню, «открепить») не трогаем. */
html.vk2018 #column-center .topbar-floating-plates { left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; transform: none !important; }
html.vk2018 #column-center .topbar-floating-plates > .pinned-container { left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; transform: none !important; }
html.vk2018 #column-center .topbar-floating-plates .pinned-container,
html.vk2018 #column-center .topbar-floating-plates .pinned-container-wrapper { border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
html.vk2018 #column-center .topbar-floating-plates .pinned-container-wrapper { margin: 0 !important; min-width: 0; }
html.vk2018 #column-center .topbar-floating-plates .pinned-container-content { min-width: 0; margin-left: 0 !important; }
html.vk2018 #column-center .topbar-floating-plates .pinned-container-title,
html.vk2018 #column-center .topbar-floating-plates .pinned-container-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Отступы сверху/снизу списка сообщений задаёт сам Telegram (блоки .bubbles-padding-top / -bottom,
   высота выставляется скриптом). Наши прежние padding-top/bottom удваивали отступ и прятали сообщения. */
html.vk2018 #column-center .bubbles-inner { padding: 0 16px !important; }
html.vk2018 #column-center:has(.topbar-floating-plates .pinned-container:not(.hide)) .bubbles-inner { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Подсказка в поле ввода: в этой версии Telegram это .input-field-placeholder (а не .input-message-placeholder) */
html.vk2018 .chat-input .input-field-placeholder { font-size: 0 !important; }
html.vk2018 .chat-input .input-field-placeholder::before { content: "Напишите сообщение…"; font-size: 13px; color: #939393; }


/* ===== v6.7: поле ввода закреплено у нижнего края окна (position: fixed) =====
   Не зависит от высоты колонок и предков. Левый край и ширину (--vk-cx / --vk-cw) content.js
   берёт из #column-center — это только чтение размеров, обратной связи нет. */
html.vk2018 #column-center .chat-input {
  position: fixed !important; top: auto !important; bottom: 0 !important;
  left: var(--vk-cx, 0px) !important; right: auto !important; width: var(--vk-cw, 100%) !important;
  transform: none !important; box-sizing: border-box !important; z-index: 20 !important;
}

/* ===== v6.8: шапка/закреп на всю ширину колонки ===== */

html.vk2018 #column-center .sidebar-header.topbar {
  left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important;
  margin: 0 !important; transform: none !important; box-sizing: border-box !important;
}
html.vk2018 #column-center .topbar .chat-info-container { width: 100% !important; max-width: none !important; }

html.vk2018 #column-center .topbar-floating-plates *:not(.btn-icon):not(.btn-icon *),
html.vk2018 #column-center .topbar-floating-plates *::before,
html.vk2018 #column-center .topbar-floating-plates *::after {
  border-radius: 0 !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important;
}
html.vk2018 #column-center .topbar-floating-plates .pinned-container-content,
html.vk2018 #column-center .topbar-floating-plates .pinned-message-content {
  transform: none !important; left: 0 !important; margin-left: 0 !important;
}
html.vk2018 #column-center .topbar-floating-plates .pinned-container-wrapper { padding-left: 16px !important; box-sizing: border-box; }

/* ===== v6.9: переписка — пузыри (как до «плоского» стиля) ===== */
html.vk2018 .bubble { max-width: min(480px, 85%) !important; padding: 2px 0 !important; }
html.vk2018 .bubble.is-out { flex-direction: row-reverse !important; justify-content: flex-start !important; }
html.vk2018 .bubble.is-in .bubble-content-wrapper,
html.vk2018 .bubble.is-out .bubble-content-wrapper { margin: 0 !important; max-width: 100% !important; }
html.vk2018 .bubble .bubble-content,
html.vk2018 .bubble.is-in .bubble-content {
  background: #f0f2f5 !important; border-radius: 4px !important; box-shadow: none !important;
  padding: 6px 10px !important; max-width: 100% !important;
}
html.vk2018 .bubble.is-out .bubble-content { background: #e5ebf1 !important; }
html.vk2018 .bubble:hover .bubble-content { background: #ebeef2 !important; }
html.vk2018 .bubble.is-out:hover .bubble-content { background: #dce5ee !important; }
html.vk2018 .bubbles-inner { max-width: none !important; width: 100% !important; }
html.vk2018 #column-center .bubbles-inner { padding-left: 16px !important; padding-right: 16px !important; }

/* ===== v6.10: поле ввода целиком на экране (TipTap / new-message-wrapper) =====
   absolute bottom:0 внутри колонки уезжал на ~42px ниже окна (шапка ВК) — было видно
   только верхнюю половину. Пиним к низу viewport (fixed) + ширина колонки из --vk-cx/--vk-cw. */
html.vk2018 #column-center .chat-input {
  position: fixed !important; top: auto !important; bottom: 0 !important;
  left: var(--vk-cx, 0px) !important; right: auto !important; width: var(--vk-cw, 100%) !important;
  height: auto !important; min-height: 54px !important; max-height: none !important;
  z-index: 30 !important; transform: none !important; box-sizing: border-box !important;
  padding: 8px 12px !important; margin: 0 !important; display: block !important;
  overflow: visible !important; background: #fafbfc !important; border-top: 1px solid #d3d9de !important;
}
/* Только ширина — внутренние position Telegram (rows-wrapper и т.п.) не трогаем */
html.vk2018 #column-center .chat-input .chat-input-container,
html.vk2018 #column-center .chat-input .chat-input-wrapper,
html.vk2018 #column-center .chat-input .rows-wrapper-wrapper {
  max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
  transform: none !important;
}
html.vk2018 #column-center .chat-input .rows-wrapper,
html.vk2018 #column-center .chat-input .new-message-wrapper {
  min-height: 40px !important; border: 1px solid #c5d0db !important; border-radius: 4px !important;
  background: #fff !important; box-shadow: none !important; box-sizing: border-box !important;
}
html.vk2018 #column-center .chat-input .rows-wrapper:focus-within,
html.vk2018 #column-center .chat-input .new-message-wrapper:focus-within { border-color: #5181b8 !important; }
html.vk2018 #column-center .chat-input .input-message-container { min-height: 24px !important; background: transparent !important; border: 0 !important; }
html.vk2018 #column-center .chat-input .input-field-height-wrapper { min-height: 20px !important; }
html.vk2018 #column-center .chat-input .input-message-input,
html.vk2018 #column-center .chat-input .tiptap,
html.vk2018 #column-center .chat-input [contenteditable="true"] {
  min-height: 20px !important; font-size: 13px !important; line-height: 1.4 !important;
  color: #000 !important; opacity: 1 !important; visibility: visible !important;
}
/* Placeholder: и старый .input-field-placeholder, и TipTap data-placeholder */
html.vk2018 .chat-input .input-field-placeholder {
  font-size: 0 !important; opacity: 1 !important; visibility: visible !important; color: #818c99 !important;
}
html.vk2018 .chat-input .input-field-placeholder::before {
  content: "Напишите сообщение…"; font-size: 13px; color: #818c99;
}
html.vk2018 .chat-input .chat-input-context-placeholder-empty[data-placeholder]::before {
  content: "Напишите сообщение…" !important; color: #818c99 !important; font-size: 13px !important;
}
html.vk2018 #column-center .chat-input .btn-icon,
html.vk2018 #column-center .chat-input .toggle-emoji,
html.vk2018 #column-center .chat-input .attach-file,
html.vk2018 #column-center .chat-input .btn-send-container,
html.vk2018 #column-center .chat-input .btn-send-container .btn-circle {
  opacity: 1 !important; visibility: visible !important;
}
html.vk2018 #column-center .chat-input .btn-icon,
html.vk2018 #column-center .chat-input .toggle-emoji,
html.vk2018 #column-center .chat-input .attach-file { color: #818c99 !important; }

/* ===== v6.11: список диалогов и чат — отдельные страницы (как ВК 2018) =====
   Не split-view «слева список / справа переписка», а две сменяемые страницы. */

html.vk2018 #main-columns {
  display: flex !important; align-items: flex-start !important; justify-content: flex-start !important;
  gap: 12px !important; padding: 12px 16px !important; box-sizing: border-box !important;
  background: #edeef0 !important; overflow: auto !important;
}
html.vk2018 #column-right { display: none !important; }

/* --- Страница списка --- */
html.vk2018.vk-im-list #column-center { display: none !important; visibility: hidden !important; pointer-events: none !important; }
html.vk2018.vk-im-list #column-left {
  display: flex !important; flex: 0 1 550px !important; width: 550px !important; max-width: 550px !important;
  min-width: 320px !important; height: calc(100vh - 42px - 24px) !important; max-height: calc(100vh - 66px) !important;
  margin: 0 !important; border: 1px solid #e7e8ec !important; border-radius: 4px !important;
  background: #fff !important; overflow: hidden !important; position: relative !important;
}
/* В списке нет «активного» чата рядом — убираем синюю заливку выбранной строки */
html.vk2018.vk-im-list .chatlist-chat.active,
html.vk2018.vk-im-list .chatlist-chat.active:hover {
  background: #fff !important;
}
html.vk2018.vk-im-list .chatlist-chat.active .peer-title,
html.vk2018.vk-im-list .chatlist-chat.active .dialog-subtitle,
html.vk2018.vk-im-list .chatlist-chat.active .dialog-subtitle-span,
html.vk2018.vk-im-list .chatlist-chat.active .message-time,
html.vk2018.vk-im-list .chatlist-chat.active .row-subtitle { color: inherit !important; }
html.vk2018.vk-im-list .chatlist-chat.active .peer-title { color: #000 !important; }
html.vk2018.vk-im-list .chatlist-chat.active .dialog-subtitle-span,
html.vk2018.vk-im-list .chatlist-chat.active .message-time { color: #656565 !important; }
html.vk2018.vk-im-list .chatlist-chat:hover:not(.active),
html.vk2018.vk-im-list .chatlist-chat.active:hover { background: #f0f2f5 !important; }
html.vk2018.vk-im-list .chatlist-chat.active .dialog-subtitle-badge { background: #5181b8 !important; color: #fff !important; }

/* Правая панель фильтров (как «Все сообщения / Непрочитанные / …») */
#vk-im-aside {
  display: none; flex: none; width: 200px; background: #fff; border: 1px solid #e7e8ec;
  border-radius: 4px; padding: 6px 0; align-self: flex-start; margin-top: 0;
  font: 13px -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
}
html.vk2018.vk-im-list #vk-im-aside { display: block; }
#vk-im-aside a {
  display: block; padding: 8px 14px; color: #2a5885; cursor: pointer; text-decoration: none;
  border-left: 2px solid transparent;
}
#vk-im-aside a:hover { background: #f0f2f5; }
#vk-im-aside a.on { background: #f0f2f5; border-left-color: #5181b8; color: #000; font-weight: 700; }

/* --- Страница чата --- */
html.vk2018.vk-im-chat #column-left,
html.vk2018.vk-im-chat #vk-im-aside { display: none !important; visibility: hidden !important; pointer-events: none !important; }
html.vk2018.vk-im-chat #column-center {
  display: flex !important; flex: 1 1 auto !important; width: auto !important; max-width: 700px !important;
  min-width: 0 !important; height: calc(100vh - 42px - 24px) !important; max-height: calc(100vh - 66px) !important;
  margin: 0 auto !important; border: 1px solid #e7e8ec !important; border-radius: 4px !important;
  background: #fff !important; overflow: hidden !important; position: relative !important;
}
html.vk2018.vk-im-chat #column-center > .chats-container,
html.vk2018.vk-im-chat #column-center .chat {
  width: 100% !important; height: 100% !important; max-height: 100% !important;
}
/* Кнопка «Назад» всегда видна на странице чата */
html.vk2018.vk-im-chat #column-center .topbar .sidebar-close-button,
html.vk2018.vk-im-chat #column-center .topbar .chat-back-button {
  display: flex !important; visibility: visible !important; opacity: 1 !important;
}

/* ===== v6.12: окно переписки по макету VK 2018 =====
   Чат не плавает по центру: он стоит слева, а справа остаётся панель фильтров. */
html.vk2018 #main-columns {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 28px !important;
  overflow: auto !important;
}
html.vk2018.vk-im-chat #column-left { display: none !important; }
html.vk2018.vk-im-chat #column-center {
  display: flex !important;
  flex: 0 0 482px !important;
  width: 482px !important;
  min-width: 0 !important;
  max-width: 482px !important;
  height: calc(100vh - 66px) !important;
  max-height: calc(100vh - 66px) !important;
  margin: 0 !important;
  border: 1px solid #e7e8ec !important;
  border-radius: 4px !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}
html.vk2018.vk-im-chat #vk-im-aside {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  flex: 0 0 210px !important;
  width: 210px !important;
  max-width: 210px !important;
  margin: 0 !important;
  align-self: flex-start !important;
}
html.vk2018.vk-im-chat #column-center > .chats-container,
html.vk2018.vk-im-chat #column-center .chat {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}
@media (max-width: 920px) {
  html.vk2018.vk-im-chat #main-columns { padding-left: 16px !important; padding-right: 16px !important; }
  html.vk2018.vk-im-chat #column-center { flex-basis: min(482px, calc(100vw - 430px)) !important; width: min(482px, calc(100vw - 430px)) !important; }
  html.vk2018.vk-im-chat #vk-im-aside { flex-basis: 190px !important; width: 190px !important; }
}
@media (max-width: 680px) {
  html.vk2018.vk-im-chat #vk-im-aside { display: none !important; }
  html.vk2018.vk-im-chat #column-center { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
}

/* ===== v6.13: «Сообщества» — каналы и группы отдельно от личных чатов ===== */

/* В списке диалогов остаются только личные чаты (peerId > 0); каналы и группы — во вкладке «Сообщества» */
html.vk2018 #folders-container a.chatlist-chat[data-peer-id^="-"] { display: none !important; }

#vk-comm { display: none; position: fixed; top: 42px; left: 170px; right: 0; bottom: 0; z-index: 8000; background: #edeef0;
  overflow-y: auto; padding: 12px 16px; font: 13px -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; color: #000; }
#vk-comm.open { display: block; }
#vk-comm[data-view="list"] #vkc-page { display: none; }
#vk-comm[data-view="page"] #vkc-list { display: none; }
.vkc-cols { display: flex; gap: 12px; max-width: 980px; margin: 0 auto; align-items: flex-start; }
.vkc-main { flex: 1; min-width: 0; }
.vkc-side { width: 250px; flex: none; }
.vkc-card { background: #fff; border: 1px solid #e7e8ec; border-radius: 4px; margin-bottom: 10px; box-sizing: border-box; }

/* Список сообществ */
.vkc-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.vkc-head b { font-size: 14px; font-weight: 700; }
.vkc-head input { flex: 1; border: 0; background: #ebedf0; border-radius: 15px; padding: 6px 14px; font: 13px inherit; outline: 0; }
.vkc-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid #f0f2f5; }
.vkc-row:last-child { border-bottom: 0; }
.vkc-row:hover { background: #f5f7fa; }
.vkc-row img, .vkc-row .ph { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; background: #dce1e6; flex: none; }
.vkc-rbody { flex: 1; min-width: 0; }
.vkc-rname { display: flex; gap: 8px; align-items: baseline; }
.vkc-rname b { color: #2a5885; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vkc-rname small { color: #818c99; }
.vkc-last { color: #656565; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
.vkc-rmeta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; color: #818c99; }
.vkc-empty { color: #818c99; text-align: center; padding: 30px 16px; }
.vkc-menu { padding: 6px 0; }
.vkc-menu a { display: block; padding: 8px 14px; color: #2a5885; cursor: pointer; border-left: 2px solid transparent; }
.vkc-menu a:hover { background: #f0f2f5; }
.vkc-menu a.on { background: #f0f2f5; border-left-color: #5181b8; color: #000; font-weight: 700; }

/* Страница сообщества (как в ВК 2018) */
.vkc-top { padding: 12px 16px 0; }
.vkc-back { color: #2a5885; cursor: pointer; font-size: 12px; margin-bottom: 8px; }
.vkc-back:hover { text-decoration: underline; }
.vkc-top h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; word-break: break-word; }
.vkc-tabs { display: flex; gap: 20px; border-top: 1px solid #e7e8ec; padding-top: 10px; color: #2a5885; }
.vkc-tabs a { cursor: pointer; padding-bottom: 10px; }
.vkc-tabs a.on { color: #000; border-bottom: 2px solid #5181b8; margin-bottom: -1px; }
.vkc-tabs span { margin-left: auto; color: #818c99; }
.vkc-post { padding: 14px 16px; }
.vkc-text { white-space: pre-wrap; word-break: break-word; }
.vkc-text a, .vkc-desc a { color: #2a5885; }
.vkc-label { color: #818c99; }
.vkc-imgs { display: grid; gap: 3px; margin: 0 0 10px; }
.vkc-imgs.n1 { grid-template-columns: 1fr; }
.vkc-imgs.n2, .vkc-imgs.n3, .vkc-imgs.n4 { grid-template-columns: 1fr 1fr; }
.vkc-imgs img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 3px; background: #dce1e6; display: block; }
.vkc-foot { display: flex; justify-content: space-between; align-items: center; }
.vkc-lnk { color: #2a5885; cursor: pointer; }
.vkc-lnk:hover { text-decoration: underline; }
.vkc-views { color: #818c99; }
.vkc-more { text-align: center; padding: 12px; color: #55677d; background: #e5ebf1; cursor: pointer; }
.vkc-more:hover { background: #dce4ec; }
.vkc-infobox { padding: 16px 20px 6px; }
.vkc-desc { white-space: pre-wrap; line-height: 1.45; word-break: break-word; }
.vkc-muted { color: #818c99; }
.vkc-infobox .vkp-fields { margin-top: 14px; }
.vkc-ava { padding: 10px; }
.vkc-ava .vkp-avatar { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; background: #dce1e6; }
.vkc-ava .vkp-btn { margin-top: 10px; }
.vkc-acts { padding: 6px 0; }
.vkc-acts div { padding: 8px 14px; color: #2a5885; cursor: pointer; }
.vkc-acts div:hover { background: #f0f2f5; }
.vkc-mem { padding: 12px 16px; }
.vkc-mem h4 { margin: 0; font-size: 13px; font-weight: 400; }
.vkc-mem h4 span { color: #818c99; margin-left: 4px; }
@media (max-width: 760px) { .vkc-side { display: none; } #vk-comm { left: 0; } }

/* ===== WallTG: экран входа (настоящий вход Telegram Web K, только оформление) =====
   Привязка к <body class="has-auth-pages">: класс снимается, когда вход выполнен, и экран возвращается к обычному виду.
   Карточки входа — CSS-модули Web K, их имена содержат _card_ / _cardsContainer_ / _host_ (и в dev, и в сборке). */
body.has-auth-pages {
  --primary-color: #5181b8; --light-primary-color: rgba(81, 129, 184, .13); --light-filled-primary-color: #eef2f7;
  --surface-color: #fff; --body-background-color: #edeef0; --primary-text-color: #000; --secondary-text-color: #818c99;
  background: #edeef0 !important; }
body.has-auth-pages [class*="_host_"] { background: #edeef0; }
body.has-auth-pages [class*="_cardsContainer_"] [class*="_card_"] { border-radius: 4px; border: 1px solid #d7d8db; box-shadow: none; padding: 1.5rem 1.25rem; }
body.has-auth-pages [class*="_host_"] .btn-primary { text-transform: none; border-radius: 4px; font-weight: 500; }
body.has-auth-pages .input-field-input, body.has-auth-pages .input-field input { border-radius: 4px; }
body.has-auth-pages [class*="_themeButton_"] { display: none; }
body.has-auth-pages [class*="_closeButton_"] { top: 58px; }
#walltg-authbar { display: none; position: fixed; top: 0; left: 0; right: 0; height: 42px; z-index: 99; align-items: center; gap: 8px; padding: 0 16px; background: #4a76a8; color: #fff;
  font: 800 19px/1 Arial, sans-serif; letter-spacing: -.3px; }
#walltg-authbar svg { display: block; flex: none; }
body.has-auth-pages #walltg-authbar { display: flex; }

/* на экране входа старые шапка и меню не нужны — вместо них шапка WallTG */
body.has-auth-pages #vk-header, body.has-auth-pages #vk-nav, body.has-auth-pages #vk-feed { display: none !important; }

/* ===== WallTG: страница входа в стиле лендинга ВК 2016 (слева — описание и «экраны», справа — настоящая карточка входа Telegram) ===== */
#walltg-landing { display: none; }
body.has-auth-pages #walltg-landing { display: block; position: absolute; left: 0; top: 42px; right: 0; bottom: 0; pointer-events: none; z-index: 0; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #000; }
body.has-auth-pages [class*="_host_"] { background: #edeef0; padding-top: 42px; box-sizing: border-box; }
body.has-auth-pages [class*="_scrollable_"] { position: relative; z-index: 2; margin: 0 max(16px, calc((100vw - 1000px) / 2)) 0 auto; width: 380px; max-width: 100%; padding: 0; }
body.has-auth-pages [class*="_placeholderTop_"] { min-height: 1rem; flex: 0 0 24px; }
body.has-auth-pages [class*="_cardsContainer_"] { width: 100%; }
.wl-left { position: absolute; left: max(16px, calc((100vw - 1000px) / 2)); top: 0; width: 560px; text-align: center; }
.wl-left h1 { margin: 22px 0 0; font-size: 22px; line-height: 1.3; font-weight: 500; }
.wl-left p { margin: 12px auto 0; max-width: 470px; font-size: 13px; line-height: 1.55; color: #3d4451; }
.wl-left b { color: #4a76a8; font-weight: 600; }
.wl-phones { position: relative; height: 330px; margin: 22px auto 0; width: 440px; }
.wl-ph { position: absolute; background: #1f2023; border-radius: 22px; padding: 14px 6px 18px; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.wl-ph::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; border: 1px solid #55585e; }
.wl-ph .wl-scr { background: #f0f2f5; border-radius: 3px; overflow: hidden; height: 100%; position: relative; font-size: 8px; line-height: 1.25; text-align: left; }
.wl-ph.l { left: 0; top: 40px; width: 150px; height: 262px; }
.wl-ph.r { right: 0; top: 40px; width: 150px; height: 262px; }
.wl-ph.c { left: 128px; top: 0; width: 184px; height: 326px; background: #f4f4f6; border: 2px solid #c9ccd1; border-radius: 28px; padding: 22px 7px 30px; z-index: 2; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.wl-ph.c::after { border-color: #aeb2b8; bottom: 8px; width: 16px; height: 16px; margin-left: -8px; }
.wl-bar { height: 20px; background: #5181b8; color: #fff; font-size: 8.5px; font-weight: 500; display: flex; align-items: center; padding: 0 6px; gap: 4px; }
.wl-bar i { font-style: normal; opacity: .85; }
.wl-bar em { margin-left: auto; font-style: normal; opacity: .85; }
.wl-card { background: #fff; margin: 4px 0 0; padding: 5px 6px 6px; }
.wl-who { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.wl-av { width: 14px; height: 14px; border-radius: 50%; flex: none; background: #8fb1d8; }
.wl-who b { display: block; font-size: 7.5px; color: #2a5885; font-weight: 600; } .wl-who s { display: block; text-decoration: none; font-size: 6px; color: #909399; }
.wl-img { height: 62px; border-radius: 2px; margin-top: 4px; background: linear-gradient(135deg, #e8a8a0, #c75b6e 55%, #7a3b63); }
.wl-img.b { background: linear-gradient(135deg, #9ec4e6, #4f86b8 55%, #2d4a73); } .wl-img.g { background: linear-gradient(135deg, #cfe3b0, #6fa56b 55%, #35604a); }
.wl-img.tall { height: 84px; }
.wl-msg { display: flex; padding: 4px 6px; gap: 4px; background: #fff; border-bottom: 1px solid #eef0f2; align-items: center; }
.wl-msg .wl-av { width: 20px; height: 20px; } .wl-msg b { display: block; font-size: 7.5px; font-weight: 600; } .wl-msg span { display: block; color: #818c99; font-size: 6.5px; white-space: nowrap; }
.wl-msg u { margin-left: auto; text-decoration: none; background: #5181b8; color: #fff; border-radius: 6px; font-size: 6px; padding: 0 3px; }
.wl-bub { max-width: 78%; margin: 5px 6px 0; padding: 4px 6px; border-radius: 4px; background: #fff; border: 1px solid #e1e3e6; font-size: 7.5px; }
.wl-bub.me { margin-left: auto; background: #dfeaf6; border-color: #d0dfef; }
.wl-in { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: #fff; border-top: 1px solid #e1e3e6; color: #a0a6ad; font-size: 7px; display: flex; align-items: center; padding: 0 6px; }
.wl-ph.l .wl-scr, .wl-ph.r .wl-scr { background: #edeef0; }
.wl-foot { position: absolute; left: max(16px, calc((100vw - 1000px) / 2)); right: max(16px, calc((100vw - 1000px) / 2)); bottom: 12px; font-size: 11px; color: #818c99; text-align: left; }
.wl-foot span { margin-left: 16px; color: #6d7a8c; }
.wl-links { margin: 18px auto 0; font-size: 12px; color: #55677d; display: flex; gap: 22px; justify-content: center; }
@media (max-width: 1040px) { .wl-left { display: none; } body.has-auth-pages [class*="_scrollable_"] { margin: 0 auto; } }
@media (max-width: 1040px) { .wl-foot { display: none; } }
@media (max-height: 720px) { .wl-phones { height: 280px; transform: scale(.85); transform-origin: top center; margin-bottom: -40px; } .wl-left h1 { margin-top: 8px; } }