.warning-modal .modal-header {
    background: rgba(255, 149, 0, 0.1);
    border-bottom-color: var(--warning-color);
}

.warning-modal .modal-header h3 {
    color: var(--warning-color);
}

.warning-modal .modal-body {
    text-align: center;
}

.warning-icon {
    font-size: 48px;
    color: var(--warning-color);
    margin-bottom: 20px;
}

.error-modal .modal-header {
    background: rgba(255, 59, 48, 0.1);
    border-bottom-color: var(--danger-color);
}

.error-modal .modal-header h3 {
    color: var(--danger-color);
}

.error-modal .modal-body {
    text-align: center;
}

.error-icon {
    font-size: 48px;
    color: var(--danger-color);
    margin-bottom: 20px;
}

.success-modal .modal-header {
    background: rgba(52, 199, 89, 0.1);
    border-bottom-color: var(--success-color);
}

.success-modal .modal-header h3 {
    color: var(--success-color);
}

.success-modal .modal-body {
    text-align: center;
}

.success-icon {
    font-size: 48px;
    color: var(--success-color);
    margin-bottom: 20px;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .chat-type-selector {
        flex-direction: column;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-cancel {
        width: 100%;
    }
}


@media (max-width: 768px) {


}


@media (max-width: 768px) {
    

    
}


/* ALL_DATA pivot sandbox */


@media (max-width: 820px) {


}

/* Compound publications: one logical message, independent visual blocks. */
.message-bubble.media-message-bubble.publication-message-bubble {
    width: fit-content;
    max-width: min(460px, calc(100vw - 96px));
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.message-bubble.publication-message-bubble .message-publication-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: fit-content;
    max-width: min(460px, calc(100vw - 96px));
    overflow: visible;
    border-radius: 0;
    background: transparent;
}

.message.own .message-publication-card {
    align-items: flex-end;
}

.message-publication-card .message-video-list {
    align-items: flex-start;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
}

.message.own .message-publication-card .message-video-list {
    align-items: flex-end;
}

.message-publication-card .message-video,
.message-publication-card.has-video:not(.is-single-video-publication) .message-video {
    align-self: inherit;
    overflow: visible;
    border-radius: 18px;
    background: transparent;
}

.message-publication-card .message-video-frame,
.message-publication-card .message-video:first-child .message-video-frame {
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

.message-publication-card .video-info {
    position: absolute;
    top: 9px;
    right: auto;
    bottom: auto;
    left: 9px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    pointer-events: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.message-publication-card .video-name {
    display: none;
}

.message-publication-card .video-download-btn {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(12, 14, 14, .62);
    color: #fff;
    opacity: 0;
    pointer-events: auto;
    transform: translateY(-3px);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    transition: opacity .16s ease, transform .16s ease;
}

.message-publication-card .message-video:hover .video-download-btn,
.message-publication-card .video-download-btn:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

.message-publication-card .message-publication-music {
    box-sizing: border-box;
    width: min(360px, calc(100vw - 96px));
    max-width: 100%;
    padding: 0;
}

.message-publication-card .message-attachments {
    width: min(360px, calc(100vw - 96px));
    max-width: 100%;
    gap: 6px;
}

.message-publication-card .message-image-group,
.message-publication-card .message-image-group.single {
    width: min(336px, calc(100vw - 104px));
    max-width: 100%;
    border-radius: 16px;
}

.message-publication-caption-bubble {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: fit-content;
    min-width: 112px;
    max-width: min(420px, calc(100vw - 96px));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
    border-radius: 18px 18px 18px 8px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}

.message.own .message-publication-caption-bubble {
    border-color: color-mix(in srgb, var(--primary-color) 36%, transparent);
    border-radius: 18px 18px 8px 18px;
    background: linear-gradient(180deg, rgba(35, 149, 8, .22), rgba(35, 149, 8, .13));
}

.message-publication-caption-bubble .message-attachment-caption {
    width: auto;
    max-width: 100%;
    padding: 9px 13px 2px;
    white-space: normal;
}

.message-publication-caption-bubble > .message-time {
    position: static !important;
    align-self: flex-end;
    width: auto !important;
    max-width: calc(100% - 18px) !important;
    margin: 0 9px 7px auto;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    text-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.message.own .message-publication-caption-bubble > .message-time {
    color: var(--ggdep-own-message-time, rgba(248, 250, 252, .74)) !important;
}

.message-publication-meta {
    align-self: flex-end;
    height: 20px;
    margin-top: -2px;
}

.message-publication-meta > .message-time {
    position: static !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    padding: 3px 6px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--bg-secondary) 78%, transparent) !important;
    color: var(--text-muted) !important;
    text-shadow: none !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .1) !important;
}

.message.own .message-publication-meta > .message-time {
    color: var(--ggdep-own-message-time, rgba(248, 250, 252, .74)) !important;
}

@media (hover: none) and (pointer: coarse) {
    .message-publication-card .video-download-btn {
        opacity: .92;
        transform: none;
    }
}

@media (max-width: 768px) {
    .message-bubble.media-message-bubble.publication-message-bubble,
    .message-bubble.publication-message-bubble .message-publication-card {
        max-width: calc(100vw - 58px);
    }

    .message-publication-card .message-publication-music,
    .message-publication-card .message-attachments,
    .message-publication-caption-bubble {
        max-width: calc(100vw - 58px);
    }
}


.modal-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.modal-tab {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.modal-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-tab.active {
    background: var(--primary-color);
    color: white;
}

.modal-tab-content {
    display: none;
}

.modal-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.file-input-container {
    position: relative;
    margin-bottom: 20px;
}

.file-input-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--bg-tertiary);
    border: 2px dashed var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.file-input-label:hover {
    background: var(--bg-hover);
    border-color: var(--primary-color);
}

.file-input-label i {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: 16px;
}

.file-input-label span {
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 8px;
}

.file-input-label small {
    color: var(--text-muted);
    font-size: 13px;
}

.file-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.selected-files-list {
    margin-top: 20px;
}

.selected-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    margin-bottom: 8px;
}

.selected-file i {
    color: var(--primary-color);
    font-size: 20px;
}

.selected-file-info {
    flex: 1;
}

.selected-file-name {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    word-break: break-word;
}

.selected-file-size {
    font-size: 12px;
    color: var(--text-muted);
}

.remove-file-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.remove-file-btn:hover {
    background: var(--danger-color);
    color: white;
}

.modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.modal-loading i {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.modal-loading span {
    color: var(--text-primary);
    font-weight: 500;
}

.confirmation-modal .modal-body {
    text-align: center;
}

.confirmation-icon {
    font-size: 64px;
    color: var(--warning-color);
    margin-bottom: 20px;
}

.confirmation-message {
    font-size: 16px;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 8px;
}

.confirmation-details {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 32px;
}

.field-group {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}

.field-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.field-group h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.input-with-icon {
    position: relative;
}

.input-with-icon i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.input-with-icon .form-control {
    padding-left: 44px;
}

.input-with-icon.right-icon i {
    left: auto;
    right: 16px;
}

.input-with-icon.right-icon .form-control {
    padding-left: 16px;
    padding-right: 44px;
}

.expanding-textarea {
    position: relative;
}

.expanding-textarea .form-control {
    min-height: 40px;
    max-height: 200px;
    resize: none;
    overflow-y: auto;
}

.expanding-textarea .char-count {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.expanding-textarea .char-count.near-limit {
    color: var(--warning-color);
}

.expanding-textarea .char-count.over-limit {
    color: var(--danger-color);
}
.notifications-list {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.notification-item {
    position: relative;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notification-item:hover {
    background: var(--bg-hover);
    transform: translateX(4px);
}

.notification-item.unread {
    background: linear-gradient(90deg, rgba(42, 171, 238, 0.08) 0%, rgba(42, 171, 238, 0.02) 100%);
    border-left: 3px solid var(--primary-color);
    padding-left: 17px;
}

.notification-item.unread:hover {
    background: linear-gradient(90deg, rgba(42, 171, 238, 0.12) 0%, rgba(42, 171, 238, 0.04) 100%);
}

.notification-item.unread::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: var(--radius-circle);
    animation: notificationPulse 2s infinite;
}

@keyframes notificationPulse {
    0%, 100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-50%) scale(1.2);
    }
}

.notification-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}

.notification-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.notification-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-circle);
    font-size: 10px;
    margin-top: 2px;
}

.notification-icon.message { background: rgba(42, 171, 238, 0.2); color: var(--primary-color); }
.notification-icon.friend { background: rgba(52, 199, 89, 0.2); color: var(--success-color); }

.notification-icon.system { background: rgba(142, 142, 147, 0.2); color: var(--text-muted); }
.notification-icon.warning { background: rgba(255, 59, 48, 0.2); color: var(--danger-color); }

.notification-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.2s ease;
}

.notification-item:hover .notification-actions {
    opacity: 1;
    transform: translateX(0);
}

.notification-delete-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
}

.notification-delete-btn:hover {
    background: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
    transform: scale(1.1) rotate(90deg);
}

.notification-message {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
}

.notification-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.notification-time::before {
    content: "🕒";
    font-size: 10px;
    opacity: 0.7;
}

.notification-mark-read-btn {
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--info-color));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.notification-mark-read-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--info-color));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(42, 171, 238, 0.3);
}

.notification-item.removing {
    animation: notificationSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes notificationSlideOut {
    0% {
        opacity: 1;
        transform: translateX(0);
        max-height: 150px;
    }
    100% {
        opacity: 0;
        transform: translateX(-100%);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom-width: 0;
    }
}

.skeleton-notification {
    height: 100px;
    width: 100%;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.skeleton-notification::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.notification-date-group {
    margin-bottom: 16px;
}

.notification-date-header {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    z-index: 5;
}

.notifications-actions-bar {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(20px);
}

.notifications-actions-bar .btn-secondary,
.notifications-actions-bar .btn-danger {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 768px) {
    .notification-item {
        padding: 14px 16px;
        gap: 6px;
    }
    
    .notification-title {
        font-size: 14px;
    }
    
    .notification-message {
        font-size: 13px;
        -webkit-line-clamp: 3;
    }
    
    .notification-actions {
        opacity: 1;
        transform: none;
    }
    
    .notifications-actions-bar {
        flex-direction: column;
        gap: 8px;
    }
    
    .notifications-actions-bar .btn-secondary,
    .notifications-actions-bar .btn-danger {
        width: 100%;
    }
}

@media (prefers-color-scheme: dark) {
    .notification-item.unread {
        background: linear-gradient(90deg, rgba(42, 171, 238, 0.15) 0%, rgba(42, 171, 238, 0.05) 100%);
    }
    
    .notification-item.unread:hover {
        background: linear-gradient(90deg, rgba(42, 171, 238, 0.2) 0%, rgba(42, 171, 238, 0.08) 100%);
    }
    
    .skeleton-notification {
        background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a) 75%;
    }
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.notification-item.new-notification {
    animation: notificationSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.notifications-list::-webkit-scrollbar {
    width: 6px;
}

.notifications-list::-webkit-scrollbar-track {
    background: transparent;
}

.notifications-list::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

.notifications-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}


.priority-low {
    background: rgba(52, 199, 89, 0.15);
    color: var(--success-color);
    border: 1px solid rgba(52, 199, 89, 0.3);
}

.priority-medium {
    background: rgba(255, 149, 0, 0.15);
    color: var(--warning-color);
    border: 1px solid rgba(255, 149, 0, 0.3);
}

.priority-high {
    background: rgba(255, 59, 48, 0.15);
    color: var(--danger-color);
    border: 1px solid rgba(255, 59, 48, 0.3);
}

.priority-urgent {
    background: rgba(255, 59, 48, 0.25);
    color: var(--danger-color);
    border: 1px solid rgba(255, 59, 48, 0.4);
    animation: urgentPulse 2s infinite;
}

.status-pending {
    background: rgba(255, 149, 0, 0.15);
    color: var(--warning-color);
    border: 1px solid rgba(255, 149, 0, 0.3);
}

.status-in_progress {
    background: rgba(42, 171, 238, 0.15);
    color: var(--primary-color);
    border: 1px solid rgba(42, 171, 238, 0.3);
}

.status-completed {
    background: rgba(52, 199, 89, 0.15);
    color: var(--success-color);
    border: 1px solid rgba(52, 199, 89, 0.3);
}

.status-cancelled {
    background: rgba(142, 142, 147, 0.15);
    color: var(--text-muted);
    border: 1px solid rgba(142, 142, 147, 0.3);
}


.comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
}

.comment-item {
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    transition: all var(--transition-fast);
}

.comment-item:hover {
    background: var(--bg-hover);
    transform: translateX(2px);
}

.comment-item.regular {
    border-left: 4px solid var(--primary-color);
}

.comment-item.system {
    border-left: 4px solid var(--info-color);
    background: rgba(90, 200, 250, 0.05);
}

.comment-item.warning {
    border-left: 4px solid var(--warning-color);
    background: rgba(255, 149, 0, 0.05);
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    border: 2px solid var(--primary-color);
}

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

.comment-author {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.comment-time {
    font-size: 12px;
    color: var(--text-muted);
}

.comment-content {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    word-break: break-word;
}

.add-comment-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.add-comment-form textarea {
    min-height: 80px;
    max-height: 200px;
    resize: vertical;
    font-size: 14px;
    line-height: 1.5;
}

.add-comment-form button {
    align-self: flex-end;
}



.attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.attachment-thumbnail {
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-tertiary);
}

.attachment-thumbnail:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.attachment-thumbnail img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    background: var(--bg-secondary);
}

.attachment-thumbnail > div:not(img) {
    padding: 8px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--bg-tertiary);
}


#attachments-modal .modal-content {
    max-width: 800px;
    max-height: 80vh;
}


@media (max-width: 768px) {


    .attachments-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
    
    
}

@media (max-width: 480px) {


    .attachments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .comments-list {
        max-height: 300px;
    }
    
    
}


@keyframes urgentPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 59, 48, 0);
    }
}


.add-comment-form .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    white-space: nowrap;
    width: auto;
    align-self: flex-end;
    margin-top: 12px;
}

.add-comment-form .btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(42, 171, 238, 0.3);
}

.add-comment-form .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(42, 171, 238, 0.2);
}

.add-comment-form .btn-primary:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.add-comment-form .btn-primary i {
    font-size: 14px;
}


.btn-attachments-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-attachments-count:hover {
    background: var(--primary-hover);
    transform: scale(1.1);
}


@keyframes buttonClick {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.btn-primary:active,
.btn-success:active,
.btn-danger:active,
.btn-secondary:active {
    animation: buttonClick 0.2s ease;
}

.btn-primary i,
.btn-success i,
.btn-danger i,
.btn-secondary i {
    font-size: 14px;
}

@media (max-width: 768px) {
    .add-comment-form .btn-primary {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }


}

@media (max-width: 480px) {


    .btn-attachments-count {
        min-width: 20px;
        height: 20px;
        font-size: 10px;
    }
    
    
}

.btn-primary.loading,
.btn-success.loading,
.btn-danger.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn-primary.loading::after,
.btn-success.loading::after,
.btn-danger.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: buttonSpin 0.8s linear infinite;
}

@keyframes buttonSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.button-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.button-group .btn-primary,
.button-group .btn-success,
.button-group .btn-danger,
.button-group .btn-secondary {
    flex: 1;
    min-width: 0;
}

.btn-primary i.fa-plus,
.btn-success i.fa-check,
.btn-danger i.fa-times,
.btn-secondary i.fa-paperclip {
    font-size: 12px;
}


@media (max-width: 768px) {


}

@media (max-width: 480px) {
    
    
    
}

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


.fullscreen-modal {
    padding: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    align-items: flex-start;
    justify-content: flex-start;
}

.fullscreen-modal .modal-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
}

@media (max-width: 768px) {
    .modal {
        padding: 10px;
        align-items: flex-end;
    }
}

@media (max-width: 480px) {
    .modal {
        padding: 0;
        align-items: flex-end;
    }
}

.chat-item-last-message {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    hyphens: auto;
    white-space: normal;
}

.chat-item-last-message.has-long-content {
    font-size: 13px;
}

.chat-item-last-message.with-emoji {
    line-height: 1.6;
}

.chat-item-last-message:has(📎) {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-item-last-message:has(📎)::before {
    content: "📎";
    font-size: 12px;
    flex-shrink: 0;
}

.chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    min-height: 72px;
}

.chat-item-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.chat-item-name {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
    display: flex;
    gap: 6px;
    min-width: 0;
    flex-wrap: nowrap;
}

.chat-item-name .chat-item-title {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-item-last-message {
    font-family: var(--font-primary), "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.chat-item-last-message .chat-list-asset-emoji {
    width: 26px;
    height: 26px;
    margin: 0 2px 0 0;
    vertical-align: middle;
    transform: translateY(-2px);
}

.chat-item-last-message:has(.chat-list-asset-emoji) {
    min-height: 28px;
    max-height: 28px;
    line-height: 28px;
}

@media (max-width: 768px) {
    .chat-item-last-message {
        font-size: 13px;
        -webkit-line-clamp: 2;
        max-height: 2.6em;
    }
    
    .chat-item {
        padding: 10px 16px;
        min-height: 68px;
    }
}

.chat-item-last-message.very-long {
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 12px;
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 2px;
}

.chat-item-last-message.has-draft {
    color: var(--text-primary);
    font-weight: 650;
}

.chat-draft-label {
    color: var(--primary-color);
    font-weight: 800;
}

.chat-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 8px;
}

.chat-item-time {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.chat-item-unread {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary-color);
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.scroll-to-bottom-btn {
    position: absolute;
    right: 20px;
    bottom: 70px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-circle);
    background: var(--primary-color);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    z-index: 90;
}

.scroll-to-bottom-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary);
    border-radius: 999px;
    background: var(--danger-color);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    font-variant-numeric: tabular-nums;
}

.scroll-to-bottom-badge[hidden] {
    display: none;
}

.scroll-to-bottom-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-to-bottom-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.older-messages-control {
    display: flex;
    justify-content: center;
    padding: 10px 0 12px;
}

.older-messages-trigger {
    min-height: 30px;
    max-width: min(360px, calc(100% - 28px));
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 62%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 76%, transparent);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.older-messages-trigger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary-color) 12%, var(--bg-secondary));
    border-color: color-mix(in srgb, var(--primary-color) 38%, transparent);
    color: var(--text-primary);
}

.older-messages-trigger:disabled {
    cursor: wait;
    opacity: .78;
}

.older-messages-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#chat-members-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

#chat-members-modal[style*="display: block"] {
    display: flex;
}

#chat-members-modal .modal-content {
    background: #ffffff;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    animation: slideUp 0.25s ease;
}

#chat-members-modal .modal-header {
    background: #239508;
    color: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

#chat-members-modal .modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    flex: 1;
    text-align: center;
    letter-spacing: 0.3px;
}

#chat-members-modal .modal-header .close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

#chat-members-modal .modal-header .close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#chat-members-modal .modal-body {
    padding: 0;
    flex: 1;
    overflow-y: auto;
    background: #f5f5f5;
}

#chat-members-modal .members-list {
    background: white;
}

#chat-members-modal .member-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e6e6e6;
    transition: background-color 0.2s;
    min-height: 60px;
}

#chat-members-modal .member-item:last-child {
    border-bottom: none;
}

#chat-members-modal .member-item:hover {
    background-color: #f8f8f8;
}

#chat-members-modal .member-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    border: 1px solid #e0e0e0;
}

#chat-members-modal .member-info {
    flex: 1;
    min-width: 0;
}

#chat-members-modal .member-name {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chat-members-modal .member-status {
    font-size: 13px;
    display: flex;
    align-items: center;
}

#chat-members-modal .member-status.online {
    color: #4caf50;
}

#chat-members-modal .member-status.online::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #4caf50;
    border-radius: 50%;
    margin-right: 6px;
    animation: pulse 2s infinite;
}

#chat-members-modal .member-status.offline {
    color: #999;
}

#chat-members-modal .member-status.offline::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #999;
    border-radius: 50%;
    margin-right: 6px;
}

#chat-members-modal .member-role {
    font-size: 13px;
    color: #666;
    text-align: right;
    margin-left: 12px;
    white-space: nowrap;
    padding: 4px 8px;
    background: #f0f0f0;
    border-radius: 12px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chat-members-modal .btn-danger {
    background: #ff3b30;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    margin-left: 10px;
    transition: background-color 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 6px;
}

#chat-members-modal .btn-danger:hover {
    background: #ff1c1c;
    transform: translateY(-1px);
}

#chat-members-modal .btn-danger:active {
    transform: translateY(0);
}

#chat-members-modal .btn-danger i {
    font-size: 12px;
}

#chat-members-modal .modal-body::-webkit-scrollbar {
    width: 6px;
}

#chat-members-modal .modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#chat-members-modal .modal-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

#chat-members-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

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

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

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@media (max-width: 768px) {
    #chat-members-modal .modal-content {
        width: 95%;
        max-height: 85vh;
        margin-top: auto;
        margin-bottom: 0;
        animation: slideUpMobile 0.3s ease;
    }
    
    #chat-members-modal {
        align-items: flex-end;
    }
    
    #chat-members-modal .modal-header {
        padding: 18px 20px;
    }
    
    #chat-members-modal .member-item {
        padding: 14px 16px;
    }
    
    @keyframes slideUpMobile {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #chat-members-modal .modal-content {
        max-width: 450px;
    }
}

#chat-members-modal .members-list:empty::before {
    content: "Нет участников";
    display: block;
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 15px;
}

#chat-members-modal .members-list.loading .member-item {
    opacity: 0.6;
}

@media (prefers-color-scheme: dark) {
    #chat-members-modal .modal-content {
        background: #1e1e1e;
        color: #ffffff;
    }
    
    #chat-members-modal .modal-body {
        background: #121212;
    }
    
    #chat-members-modal .members-list {
        background: #1e1e1e;
    }
    
    #chat-members-modal .member-item {
        border-bottom-color: #2a2a2a;
    }
    
    #chat-members-modal .member-item:hover {
        background-color: #2a2a2a;
    }
    
    #chat-members-modal .member-name {
        color: #ffffff;
    }
    
    #chat-members-modal .member-role {
        background: #2a2a2a;
        color: #cccccc;
    }
    
    #chat-members-modal .modal-body::-webkit-scrollbar-track {
        background: #2a2a2a;
    }
    
    #chat-members-modal .modal-body::-webkit-scrollbar-thumb {
        background: #444444;
    }
}
/* Добавьте в style2.css или style4.css */

/* Индикатор свайпа для мобильной версии */
.chat-item-swipe-indicator {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    background: linear-gradient(135deg, #ff3b30, #ff6b6b);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0 12px 12px 0;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 5;
    gap: 4px;
}

.chat-item-swipe-indicator i {
    font-size: 16px;
}

.chat-item.swiping .chat-item-swipe-indicator {
    transform: translateX(0);
    pointer-events: auto;
}

/* Крестик для выхода на ПК */
.chat-item-leave-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.1);
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
}

@media (min-width: 1025px) {
    .chat-item:hover .chat-item-leave-btn {
        opacity: 1;
        pointer-events: auto;
    }
    
    .chat-item-leave-btn:hover {
        background: var(--danger-color);
        color: white;
        transform: translateY(-50%) scale(1.1);
    }
}

.chat-item-leave-btn i {
    font-size: 14px;
}

/* Для групповых чатов другой цвет */
.chat-item.is-group .chat-item-leave-btn {
    background: rgba(255, 149, 0, 0.1);
    color: var(--warning-color);
}

.chat-item.is-group .chat-item-leave-btn:hover {
    background: var(--warning-color);
    color: white;
}

/* Анимация удаления */
.chat-item.removing {
    animation: slideOut 0.3s ease forwards;
}

@keyframes slideOut {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-100%);
    }
}

/* Модальное окно подтверждения выхода */
.leave-chat-confirm-modal .modal-content {
    max-width: 400px;
}

.leave-chat-confirm-modal .modal-body {
    text-align: center;
    padding: 32px;
}

.leave-chat-confirm-modal .warning-icon {
    font-size: 48px;
    color: var(--danger-color);
    margin-bottom: 16px;
}

.leave-chat-confirm-modal h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.leave-chat-confirm-modal p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.6;
}

