/* ============================================================
   ВСЕТИ — ДИЗАЙН В СТИЛЕ ВКОНТАКТЕ (ТЁМНАЯ ТЕМА)
   Полная копия интерфейса ВК: десктоп + мобильная версия
   ============================================================ */

/* ===== RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* ===== ПЕРЕМЕННЫЕ ВК ===== */
:root {
    /* Фоны */
    --vk-bg: #0a0a0a;
    --vk-bg-secondary: #141414;
    --vk-card: #19191a;
    --vk-card-hover: #232324;
    --vk-card-active: #2c2c2d;
    --vk-header: #19191a;
    --vk-overlay: rgba(0, 0, 0, 0.8);

    /* Границы */
    --vk-border: #2c2c2d;
    --vk-border-light: #363637;
    --vk-divider: #232324;

    /* Текст */
    --vk-text: #e1e3e6;
    --vk-text-secondary: #939393;
    --vk-text-muted: #767676;
    --vk-text-link: #71aaeb;

    /* Синий ВК */
    --vk-blue: #2688eb;
    --vk-blue-hover: #4c9aeb;
    --vk-blue-active: #1c6dd0;
    --vk-blue-light: rgba(38, 136, 235, 0.15);
    --vk-blue-bg: #2c5f8a;

    /* Статусы */
    --vk-green: #4bb34b;
    --vk-red: #e64646;
    --vk-orange: #ffa000;

    /* Скругления */
    --vk-radius-xs: 4px;
    --vk-radius-sm: 6px;
    --vk-radius: 8px;
    --vk-radius-md: 10px;
    --vk-radius-lg: 12px;
    --vk-radius-xl: 16px;

    /* Тени */
    --vk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --vk-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --vk-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);

    /* Переходы */
    --vk-transition: 0.2s ease;
    --vk-transition-fast: 0.1s ease;

    /* Совместимость */
    --vk-accent: var(--vk-blue);
    --vk-accent-hover: var(--vk-blue-hover);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--vk-bg);
    color: var(--vk-text);
    font-size: 13px;
    line-height: 1.462;
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #3a3a3b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4a4a4b;
}

/* ============================================================
   ШАПКА ВК
   ============================================================ */

.vk-header {
    background: var(--vk-header);
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--vk-border);
}

.header-container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 12px;
}

.header-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header-left .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--vk-text);
    font-size: 17px;
    font-weight: 600;
    transition: opacity var(--vk-transition);
}

.header-left .logo:hover {
    opacity: 0.8;
}

.header-left .logo i {
    font-size: 20px;
    color: #ffffff;
    background: var(--vk-blue);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 2px;
}

.header-left .logo span {
    font-weight: 600;
    letter-spacing: -0.2px;
}

.header-center {
    flex: 1;
    max-width: 400px;
    display: flex;
    justify-content: center;
}

.search-bar {
    display: flex;
    align-items: center;
    background: #2c2c2d;
    border-radius: 20px;
    padding: 0 12px;
    height: 32px;
    width: 100%;
    max-width: 400px;
    position: relative;
    transition: background var(--vk-transition);
}

.search-bar:hover,
.search-bar:focus-within {
    background: #363637;
}

.search-bar i {
    color: var(--vk-text-muted);
    font-size: 14px;
    margin-right: 8px;
    flex-shrink: 0;
}

.search-bar input {
    background: transparent;
    border: none;
    color: var(--vk-text);
    font-size: 13px;
    outline: none;
    width: 100%;
    font-family: inherit;
}

.search-bar input::placeholder {
    color: var(--vk-text-muted);
}

.search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--vk-card);
    border-radius: var(--vk-radius);
    box-shadow: var(--vk-shadow-lg);
    max-height: 360px;
    overflow-y: auto;
    display: none;
    z-index: 999;
    padding: 4px;
}

.search-results .search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    text-decoration: none;
    color: var(--vk-text);
    border-radius: var(--vk-radius-sm);
    transition: background var(--vk-transition-fast);
    font-size: 13px;
}

.search-results .search-result-item:hover {
    background: var(--vk-card-hover);
}

.search-result-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.search-result-name {
    font-weight: 500;
    font-size: 13px;
    color: var(--vk-text);
}

.search-result-username {
    font-size: 12px;
    color: var(--vk-text-muted);
}

.header-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header-icons {
    display: flex;
    align-items: center;
    gap: 2px;
}

.icon-btn {
    position: relative;
    background: transparent;
    border: none;
    color: var(--vk-text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--vk-transition-fast);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.icon-btn:hover {
    background: var(--vk-card-hover);
    color: var(--vk-text);
}

.icon-btn:active {
    background: var(--vk-card-active);
}

.icon-btn .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--vk-red);
    color: white;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--vk-header);
    line-height: 1;
}

.avatar-btn {
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 4px;
    border: 1px solid var(--vk-border);
}

.avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   АВТОРИЗАЦИЯ
   ============================================================ */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--vk-bg);
    overflow: hidden;
}

.auth-container {
    width: 100%;
    max-width: 320px;
    padding: 20px;
}

.auth-box {
    background: var(--vk-card);
    border-radius: var(--vk-radius-lg);
    padding: 32px 24px;
    box-shadow: var(--vk-shadow-lg);
}

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    color: var(--vk-text);
    font-size: 22px;
    font-weight: 600;
}

.auth-logo i {
    font-size: 30px;
    color: #fff;
    background: var(--vk-blue);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 2px;
}

.auth-box h2 {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--vk-text);
    margin-bottom: 20px;
}

.auth-field {
    display: flex;
    align-items: center;
    background: #2c2c2d;
    border-radius: var(--vk-radius);
    padding: 0 12px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    transition: border var(--vk-transition);
}

.auth-field:focus-within {
    border-color: var(--vk-blue);
}

.auth-field i {
    color: var(--vk-text-muted);
    font-size: 14px;
    margin-right: 10px;
}

.auth-field input {
    background: transparent;
    border: none;
    padding: 11px 0;
    font-size: 14px;
    outline: none;
    width: 100%;
    color: var(--vk-text);
    font-family: inherit;
}

