/* SrepPortal — исправления вёрстки (подключается ПОСЛЕ style.css и redesign.css) */

/* 1. Окна («Изменить профиль», «Настройки сообщества»): всё помещается, прокручивается только тело */
.sp-modal-box { max-height: calc(100dvh - 24px); min-height: 0; }
.cm-settings-box { height: auto !important; max-height: calc(100dvh - 24px); }
.cm-settings-box > form, .cm-settings-box .pe-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cm-settings-box .cm-panel.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cm-settings-box .sp-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cm-settings-box .sp-modal-head, .cm-settings-box .cm-tabs, .cm-settings-box .sp-modal-foot { flex: 0 0 auto; }
@media (max-height: 560px) {
  .sp-modal { padding: 8px; align-items: center; }
  .sp-modal-head { padding: 10px 16px; }
  .sp-modal-head h3 { font-size: 17px; }
  .cm-tab { min-height: 40px; padding: 6px 12px; font-size: 14px; }
}

/* 2. Вкладки помещаются в ряд без прокрутки: «Основное / Админы / Участники / Ещё» */
.cm-tabs { gap: 4px; padding: 10px 12px 0; overflow: visible; }
.cm-tab { flex: 1 1 0; min-width: 0; justify-content: center; padding: 10px 8px; font-size: 15px; white-space: nowrap; }
.cm-tab svg { flex-shrink: 0; }
@media (max-width: 520px) {
  .cm-tab { flex-direction: column; gap: 3px; font-size: 12.5px; min-height: 52px; padding: 8px 4px; border-radius: 10px 10px 0 0; }
}
@media (max-width: 360px) { .cm-tab { font-size: 11.5px; } }
@media (max-height: 560px) and (max-width: 520px) { .cm-tab { flex-direction: row; min-height: 40px; font-size: 13px; } }

/* 3. Шапка профиля: обложка по центру, аватар «врезан» в неё аккуратным вырезом */
.profile-cover { background-position: center center !important; background-size: cover !important; }
.profile-head { align-items: flex-end; gap: 16px; }
.profile-head > .avatar-frame-wrap, .profile-head > .avatar { margin-top: 0; position: relative; z-index: 3; }
.profile-head .avatar:not(.avatar-frame-photo) {
  border: 5px solid var(--card, #15132a); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.35);
}
.profile-head-info { padding-top: 58px !important; }
.profile-head-info h1 { align-items: center; row-gap: 6px; }
@media (max-width: 700px) {
  .profile-head { flex-direction: column; align-items: center; text-align: center; margin-top: -54px !important; gap: 8px; }
  .profile-head-info { padding-top: 0 !important; width: 100%; }
  .profile-head-info h1, .profile-head-info .profile-meta, .profile-head-info .profile-actions { justify-content: center; }
}

/* 4. Рамки аватаров: фото строго круглое, рамка не «плющится» и не режется */
.avatar-frame-wrap { overflow: visible; aspect-ratio: 1 / 1; }
.avatar-frame-wrap .avatar-frame-photo {
  left: 50%; top: 50%; transform: translate(-50%, -50%); aspect-ratio: 1 / 1;
  border-radius: 50% !important; object-fit: cover !important; margin: 0 !important;
}
.avatar-frame-wrap .avatar-frame-overlay { object-fit: fill; }
/* в узких шапках (пост, комментарий, чат) блок с рамкой не ужимается */
.post-header .avatar-frame-wrap, .post-head .avatar-frame-wrap, .comment .avatar-frame-wrap, .chat-row .avatar-frame-wrap { flex: 0 0 auto; }
.post-header, .post-head { gap: 12px; align-items: center; overflow: visible; }

/* 5. Значок разработчика */
.dev-badge { display: inline-block; vertical-align: -4px; margin-left: 5px; border-radius: 6px; object-fit: contain; flex-shrink: 0; }
h1 .dev-badge { width: 24px; height: 24px; }

/* 6. «Избранное» — своя звезда вместо закладки */
.chat-avatar-saved { background: none !important; padding: 0; overflow: hidden; }
.chat-avatar-saved .saved-star { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.saved-star { border-radius: 50%; vertical-align: -4px; margin-right: 6px; }

/* 7. Лайки загораются красным */
.post-actions .liked, .pa-like.liked, .like-btn.liked, a.liked, button.liked { color: #ff4d5e !important; }
.pa-like.liked svg, .like-btn.liked svg, .liked svg { fill: #ff4d5e !important; stroke: #ff4d5e !important; }
.pa-like.liked, .like-btn.liked { background: rgba(255,77,94,.12) !important; border-color: rgba(255,77,94,.4) !important; }
.pa-like.liked svg { animation: sp-like-pop .35s ease; }
@keyframes sp-like-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* 8. Обои чата: предпросмотр в выборе темы и надёжное применение */
.chat-theme-preview .messages-list { min-height: 200px; max-height: 260px; border-radius: 16px; margin: 4px 0 16px; border: 1px solid var(--border, rgba(255,255,255,.1)); display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; overflow: hidden; }
.chat-theme-preview .messages-list .message { max-width: 78%; padding: 8px 12px; border-radius: 14px; background: rgba(28,26,53,.92); color: #fff; font-size: 14px; }
.chat-theme-preview .messages-list .message.mine { align-self: flex-end; background: var(--accent, #7c6cff); }
.chat-window[class*="chat-wallpaper-"] .messages-list { background-size: cover; background-position: center; }
.chat-window.chat-wallpaper-winter-dark .messages-list, .chat-window.chat-wallpaper-winter-light .messages-list,
.chat-window.chat-wallpaper-romantic-light .messages-list, .chat-window.chat-wallpaper-romantic-dark .messages-list,
.chat-window.chat-wallpaper-summer-dark .messages-list { background-size: 480px !important; background-position: 0 0; background-repeat: repeat; }

/* Кнопка VK внутри обычных страниц (настройки) */
.settings-page .au-btn-vk { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 14px; background: #0077ff; color: #fff !important; font-weight: 700; text-decoration: none; }

/* Лайки красным: стена профиля и просмотр фото */
.wall-action-like.is-active, .wall-action-like.is-active .wall-action-label { color: #ff4d5e !important; }
.wall-action-like.is-active svg { fill: #ff4d5e !important; stroke: #ff4d5e !important; }
#photo-viewer-like-btn.active, #photo-viewer-like-btn.active svg { color: #ff4d5e !important; }
#photo-viewer-like-btn.active svg { fill: #ff4d5e !important; stroke: #ff4d5e !important; }
.comment-row .dev-badge, .cm-person-name .dev-badge, .friend-chip .dev-badge { vertical-align: -3px; }