.leave-chat-confirm-modal .chat-info {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.leave-chat-confirm-modal .chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.leave-chat-confirm-modal .chat-details {
    flex: 1;
    text-align: left;
}

.leave-chat-confirm-modal .chat-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.leave-chat-confirm-modal .chat-type {
    font-size: 12px;
    color: var(--text-muted);
}

.leave-chat-confirm-modal .modal-footer {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 24px;
    border-top: 1px solid var(--border-color);
}

.leave-chat-confirm-modal .btn-cancel {
    min-width: 120px;
}

.leave-chat-confirm-modal .btn-danger {
    min-width: 120px;
}
/* ===== СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА СОЗДАНИЯ ЧАТА =====
   Важно: модалка больше не использует prefers-color-scheme.
   Все цвета берутся из глобальных переменных приложения, поэтому корректно
   меняются при html.theme-light / html.theme-dark и при системной теме. */

#create-chat-modal {
    --create-chat-modal-bg: var(--modal-bg, var(--bg-secondary));
    --create-chat-modal-surface: var(--bg-secondary);
    --create-chat-modal-field-bg: var(--bg-tertiary);
    --create-chat-modal-hover-bg: var(--bg-hover);
    --create-chat-modal-text: var(--text-primary);
    --create-chat-modal-secondary-text: var(--text-secondary);
    --create-chat-modal-muted-text: var(--text-muted);
    --create-chat-modal-border: var(--border-color);
    --create-chat-modal-border-soft: var(--border-light);
    --create-chat-modal-accent: var(--primary-color);
    --create-chat-modal-danger: var(--danger-color);

    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#create-chat-modal[style*="display: block"],
#create-chat-modal[style*="display: flex"] {
    display: flex !important;
}

#create-chat-modal .modal-content {
    width: min(500px, calc(100vw - 32px));
    max-height: min(90vh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--create-chat-modal-bg);
    color: var(--create-chat-modal-text);
    border: 1px solid var(--create-chat-modal-border);
    border-radius: var(--radius-xl, 24px);
    box-shadow: var(--shadow-lg, 0 18px 60px rgba(0, 0, 0, 0.28));
    animation: modalSlideIn 0.22s ease;
}

#create-chat-modal .modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 24px;
    background: var(--create-chat-modal-surface);
    border-bottom: 1px solid var(--create-chat-modal-border);
}

#create-chat-modal .modal-header h3 {
    margin: 0;
    color: var(--create-chat-modal-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

#create-chat-modal .modal-header .close {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-circle, 50%);
    background: var(--create-chat-modal-field-bg);
    color: var(--create-chat-modal-secondary-text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition:
        background var(--transition-fast, 150ms ease),
        color var(--transition-fast, 150ms ease),
        transform var(--transition-fast, 150ms ease);
}

#create-chat-modal .modal-header .close:hover {
    background: var(--create-chat-modal-danger);
    color: #fff;
    transform: rotate(90deg);
}

#create-chat-modal .modal-body {
    flex: 1 1 auto;
    padding: 24px;
    overflow-y: auto;
    background: var(--create-chat-modal-bg);
}

#create-chat-modal .form-group {
    margin-bottom: 20px;
}

#create-chat-modal .form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--create-chat-modal-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

#create-chat-modal .form-group label span:not([style*="red"]),
#create-chat-modal .form-hint,
#create-chat-modal .form-hint i {
    color: var(--create-chat-modal-muted-text) !important;
}

#create-chat-modal .form-control,
#create-chat-modal input.form-control,
#create-chat-modal textarea.form-control,
#create-chat-modal select.form-control {
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    box-sizing: border-box;
    border: 1px solid var(--create-chat-modal-border-soft);
    border-radius: var(--radius-lg, 16px);
    background: var(--create-chat-modal-field-bg);
    color: var(--create-chat-modal-text);
    caret-color: var(--create-chat-modal-accent);
    font: 500 15px/1.4 var(--font-primary, inherit);
    outline: none;
    transition:
        border-color var(--transition-fast, 150ms ease),
        background var(--transition-fast, 150ms ease),
        box-shadow var(--transition-fast, 150ms ease);
}

#create-chat-modal textarea.form-control {
    min-height: 92px;
    resize: vertical;
}

#create-chat-modal .form-control:hover {
    border-color: var(--create-chat-modal-border);
}

#create-chat-modal .form-control:focus {
    border-color: var(--create-chat-modal-accent);
    box-shadow: 0 0 0 3px rgba(35, 149, 8, 0.16);
}

#create-chat-modal .form-control::placeholder {
    color: var(--create-chat-modal-muted-text);
    opacity: 0.75;
}

#create-chat-modal select[multiple].form-control {
    height: 200px;
    min-height: 200px;
    padding: 8px;
    overflow-y: auto;
    background: var(--create-chat-modal-field-bg);
}

#create-chat-modal select[multiple].form-control option {
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: var(--radius-sm, 8px);
    background: var(--create-chat-modal-field-bg);
    color: var(--create-chat-modal-text);
    font-size: 14px;
    cursor: pointer;
}

#create-chat-modal select[multiple].form-control option:hover {
    background: var(--create-chat-modal-hover-bg);
    color: var(--create-chat-modal-text);
}

#create-chat-modal select[multiple].form-control option:checked {
    background: var(--create-chat-modal-accent) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 999px var(--create-chat-modal-accent);
}

#create-chat-modal select[multiple].form-control option[style*="--success-color"] {
    color: var(--success-color) !important;
}

#create-chat-modal select[multiple].form-control option[style*="--success-color"]:checked {
    color: #fff !important;
}

#create-chat-modal .form-hint {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
}

#create-chat-modal .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--create-chat-modal-border);
}

#create-chat-modal .btn-cancel,
#create-chat-modal .btn-primary {
    min-width: 112px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-lg, 16px);
    font: 700 15px/1.2 var(--font-primary, inherit);
    cursor: pointer;
    transition:
        background var(--transition-fast, 150ms ease),
        color var(--transition-fast, 150ms ease),
        border-color var(--transition-fast, 150ms ease),
        transform var(--transition-fast, 150ms ease),
        box-shadow var(--transition-fast, 150ms ease),
        opacity var(--transition-fast, 150ms ease);
}

#create-chat-modal .btn-primary {
    border: 1px solid var(--create-chat-modal-accent);
    background: var(--create-chat-modal-accent);
    color: #fff;
}

#create-chat-modal .btn-primary:hover:not(:disabled) {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 8px 20px rgba(0, 0, 0, 0.18));
}

#create-chat-modal .btn-cancel {
    border: 1px solid var(--create-chat-modal-border);
    background: var(--create-chat-modal-field-bg);
    color: var(--create-chat-modal-secondary-text);
}

#create-chat-modal .btn-cancel:hover:not(:disabled) {
    background: var(--create-chat-modal-hover-bg);
    color: var(--create-chat-modal-text);
    border-color: var(--create-chat-modal-border);
    transform: translateY(-1px);
}

#create-chat-modal input:-webkit-autofill,
#create-chat-modal textarea:-webkit-autofill,
#create-chat-modal select:-webkit-autofill {
    -webkit-text-fill-color: var(--create-chat-modal-text);
    box-shadow: 0 0 0 1000px var(--create-chat-modal-field-bg) inset;
    transition: background-color 9999s ease-out 0s;
}

@media (max-width: 768px) {
    #create-chat-modal {
        padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
        align-items: center;
        justify-content: center;
    }

    #create-chat-modal .modal-content {
        width: min(500px, calc(100vw - 24px));
        max-width: 100%;
        max-height: min(92dvh, calc(100dvh - 24px));
        border-radius: var(--radius-xl, 24px);
    }

    #create-chat-modal .modal-header {
        padding: 16px 20px;
    }

    #create-chat-modal .modal-body {
        padding: 20px;
    }

    #create-chat-modal .form-actions {
        padding-top: 16px;
        flex-direction: column-reverse;
    }

    #create-chat-modal .btn-cancel,
    #create-chat-modal .btn-primary {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    #create-chat-modal {
        padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px));
        align-items: center;
        justify-content: center;
    }

    #create-chat-modal .form-control,
    #create-chat-modal input.form-control,
    #create-chat-modal textarea.form-control,
    #create-chat-modal select.form-control {
        padding: 10px 14px;
        font-size: 14px;
    }
}

.skeleton-game {
    height: 320px;
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
    border-radius: var(--radius-xl);
}

/* Unified app modal layer */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(12px);
}

.modal[style*="display: block"] {
    display: flex !important;
}

.modal-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: min(500px, calc(100vw - 32px));
    max-height: min(90vh, 760px);
    overflow: hidden;
}

.modal-header,
.modal-body,
.modal-footer {
    background: var(--bg-secondary);
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 20px;
    line-height: 1.25;
}

.modal-body {
    padding: 24px;
    max-height: calc(min(90vh, 760px) - 140px);
    overflow-y: auto;
}

.modal-footer {
    padding: 18px 24px;
    border-top: 1px solid var(--border-color);
    gap: 12px;
}

.modal-header .close,
.modal-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--radius-circle);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.modal-header .close:hover,
.modal-close:hover {
    background: var(--danger-color);
    color: #fff;
    transform: rotate(90deg);
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-cancel {
    min-height: 42px;
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-success:focus-visible,
.btn-danger:focus-visible,
.btn-cancel:focus-visible,
.modal-header .close:focus-visible,
.modal-close:focus-visible {
    outline: 2px solid rgba(35, 149, 8, 0.75);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 16px);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}


.attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 16px;
    padding: 0;
}

.attachment-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

.attachment-item:hover {
    border-color: var(--primary-color);
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.attachment-item:hover .attachment-overlay {
    opacity: 1;
}

.attachment-image,
.attachment-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.attachment-image {
    object-fit: cover;
}

.attachment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    color: var(--primary-color);
    font-size: 24px;
}

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

.attachment-name {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-meta {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

.attachment-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 24px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.attachments-grid .image-attachment {
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
}

.attachments-grid .image-attachment .attachment-image {
    width: 100%;
    height: 120px;
}

.attachments-grid .image-attachment .attachment-info {
    margin-top: 8px;
}

.attachments-grid .image-attachment .attachment-overlay {
    border-radius: var(--radius-sm);
}

@media (max-width: 1024px) {
    
}

@media (max-width: 768px) {


    .attachments-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .attachment-item {
        padding: 10px;
    }

    .attachments-grid .image-attachment {
        flex-direction: row;
        align-items: center;
    }

    .attachments-grid .image-attachment .attachment-image {
        width: 60px;
        height: 60px;
    }
}

/* Unified profile layer */
.profile-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
}

.profile-container .profile-header {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 28px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
}

.profile-container .profile-avatar-large {
    position: relative;
    width: 112px;
    height: 112px;
    flex: 0 0 auto;
}

.profile-container .profile-avatar-large img,
#user-profile-modal .profile-avatar-large img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-circle);
    object-fit: cover;
    border: 3px solid var(--primary-color);
    box-shadow: var(--shadow-md);
}

.profile-container .profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.profile-container .stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
}

.profile-container .stat-value,
#user-profile-modal .profile-stat .stat-value {
    color: var(--primary-color);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.profile-container .stat-label,
#user-profile-modal .profile-stat .stat-label {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.2;
}

.profile-logout-section {
    display: none;
}

.profile-logout-btn {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--danger-color) 34%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
    color: var(--danger-color);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.profile-logout-btn:hover {
    background: color-mix(in srgb, var(--danger-color) 16%, transparent);
    border-color: color-mix(in srgb, var(--danger-color) 48%, transparent);
    transform: translateY(-1px);
}

#user-profile-modal .modal-content {
    width: min(480px, calc(100vw - 32px));
}

#user-profile-modal .modal-body {
    padding: 0;
}

#user-profile-modal .profile-cover {
    padding: 36px 20px 52px;
    text-align: center;
}

#user-profile-modal .profile-avatar-large {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto;
}

#user-profile-modal .profile-status-badge {
    position: absolute;
    right: -10px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    font-size: 11px;
    font-weight: 600;
}

#user-profile-modal .profile-info-section {
    padding: 20px 24px 24px;
    background: var(--bg-secondary);
}

#user-profile-modal .profile-name,
#user-profile-modal .profile-username {
    text-align: center;
}

#user-profile-modal .profile-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    margin: 18px 0;
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
}

#user-profile-modal .profile-stat {
    text-align: center;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.role-badge i,
.role-badge img {
    font-size: 10px;
}



.admin-verified-badge {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    object-fit: contain;
    vertical-align: middle;
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 2px rgb(15 23 42 / 22%));
}

.role-badge .admin-verified-badge,
.role-option-admin-icon.admin-verified-badge,
.message-role-badge.admin-verified-badge,
.member-role-badge.admin-verified-badge,
.chat-role-badge.admin-verified-badge,
.chat-header-role-badge .admin-verified-badge,
.mention-role-badge.admin-verified-badge {
    width: 20px;
    height: 20px;
    margin: 0 0 0 5px;
}

.role-badge .admin-verified-badge,
.role-option-admin-icon.admin-verified-badge {
    margin-left: 0;
}


.role-badge.admin {
    background: linear-gradient(135deg, #34c759, rgba(35, 149, 8, 0.55));
    color: #fff;
}


.role-badge.user {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .profile-container .profile-header {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .profile-container {
        padding: 16px;
    }

    .profile-container .profile-avatar-large,
    #user-profile-modal .profile-avatar-large {
        width: 86px;
        height: 86px;
    }
}

/* Premium chat surface refinement */
.chat-area-full {
    background: #0b0d0c;
}

.chat-messages-container {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 16px),
        var(--bg-primary);
}

.chat-messages {
    scrollbar-gutter: stable;
}

.message {
    align-items: flex-end;
}

.message.grouped {
    margin-top: -2px;
}

.message-content {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}

.message-sender {
    padding: 0 4px;
    font-size: 12px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.54);
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    font-size: 14.5px;
    line-height: 1.42;
    letter-spacing: 0;
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-time {
    line-height: 1;
    white-space: nowrap;
}

.message-reactions {
    bottom: -12px;
    gap: 4px;
}

.reaction-badge {
    min-height: 21px;
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(26, 26, 26, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.message.own .reaction-badge {
    background: rgba(255, 255, 255, 0.9);
    color: #202124;
}

.chat-date-divider {
    position: sticky;
    top: 8px;
    z-index: 45;
    margin: 12px 0 8px;
    gap: 10px;
    justify-content: center;
    pointer-events: none;
}

.chat-date-divider::before,
.chat-date-divider::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
}

.chat-date-divider span,
.chat-unread-divider span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(22, 24, 23, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.chat-unread-divider span {
    color: var(--success-color);
    background: rgba(35, 149, 8, 0.16);
    border-color: rgba(52, 199, 89, 0.24);
}

.chat-input-container {
    padding: 10px 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    background: rgba(16, 17, 17, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.chat-input {
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.chat-input:focus-within {
    border-color: rgba(52, 199, 89, 0.48);
    box-shadow: 0 0 0 3px rgba(35, 149, 8, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.input-actions {
    align-self: flex-end;
    padding-top: 0;
    gap: 6px;
}

.input-action-btn,
.send-button {
    flex: 0 0 auto;
}

.input-action-btn {
    width: 34px;
    height: 34px;
}

.message-input {
    min-width: 0;
    min-height: 34px;
    padding: 6px 2px;
}

.rich-message-input {
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-y: auto;
    cursor: text;
}

.rich-message-input:empty::before {
    content: attr(data-placeholder);
    color: var(--chat-input-placeholder, var(--text-muted));
    pointer-events: none;
}

.composer-input-emoji {
    width: 28px;
    height: 28px;
    margin: 0;
    vertical-align: -0.45em;
    pointer-events: none;
    user-select: none;
}

.send-button {
    width: 38px;
    height: 38px;
    box-shadow: 0 8px 18px rgba(35, 149, 8, 0.22);
}

@media (max-width: 768px) {
    .message-avatar {
        width: 31px;
        height: 31px;
    }

    .message.grouped.other {
        padding-left: 0;
    }

    .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
        font-size: 14px;
        line-height: 1.4;
    }

    .chat-input-container {
        padding: 8px 10px 10px;
    }

    .chat-input {
        border-radius: 18px;
        padding: 6px;
    }

    .input-action-btn {
        width: 32px;
        height: 32px;
    }

    .send-button {
        width: 36px;
        height: 36px;
    }
}

/* Theme-aware chat refinement */
:root {
    --chat-surface-bg: #0b0d0c;
    --chat-surface-base: var(--bg-primary);
    --chat-surface-glow: rgba(255, 255, 255, 0.025);
    --chat-texture-line: rgba(255, 255, 255, 0.018);
    --chat-sender-color: rgba(255, 255, 255, 0.58);
    --chat-incoming-bubble: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.06));
    --chat-outgoing-bubble: linear-gradient(180deg, rgba(42, 156, 24, 0.96), rgba(26, 77, 15, 0.98));
    --chat-incoming-text: var(--text-primary);
    --chat-outgoing-text: #fff;
    --chat-time-color: var(--text-muted);
    --chat-outgoing-time-color: rgba(255, 255, 255, 0.76);
    --chat-divider-bg: rgba(22, 24, 23, 0.72);
    --chat-divider-color: rgba(255, 255, 255, 0.72);
    --chat-divider-border: rgba(255, 255, 255, 0.08);
    --chat-input-container-bg: rgba(16, 17, 17, 0.92);
    --chat-input-bg: rgba(255, 255, 255, 0.055);
    --chat-input-border: rgba(255, 255, 255, 0.09);
    --chat-input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    --chat-input-text: var(--text-primary);
    --chat-input-placeholder: var(--text-muted);
    --chat-divider-line: rgba(255, 255, 255, 0.09);
    --chat-reaction-bg: rgba(26, 26, 26, 0.92);
    --chat-reaction-border: rgba(255, 255, 255, 0.12);
    --chat-own-reaction-bg: rgba(255, 255, 255, 0.9);
    --chat-own-reaction-text: #202124;
}

@media (prefers-color-scheme: light) {
    :root {
        --chat-surface-bg: #f5f7f4;
        --chat-surface-base: #eef3ed;
        --chat-surface-glow: rgba(255, 255, 255, 0.62);
        --chat-texture-line: rgba(35, 149, 8, 0.045);
        --chat-sender-color: rgba(38, 86, 52, 0.78);
        --chat-incoming-bubble: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78));
        --chat-outgoing-bubble: linear-gradient(180deg, rgba(68, 184, 47, 0.94), rgba(35, 149, 8, 0.9));
        --chat-incoming-text: #1e2721;
        --chat-outgoing-text: #fff;
        --chat-time-color: rgba(30, 39, 33, 0.52);
        --chat-outgoing-time-color: rgba(255, 255, 255, 0.82);
        --chat-divider-bg: rgba(255, 255, 255, 0.76);
        --chat-divider-color: rgba(42, 68, 49, 0.68);
        --chat-divider-border: rgba(35, 149, 8, 0.10);
        --chat-input-container-bg: rgba(245, 247, 244, 0.92);
        --chat-input-bg: rgba(255, 255, 255, 0.88);
        --chat-input-border: rgba(30, 39, 33, 0.10);
        --chat-input-shadow: 0 8px 22px rgba(35, 59, 39, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
        --chat-input-text: #1e2721;
        --chat-input-placeholder: rgba(30, 39, 33, 0.48);
        --chat-divider-line: rgba(30, 39, 33, 0.10);
        --chat-reaction-bg: rgba(255, 255, 255, 0.9);
        --chat-reaction-border: rgba(30, 39, 33, 0.10);
        --chat-own-reaction-bg: rgba(255, 255, 255, 0.92);
        --chat-own-reaction-text: #1e2721;
    }
}

html.theme-light {
    --chat-surface-bg: #f5f7f4;
    --chat-surface-base: #eef3ed;
    --chat-surface-glow: rgba(255, 255, 255, 0.62);
    --chat-texture-line: rgba(35, 149, 8, 0.045);
    --chat-sender-color: rgba(38, 86, 52, 0.78);
    --chat-incoming-bubble: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78));
    --chat-outgoing-bubble: linear-gradient(180deg, rgba(68, 184, 47, 0.94), rgba(35, 149, 8, 0.9));
    --chat-incoming-text: #1e2721;
    --chat-outgoing-text: #fff;
    --chat-time-color: rgba(30, 39, 33, 0.52);
    --chat-outgoing-time-color: rgba(255, 255, 255, 0.82);
    --chat-divider-bg: rgba(255, 255, 255, 0.76);
    --chat-divider-color: rgba(42, 68, 49, 0.68);
    --chat-divider-border: rgba(35, 149, 8, 0.10);
    --chat-input-container-bg: rgba(245, 247, 244, 0.92);
    --chat-input-bg: rgba(255, 255, 255, 0.88);
    --chat-input-border: rgba(30, 39, 33, 0.10);
    --chat-input-shadow: 0 8px 22px rgba(35, 59, 39, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    --chat-input-text: #1e2721;
    --chat-input-placeholder: rgba(30, 39, 33, 0.48);
    --chat-divider-line: rgba(30, 39, 33, 0.10);
    --chat-reaction-bg: rgba(255, 255, 255, 0.9);
    --chat-reaction-border: rgba(30, 39, 33, 0.10);
    --chat-own-reaction-bg: rgba(255, 255, 255, 0.92);
    --chat-own-reaction-text: #1e2721;
}

html.theme-dark {
    --chat-surface-bg: #0b0d0c;
    --chat-surface-base: var(--bg-primary);
    --chat-surface-glow: rgba(255, 255, 255, 0.025);
    --chat-texture-line: rgba(255, 255, 255, 0.018);
    --chat-sender-color: rgba(255, 255, 255, 0.58);
    --chat-incoming-bubble: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.06));
    --chat-outgoing-bubble: linear-gradient(180deg, rgba(42, 156, 24, 0.96), rgba(26, 77, 15, 0.98));
    --chat-incoming-text: var(--text-primary);
    --chat-outgoing-text: #fff;
    --chat-time-color: var(--text-muted);
    --chat-outgoing-time-color: rgba(255, 255, 255, 0.76);
    --chat-divider-bg: rgba(22, 24, 23, 0.72);
    --chat-divider-color: rgba(255, 255, 255, 0.72);
    --chat-divider-border: rgba(255, 255, 255, 0.08);
    --chat-input-container-bg: rgba(16, 17, 17, 0.92);
    --chat-input-bg: rgba(255, 255, 255, 0.055);
    --chat-input-border: rgba(255, 255, 255, 0.09);
    --chat-input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    --chat-input-text: var(--text-primary);
    --chat-input-placeholder: var(--text-muted);
    --chat-divider-line: rgba(255, 255, 255, 0.09);
    --chat-reaction-bg: rgba(26, 26, 26, 0.92);
    --chat-reaction-border: rgba(255, 255, 255, 0.12);
    --chat-own-reaction-bg: rgba(255, 255, 255, 0.9);
    --chat-own-reaction-text: #202124;
}

.chat-area-full {
    background: var(--chat-surface-bg);
}

.message-sender {
    color: var(--chat-sender-color);
    text-shadow: none;
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    background: var(--chat-incoming-bubble);
    color: var(--chat-incoming-text);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.message.own .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    background: var(--chat-outgoing-bubble);
    color: var(--chat-outgoing-text);
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-time {
    color: var(--chat-time-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.message.own .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-time {
    color: var(--chat-outgoing-time-color);
}

.message-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 16px;
    min-width: 16px;
    height: 12px;
    margin-left: 2px;
    font-size: 10px;
    line-height: 1;
    opacity: 0.78;
    cursor: pointer;
    transition: color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.message-status:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.message-status:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-color) 72%, transparent);
    outline-offset: 2px;
    border-radius: 6px;
}

.message-status.sent {
    opacity: 0.64;
    color: color-mix(in srgb, currentColor 72%, transparent);
}

.message-status.delivered {
    opacity: 0.86;
    color: color-mix(in srgb, currentColor 58%, transparent);
}

.message-status.delivered i {
    filter: saturate(0.35);
}

.message-status.read {
    opacity: 1;
    color: var(--primary-color);
}

.message-status.read::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--chat-outgoing-bubble) 80%, transparent);
}

.message.own .message-status.read {
    color: color-mix(in srgb, var(--ggdep-own-message-link) 72%, var(--ggdep-own-message-text));
}

.message.own .message-status.delivered {
    color: color-mix(in srgb, var(--chat-outgoing-time-color) 66%, transparent);
}

.media-message-bubble .message-time,
.voice-message-bubble .message-time {
    gap: 4px;
}