.auth-field input::placeholder {
    color: var(--vk-text-muted);
}

.auth-error {
    background: rgba(230, 70, 70, 0.15);
    color: #ff7d7d;
    padding: 10px 12px;
    border-radius: var(--vk-radius);
    margin-bottom: 12px;
    font-size: 13px;
}

.auth-btn {
    width: 100%;
    padding: 11px;
    background: var(--vk-blue);
    color: #fff;
    border: none;
    border-radius: var(--vk-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--vk-transition);
    margin-top: 6px;
    font-family: inherit;
}

.auth-btn:hover {
    background: var(--vk-blue-hover);
}

.auth-btn:active {
    background: var(--vk-blue-active);
}

.auth-links {
    text-align: center;
    margin-top: 16px;
}

.auth-links a {
    color: var(--vk-text-link);
    text-decoration: none;
    font-size: 13px;
}

.auth-links a:hover {
    text-decoration: underline;
}

/* ============================================================
   ОСНОВНОЙ МАКЕТ
   ============================================================ */

.vk-layout-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    gap: 12px;
    height: calc(100vh - 48px);
    overflow: hidden;
}

/* ===== ЛЕВОЕ МЕНЮ ===== */
.main-sidebar {
    width: 164px;
    flex-shrink: 0;
    background: var(--vk-card);
    border-radius: var(--vk-radius);
    padding: 4px 0;
    overflow-y: auto;
    height: fit-content;
    max-height: 100%;
    border: 1px solid var(--vk-border);
}

.main-nav {
    display: flex;
    flex-direction: column;
    padding: 4px;
}

.main-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: var(--vk-radius-sm);
    color: var(--vk-text-secondary);
    text-decoration: none;
    transition: background var(--vk-transition-fast), color var(--vk-transition-fast);
    font-size: 13px;
    cursor: pointer;
    position: relative;
    min-height: 32px;
}

.main-nav .nav-item:hover {
    background: var(--vk-card-hover);
    color: var(--vk-text);
}

.main-nav .nav-item.active {
    background: var(--vk-blue-light);
    color: var(--vk-blue);
    font-weight: 500;
}

.main-nav .nav-item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    flex-shrink: 0;
}

.nav-badge {
    margin-left: auto;
    background: var(--vk-red);
    color: white;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}

/* ===== ЦЕНТР ===== */
.feed-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding-bottom: 12px;
}

.welcome-block {
    background: var(--vk-card);
    border-radius: var(--vk-radius);
    padding: 32px 20px;
    border: 1px solid var(--vk-border);
    text-align: center;
}

.welcome-block h2 {
    color: var(--vk-text);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.welcome-block p {
    color: var(--vk-text-secondary);
    font-size: 14px;
    margin-bottom: 16px;
}

.welcome-block .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--vk-blue);
    color: #fff;
    border-radius: var(--vk-radius);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: background var(--vk-transition);
    border: none;
    cursor: pointer;
}

.welcome-block .btn-primary:hover {
    background: var(--vk-blue-hover);
}

/* ===== ПРАВАЯ ПАНЕЛЬ ===== */
.feed-right {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: fit-content;
    max-height: 100%;
    overflow-y: auto;
}

.right-block {
    background: var(--vk-card);
    border-radius: var(--vk-radius);
    padding: 12px 14px;
    border: 1px solid var(--vk-border);
}

.right-block h4 {
    font-size: 13px;
    color: var(--vk-text);
    font-weight: 600;
    margin-bottom: 10px;
}

.friend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    cursor: pointer;
    transition: background var(--vk-transition-fast);
    text-decoration: none;
    color: var(--vk-text);
    border-radius: var(--vk-radius-sm);
}

.friend-item:hover {
    background: var(--vk-card-hover);
    margin: 0 -8px;
    padding: 4px 8px;
}

.friend-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.friend-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.friend-avatar .status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid var(--vk-card);
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.friend-avatar .status-dot.online {
    background: var(--vk-green);
}

.friend-avatar .status-dot.offline {
    background: var(--vk-text-muted);
}

.friend-name {
    font-size: 13px;
    color: var(--vk-text);
}

/* Заявки в друзья */
.sidebar-friend-requests {
    padding: 10px 12px;
    margin-top: 8px;
    border-top: 1px solid var(--vk-border);
}

.friend-requests-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--vk-text);
    margin-bottom: 8px;
}

.friend-requests-header i {
    color: var(--vk-blue);
}

.requests-count {
    margin-left: auto;
    background: var(--vk-red);
    color: white;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
}

.friend-request-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    margin-bottom: 2px;
}

.request-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

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

.request-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--vk-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.request-username {
    font-size: 11px;
    color: var(--vk-text-muted);
}

.request-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.request-actions button {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity var(--vk-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.request-actions .accept-btn {
    background: var(--vk-green);
    color: white;
}

.request-actions .accept-btn:hover {
    opacity: 0.85;
}

.request-actions .reject-btn {
    background: var(--vk-card-hover);
    color: var(--vk-text-secondary);
}

.request-actions .reject-btn:hover {
    background: var(--vk-card-active);
}

/* ============================================================
   МЕССЕНДЖЕР (ДЕСКТОП)
   ============================================================ */

.messages-page {
    display: flex;
    max-width: 960px;
    margin: 0 auto;
    padding: 12px 16px;
    gap: 12px;
    height: calc(100vh - 48px);
    overflow: hidden;
}

/* Диалоги */
.dialogs-sidebar-new {
    width: 320px;
    flex-shrink: 0;
    background: var(--vk-card);
    border-radius: var(--vk-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--vk-border);
}

.dialogs-header-new {
    padding: 12px 16px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.dialogs-header-new h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--vk-text);
}

.dialogs-header-new .unread-count {
    background: var(--vk-red);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.dialogs-search {
    padding: 0 12px 8px;
    flex-shrink: 0;
}

.dialogs-search input {
    width: 100%;
    padding: 6px 12px;
    border: none;
    border-radius: var(--vk-radius);
    font-size: 13px;
    outline: none;
    background: #2c2c2d;
    color: var(--vk-text);
    transition: background var(--vk-transition);
    font-family: inherit;
    height: 32px;
}

.dialogs-search input::placeholder {
    color: var(--vk-text-muted);
}

.dialogs-search input:focus {
    background: #363637;
}

.dialogs-list-new {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.dialog-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background var(--vk-transition-fast);
    text-decoration: none;
    color: var(--vk-text);
    border-left: 2px solid transparent;
    position: relative;
}

.dialog-item:hover {
    background: var(--vk-card-hover);
}

.dialog-item.active {
    background: var(--vk-blue-light);
    border-left-color: var(--vk-blue);
}

.dialog-item .dialog-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.dialog-item .dialog-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.dialog-item .dialog-avatar .status-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--vk-card);
}

