@media (max-width: 760px) {

:root {
--font-size-base: 14.5px;
}

html {
font-size: 14.5px;
}

body {
background:
radial-gradient(circle at top right, rgba(84, 127, 255, 0.08) 0%, rgba(84, 127, 255, 0) 40%),
linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(84, 127, 255, 0.09) 100%);
}

.content {
padding: 12px 14px;
}

.topbar {
border-bottom: 1px solid rgba(223, 229, 236, 0.7);
}

.topbar-inner {
padding: 12px 14px;
gap: 10px;
}

.logo {
font-size: 19px;
gap: 8px;
}

.logo i {
width: 26px;
height: 26px;
font-size: 13px;
}

.topbar-actions {
gap: 8px;
}

.topbar-user {
padding: 0 12px;
min-height: 42px;
border-radius: 14px;
font-size: 14px;
}

.topbar-user img.avatar {
width: 30px;
height: 30px;
}

.user-menu-dropdown.open {
right: 8px;
left: 8px;
top: calc(100% + 6px);
min-width: unset;
width: auto;
max-width: calc(100vw - 32px);
}

.main-layout {
display: flex;
flex-direction: column;
gap: 16px;
grid-template-columns: none;
}

.left-panel,
.right-panel {
position: static;
max-height: none;
overflow: visible;
padding-right: 0;
width: 100%;
}

.card,
.post-card,
.auth-card,
.mini-item,
.info-item,
.session-item,
.notification-item-wrap,
.follow-user-item {
border-radius: 20px;
padding: 14px 16px;
}

.section-title {
font-size: 17px;
margin-bottom: 16px;
}

.profile-hero {
gap: 16px;
}

.profile-head {
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
}

.profile-title {
font-size: 26px;
text-align: center;
}

.profile-actions {
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}

.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}

.stat-card {
padding: 14px;
}

.stat-value {
font-size: 24px;
}

.posts-list {
gap: 12px;
}

.post-card {
padding: 14px 16px;
}

.post-head {
gap: 12px;
}

.post-user-row {
gap: 10px;
}

.post-text {
margin-top: 12px;
font-size: 15px;
line-height: 1.65;
}

.post-media img,
.post-media video {
max-height: 420px;
}

.post-media-grid {
gap: 8px;
}

.post-media-grid .media-tile {
grid-column: span 6;
min-height: 160px;
border-radius: 16px;
}

.post-media-grid .media-tile:nth-child(1):nth-last-child(2),
.post-media-grid .media-tile:nth-child(2):nth-last-child(1),
.post-media-grid .media-tile:nth-child(2):nth-last-child(2),
.post-media-grid .media-tile:nth-child(3):nth-last-child(1) {
grid-column: span 6;
min-height: 220px;
}

.post-media-grid .media-tile:nth-child(1):nth-last-child(3) {
grid-column: span 12;
min-height: 300px;
}

.post-actions {
gap: 10px;
}

.post-action-button,
.post-counter {
min-height: 38px;
padding: 0 12px;
font-size: 13.5px;
border-radius: 12px;
}

/* ───────────────────────────────────────
Чат — мобильная версия
──────────────────────────────────────── */

.chat-page-layout {
display: flex;
flex-direction: column;
gap: 0;
grid-template-columns: none;
max-height: none;
min-height: calc(100vh - 56px);
}

.chat-sidebar-panel {
display: none;
}

.chat-sidebar-panel.visible-on-mobile {
display: flex;
position: fixed;
inset: 0;
z-index: 9999;
background: var(--color-bg);
flex-direction: column;
}

.chat-main-panel {
flex: 1;
max-height: none;
}

.chat-conversation {
min-height: calc(100vh - 110px);
border-radius: 0;
}

.chat-conversation-head {
padding: 12px 16px;
flex-direction: row;
flex-wrap: nowrap;
gap: 12px;
}