.media-message-bubble .message-status {
    color: #fff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.26));
}

.media-message-bubble .message-status.delivered {
    color: rgba(255, 255, 255, 0.66);
}

.media-message-bubble .message-status.read {
    color: color-mix(in srgb, var(--primary-color) 86%, #fff);
}

.message-receipts-modal {
    z-index: 10020;
}

.message-receipts-modal-content {
    width: min(460px, calc(100vw - 28px));
    max-height: min(680px, calc(100vh - 28px));
}

.message-receipts-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
}

.message-receipts-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.message-receipt-summary-item {
    min-width: 0;
    padding: 12px 10px;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: var(--bg-tertiary);
    text-align: center;
}

.message-receipt-summary-item strong {
    display: block;
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1;
}

.message-receipt-summary-item span {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
}

.message-receipt-summary-item.read strong {
    color: var(--primary-color);
}

.message-receipt-summary-item.delivered strong {
    color: var(--success-color);
}

.message-receipts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 70px;
    max-height: min(430px, calc(100vh - 250px));
    overflow-y: auto;
    padding-right: 2px;
}

.message-receipt-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    background: var(--bg-secondary);
}

.message-receipt-avatar {
    position: relative;
    width: 42px;
    height: 42px;
}

.message-receipt-avatar img {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    border: 1px solid var(--border-light);
}

.message-receipt-online {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border: 2px solid var(--bg-secondary);
    border-radius: 999px;
    background: var(--success-color);
}

.message-receipt-user {
    min-width: 0;
}

.message-receipt-name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-receipt-time {
    overflow: hidden;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-receipt-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.message-receipt-row.delivered .message-receipt-status {
    color: var(--success-color);
}

.message-receipt-row.read .message-receipt-status {
    color: var(--primary-color);
}

.message-receipts-loading,
.message-receipts-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 98px;
    border: 1px dashed var(--border-light);
    border-radius: 16px;
    color: var(--text-muted);
    font-weight: 700;
    text-align: center;
}

@media (max-width: 480px) {
    .message-receipts-modal-content {
        width: calc(100vw - 18px);
        max-height: calc(100vh - 18px);
    }

    .message-receipts-modal .modal-header {
        padding: 18px;
    }

    .message-receipts-summary {
        gap: 6px;
    }

    .message-receipt-summary-item {
        padding: 10px 6px;
    }

    .message-receipt-summary-item strong {
        font-size: 18px;
    }
}

.chat-date-divider span,
.chat-unread-divider span {
    background: var(--chat-divider-bg);
    border-color: var(--chat-divider-border);
    color: var(--chat-divider-color);
}

.chat-date-divider::before,
.chat-date-divider::after {
    content: none;
    display: none;
}

.chat-input-container {
    background: var(--chat-input-container-bg);
    border-top-color: var(--chat-input-border);
}

.chat-input {
    background: var(--chat-input-bg);
    border-color: var(--chat-input-border);
    box-shadow: var(--chat-input-shadow);
}

.chat-input .message-input {
    color: var(--chat-input-text);
}

.chat-input .message-input::placeholder {
    color: var(--chat-input-placeholder);
}

.reaction-badge {
    background: var(--chat-reaction-bg);
    border-color: var(--chat-reaction-border);
}

.message.own .reaction-badge {
    background: var(--chat-own-reaction-bg);
    color: var(--chat-own-reaction-text);
}

.asset-emoji-img {
    display: inline-block;
    width: 2em;
    height: 2em;
    object-fit: contain;
    vertical-align: -0.32em;
    pointer-events: none;
}

.asset-emoji-fallback {
    width: auto;
    height: auto;
    object-fit: initial;
    vertical-align: baseline;
    font-size: 1em;
    line-height: 1;
}

.inline-asset-emoji {
    margin: 0;
}

.reaction-menu-asset {
    width: 34px;
    height: 34px;
    vertical-align: middle;
}

.reaction-menu-asset.asset-emoji-fallback {
    font-size: 28px;
}

.reaction-badge-asset {
    width: 19px;
    height: 19px;
    vertical-align: -4px;
}

.reaction-badge-asset.asset-emoji-fallback {
    font-size: 15px;
    vertical-align: 0;
}

.reaction-burst {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 8;
    pointer-events: none;
    transform-origin: center;
    animation: reactionBurstPop 0.95s ease-out forwards;
}

.message.other .reaction-burst {
    right: auto;
    left: 12px;
}

.reaction-burst-asset {
    width: 58px;
    height: 58px;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.26));
}

.reaction-burst-asset.asset-emoji-fallback {
    font-size: 42px;
}

@keyframes reactionBurstPop {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.35) rotate(-8deg);
    }
    18% {
        opacity: 1;
        transform: translateY(-8px) scale(1.12) rotate(5deg);
    }
    48% {
        opacity: 1;
        transform: translateY(-18px) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-38px) scale(0.82) rotate(8deg);
    }
}

.composer-asset-emoji {
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

.ggdep-send-icon {
    width: 22px;
    height: 22px;
    display: block;
    flex: 0 0 auto;
    overflow: visible;
}

.ggdep-send-icon .ggdep-canopy {
    fill: currentColor;
    opacity: 0.95;
}

.ggdep-send-icon .ggdep-canopy-center {
    opacity: 1;
}

.ggdep-send-icon .ggdep-trunk {
    fill: #fff;
}

.ggdep-send-icon .ggdep-mark {
    fill: rgba(35, 149, 8, 0.78);
}

.ggdep-send-icon .ggdep-ground {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    opacity: 0.8;
}

.send-button .ggdep-send-icon,
.voice-preview-send .ggdep-send-icon {
    width: 24px;
    height: 24px;
}

.btn-primary .ggdep-send-icon {
    width: 19px;
    height: 19px;
    margin-right: 2px;
}

/* Telegram-like composer */
.chat-input-container {
    padding: 10px 14px 14px;
    position: relative;
}

.chat-input {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 6px;
    border-radius: 24px;
}

.chat-input .input-actions,
.chat-send-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 40px;
}

.chat-input .input-actions {
    align-self: flex-end;
    padding: 0;
}

.chat-send-actions {
    justify-content: flex-end;
    min-width: 42px;
}

.chat-input .message-input {
    min-height: 40px;
    max-height: 128px;
    padding: 9px 2px 8px;
    line-height: 1.45;
    align-self: center;
}

.chat-input .input-action-btn,
.chat-input .send-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.chat-input .input-action-btn {
    color: var(--chat-input-placeholder);
    background: transparent;
}

.chat-input .input-action-btn:hover {
    color: var(--chat-input-text);
    background: rgba(255, 255, 255, 0.08);
}

.chat-input .input-action-btn.active {
    color: #fff;
    background: color-mix(in srgb, var(--primary-color) 82%, transparent);
}

.chat-input .send-button {
    box-shadow: 0 10px 22px rgba(35, 149, 8, 0.24);
}

.chat-input .send-button i,
.voice-preview-send i {
    font-size: 16px;
    transform: translateX(1px);
}

.chat-input:not(.has-sendable-content) .send-button,
.chat-input.has-sendable-content:not(.is-voice-recording) .voice-record-btn {
    display: none;
}

.chat-input.is-voice-recording .send-button {
    display: none;
}

.chat-input-container.is-recording-video-note .chat-input {
    display: none;
}

.voice-record-btn.is-recording {
    width: auto;
    min-width: 86px;
    padding: 0 12px;
    gap: 8px;
    color: #fff;
    background: rgba(220, 53, 69, 0.92);
    box-shadow: 0 10px 22px rgba(220, 53, 69, 0.24);
}

.voice-record-btn.is-recording:hover {
    background: rgba(220, 53, 69, 1);
}

.voice-record-time {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.video-note-btn i {
    font-size: 12px;
}

.video-note-btn.is-recording {
    width: auto;
    min-width: 86px;
    padding: 0 12px;
    gap: 8px;
    color: #fff;
    background: rgba(220, 53, 69, 0.92);
    box-shadow: 0 10px 22px rgba(220, 53, 69, 0.24);
}

.video-note-record-time {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.chat-composer-popover {
    position: absolute;
    left: 14px;
    bottom: calc(100% - 4px);
    z-index: 125;
    width: min(384px, calc(100vw - 28px));
    max-height: min(360px, calc(100vh - 160px));
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-secondary) 85%, transparent);
    color: var(--text-primary);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: composerPopoverIn 140ms ease-out;
    overflow-y: auto;
}

.chat-composer-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 8px 9px;
    color: var(--text-primary);
}

.chat-composer-popover-header strong {
    font-size: 13px;
    line-height: 1.2;
}

.chat-composer-popover-close {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.chat-composer-popover-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.chat-attach-actions {
    display: grid;
    gap: 4px;
}

.chat-attach-option {
    width: 100%;
    min-height: 54px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 8px 9px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease;
}

.chat-attach-option:hover {
    background: var(--bg-hover);
}

.chat-attach-option:active {
    transform: scale(0.985);
}

.chat-attach-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.chat-attach-icon.media { background: linear-gradient(135deg, #3b82f6, #14b8a6); }
.chat-attach-icon.file { background: linear-gradient(135deg, #64748b, #334155); }
.chat-attach-icon.poll { background: linear-gradient(135deg, #a855f7, #6366f1); }


.chat-attach-option strong,
.chat-attach-option small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-attach-option strong {
    font-size: 13px;
    line-height: 1.25;
}

.chat-attach-option small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.25;
}

.chat-emoji-section-title {
    margin: 8px 7px 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
}

.chat-emoji-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
}

.chat-emoji-grid-all {
    padding-right: 2px;
    content-visibility: auto;
    contain-intrinsic-size: 420px;
}

.chat-emoji-dock {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.chat-emoji-dock .chat-composer-popover-header {
    position: sticky;
    top: -8px;
    z-index: 3;
    margin: -8px -8px 0;
    padding: 15px 16px 9px;
    background: color-mix(in srgb, var(--bg-primary) 90%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.chat-emoji-dock::-webkit-scrollbar {
    display: none;
}

.chat-emoji-option {
    position: relative;
    min-width: 0;
    height: 50px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    overflow: hidden;
    transition: background 0.16s ease, transform 0.16s ease;
}

.chat-emoji-static-preview {
    position: absolute;
    inset: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-hover) 62%, transparent);
    color: var(--text-primary);
    font-weight: 800;
    letter-spacing: 0;
    transition: opacity 0.14s ease, transform 0.14s ease;
}


.chat-emoji-option.has-legacy-emoji.is-loading-preview .chat-emoji-static-preview {
    background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 44%, transparent);
}

.chat-emoji-option.has-legacy-emoji.is-loading-preview .chat-emoji-static-preview::after {
    content: "";
    width: 58%;
    height: 58%;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--text-secondary) 20%, transparent),
        color-mix(in srgb, var(--text-secondary) 8%, transparent)
    );
}

.chat-emoji-still-preview {
    position: absolute;
    inset: 7px;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    object-fit: contain;
    border-radius: 10px;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.chat-emoji-option.is-loading-preview .chat-emoji-still-preview,
.chat-emoji-option.is-preview-failed .chat-emoji-still-preview,
.chat-emoji-option.has-legacy-emoji.is-loading-preview .chat-emoji-static-preview {
    background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 44%, transparent);
}

.chat-emoji-option.has-legacy-emoji.is-loading-preview .chat-emoji-static-preview::after {
    content: "";
    width: 58%;
    height: 58%;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--text-secondary) 20%, transparent),
        color-mix(in srgb, var(--text-secondary) 8%, transparent)
    );
}

.chat-emoji-still-preview {
    opacity: 0;
}

.chat-emoji-option:not(.is-loading-preview):not(.is-preview-failed) .chat-emoji-static-preview {
    opacity: 0;
    transform: scale(0.92);
}

.chat-emoji-option.has-legacy-emoji .chat-emoji-static-preview {
    background: transparent;
    font-size: 24px;
    font-weight: 500;
}

.chat-emoji-option.has-legacy-emoji.is-loading-preview .chat-emoji-static-preview {
    background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
    font-size: 0;
}

.chat-emoji-option.has-generated-label .chat-emoji-static-preview {
    font-size: 0.68rem;
    text-transform: uppercase;
}

.chat-emoji-option .chat-emoji-option-label {
    display: none;
}

.chat-emoji-option[hidden] {
    display: none;
}

.chat-emoji-option:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.chat-emoji-option.is-animated-preview .chat-emoji-still-preview {
    will-change: contents;
}

@keyframes composerPopoverIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.reply-bar,
.edit-bar {
    margin: 0 0 8px;
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--chat-input-border) 88%, transparent);
    border-left: 0;
    border-radius: 18px;
    background: color-mix(in srgb, var(--chat-input-bg) 86%, var(--bg-secondary));
    box-shadow: var(--chat-input-shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: composerPlateIn 150ms ease-out;
}

.reply-bar-content {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px;
}

.edit-bar-content {
    display: grid;
    grid-template-columns: 4px 32px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 8px 8px 0;
}

.edit-bar-content {
    grid-template-columns: 4px minmax(0, 1fr) 34px;
}

.edit-bar-accent {
    width: 4px;
    height: 100%;
    align-self: stretch;
    border-radius: 0 999px 999px 0;
    background: var(--primary-color);
}

.edit-bar-accent {
    background: var(--warning-color);
}

.reply-bar-content .reply-avatar {
    width: 32px;
    height: 32px;
}

.reply-info,
.edit-info {
    min-width: 0;
}

.reply-label,
.edit-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.edit-label {
    color: var(--warning-color);
}

.reply-preview,
.edit-preview {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edit-info {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.edit-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--warning-color);
    background: color-mix(in srgb, var(--warning-color) 14%, transparent);
}

.reply-cancel-btn,
.edit-cancel-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
}

.reply-cancel-btn:hover,
.edit-cancel-btn:hover {
    background: var(--bg-hover);
    color: var(--danger-color);
}

.reply-bar .reply-bar-content {
    box-sizing: border-box;
    width: 100%;
    grid-template-columns: 32px minmax(0, 1fr) 34px;
    grid-template-rows: 1fr;
    column-gap: 10px;
    row-gap: 0;
    padding: 8px;
    border: 0;
    overflow: hidden;
}

.reply-bar .reply-bar-content .reply-avatar {
    grid-column: 1;
    grid-row: 1;
    width: 32px;
    height: 32px;
    align-self: center;
}

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

.reply-bar .reply-bar-content .reply-info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
    display: block;
    align-self: center;
    overflow: hidden;
    white-space: normal;
}

.reply-bar .reply-bar-content .reply-label {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.reply-bar .reply-bar-content .reply-label span,
.reply-bar .reply-bar-content .reply-label strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reply-bar .reply-bar-content .reply-preview {
    grid-column: auto;
    min-width: 0;
    max-width: 100%;
    margin-top: 3px;
    display: block;
    overflow: hidden;
    color: var(--text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reply-bar .reply-bar-content .reply-cancel-btn {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 1;
}

.pinned-message-bar {
    margin: -2px 14px 8px;
    padding: 0;
    position: relative;
    z-index: 85;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, var(--border-color));
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: composerPlateIn 150ms ease-out;
}

.pinned-message-bar:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary-color) 48%, var(--border-color));
}

.pinned-message-content {
    display: grid;
    grid-template-columns: 8px 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px 8px 8px 0;
    cursor: default;
}

.pinned-message-rail {
    width: 8px;
    height: 42px;
    display: grid;
    gap: 3px;
    align-content: center;
    justify-items: end;
}

.pinned-message-rail span {
    width: 3px;
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 72%, transparent);
}

.pinned-message-rail span:nth-child(2) {
    opacity: 0.64;
}

.pinned-message-rail span:nth-child(3) {
    opacity: 0.34;
}

.pinned-icon {
    width: 34px;
    height: 34px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.pinned-message-label {
    margin: 0 0 3px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.pinned-message-label span {
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
}

.pinned-message-label small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 11px;
}

.pinned-message-preview {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.pinned-sender {
    flex: 0 0 auto;
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    padding: 0;
    color: var(--text-primary);
    font-size: 12px;
}

.pinned-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 12px;
}

.pinned-message-preview .asset-emoji-img,
.pinned-text .inline-asset-emoji {
    width: 20px;
    height: 20px;
    vertical-align: -5px;
    margin: 0 2px;
}

.unpin-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.unpin-btn:hover {
    background: var(--bg-hover);
    color: var(--danger-color);
}

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

.chat-input-container.is-recording-voice .chat-input {
    display: none;
}

.voice-recording-panel {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 2px 0 0;
}

.voice-recording-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.voice-recording-action:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.13);
}

.voice-recording-cancel {
    color: #ff6b7a;
}

.voice-recording-stop {
    color: #fff;
    background: rgba(35, 149, 8, 0.92);
    box-shadow: 0 10px 22px rgba(35, 149, 8, 0.22);
}

.voice-recording-stop:hover {
    background: rgba(35, 149, 8, 1);
}

.voice-recording-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.voice-recording-lead {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
}

.voice-recording-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff4d5e;
    box-shadow: 0 0 0 rgba(255, 77, 94, 0.34);
    animation: voiceRecordingPulse 1.25s ease-in-out infinite;
}

.voice-recording-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 48px;
    height: 30px;
    overflow: hidden;
}

.voice-recording-waveform span {
    display: block;
    flex: 0 0 3px;
    width: 3px;
    height: var(--voice-bar-height, 14px);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(52, 199, 89, 0.95), rgba(35, 149, 8, 0.72));
    opacity: 0.86;
    animation: voiceRecordingWave 1.05s ease-in-out infinite;
    animation-delay: var(--voice-bar-delay, 0s);
}

.voice-recording-panel.is-live .voice-recording-waveform span {
    animation: none;
    transform: scaleY(1);
    transition: height 0.08s linear, opacity 0.08s linear;
}

.voice-recording-timer {
    flex: 0 0 auto;
    min-width: 38px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.video-note-recording-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    padding: 8px 0 10px;
}

.video-note-recording-action,
.video-note-preview-cancel,
.video-note-preview-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.video-note-recording-action:hover,
.video-note-preview-cancel:hover,
.video-note-preview-send:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.13);
}

.video-note-recording-action:disabled {
    opacity: 0.62;
    cursor: wait;
    transform: none;
}

.video-note-recording-stop,
.video-note-preview-send {
    color: #fff;
    background: var(--primary-color);
    box-shadow: 0 10px 22px rgba(35, 149, 8, 0.22);
}

.video-note-recording-cancel,
.video-note-preview-cancel {
    color: var(--danger-color);
}