.dialog-item .dialog-avatar .status-dot.online {
    background: var(--vk-green);
}

.dialog-item .dialog-avatar .status-dot.offline {
    background: var(--vk-text-muted);
}

.dialog-item .dialog-content {
    flex: 1;
    min-width: 0;
}

.dialog-item .dialog-content .dialog-name {
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--vk-text);
    margin-bottom: 2px;
}

.dialog-item .dialog-content .dialog-name .unread-badge {
    background: var(--vk-blue);
    color: white;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    margin-left: auto;
}

.dialog-item .dialog-content .dialog-last {
    font-size: 12px;
    color: var(--vk-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dialog-item .dialog-content .dialog-last .unread {
    color: var(--vk-text);
    font-weight: 500;
}

.dialog-item .dialog-time {
    font-size: 11px;
    color: var(--vk-text-muted);
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

.empty-dialogs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--vk-text-muted);
    text-align: center;
}

.empty-dialogs i {
    font-size: 40px;
    color: var(--vk-border);
    margin-bottom: 12px;
}

.empty-dialogs p {
    font-size: 13px;
}

/* Чат */
.chat-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--vk-card);
    border-radius: var(--vk-radius);
    overflow: hidden;
    border: 1px solid var(--vk-border);
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--vk-border);
    flex-shrink: 0;
    background: var(--vk-card);
    z-index: 10;
    min-height: 56px;
}

.chat-header .chat-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--vk-text);
    min-width: 0;
}

.chat-header .chat-user-info .avatar-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.chat-header .chat-user-info .avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.chat-header .chat-user-info .avatar-wrapper .status-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--vk-card);
}

.chat-header .chat-user-info .avatar-wrapper .status-dot.online {
    background: var(--vk-green);
}

.chat-header .chat-user-info .avatar-wrapper .status-dot.offline {
    background: var(--vk-text-muted);
}

.chat-header .chat-user-info .user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--vk-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header .chat-user-info .user-status {
    font-size: 12px;
    color: var(--vk-text-muted);
    margin-top: 1px;
}

.chat-header .chat-user-info .user-status.online {
    color: var(--vk-green);
}

.chat-header .chat-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.chat-header .chat-actions button,
.chat-header .chat-actions a {
    background: transparent;
    border: none;
    color: var(--vk-text-secondary);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--vk-transition-fast);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.chat-header .chat-actions button:hover,
.chat-header .chat-actions a:hover {
    background: var(--vk-card-hover);
    color: var(--vk-text);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    background: var(--vk-bg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-messages .message {
    padding: 6px 12px;
    background: var(--vk-card);
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
    max-width: 75%;
    position: relative;
    color: var(--vk-text);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    animation: msgIn 0.2s ease;
}

.chat-messages .message .time {
    color: var(--vk-text-muted);
    font-size: 11px;
    margin-right: 6px;
}

.chat-messages .message .username {
    color: var(--vk-blue);
    font-weight: 500;
    margin-right: 6px;
    font-size: 13px;
}

.chat-messages .message .username.me {
    color: var(--vk-blue-hover);
}

.chat-messages .message .text {
    color: var(--vk-text);
    font-size: 13px;
}

.chat-messages .message .read-status {
    display: inline-block;
    margin-left: 4px;
    font-size: 12px;
}

.chat-messages .message.my-message {
    background: var(--vk-blue-bg);
    margin-left: auto;
    margin-right: 0;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}

.chat-messages .message.my-message .time {
    color: rgba(255, 255, 255, 0.5);
}

.chat-messages .message.my-message .text {
    color: #ffffff;
}

.chat-messages .message.empty {
    text-align: center;
    padding: 40px 20px;
    background: transparent;
    border: none;
    color: var(--vk-text-muted);
    max-width: 100%;
    align-self: center;
    margin: 0 auto;
}

.chat-messages .message.empty i {
    display: block;
    font-size: 48px;
    margin-bottom: 12px;
    color: var(--vk-border);
}

@keyframes msgIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-input {
    padding: 10px 16px 14px;
    border-top: 1px solid var(--vk-border);
    background: var(--vk-card);
    flex-shrink: 0;
    position: relative;
}

.chat-input .input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    background: #2c2c2d;
    border-radius: 18px;
    padding: 4px 4px 4px 8px;
    border: 1px solid transparent;
    transition: border var(--vk-transition);
}

.chat-input .input-wrapper:focus-within {
    border-color: var(--vk-blue);
}

.chat-input .input-wrapper .emoji-btn {
    background: transparent;
    border: none;
    color: var(--vk-text-muted);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--vk-transition-fast);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-input .input-wrapper .emoji-btn:hover {
    color: var(--vk-text);
}

.chat-input .input-wrapper .input-field {
    flex: 1;
    min-width: 0;
    padding: 0;
}

.chat-input .input-wrapper .input-field textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--vk-text);
    font-size: 14px;
    resize: none;
    outline: none;
    font-family: inherit;
    padding: 7px 4px;
    max-height: 100px;
    min-height: 22px;
    line-height: 1.4;
}

.chat-input .input-wrapper .input-field textarea::placeholder {
    color: var(--vk-text-muted);
}

.chat-input .input-wrapper .send-btn {
    background: var(--vk-blue);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--vk-transition-fast);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-input .input-wrapper .send-btn:hover {
    background: var(--vk-blue-hover);
}