.chat-peer-info {
flex: 1;
min-width: 0;
}

.chat-head-actions {
flex-shrink: 0;
}

.chat-messages-list {
padding: 16px 0;
}

.chat-message {
max-width: 86%;
padding: 4px 14px;
}

.chat-bubble {
padding: 10px 14px;
border-radius: 20px;
}

.chat-message.mine .chat-bubble {
border-bottom-right-radius: 8px;
}

.chat-message:not(.mine) .chat-bubble {
border-bottom-left-radius: 8px;
}

.chat-compose-shell {
padding: 8px 12px;
gap: 8px;
flex-wrap: nowrap;
}

.chat-compose-field textarea {
border-radius: 20px;
padding: 12px 16px;
font-size: 15px;
min-height: 44px;
max-height: 140px;
}

.chat-attach-button,
.chat-emoji-button {
width: 44px;
height: 44px;
border-radius: 14px;
background: var(--color-surface-soft);
border: 1px solid var(--color-border);
}

#chatSendButton {
width: 44px;
height: 44px;
border-radius: 14px;
background: var(--color-accent) !important;
color: white !important;
}

.chat-jump-to-bottom {
right: 16px;
bottom: 70px;
min-height: 38px;
padding: 0 12px;
font-size: 13px;
}

/* ───────────────────────────────────────
Модальные окна / диалоги
──────────────────────────────────────── */

.modal {
padding: 12px;
}

.modal-dialog,
.notifications-dialog,
.follow-list-dialog,
.emoji-picker-dialog,
.chat-attachments-dialog,
.article-dialog,
.media-viewer-dialog {
max-width: calc(100vw - 24px);
border-radius: 20px;
}

.modal-title {
font-size: 22px;
}

.modal-actions {
flex-direction: column-reverse;
gap: 10px;
}

.modal-actions .btn {
width: 100%;
}

/* ───────────────────────────────────────
Stories (мобильная версия)
──────────────────────────────────────── */

.story-viewer {
padding: 0;
}

.story-viewer-shell {
max-width: 100%;
height: 100vh;
border-radius: 0;
}

.story-viewer-top {
top: 16px;
left: 12px;
right: 12px;
}

.story-viewer-progress {
top: 6px;
left: 10px;
right: 10px;
}

.story-viewer-user {
padding: 6px 10px;
border-radius: 16px;
}

.story-caption {
left: 12px;
right: 12px;
bottom: 16px;
padding: 10px 12px;
border-radius: 16px;
font-size: 14px;
}

/* ───────────────────────────────────────
Прочие мелкие правки
──────────────────────────────────────── */

.auth-card {
padding: 24px 18px;
border-radius: 20px;
max-width: 94%;
}

.auth-title {
font-size: 26px;
}

.btn,
.btn-small {
min-height: 46px;
padding: 0 18px;
font-size: 14.5px;
}

.field label {
font-size: 13.5px;
}

input,
textarea {
height: 46px;
font-size: 14.5px;
border-radius: 14px;
}

textarea {
min-height: 110px;
}

.status-empty {
padding: 20px 16px;
font-size: 14px;
}

.notification {
padding: 12px 16px;
font-size: 14px;
border-radius: 16px;
}

#notification-container {
left: 12px;
right: 12px;
bottom: 12px;
max-width: none;
}
}

@media (max-width: 480px) {

:root {
--font-size-base: 14px;
}

.topbar-inner {
padding: 10px 12px;
}

.logo {
font-size: 18px;
}

.post-media-grid .media-tile {
min-height: 140px;
}

.post-media-grid .media-tile:nth-child(1):nth-last-child(3) {
min-height: 260px;
}

.chat-message {
max-width: 90%;
}

.chat-bubble {
padding: 9px 13px;
}

.chat-compose-field textarea {
font-size: 14.5px;
}

.story-viewer-user {
font-size: 13px;
}

.story-caption {
font-size: 13.5px;
}
}