.video-note-recording-switch {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.video-note-recording-switch.is-rear-camera {
    color: var(--info-color, #3b82f6);
    background: color-mix(in srgb, var(--info-color, #3b82f6) 14%, transparent);
}

.video-note-recording-switch.is-switching i {
    animation: spin 0.9s linear infinite;
}

.video-note-recording-preview {
    position: relative;
    width: 188px;
    height: 188px;
    border-radius: 50%;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.30),
        0 0 0 4px color-mix(in srgb, var(--primary-color) 45%, transparent),
        0 0 0 12px color-mix(in srgb, var(--primary-color) 10%, transparent);
    transition: width 180ms ease, height 180ms ease, box-shadow 180ms ease;
    transform-origin: center;
    animation: video-note-recording-grow 180ms ease-out;
}

@keyframes video-note-recording-grow {
    from {
        opacity: 0.78;
        transform: scale(0.72);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.video-note-recording-video,
.video-note-preview-video,
.video-note-player {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: none !important;
    scale: 1 !important;
    background: #000;
}

.video-note-recording-dot {
    position: absolute;
    top: 10px;
    right: 13px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.48);
    animation: voiceRecordingPulse 1.25s ease-in-out infinite;
}

.video-note-recording-timer {
    position: absolute;
    left: 50%;
    bottom: 9px;
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.video-note-send-preview {
    width: 100%;
    padding: 0 0 8px;
}

.video-note-send-preview-inner {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 42px 42px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 22px;
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.video-note-preview-video {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 38%, transparent);
}

.video-note-preview-info {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.video-note-preview-info strong {
    color: var(--text-primary);
    font-size: 13px;
}

.video-note-preview-info span {
    color: var(--text-muted);
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html.theme-light .voice-recording-action {
    background: rgba(35, 149, 8, 0.08);
}

html.theme-light .voice-recording-action:hover {
    background: rgba(35, 149, 8, 0.13);
}

html.theme-light .voice-recording-pill {
    border-color: rgba(35, 149, 8, 0.14);
    background: rgba(255, 255, 255, 0.86);
}

@keyframes voiceRecordingPulse {
    0%, 100% {
        transform: scale(0.86);
        box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.28);
    }

    50% {
        transform: scale(1);
        box-shadow: 0 0 0 7px rgba(255, 77, 94, 0);
    }
}

@keyframes voiceRecordingWave {
    0%, 100% {
        transform: scaleY(0.62);
        opacity: 0.56;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

html.theme-light .chat-input .input-action-btn:hover {
    background: rgba(35, 149, 8, 0.08);
}

@media (prefers-color-scheme: light) {
    .chat-input .input-action-btn:hover {
        background: rgba(35, 149, 8, 0.08);
    }
}

@media (max-width: 768px) {
    .chat-input-container {
        padding: 8px 10px 10px;
    }

    .chat-input {
        gap: 6px;
        min-height: 46px;
        padding: 5px;
        border-radius: 23px;
    }

    .chat-input .input-actions {
        gap: 0;
    }

    .chat-input .message-input {
        min-height: 38px;
        padding-top: 8px;
        padding-bottom: 7px;
        font-size: 14px;
    }

    .chat-input .input-action-btn,
    .chat-input .send-button {
        width: 38px;
        height: 38px;
    }

    .voice-record-btn.is-recording {
        min-width: 78px;
        padding: 0 10px;
    }

    .voice-recording-panel {
        gap: 6px;
    }

    .voice-recording-action {
        width: 38px;
        height: 38px;
    }

    .voice-recording-pill {
        height: 42px;
        gap: 8px;
        padding: 0 10px;
    }

    .voice-recording-waveform {
        gap: 2px;
    }

    .voice-recording-waveform span {
        flex-basis: 2px;
        width: 2px;
    }

    .chat-composer-popover {
        left: 10px;
        bottom: calc(100% - 2px);
        width: calc(100vw - 20px);
        border-radius: 16px;
    }

    .chat-emoji-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .chat-emoji-option {
        height: 40px;
        font-size: 21px;
    }

    .chat-emoji-still-preview,
    .chat-emoji-static-preview {
        inset: 6px;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
    }

    .reply-bar-content {
        grid-template-columns: 28px minmax(0, 1fr) 32px;
        gap: 8px;
        min-height: 50px;
    }

    .reply-bar .reply-bar-content {
        grid-template-columns: 28px minmax(0, 1fr) 32px;
        gap: 8px;
        min-height: 50px;
        padding: 7px;
        border-radius: 16px;
    }

    .edit-bar-content {
        grid-template-columns: 4px minmax(0, 1fr) 32px;
        min-height: 50px;
    }

    .reply-bar-content .reply-avatar,
    .edit-icon {
        width: 28px;
        height: 28px;
    }

    .reply-bar .reply-bar-content .reply-avatar {
        width: 28px;
        height: 28px;
    }

    .reply-bar .reply-bar-content .reply-label {
        gap: 5px;
        font-size: 11.5px;
        line-height: 1.15;
    }

    .reply-bar .reply-bar-content .reply-preview {
        margin-top: 2px;
        font-size: 11px;
        line-height: 1.2;
    }

    .reply-bar .reply-bar-content .reply-cancel-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .pinned-message-bar {
        margin: -2px 10px 7px;
        border-radius: 16px;
    }

    .pinned-message-content {
        grid-template-columns: 7px 30px minmax(0, 1fr) 32px;
        gap: 8px;
        min-height: 54px;
    }

    .pinned-icon {
        width: 30px;
        height: 30px;
    }
}

/* Reply-aware chat polish */
:root {
    --chat-reply-bg: rgba(255, 255, 255, 0.065);
    --chat-reply-border: rgba(35, 149, 8, 0.62);
    --chat-reply-text: var(--text-muted);
    --chat-reply-sender: var(--primary-color);
    --chat-list-hover-bg: rgba(255, 255, 255, 0.055);
    --chat-list-active-bg: rgba(255, 255, 255, 0.05);
}

@media (prefers-color-scheme: light) {
    :root {
        --chat-reply-bg: rgba(255, 255, 255, 0.74);
        --chat-reply-border: rgba(35, 149, 8, 0.42);
        --chat-reply-text: rgba(30, 39, 33, 0.62);
        --chat-reply-sender: #1f7f12;
        --chat-list-hover-bg: rgba(35, 149, 8, 0.055);
        --chat-list-active-bg: rgba(35, 149, 8, 0.13);
        --chat-list-active-border: rgba(35, 149, 8, 0.26);
    }
}

html.theme-light {
    --chat-reply-bg: rgba(255, 255, 255, 0.74);
    --chat-reply-border: rgba(35, 149, 8, 0.42);
    --chat-reply-text: rgba(30, 39, 33, 0.62);
    --chat-reply-sender: #1f7f12;
    --chat-list-hover-bg: rgba(35, 149, 8, 0.055);
    --chat-list-active-bg: rgba(35, 149, 8, 0.13);
    --chat-list-active-border: rgba(35, 149, 8, 0.26);
}

html.theme-dark {
    --chat-reply-bg: rgba(255, 255, 255, 0.065);
    --chat-reply-border: rgba(35, 149, 8, 0.62);
    --chat-reply-text: var(--text-muted);
    --chat-reply-sender: var(--primary-color);
    --chat-list-hover-bg: rgba(255, 255, 255, 0.055);
    --chat-list-active-bg: rgba(35, 149, 8, 0.17);
    --chat-list-active-border: rgba(52, 199, 89, 0.42);
}

.message-content {
    align-items: flex-start;
}

.message.own .message-content {
    align-items: flex-end;
}

.message-bubble {
    align-self: flex-start;
    position: relative;
}

.message.own .message-bubble {
    align-self: flex-end;
}

.message-reply-preview {
    box-sizing: border-box;
    width: auto;
    max-width: min(360px, 100%);
    padding: 7px 10px;
    gap: 8px;
    border-left-width: 2px;
    border-left-color: var(--chat-reply-border);
    background: var(--chat-reply-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.message-reply-preview:hover {
    transform: translateY(-1px);
}

.reply-preview-avatar {
    width: 24px;
    height: 24px;
}

.reply-preview-content {
    max-width: min(285px, calc(100vw - 138px));
}

.reply-preview-sender {
    color: var(--chat-reply-sender);
    font-size: 11.5px;
    line-height: 1.2;
}

.reply-preview-text {
    color: var(--chat-reply-text);
    font-size: 11.5px;
    line-height: 1.2;
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) {
    flex: 0 1 auto;
}

.chat-list-filters {
    display: flex;
    gap: 7px;
    padding: 0 12px 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.chat-list-filters::-webkit-scrollbar {
    display: none;
}

.chat-list-filter-btn {
    flex: 0 0 auto;
    min-height: 34px;
    max-width: 154px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
    font-size: 12px;
}

.chat-list-filter-btn i,
.chat-list-filter-btn span,
.chat-list-filter-btn em {
    flex: 0 0 auto;
}

.chat-list-filter-btn span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-list-filter-btn em {
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--text-muted) 13%, transparent);
    color: var(--text-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.chat-list-filter-btn em[hidden] {
    display: none;
}

.chat-list-filter-btn.active {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--primary-color) 42%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 14%, var(--bg-primary));
}

.chat-list-filter-btn.active i {
    color: var(--primary-color);
}

.chat-list-filter-btn.active em {
    background: color-mix(in srgb, var(--primary-color) 22%, transparent);
    color: var(--text-primary);
}

.sidebar.app-navigation .user-profile {
    cursor: pointer;
}

.sidebar.app-navigation .user-profile:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-color) 70%, transparent);
    outline-offset: 3px;
}

.sidebar.app-navigation .user-profile .logout-form,
.sidebar.app-navigation .user-profile .logout-btn {
    cursor: default;
}

.chat-item {
    border: 1px solid transparent;
    border-radius: 14px;
    margin: 2px 8px;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.chat-item:hover {
    background: var(--chat-list-hover-bg);
    transform: translateY(-1px);
}

.chat-item.active {
    background: var(--chat-list-active-bg);
}

.chat-item.context-open {
    border-color: color-mix(in srgb, var(--primary-color) 44%, transparent);
    transform: translateY(-1px);
}

.chat-item.active::before {
    width: 3px;
    border-radius: 0 999px 999px 0;
}

.chat-item.is-muted .chat-item-title,
.chat-item.is-muted .chat-item-last-message {
    color: var(--text-muted);
}

.chat-item-pin,
.chat-muted-icon,
.chat-item-group-icon {
    flex: 0 0 auto;
}

.chat-muted-icon {
    opacity: 0.72;
}

.chat-item-avatar,
.message-avatar,
.chat-avatar-container,
.chat-avatar {
    border-radius: var(--radius-circle);
}

.chat-item-avatar,
.message-avatar,
.chat-avatar-container {
    overflow: visible;
}

.chat-item-avatar img,
.message-avatar img,
.chat-avatar img {
    display: block;
    border-radius: var(--radius-circle);
    border: 0;
    outline: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 6px 16px rgba(0, 0, 0, 0.16);
}

@media (prefers-color-scheme: light) {
    .chat-item-avatar img,
    .message-avatar img,
    .chat-avatar img {
        box-shadow: 0 0 0 1px rgba(30, 39, 33, 0.08), 0 6px 16px rgba(35, 59, 39, 0.10);
    }
}

html.theme-light .chat-item-avatar img,
html.theme-light .message-avatar img,
html.theme-light .chat-avatar img {
    box-shadow: 0 0 0 1px rgba(30, 39, 33, 0.08), 0 6px 16px rgba(35, 59, 39, 0.10);
}

.reaction-menu,
.message-menu {
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.reaction-menu {
    width: 344px;
    max-width: 344px;
    min-width: 344px;
}

.chat-context-menu {
    position: fixed;
    z-index: 10030;
    width: 238px;
    padding: 7px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: chatContextMenuIn 120ms ease-out;
}

.chat-context-menu-header {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 7px 7px 9px;
    margin-bottom: 3px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.chat-context-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    object-fit: cover;
}

.chat-context-title {
    min-width: 0;
}

.chat-context-title strong,
.chat-context-title span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-context-title strong {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.25;
}

.chat-context-title span {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
}

.chat-context-menu-item {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.chat-context-menu-item:hover {
    background: var(--bg-hover);
}

.chat-context-menu-item:active {
    transform: scale(0.98);
}

.chat-context-menu-item i {
    width: 18px;
    color: var(--text-secondary);
    text-align: center;
}

.chat-context-menu-item.danger,
.chat-context-menu-item.danger i {
    color: var(--danger-color);
}

@keyframes chatContextMenuIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.reaction-option {
    background: transparent;
}

.reaction-list {
    align-items: center;
    justify-content: center;
}

@media (min-width: 769px) {
    .reaction-menu:not(.mobile) .reaction-list {
        display: grid;
        grid-template-columns: repeat(6, 50px);
        gap: 4px;
    }
}

.reaction-option {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 16px;
    font-size: 0;
}

.reaction-option:hover,
.reaction-option.active {
    background: var(--bg-hover);
}

.reaction-option.active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 44%, transparent);
}

.reaction-more-btn {
    color: var(--text-secondary);
    font-size: 16px;
    border: 0;
    cursor: pointer;
}

.reaction-more-btn.is-active {
    color: var(--primary-color);
    background: var(--bg-hover);
}

.reaction-all-picker {
    min-width: 0;
    overflow-x: hidden;
    padding: 8px 10px 10px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
}

.reaction-all-picker[hidden] { display: none; }

.reaction-all-search {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: var(--bg-hover);
    color: var(--text-muted);
}

.reaction-all-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
}

.reaction-all-grid {
    width: 100%;
    min-width: 0;
    max-height: min(42vh, 310px);
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(6, 50px);
    justify-content: center;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}

.reaction-all-grid::-webkit-scrollbar { width: 6px; height: 0; }
.reaction-all-grid::-webkit-scrollbar-track { background: transparent; }
.reaction-all-grid::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 999px; }
.reaction-all-grid::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

.reaction-all-loading {
    grid-column: 1 / -1;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--text-muted);
    font-size: 13px;
}

@media (max-width: 768px) {
    .reaction-menu.mobile.is-expanded {
        width: min(344px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
    }
    .reaction-menu.mobile .reaction-all-grid {
        grid-template-columns: repeat(6, minmax(40px, 50px));
        max-height: min(38vh, 290px);
    }
}

.reaction-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.reaction-badge {
    gap: 3px;
    padding: 1px 6px 1px 4px;
}

.message-menu-item {
    min-height: 42px;
    border-radius: 12px;
    margin: 2px 6px;
}

.message-menu-item.delete-btn {
    color: var(--danger-color);
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.message.own .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    border-color: 
color-mix(in srgb, var(--primary-color) 36%, transparent);
    box-shadow: 0 8px 22px rgba(35, 149, 8, 0.20);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.055));
}

.message-attachments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(360px, calc(100vw - 96px));
    max-width: 100%;
}

.message-file.document-message {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 72px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 66%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    overflow: hidden;
}

.message.own .message-file.document-message {
    border-color: color-mix(in srgb, var(--primary-color) 38%, transparent);
    background: linear-gradient(180deg, rgba(35, 149, 8, 0.20), rgba(35, 149, 8, 0.11));
}

.message-file.document-message .file-icon-wrap {
    position: relative;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary-color) 15%, var(--bg-tertiary));
    color: var(--primary-color);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.message-file.document-message .file-icon-wrap i {
    font-size: 21px;
    color: currentColor;
}

.message-file.document-message .file-icon-wrap em {
    position: absolute;
    right: 4px;
    bottom: 4px;
    max-width: 34px;
    padding: 1px 4px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    color: var(--text-secondary);
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}

.message-file.document-message .file-info {
    min-width: 0;
}

.message-file.document-message .file-name {
    margin: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.28;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-file.document-message .file-meta {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.file-local-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    color: var(--primary-color);
    font-weight: 750;
}

.file-local-state i {
    font-size: 11px;
}

.document-message.is-file-cached .file-local-state {
    color: #2fa84f;
}

.document-message.is-file-loading {
    cursor: progress;
    opacity: .82;
}

.file-text-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 4px 8px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 13%, var(--bg-tertiary));
    color: var(--primary-color);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.file-text-preview-btn i {
    font-size: 11px !important;
}

.file-text-preview-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

.chat-text-preview {
    grid-column: 1 / -1;
    width: 100%;
    max-height: min(48vh, 440px);
    overflow: auto;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
    color: var(--text-primary);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.chat-text-preview[hidden] {
    display: none !important;
}

.chat-text-preview pre {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font: 12.5px/1.5 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    color: inherit;
    user-select: text;
}

.chat-text-preview-status {
    color: var(--text-muted);
    font-size: 12px;
}

.message-file.document-message .file-download-btn {
    display: none !important;
}

.file-preview-bar {
    margin: 0 0 8px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 64%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.file-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 760;
}

.file-preview-cancel-all,
.preview-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.file-preview-cancel-all {
    width: 28px;
    height: 28px;
    background: color-mix(in srgb, var(--danger-color) 12%, transparent);
    color: var(--danger-color);
}

.file-preview-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 1px 2px 8px;
    scrollbar-width: thin;
}

.file-preview-item {
    position: relative;
    flex: 0 0 196px;
    min-width: 0;
    min-height: 66px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 34px 10px 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
}

.file-preview-item.image-preview {
    grid-template-columns: 52px minmax(0, 1fr);
}

.file-preview-icon,
.file-preview-item .preview-thumb {
    width: 44px;
    height: 44px;
    border-radius: 14px;
}

.file-preview-icon {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary-color) 14%, var(--bg-tertiary));
    color: var(--primary-color);
    font-size: 18px;
}

.file-preview-item .preview-thumb {
    object-fit: cover;
}

.file-preview-caption {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.file-preview-name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.24;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-preview-caption small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 650;
}

.preview-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    background: color-mix(in srgb, var(--bg-secondary) 84%, transparent);
    color: var(--text-muted);
}

.file-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}



.voice-message {
    background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
    border-radius: 18px;
}

.message.own .voice-message {
    background: linear-gradient(180deg, rgba(68, 184, 47, 0.96), rgba(35, 149, 8, 0.92));
    border-color: color-mix(in srgb, var(--primary-color) 52%, transparent);
}

.voice-play-btn {
    box-shadow: 0 8px 18px rgba(35, 149, 8, 0.22);
}

.voice-wave span {
    border-radius: 999px;
}

.message-poll {
    background: color-mix(in srgb, var(--bg-secondary) 91%, transparent);
    border-radius: 16px;
    overflow: hidden;
}

.poll-header {
    gap: 8px;
    padding-bottom: 10px;
}

.poll-question {
    line-height: 1.28;
}

.poll-option {
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
}

.poll-option:hover {
    border-color: color-mix(in srgb, var(--primary-color) 42%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-primary));
}

.poll-progress {
    border-radius: 999px;
}


.message-menu {
    min-width: 224px;
    padding: 7px;
}

.message-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 9px 10px;
    margin-bottom: 3px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.message-menu-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.message-menu-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.message-menu-actions {
    display: grid;
    gap: 2px;
}

.chat-search-tabs {
    display: flex;
    gap: 6px;
    margin: 12px 0 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.chat-search-tabs::-webkit-scrollbar {
    display: none;
}

.chat-search-tab {
    flex: 0 0 auto;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.chat-search-tab.active {
    background: color-mix(in srgb, var(--primary-color) 18%, var(--bg-secondary));
    border-color: color-mix(in srgb, var(--primary-color) 44%, var(--border-color));
    color: var(--text-primary);
}

.chat-search-result-item {
    border-radius: 8px;
    margin: 6px 8px;
    border: 1px solid transparent;
}

.chat-search-result-item.active {
    border-color: color-mix(in srgb, var(--primary-color) 42%, transparent);
}

.chat-search-result-sender em {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: 12px;
    font-style: normal;
}

.chat-search-file-size {
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--border-color);
}

.chat-search-media-kind {
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
}

.chat-search-result-item.type-file .chat-search-result-sender em {
    color: var(--primary-color);
}

.chat-search-result-item.type-media .chat-search-result-sender em {
    color: var(--success-color, var(--primary-color));
}

.chat-search-result-item.type-link .chat-search-result-sender em {
    color: var(--info-color, var(--primary-color));
}

.chat-search-loading i {
    animation: subtlePulse 1.1s ease-in-out infinite;
}

@keyframes subtlePulse {
    0%, 100% {
        opacity: .55;
        transform: scale(.98);
    }
    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

/* Voice messages: final chat component layer */
.voice-message-bubble {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.voice-message-bubble .voice-message {
    box-sizing: border-box;
    width: min(352px, calc(100vw - 108px));
    min-width: 268px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 10px 70px 24px 11px;
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent) !important;
    border-radius: 18px 18px 18px 8px !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 96%, transparent), color-mix(in srgb, var(--bg-primary) 86%, transparent)) !important;
    color: var(--text-primary);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.message.own .voice-message-bubble .voice-message {
    border-color: color-mix(in srgb, var(--primary-color) 42%, transparent) !important;
    border-radius: 18px 18px 8px 18px !important;
    background: linear-gradient(180deg, rgba(64, 177, 44, 0.98), rgba(35, 149, 8, 0.94)) !important;
    color: #fff;
    box-shadow: 0 10px 24px rgba(35, 149, 8, 0.22) !important;
}

.voice-message-bubble .voice-play-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 92%, #fff 8%) !important;
    color: #fff;
    box-shadow: 0 8px 18px rgba(35, 149, 8, 0.26);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.voice-message-bubble .voice-play-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 10px 22px rgba(35, 149, 8, 0.32);
}

.message.own .voice-message-bubble .voice-play-btn {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.voice-message-bubble .voice-message-main {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.voice-message-bubble .voice-wave {
    height: 24px;
    display: grid;
    grid-template-columns: repeat(var(--voice-wave-bars, 28), minmax(2px, 1fr));
    align-items: center;
    gap: 3px;
    opacity: 0.88;
}

.voice-message-bubble .voice-wave span {
    width: 100%;
    max-width: 5px;
    justify-self: center;
    height: var(--voice-wave-height, 12px);
    border-radius: 999px;
    background: currentColor;
    opacity: 0.58;
}

.voice-message-bubble .voice-wave span:nth-child(1) { height: 8px; }
.voice-message-bubble .voice-wave span:nth-child(2) { height: 17px; }
.voice-message-bubble .voice-wave span:nth-child(3) { height: 12px; }
.voice-message-bubble .voice-wave span:nth-child(4) { height: 22px; }
.voice-message-bubble .voice-wave span:nth-child(5) { height: 14px; }
.voice-message-bubble .voice-wave span:nth-child(6) { height: 19px; }
.voice-message-bubble .voice-wave span:nth-child(7) { height: 9px; }

.voice-message-bubble .voice-wave span[style] {
    height: var(--voice-wave-height, 12px);
}

.voice-message-bubble .voice-message.is-playing .voice-wave span {
    animation: voiceBarPulse 0.9s ease-in-out infinite;
}

.voice-message-bubble .voice-message.is-playing .voice-wave span:nth-child(2n) {
    animation-delay: 0.12s;
}

.voice-message-bubble .voice-message.is-playing .voice-wave span:nth-child(3n) {
    animation-delay: 0.22s;
}

@keyframes voiceBarPulse {
    0%, 100% { opacity: 0.48; transform: scaleY(0.78); }
    50% { opacity: 0.92; transform: scaleY(1.08); }
}

.voice-message-bubble .voice-progress {
    width: 100%;
    height: 18px;
    margin: -1px 0 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
    --voice-progress: 0%;
}

.voice-message-bubble .voice-progress::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, currentColor var(--voice-progress), color-mix(in srgb, currentColor 22%, transparent) var(--voice-progress));
}

.voice-message-bubble .voice-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.voice-message-bubble .voice-progress::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 22%, transparent);
}

.voice-message-bubble .voice-progress::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: currentColor;
}

.voice-message-bubble .voice-meta-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: color-mix(in srgb, currentColor 74%, transparent);
    font-size: 12px;
    line-height: 1.1;
}

.voice-message-bubble .voice-duration {
    flex: 0 0 auto;
    font-weight: 700;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.voice-message-bubble .voice-time-separator {
    opacity: 0.55;
}

.voice-message-bubble .voice-speed-btn {
    flex: 0 0 auto;
    min-width: 34px;
    min-height: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: currentColor;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}

.voice-message-bubble .voice-transcript-toggle {
    min-width: 0;
    max-width: 142px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.voice-message-bubble .voice-transcript-toggle span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.message.own .voice-message-bubble .voice-transcript-toggle {
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.94);
}

.voice-message-bubble .voice-transcript-toggle:disabled {
    opacity: 0.58;
}

.voice-message-bubble .voice-transcript {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 2px 0 0 !important;
    padding: 8px 9px !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-primary) 76%, transparent) !important;
    color: var(--text-secondary) !important;
    font-size: 12.5px;
    line-height: 1.42;
}

.message.own .voice-message-bubble .voice-transcript {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

.voice-message-bubble .voice-transcript.is-hidden {
    display: none !important;
}

.voice-message-bubble .message-time {
    right: 10px;
    bottom: 7px;
    color: color-mix(in srgb, currentColor 66%, transparent);
}

@media (max-width: 768px) {
    .voice-message-bubble .voice-message {
        width: min(304px, calc(100vw - 74px));
        min-width: 226px;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 9px;
        padding: 9px 56px 23px 10px;
    }

    .voice-message-bubble .voice-play-btn {
        width: 38px;
        height: 38px;
    }

    .voice-message-bubble .voice-wave {
        gap: 3px;
    }

    .voice-message-bubble .voice-transcript-toggle {
        max-width: 112px;
        padding-inline: 7px;
        font-size: 11.5px;
    }
}

/* Zoomable chat images */
.image-modal .image-modal-container {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 18px);
}

.image-modal .image-modal-actions {
    flex-wrap: nowrap;
}

.image-modal .image-modal-body {
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in;
    border-radius: 16px;
    background: #050505;
}

.image-modal.is-zoomed .image-modal-body,
.image-modal.is-zoomed .image-modal-img {
    cursor: grab;
}

.image-modal .image-modal-img {
    transform-origin: center center;
    transition: transform 0.14s ease;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

@media (max-width: 768px) {
    .image-modal .image-modal-header {
        gap: 8px;
        padding-inline: 10px;
    }

    .image-modal .image-modal-name {
        max-width: calc(100vw - 252px);
    }

    .image-modal .image-modal-actions {
        gap: 6px;
    }

    .image-modal .image-modal-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}

/* Telegram-like voice messages */
.voice-message-bubble .voice-message {
    width: min(356px, calc(100vw - 98px)) !important;
    min-width: 252px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 58px 18px 8px;
    border-radius: 22px 22px 22px 10px !important;
}

.message.own .voice-message-bubble .voice-message {
    border-radius: 22px 22px 10px 22px !important;
}

.voice-message-bubble .voice-play-btn {
    width: 44px;
    height: 44px;
    align-self: center;
    font-size: 15px;
}

.message.own .voice-message-bubble .voice-play-btn {
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--primary-color);
}

.voice-message-bubble .voice-message-main {
    position: relative;
    gap: 3px;
}

.voice-message-bubble .voice-wave {
    height: 29px;
    grid-template-columns: repeat(var(--voice-wave-bars, 28), minmax(2px, 1fr));
    gap: 2px;
    padding: 0 1px;
    opacity: 1;
}

.voice-message-bubble .voice-wave span {
    max-width: 4px;
    opacity: 0.62;
    background: color-mix(in srgb, currentColor 86%, transparent);
    transform-origin: center;
}

.voice-message-bubble .voice-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    height: 31px;
    margin: 0;
    opacity: 0;
}

.voice-message-bubble .voice-meta-row {
    min-height: 22px;
    gap: 6px;
    font-size: 11.5px;
}

.voice-message-bubble .voice-duration {
    font-size: 11.5px;
}

.voice-message-bubble .voice-speed-btn,
.voice-message-bubble .voice-transcript-toggle {
    min-height: 22px;
    height: 22px;
    padding: 0 7px;
    font-size: 11px;
}

.voice-message-bubble .voice-transcript-toggle {
    margin-left: auto;
    max-width: 128px;
}

.voice-message-bubble .voice-transcript {
    margin-top: 7px !important;
    border-radius: 14px;
}

.voice-message-bubble .message-time {
    right: 11px;
    bottom: 6px;
    font-size: 10.5px;
}

@media (max-width: 768px) {
    .voice-message-bubble .voice-message {
        width: min(296px, calc(100vw - 72px)) !important;
        min-width: 224px;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 8px;
        padding: 8px 48px 18px 8px;
    }

    .voice-message-bubble .voice-play-btn {
        width: 40px;
        height: 40px;
    }

    .voice-message-bubble .voice-transcript-toggle {
        max-width: 96px;
    }
}

/* Round video messages */
.video-note-message-bubble {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.video-note-message-bubble .video-note-message {
    position: relative;
    width: 184px;
    height: 184px;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: 50%;
    background: #000;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.20);
    cursor: pointer;
    transition: width 180ms ease, height 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.message.own .video-note-message-bubble .video-note-message {
    border-color: color-mix(in srgb, var(--primary-color) 54%, transparent);
}

.video-note-message-bubble .video-note-message.is-playing {
    width: 244px;
    height: 244px;
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.28);
}

.video-note-message-bubble .video-note-player {
    cursor: pointer;
}

.video-note-message-bubble .video-note-play-btn {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 54px;
    height: 54px;
    margin: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.48);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast);
}

.video-note-message-bubble .video-note-play-btn:hover {
    transform: scale(1.04);
    background: rgba(0, 0, 0, 0.58);
}

.video-note-message-bubble .video-note-message.is-playing .video-note-play-btn {
    opacity: 0;
    pointer-events: none;
}

.video-note-message-bubble .video-note-ring {
    position: absolute;
    inset: 6px;
    z-index: 2;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    pointer-events: none;
}

.video-note-message-bubble .video-note-duration {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 3;
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.56);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.video-note-message-bubble .message-time {
    justify-content: center;
    margin-top: 4px;
    color: var(--text-muted);
}

.video-note-message-bubble .message-reactions {
    left: 50% !important;
    right: auto !important;
    bottom: -12px;
    justify-content: center;
    max-width: 100%;
    transform: translateX(-50%);
}