.chat-input .input-wrapper .send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-input .emoji-panel {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 16px;
    right: 16px;
    background: var(--vk-card);
    border: 1px solid var(--vk-border);
    border-radius: var(--vk-radius-lg);
    padding: 10px;
    margin-bottom: 8px;
    box-shadow: var(--vk-shadow-lg);
    max-height: 200px;
    overflow-y: auto;
}

.chat-input .emoji-panel.show {
    display: block;
}

.chat-input .emoji-panel .emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}

.chat-input .emoji-panel .emoji-grid .emoji {
    font-size: 24px;
    padding: 4px;
    text-align: center;
    cursor: pointer;
    border-radius: var(--vk-radius-sm);
    transition: background var(--vk-transition-fast);
    user-select: none;
}

.chat-input .emoji-panel .emoji-grid .emoji:hover {
    background: var(--vk-card-hover);
}

.no-chat-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--vk-text-muted);
    text-align: center;
}

.no-chat-selected i {
    font-size: 56px;
    color: var(--vk-border);
    margin-bottom: 12px;
}

.no-chat-selected h3 {
    font-size: 16px;
    color: var(--vk-text);
    margin-bottom: 4px;
    font-weight: 500;
}

.no-chat-selected p {
    font-size: 13px;
}

/* ============================================================
   ПРОФИЛЬ
   ============================================================ */

.vk-profile-layout {
    max-width: 960px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    gap: 12px;
    height: calc(100vh - 48px);
    overflow: hidden;
}

.profile-sidebar {
    width: 164px;
    flex-shrink: 0;
    background: var(--vk-card);
    border-radius: var(--vk-radius);
    padding: 4px 0;
    overflow-y: auto;
    height: fit-content;
    max-height: 100%;
    border: 1px solid var(--vk-border);
}

.profile-menu {
    display: flex;
    flex-direction: column;
    padding: 4px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: var(--vk-radius-sm);
    color: var(--vk-text-secondary);
    text-decoration: none;
    transition: background var(--vk-transition-fast), color var(--vk-transition-fast);
    font-size: 13px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    min-height: 32px;
}

.menu-item:hover {
    background: var(--vk-card-hover);
    color: var(--vk-text);
}

.menu-item.active {
    background: var(--vk-blue-light);
    color: var(--vk-blue);
    font-weight: 500;
}

.menu-item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    flex-shrink: 0;
}

.profile-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding-bottom: 12px;
}

.profile-card-vk {
    background: var(--vk-card);
    border-radius: var(--vk-radius);
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid var(--vk-border);
}

.profile-cover {
    height: 120px;
    background: linear-gradient(135deg, #1a3a5c, #0f2236);
    position: relative;
    padding: 0 20px;
}

.profile-avatar-wrapper {
    position: absolute;
    bottom: -40px;
    left: 20px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.profile-avatar-big {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--vk-card);
    object-fit: cover;
    background: var(--vk-card);
}

.avatar-upload-form {
    position: relative;
    display: inline-block;
}

.avatar-upload-form input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

.avatar-upload-label {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: var(--vk-radius-sm);
    font-size: 11px;
    cursor: pointer;
    transition: background var(--vk-transition);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.avatar-upload-label:hover {
    background: rgba(0, 0, 0, 0.8);
}

.profile-info {
    padding: 50px 20px 16px;
}

.profile-name-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.profile-name-section h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--vk-text);
}

.profile-username-vk {
    color: var(--vk-text-muted);
    font-size: 13px;
}

.profile-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 14px;
}

.profile-detail {
    font-size: 13px;
    color: var(--vk-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-detail i {
    width: 16px;
    text-align: center;
}

.profile-detail i.online {
    color: var(--vk-green);
}

.profile-detail i.offline {
    color: var(--vk-text-muted);
}

.profile-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-btn {
    padding: 6px 16px;
    border-radius: var(--vk-radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--vk-transition);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-family: inherit;
}

.profile-btn.primary {
    background: var(--vk-blue);
    color: white;
}

.profile-btn.primary:hover {
    background: var(--vk-blue-hover);
}

.profile-btn.primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.profile-btn.success {
    background: var(--vk-green);
    color: white;
}

.profile-btn.success:hover {
    background: #3da83d;
}

.profile-btn.danger {
    background: var(--vk-card-hover);
    color: var(--vk-text);
}

.profile-btn.danger:hover {
    background: var(--vk-red);
    color: white;
}

.profile-btn.secondary {
    background: var(--vk-card-hover);
    color: var(--vk-text);
}

.profile-btn.secondary:hover {
    background: var(--vk-card-active);
}

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

.stats-card {
    background: var(--vk-card);
    border-radius: var(--vk-radius);
    padding: 12px 14px;
    border: 1px solid var(--vk-border);
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.stats-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--vk-text);
}

.stats-count {
    font-size: 13px;
    color: var(--vk-blue);
    font-weight: 500;
}

.stats-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    text-decoration: none;
    color: var(--vk-text);
    cursor: pointer;
    transition: background var(--vk-transition-fast);
    border-radius: var(--vk-radius-sm);
}

.stats-item:hover {
    background: var(--vk-card-hover);
    margin: 0 -6px;
    padding: 4px 6px;
}

.stats-item img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.stats-item span {
    font-size: 13px;
}

.stats-empty {
    font-size: 13px;
    color: var(--vk-text-muted);
    padding: 4px 0;
}

.stats-show-all {
    font-size: 12px;
    color: var(--vk-text-link);
    text-decoration: none;
    padding: 4px 0;
}

.stats-show-all:hover {
    text-decoration: underline;
}

.profile-right {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: fit-content;
    max-height: 100%;
    overflow-y: auto;
}

.right-card {
    background: var(--vk-card);
    border-radius: var(--vk-radius);
    padding: 12px 14px;
    border: 1px solid var(--vk-border);
}

.right-card-title {
    font-size: 13px;
    color: var(--vk-text);
    font-weight: 600;
    margin-bottom: 8px;
}

.right-card-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--vk-text);
}

.right-card-item i {
    width: 18px;
    text-align: center;
}

.profile-edit-form {
    background: var(--vk-card);
    border-radius: var(--vk-radius);
    padding: 18px;
    margin: 0 20px 20px;
    border: 1px solid var(--vk-border);
}

