/* ================================================================
   XAVA — мобильная адаптация (до 475px)
   ================================================================ */

.header-inner { padding: 0 10px; }
.logo { font-size: 20px; }
.search, .header-search { display: none; }
.menu-toggle { display: flex; margin-left: auto; }

.content { padding: 0; }

.vk-footer { padding: 0px 0px; }
.footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.footer-links { justify-content: center; gap: 10px 16px; }
.footer-copy { margin-top: 8px; font-size: 11px; }

.profile-page { padding: 0 8px; }
.profile-content { display: flex; flex-direction: column; gap: 12px; padding: 0; }
.profile-cover { height: 130px; }
.profile-avatar { margin-top: -40px; }
.profile-avatar img { width: 80px; height: 80px; border-width: 3px; }
.online-dot { bottom: 6px; right: 6px; width: 14px; height: 14px; border-width: 2px; }
.profile-info { padding: 0 12px 12px; gap: 12px; }
.profile-details { padding-top: 8px; }
.profile-details h1 { font-size: 18px; }
.profile-status { font-size: 13px; }
.profile-stats { margin: 0; }
.profile-stats .stat { padding: 12px 6px; }
.stat-number { font-size: 20px; }
.profile-sidebar { border-radius: var(--radius); position: static; }
.profile-section { padding: 12px; }
.profile-details .status { position: static; font-size: 14px; }
.profile-details h1 { position: static; color: var(--vk-text); }

.post { padding: 0px; border-radius: var(--radius); margin-bottom: 5px; }
.post-content { margin-bottom: 10px; line-height: 1.55; font-size: 15px; }
.post-header { gap: 10px; margin-bottom: 10px; }
.post-avatar { width: 40px; height: 40px; }
.create-post { padding: 12px; border-radius: var(--radius); margin-bottom: 12px; }
.create-post-top textarea { padding: 9px 14px; font-size: 14px; }
.create-action-btn { width: 34px; height: 34px; }
.post-actions { gap: 6px; }
.like-btn, .comment-btn { padding: 7px 12px; font-size: 12px; }

/* --- ЧАТ на телефоне --- */
.messages-page { max-width: 100%; padding: 30px 0; }
.dialogs-list { border-radius: var(--radius-sm); }
.dialog-item { padding: 10px 12px; }
.dialog-avatar { width: 44px; height: 44px; }

.conversation-page { height: calc(100vh - var(--header-height) - 95px); padding: 0px 0px 0px 0px; }
.conversation-header { background: var(--fon-message3); padding: 0px 5px; border-radius: 0; }
.conversation-header .svg a { color: #fff; }
.conversation-header .svg a:hover { background: rgba(255,255,255,0.12); }
.partner-avatar { width: 36px; height: 36px; }
.partner-info h2 { font-size: 15px; color: #fff; }
.partner-status, .partner-status.online { color: rgba(255,255,255,0.85); }
.partner-status-wrapper .online-dot.online { box-shadow: none; }

.messages-container {
  border-radius: 0; scrollbar-width: thin; scrollbar-color: #381b61 transparent; margin: 0; padding: 8px 6px;
  background-image: url('/uploads/images/fon.jpg'); background-size: cover; background-position: center;
  background-repeat: no-repeat; background-attachment: fixed;
}
.message-text { font-size: 14px; word-break: break-word; line-height: 1.4; }
.message { max-width: 88%; }
.message-content { background: var(--bg-message); padding: 8px 12px; font-size: 14px; }
.message.outgoing .message-content { background: var(--bg-message2); margin: 0; }
.message-avatar { margin: 0 4px; width: 26px; height: 26px; }
.message-audio audio { width: 100%; max-width: 200px; height: 32px; }
.message-image img, .message-video video { max-width: 200px; }

.emoji-panel { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 8px; }
.emoji-btn { font-size: 20px; padding: 6px; }

.message-input-container { padding: 0px 8px; }
.send-btn, .emoji-toggle, .attachment-toggle { width: 36px; height: 36px; }
#message-input { font-size: 16px; padding: 9px 14px; }
.attachment-menu { left: auto; right: -88; }

.friends-grid { grid-template-columns: 1fr; }
.friend-card { padding: 12px; }
.friend-avatar { width: 50px; height: 50px; }

.albums-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.photos-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }

.admin-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat-card { padding: 14px 10px; }
.stat-card .number { font-size: 24px; }

.track-item { grid-template-columns: 28px 40px 1fr auto; gap: 8px; padding: 8px; }
.track-art { width: 40px; height: 40px; }
.track-title { font-size: 13px; }
.track-artist { font-size: 11px; }

.message-menu { min-width: calc(100vw - 32px); border-radius: 20px; }

.photo-modal-nav { width: 36px; height: 36px; font-size: 18px; }
.photo-modal-nav.prev { left: 8px; }
.photo-modal-nav.next { right: 8px; }
.photo-modal-close { top: 10px; right: 12px; width: 40px; height: 40px; }

.dialog-item:active { transform: scale(0.98); }
.vk-player .vk-btn-icon { display: none; }
.friends-page h1 { font-size: 22px; }

.feed-page { max-width: 100%; margin: 0 auto; padding: 1px 1px; }
.carousel-slide .post-photo { width: 100%; height: auto; max-height: 100%; object-fit: contain; margin: 0; display: block; }
.media-carousel { width: 100%;}
.conversation-header {
        width: 100%;
        z-index: 999;
      
}