.video-note-message--missing {
    width: auto !important;
    height: auto !important;
    min-width: 180px;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent) !important;
    color: var(--text-secondary);
}

.video-note-fallback {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--danger-color) 12%, transparent);
    color: var(--danger-color);
}

@media (max-width: 768px) {
    .video-note-recording-panel {
        gap: 9px;
        padding: 8px 0 10px;
    }

    .video-note-recording-preview {
        width: 168px;
        height: 168px;
    }

    .video-note-recording-action {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .video-note-send-preview-inner {
        grid-template-columns: 56px minmax(0, 1fr) 38px 38px;
        gap: 8px;
        padding: 9px;
    }

    .video-note-preview-video {
        width: 56px;
        height: 56px;
    }

    .video-note-message-bubble .video-note-message {
        width: 158px;
        height: 158px;
    }

    .video-note-message-bubble .video-note-message.is-playing {
        width: min(232px, calc(100vw - 104px));
        height: min(232px, calc(100vw - 104px));
    }

    .message-attachments {
        width: min(328px, calc(100vw - 84px));
    }

    .message-file.document-message {
        grid-template-columns: 46px minmax(0, 1fr);
        min-height: 68px;
        padding: 9px;
        border-radius: 17px;
    }

    .message-file.document-message .file-icon-wrap {
        width: 46px;
        height: 46px;
    }

    .file-preview-bar {
        border-radius: 18px;
        padding: 9px;
    }

    .file-preview-item {
        flex-basis: 176px;
    }
}

/* Chat right-side information panel */
.chat-info-panel {
    width: 0;
    min-width: 0;
    flex: 0 0 0;
    overflow: hidden;
    border-left: 1px solid transparent;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    transition: width var(--transition-normal), min-width var(--transition-normal), border-color var(--transition-normal);
}

.chat-info-panel.is-open {
    width: 336px;
    min-width: 336px;
    flex-basis: 336px;
    border-left-color: var(--border-color);
}

.chat-info-panel-header {
    min-height: 64px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
}

.chat-info-panel-header strong,
.chat-info-panel-header span {
    display: block;
    min-width: 0;
}

.chat-info-panel-header strong {
    font-size: 14px;
    color: var(--text-primary);
}

.chat-info-panel-header span {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-info-panel-close {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: transparent;
}

.chat-info-panel-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
}

.chat-info-panel-tab {
    min-width: 0;
    min-height: 42px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    gap: 2px;
    color: var(--text-muted);
    background: transparent;
    font-size: 11px;
}

.chat-info-panel-tab i {
    font-size: 13px;
}

.chat-info-panel-tab.active {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 13%, transparent);
}

.chat-info-panel-content {
    height: calc(100% - 116px);
    overflow-y: auto;
    padding: 12px;
}

.chat-info-card,
.chat-info-section,
.chat-info-pinned-card,
.chat-info-search-box,
.chat-info-search-shortcuts {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
}

.chat-info-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.chat-info-avatar img,
.chat-info-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-info-profile h4 {
    margin: 0;
    font-size: 15px;
    color: var(--text-primary);
}

.chat-info-profile p,
.chat-info-muted {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.chat-info-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 10px 0;
}

.chat-info-stats button,
.chat-info-actions-grid button {
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
    color: var(--text-secondary);
}

.chat-info-stats button {
    min-height: 56px;
    display: grid;
    place-items: center;
}

.chat-info-stats strong {
    color: var(--text-primary);
    font-size: 16px;
}

.chat-info-stats span {
    font-size: 11px;
}

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

.chat-info-actions-grid button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.chat-info-section {
    padding: 10px;
    margin-bottom: 10px;
}

.chat-info-section h4 {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.chat-info-section h4 span {
    min-width: 24px;
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.chat-info-material-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.chat-info-material-summary button {
    min-width: 0;
    min-height: 72px;
    padding: 8px 5px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    gap: 2px;
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
    color: var(--text-secondary);
}

.chat-info-material-summary i {
    color: var(--primary-color);
    font-size: 14px;
}

.chat-info-material-summary strong {
    color: var(--text-primary);
    font-size: 17px;
    line-height: 1;
}

.chat-info-material-summary span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}

.chat-info-material-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.chat-info-material-filters::-webkit-scrollbar {
    display: none;
}

.chat-info-material-filters button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-primary) 76%, transparent);
    color: var(--text-secondary);
    font-size: 12px;
}

.chat-info-material-filters button.active {
    border-color: color-mix(in srgb, var(--primary-color) 44%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--text-primary);
}

.chat-info-material-filters em {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-muted);
    font-size: 11px;
    font-style: normal;
}

.chat-info-media-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.chat-info-media-thumb {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-tertiary);
}

.chat-info-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-info-list {
    display: grid;
    gap: 7px;
}


.chat-info-inline-empty {
    min-height: 86px;
    padding: 12px;
    border: 1px dashed color-mix(in srgb, var(--border-color) 86%, transparent);
    border-radius: 8px;
    display: grid;
    place-items: center;
    gap: 5px;
    text-align: center;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-secondary) 54%, transparent);
}

.chat-info-inline-empty i {
    color: var(--primary-color);
    opacity: .78;
}

.chat-info-inline-empty strong {
    color: var(--text-secondary);
    font-size: 13px;
}

.chat-info-inline-empty span {
    font-size: 11px;
    line-height: 1.35;
}

.chat-info-pinned-card {
    padding: 12px;
    display: grid;
    gap: 8px;
}

.chat-info-pinned-card i {
    color: var(--primary-color);
}

.chat-info-pinned-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.chat-info-pinned-card button,
.chat-info-search-box button {
    min-height: 34px;
    border-radius: 8px;
    background: var(--primary-color);
    color: #fff;
}

.chat-info-search-box {
    padding: 8px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.chat-info-search-box input {
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    outline: none;
}

.chat-info-search-shortcuts {
    margin-top: 10px;
    padding: 8px;
    display: flex;
    gap: 6px;
}

.chat-info-search-shortcuts button {
    min-height: 30px;
    padding: 0 9px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-secondary) 75%, transparent);
    color: var(--text-secondary);
}

.chat-info-panel-empty {
    min-height: 180px;
    display: grid;
    place-items: center;
    gap: 8px;
    color: var(--text-muted);
    text-align: center;
}

.chat-action-btn.active {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

@media (max-width: 1180px) {
    .chat-info-panel.is-open {
        width: 306px;
        min-width: 306px;
        flex-basis: 306px;
    }
}

@media (max-width: 900px) {
    .modal {
        z-index: 1400;
    }

    .chat-info-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        width: min(92vw, 360px);
        min-width: 0;
        flex-basis: auto;
        transform: translateX(100%);
        transition: transform var(--transition-normal);
        box-shadow: -20px 0 40px rgba(0, 0, 0, 0.28);
    }

    .chat-info-panel.is-open {
        width: min(92vw, 360px);
        min-width: 0;
        flex-basis: auto;
        transform: translateX(0);
    }
}

.chat-messages {
    scroll-padding-block: 18px;
    scroll-behavior: auto;
}

.message {
    position: relative;
}

.message.reply-swipe-active .message-bubble::before {
    content: "";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: -32px;
    top: 50%;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 18%, var(--bg-secondary));
    color: var(--primary-color);
    transform: translateY(-50%);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.message.own.reply-swipe-active .message-bubble::before {
    left: auto;
    right: -32px;
}



#notifications-btn #notifications-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid var(--bg-secondary);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}



/* Stable photo geometry: reserve the complete media message before blob loading. */
.message-image-group {
    box-sizing: border-box;
    width: min(336px, calc(100vw - 104px));
    max-width: 100%;
}

.message-image-group.single {
    width: min(280px, calc(100vw - 104px));
}

.message-image-group .image-group-grid {
    width: 100%;
}

.message-image-group.single .image-group-grid {
    display: block;
}

.message-image-group.double .image-group-grid,
.message-image-group.grid-4 .image-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.message-image-group.grid-3 .image-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 4px;
    aspect-ratio: 4 / 3;
}

.message-image-group.grid-3 .image-group-item:first-child {
    grid-row: 1 / 3;
}

.message-image-group.grid-5 .image-group-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 1.1fr .9fr;
    gap: 4px;
    aspect-ratio: 6 / 5;
}

.message-image-group.grid-5 .image-group-item:nth-child(-n + 2) {
    grid-column: span 3;
}

.message-image-group.grid-5 .image-group-item:nth-child(n + 3) {
    grid-column: span 2;
}

.message-image-group.single .image-group-item {
    aspect-ratio: var(--chat-photo-aspect, 4 / 3);
}

.message-image-group.double .image-group-item,
.message-image-group.grid-4 .image-group-item {
    aspect-ratio: 1 / 1;
}

.message-image-group.grid-3 .image-group-item,
.message-image-group.grid-5 .image-group-item {
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto;
}

.message-image-group .image-group-item,
.message-image .image-container {
    position: relative;
    overflow: hidden;
    background: var(--bg-tertiary, #dfe3e8);
    isolation: isolate;
}

.message-image-group .image-group-item {
    border-radius: 8px;
    cursor: pointer;
}

.message-image-group .image-group-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.message-image-group .image-group-count {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
}

.message-image {
    box-sizing: border-box;
    width: min(var(--chat-photo-width, 336px), calc(100vw - 104px));
    max-width: 100%;
}

.message-image .image-container {
    width: 100%;
    aspect-ratio: var(--chat-photo-aspect, 4 / 3);
}

.message-image-group.single {
    width: min(var(--chat-photo-width, 336px), calc(100vw - 104px));
}

.message-image-group.single .image-group-item,
.message-image .image-container {
    height: var(--chat-photo-height, auto);
    max-height: 340px;
}

.message-image-group .image-group-item > img,
.message-image .image-container > img.chat-image {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 220ms ease;
}

/* A single photo follows its natural proportions, like a Telegram media card.
   Album cells intentionally keep cover cropping to preserve an even grid. */
.message-image-group.single .image-group-item > img,
.message-image .image-container > img.chat-image {
    object-fit: contain;
    background: color-mix(in srgb, var(--bg-tertiary, #dfe3e8) 92%, transparent);
}

@media (max-width: 768px) {
    .message-image-group.single,
    .message-image {
        width: min(var(--chat-photo-width, 336px), calc(100vw - 72px));
    }

    .message-image-group.single .image-group-item,
    .message-image .image-container {
        max-height: min(330px, 48vh);
    }
}

.media-placeholder > img[data-blob-src]:not([data-media-state="ready"]):not([data-media-state="error"]) {
    opacity: 0;
}

.media-placeholder::before,
.media-placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.media-placeholder::before {
    content: "";
    z-index: 3;
    display: grid;
    place-items: center;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-size: clamp(24px, 9vw, 42px);
    font-weight: 900;
    color: color-mix(in srgb, var(--text-muted) 32%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--bg-tertiary) 82%, white), var(--bg-tertiary));
}

.media-placeholder::after {
    z-index: 4;
    width: 55%;
    transform: translateX(-180%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
    animation: chat-media-skeleton 1.35s ease-in-out infinite;
}

.media-placeholder.is-media-ready::before,
.media-placeholder.is-media-ready::after,
.media-placeholder.is-media-error::after {
    opacity: 0;
    animation: none;
}

.message-image .image-overlay,
.message-image-group .image-group-overlay {
    z-index: 5;
}

/* Keep the complete photo-sized skeleton above the transparent blob image.
   It disappears only after utils.js has decoded a drawable image frame. */
.media-placeholder.is-media-loading > img {
    opacity: 0 !important;
}

.media-placeholder.is-media-ready > img {
    opacity: 1;
}

@keyframes chat-media-skeleton {
    to { transform: translateX(280%); }
}

@media (prefers-reduced-motion: reduce) {
    .media-placeholder::after {
        animation: none;
    }

    .message-image-group .image-group-item > img,
    .message-image .image-container > img.chat-image {
        transition: none;
    }
}

/* ===== Compact attachment draft + glass composer + publication cards ===== */
body.is-chats-panel .chat-area-full {
    position: relative;
}

body.is-chats-panel .chat-area-full .chat-input-container {
    position: absolute !important;
    right: 0;
    bottom: 0 !important;
    left: 0;
    z-index: 110;
    padding-top: 10px;
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.is-chats-panel .chat-area-full .chat-messages {
    padding-bottom: 82px !important;
}

body.is-chats-panel .chat-area-full .chat-input {
    background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .035);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.file-preview-bar {
    width: min(var(--ggdep-chat-composer-width), 100%);
    max-width: var(--ggdep-chat-composer-width);
    margin: 0 auto -1px !important;
    padding: 8px 8px 9px;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .11);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.chat-input-container:has(.file-preview-bar) .chat-input {
    border-top-color: color-mix(in srgb, var(--border-color) 34%, transparent);
    border-radius: 0 0 27px 27px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.file-preview-strip {
    gap: 8px;
    padding: 0;
    scrollbar-width: none;
}

.file-preview-strip::-webkit-scrollbar {
    display: none;
}

.file-preview-item {
    flex: 0 0 184px;
    min-height: 56px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 31px 7px 7px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-primary) 48%, transparent);
}

.file-preview-item.image-preview {
    display: block;
    flex-basis: 74px;
    width: 74px;
    min-height: 64px;
    height: 64px;
    padding: 0;
    overflow: hidden;
}

.file-preview-icon,
.file-preview-item:not(.image-preview) .preview-thumb {
    width: 40px;
    height: 40px;
    border-radius: 9px;
}

.file-preview-item.image-preview .preview-thumb {
    width: 100%;
    height: 100%;
    border-radius: 11px;
    object-fit: cover;
}

.file-preview-item.image-preview .file-preview-caption {
    display: none;
}

.file-preview-name {
    font-size: 12px;
}

.preview-remove {
    top: 4px;
    right: 4px;
    width: 21px;
    height: 21px;
    background: rgba(18, 20, 22, .76);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
}

.file-preview-actions {
    display: none !important;
}

.message-bubble.publication-message-bubble {
    width: min(420px, calc(100vw - 96px));
    max-width: min(420px, calc(100vw - 96px));
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-secondary) 96%, transparent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

.message-publication-card {
    width: 100%;
    overflow: hidden;
}

.message-publication-card .message-image-group,
.message-publication-card .message-image-group.single,
.message-publication-card .message-video-list,
.message-publication-card .message-attachments {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
}

.message-publication-card .message-image-group.single .image-group-grid,
.message-publication-card .message-image-group.single .image-group-item {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 3;
}

.message-publication-card .message-image-group.single img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-publication-card .message-attachment-caption {
    padding: 11px 13px 7px;
    font-size: 14px;
    line-height: 1.42;
}

.message-publication-card > .message-time {
    display: flex;
    justify-content: flex-end;
    padding: 0 12px 9px;
}

@media (max-width: 768px) {
    body.is-chats-panel .chat-area-full.mobile-visible .chat-input-container {
        bottom: 0 !important;
        padding-top: 7px;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    }

    body.is-chats-panel .chat-area-full.mobile-visible .chat-messages {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .file-preview-bar {
        width: 100%;
        max-width: var(--ggdep-chat-composer-width);
    }

    .message-bubble.publication-message-bubble {
        width: min(380px, calc(100vw - 58px));
        max-width: min(380px, calc(100vw - 58px));
    }
}

/* The composer is an overlay over the real chat surface, not a second copy
   of the wallpaper. This keeps messages visible through the glass. */
.chat-area-full .chat-input-container {
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.message-attachment-caption {
    padding: 10px 12px 4px;
    color: inherit;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: normal;
}

.chat-file-drop-overlay {
    position: absolute;
    inset: var(--ggdep-chat-header-height, 64px) 0 0;
    z-index: 410;
    display: grid;
    place-items: center;
    padding: clamp(18px, 4vw, 42px);
    border: 2px dashed color-mix(in srgb, var(--primary-color) 72%, transparent);
    border-radius: 18px 18px 0 0;
    background: color-mix(in srgb, var(--chat-surface-bg) 58%, transparent);
    opacity: 0;
    visibility: hidden;
    transform: scale(.992);
    pointer-events: none;
    backdrop-filter: blur(5px) saturate(120%);
    -webkit-backdrop-filter: blur(5px) saturate(120%);
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}

.chat-area-full.is-dragging-files .chat-file-drop-overlay {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.chat-file-drop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: min(360px, calc(100% - 44px));
    min-height: 168px;
    padding: 26px 24px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 48%, var(--border-color));
    border-radius: 24px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    box-shadow: 0 18px 54px rgba(0, 0, 0, .28);
    text-align: center;
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.chat-file-drop-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 4px;
    place-items: center;
    border-radius: 18px;
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--primary-color);
    font-size: 25px;
}

.chat-file-drop-card strong {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.chat-file-drop-hint {
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .chat-file-drop-overlay {
        padding: 14px;
    }

    .chat-file-drop-card {
        width: min(330px, calc(100% - 16px));
        min-height: 148px;
        padding: 22px 18px;
    }
}


@media (min-width: 769px) {
    
}

@keyframes realtime-status-spin {
    to { transform: rotate(360deg); }
}


.message-poll .poll-badge {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .message.reply-swipe-active .message-bubble::before {
        left: -26px;
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .message.own.reply-swipe-active .message-bubble::before {
        right: -26px;
    }

    
}

@media (max-width: 768px) {
    .reaction-menu.mobile {
        width: auto;
        min-width: 0;
        max-width: calc(100vw - 24px);
        border-radius: 999px;
        overflow: visible;
        padding: 5px 7px;
    }

    .reaction-menu.mobile .reaction-menu-header,
    .reaction-menu.mobile .reaction-menu-footer {
        display: none;
    }

    .reaction-menu.mobile .reaction-list {
        flex-wrap: nowrap;
        gap: 2px;
        padding: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .reaction-menu.mobile .reaction-list::-webkit-scrollbar {
        display: none;
    }

    .reaction-menu.mobile .reaction-option {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 4px;
        font-size: 22px;
        transform: none;
    }

    .reaction-menu.mobile .reaction-menu-asset {
        width: 31px;
        height: 31px;
    }

    .reaction-menu.mobile .reaction-option.active {
        box-shadow: inset 0 0 0 2px var(--primary-color);
    }

    .message-menu.mobile {
        z-index: 10080;
        width: 200px;
        max-width: calc(100vw - 48px);
        max-height: calc(100dvh - var(--app-mobile-nav-height) - 24px);
        overflow-y: auto;
        min-width: 0;
        border-radius: 18px;
        padding: 5px;
    }

    .reaction-menu.mobile {
        z-index: 10090;
        max-height: calc(100dvh - var(--app-mobile-nav-height) - 24px);
        overflow-y: auto;
    }

    .chat-context-menu.mobile {
        z-index: 10080;
        width: min(244px, calc(100vw - 24px));
        max-height: calc(100dvh - var(--app-mobile-nav-height) - 24px);
        overflow-y: auto;
        border-radius: 18px;
        padding: 6px;
    }

    .chat-context-menu.mobile .chat-context-menu-item {
        min-height: 44px;
        padding: 10px 11px;
    }

    .message-menu.mobile .message-menu-header {
        padding: 8px 10px 10px;
        border-bottom-color: var(--border-light);
    }

    .message-menu.mobile .message-menu-header span {
        max-width: 132px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .message-menu.mobile .message-menu-actions {
        gap: 2px;
        padding-top: 4px;
    }

    .message-menu.mobile .message-menu-item {
        min-height: 40px;
        padding: 9px 10px;
        border-radius: 13px;
        font-size: 13.5px;
        gap: 10px;
    }

    .message-menu.mobile .message-menu-item i {
        width: 18px;
    }
}

.chat-header {
    position: relative;
    z-index: 80;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    min-width: 0;
    min-height: 60px;
    gap: 10px;
}

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

.chat-header .chat-details {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1px 6px;
    row-gap: 1px;
    overflow: hidden;
}

.chat-header .chat-details h3 {
    min-width: 0;
    max-width: 100%;
    display: block;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-header .chat-details:has(.chat-header-role-badge) h3,
.chat-header .chat-details:has(.chat-header-security-badge) h3 {
    max-width: calc(100% - 24px);
}

.chat-header .chat-details:has(.chat-header-role-badge):has(.chat-header-security-badge) h3 {
    max-width: calc(100% - 48px);
}

.chat-header .chat-header-role-badge {
    flex: 0 0 auto;
    min-width: 14px;
    display: inline-flex;
    align-items: center;
}

.chat-header .chat-header-security-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 2px;
    border-radius: 50%;
    color: #256f4a;
    background: color-mix(in srgb, #5ed18a 18%, transparent);
    border: 1px solid color-mix(in srgb, #5ed18a 40%, transparent);
    font-size: 9px;
}

.chat-header .chat-status {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-header .chat-actions {
    flex: 0 0 auto;
    min-width: max-content;
    margin-left: auto;
}

.chat-messages-container {
    position: relative;
}

.typing-indicator {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
    width: 100%;
    min-height: 22px;
    max-width: none;
    margin: -2px 0 0;
    padding: 0 24px 6px;
    box-sizing: border-box;
    z-index: 50;
    gap: 0;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: color-mix(in srgb, var(--text-secondary) 78%, transparent);
}

.typing-indicator.active {
    display: flex !important;
}

.chat-messages-container:has(.typing-indicator.active) .chat-messages {
    padding-bottom: 12px;
}

.typing-content {
    max-width: min(420px, 100%);
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.typing-text {
    color: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    text-shadow: none;
}

.typing-text strong {
    color: color-mix(in srgb, var(--primary-color) 82%, var(--text-secondary));
    font-weight: 800;
}

.typing-dots {
    display: none;
}

body.is-chats-panel .chat-area-full .chat-header {
    display: flex !important;
    visibility: visible;
    opacity: 1;
}

@media (max-width: 768px) {
    .chat-header {
        padding: 8px 10px;
        gap: 6px;
    }

    .chat-header .chat-info {
        gap: 8px;
        overflow: hidden;
    }

    .chat-header .chat-avatar-container {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .chat-header #back-to-list-btn {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        min-width: 34px;
    }

    .chat-header .chat-details {
        flex: 1 1 auto;
        column-gap: 4px;
    }

    .chat-header .chat-details h3 {
        font-size: 15px;
        line-height: 1.15;
    }

    .chat-header .chat-status {
        font-size: 11.5px;
        line-height: 1.2;
    }

    .chat-header .chat-actions {
        gap: 3px;
    }

    .chat-header .chat-action-btn {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        min-width: 34px;
        font-size: 13px;
    }

    .typing-indicator {
        padding: 0 14px 5px;
        min-height: 20px;
        margin-top: -1px;
    }

    .typing-content {
        max-width: calc(100vw - 32px);
    }

    .typing-text {
        font-size: 12px;
    }

    .message-reply-preview {
        max-width: min(292px, 100%);
        padding: 6px 8px;
        border-radius: 12px;
    }

    .reply-preview-avatar {
        width: 22px;
        height: 22px;
    }

    .reply-preview-content {
        max-width: min(230px, calc(100vw - 126px));
    }

    .chat-item {
        margin: 2px 6px;
        border-radius: 13px;
    }
}

@media (max-width: 380px) {
    .chat-header {
        padding-inline: 8px;
        gap: 4px;
    }

    .chat-header .chat-info {
        gap: 6px;
    }

    .chat-header .chat-avatar-container {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .chat-header #back-to-list-btn,
    .chat-header .chat-action-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        flex-basis: 32px;
    }

    .chat-header .chat-actions {
        gap: 2px;
    }

    .chat-header .chat-details h3 {
        font-size: 14px;
    }

    .chat-header .chat-status {
        font-size: 11px;
    }
}

/* Pinned overlay refinements */
.chat-messages-container.has-pinned-message {
    position: relative;
}

.chat-messages-container.has-pinned-message .chat-messages {
    padding-top: calc(20px + var(--pinned-message-height, 78px));
}

.chat-messages-container > .pinned-message-bar {
    position: absolute;
    top: 10px;
    left: 14px;
    right: 14px;
    margin: 0;
    z-index: 95;
    pointer-events: auto;
}

.chat-messages-container > .pinned-message-bar::before {
    content: "";
    position: absolute;
    inset: -10px -14px;
    z-index: -1;
    background: linear-gradient(180deg, var(--bg-primary) 0%, color-mix(in srgb, var(--bg-primary) 82%, transparent) 70%, transparent 100%);
    pointer-events: none;
}

/* Inline chat video previews */
.message-video,
.message-video-list {
    width: 100%;
    max-width: min(460px, 78vw);
}

.message-video-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.message-video {
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}

.chat-video {
    display: block;
    width: 100%;
    max-height: 440px;
    background: #000;
    border-radius: 16px 16px 0 0;
}

.video-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    color: var(--text-muted);
    font-size: 12px;
}

.video-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.video-download-btn {
    border: 0;
    background: transparent;
    color: var(--primary-color);
    cursor: pointer;
    padding: 4px;
}


/* Fix emoji dock preview visibility and composer/message colors */
.chat-emoji-option:not(.is-loading-preview):not(.is-preview-failed) .chat-emoji-still-preview {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.chat-emoji-option.is-loading-preview .chat-emoji-still-preview,
.chat-emoji-option.is-preview-failed .chat-emoji-still-preview {
    opacity: 0 !important;
}

.chat-emoji-option.is-loading-preview .chat-emoji-static-preview {
    opacity: 1;
}

.chat-emoji-option:not(.is-loading-preview) .chat-emoji-static-preview {
    opacity: 0;
}

.message.own .message-text,
.message.own .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    color: #0f172a !important;
}

.message.own .message-text a {
    color: #0645ad !important;
}

/* ===== GGdep readability fix: own message text/time follow theme ===== */
:root {
    --ggdep-own-message-text: #f8fafc;
    --ggdep-own-message-time: rgba(248, 250, 252, 0.74);
    --ggdep-own-message-link: #d8f3ff;
    --ggdep-own-message-code-bg: rgba(255, 255, 255, 0.10);
}

@media (prefers-color-scheme: light) {
    :root:not(.theme-dark) {
        --ggdep-own-message-text: #0f172a;
        --ggdep-own-message-time: rgba(15, 23, 42, 0.58);
        --ggdep-own-message-link: #0645ad;
        --ggdep-own-message-code-bg: rgba(15, 23, 42, 0.06);
    }
}

html.theme-light {
    --ggdep-own-message-text: #0f172a;
    --ggdep-own-message-time: rgba(15, 23, 42, 0.58);
    --ggdep-own-message-link: #0645ad;
    --ggdep-own-message-code-bg: rgba(15, 23, 42, 0.06);
}

html.theme-dark {
    --ggdep-own-message-text: #f8fafc;
    --ggdep-own-message-time: rgba(248, 250, 252, 0.74);
    --ggdep-own-message-link: #d8f3ff;
    --ggdep-own-message-code-bg: rgba(255, 255, 255, 0.10);
}

.message.own .message-text,
.message.own .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text,
.message.own .message-caption,
.message.own .voice-transcript {
    color: var(--ggdep-own-message-text) !important;
}

.message.own .message-text a,
.message.own .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text a,
.message.own .message-caption a,
.message.own .voice-transcript a {
    color: var(--ggdep-own-message-link) !important;
}

.message.own .message-time,
.message.own .message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-time,
.message.own .message-edited,
.message.own .voice-duration,
.message.own .voice-time-separator {
    color: var(--ggdep-own-message-time) !important;
}

.message.own .message-text code,
.message.own .message-text pre {
    background: var(--ggdep-own-message-code-bg) !important;
    color: var(--ggdep-own-message-text) !important;
}


/* Mobile gesture containment: swipes inside chat popovers/modals must not open the navigation drawer. */
.chat-composer-popover,
.chat-emoji-dock,
.chat-attach-popover,
.message-menu,
.reaction-menu,
.chat-context-menu,
.modal,
.modal-content {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Emoji dock no longer has a search field; keep spacing compact. */
.chat-emoji-dock .chat-composer-popover-header + .chat-emoji-section-title {
    margin-top: 10px;
}

/* Stage40: GIF tab and stronger inline video player */
.chat-emoji-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 0 10px;
}

.chat-emoji-tab {
    flex: 1;
    border: 0;
    border-radius: 12px;
    padding: 9px 12px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 800;
    cursor: pointer;
}

.chat-emoji-tab.active {
    background: var(--primary-color);
    color: #fff;
}

.chat-emoji-tab-panel {
    display: none;
}

.chat-emoji-tab-panel.active {
    display: block;
}

.chat-emoji-dock {
    max-height: min(440px, calc(100dvh - 150px));
}

.chat-emoji-search-wrap {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
    border-radius: 13px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.chat-emoji-search-input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    background: transparent;
    font: inherit;
}

.chat-emoji-pack-navigation {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 4px;
    margin: 0 -2px 8px;
}

.chat-emoji-pack-scroll {
    width: 30px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
    cursor: pointer;
    transition: color .16s ease, background .16s ease, opacity .16s ease;
}

.chat-emoji-pack-scroll:hover:not(:disabled) {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 13%, var(--bg-secondary));
}

.chat-emoji-pack-scroll:disabled {
    opacity: .28;
    cursor: default;
}

.chat-emoji-pack-strip {
    display: flex;
    gap: 5px;
    margin: 0;
    padding: 1px 2px 5px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.chat-emoji-pack-strip::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .chat-emoji-pack-navigation {
        display: block;
        margin: 0 -2px 8px;
    }

    .chat-emoji-pack-scroll {
        display: none;
    }
}

.chat-emoji-pack-tab {
    flex: 0 0 58px;
    min-width: 0;
    height: 54px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px;
    overflow: hidden;
    scroll-snap-align: start;
    border: 0;
    border-radius: 13px;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
}

.chat-emoji-pack-tab img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.chat-emoji-pack-tab i {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.chat-emoji-pack-tab span {
    max-width: 100%;
    overflow: hidden;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-emoji-pack-tab .chat-emoji-pack-symbol {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-secondary));
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.chat-emoji-pack-tab:hover,
.chat-emoji-pack-tab.active {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 13%, transparent);
}

.chat-emoji-grid-all {
    display: block;
}

.chat-emoji-grid-all.is-virtualized {
    position: relative;
    contain: layout style;
    content-visibility: visible;
}

.chat-emoji-virtual-title,
.chat-emoji-virtual-row {
    position: absolute;
    left: 0;
    right: 2px;
    margin: 0;
}

.chat-emoji-virtual-title {
    display: flex;
    align-items: center;
    padding: 0 7px;
}

.chat-emoji-pack-section {
    content-visibility: auto;
    contain-intrinsic-size: 78px;
}

.chat-emoji-pack-section + .chat-emoji-pack-section {
    margin-top: 8px;
}

.chat-emoji-pack-section .chat-emoji-section-title {
    position: sticky;
    top: 49px;
    z-index: 2;
    width: fit-content;
    margin-left: 3px;
    padding: 4px 7px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.chat-emoji-empty {
    min-height: 112px;
    display: grid;
    place-items: center;
    padding: 20px;
    color: var(--text-muted);
    text-align: center;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 768px) {
    .chat-emoji-dock {
        max-height: min(56dvh, 440px);
    }

    .chat-emoji-pack-tab {
        flex-basis: 52px;
        height: 50px;
    }

    .chat-emoji-pack-tab img,
    .chat-emoji-pack-tab i {
        width: 27px;
        height: 27px;
    }
}

.chat-gif-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 14px;
    padding: 9px 12px;
    margin: 2px 0 10px;
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.chat-gif-search-input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
}

.chat-gif-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    min-height: 120px;
}

.chat-gif-option {
    border: 0;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-secondary);
    cursor: pointer;
    aspect-ratio: 1.35 / 1;
}

.chat-gif-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-gif-empty {
    grid-column: 1 / -1;
    padding: 18px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.chat-gif-load-more {
    width: 100%;
    margin-top: 10px;
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 800;
    cursor: pointer;
}

.message-gif {
    width: min(380px, calc(100vw - 104px));
    max-width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
}

.message-gif-media {
    position: relative;
    width: 100%;
    max-height: 360px;
    aspect-ratio: var(--gif-aspect-ratio, 1 / 1);
    overflow: hidden;
    background: #000;
    isolation: isolate;
}

.chat-gif-image {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
    opacity: 1;
    transition: opacity 220ms ease;
}

.message-gif-media:not(.is-media-ready):not(.is-media-error) .chat-gif-image {
    opacity: 0;
}

.message-gif-media.media-placeholder::before {
    content: "GIF";
    font-family: inherit;
    font-size: clamp(18px, 6vw, 30px);
    font-weight: 900;
    letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
    .chat-gif-image {
        transition: none;
    }
}

.gif-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    color: var(--text-muted);
    font-size: 12px;
}

.gif-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.message-video,
.message-video-list {
    max-width: min(520px, 82vw);
}

.chat-video {
    min-height: 190px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .chat-gif-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .message-gif,
    .message-video,
    .message-video-list {
        max-width: 86vw;
    }
    .chat-video {
        min-height: 160px;
    }
}

/* Stage55: compact rich media in chat info panel */
.chat-info-media-thumb {
    position: relative;
    border: 0;
    padding: 0;
    color: var(--text-primary);
    text-align: left;
}

.chat-info-media-thumb video,
.chat-info-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

.chat-info-media-thumb.chat-media-thumb-video,
.chat-info-media-thumb.chat-media-thumb-gif {
    display: flex;
    flex-direction: column;
    min-height: 126px;
    aspect-ratio: auto;
}

.chat-info-media-thumb.chat-media-thumb-video video,
.chat-info-media-thumb.chat-media-thumb-gif img {
    height: 94px;
    min-height: 94px;
}

.chat-info-media-thumb span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 7px 6px;
    color: #fff;
    font-size: 10px;
    background: linear-gradient(to top, rgba(0,0,0,.68), transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-info-file-row.chat-media-voice-row {
    align-items: flex-start;
}

.chat-info-file-row.chat-media-voice-row audio {
    width: 100%;
    max-width: 100%;
    margin-top: 6px;
}


@media (max-width: 768px) {


}

@media (max-width: 420px) {
    
    
    
}

/* Stage56.6: clickable device IPs in bot/chat messages */
.chat-link.device-ip-link,
.device-ip-link {
    font-weight: 700;
    white-space: nowrap;
}


/* Modern navigation shell: compact app rail on desktop, bottom tabs on mobile. */
:root {
    --app-nav-width: 88px;
    --app-mobile-safe-bottom: 0px;
    --app-mobile-nav-height: 70px;
    --app-nav-glass-bg: color-mix(in srgb, var(--bg-secondary) 64%, transparent);
    --app-nav-glass-bg-strong: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
}

.sidebar.app-navigation,
.sidebar.app-navigation.collapsed {
    width: var(--app-nav-width);
    padding: 12px 8px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 82%, transparent), color-mix(in srgb, var(--bg-primary) 78%, transparent));
    border-right: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: visible;
}

.sidebar.app-navigation .logo,
.sidebar.app-navigation .sidebar-toggle-btn,
.sidebar.app-navigation .swipe-indicator {
    display: none !important;
}

.main-content,
.main-content.sidebar-collapsed {
    margin-left: var(--app-nav-width);
}

.sidebar.app-navigation .nav-menu {
    width: 100%;
    padding: 60px 0;
    gap: 8px;
    overflow: visible;
}

.sidebar.app-navigation .nav-item,
.sidebar.app-navigation.collapsed .nav-item {
    width: 100%;
    min-height: 64px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 16px;
    color: var(--text-secondary);
    text-align: center;
    background: transparent;
}

.sidebar.app-navigation .nav-item:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.sidebar.app-navigation .nav-item.active {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 16%, transparent), color-mix(in srgb, var(--primary-color) 8%, transparent));
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 34%, transparent);
}

.sidebar.app-navigation .nav-item.active::before {
    display: none;
}

.sidebar.app-navigation .nav-item i,
.sidebar.app-navigation.collapsed .nav-item i {
    width: auto;
    font-size: 19px;
    line-height: 1;
    color: inherit;
}

.sidebar.app-navigation .nav-item span:not(.badge),
.sidebar.app-navigation.collapsed .nav-item span:not(.badge) {
    display: block;
    flex: 0 0 auto;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar.app-navigation .badge,
.sidebar.app-navigation.collapsed .badge {
    position: absolute;
    top: 6px;
    right: 9px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid color-mix(in srgb, var(--bg-secondary) 82%, transparent);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--danger-color), color-mix(in srgb, var(--primary-color) 52%, var(--danger-color)));
    box-shadow: 0 8px 18px rgba(255, 59, 48, 0.24);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
}

.sidebar.app-navigation .badge[hidden],
.sidebar.app-navigation.collapsed .badge[hidden] {
    display: none !important;
}

.sidebar.app-navigation .badge.has-count,
.sidebar.app-navigation.collapsed .badge.has-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar.app-navigation .nav-item:has(.badge.has-count) i {
    color: var(--primary-color);
}

.sidebar.app-navigation .user-profile,
.sidebar.app-navigation.collapsed .user-profile {
    position: relative;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 0 2px;
    margin-top: auto;
    background: transparent;
    border-top: 0;
}

.sidebar.app-navigation .user-profile::before,
.sidebar.app-navigation.collapsed .user-profile::before {
    content: "";
    width: 42px;
    height: 1px;
    margin-bottom: 4px;
    background: color-mix(in srgb, var(--border-color) 62%, transparent);
}

.sidebar.app-navigation .user-info,
.sidebar.app-navigation.collapsed .user-info {
    display: none;
}

.sidebar.app-navigation .user-avatar,
.sidebar.app-navigation.collapsed .user-avatar {
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-tertiary) 72%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 74%, transparent);
}