.profile-edit-form h3 {
    color: var(--vk-text);
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 600;
}

.profile-edit-form .form-group {
    margin-bottom: 12px;
}

.profile-edit-form .form-group label {
    display: block;
    font-size: 12px;
    color: var(--vk-text-secondary);
    margin-bottom: 4px;
    font-weight: 500;
}

.profile-edit-form .form-group input,
.profile-edit-form .form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--vk-border);
    border-radius: var(--vk-radius);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    background: #2c2c2d;
    color: var(--vk-text);
    transition: border var(--vk-transition);
    resize: vertical;
}

.profile-edit-form .form-group input:focus,
.profile-edit-form .form-group textarea:focus {
    border-color: var(--vk-blue);
}

.profile-save-btn {
    background: var(--vk-blue);
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: var(--vk-radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--vk-transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.profile-save-btn:hover {
    background: var(--vk-blue-hover);
}

.profile-success,
.success-message {
    background: rgba(75, 179, 75, 0.15);
    color: var(--vk-green);
    padding: 10px 14px;
    border-radius: var(--vk-radius);
    font-size: 13px;
    border: 1px solid rgba(75, 179, 75, 0.3);
    margin-bottom: 12px;
}

.profile-error,
.error-message {
    background: rgba(230, 70, 70, 0.15);
    color: #ff7d7d;
    padding: 10px 14px;
    border-radius: var(--vk-radius);
    font-size: 13px;
    border: 1px solid rgba(230, 70, 70, 0.3);
    margin-bottom: 12px;
}

/* ============================================================
   СТРАНИЦА ПОЛЬЗОВАТЕЛЯ
   ============================================================ */

.user-page {
    max-width: 700px;
    margin: 20px auto 0;
    padding: 0 16px;
}

.user-card {
    background: var(--vk-card);
    border-radius: var(--vk-radius);
    border: 1px solid var(--vk-border);
    overflow: hidden;
}

.user-cover {
    height: 140px;
    background: linear-gradient(135deg, #1a3a5c, #0f2236);
    position: relative;
}

.user-cover-avatar {
    position: absolute;
    bottom: -45px;
    left: 24px;
}

.user-cover-avatar img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid var(--vk-card);
    object-fit: cover;
    background: var(--vk-card);
}

.user-cover-avatar .online-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid var(--vk-card);
}

.user-cover-avatar .online-badge.online {
    background: var(--vk-green);
}

.user-cover-avatar .online-badge.offline {
    background: var(--vk-text-muted);
}

.user-header-info {
    padding: 55px 24px 16px 130px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.user-name-block h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--vk-text);
    margin-bottom: 4px;
}

.user-name-block .username-tag {
    color: var(--vk-text-muted);
    font-size: 13px;
}

.user-status-text {
    font-size: 13px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-status-text .online-text {
    color: var(--vk-green);
}

.user-status-text .offline-text {
    color: var(--vk-text-muted);
}

.user-joined {
    font-size: 13px;
    color: var(--vk-text-muted);
    margin-top: 4px;
}

.user-joined i {
    margin-right: 6px;
    width: 16px;
}

.user-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.user-bio-section {
    padding: 0 24px 16px 130px;
}

.user-bio-section .bio-text {
    padding: 12px 14px;
    background: #2c2c2d;
    border-radius: var(--vk-radius);
    font-size: 13px;
    line-height: 1.5;
    color: var(--vk-text-secondary);
    margin: 0;
}

.user-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 0 24px 24px 130px;
}

.detail-card {
    background: #2c2c2d;
    border-radius: var(--vk-radius);
    padding: 12px 14px;
}

.detail-card .detail-label {
    font-size: 11px;
    color: var(--vk-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-card .detail-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--vk-text);
    margin-top: 2px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vk-text-link);
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 12px;
}

.back-link:hover {
    text-decoration: underline;
}

/* ============================================================
   УВЕДОМЛЕНИЯ
   ============================================================ */

.new-message-notification {
    position: fixed;
    top: 60px;
    right: 16px;
    background: var(--vk-card);
    border: 1px solid var(--vk-border);
    border-radius: var(--vk-radius-lg);
    padding: 12px 16px;
    box-shadow: var(--vk-shadow-lg);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideDown 0.3s ease;
    max-width: 320px;
    min-width: 240px;
}

.new-message-notification img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.new-message-notification .notif-content {
    flex: 1;
    min-width: 0;
}

.new-message-notification .notif-content .notif-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--vk-text);
    margin-bottom: 2px;
}

.new-message-notification .notif-content .notif-text {
    font-size: 12px;
    color: var(--vk-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.new-message-notification .notif-close {
    background: transparent;
    border: none;
    color: var(--vk-text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--vk-transition-fast);
    flex-shrink: 0;
}

.new-message-notification .notif-close:hover {
    background: var(--vk-card-hover);
    color: var(--vk-text);
}

.new-message-notification .notif-sound-icon {
    color: var(--vk-blue);
    font-size: 16px;
    animation: bellPulse 1s infinite;
    flex-shrink: 0;
}

@keyframes bellPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast-vk {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vk-card);
    color: var(--vk-text);
    padding: 10px 20px;
    border-radius: var(--vk-radius);
    border: 1px solid var(--vk-border);
    box-shadow: var(--vk-shadow-lg);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideUp 0.25s ease;
    font-size: 13px;
    font-weight: 500;
}

.toast-vk i {
    color: var(--vk-blue);
    font-size: 16px;
}

.toast-vk.success i { color: var(--vk-green); }
.toast-vk.error i { color: var(--vk-red); }

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.toast-friend {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vk-card);
    color: var(--vk-text);
    padding: 12px 24px;
    border-radius: var(--vk-radius);
    border: 1px solid var(--vk-border);
    box-shadow: var(--vk-shadow-lg);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideDown 0.3s ease;
    font-size: 13px;
    min-width: 200px;
    justify-content: center;
}

.toast-friend i { font-size: 18px; }
.toast-friend.success i { color: var(--vk-green); }
.toast-friend.error i { color: var(--vk-red); }
.toast-friend.info i { color: var(--vk-blue); }

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ (768px и ниже)
   ============================================================ */