.sidebar.app-navigation .user-avatar img,
.sidebar.app-navigation.collapsed .user-avatar img {
    width: 42px;
    height: 42px;
    margin: 2px;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.sidebar.app-navigation .user-avatar.with-status .user-status,
.sidebar.app-navigation.collapsed .user-avatar.with-status .user-status {
    right: -2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 3px solid color-mix(in srgb, var(--bg-secondary) 86%, transparent);
    border-radius: 999px;
    background: var(--text-muted);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-primary) 42%, transparent);
}

.sidebar.app-navigation .user-avatar.with-status .user-status.online,
.sidebar.app-navigation.collapsed .user-avatar.with-status .user-status.online {
    background: var(--success-color);
}

.sidebar.app-navigation .user-avatar.with-status .user-status.offline,
.sidebar.app-navigation.collapsed .user-avatar.with-status .user-status.offline {
    background: var(--text-muted);
}

.sidebar.app-navigation .logout-form,
.sidebar.app-navigation.collapsed .logout-form {
    display: flex;
    margin: 0;
}

.sidebar.app-navigation .logout-btn,
.sidebar.app-navigation.collapsed .logout-btn {
    display: inline-flex;
    width: 36px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: var(--text-muted);
    box-shadow: none;
}

.sidebar.app-navigation .logout-btn:hover,
.sidebar.app-navigation.collapsed .logout-btn:hover {
    background: color-mix(in srgb, var(--danger-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--danger-color) 28%, transparent);
    color: var(--danger-color);
    transform: translateY(-1px);
}

#mobile-menu-btn {
    display: none !important;
}

body.is-chats-panel .main-content {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

body.is-chats-panel .content-area {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: hidden;
}

body.is-chats-panel .chat-container {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

body.is-chats-panel .chat-list-container,
body.is-chats-panel .chat-area-full,
body.is-chats-panel .chat-area-placeholder,
body.is-chats-panel .chat-info-panel {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

body.is-chats-panel .chat-list-container {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.is-chats-panel .chat-list-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    contain: layout paint;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;            
    -ms-overflow-style: none;         
}
body.is-chats-panel .chat-list-content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

body.is-chats-panel .chat-area-full {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

body.is-chats-panel .chat-header,
body.is-chats-panel .chat-input-container {
    flex: 0 0 auto;
}

body.is-chats-panel .chat-messages-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

body.is-chats-panel .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body.is-chats-panel .chat-info-panel {
    display: flex;
    flex-direction: column;
}

body.is-chats-panel .chat-info-panel-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
}



@media (max-width: 1200px) and (min-width: 1025px) {
    body.is-chats-panel .chat-list-container {
        flex-basis: 320px;
    }
}

@media (max-width: 1024px) {
    .sidebar.app-navigation,
    .sidebar.app-navigation.collapsed,
    .sidebar.app-navigation.mobile-open {
        position: fixed;
        top: auto;
        right: 12px;
        bottom: 0;
        left: 12px;
        width: auto;
        height: 64px;
        padding: 6px;
        flex-direction: row;
        transform: none !important;
        border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
        border-radius: 22px;
        background:
            linear-gradient(180deg, var(--app-nav-glass-bg-strong), var(--app-nav-glass-bg));
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(22px) saturate(1.15);
        -webkit-backdrop-filter: blur(22px) saturate(1.15);
        transition: transform 180ms ease, opacity 180ms ease, visibility 180ms ease;
        z-index: 1200;
    }

    .main-content,
    .main-content.sidebar-collapsed {
        margin-left: 0;
    }

    .content-area {
        padding-bottom: var(--app-mobile-nav-height);
    }

    body.is-chats-panel .content-area {
        padding-bottom: 0;
    }

    body.is-chats-panel .chat-container {
        height: 100%;
    }

    body.is-chats-panel .chat-list-container {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }

    body.is-chats-panel .chat-area-full {
        height: 100vh;
        height: 100dvh;
        max-height: none;
    }

    body.is-chats-panel .chat-area-full.mobile-visible {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        overflow: hidden !important;
        z-index: 360 !important;
    }

    html.ggdep-keyboard-open body.is-chats-panel .chat-area-full.mobile-visible,
    body.is-chats-panel .chat-area-full.mobile-visible.is-keyboard-open {
        top: var(--ggdep-visual-viewport-top, 0px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        height: var(--ggdep-visual-viewport-height, 100dvh) !important;
        max-height: var(--ggdep-visual-viewport-height, 100dvh) !important;
    }

    body.is-chats-panel .chat-area-full.mobile-visible .chat-header {
        position: relative !important;
        top: auto !important;
        z-index: 3 !important;
        display: flex !important;
        flex: 0 0 auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 60px;
    }

    body.is-chats-panel .chat-area-full.mobile-visible #back-to-list-btn {
        display: inline-flex !important;
    }

    body.is-chats-panel:not(.app-nav-hidden-for-chat) .chat-list-content {
        padding-bottom: calc(var(--app-mobile-nav-height) + 8px);
    }


    .sidebar-overlay,
    .sidebar.app-navigation .swipe-indicator {
        display: none !important;
    }

    .sidebar.app-navigation .nav-menu {
        flex: 1;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        padding: 0;
        overflow: visible;
    }

    .sidebar.app-navigation .nav-item,
    .sidebar.app-navigation.collapsed .nav-item {
        min-width: 0;
        min-height: 52px;
        height: 52px;
        flex: 1 1 0;
        gap: 4px;
        padding: 6px 2px;
        border-radius: 16px;
    }

    .sidebar.app-navigation .nav-item.active {
        background: color-mix(in srgb, var(--primary-color) 15%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 28%, transparent);
    }

    .sidebar.app-navigation .nav-item i,
    .sidebar.app-navigation.collapsed .nav-item i {
        font-size: 18px;
    }

    .sidebar.app-navigation .nav-item span:not(.badge),
    .sidebar.app-navigation.collapsed .nav-item span:not(.badge) {
        font-size: 10px;
    }

    .sidebar.app-navigation .badge,
    .sidebar.app-navigation.collapsed .badge {
        top: 4px;
        right: 50%;
        transform: translateX(20px);
        border-color: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    }

    .sidebar.app-navigation .user-profile,
    .sidebar.app-navigation.collapsed .user-profile {
        display: none;
    }

    .profile-logout-section {
        display: block;
        padding: 0 24px 24px;
        margin-top: 8px;
    }
}

@media (max-width: 480px) {
    .sidebar.app-navigation,
    .sidebar.app-navigation.collapsed,
    .sidebar.app-navigation.mobile-open {
        right: 8px;
        bottom: 0;
        left: 8px;
        height: 62px;
        border-radius: 20px;
    }

    .sidebar.app-navigation .nav-menu {
        gap: 2px;
    }

    .sidebar.app-navigation .nav-item,
    .sidebar.app-navigation.collapsed .nav-item {
        min-height: 50px;
        height: 50px;
        border-radius: 14px;
    }

    .sidebar.app-navigation .nav-item i,
    .sidebar.app-navigation.collapsed .nav-item i {
        font-size: 17px;
    }

    .sidebar.app-navigation .nav-item span:not(.badge),
    .sidebar.app-navigation.collapsed .nav-item span:not(.badge) {
        font-size: 10px;
    }

    .profile-logout-section {
        padding: 0 16px 18px;
    }
}

@media (max-width: 380px) {
    .sidebar.app-navigation .nav-item span:not(.badge),
    .sidebar.app-navigation.collapsed .nav-item span:not(.badge) {
        display: none;
    }

    .sidebar.app-navigation .nav-item,
    .sidebar.app-navigation.collapsed .nav-item {
        gap: 0;
    }
}

/* Theme preferences: system by default, user override via html.theme-light/theme-dark. */
@media (prefers-color-scheme: light) {
    :root:not(.theme-dark) {
        color-scheme: light;
        --bg-primary: #f4f7f2;
        --bg-secondary: #ffffff;
        --bg-tertiary: #edf2ec;
        --card-background: var(--bg-secondary);
        --modal-bg: var(--bg-secondary);
        --bg-hover: rgba(30, 39, 33, 0.06);
        --bg-active: rgba(35, 149, 8, 0.12);
        --text-primary: #18201b;
        --text-secondary: #5f6b62;
        --text-muted: #7e8a82;
        --border-color: rgba(30, 39, 33, 0.12);
        --border-light: rgba(30, 39, 33, 0.07);
        --shadow-sm: 0 2px 8px rgba(35, 59, 39, 0.08);
        --shadow-md: 0 4px 16px rgba(35, 59, 39, 0.12);
        --shadow-lg: 0 8px 32px rgba(35, 59, 39, 0.16);
    }
}

html.theme-light {
    color-scheme: light;
    --bg-primary: #f4f7f2;
    --bg-secondary: #ffffff;
    --bg-tertiary: #edf2ec;
    --card-background: var(--bg-secondary);
    --modal-bg: var(--bg-secondary);
    --bg-hover: rgba(30, 39, 33, 0.06);
    --bg-active: rgba(35, 149, 8, 0.12);
    --text-primary: #18201b;
    --text-secondary: #5f6b62;
    --text-muted: #7e8a82;
    --border-color: rgba(30, 39, 33, 0.12);
    --border-light: rgba(30, 39, 33, 0.07);
    --shadow-sm: 0 2px 8px rgba(35, 59, 39, 0.08);
    --shadow-md: 0 4px 16px rgba(35, 59, 39, 0.12);
    --shadow-lg: 0 8px 32px rgba(35, 59, 39, 0.16);
}

html.theme-dark {
    color-scheme: dark;
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2d2d2d;
    --card-background: var(--bg-secondary);
    --modal-bg: var(--bg-secondary);
    --bg-hover: rgba(255, 255, 255, 0.08);
    --bg-active: rgba(255, 255, 255, 0.12);
    --text-primary: #ffffff;
    --text-secondary: #8e8e93;
    --text-muted: #6c6c70;
    --border-color: rgba(255, 255, 255, 0.12);
    --border-light: rgba(255, 255, 255, 0.06);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

html.theme-dark .chat-input .input-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

html.theme-dark .chat-item-avatar img,
html.theme-dark .message-avatar img,
html.theme-dark .chat-avatar img {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 6px 16px rgba(0, 0, 0, 0.16);
}

.theme-choice-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.theme-choice-btn {
    min-height: 76px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.theme-choice-btn i {
    font-size: 18px;
}

.theme-choice-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.theme-choice-btn.active {
    background: color-mix(in srgb, var(--primary-color) 14%, var(--bg-secondary));
    border-color: color-mix(in srgb, var(--primary-color) 44%, transparent);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

@media (max-width: 560px) {
    .theme-choice-group {
        grid-template-columns: 1fr;
    }

    .theme-choice-btn {
        min-height: 48px;
        flex-direction: row;
    }
}

/* Chat media footer alignment: files, voice notes, and round video notes */
.file-message-bubble,
.voice-message-bubble,
.video-note-message-bubble {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    overflow: visible !important;
}

.message.own .file-message-bubble,
.message.own .voice-message-bubble {
    align-items: flex-end;
}

.video-note-message-bubble,
.message.own .video-note-message-bubble {
    align-items: center;
}

.voice-message-bubble .voice-message {
    padding-bottom: 10px !important;
}

.file-message-bubble .message-time,
.voice-message-bubble .message-time,
.video-note-message-bubble .message-time {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: auto !important;
    max-width: 100% !important;
    margin: 6px 8px 0 0 !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--bg-secondary) 72%, transparent) !important;
    color: var(--text-muted) !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.message.own .file-message-bubble .message-time,
.message.own .voice-message-bubble .message-time {
    margin-right: 8px !important;
    color: var(--ggdep-own-message-time) !important;
}

.video-note-message-bubble .message-time,
.message.own .video-note-message-bubble .message-time {
    align-self: center;
    margin: 8px auto 0 !important;
    background: color-mix(in srgb, var(--bg-secondary) 76%, transparent) !important;
}

.file-message-bubble .message-reactions,
.voice-message-bubble .message-reactions,
.video-note-message-bubble .message-reactions {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 3;
    align-self: flex-start;
    justify-content: flex-start;
    max-width: 100%;
    margin: 6px 0 0 8px !important;
    transform: none !important;
}

.message.own .file-message-bubble .message-reactions,
.message.own .voice-message-bubble .message-reactions {
    align-self: flex-end;
    justify-content: flex-end;
    margin: 6px 8px 0 0 !important;
}

.video-note-message-bubble .message-reactions,
.message.own .video-note-message-bubble .message-reactions {
    align-self: center;
    justify-content: center;
    margin: 6px auto 0 !important;
}

.video-note-message.is-loading .video-note-play-btn {
    opacity: 1;
    pointer-events: auto;
}

.chat-video[data-lazy-src]:not([data-lazy-loaded="true"]) {
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.10), transparent 34%),
        #000;
}

@media (max-width: 768px) {
    .voice-message-bubble .voice-message {
        padding-bottom: 9px !important;
    }

    .file-message-bubble .message-time,
    .voice-message-bubble .message-time {
        margin-top: 5px !important;
    }
}
/* Installed PWA Web Push onboarding (including iOS Home Screen apps). */
.pwa-push-prompt {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2200;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 11px;
    width: min(520px, calc(100vw - 36px));
    padding: 13px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    color: var(--text-primary);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .34);
    backdrop-filter: blur(22px);
}
.pwa-push-prompt-icon { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 13px; background: color-mix(in srgb, var(--primary-color) 18%, var(--bg-tertiary)); color: var(--primary-color); }
.pwa-push-prompt strong, .pwa-push-prompt span { display: block; }
.pwa-push-prompt strong { font-size: 13px; }
.pwa-push-prompt span { margin-top: 3px; color: var(--text-secondary); font-size: 11px; line-height: 1.35; }
.pwa-push-prompt > button:not(.pwa-push-close) { min-height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--primary-color); color: #fff; font-weight: 700; cursor: pointer; }
.pwa-push-close { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--text-muted); font-size: 22px; cursor: pointer; }

@media (max-width: 600px) {
    .pwa-push-prompt { right: 10px; bottom: calc(var(--app-mobile-nav-height, 70px) + 10px); left: 10px; grid-template-columns: 38px minmax(0, 1fr) auto; width: auto; }
    .pwa-push-prompt-icon { width: 38px; height: 38px; }
    .pwa-push-close { position: absolute; top: 4px; right: 5px; }
    .pwa-push-prompt > button:not(.pwa-push-close) { padding: 0 11px; }
}

/* ========================================================================== */
/* GGdep chat polish: compact messenger hierarchy, July 2026           */
/* ========================================================================== */

:root {
    --ggdep-chat-list-width: 352px;
    --ggdep-chat-header-height: 66px;
    --ggdep-chat-stream-width: 980px;
    --ggdep-chat-composer-width: 920px;
    --ggdep-chat-glass: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    --ggdep-chat-line: color-mix(in srgb, var(--border-color) 78%, transparent);
    --ggdep-chat-hover: color-mix(in srgb, var(--primary-color) 8%, var(--bg-tertiary));
    --ggdep-chat-active: color-mix(in srgb, var(--primary-color) 16%, var(--bg-secondary));
    --ggdep-chat-active-line: color-mix(in srgb, var(--primary-color) 42%, transparent);
    --ggdep-chat-wallpaper-dot: color-mix(in srgb, var(--primary-color) 5%, transparent);
    --ggdep-chat-wallpaper-glow: color-mix(in srgb, var(--primary-color) 7%, transparent);
    --ggdep-chat-wallpaper-image: none;
    --ggdep-chat-wallpaper-overlay: rgba(5, 8, 6, .58);
    --ggdep-chat-shadow: 0 18px 45px rgba(0, 0, 0, .12);
}

.theme-light,
[data-theme="light"] {
    --ggdep-chat-glass: color-mix(in srgb, #ffffff 90%, transparent);
    --ggdep-chat-hover: color-mix(in srgb, var(--primary-color) 7%, #ffffff);
    --ggdep-chat-active: color-mix(in srgb, var(--primary-color) 13%, #ffffff);
    --ggdep-chat-wallpaper-dot: color-mix(in srgb, var(--primary-color) 4%, transparent);
    --ggdep-chat-wallpaper-glow: color-mix(in srgb, var(--primary-color) 6%, transparent);
    --ggdep-chat-wallpaper-overlay: rgba(249, 250, 247, .42);
    --ggdep-chat-shadow: 0 18px 45px rgba(26, 52, 37, .09);
}

.theme-dark,
[data-theme="dark"] {
    --ggdep-chat-wallpaper-overlay: rgba(5, 8, 6, .58);
}

/* Left column */
.chat-list-container {
    width: var(--ggdep-chat-list-width);
    min-width: var(--ggdep-chat-list-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--ggdep-chat-line);
    box-shadow: 12px 0 35px rgba(0, 0, 0, .045);
}

.chat-list-header {
    min-height: var(--ggdep-chat-header-height);
    padding: 10px 14px 8px 18px;
    border-bottom: 0;
    background: var(--ggdep-chat-glass);
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.chat-list-header h3 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.chat-list-header .header-actions {
    gap: 5px;
}

.chat-list-header .quick-btn,
.chat-header .chat-action-btn,
.chat-header .mobile-menu-btn {
    width: 38px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--text-secondary);
    background: transparent;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.chat-list-header .quick-btn:hover,
.chat-header .chat-action-btn:hover,
.chat-header .mobile-menu-btn:hover {
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 18%, transparent);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    transform: translateY(-1px);
}

.chat-search {
    padding: 2px 12px 8px;
    background: var(--ggdep-chat-glass);
}

.chat-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 22px;
    background: color-mix(in srgb, var(--bg-tertiary) 82%, transparent);
    color: var(--text-muted);
    cursor: text;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.chat-search-field:focus-within {
    border-color: color-mix(in srgb, var(--primary-color) 58%, transparent);
    background: var(--bg-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 11%, transparent);
}

.chat-search-field > i {
    flex: 0 0 auto;
    font-size: 14px;
}

.chat-search-field .search-input {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    color: var(--text-primary);
    box-shadow: none !important;
    font-size: 14px;
}

.chat-list-filters {
    gap: 6px;
    padding: 3px 12px 9px;
    border-bottom: 1px solid var(--ggdep-chat-line);
    background: var(--ggdep-chat-glass);
    scrollbar-width: none;
}

.chat-list-filters::-webkit-scrollbar {
    display: none;
}

.chat-list-filter-btn {
    min-height: 32px;
    padding: 0 11px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
}

.chat-list-content {
    padding: 5px 0 12px;
}

.chat-item {
    min-height: 68px;
    margin: 2px 8px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 15px;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.chat-item:hover {
    background: var(--ggdep-chat-hover);
    transform: translateX(1px);
}

.chat-item.active {
    border-color: var(--ggdep-chat-active-line);
    background: var(--ggdep-chat-active);
    box-shadow: 0 7px 20px color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.chat-item.active::before {
    display: none;
}

.chat-item-avatar {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .11);
}

.chat-item-info {
    gap: 3px;
}

.chat-item-name .chat-item-title {
    font-size: 14px;
    font-weight: 760;
    letter-spacing: -.01em;
}

.chat-item-last-message {
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.35;
}

.chat-item-time {
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 650;
}

.chat-item-unread {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border: 2px solid var(--bg-secondary);
    border-radius: 10px;
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--primary-color) 30%, transparent);
    font-size: 10.5px;
    font-weight: 800;
}

.chat-item.has-unread:not(.active) {
    background: color-mix(in srgb, var(--primary-color) 5%, var(--bg-secondary));
}

.chat-item.has-unread:not(.active) .chat-item-title {
    color: var(--text-primary);
    font-weight: 850;
}

.chat-item.has-unread:not(.active) .chat-item-last-message {
    color: var(--text-primary);
    font-weight: 620;
}

.chat-item.has-unread:not(.active) .chat-item-time {
    color: var(--primary-color);
    font-weight: 750;
}

/* Conversation header and canvas */
.chat-header {
    min-height: var(--ggdep-chat-header-height);
    padding: 8px 14px 8px 16px;
    border-bottom: 1px solid var(--ggdep-chat-line);
    background: var(--ggdep-chat-glass);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .025), 0 8px 24px rgba(0, 0, 0, .035);
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.chat-header .chat-avatar {
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 24%, var(--border-color));
    box-shadow: 0 4px 14px rgba(0, 0, 0, .13);
}

.chat-header .chat-details h3 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.015em;
}

.chat-header .chat-status {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11.5px;
}

.chat-area-full {
    background-color: var(--chat-surface-bg);
    /* «Обычный» фон: чистый цвет текущей темы. Изображения включаются только
       соответствующим классом персонализации. */
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.chat-messages-container {
    background: transparent;
}

.chat-messages {
    padding: 18px clamp(14px, 3vw, 42px) 16px;
}

.chat-messages > .message,
.chat-messages > .date-divider,
.chat-messages > .unread-divider,
.chat-messages > .empty-state {
    width: 100%;
    max-width: var(--ggdep-chat-stream-width);
    margin-right: auto;
    margin-left: auto;
}

.message {
    margin-top: 7px;
}

.message.grouped {
    margin-top: -2px;
}

.message-content {
    max-width: min(72%, 650px);
}

.message-text {
    border: 1px solid color-mix(in srgb, var(--border-color) 54%, transparent);
    border-radius: 18px 18px 18px 6px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .07);
}

.message.own .message-text {
    border-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
    border-radius: 18px 18px 6px 18px;
    box-shadow: 0 3px 14px color-mix(in srgb, var(--primary-color) 9%, transparent);
}

.message.grouped:not(.group-head):not(.own) .message-text {
    border-top-left-radius: 7px;
}

.message.grouped:not(.group-head).own .message-text {
    border-top-right-radius: 7px;
}

.message:not(.group-tail):not(.own) .message-text {
    border-bottom-left-radius: 7px;
}

.message:not(.group-tail).own .message-text {
    border-bottom-right-radius: 7px;
}

.message-sender {
    margin: 0 8px 4px;
    font-size: 11.5px;
    font-weight: 800;
}

.message-time {
    opacity: .78;
    font-size: 10px;
    font-weight: 650;
}

.date-divider span,
.unread-divider span {
    border: 1px solid color-mix(in srgb, var(--border-color) 62%, transparent);
    background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Floating composer */
.chat-input-container {
    padding: 10px clamp(12px, 3vw, 38px) 12px;
    border-top: 0;
    background: transparent;
}

.chat-composer-popover {
    left: max(12px, calc((100% - var(--ggdep-chat-composer-width)) / 2 + 8px));
}

.message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble),
.message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text,
.message.own .message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble),
.message.own .message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    min-width: 148px;
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-time {
    max-width: calc(100% - 18px);
}

.chat-input {
    width: 100%;
    max-width: var(--ggdep-chat-composer-width);
    min-height: 54px;
    margin: 0 auto;
    padding: 5px 6px 5px 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    border-radius: 27px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    box-shadow: var(--ggdep-chat-shadow);
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
}

.chat-input:focus-within {
    border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
    box-shadow: var(--ggdep-chat-shadow), 0 0 0 3px color-mix(in srgb, var(--primary-color) 9%, transparent);
}

.chat-input .input-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--text-muted);
}

.chat-input .input-action-btn:hover {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.chat-input .message-input {
    min-height: 42px;
    padding: 10px 8px;
    line-height: 1.45;
}

.chat-input .send-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary-color) 32%, transparent);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.chat-input .send-button:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 9px 22px color-mix(in srgb, var(--primary-color) 38%, transparent);
    filter: saturate(1.08);
}

.chat-list-header button:focus-visible,
.chat-header button:focus-visible,
.chat-input button:focus-visible,
.chat-list-filter-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary-color) 34%, transparent);
    outline-offset: 2px;
}

@media (max-width: 1200px) {
    :root {
        --ggdep-chat-list-width: 330px;
    }
}

@media (max-width: 768px) {
    :root {
        --ggdep-chat-header-height: 58px;
    }

    .chat-list-container {
        width: 100%;
        min-width: 100%;
        border-right: 0;
        box-shadow: none;
    }

    .chat-list-header {
        min-height: 58px;
        padding: 7px 10px 5px 14px;
    }

    .chat-list-header h3 {
        font-size: 19px;
    }

    .chat-search {
        padding: 2px 10px 7px;
    }

    .chat-search-field {
        min-height: 40px;
    }

    .chat-list-filters {
        padding-right: 10px;
        padding-left: 10px;
    }

    .chat-item {
        min-height: 66px;
        margin-right: 5px;
        margin-left: 5px;
        padding: 8px 9px;
        border-radius: 14px;
    }

    .chat-header {
        min-height: 58px;
        padding: 6px 8px;
    }

    .chat-header .chat-avatar {
        width: 40px;
        height: 40px;
    }

    .chat-header .chat-action-btn,
    .chat-header .mobile-menu-btn {
        width: 38px;
        height: 38px;
    }

    .chat-messages {
        padding: 12px 9px 8px;
    }

    .message-content {
        max-width: 88%;
    }

    .message-text {
        border-radius: 17px 17px 17px 5px;
    }

    .message.own .message-text {
        border-radius: 17px 17px 5px 17px;
    }

    .chat-input-container {
        min-height: 0;
        background: transparent;
    }

    body.is-chats-panel .chat-area-full.mobile-visible .chat-input-container {
        bottom: auto;
        padding-bottom: 8px;
    }

    .chat-composer-popover {
        right: 7px !important;
        left: 7px !important;
        width: auto;
        max-width: none;
    }

    .message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble),
    .message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text,
    .message.own .message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble),
    .message.own .message-bubble.long-time-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
        min-width: 142px;
    }

    .chat-input {
        min-height: 50px;
        padding: 4px 4px 4px 5px;
        border-radius: 25px;
    }

    .chat-input .input-action-btn {
        width: 38px;
        height: 38px;
    }

    .chat-input .send-button {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .chat-input .message-input {
        min-height: 40px;
        padding: 9px 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-item,
    .chat-list-header .quick-btn,
    .chat-header .chat-action-btn,
    .chat-header .mobile-menu-btn,
    .chat-input .send-button {
        transition: none;
    }
}
/* Mobile controls should not flash a rectangular WebKit tap overlay. */
html {
    -webkit-tap-highlight-color: transparent;
}

@media (hover: none) and (pointer: coarse) {
    button,
    a,
    [role="button"],
    input[type="button"],
    input[type="submit"],
    .input-action-btn,
    .call-control-btn {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        touch-action: manipulation;
    }

    button:focus:not(:focus-visible),
    a:focus:not(:focus-visible),
    [role="button"]:focus:not(:focus-visible) {
        outline: none;
    }
}

/* ===== Account appearance and notification preferences ===== */
:root {
    --accent-rgb: 35, 149, 8;
    --user-font-scale: 1;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-primary);
}

body {
    font-size: calc(16px * var(--user-font-scale));
}

.message-bubble:not(.media-message-bubble):not(.voice-message-bubble) .message-text {
    font-size: calc(14.5px * var(--user-font-scale)) !important;
}

.chat-item-name,
.profile-container .form-control,
.message-input,
.nav-item span {
    font-size: calc(14px * var(--user-font-scale));
}

html[data-ui-density="compact"] .chat-item {
    min-height: 58px;
    padding-top: 7px;
    padding-bottom: 7px;
}

html[data-ui-density="compact"] .message {
    margin-bottom: 3px;
}

html[data-ui-density="compact"] .profile-section {
    padding: 16px;
}

html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

.profile-customization-section,
.profile-notification-section {
    overflow: hidden;
}

.profile-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.profile-section-heading h3 {
    margin: 0 0 5px;
}

.profile-section-heading p {
    margin: 0;
    max-width: 620px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.profile-settings-reset {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
}

.appearance-preview {
    display: grid;
    grid-template-columns: 76px 1fr;
    min-height: 174px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, var(--border-color));
    border-radius: 18px;
    background: var(--bg-primary);
    box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.appearance-preview-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    padding: 20px 14px;
    border-right: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.appearance-preview-sidebar i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--primary-color);
    color: #fff;
}

.appearance-preview-sidebar span {
    width: 30px;
    height: 5px;
    border-radius: 999px;
    background: var(--border-color);
}

.appearance-preview-sidebar span:first-of-type {
    background: var(--primary-color);
}

.appearance-preview-chat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 24px;
}

.appearance-preview-chat strong {
    color: var(--text-primary);
    font-size: 16px;
}

.appearance-preview-message {
    max-width: 430px;
    padding: 11px 14px;
    border-radius: 14px 14px 14px 5px;
    background: color-mix(in srgb, var(--primary-color) 18%, var(--bg-tertiary));
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.45;
}

.appearance-preview-chat button {
    min-height: 34px;
    padding: 0 15px;
    border: 0;
    border-radius: 10px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 750;
}

.profile-settings-form {
    display: grid;
    gap: 16px;
}

.profile-setting-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.profile-setting-copy,
.profile-setting-copy strong,
.profile-setting-copy span {
    display: block;
}

.profile-setting-copy span,
.profile-toggle-row small,
.notification-category-card small {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
}

.accent-color-picker {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.accent-swatch,
.accent-custom {
    position: relative;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    cursor: pointer;
}

.accent-swatch {
    border: 2px solid transparent;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.accent-swatch.active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--swatch) 28%, transparent);
}

.accent-custom {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.accent-custom input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.accent-custom.accent-custom-hex {
    width: 116px;
    flex-basis: 116px;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 6px;
    padding: 0 8px;
    overflow: visible;
}

.accent-custom.accent-custom-hex input {
    position: static;
    width: 100%;
    height: 30px;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    opacity: 1;
    background: transparent;
    color: var(--text-primary);
    cursor: text;
    font: 700 12px/1 var(--font-family);
    text-transform: uppercase;
}

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

.profile-setting-field > span {
    display: block;
    margin-bottom: 7px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.profile-font-scale {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-tertiary) 65%, transparent);
}

.profile-font-scale > span,
.profile-font-scale > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-font-scale output {
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
}

.profile-font-scale input {
    width: 100%;
    accent-color: var(--primary-color);
}

.profile-font-scale small { font-size: 11px; }
.profile-font-scale > div > strong { font-size: 17px; }

.profile-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 11px 13px;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-tertiary) 62%, transparent);
    cursor: pointer;
}

.profile-toggle-row > span {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-toggle-row > span > i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--primary-color);
}

.profile-toggle-row strong,
.profile-toggle-row small {
    display: block;
}

.profile-toggle-row > input,
.notification-category-card > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.profile-toggle-row > i {
    position: relative;
    width: 44px;
    height: 25px;
    flex: 0 0 44px;
    border-radius: 999px;
    background: var(--border-color);
    transition: .2s ease;
}

.profile-toggle-row > i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    transition: .2s ease;
}

.profile-toggle-row > input:checked + i { background: var(--primary-color); }
.profile-toggle-row > input:checked + i::after { transform: translateX(19px); }

.notification-master-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

.notification-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.notification-category-card {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr 20px;
    align-items: center;
    gap: 11px;
    min-height: 78px;
    padding: 13px;
    border: 1px solid var(--border-light);
    border-radius: 15px;
    background: color-mix(in srgb, var(--bg-tertiary) 58%, transparent);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.notification-category-card > i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.notification-category-card strong,
.notification-category-card small { display: block; }

.notification-category-card b {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
}

.notification-category-card > input:checked ~ b {
    border-color: var(--primary-color);
    background: var(--primary-color);
    box-shadow: inset 0 0 0 4px var(--bg-secondary);
}

.notification-category-card:has(input:checked) {
    border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 9%, var(--bg-tertiary));
}

.notification-category-card:has(input:checked) > i {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--primary-color);
}

@media (max-width: 700px) {
    .profile-section-heading,
    .profile-setting-block {
        align-items: stretch;
        flex-direction: column;
    }

    .accent-color-picker { justify-content: flex-start; }
    .profile-setting-grid,
    .notification-master-controls,
    .notification-category-grid { grid-template-columns: 1fr; }
    .appearance-preview { grid-template-columns: 54px 1fr; min-height: 150px; }
    .appearance-preview-sidebar { padding-inline: 8px; }
    .appearance-preview-chat { padding: 18px 14px; }
    .profile-toggle-row { min-height: 60px; }
}

/* ===== Calm navigation transitions between main sections =====
   Keep the animated container free of transforms. A transformed (or merely
   transform-promoted) ancestor becomes the containing block for fixed UI,
   which makes the mobile navigation and music player jump while switching
   sections. */

.content-area.panel-transition-leave {
    opacity: 0;
    pointer-events: none;
    transition: opacity 95ms ease;
}

.content-area.panel-transition-enter {
    animation: panel-section-enter 240ms cubic-bezier(.2, .76, .28, 1) both;
}

@keyframes panel-section-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 768px) {
    .content-area.panel-transition-enter {
        animation-duration: 210ms;
    }

}

@media (prefers-reduced-motion: reduce) {
    .content-area.panel-transition-leave,
    .content-area.panel-transition-enter {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }
}