/* Мобильное меню (скрыто на десктопе) */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    /* Скрываем десктопные элементы */
    .main-sidebar,
    .profile-sidebar,
    .feed-right,
    .profile-right {
        display: none !important;
    }

    /* ===== ШАПКА МОБИЛЬНАЯ ===== */
    .vk-header {
        height: 44px;
        padding: 0 8px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: var(--vk-header);
        z-index: 1000;
    }

    .header-container {
        padding: 0 8px;
        gap: 8px;
    }

    .header-left .logo {
        font-size: 15px;
        gap: 4px;
    }

    .header-left .logo i {
        font-size: 16px;
        width: 24px;
        height: 24px;
    }

    .header-left .logo span {
        display: none;
    }

    .header-center {
        flex: 1;
        max-width: none;
    }

    .search-bar {
        height: 30px;
        max-width: none;
        padding: 0 10px;
    }

    .search-bar input {
        font-size: 13px;
    }

    .header-icons {
        gap: 0;
    }

    .icon-btn {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .icon-btn .badge {
        font-size: 9px;
        min-width: 14px;
        height: 14px;
        top: 0;
        right: 0;
    }

    .avatar-btn {
        width: 28px;
        height: 28px;
        margin-left: 2px;
    }

    /* ===== МОБИЛЬНОЕ МЕНЮ ВНИЗУ ===== */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 52px;
        background: var(--vk-header);
        border-top: 1px solid var(--vk-border);
        z-index: 999;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        justify-content: space-around;
        align-items: center;
    }

    .mobile-bottom-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex: 1;
        height: 52px;
        color: var(--vk-text-muted);
        text-decoration: none;
        font-size: 10px;
        position: relative;
        transition: color var(--vk-transition);
    }

    .mobile-bottom-nav .nav-item i {
        font-size: 20px;
    }

    .mobile-bottom-nav .nav-item.active {
        color: var(--vk-blue);
    }

    .mobile-bottom-nav .nav-item .badge {
        position: absolute;
        top: 6px;
        right: 50%;
        transform: translateX(14px);
        background: var(--vk-red);
        color: white;
        font-size: 9px;
        font-weight: 600;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border: 2px solid var(--vk-header);
    }

    /* ===== ОСНОВНОЙ МАКЕТ ===== */
    .vk-layout-main,
    .vk-profile-layout,
    .messages-page {
        margin-top: 44px !important;
        padding: 0 !important;
        height: calc(100vh - 44px - 52px) !important;
        overflow-y: auto;
        gap: 0 !important;
        max-width: 100% !important;
    }

    .feed-main {
        padding: 8px !important;
    }

    .welcome-block {
        border-radius: var(--vk-radius) !important;
        padding: 24px 16px !important;
    }

    .welcome-block h2 {
        font-size: 16px !important;
    }

    .welcome-block p {
        font-size: 13px !important;
    }

    /* ============================================
       МОБИЛЬНЫЙ МЕССЕНДЖЕР
       ============================================ */

    .messages-page {
        display: flex;
        flex-direction: column;
    }

    /* Список диалогов */
    .dialogs-sidebar-new {
        width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        height: 100% !important;
        background: var(--vk-bg) !important;
    }

    .dialogs-header-new {
        padding: 12px 16px 8px !important;
        background: var(--vk-bg) !important;
    }

    .dialogs-header-new h2 {
        font-size: 17px !important;
        font-weight: 600 !important;
    }

    .dialogs-search {
        padding: 4px 12px 8px !important;
        background: var(--vk-bg) !important;
    }

    .dialogs-search input {
        height: 36px !important;
        font-size: 14px !important;
    }

    .dialogs-list-new {
        padding: 0 !important;
    }

    .dialog-item {
        padding: 10px 14px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-bottom: 1px solid var(--vk-divider) !important;
    }

    .dialog-item.active {
        background: var(--vk-card-hover) !important;
    }

    .dialog-item .dialog-avatar {
        width: 48px !important;
        height: 48px !important;
    }

    .dialog-item .dialog-content .dialog-name {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    .dialog-item .dialog-content .dialog-last {
        font-size: 13px !important;
    }

    /* ============================================
       МОБИЛЬНЫЙ ЧАТ
       ============================================ */

    .chat-main {
        border-radius: 0 !important;
        border: none !important;
        height: 100% !important;
        background: var(--vk-bg) !important;
    }

    .chat-header {
        padding: 6px 8px !important;
        min-height: 52px !important;
        background: var(--vk-header) !important;
        border-bottom: 1px solid var(--vk-border) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
    }

    .chat-header .chat-user-info .avatar-wrapper {
        width: 38px !important;
        height: 38px !important;
    }

    .chat-header .chat-user-info .user-name {
        font-size: 14px !important;
    }

    .chat-header .chat-user-info .user-status {
        font-size: 12px !important;
    }

    .chat-header .chat-actions button,
    .chat-header .chat-actions a {
        width: 34px !important;
        height: 34px !important;
        font-size: 15px !important;
    }

    /* Сообщения */
    .chat-messages {
        padding: 12px 10px !important;
        background: var(--vk-bg) !important;
        gap: 2px !important;
    }

    .chat-messages .message {
        max-width: 80% !important;
        font-size: 14px !important;
        padding: 7px 12px !important;
        border-radius: 16px !important;
        border-bottom-left-radius: 4px !important;
        line-height: 1.4 !important;
    }

    .chat-messages .message.my-message {
        border-radius: 16px !important;
        border-bottom-right-radius: 4px !important;
        border-bottom-left-radius: 16px !important;
    }

    .chat-messages .message .username,
    .chat-messages .message .time {
        font-size: 12px !important;
    }

    .chat-messages .message .text {
        font-size: 14px !important;
    }

    /* Поле ввода */
    .chat-input {
        padding: 8px 10px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--vk-header) !important;
        border-top: 1px solid var(--vk-border) !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 20 !important;
    }

    .chat-input .input-wrapper {
        border-radius: 20px !important;
        padding: 3px 3px 3px 6px !important;
        background: #2c2c2d !important;
    }

    .chat-input .input-wrapper .emoji-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }

    .chat-input .input-wrapper .input-field textarea {
        font-size: 15px !important;
        padding: 9px 4px !important;
        max-height: 100px !important;
    }

    .chat-input .input-wrapper .send-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    .chat-input .emoji-panel {
        left: 10px !important;
        right: 10px !important;
        padding: 10px !important;
    }

    .chat-input .emoji-panel .emoji-grid {
        grid-template-columns: repeat(7, 1fr) !important;
    }

    .chat-input .emoji-panel .emoji-grid .emoji {
        font-size: 24px !important;
        padding: 5px !important;
    }

    /* ============================================
       МОБИЛЬНЫЙ ПРОФИЛЬ
       ============================================ */

    .profile-main {
        padding: 0 !important;
    }

    .profile-card-vk {
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--vk-border) !important;
        margin-bottom: 0 !important;
    }

    .profile-cover {
        height: 110px !important;
        padding: 0 16px !important;
    }

    .profile-avatar-wrapper {
        bottom: -38px !important;
        left: 16px !important;
        gap: 8px !important;
    }

    .profile-avatar-big {
        width: 76px !important;
        height: 76px !important;
        border-width: 3px !important;
    }

    .avatar-upload-label {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    .profile-info {
        padding: 48px 16px 16px !important;
    }

    .profile-name-section {
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    .profile-name-section h1 {
        font-size: 18px !important;
    }

    .profile-username-vk {
        font-size: 12px !important;
    }

    .profile-details {
        gap: 4px 12px !important;
        margin-bottom: 12px !important;
    }

    .profile-detail {
        font-size: 12px !important;
    }

    .profile-actions {
        gap: 6px !important;
    }

    .profile-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
        flex: 1 !important;
        justify-content: center !important;
    }

    .profile-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    .stats-card {
        padding: 12px 14px !important;
    }

    .profile-edit-form {
        margin: 8px !important;
        padding: 14px !important;
        border-radius: var(--vk-radius) !important;
    }

    /* ============================================
       МОБИЛЬНАЯ СТРАНИЦА ПОЛЬЗОВАТЕЛЯ
       ============================================ */

    .user-page {
        padding: 0 !important;
        margin-top: 44px !important;
    }

    .user-card {
        border-radius: 0 !important;
        border: none !important;
    }

    .user-cover {
        height: 110px !important;
    }

    .user-cover-avatar {
        left: 16px !important;
        bottom: -38px !important;
    }

    .user-cover-avatar img {
        width: 76px !important;
        height: 76px !important;
        border-width: 3px !important;
    }

    .user-header-info {
        padding: 48px 16px 12px 100px !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .user-bio-section {
        padding: 0 16px 12px 100px !important;
    }

    .user-details-grid {
        padding: 0 16px 16px 100px !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .user-name-block h1 {
        font-size: 18px !important;
    }

    .user-header-actions {
        width: 100% !important;
        margin-top: 4px !important;
    }

    .user-header-actions .profile-btn {
        flex: 1 !important;
        justify-content: center !important;
    }

    /* ============================================
       МОБИЛЬНЫЕ УВЕДОМЛЕНИЯ
       ============================================ */

    .new-message-notification {
        top: 52px !important;
        right: 8px !important;
        left: 8px !important;
        max-width: none !important;
        min-width: auto !important;
        padding: 10px 14px !important;
    }

    .toast-vk {
        bottom: 64px !important;
        font-size: 13px !important;
        padding: 10px 18px !important;
        max-width: 90% !important;
    }

    .toast-friend {
        top: 52px !important;
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
        font-size: 13px !important;
        padding: 10px 18px !important;
        min-width: auto !important;
    }

    /* ============================================
       МОБИЛЬНЫЙ ПОИСК
       ============================================ */

    .search-results {
        position: fixed !important;
        top: 44px !important;
        left: 0 !important;
        right: 0 !important;
        max-height: calc(100vh - 44px) !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
        padding: 6px !important;
    }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ (480px и ниже)
   ============================================================ */

@media (max-width: 480px) {
    .header-left .logo i {
        font-size: 15px;
        width: 22px;
        height: 22px;
    }

    .search-bar {
        height: 28px;
    }

    .search-bar input {
        font-size: 12px;
    }

    .chat-messages .message {
        max-width: 88% !important;
        font-size: 14px !important;
        padding: 7px 11px !important;
    }

    .chat-header .chat-user-info .user-status {
        display: none !important;
    }

    .chat-header .chat-user-info .user-name {
        font-size: 14px !important;
    }

    .profile-avatar-big {
        width: 68px !important;
        height: 68px !important;
    }

    .profile-cover {
        height: 90px !important;
    }

    .profile-info {
        padding: 44px 14px 14px !important;
    }

    .user-cover {
        height: 90px !important;
    }

    .user-cover-avatar img {
        width: 64px !important;
        height: 64px !important;
    }

    .user-header-info {
        padding: 40px 14px 12px 90px !important;
    }

    .user-bio-section {
        padding: 0 14px 12px 90px !important;
    }

    .user-details-grid {
        padding: 0 14px 14px 90px !important;
        grid-template-columns: 1fr !important;
    }

    .user-name-block h1 {
        font-size: 16px !important;
    }

    .mobile-bottom-nav .nav-item i {
        font-size: 19px;
    }

    .mobile-bottom-nav .nav-item {
        font-size: 9px;
    }
}

/* ============================================================
   ДОПОЛНИТЕЛЬНЫЕ УТИЛИТЫ
   ============================================================ */

.btn-vk {
    padding: 6px 16px;
    border-radius: var(--vk-radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--vk-transition);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-family: inherit;
    white-space: nowrap;
}

.btn-vk.primary {
    background: var(--vk-blue);
    color: white;
}

.btn-vk.primary:hover {
    background: var(--vk-blue-hover);
}

.btn-vk.primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-vk.success {
    background: var(--vk-green);
    color: white;
}

.btn-vk.danger {
    background: var(--vk-red);
    color: white;
}

.btn-vk.secondary {
    background: var(--vk-card-hover);
    color: var(--vk-text);
}

.btn-vk.secondary:hover {
    background: var(--vk-card-active);
}

.friend-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.friend-badge.friend {
    background: rgba(75, 179, 75, 0.15);
    color: var(--vk-green);
}

.friend-badge.pending {
    background: rgba(255, 160, 0, 0.15);
    color: var(--vk-orange);
}

.friend-badge.sent {
    background: var(--vk-blue-light);
    color: var(--vk-blue);
}

.hidden { display: none !important; }
.text-center { text-align: center; }

/* ============================================================
   КНОПКА "ВНИЗ" ДЛЯ ЧАТА
   ============================================================ */

.scroll-to-bottom-btn {
    position: absolute;
    bottom: 80px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--vk-card);
    border: 1px solid var(--vk-border);
    color: var(--vk-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--vk-transition), transform var(--vk-transition), background var(--vk-transition);
    z-index: 15;
    box-shadow: var(--vk-shadow);
}

.scroll-to-bottom-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-to-bottom-btn:hover {
    background: var(--vk-card-hover);
    transform: translateY(-2px);
}

.scroll-to-bottom-btn:active {
    transform: scale(0.92);
}

@media (max-width: 768px) {
    .scroll-to-bottom-btn {
        bottom: 76px;
        right: 12px;
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* ============================================================
   АНИМАЦИИ ПОЯВЛЕНИЯ
   ============================================================ */

.fade-in-init {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-in-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   HOVER ТОЛЬКО ДЛЯ ДЕСКТОПА
   ============================================================ */

.no-hover .dialog-item:hover,
.no-hover .friend-item:hover,
.no-hover .stats-item:hover {
    background: transparent;
    margin: 0;
    padding: 4px 0;
}

.no-hover .icon-btn:hover {
    background: transparent;
}

.no-hover .icon-btn:active {
    background: var(--vk-card-hover);
}

/* ============================================================
   МОБИЛЬНАЯ ОПТИМИЗАЦИЯ — МЕНЬШЕ АНИМАЦИЙ
   ============================================================ */

.is-mobile .chat-messages .message {
    animation-duration: 0.15s;
}

.is-mobile .new-message-notification {
    animation-duration: 0.2s;
}

/* ============================================================
   УВЕЛИЧЕНИЕ ОБЛАСТИ НАЖАТИЯ НА МОБИЛЬНЫХ
   ============================================================ */

.is-mobile .icon-btn {
    min-width: 40px;
    min-height: 40px;
}

.is-mobile .mobile-bottom-nav .nav-item {
    min-height: 52px;
}

/* ============================================================
   SAFE AREA ДЛЯ IPHONE
   ============================================================ */

@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        .vk-header {
            padding-top: env(safe-area-inset-top);
            height: calc(44px + env(safe-area-inset-top));
        }

        .mobile-bottom-nav {
            padding-bottom: env(safe-area-inset-bottom);
            height: calc(52px + env(safe-area-inset-bottom));
        }

        .chat-input {
            padding-bottom: calc(8px + env(safe-area-inset-bottom));
        }

        .vk-layout-main,
        .vk-profile-layout,
        .messages-page,
        .user-page {
            margin-top: calc(44px + env(safe-area-inset-top)) !important;
            height: calc(100vh - 44px - 52px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ============================================================
   ФИКС ДЛЯ iOS INPUT ZOOM
   ============================================================ */

@media (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea {
        font-size: 16px !important;
    }

    /* Но для чата можно меньше */
    .chat-input .input-wrapper .input-field textarea {
        font-size: 15px !important;
    }
}

/* ============================================================
   СКРЫТИЕ СКРОЛЛА НА МОБИЛЬНОЙ (опционально)
   ============================================================ */

@media (max-width: 768px) {
    .dialogs-list-new::-webkit-scrollbar,
    .chat-messages::-webkit-scrollbar {
        width: 3px;
    }

    .dialogs-list-new::-webkit-scrollbar-thumb,
    .chat-messages::-webkit-scrollbar-thumb {
        background: #3a3a3b;
        border-radius: 3px;
    }
}

/* ============================================================
   ПУЛЬСАЦИЯ ОНЛАЙН-СТАТУСА
   ============================================================ */

@keyframes onlinePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(75, 179, 75, 0.5);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(75, 179, 75, 0);
    }
}

.friend-avatar .status-dot.online,
.dialog-item .dialog-avatar .status-dot.online,
.chat-header .chat-user-info .avatar-wrapper .status-dot.online {
    animation: onlinePulse 2s infinite;
}

/* ============================================================
   ПЛАВНАЯ ЗАГРУЗКА СТРАНИЦЫ
   ============================================================ */

body {
    animation: pageFadeIn 0.2s ease;
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mobile-back-btn {
    display: none;
    background: transparent;
    border: none;
    color: var(--vk-text);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--vk-transition-fast);
}

.mobile-back-btn:hover {
    background: var(--vk-card-hover);
}

@media (max-width: 768px) {
    .mobile-back-btn {
        display: flex;
    }
}
/* ============================================================
   ГАЛОЧКА ВЕРИФИКАЦИИ — КАК В МЕССЕНДЖЕРЕ (синяя галочка)
   ============================================================ */

.vk-verified-icon {
    color: #71aaeb;
    font-size: 14px;
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
}

.profile-name-section h1 .vk-verified-icon {
    font-size: 22px;
    margin-left: 8px;
}

.stats-item .vk-verified-icon {
    font-size: 12px;
    margin-left: 4px;
}

.dialog-name .vk-verified-icon {
    font-size: 14px;
    margin-left: 4px;
}

/* Аватар с галочкой (синий кружок в углу) */
.vk-avatar-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.vk-avatar-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.vk-avatar-verified {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #71aaeb;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: 2px solid var(--vk-card);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.vk-avatar-verified i {
    font-size: 10px;
}

@media (max-width: 768px) {
    .vk-verified-icon { font-size: 13px; }
    .profile-name-section h1 .vk-verified-icon { font-size: 18px; }
    .vk-avatar-verified { width: 18px; height: 18px; font-size: 9px; }
}