/* ===== FIX: mobile reactions menu with 12+ reactions =====
   Причина бага: при 12 реакциях строка шире экрана, а мобильный список
   был горизонтально скроллимым, но не выровнен от начала. На части WebView
   первые элементы оказывались слева за пределами видимой области.
*/
@media (max-width: 768px) {
    .reaction-menu.mobile {
        width: max-content;
        max-width: calc(100vw - 24px);
        min-width: 0;
        overflow: hidden;
        padding: 5px 7px;
        box-sizing: border-box;
    }

    .reaction-menu.mobile .reaction-list {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 2px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .reaction-menu.mobile .reaction-list::-webkit-scrollbar {
        display: none;
    }

    .reaction-menu.mobile .reaction-option {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Expanded picker is a card; the compact quick row alone remains pill-shaped. */
    .reaction-menu.mobile.is-expanded {
        width: min(344px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
        max-height: min(76dvh, 470px);
        padding: 5px 7px 0;
        border-radius: 20px;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .reaction-menu.mobile.is-expanded .reaction-list {
        flex: 0 0 auto;
        border-radius: 14px;
    }

    .reaction-menu.mobile.is-expanded .reaction-all-picker {
        width: 100%;
        min-width: 0;
        padding: 8px 3px 10px;
        border-radius: 0 0 15px 15px;
        box-sizing: border-box;
    }

    .reaction-menu.mobile.is-expanded .reaction-all-grid {
        width: 100%;
        max-height: min(46dvh, 300px);
        overflow-x: hidden;
        overflow-y: auto;
    }
}

/* Music as chat attachment/publication */
.chat-attach-icon.music {
    background: linear-gradient(135deg, #ef476f, #7c3aed);
}

.file-preview-item.music-preview {
    border-color: color-mix(in srgb, #ef476f 42%, var(--border-color));
    background: color-mix(in srgb, var(--bg-primary) 82%, #ef476f 7%);
}

.music-preview-icon {
    color: #fff;
    background: linear-gradient(135deg, #ef476f, #7c3aed);
}

.file-preview-item.music-preview .preview-thumb {
    border-radius: 13px;
    object-fit: cover;
}

.chat-music-attach-modal {
    z-index: 10020;
}

.chat-music-attach-content {
    width: min(520px, calc(100vw - 28px));
    max-height: min(720px, calc(100vh - 40px));
}

.chat-music-picker-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.chat-music-picker-search i {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

.chat-music-picker-search input {
    padding-left: 40px;
}

.chat-music-picker-results {
    display: grid;
    gap: 8px;
    max-height: min(430px, 55vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.chat-music-picker-hint {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.35;
}

.chat-music-picker-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.chat-music-picker-row:hover {
    background: var(--bg-hover);
}

.chat-music-picker-art {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 13px;
    background: linear-gradient(135deg, #ef476f, #7c3aed);
    color: #fff;
}

.chat-music-picker-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-music-picker-copy {
    min-width: 0;
}

.chat-music-picker-copy strong,
.chat-music-picker-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-music-picker-copy small,
.chat-music-picker-row em,
.chat-music-picker-empty {
    color: var(--text-secondary);
}

.chat-music-picker-row em {
    font-style: normal;
    font-size: 12px;
}

.chat-music-picker-empty {
    padding: 22px 12px;
    text-align: center;
}

.chat-music-picker-empty i,
.chat-music-picker-empty strong,
.chat-music-picker-empty span {
    display: block;
}

.chat-music-picker-empty i {
    margin-bottom: 8px;
}

.chat-music-picker-empty strong {
    color: var(--text-primary);
    margin-bottom: 4px;
}

.message-publication-music {
    padding: 9px 10px 0;
}

.message-publication-card .message-publication-music + .message-attachments,
.message-publication-card .message-video-list + .message-publication-music {
    margin-top: 0;
}

.message-publication-card .message-publication-music .chat-music-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.message-attachment-caption.music-caption {
    margin-top: 7px;
}

@media (max-width: 768px) {
    .chat-music-picker-row {
        grid-template-columns: 46px minmax(0, 1fr) auto;
    }

    .chat-music-picker-row em {
        display: none;
    }
}

/* Keep chat wallpaper variables bound to the explicitly saved light/dark theme. */
html[data-resolved-theme="light"] {
    --chat-surface-bg: #f5f7f4;
    --chat-surface-base: #eef3ed;
    --chat-surface-glow: rgba(255, 255, 255, 0.62);
    --chat-texture-line: rgba(35, 149, 8, 0.045);
    --chat-sender-color: rgba(38, 86, 52, 0.78);
    --chat-incoming-bubble: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78));
    --chat-outgoing-bubble: linear-gradient(180deg, rgba(68, 184, 47, 0.94), rgba(35, 149, 8, 0.9));
    --chat-incoming-text: #1e2721;
    --chat-outgoing-text: #fff;
    --chat-time-color: rgba(30, 39, 33, 0.52);
    --chat-outgoing-time-color: rgba(255, 255, 255, 0.82);
    --chat-divider-bg: rgba(255, 255, 255, 0.76);
    --chat-divider-color: rgba(42, 68, 49, 0.68);
    --chat-divider-border: rgba(35, 149, 8, 0.10);
    --chat-input-container-bg: rgba(245, 247, 244, 0.92);
    --chat-input-bg: rgba(255, 255, 255, 0.88);
    --chat-input-border: rgba(30, 39, 33, 0.10);
    --chat-input-shadow: 0 8px 22px rgba(35, 59, 39, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    --chat-input-text: #1e2721;
    --chat-input-placeholder: rgba(30, 39, 33, 0.48);
    --chat-divider-line: rgba(30, 39, 33, 0.10);
    --chat-reaction-bg: rgba(255, 255, 255, 0.9);
    --chat-reaction-border: rgba(30, 39, 33, 0.10);
    --chat-own-reaction-bg: rgba(255, 255, 255, 0.92);
    --chat-own-reaction-text: #1e2721;
    --ggdep-chat-wallpaper-dot: color-mix(in srgb, var(--primary-color) 4%, transparent);
    --ggdep-chat-wallpaper-glow: color-mix(in srgb, var(--primary-color) 6%, transparent);
    --ggdep-chat-wallpaper-overlay: rgba(249, 250, 247, .42);
}

html[data-resolved-theme="dark"] {
    --chat-surface-bg: #0b0d0c;
    --chat-surface-base: var(--bg-primary);
    --chat-surface-glow: rgba(255, 255, 255, 0.025);
    --chat-texture-line: rgba(255, 255, 255, 0.018);
    --chat-sender-color: rgba(255, 255, 255, 0.58);
    --chat-incoming-bubble: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.06));
    --chat-outgoing-bubble: linear-gradient(180deg, rgba(42, 156, 24, 0.96), rgba(26, 77, 15, 0.98));
    --chat-incoming-text: var(--text-primary);
    --chat-outgoing-text: #fff;
    --chat-time-color: var(--text-muted);
    --chat-outgoing-time-color: rgba(255, 255, 255, 0.76);
    --chat-divider-bg: rgba(22, 24, 23, 0.72);
    --chat-divider-color: rgba(255, 255, 255, 0.72);
    --chat-divider-border: rgba(255, 255, 255, 0.08);
    --chat-input-container-bg: rgba(16, 17, 17, 0.92);
    --chat-input-bg: rgba(255, 255, 255, 0.055);
    --chat-input-border: rgba(255, 255, 255, 0.09);
    --chat-input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    --chat-input-text: var(--text-primary);
    --chat-input-placeholder: var(--text-muted);
    --chat-divider-line: rgba(255, 255, 255, 0.09);
    --chat-reaction-bg: rgba(26, 26, 26, 0.92);
    --chat-reaction-border: rgba(255, 255, 255, 0.12);
    --chat-own-reaction-bg: rgba(255, 255, 255, 0.9);
    --chat-own-reaction-text: #202124;
    --ggdep-chat-wallpaper-overlay: rgba(5, 8, 6, .58);
}
/* ===== AI typing indicator above composer fix ===== */
.chat-input-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.chat-input-container > .typing-indicator {
    order: 20;
    position: relative !important;
    inset: auto !important;
    display: none;
    flex: 0 0 auto;
    width: min(var(--ggdep-chat-composer-width), calc(100% - 24px));
    max-width: var(--ggdep-chat-composer-width);
    min-height: 0;
    margin: 0 auto 7px !important;
    padding: 0 !important;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 2;
}

.chat-input-container > .typing-indicator.active {
    display: flex !important;
}

.chat-input-container > .typing-indicator .typing-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 28px;
    padding: 6px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.chat-input-container > .typing-indicator .typing-text {
    min-width: 0;
    color: color-mix(in srgb, var(--text-secondary) 88%, transparent);
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-input-container > .typing-indicator .typing-text strong {
    color: color-mix(in srgb, var(--primary-color) 86%, var(--text-primary));
    font-weight: 850;
}

.chat-input-container > .typing-indicator .typing-dots {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.chat-input-container > .typing-indicator .typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--primary-color);
    opacity: .82;
    animation: typingDot 1.25s infinite ease-in-out;
}

.chat-input-container > .typing-indicator .typing-dots span:nth-child(2) {
    animation-delay: .16s;
}

.chat-input-container > .typing-indicator .typing-dots span:nth-child(3) {
    animation-delay: .32s;
}

.chat-input-container > .chat-input {
    order: 30;
}

.chat-input-container > .file-preview-bar,
.chat-input-container > .reply-preview,
.chat-input-container > .message-reply-preview {
    order: 10;
}

@media (max-width: 768px) {
    .chat-input-container > .typing-indicator {
        width: min(var(--ggdep-chat-composer-width), calc(100% - 18px));
        min-height: 17px;
        margin-bottom: 0 !important;
        transform: translateY(2px);
    }

    .chat-input-container > .typing-indicator .typing-content {
        min-height: 17px;
        padding: 0 7px;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .chat-input-container > .typing-indicator .typing-text {
        font-size: 11.5px;
        line-height: 17px;
    }
}

/* Desktop chat filter strip: show horizontal scrollbar on PC, hide it on mobile. */
@media (min-width: 769px) {
    .chat-list-filters {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--text-muted) 42%, transparent) transparent;
        -ms-overflow-style: auto;
        padding-bottom: 12px;
    }

    .chat-list-filters::-webkit-scrollbar {
        display: block;
        height: 8px;
    }

    .chat-list-filters::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 999px;
    }

    .chat-list-filters::-webkit-scrollbar-thumb {
        min-width: 36px;
        border: 2px solid transparent;
        border-radius: 999px;
        background: color-mix(in srgb, var(--text-muted) 36%, transparent);
        background-clip: content-box;
    }

    .chat-list-filters:hover::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--text-muted) 55%, transparent);
        background-clip: content-box;
    }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .chat-list-filters {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 9px;
        -webkit-overflow-scrolling: touch;
    }

    .chat-list-filters::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}

/* Desktop media tabs: show horizontal scrollbar on PC, hide it on mobile. */
@media (min-width: 769px) {
    .chat-media-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--text-muted) 42%, transparent) transparent;
        -ms-overflow-style: auto;
        padding-bottom: 12px;
    }

    .chat-media-tabs::-webkit-scrollbar {
        display: block;
        height: 8px;
    }

    .chat-media-tabs::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 999px;
    }

    .chat-media-tabs::-webkit-scrollbar-thumb {
        min-width: 36px;
        border: 2px solid transparent;
        border-radius: 999px;
        background: color-mix(in srgb, var(--text-muted) 36%, transparent);
        background-clip: content-box;
    }

    .chat-media-tabs:hover::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--text-muted) 55%, transparent);
        background-clip: content-box;
    }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .chat-media-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 14px;
        -webkit-overflow-scrolling: touch;
    }

    .chat-media-tabs::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}


/* ===== Chat-scoped typing indicator + animated dots ===== */
#typing-indicator .typing-content,
.typing-indicator .typing-content {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#typing-indicator .typing-dots,
.typing-indicator .typing-dots {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    gap: 4px !important;
    min-width: 23px;
}

#typing-indicator .typing-dots span,
.typing-indicator .typing-dots span {
    display: block !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: var(--primary-color) !important;
    opacity: .42;
    transform: translateY(0) scale(.86);
    animation: ggdepTypingDotPulse 1.15s infinite ease-in-out !important;
    will-change: transform, opacity;
}

#typing-indicator .typing-dots span:nth-child(2),
.typing-indicator .typing-dots span:nth-child(2) {
    animation-delay: .15s !important;
}

#typing-indicator .typing-dots span:nth-child(3),
.typing-indicator .typing-dots span:nth-child(3) {
    animation-delay: .30s !important;
}

@keyframes ggdepTypingDotPulse {
    0%, 60%, 100% {
        opacity: .38;
        transform: translateY(0) scale(.86);
    }
    30% {
        opacity: 1;
        transform: translateY(-4px) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    #typing-indicator .typing-dots span,
    .typing-indicator .typing-dots span {
        animation: ggdepTypingDotFade 1.4s infinite ease-in-out !important;
        transform: none !important;
    }

    @keyframes ggdepTypingDotFade {
        0%, 100% { opacity: .35; }
        50% { opacity: 1; }
    }
}

/* Only iOS needs the extra lift above the home indicator. Android WebView
   already keeps content inside its system navigation inset. */
@media (max-width: 1024px) {
    :root {
        --app-mobile-safe-bottom: 0px;
        --app-mobile-nav-height: 70px;
    }

    html.platform-ios {
        --app-mobile-safe-bottom: max(12px, env(safe-area-inset-bottom, 0px));
        --app-mobile-nav-height: calc(70px + var(--app-mobile-safe-bottom));
    }

    .sidebar.app-navigation,
    .sidebar.app-navigation.collapsed,
    .sidebar.app-navigation.mobile-open {
        bottom: var(--app-mobile-safe-bottom);
    }
}

@media (max-width: 768px) {
    body.is-chats-panel .chat-area-full.mobile-visible .chat-input-container {
        bottom: 0 !important;
        padding-bottom: 8px !important;
    }

    html.platform-ios body.is-chats-panel .chat-area-full.mobile-visible .chat-input-container {
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Telegram-like inline video sizing and automatic preview state. */
.message-video {
    position: relative;
    align-self: flex-start;
}

.message.own .message-video {
    align-self: flex-end;
}

.message-video-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background:
        radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--primary-color) 16%, transparent), transparent 35%),
        #080909;
}

.message-video.has-video-metadata.is-video-portrait {
    width: min(300px, 78vw);
    width: min(300px, 78vw, calc(432px * var(--chat-video-ratio)));
}

.message-video.has-video-metadata.is-video-square {
    width: min(432px, 80vw, 54dvh);
}

.message-video.has-video-metadata.is-video-landscape {
    width: min(480px, 82vw);
}

.message-video.is-video-metadata-pending {
    width: min(360px, 82vw);
}

.message-video-frame .chat-video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 432px;
    max-height: min(432px, 62dvh);
    aspect-ratio: var(--chat-video-width, 16) / var(--chat-video-height, 9);
    border-radius: 0;
    object-fit: contain;
    transition: opacity .2s ease;
}

.message-video:not(.is-video-ready) .chat-video[data-lazy-src]:not([poster]) {
    opacity: .08;
}

.message-video-poster-bg {
    position: absolute;
    inset: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    object-fit: cover;
    filter: blur(14px) brightness(.58) saturate(.9);
    transform: scale(1.05);
    pointer-events: none;
}

.message-video.is-video-loading .message-video-frame::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid rgba(255,255,255,.24);
    border-top-color: #fff;
    border-radius: 50%;
    pointer-events: none;
    animation: chat-video-preview-spin .8s linear infinite;
}

.message-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    padding: 0 0 0 3px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 50%;
    background: rgba(15,17,17,.68);
    color: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,.28);
    cursor: pointer;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .16s ease, opacity .16s ease;
}

.message-video-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.06);
}

.message-video.is-video-loading .message-video-play-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.message-video.is-video-playing .message-video-play-btn {
    opacity: 0;
}

.message-video-frame:hover .message-video-play-btn,
.message-video-frame:focus-within .message-video-play-btn {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.message-video-controls {
    position: absolute;
    right: 9px;
    bottom: 9px;
    left: 9px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
}

.message-video-frame:hover .message-video-controls,
.message-video-frame:focus-within .message-video-controls,
.message-video:not(.is-video-playing) .message-video-controls {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.message-video-control {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    background: rgba(9, 12, 13, .68);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.message-video-progress {
    position: relative;
    flex: 1 1 auto;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
}

.message-video-progress span {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
}

@media (hover: none) {
    .message-video.is-video-playing .message-video-controls {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .message-video.is-video-playing .message-video-play-btn {
        visibility: hidden;
        pointer-events: none;
    }
}

.message-video-duration {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(0,0,0,.64);
    color: #fff;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.message-video-duration[hidden] {
    display: none !important;
}

@keyframes chat-video-preview-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .message-video-frame .chat-video {
        transition: none;
    }

    .message-video.is-video-loading .message-video-frame::after {
        animation: none;
    }
}

/* Unified chat publications: media, caption, music and files are one message. */
.message-bubble.publication-message-bubble {
    box-sizing: border-box;
    width: min(420px, calc(100vw - 96px));
    max-width: min(460px, calc(100vw - 96px));
    overflow: visible !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent) !important;
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-secondary) 96%, transparent) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16) !important;
}

.message-publication-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border-radius: inherit;
}

.message-bubble.publication-single-video,
.message-bubble.publication-single-video .message-publication-card,
.message-bubble.publication-single-video .message-video-list {
    width: fit-content;
    max-width: min(480px, calc(100vw - 96px));
}

.message-bubble.publication-single-video .message-video-list,
.message-bubble.publication-single-video .message-video {
    align-self: stretch;
}

.message-publication-card .message-video-list,
.message-publication-card .message-video,
.message-publication-card .message-video-frame {
    box-sizing: border-box;
    margin: 0;
}

.message-publication-card .message-video {
    max-width: 100%;
}

.message-publication-card .message-video,
.message-publication-card .message-video-frame,
.message-publication-card .chat-video {
    -webkit-touch-callout: none;
    user-select: none;
}

.message-publication-card .message-video:first-child,
.message-publication-card .message-video:first-child .message-video-frame {
    border-radius: 17px 17px 0 0;
}

.message-publication-card.has-mixed-attachments .message-video-list {
    align-items: center;
    padding: 0;
}

.message-publication-card.has-video:not(.is-single-video-publication) .message-video {
    align-self: center;
}

.message-publication-card .message-attachment-caption {
    display: block;
    align-self: stretch;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 11px 13px 8px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: normal;
}

.message.own .message-publication-card .message-attachment-caption {
    color: var(--ggdep-own-message-text, #f8fafc);
}

.message-publication-card .message-attachment-caption .chat-markdown-table-wrap,
.message-publication-card .message-attachment-caption pre,
.message-publication-card .message-attachment-caption blockquote {
    max-width: 100%;
}

.message-bubble.publication-has-caption .message-publication-card > .message-time,
.message-bubble.publication-has-music .message-publication-card > .message-time,
.message-bubble.publication-has-files .message-publication-card > .message-time,
.message-bubble.publication-has-mixed-attachments .message-publication-card > .message-time {
    position: static !important;
    align-self: flex-end;
    width: auto !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 9px 8px auto;
    padding: 2px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    text-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.message.own .message-bubble.publication-has-caption .message-time,
.message.own .message-bubble.publication-has-music .message-time,
.message.own .message-bubble.publication-has-files .message-time,
.message.own .message-bubble.publication-has-mixed-attachments .message-time {
    color: var(--ggdep-own-message-time, rgba(248, 250, 252, .74)) !important;
}

.message-bubble.publication-message-bubble .message-reactions {
    z-index: 9;
}

.message.action-menu-open .publication-message-bubble {
    outline: 2px solid color-mix(in srgb, var(--primary-color) 36%, transparent);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .message-bubble.publication-message-bubble {
        width: min(380px, calc(100vw - 58px));
        max-width: calc(100vw - 58px);
    }

    .message-bubble.publication-single-video,
    .message-bubble.publication-single-video .message-publication-card,
    .message-bubble.publication-single-video .message-video-list {
        width: fit-content;
        max-width: calc(100vw - 58px);
    }
}

/* Final compound-publication cascade. The outside stays transparent, while
   every part shares one column, one shadow and connected corner geometry. */
.message-bubble.media-message-bubble.publication-message-bubble,
.message-bubble.media-message-bubble.publication-message-bubble.publication-single-video {
    width: fit-content;
    max-width: min(460px, calc(100vw - 96px));
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.message-bubble.publication-message-bubble .message-publication-card,
.message-bubble.publication-single-video .message-publication-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: fit-content;
    max-width: min(460px, calc(100vw - 96px));
    overflow: visible;
    border-radius: 0;
    background: transparent;
    filter: none;
}

.message-bubble.publication-message-bubble .message-publication-card:not(.is-single-video-publication) {
    width: min(360px, calc(100vw - 96px));
}

.message-bubble.publication-message-bubble .message-publication-card.has-mixed-attachments {
    width: min(360px, calc(100vw - 96px));
}

.message-bubble.publication-message-bubble .message-video-list,
.message-bubble.publication-single-video .message-video-list {
    align-items: stretch;
    gap: 2px;
    width: 100%;
    max-width: 100%;
}

.message-publication-card .message-video,
.message-publication-card.has-video:not(.is-single-video-publication) .message-video {
    align-self: flex-start;
    overflow: visible;
    border-radius: 18px;
    background: transparent;
}

.message.own .message-publication-card .message-video,
.message.own .message-publication-card.has-video:not(.is-single-video-publication) .message-video {
    align-self: flex-end;
}

.message-publication-card.has-mixed-attachments .message-video,
.message-publication-card.has-mixed-attachments .message-video.has-video-metadata.is-video-portrait,
.message-publication-card.has-mixed-attachments .message-video.has-video-metadata.is-video-square,
.message-publication-card.has-mixed-attachments .message-video.has-video-metadata.is-video-landscape {
    align-self: stretch;
    width: 100%;
}

.message-publication-card.has-mixed-attachments .message-video-frame .chat-video {
    height: min(432px, 62dvh);
    aspect-ratio: auto;
    object-fit: contain;
}

.message-publication-card .message-video-frame,
.message-publication-card .message-video:first-child .message-video-frame {
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.message-publication-card.has-video.has-mixed-attachments .message-video-frame,
.message-publication-card.has-video.has-mixed-attachments .message-video:first-child .message-video-frame {
    border-radius: 18px;
}

.message-publication-card .message-publication-music {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.message-publication-card .message-attachments {
    width: 100%;
    max-width: 100%;
    gap: 2px;
}

.message-publication-card .message-image-group,
.message-publication-card .message-image-group.single {
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
}

.message-publication-details {
    position: relative;
    align-self: stretch;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0 0 21px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
    border-radius: 18px 18px 18px 8px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}

.message.own .message-publication-details {
    border-color: color-mix(in srgb, var(--border-color) 58%, transparent);
    border-radius: 18px 18px 8px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .055));
}

.message-publication-details .message-publication-music {
    box-sizing: border-box;
    width: 100%;
    padding: 6px;
}

.message-publication-details .chat-music-card,
.message-publication-details .message-file {
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

.message.own .message-publication-details .message-file.document-message {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.message-publication-details .message-attachments {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.message-publication-details .message-file {
    width: 100%;
    padding: 9px 10px;
}


.message-publication-details .message-publication-caption-bubble {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 9px 11px 2px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.message.own .message-publication-details .message-publication-caption-bubble {
    border-radius: 0;
    background: transparent;
}

.message-publication-details .message-attachment-caption {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.message-publication-details > .message-time {
    position: absolute !important;
    z-index: 4;
    top: auto !important;
    left: auto !important;
    right: 9px;
    bottom: 5px;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    align-self: auto !important;
    gap: 4px;
    width: auto !important;
    max-width: calc(100% - 18px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    white-space: nowrap;
    pointer-events: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* A publication may also be classified as a file/media bubble. Keep its
   timestamp governed by the publication layout, regardless of those generic
   footer rules. */
.message .message-bubble.publication-message-bubble .message-publication-details > .message-time {
    position: absolute !important;
    inset: auto 9px 5px auto !important;
    display: inline-flex !important;
    justify-content: flex-end !important;
    align-self: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.message.own .message-bubble.publication-message-bubble .message-publication-details > .message-time {
    color: var(--ggdep-own-message-time, rgba(248, 250, 252, .74)) !important;
}

.message-bubble.publication-message-bubble .message-publication-meta {
    align-self: flex-end !important;
    margin-right: 0;
    margin-left: auto;
}

.message-bubble.publication-message-bubble .message-status {
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

/* Settle initial chat geometry while its messages are hidden, then reveal the
   final position atomically. Per-message entrance motion looked like a second
   scroll jump when the history and composer finished measuring. */
.chat-messages {
    scrollbar-gutter: stable;
    overflow-anchor: auto;
}

.chat-messages.is-chat-layout-stabilizing {
    scroll-behavior: auto !important;
    overflow-anchor: none;
}

.chat-messages.is-chat-layout-stabilizing .message,
.chat-messages.is-chat-layout-stabilizing .chat-date-divider,
.chat-messages.is-chat-layout-stabilizing .chat-unread-divider,
.chat-messages.is-chat-layout-stabilizing .older-messages-control {
    animation: none !important;
}

/* History is inserted in one settled frame. Only messages received after the
   chat has opened should use the messageAppear animation. */
.chat-messages .message.chat-history-message {
    animation: none !important;
}

@media (max-width: 768px) {
    .message-bubble.media-message-bubble.publication-message-bubble,
    .message-bubble.media-message-bubble.publication-message-bubble.publication-single-video,
    .message-bubble.publication-message-bubble .message-publication-card,
    .message-bubble.publication-single-video .message-publication-card {
        max-width: calc(100vw - 58px);
    }

    .message-bubble.publication-message-bubble .message-publication-card:not(.is-single-video-publication),
    .message-bubble.publication-message-bubble .message-publication-card.has-mixed-attachments {
        width: min(360px, calc(100vw - 58px));
    }
}

/* Light themes can combine a neutral message surface with the user's white
   own-message text preference. Timestamps and delivery marks still need an
   explicit dark contrast in that case. */
html.theme-light .chat-area-full .message.own .message-time,
html.theme-light .chat-area-full .message.own .message-status,
html.theme-light .chat-area-full .message.own .message-status.read,
html.theme-light .chat-area-full .message.own .message-status.delivered,
html.theme-light .chat-area-full .message.own .message-edited,
html[data-theme="light"] .chat-area-full .message.own .message-time,
html[data-theme="light"] .chat-area-full .message.own .message-status,
html[data-theme="light"] .chat-area-full .message.own .message-edited {
    color: rgba(15, 23, 42, .68) !important;
}