/* Fade in animation */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Main application styles */

/* Page containers */
.page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

.page-container-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    padding-top: 80px;
    padding-bottom: 40px;
    box-sizing: border-box;
}

.page-content {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--page-padding);
}

.page-loading {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-bottom: 16px;
}

.back-link:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.back-icon {
    width: 20px;
    height: 20px;
}

/* ===========================================
   GUEST LAYOUT (for unauthenticated users)
   =========================================== */
.guest-layout {
    min-height: 100vh;
    background: var(--bg-main);
}

.guest-header {
    position: fixed;
    top: var(--sat);
    left: 0;
    right: 0;
    height: 60px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 100;
}

.guest-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-text {
    font-size: 24px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-guest-login {
    padding: 10px 24px;
    font-size: 15px;
    text-decoration: none;
}

.guest-content {
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 40px;
    max-width: var(--content-width);
    margin: 0 auto;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
}

@media (max-width: 768px) {
    .guest-header {
        padding: 0 16px;
    }

    .logo-text {
        font-size: 20px;
    }

    .btn-guest-login {
        padding: 8px 16px;
        font-size: 14px;
    }

    .guest-content {
        padding-top: calc(var(--header-height) + 10px);
        padding-left: var(--page-padding);
        padding-right: var(--page-padding);
    }
}

/* Section styling */
.section {
    background: var(--bg-card);
    padding: 20px;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* Contact info list (email, telegram) */
.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.contact-info-label {
    font-size: 14px;
    color: var(--text-muted);
    min-width: 80px;
}

.contact-info-value {
    flex: 1;
    font-size: 15px;
    color: var(--text-primary);
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-rose);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-link:hover {
    background: rgba(232, 180, 188, 0.1);
}

/* Form elements */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    background: #252525;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.form-input:hover {
    background: #2a2a2a;
}

.form-input:focus {
    outline: none;
    background: #1e1e1e;
    border-color: var(--color-purple);
    box-shadow: 0 0 0 4px rgba(139, 46, 168, 0.15);
}

.form-input-center {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
}

.form-textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color, transparent);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    min-height: 100px;
    resize: vertical;
    box-sizing: border-box;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--color-rose);
}

.form-select {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color, transparent);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    box-sizing: border-box;
}

.form-checkbox-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.form-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Typography */
.page-title {
    font-size: 2rem;
    margin-bottom: 24px;
}

.page-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 32px;
    max-width: 400px;
    text-align: center;
}

/* Navigation */
.back-link {
    text-decoration: none;
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 20px;
    display: inline-block;
}

.back-link:hover {
    color: var(--color-rose);
}

/* Messages */
.message-success {
    color: var(--color-success);
    margin-bottom: 16px;
}

.message-error {
    color: var(--color-error);
    margin-bottom: 16px;
}

/* Utility classes */
.text-center {
    text-align: center;
}

.text-secondary {
    color: var(--text-secondary);
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-24 {
    margin-bottom: 24px;
}

.mb-32 {
    margin-bottom: 32px;
}

.w-full {
    width: 100%;
}

.max-w-320 {
    max-width: 320px;
}

/* Avatar styles */
.avatar-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 10px 0;
}

.avatar-upload {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: var(--bg-input);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    border: 2px dashed var(--text-secondary);
}

.avatar-upload-icon {
    font-size: 24px;
    color: var(--text-secondary);
}

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

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

.avatar-item img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-input);
}

.avatar-delete-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--color-error);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* API key styles */
.api-key-item {
    background: var(--bg-input);
    padding: 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.api-key-name {
    font-weight: bold;
    color: var(--text-primary);
}

.api-key-token {
    font-family: monospace;
    font-size: 12px;
    color: var(--text-secondary);
}

.api-key-delete {
    color: var(--color-error);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.create-key-form {
    display: flex;
    gap: 8px;
}

.create-key-form input {
    flex: 1;
}

/* Spinner animation */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: var(--color-rose);
    animation: spin 1s linear infinite;
}

.spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.spinner-xs {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.spinner-lg {
    width: 48px;
    height: 48px;
    border-width: 5px;
}

/* Telegram deep-link button (used in Auth.js and Profile.js relink modal) */
.btn-tg-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0;
}

/* Waiting hint row with spinner (used in Auth.js and Profile.js relink modal) */
.waiting-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding-top: 4px;
}

/* Centered loading wrapper */
.loading-center {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===========================================
   UNIFIED AVATAR COMPONENT
   =========================================== */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
}

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

/* Avatar sizes */
.avatar-xs {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.avatar-md {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

.avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 20px;
}

.avatar-xl {
    width: 80px;
    height: 80px;
    font-size: 28px;
}

.avatar-placeholder {
    background: linear-gradient(135deg, var(--color-rose) 0%, var(--color-coral) 100%);
    color: white;
}

/* Loading state */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.loading-text {
    font-size: 14px;
}

/* Username validation styles */
.form-input.input-valid {
    border-color: var(--color-success, #00D166);
    box-shadow: 0 0 0 2px rgba(0, 209, 102, 0.2);
}

.form-input.input-invalid {
    border-color: var(--color-error, #FF4B4B);
    box-shadow: 0 0 0 2px rgba(255, 75, 75, 0.2);
}

.form-input.input-checking {
    border-color: var(--primary);
}

.username-status {
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.username-status.available {
    color: var(--color-success, #00D166);
}

.username-status.unavailable {
    color: var(--color-error, #FF4B4B);
}

.username-status.checking {
    color: var(--text-secondary);
}

/* Alias status (channel creation) */
.alias-status {
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.alias-status:empty {
    display: none;
}

.alias-status.success {
    color: var(--color-success, #00D166);
}

.alias-status.error {
    color: var(--color-error, #FF4B4B);
}

.alias-status.checking {
    color: var(--text-secondary);
}

/* Input validation states */
.form-input.valid {
    border-color: var(--color-success, #00D166);
}

.form-input.invalid {
    border-color: var(--color-error, #FF4B4B);
}

/* Scope badge styles for API keys */
.scope-badge {
    display: inline-block;
    background: var(--bg-input);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-family: monospace;
    margin-right: 4px;
    margin-bottom: 4px;
}

.scope-badge.wildcard {
    background: var(--gradient-primary, linear-gradient(135deg, #D69BA7 0%, #8B2EA8 100%));
    color: white;
}

.api-key-scopes {
    display: flex;
    flex-wrap: wrap;
    margin-top: 4px;
}

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

.api-key-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.api-key-created {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Scope selection modal styles */
.scope-category {
    margin-bottom: 16px;
}

.scope-category-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.scope-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    cursor: pointer;
}

.scope-checkbox input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.scope-checkbox.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.scope-checkbox.disabled input {
    cursor: not-allowed;
}

.scope-name {
    font-family: monospace;
    font-size: 13px;
    color: var(--text-primary);
}

.scope-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 4px;
}

/* Public profile styles - Premium Design */
.public-profile {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--page-padding);
}

.public-profile-notice {
    background: rgba(232, 180, 188, 0.1);
    border: 1px solid rgba(232, 180, 188, 0.2);
    padding: 14px 20px;
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.notice-icon {
    width: 18px;
    height: 18px;
    color: var(--color-rose);
    flex-shrink: 0;
}

.public-profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 25px 16px 0;
    box-shadow: var(--shadow-md);
    margin-top: 16px;
}

.public-profile-header {
    text-align: center;
}

.public-profile-avatar {
    width: 128px;
    height: 128px;
    min-width: 128px;
    min-height: 128px;
    border-radius: 50%;
    margin: 0 auto 20px;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid transparent;
    position: relative;
}

.public-profile-avatar>.online-indicator {
    position: absolute;
    width: 18px;
    height: 18px;
    bottom: 5px;
    right: 5px;
    background: var(--color-online);
    border: 3px solid var(--bg-primary);
    border-radius: 50%;
    z-index: 10;
}

.public-profile-avatar>.verified-badge-avatar {
    position: absolute;
    width: 28px;
    height: 28px;
    bottom: 0;
    right: 0;
    z-index: 10;
}

.public-profile-avatar>.verified-badge-avatar svg {
    width: 100%;
    height: 100%;
}

.public-profile-avatar>.bot-badge-avatar {
    position: absolute;
    width: 28px;
    height: 28px;
    bottom: 0;
    right: 0;
    z-index: 10;
    background: var(--color-purple);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.public-profile-avatar>.bot-badge-avatar svg {
    width: 100%;
    height: 100%;
}

.public-profile-avatar>.avatar,
.public-profile-avatar>img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background-image:
        linear-gradient(var(--bg-card), var(--bg-card)),
        var(--gradient-primary);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    font-size: 48px;
}

.public-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-profile-avatar-placeholder {
    font-size: 56px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.public-profile-name {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.verified-badge-name {
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
    cursor: pointer;
}

.verified-badge-name svg {
    width: 26px;
    height: 26px;
}

.public-profile-username {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: var(--color-rose);
    background: rgba(232, 180, 188, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.public-profile-username:hover {
    background: rgba(232, 180, 188, 0.2);
    transform: translateY(-1px);
}

.public-profile-username:active {
    transform: translateY(0);
}

.public-profile-username:hover .copy-icon {
    opacity: 1;
}

.public-profile-bio {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 24px 0;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    white-space: pre-line;
}
.bio-link {
    color: var(--color-rose);
    text-decoration: none;
    font-weight: 500;
}
.bio-link:hover {
    text-decoration: underline;
}
.bio-widget {
    color: var(--color-rose) !important;
    font-size: 14px;
}
.bio-widget .ilw-name {
    max-width: none;
}
.bio-widget-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}
.bio-widget-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.bio-widget-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
}

/* Profile Stats Row */
.profile-stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 24px;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 20px;
}

.profile-stat.subscribers-count-link {
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
}

.profile-stat.subscribers-count-link:hover {
    background: var(--bg-hover);
}

.profile-stat-number {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.profile-stat-label {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: lowercase;
}

.profile-stat-divider {
    width: 1px;
    height: 32px;
    background: var(--border-color);
    flex-shrink: 0;
}

/* Hero Edit button */
.btn-profile-hero-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
}

.public-profile-subscribers {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    padding: 8px 16px;
    background: var(--bg-input);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.public-profile-subscribers:hover {
    color: var(--color-primary);
    background: var(--bg-hover);
}

.public-profile-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    padding: 10px 16px;
    margin-top: 18px;
    border-top: 1px solid var(--border-color);
}

.meta-icon {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.public-profile-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

.blocked-notice {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 75, 75, 0.1);
    border: 1px solid rgba(255, 75, 75, 0.3);
    border-radius: 8px;
    color: var(--color-error);
    font-size: 14px;
    margin-bottom: 8px;
}

.blocked-notice .notice-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn-unblock {
    color: var(--color-error);
    border-color: var(--color-error);
}

.btn-unblock:hover {
    background: rgba(255, 75, 75, 0.1);
}

.btn-profile-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    text-decoration: none;
}

.btn-profile-action-muted {
    opacity: 0.6;
}

.btn-profile-action-muted:hover {
    opacity: 1;
}

.btn-profile-action[data-action="follow"][data-following="true"] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.btn-profile-action[data-action="follow"][data-following="true"]:hover {
    background: var(--bg-hover);
}

/* Guest CTA Banner */
.profile-guest-cta {
    margin-top: 16px;
}

.profile-guest-cta-inner {
    background: linear-gradient(135deg, rgba(232, 180, 188, 0.15) 0%, rgba(139, 46, 168, 0.15) 100%);
    border: 1px solid rgba(232, 180, 188, 0.3);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.profile-guest-cta-text {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.5;
}

.profile-guest-cta-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--color-rose);
}

.profile-guest-cta-btn {
    flex-shrink: 0;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.profile-guest-cta-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
    animation: cta-shimmer 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
/* Shared CTA shimmer effect — apply to elements with position:relative + overflow:hidden */
.shimmer-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
    animation: cta-shimmer 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.shimmer-cta:disabled::after {
    display: none;
}

@keyframes cta-shimmer {
    0%, 100% { left: -100%; }
    50% { left: 150%; }
}

/* Blurred post overlay for guests */
.profile-wall-blurred-post {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.profile-wall-blurred-content {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.profile-wall-blur-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    border-radius: var(--radius-lg);
}

.profile-wall-blur-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}

.profile-wall-blur-icon {
    width: 32px;
    height: 32px;
    opacity: 0.9;
}

.profile-wall-blur-cta .btn-primary.btn-sm {
    padding: 8px 24px;
    font-size: 14px;
}

/* Error state */
.public-profile-error {
    text-align: center;
    padding: 80px 40px;
    max-width: 480px;
    margin: 0 auto;
}

.error-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: rgba(255, 75, 75, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-icon-wrapper svg {
    width: 40px;
    height: 40px;
    color: var(--color-error);
}

.error-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.error-description {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Profile Wall */
.profile-wall {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-wall .post-card {
    background: var(--bg-secondary);
}

.profile-wall-empty {
    margin-top: 24px;
    text-align: center;
    padding: 32px 24px;
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.profile-wall-empty p {
    margin: 0 0 16px 0;
    font-size: 14px;
}

.profile-wall-empty .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 640px) {
    .public-profile-card {
        padding: 16px 12px 12px;
    }

    .public-profile-name {
        font-size: 26px;
    }

    .public-profile-actions {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .btn-profile-action {
        flex: 1;
        justify-content: center;
        padding: 10px 8px;
        font-size: 13px;
        gap: 5px;
    }

    .profile-guest-cta-inner {
        flex-direction: column;
        text-align: center;
    }

    .profile-guest-cta-text {
        flex-direction: column;
        text-align: center;
    }

    .profile-guest-cta-btn {
        width: 100%;
        text-align: center;
    }

    .profile-stat {
        padding: 8px 14px;
    }

    .profile-stat-number {
        font-size: 20px;
    }
}

/* ===========================================
   SIDEBAR STYLES
   =========================================== */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.open {
    opacity: 1;
    visibility: visible;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-main) 100%);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    border-right: 1px solid var(--border-color);
}

.sidebar.open {
    transform: translateX(0);
}

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

.sidebar .user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px;
    margin: -8px;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.sidebar .user-info:hover {
    background: var(--bg-hover);
}

.sidebar .user-info:hover .avatar-large {
    box-shadow: 0 0 0 3px rgba(232, 180, 188, 0.3);
}

.sidebar .avatar-large {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: 2px solid rgba(232, 180, 188, 0.2);
    flex-shrink: 0;
}

.sidebar .avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar .avatar-placeholder {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-rose);
}

.sidebar .user-details {
    flex: 1;
    min-width: 0;
}

.sidebar .user-details h3 {
    margin: 0 0 2px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar .username {
    color: var(--text-secondary);
    font-size: 13px;
    opacity: 0.7;
}

.sidebar-menu {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
}

.menu-section {
    margin-bottom: 8px;
}

.menu-section-bottom {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.menu-title {
    padding: 5px 20px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-item {
    padding: 10px 20px;
    margin: 0 12px 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    font-size: 14px;
}

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

.menu-item:active {
    transform: translateX(0);
}

.menu-item.menu-item-create {
    color: var(--color-rose);
}

.menu-item.menu-item-create:hover {
    background: rgba(232, 180, 188, 0.1);
}

.menu-item.menu-item-logout {
    color: var(--color-error);
}

.menu-item.menu-item-logout:hover {
    background: rgba(255, 75, 75, 0.1);
}

.menu-item .channel-avatar {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Channel item with quick post button */
.menu-item.channel-item {
    position: relative;
    padding-right: 36px;
    /* Space for quick post button */
}

.menu-item.channel-item .sidebar-channel-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    /* Allow text truncation */
}

.menu-item.channel-item .sidebar-channel-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-quick-post {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0;
    transition: all 0.2s;
}

.menu-item.channel-item:hover .channel-quick-post {
    opacity: 1;
}

.channel-quick-post:hover {
    background: var(--color-gold);
    color: black;
}

.sidebar .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.menu-item:hover .icon {
    opacity: 1;
}

.sidebar .badge {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    background: var(--bg-input);
    color: var(--text-secondary);
}

.sidebar .badge-gold {
    background: var(--gradient-gold);
    color: #000;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* Balance compact */
.balance-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 12px 12px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(249, 115, 22, 0.1) 100%);
    /* border: 1px solid rgba(239, 68, 68, 0.2); */
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.balance-card:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(249, 115, 22, 0.15) 100%);
    /* border-color: rgba(239, 68, 68, 0.35); */
    transform: translateY(-1px);
}

.balance-card:active {
    transform: translateY(0);
}

.balance-icon {
    font-size: 28px;
    line-height: 1;
}

.balance-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    gap: 2px;
}

.balance-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    transition: transform 0.15s ease, color 0.15s ease;
}

.balance-amount.balance-updated {
    transform: scale(1.1);
    color: var(--accent);
}

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

.balance-action {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a78bfa;
    transition: all 0.2s ease;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}
.balance-action-cat { width: 41px; height: 41px; object-fit: contain; }

.balance-card:hover .balance-action {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.35) 0%, rgba(139, 92, 246, 0.35) 100%);
    transform: scale(1.1);
}

/* Legacy support - can be removed later */
.icon-gold {
    width: 24px;
    height: 24px;
    color: var(--color-gold);
    flex-shrink: 0;
}

/* ===========================================
   MODAL STYLES
   =========================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11000;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 20px;
    box-sizing: border-box;
}

.modal-overlay.show {
    opacity: 1;
}

.modal-content {
    background: var(--bg-card, #1E1E1E);
    border-radius: var(--radius-lg, 20px);
    padding: 24px;
    max-width: 400px;
    width: 100%;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.2s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-overlay.show .modal-content {
    transform: scale(1) translateY(0);
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #FFFFFF);
    margin-bottom: 12px;
}

.modal-message {
    color: var(--text-secondary, #A0A0A0);
    margin-bottom: 24px;
    line-height: 1.5;
    word-break: break-word;
}

.modal-message.selectable {
    background: var(--bg-input, #2C2C2C);
    padding: 12px;
    border-radius: var(--radius-sm, 8px);
    font-family: monospace;
    font-size: 0.85rem;
    user-select: all;
}

/* Modal checkboxes (styled like forward-checkbox) */
.modal-checkboxes {
    margin-bottom: 20px;
}

.modal-checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 0;
    user-select: none;
}

.modal-checkbox-item:hover .modal-check-mark {
    border-color: rgba(255, 255, 255, 0.25);
}

.modal-check-input {
    display: none;
}

.modal-check-mark {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    transition: all 0.2s ease;
    position: relative;
    background: transparent;
    flex-shrink: 0;
}

.modal-check-input:checked+.modal-check-mark {
    background: var(--color-accent, #8B2EA8);
    border-color: var(--color-accent, #8B2EA8);
    box-shadow: 0 0 12px rgba(139, 46, 168, 0.4);
}

.modal-check-input:checked+.modal-check-mark::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.modal-check-label {
    color: var(--text-primary, #FFFFFF);
    font-size: 0.95rem;
}

.modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal-btn {
    padding: 10px 20px;
    border-radius: var(--radius-sm, 8px);
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.1s;
    border: none;
    font-size: 0.95rem;
}

.modal-btn:active {
    transform: scale(0.95);
}

.modal-btn-cancel {
    background: var(--bg-input, #2C2C2C);
    color: var(--text-primary, #FFFFFF);
}

.modal-btn-cancel:hover {
    opacity: 0.8;
}

.modal-btn-confirm {
    background: var(--gradient-primary, linear-gradient(135deg, #D69BA7 0%, #8B2EA8 100%));
    color: white;
}

.modal-btn-danger {
    background: var(--color-error, #FF4B4B);
    color: white;
}

.modal-btn-copy {
    background: var(--color-success, #00D166);
    color: white;
}

.modal-icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
    text-align: center;
}

.modal-alert {
    text-align: center;
}

.modal-alert .modal-buttons {
    justify-content: center;
}

/* Forward Modal Styles */
.forward-search {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color, #333);
    border-radius: var(--radius-sm, 8px);
    background: var(--bg-input, #2C2C2C);
    color: var(--text-primary, #FFFFFF);
    font-size: 0.95rem;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.forward-search:focus {
    outline: none;
    border-color: var(--color-primary, #8B2EA8);
}

.forward-list {
    max-height: 300px;
    overflow-y: auto;
    margin: 0 -24px;
    padding: 0 24px;
}

.forward-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #A0A0A0);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0 4px;
    margin-top: 8px;
}

.forward-section-title:first-child {
    margin-top: 0;
}

.forward-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: background 0.15s;
}

.forward-item:hover {
    background: var(--bg-hover, #333);
}

.forward-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.forward-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.forward-avatar-icon,
.forward-avatar-letter {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    border-radius: 50%;
}

.forward-avatar-icon {
    background: var(--gradient-saved);
}

.forward-avatar-icon svg {
    width: 20px;
    height: 20px;
}

.forward-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #FFFFFF);
}

.forward-badge {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.forward-type-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
    margin-left: auto;
}

/* Forward modal tabs */
.forward-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    padding: 4px;
    background: var(--bg-input, #2C2C2C);
    border-radius: var(--radius-sm, 8px);
}

.forward-tab {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary, #A0A0A0);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.forward-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, #FFFFFF);
}

.forward-tab.active {
    background: var(--bg-card, #1E1E1E);
    color: var(--text-primary, #FFFFFF);
}

.forward-empty {
    text-align: center;
    color: var(--text-secondary, #A0A0A0);
    padding: 24px;
}

/* Forward multi-select checkboxes */
.forward-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
    margin-right: 4px;
}

.forward-check-input {
    display: none;
}

.forward-check-mark {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
    background: transparent;
}

.forward-checkbox:hover .forward-check-mark {
    border-color: rgba(255, 255, 255, 0.25);
}

.forward-check-input:checked+.forward-check-mark {
    background: var(--color-error, #FF4B4B);
    border-color: var(--color-error, #FF4B4B);
    box-shadow: 0 0 10px rgba(255, 75, 75, 0.5);
}

.forward-check-input:checked+.forward-check-mark::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Кнопка отправки в выбранные */
.forward-btn-send {
    background: var(--color-error, #FF4B4B);
    color: white;
    flex: 1;
}

.forward-btn-send:hover {
    background: #ff6b6b;
    opacity: 1;
}

.forward-btn-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Forward per-item status indicators */
.forward-status {
    margin-left: auto;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}
.forward-status-ok {
    color: #4CAF50;
}
.forward-status-fail {
    color: var(--color-error, #FF4B4B);
    cursor: help;
}

/* Счетчик выбранных */
.forward-selection-count {
    background: rgba(255, 75, 75, 0.2);
    color: var(--color-error, #FF4B4B);
    padding: 6px 12px;
    border-radius: var(--radius-sm, 8px);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 12px;
    text-align: center;
    display: none;
}

.forward-selection-count.visible {
    display: block;
}

/* Search Modal (reuses forward-* base styles) */
.search-results {
    min-height: 120px;
}

.search-section-title {
    padding: 8px 14px 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary, #999);
    letter-spacing: 0.5px;
}

.search-hint {
    padding: 24px 14px;
    text-align: center;
    color: var(--text-secondary, #999);
    font-size: 0.9rem;
}

.search-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-item-info .forward-title {
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary, #999);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-verified {
    color: var(--color-primary, #4ECDC4);
    display: inline-flex;
    flex-shrink: 0;
}

.search-msg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.search-msg-date {
    font-size: 0.72rem;
    color: var(--text-secondary, #999);
    white-space: nowrap;
    flex-shrink: 0;
}

.search-msg-sender {
    font-size: 0.78rem;
    color: var(--color-primary, #4ECDC4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-msg-text {
    font-size: 0.82rem;
    color: var(--text-secondary, #aaa);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* Forwarded message header */
.forwarded-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 0 0 8px 0;
    background: var(--bg-hover, rgba(255, 255, 255, 0.05));
    border-radius: var(--radius-sm, 8px);
    border-left: 3px solid var(--color-primary, #8B2EA8);
}

/* Full-width forwarded header in post-card */
.post-card>.forwarded-header {
    margin: -20px -20px 16px -20px;
    padding: 12px 20px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-left: none;
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid var(--color-primary, #8B2EA8);
}

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

.forwarded-header .forwarded-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-purple-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
}

.forwarded-header .forwarded-avatar-saved {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-saved);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.forwarded-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.forwarded-label {
    font-size: 0.7rem;
    color: var(--text-secondary, #A0A0A0);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.forwarded-source {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary, #FFFFFF);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forwarded-source:hover {
    text-decoration: underline;
    color: #fff;
}

/* Compact forwarded header for chat */
.forwarded-header-chat {
    padding: 8px 12px 5px 12px;
    margin: -8px -12px 5px -12px;
    gap: 10px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px 10px 0 0;
    border-left: none;
}

.forwarded-header-chat .forwarded-avatar,
.forwarded-header-chat .forwarded-avatar-placeholder,
.forwarded-header-chat .forwarded-avatar-saved {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
}

.forwarded-header-chat .forwarded-label {
    font-size: 0.65rem;
}

.forwarded-header-chat .forwarded-source {
    font-size: 0.85rem;
}

/* Legacy compact style (keep for backwards compatibility) */
.forwarded-header-compact {
    padding: 4px 8px;
    margin: 0 0 6px 0;
    gap: 6px;
    background: transparent;
    border-radius: 0;
    border-left: 2px solid var(--color-primary, #8B2EA8);
}

.forwarded-header-compact .forwarded-icon {
    color: var(--color-primary, #8B2EA8);
    flex-shrink: 0;
}

.forwarded-header-compact .forwarded-source {
    font-size: 0.8rem;
}

/* ===========================================
   REPLY-TO PREVIEW (inside message bubble)
   =========================================== */
.reply-to-bubble {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 6px 10px;
    margin: 0 0 6px 0;
    background: rgba(139, 46, 168, 0.15);
    border-left: 3px solid var(--color-primary, #8B2EA8);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
    max-width: 100%;
    overflow: hidden;
}

.reply-to-bubble:hover {
    background: rgba(139, 46, 168, 0.25);
}

.reply-to-bubble:active {
    background: rgba(139, 46, 168, 0.35);
}

.message-own .reply-to-bubble {
    background: rgba(255, 255, 255, 0.15);
    border-left-color: rgba(255, 255, 255, 0.6);
}

.message-own .reply-to-bubble:hover {
    background: rgba(255, 255, 255, 0.25);
}

.reply-to-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.reply-to-sender {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary, #8B2EA8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-own .reply-to-sender {
    color: rgba(255, 255, 255, 0.9);
}

.reply-to-text {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.message-own .reply-to-text {
    color: rgba(255, 255, 255, 0.75);
}

.reply-to-text-deleted {
    font-style: italic;
    opacity: 0.7;
}

.reply-to-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.reply-to-thumb.reply-to-avatar {
    border-radius: 50%;
}

.reply-to-deleted {
    opacity: 0.6;
    cursor: default;
}

.reply-to-deleted:hover {
    background: rgba(139, 46, 168, 0.15);
}

/* Message highlight animation (when scrolling to reply) */
.message-highlight .message-bubble,
.message-highlight .sticker-content,
.message-highlight .media-only-content {
    animation: message-highlight-pulse 5s ease-out;
}

@keyframes message-highlight-pulse {
    0% {
        box-shadow: 0 0 0 3px rgba(139, 46, 168, 0.6), 0 0 20px rgba(139, 46, 168, 0.4);
    }

    20% {
        box-shadow: 0 0 0 3px rgba(139, 46, 168, 0.5), 0 0 15px rgba(139, 46, 168, 0.3);
    }

    100% {
        box-shadow: none;
    }
}

/* ── Chat Search Bar ── */
.chat-search-bar {
    background: var(--color-bg-primary, #1a1a2e);
    border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    padding: 8px 12px;
    z-index: 10;
    flex-shrink: 0;
}

.chat-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg-secondary, rgba(255, 255, 255, 0.06));
    border-radius: 10px;
    padding: 6px 12px;
}

.chat-search-icon {
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.4));
    flex-shrink: 0;
}

.chat-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-text-primary, #fff);
    font-size: 14px;
    padding: 4px 0;
    min-width: 0;
}

.chat-search-input::placeholder {
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.4));
}

.chat-search-input::-webkit-search-cancel-button {
    display: none;
}

.chat-search-close {
    background: none;
    border: none;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.4));
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.chat-search-close:hover {
    color: var(--color-text-primary, #fff);
    background: rgba(255, 255, 255, 0.1);
}

/* Search results overlay */
.chat-search-results {
    max-height: 320px;
    overflow-y: auto;
    margin-top: 8px;
    border-radius: 10px;
    background: var(--color-bg-secondary, rgba(255, 255, 255, 0.04));
}

.chat-search-result-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.05));
    transition: background 0.15s;
}

.chat-search-result-item:last-child {
    border-bottom: none;
}

.chat-search-result-item:hover {
    background: rgba(139, 46, 168, 0.1);
}

.chat-search-result-item:active {
    background: rgba(139, 46, 168, 0.18);
}

.chat-search-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.chat-search-result-sender {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary, #8b2ea8);
}

.chat-search-result-time {
    font-size: 11px;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.35));
}

.chat-search-result-text {
    font-size: 13px;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.chat-search-result-text mark {
    background: rgba(139, 46, 168, 0.35);
    color: #fff;
    border-radius: 2px;
    padding: 0 2px;
}

/* Search loading & empty states */
.chat-search-loading {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.chat-search-empty {
    text-align: center;
    padding: 16px 0;
    font-size: 13px;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.4));
}

/* ===========================================
   TOAST STYLES
   =========================================== */
#toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: calc(100% - 40px);
}

@media (max-width: 480px) {
    #toast-container {
        top: 70px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

.toast {
    background: var(--bg-card, #1E1E1E);
    border-radius: var(--radius-md, 12px);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    max-width: 360px;
    cursor: pointer;
    border-left: 4px solid transparent;
}

@media (max-width: 480px) {
    .toast {
        max-width: 100%;
    }
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast.hiding {
    transform: translateX(120%);
    opacity: 0;
}

.toast-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

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

.toast-title {
    font-weight: 600;
    color: var(--text-primary, #FFFFFF);
    margin-bottom: 2px;
}

.toast-message {
    color: var(--text-secondary, #A0A0A0);
    font-size: 0.9rem;
    word-break: break-word;
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-secondary, #A0A0A0);
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.toast-close:hover {
    opacity: 1;
}

.toast-success {
    border-left-color: var(--color-success, #00D166);
}

.toast-error {
    border-left-color: var(--color-error, #FF4B4B);
}

.toast-warning {
    border-left-color: #FFA500;
}

.toast-info {
    border-left-color: var(--color-rose, #D69BA7);
}

/* ===========================================
   CONNECTION BANNER (offline indicator)
   =========================================== */

.connection-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: #d32f2f;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.connection-banner.visible {
    transform: translateY(0);
}

.connection-banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    animation: connection-pulse 1.5s ease-in-out infinite;
}

@keyframes connection-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ===========================================
   CREATE API KEY MODAL STYLES
   =========================================== */
.create-api-key-modal {
    max-height: 80vh;
    overflow-y: auto;
}

.create-api-key-form {
    margin-bottom: 20px;
}

.scope-section {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px;
    background: var(--bg-input, #2C2C2C);
    border-radius: var(--radius-sm, 8px);
    margin-bottom: 16px;
}

/* ===========================================
   HEADER STYLES
   =========================================== */
.app-header {
    position: fixed;
    top: var(--sat);
    left: 0;
    width: 100%;
    height: 60px;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 100;
    transition: transform 0.3s ease;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
}

.app-header.hidden {
    transform: translateY(-100%);
}

.header-left,
.header-right {
    flex-shrink: 0;
    min-width: 60px;
    display: flex;
    align-items: center;
}

.header-right {
    justify-content: flex-end;
    gap: 8px;
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
}

.nav-tabs {
    display: flex;
    gap: 16px;
    overflow: hidden;
}

.nav-tab {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px 16px;
    position: relative;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.nav-tab-icon {
    width: 18px;
    height: 18px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.nav-tab.active {
    color: var(--text-primary);
    background: rgba(232, 180, 188, 0.1);
}

.nav-tab.active .nav-tab-icon {
    opacity: 1;
    color: var(--color-rose);
}

.nav-tab.active::after {
    content: none;
}

/* Shimmer loading state on nav tab re-tap */
.nav-tab.loading {
    pointer-events: none;
    overflow: hidden;
}

.nav-tab.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(232, 180, 188, 0.3) 50%, transparent 100%);
    animation: nav-tab-shimmer 1.2s ease-in-out infinite;
}

@keyframes nav-tab-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* New posts indicator — green shimmer sweep */
.nav-tab.has-new {
    overflow: hidden;
}
.nav-tab.has-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(74, 222, 128, 0.2) 50%, transparent 100%);
    animation: nav-tab-new-shimmer 2.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes nav-tab-new-shimmer {
    0%   { left: -100%; }
    100% { left: 100%; }
}
.nav-tab.has-new::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 2px;
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.4), rgba(134, 239, 172, 0.8), rgba(74, 222, 128, 0.4));
    border-radius: 2px;
}

/* Header Actions */
.header-menu-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.header-menu-btn:hover {
    background: var(--bg-hover);
}

.header-menu-btn svg {
    width: 24px;
    height: 24px;
}

.header-action-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.header-action-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.header-action-btn svg {
    width: 20px;
    height: 20px;
}

/* Header messages button with badge */
.header-messages-btn {
    position: relative;
}

.header-unread-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-badge);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Header notification button with badge */
.header-notif-btn {
    position: relative;
}

.header-notif-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-badge);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.header-create-btn:hover {
    background: rgba(232, 180, 188, 0.1);
    border-color: rgba(232, 180, 188, 0.3);
    color: var(--color-rose);
}

.header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-input);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.header-avatar:hover {
    border-color: var(--color-rose);
    box-shadow: 0 0 0 3px rgba(232, 180, 188, 0.2);
}

.header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder-sm {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-rose);
}

/* Old icon-btn kept for backward compatibility */
.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    padding: 4px;
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .app-header {
        padding: 0 12px;
    }

    .nav-tabs {
        gap: 4px;
    }

    .nav-tab {
        font-size: 14px;
        padding: 8px 12px;
    }

    .nav-tab-icon {
        display: none;
        /* Скрываем иконки на маленьких экранах */
    }

    .header-left,
    .header-right {
        min-width: 40px;
    }

    .header-right {
        gap: 6px;
    }

    .header-action-btn {
        width: 36px;
        height: 36px;
    }

    .header-action-btn svg {
        width: 18px;
        height: 18px;
    }

    .header-avatar {
        width: 32px;
        height: 32px;
    }

    .main-content {
        padding: 0;
        margin-top: var(--header-height);
    }
}

/* ===========================================
   DESKTOP LAYOUT IMPROVEMENTS
   =========================================== */

/* 1. Базовый сброс для #app, чтобы он не был узким */
#app {
    width: 100%;
    min-height: 100vh;
    background: var(--bg-main);
}

/* 2. Сетка для десктопа (Layout) */
.main-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* Базовые стили для main-content (работают на всех устройствах) */
.main-content {
    margin-top: var(--header-height);
    padding: 0;
    min-height: calc(100vh - var(--header-height));
    box-sizing: border-box;
}

/* Медиа-запрос для ПК (шире 1024px) */
@media (min-width: 1024px) {
    .main-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        grid-template-areas: "sidebar content";
    }

    /* Сайдбар */
    .sidebar {
        grid-area: sidebar;
        transform: translateX(0) !important;
        position: sticky;
        top: 0;
        height: 100vh;
        background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-main) 100%);
        border-right: 1px solid var(--border-color);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
        z-index: 100;
        display: flex !important;
        width: 280px;
    }

    /* Скрываем затемнение фона на десктопе */
    .sidebar-overlay {
        display: none !important;
    }

    /* Хедер */
    .app-header {
        position: fixed;
        width: calc(100% - 280px);
        left: 280px;
        backdrop-filter: blur(10px);
        background: rgba(10, 10, 10, 0.85);
        border-bottom: 1px solid var(--border-color);
        z-index: 90;
    }

    .main-content {
        margin-top: var(--header-height);
        padding: 0;
        min-height: calc(100vh - var(--header-height));
    }

    /* Скрываем кнопку меню на десктопе */
    .app-header .icon-btn[onclick*="sidebar"] {
        display: none;
    }
}

/* 3. Улучшения для диалоговых окон на десктопе */
@media (min-width: 600px) {
    .modal-content {
        max-width: 450px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }

    .create-api-key-modal {
        max-width: 500px;
    }
}

/* 4. Chat list wrapper - no extra padding needed, main-content handles header offset */
.chat-list-wrapper {
    padding-top: 0;
}

/* 5. Component specific styles */
.chat-list-container {
    padding: var(--page-padding);
    max-width: var(--content-width);
    margin: 0 auto;
}

.chat-list {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

@media (min-width: 768px) {
    .chat-list {
        gap: 4px;
    }
}

/* Empty State - Premium Design */
.empty-state {
    text-align: center;
    padding: 60px 40px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.empty-state-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 32px;
    background: linear-gradient(135deg, rgba(232, 180, 188, 0.1) 0%, rgba(139, 46, 168, 0.1) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.empty-state-icon::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    padding: 2px;
    background: var(--gradient-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.3;
}

.empty-state-icon svg {
    width: 56px;
    height: 56px;
    color: var(--color-rose);
}

.empty-state-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 16px 0;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.empty-state-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 32px 0;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.empty-state-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.empty-state-actions .btn-primary,
.empty-state-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-family: inherit;
}

.empty-state-actions .btn-primary {
    background: var(--gradient-primary);
    color: #fff;
}

.empty-state-actions .btn-primary:hover {
    opacity: 0.9;
}

.empty-state-actions .btn-secondary {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.empty-state-actions .btn-secondary:hover {
    background: var(--bg-card);
}

.btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.empty-state-hint {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid var(--border-color-gold);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-secondary);
}

.hint-icon {
    width: 20px;
    height: 20px;
    color: var(--color-gold);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .empty-state {
        padding: 40px 24px;
    }

    .empty-state-title {
        font-size: 24px;
    }

    .empty-state-description {
        font-size: 14px;
    }

    .empty-state-actions {
        flex-direction: column;
    }

    .empty-state-actions .btn-primary,
    .empty-state-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .empty-state-hint {
        flex-direction: column;
        text-align: center;
    }
}

.home-title {
    font-size: 3rem;
}

.home-btn {
    padding: 14px 32px;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
}

.auth-link {
    margin-top: 16px;
    display: inline-block;
}

.auth-back-btn {
    margin-top: 16px;
    background: none;
    border: none;
    cursor: pointer;
}

/* ===========================================
   DEBUG PANEL
   =========================================== */
#debug-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

.debug-panel-inner {
    background: rgba(0, 0, 0, 0.95);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color-gold);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    font-size: 12px;
}

.debug-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--color-gold);
}

.debug-panel-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.debug-panel-buttons button {
    padding: 6px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
}

.debug-panel-buttons button:hover {
    background: var(--bg-hover);
    border-color: var(--border-color-hover);
}

.debug-panel-buttons .debug-exit {
    background: var(--color-error);
    border: none;
    color: white;
    margin-top: 4px;
}

.debug-panel-buttons .debug-exit:hover {
    opacity: 0.9;
}

/* ===========================================
   ERROR PAGE
   =========================================== */
.error-home-btn {
    margin-top: 24px;
    text-decoration: none;
    display: inline-block;
}

.error-icon {
    width: 48px;
    height: 48px;
}

/* ===========================================
   CREATE CHANNEL PAGE
   =========================================== */
.create-channel-page {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--page-padding);
}

.create-channel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding: 8px 0;
}

.create-channel-header h1 {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

/* Edit author info (for multi-admin channels) */
.edit-author-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--bg-input);
    border-radius: 12px;
    font-size: 14px;
}

.edit-author-info .avatar {
    flex-shrink: 0;
}

.edit-author-label {
    color: var(--text-secondary);
}

.edit-author-name {
    color: var(--text-primary);
    font-weight: 500;
}

.close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
    flex-shrink: 0;
}

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

.close-btn .icon-sm {
    width: 20px;
    height: 20px;
}

/* Header with channel info */
.header-with-channel {
    flex: 1;
    min-width: 0;
}

.channel-mini-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.channel-mini-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.channel-mini-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channel-mini-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-rose) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.channel-mini-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.channel-mini-text h1 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.channel-mini-name {
    font-size: 14px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.create-channel-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Avatar Upload */
.avatar-upload-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.channel-avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s;
}

.channel-avatar-preview:hover {
    border-color: var(--color-gold);
    background: var(--bg-hover);
}

.channel-avatar-preview.has-image {
    border-style: solid;
    border-color: var(--color-gold);
}

.channel-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channel-avatar-preview .avatar-placeholder {
    color: var(--text-muted);
}

.avatar-upload-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.channel-avatar-preview.uploading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.channel-avatar-preview.uploading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.7;
    }
}

/* Cover Upload */
.cover-upload-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.channel-cover-preview {
    width: 180px;
    height: 100px;
    border-radius: 12px;
    background: var(--bg-input);
    border: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s;
}

.channel-cover-preview:hover {
    border-color: var(--color-gold);
    background: var(--bg-hover);
}

.channel-cover-preview.has-image {
    border-style: solid;
    border-color: var(--color-gold);
}

.channel-cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-placeholder {
    color: var(--text-muted);
}

.cover-upload-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.channel-cover-preview.uploading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.channel-cover-preview.uploading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    animation: pulse 1s ease-in-out infinite;
}

/* Type Selector */
.channel-type-selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.type-option {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.type-option:hover {
    border-color: var(--border-color-hover);
    background: var(--bg-hover);
}

.type-option.selected {
    border-color: var(--color-gold);
    background: rgba(212, 175, 55, 0.05);
}

.type-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.type-option.selected .type-icon {
    background: var(--gradient-gold);
    color: var(--bg-main);
}

.type-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.type-name {
    font-weight: 600;
    color: var(--text-primary);
}

.type-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Form Sections */
.form-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-label .optional {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 13px;
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

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

/* Input with prefix */
.input-with-prefix {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.input-with-prefix:focus-within {
    border-color: var(--color-gold);
}

.input-with-prefix.valid {
    border-color: var(--color-success, #00D166);
}

.input-with-prefix.invalid {
    border-color: var(--color-error, #FF4B4B);
}

.input-prefix {
    padding: 0 12px;
    color: var(--text-muted);
    font-weight: 500;
    border-right: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.input-with-prefix .form-input {
    border: none;
    border-radius: 0;
    flex: 1;
}

.input-with-prefix .form-input:focus {
    border: none;
    box-shadow: none;
}

/* Settings List */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--bg-input);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.setting-item + .setting-item {
    margin-top: 8px;
}

.setting-item:hover {
    background: var(--bg-hover);
}

.setting-item.setting-item-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.setting-item.setting-item-disabled .toggle {
    cursor: not-allowed;
}

/* Disabled form section */
.form-section-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.form-section-disabled .type-option {
    cursor: not-allowed;
}

.setting-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-name {
    font-weight: 500;
    color: var(--text-primary);
}

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

/* Toggle Switch */
.toggle {
    appearance: none;
    width: 48px;
    height: 28px;
    background: var(--bg-secondary);
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle:checked {
    background: var(--gradient-gold);
}

.toggle:checked::before {
    transform: translateX(20px);
}

/* Form Actions */
.form-actions {
    margin-top: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.form-actions .btn-lg {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
}

/* Danger Zone */
.danger-zone {
    margin-top: 32px;
    padding: 20px;
    border: 1px solid var(--color-error);
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.05);
}

.danger-zone-title {
    color: var(--color-error);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.danger-zone-desc {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.btn-danger {
    background: var(--color-error);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-danger:hover {
    background: var(--color-error-hover);
    transform: translateY(-1px);
}

.btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Icon sizes */
.icon-sm {
    width: 20px;
    height: 20px;
}

.icon-md {
    width: 24px;
    height: 24px;
}

.icon-lg {
    width: 32px;
    height: 32px;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .create-channel-page {
        padding: var(--page-padding);
    }

    .create-channel-header h1 {
        font-size: 20px;
    }

    .avatar-upload-section {
        flex-direction: column;
        text-align: center;
    }

    .type-option {
        padding: 12px;
    }

    .type-icon {
        width: 40px;
        height: 40px;
    }
}

/* ===========================================
   CHANNEL PAGE STYLES
   =========================================== */
.channel-page {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--page-padding);
}

.channel-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* Cover Section - визуально отличается от профиля (кавер вместо аватарки) */
.channel-cover-section {
    position: relative;
    height: 200px;
    background: var(--bg-secondary);
    overflow: visible;
    /* Allow icon to overflow */
}

/* Container for cover image to clip it properly */
.channel-cover-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    z-index: 0;
}

.channel-cover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.channel-cover-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.channel-cover-pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(232, 180, 188, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 46, 168, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(212, 175, 55, 0.08) 0%, transparent 30%);
    opacity: 0.8;
}

.channel-cover-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, var(--bg-card) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* Stats badge on cover - compact design */
.channel-cover-stats {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    color: white;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.cover-stat-icon {
    width: 16px;
    height: 16px;
    color: white;
    opacity: 0.9;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.cover-stat-value {
    font-size: 14px;
    font-weight: 600;
    color: white;
    opacity: 0.95;
}

/* Right Stack for buttons */
.channel-cover-left-stack {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 15;
}

.channel-cover-right-stack {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    z-index: 15;
}

/* Menu button & Public button (Shared styles) */
.channel-menu-btn,
.channel-public-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
    justify-content: center;
    transition: all 0.2s ease;
}

.channel-menu-btn:hover,
.channel-public-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.channel-menu-btn svg,
.channel-public-btn svg {
    width: 20px;
    height: 20px;
    opacity: 0.9;
}

/* Public specific style */
.channel-public-btn {
    color: white;
    opacity: 0.85;
}

.channel-public-btn:hover {
    color: white;
    opacity: 1;
}

/* Channel icon - маленький бейдж внутри кавера */
.channel-icon-wrapper {
    position: absolute;
    bottom: -32px;
    left: 24px;
    width: 80px;
    height: 80px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card);
    border: 4px solid var(--bg-card);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 20;
    /* Above cover and overlay */
}

.channel-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channel-icon-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    font-size: 32px;
    font-weight: 700;
    color: white;
}

/* Info Section */
.channel-info-section {
    padding: 48px 24px 24px;
}

.channel-info-section.channel-info-compact {
    padding: 20px 24px 20px;
}

.channel-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.channel-type-channel {
    background: rgba(139, 46, 168, 0.15);
    color: #B966D3;
    border: 1px solid rgba(139, 46, 168, 0.3);
}

.channel-type-group {
    background: rgba(0, 209, 102, 0.1);
    color: var(--color-success);
    border: 1px solid rgba(0, 209, 102, 0.3);
}

.channel-type-badge .badge-icon {
    width: 14px;
    height: 14px;
}

/* Шапка канала с аватаркой */
.channel-header-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 0;
    padding-bottom: 16px;
}

.channel-avatar-mini {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--bg-elevated), var(--bg-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
        0 0 0 2px rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.channel-avatar-mini:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25),
        0 0 0 2px rgba(255, 255, 255, 0.12);
}

.channel-avatar-mini .channel-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channel-avatar-mini .channel-avatar-letter {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-secondary);
}

.channel-avatar-mini .channel-avatar-saved {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--gradient-saved);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.channel-header-row .channel-title {
    margin: 0;
    flex: 1;
}

.channel-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.channel-alias {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: var(--color-rose);
    background: rgba(232, 180, 188, 0.1);
    padding: 4px 10px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.channel-alias:hover {
    background: rgba(232, 180, 188, 0.2);
    transform: translateY(-1px);
}

.channel-alias:active {
    transform: translateY(0);
}

.copy-icon {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.channel-alias:hover .copy-icon {
    opacity: 1;
}

.channel-description {
    font-size: 14px;
    color: var(--text-tertiary);
    line-height: 1.55;
    margin: 0;
    padding: 0 0 8px 0;
}

/* Stats */
.channel-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg-input);
    border-radius: var(--radius-md);
}

.channel-stat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-icon {
    width: 18px;
    height: 18px;
    color: var(--color-rose);
    opacity: 0.8;
}

.stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.btn-label-short {
    display: none;
}

/* Actions */
.channel-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-channel-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    font-size: 15px;
    flex: 1;
    justify-content: center;
    min-width: 140px;
}

.btn-channel-action[data-action="subscribe"][data-subscribed="true"] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.btn-channel-action[data-action="subscribe"][data-subscribed="true"]:hover {
    background: var(--bg-hover);
}

/* Scheduled post badge in normal post cards */
.post-card.post-scheduled {
    border-left: 3px solid var(--color-accent);
}
.post-scheduled-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 500;
}

/* Channel posts */
.channel-posts {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Post Card */
.post-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all 0.2s;
}

.post-card:hover {
    border-color: var(--border-color-hover);
}

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

.post-author-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

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

.post-author-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: white;
    font-weight: 700;
    font-size: 18px;
}

.post-author-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.post-author-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 15px;
}

.post-author-handle {
    font-size: 13px;
    color: var(--text-secondary);
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.post-date {
    font-size: 13px;
    color: var(--text-muted);
}

.post-menu-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

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

/* Menu button - absolute positioned in corner */
.post-card {
    position: relative;
}

/* Paid post border */
.post-paid {
    border: 2px solid rgba(248, 113, 113, 0.35);
}
.feed-post-wrapper.feed-post-paid {
    border: 2px solid rgba(248, 113, 113, 0.35);
}
.feed-post-wrapper.feed-post-paid:hover {
    border-color: rgba(248, 113, 113, 0.5);
}

.post-menu-btn-corner {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s;
    z-index: 1;
}

.post-menu-btn-corner:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Post Footer - Telegram style */
.post-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

/* Meta info (date + views) - right side, pushed to end */
.post-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: auto;
}

.post-date-subtle {
    opacity: 0.7;
}

a.post-date-subtle {
    text-decoration: none;
    color: inherit;
}

a.post-date-subtle:hover {
    text-decoration: underline;
}


/* Date pill — subtle chip with icon */
.post-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.post-date-pill > svg {
    color: var(--color-rose, #E8B4BC);
    opacity: 0.7;
    flex-shrink: 0;
}
.post-date-pill--scheduled {
    background: rgba(139, 46, 168, 0.08);
    border-color: rgba(139, 46, 168, 0.2);
}
.post-date-pill--scheduled > svg {
    color: var(--color-purple, #8B2EA8);
    opacity: 0.9;
}
.post-date-absolute {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary, #a0a0a0);
}
.post-date-relative {
    color: var(--text-secondary);
    font-size: 11px;
}
.post-date-relative::before {
    content: '·';
    margin: 0 3px;
    opacity: 0.4;
}

/* Self-destruct timer badge */
.self-destruct-timer {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--warning, #f59e0b);
    font-size: 11px;
    opacity: 0.9;
    margin-left: 6px;
}

.self-destruct-timer svg {
    width: 12px;
    height: 12px;
}

.self-destruct-timer .timer-value {
    font-weight: 500;
}

.meta-separator {
    opacity: 0.4;
}

.post-views-inline {
    display: flex;
    align-items: center;
    gap: 3px;
}

.post-views-inline .views-count {
    font-size: 12px;
}

.icon-xs {
    width: 12px;
    height: 12px;
}

/* Reactions — display:contents makes chips direct flex children of .post-footer */
.post-reactions {
    display: contents;
}

.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.reaction-chip:hover {
    background: var(--bg-input);
    border-color: var(--color-purple);
}

.reaction-chip.reaction-active {
    background: var(--color-purple);
    border-color: var(--color-purple);
}

.reaction-chip.reaction-active .reaction-count {
    color: white;
}

.reaction-emoji {
    font-size: 16px;
    line-height: 1;
}

.reaction-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.reaction-add-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    background: none;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.reaction-add-btn:hover {
    background: var(--bg-hover);
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.reaction-add-btn .icon-xs {
    width: 14px;
    height: 14px;
}

/* Views (right side) */
.post-views {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}

.post-views .icon-sm {
    width: 16px;
    height: 16px;
}

.post-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 16px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Collapsible long text */
.post-text-wrap.collapsed .post-text {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

.text-expand {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 0 12px;
    text-align: center;
}

.text-expand:hover {
    color: var(--color-rose);
}

/* Text formatting styles */
.post-text b,
.post-text strong {
    font-weight: 600;
}

.post-text i,
.post-text em {
    font-style: italic;
}

.post-text u {
    text-decoration: underline;
}

.post-text s,
.post-text del,
.post-text strike {
    text-decoration: line-through;
    opacity: 0.7;
}

.post-text code {
    background: var(--bg-hover);
    color: var(--color-rose);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 0.9em;
}

.post-text pre {
    background: var(--bg-hover);
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
    font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 0;
}

.post-text pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.post-text a {
    color: var(--color-rose);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

.post-text a:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* Caption formatting (same styles) */
.post-media-caption {
    font-size: 14px;
    color: var(--text-secondary);
    padding: 8px 12px;
    line-height: 1.5;
}

.post-media-caption b,
.post-media-caption strong {
    font-weight: 600;
}

.post-media-caption i,
.post-media-caption em {
    font-style: italic;
}

.post-media-caption u {
    text-decoration: underline;
}

.post-media-caption s,
.post-media-caption del {
    text-decoration: line-through;
}

.post-media-caption code {
    background: var(--bg-hover);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
}

.post-media-caption a {
    color: var(--color-purple);
    text-decoration: none;
}

/* Post Media */
.post-media {
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.post-media-single {
    display: block;
}

.post-media-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.post-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 4px;
}

.post-media-item {
    position: relative;
}

.post-media-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
}

.post-media-caption {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 8px;
    line-height: 1.4;
}

.post-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px;
}

.post-stats {
    display: flex;
    align-items: center;
    gap: 16px;
}

.post-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}

.post-stat .stat-icon {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.post-stat .stat-value {
    font-weight: 600;
}

.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--bg-input);
    border-radius: 12px;
    font-size: 13px;
}

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

.post-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.post-action-btn:hover {
    background: var(--bg-hover);
    color: var(--color-rose);
}

/* Media Preview in Editor */
.media-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}


.media-preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--border-color);
    background: var(--bg-input);
    cursor: grab;
    transition: opacity 0.2s, border-color 0.2s;
}

.media-preview-item.dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.media-preview-item.drag-over {
    border-color: var(--color-rose);
}

.media-preview-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 2;
}

.media-remove-btn:hover {
    background: var(--color-error);
    transform: scale(1.1);
}

.media-caption-input {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    border: none;
    color: white;
    font-size: 13px;
    z-index: 1;
}

.media-caption-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.media-caption-input:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.9);
}

/* Upload progress overlay (.media-preview-item already has position: relative) */
.upload-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    z-index: 2;
}

.upload-progress {
    width: 48px;
    height: 48px;
    transform: rotate(-90deg);
}

.upload-progress-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 3;
}

.upload-progress-fill {
    fill: none;
    stroke: var(--color-rose);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 125.6;
    stroke-dashoffset: 125.6;
    transition: stroke-dashoffset 0.15s ease;
}

.upload-cancel {
    position: absolute;
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.upload-cancel:hover {
    opacity: 1;
}

.upload-retry {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    z-index: 2;
    cursor: pointer;
    color: var(--color-rose);
    font-size: 13px;
}

/* Content placeholder */
.channel-content-placeholder {
    margin-top: 24px;
}

.empty-state-mini {
    text-align: center;
    padding: 48px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.empty-state-mini .empty-icon {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.empty-state-mini p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

/* Error state */
.channel-page-error {
    text-align: center;
    padding: 80px 40px;
    max-width: 480px;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 640px) {
    .channel-cover-section {
        height: 160px;
    }

    .channel-cover-image,
    .channel-cover-placeholder {
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }

    .channel-cover-stats {
        bottom: 10px;
        right: 10px;
        gap: 5px;
    }

    .cover-stat-icon {
        width: 14px;
        height: 14px;
    }

    .cover-stat-value {
        font-size: 13px;
    }

    .channel-cover-left-stack {
        top: 10px;
        left: 10px;
    }

    .channel-cover-right-stack {
        top: 10px;
        right: 10px;
        gap: 2px;
    }

    .channel-menu-btn,
    .channel-public-btn {
        width: 28px;
        height: 28px;
    }

    .channel-menu-btn svg,
    .channel-public-btn svg {
        width: 18px;
        height: 18px;
    }

    .channel-icon-wrapper {
        width: 64px;
        height: 64px;
        bottom: -24px;
        left: 16px;
        border-width: 3px;
        border-radius: 12px;
    }

    .channel-icon-placeholder {
        font-size: 24px;
    }

    .channel-info-section {
        padding: 40px 16px 20px;
    }

    .channel-info-section.channel-info-compact {
        padding: 16px 16px 10px;
    }

    .channel-header-row {
        gap: 12px;
        padding-bottom: 14px;
    }

    .channel-avatar-mini {
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }

    .channel-title {
        font-size: 20px;
    }

    .channel-stats {
        flex-direction: column;
        gap: 12px;
    }

    .channel-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        padding-top: 14px;
        gap: 6px;
    }

    .btn-channel-action {
        flex: 1;
        min-width: 0;
        padding: 10px 6px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .btn-channel-action .btn-label-full {
        display: none;
    }

    .btn-channel-action .btn-label-short {
        display: inline;
    }

    .post-card {
        padding: 16px;
    }

    .post-card>.forwarded-header {
        margin: -16px -16px 12px -16px;
        padding: 10px 16px;
    }

    .post-media-grid {
        grid-template-columns: 1fr;
    }

    .media-preview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* ===========================================
   CREATE POST FORM - Additional Styles
   =========================================== */

/* Form label with optional text */
.form-label-optional {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 13px;
    margin-left: 4px;
}

/* Button with icon on the left */
.btn-icon-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-icon-left .btn-icon {
    margin: 0;
}

/* Collapsible sections */
.form-section-collapsible {
    margin-bottom: 20px;
}

.collapsible-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.collapsible-trigger:hover {
    background: var(--bg-hover);
    border-color: var(--color-purple);
}

.collapsible-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.collapsible-trigger span:nth-of-type(2) {
    flex: 1;
}

.collapsible-badge {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    background: var(--bg-hover);
    padding: 4px 10px;
    border-radius: 12px;
}

.collapsible-content {
    padding: 16px 16px 0 16px;
    animation: slideDown 0.2s ease;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.collapsible-content .form-input {
    margin-bottom: 8px;
}

.collapsible-content .hint {
    display: block;
    margin-bottom: 12px;
}

.schedule-recent-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.schedule-chip {
    padding: 6px 14px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.schedule-chip:hover {
    background: var(--accent-bg, var(--bg-active));
    border-color: var(--accent-color, var(--border-active));
    color: var(--text-primary);
}

/* Form hints row */
.form-hints-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.hint-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.hint-link:hover {
    color: var(--color-purple);
    background: var(--bg-hover);
}

.hint-link .icon-xs {
    width: 14px;
    height: 14px;
}

.hint-collapsible {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-purple);
}

.hint-collapsible .hint {
    margin: 0;
    font-size: 12px;
}

.fmt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fmt-tag {
    padding: 4px 8px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary, var(--bg-hover));
    color: var(--text-secondary);
    font-family: monospace;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.fmt-tag:hover {
    background: var(--accent-bg, var(--bg-active));
    border-color: var(--accent-color, var(--border-active));
    color: var(--text-primary);
}

/* ===========================================
   DROPDOWN MENU
   =========================================== */
.dropdown-menu {
    position: fixed;
    z-index: 10000;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: 180px;
    padding: 6px;
    opacity: 0;
    transform: scale(0.95);
    transform-origin: top right;
    transition: all 0.15s ease;
    /* Prevent text selection on mobile */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.dropdown-visible {
    opacity: 1;
    transform: scale(1);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
}

.dropdown-item:hover {
    background: var(--bg-hover);
}

.dropdown-item-danger {
    color: var(--color-error, #FF4B4B);
}

.dropdown-item-danger:hover {
    background: rgba(255, 75, 75, 0.1);
}

.dropdown-separator {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

.dropdown-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ===========================================
   CONTEXT MENU — unified system
   =========================================== */
.ctx-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
body.ctx-open {
    overflow: hidden !important;
    touch-action: none;
}
.ctx-menu {
    position: fixed;
    z-index: 9999;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    min-width: 180px;
    padding: 6px;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    overflow: visible;
}
.ctx-menu.ctx-visible {
    opacity: 1;
    transform: scale(1);
}
.ctx-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 15px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.ctx-item:active {
    background: var(--bg-hover);
}
.ctx-item--danger {
    color: var(--color-error, #FF4B4B);
}
.ctx-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.ctx-separator {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* ===========================================
   REACTION PICKER (Telegram style)
   =========================================== */
.reaction-picker {
    position: fixed;
    z-index: 1000;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    padding: 8px;
    opacity: 0;
    transform: scale(0.9) translateY(10px);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reaction-picker-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.reaction-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.reaction-picker-item {
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reaction-picker-item:hover {
    background: var(--bg-hover);
    transform: scale(1.2);
}

.reaction-picker-item:active {
    transform: scale(1.1);
}

/* Radio group for self-destruct type selection */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio-option:hover {
    background: var(--bg-hover);
    border-color: var(--color-purple);
}

.radio-option input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-purple);
}

.radio-option input[type="radio"]:checked+span {
    color: var(--text-primary);
    font-weight: 500;
}

.radio-option span {
    color: var(--text-secondary);
    font-size: 15px;
    transition: all 0.2s ease;
}

/* Conditional fields (timer/views) */
.conditional-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-purple);
}

.conditional-fields .form-input {
    background: var(--bg-card);
}

.conditional-fields .hint {
    margin-top: 4px;
    font-size: 12px;
}

/* =============================================================================
   CHAT STYLES - Telegram-like UI
   ============================================================================= */

/* Dialog List */
.chat-list-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-primary);
}

.chat-list-search {
    padding: 15px 15px 10px;
    border-bottom: 0px solid var(--border-color);
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    width: 18px;
    height: 18px;
}

.search-input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    background: var(--bg-input);
    border: 0px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
}

.search-input:focus {
    border-color: var(--color-purple);
    background: var(--bg-card);
}

.chat-list {
    flex: 1;
    overflow-y: auto;
}

/* Dialog Item */
.dialog-item,
.dialog-item * {
    /* Prevent system selection menu on long press */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Force text elements to not capture touch events - parent handles them */
.dialog-item .dialog-title,
.dialog-item .dialog-preview,
.dialog-item .dialog-time,
.dialog-item .preview-sender {
    pointer-events: none;
}

.dialog-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0px 15px;
    cursor: pointer;
    transition: background 0.15s;
    min-height: 68px;
    touch-action: manipulation;
}

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

.dialog-item.pinned {
    background: rgba(138, 43, 226, 0.05);
}

.dialog-item.unread .dialog-title {
    font-weight: 600;
}

/* Long-press highlight for context menu */
.dialog-item.dialog-item-pressed {
    background: var(--bg-hover);
    transform: scale(0.98);
    transition: background 0.1s, transform 0.1s;
}

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

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

.dialog-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.dialog-avatar-saved {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--gradient-saved);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* Verified badge on dialog avatar (small) */
.verified-badge-sm {
    position: absolute;
    width: 18px;
    height: 18px;
    bottom: -2px;
    right: -2px;
    z-index: 10;
}

.verified-badge-sm svg {
    width: 100%;
    height: 100%;
}

.dialog-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.dialog-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.dialog-type-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}

.dialog-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.dialog-last-seen {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.7;
    pointer-events: none;
}

.dialog-muted-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}

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

.dialog-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.dialog-preview {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.preview-sender {
    color: #5BC0DE;
    font-weight: 500;
}

.preview-service {
    color: var(--color-text-secondary, #8a8a8e);
    font-style: italic;
}

/* Typing indicator in dialog list */
.dialog-preview.is-typing {
    color: var(--color-accent, #64B5F6);
}

.typing-preview {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-accent, #64B5F6);
}

.dialog-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.dialog-pinned {
    color: var(--text-muted);
}

.dialog-unread {
    background: var(--color-purple);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.dialog-unread.muted {
    background: var(--text-muted);
}

/* Chat View - Modern Grid Layout */
.chat-view {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: calc(100vh - var(--header-height));
    /* Subtract header height */
    height: calc(100dvh - var(--header-height));
    background: var(--bg-primary);
    overflow: hidden;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
}

/* Desktop with sidebar */
@media (min-width: 1024px) {
    .chat-view {
        left: 280px;
        /* Sidebar width */
        height: calc(100vh - var(--header-height));
        height: calc(100dvh - var(--header-height));
    }
}

.chat-header {
    grid-row: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    min-height: 60px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.chat-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-back-btn:hover {
    background: var(--bg-hover);
}

.chat-back-btn:active {
    transform: scale(0.95);
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    cursor: pointer;
    min-width: 0;
    padding: 6px 8px;
    margin: -6px -8px;
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.chat-header-info:hover {
    background: var(--bg-hover);
}

.chat-header-info:active {
    background: var(--bg-input);
}

.chat-header-avatar,
.chat-header-avatar-placeholder,
.chat-header-avatar-saved {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Avatar wrapper for online indicator */
.avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.online-indicator {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    background: var(--color-online);
    border: 2px solid var(--bg-primary);
    border-radius: 50%;
    z-index: 1;
}

.chat-header-avatar {
    object-fit: cover;
}

.chat-header-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    /* background set via inline style from getAvatarColor() */
    color: white;
    font-size: 18px;
    font-weight: 600;
}

.chat-header-avatar-saved {
    background: var(--gradient-saved);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.chat-header-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-header-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.chat-header-subtitle.online {
    color: var(--color-online);
}

.chat-header-subtitle.hidden-subtitle,
.chat-header-subtitle-wrapper .hidden-subtitle {
    display: none !important;
}

/* Stable height wrapper to prevent header jumping */
.chat-header-subtitle-wrapper {
    display: block;
    height: 18px;
    line-height: 18px;
    overflow: hidden;
}

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

.chat-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.chat-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Hide search on very small screens */
@media (max-width: 360px) {
    .chat-header-actions .chat-action-btn[data-action="search"] {
        display: none;
    }
}

/* Messages Container - column-reverse for auto scroll to bottom */
.chat-messages {
    grid-row: 2;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 10px;
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    min-height: 0;
    /* Important for grid overflow */
}

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

.chat-empty p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.empty-icon-sm {
    width: 64px;
    height: 64px;
    opacity: 0.4;
    color: var(--color-purple);
}

/* Message Bubbles */
.message {
    display: flex;
    max-width: 85%;
    animation: messageAppear 0.2s ease-out;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

@keyframes messageAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.message-other {
    align-self: flex-start;
}

.message-bubble {
    padding: 6px 12px;
    max-width: 100%;
    word-wrap: break-word;
    position: relative;
    overflow: hidden;
}

.message-own .message-bubble {
    background: var(--gradient-chat-bubble);
    color: white;
    border-bottom-right-radius: 4px;
}

.message-other .message-bubble {
    background: var(--bg-card);
    color: var(--text-primary);
    /*border: 1px solid var(--border-color);*/
    border-bottom-left-radius: 4px;
}

/* Desktop: fixed bubble width like Telegram */
@media (min-width: 768px) {
    .message-bubble {
        max-width: 480px;
    }
}

.message-text {
    font-size: 14px;
    line-height: 1.35;
    white-space: pre-wrap;
}

/* Links in message text */
.message-text a:not(.mention-link):not(.link-preview-card) {
    color: #bb86fc;
    text-decoration: none;
}

.message-text a:not(.mention-link):not(.link-preview-card):hover {
    text-decoration: underline;
}

.message-own .message-text a:not(.mention-link):not(.link-preview-card) {
    color: #e8d5ff;
}

/* File attachments (documents) */
.message-documents {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
}

/* Link preview cards */
.link-preview-card {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 8px 10px;
    margin-top: 6px;
    border-radius: 8px;
    border-left: 3px solid var(--color-primary, #8B2EA8);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
    overflow: hidden;
    max-width: 100%;
}

.link-preview-card:hover {
    background: rgba(255, 255, 255, 0.12);
}

.link-preview-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.link-preview-domain {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-preview-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary, #fff);
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.link-preview-desc {
    font-size: 13px;
    color: var(--color-text-secondary, rgba(255,255,255,0.6));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

.link-preview-image {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    align-self: center;
}

/* Link preview — own messages (purple gradient bg) */
.message-own .link-preview-card {
    border-left-color: rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.15);
}

.message-own .link-preview-card:hover {
    background: rgba(0, 0, 0, 0.22);
}

.message-own .link-preview-domain {
    color: rgba(255, 255, 255, 0.85);
}

.message-own .link-preview-desc {
    color: rgba(255, 255, 255, 0.75);
}

/* Link preview — other's messages (dark grey bg) */
.message-other .link-preview-card {
    border-left-color: #bb86fc;
}

.message-other .link-preview-domain {
    color: #bb86fc;
}

.file-attachment {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
    min-width: 200px;
}

.file-attachment:hover {
    background: rgba(255, 255, 255, 0.12);
}

.file-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--color-rose, #ff6987);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.file-ext {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.file-size {
    font-size: 11px;
    color: var(--color-text-secondary, #aaa);
}

.file-download-icon {
    width: 20px;
    height: 20px;
    color: var(--color-text-secondary, #aaa);
    flex-shrink: 0;
}

/* Audio track player (voice-player style) */
.message-audios {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
}

.audio-track {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    max-width: 320px;
}

.audio-play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.15s;
}

.message-other .audio-play-btn {
    background: rgba(139, 46, 168, 0.2);
    color: var(--color-purple);
}

.audio-play-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.audio-play-btn svg {
    width: 20px;
    height: 20px;
}

/* Play/pause icon toggle (same pattern as voice-player) */
.audio-track .audio-icon-pause { display: none; }
.audio-track.playing .audio-icon-play { display: none; }
.audio-track.playing .audio-icon-pause { display: block; }

.audio-track-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audio-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.message-other .audio-progress-bar {
    background: rgba(139, 46, 168, 0.15);
}

.audio-progress-fill {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 2px;
    transition: width 0.1s linear;
}

.message-other .audio-progress-fill {
    background: var(--color-purple, #9b59b6);
}

.audio-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.audio-title {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-other .audio-title {
    color: var(--text-primary, #fff);
}

.audio-performer {
    color: rgba(255, 255, 255, 0.5);
}

.message-other .audio-performer {
    color: var(--text-muted, #999);
}

.audio-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.message-other .audio-time {
    color: var(--text-muted);
}

/* Bot commands (clickable /start, /help, etc.) */
.bot-command {
    color: var(--color-rose);
    cursor: pointer;
    font-weight: 500;
    background: rgba(255, 105, 135, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.bot-command:hover {
    background: rgba(255, 105, 135, 0.25);
    text-decoration: none;
}

.bot-command:active {
    background: rgba(255, 105, 135, 0.35);
}

/* Bot badge (robot icon for non-verified bots) */
.bot-badge-sm {
    position: absolute;
    z-index: 1;
    width: 18px;
    height: 18px;
    bottom: -2px;
    right: -2px;
    background: var(--color-purple);
    border-radius: 50%;
    padding: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.bot-badge-sm svg {
    width: 100%;
    height: 100%;
}

.message-media {
    margin: 0 -12px 6px -12px;
}

.message-media .message-image,
.message-media .message-video {
    width: 100%;
    border-radius: 0;
}

/* First element in bubble - round top corners */
.message-bubble>.message-media:first-child .message-image,
.message-bubble>.message-media:first-child .message-video {
    border-radius: 8px 8px 0 0;
}

/* After reply/forward header - no top radius */
.reply-to-bubble+.message-media .message-image,
.reply-to-bubble+.message-media .message-video,
.forwarded-header+.message-media .message-image,
.forwarded-header+.message-media .message-video {
    border-radius: 0;
}

.message-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 12px;
    cursor: pointer;
}

.message-video {
    max-width: 100%;
    max-height: 300px;
    border-radius: 12px;
}

.message-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-top: 1px;
}

.message-time {
    font-size: 11px;
    opacity: 0.27;
}

.message-edited-tag {
    font-size: 11px;
    font-style: italic;
    opacity: 0.27;
}

.message-own .message-time,
.message-own .message-edited-tag {
    color: rgba(255, 255, 255, 0.7) !important;
}

.message-status {
    display: flex;
    color: rgba(255, 255, 255, 0.7);
}

.message-status .icon-xs {
    width: 14px;
    height: 14px;
}

/* Media with overlay meta (no text, like Telegram) */
.message-bubble.has-media-overlay {
    position: relative;
    padding-bottom: 0;
}

.message-bubble.has-media-overlay .mg-mode-chat {
    margin-bottom: 0;
}

.message-bubble.has-media-overlay .message-meta {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.5);
    padding: 3px 8px;
    border-radius: 8px;
    margin-top: 0;
}

.message-bubble.has-media-overlay .message-meta .message-time {
    color: #fff !important;
    opacity: 1;
}

.message-bubble.has-media-overlay .message-meta .message-status {
    color: #fff;
}

/* Date Separator */
.message-date-separator {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

.message-date-separator span {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Service/system messages (member_joined, member_left, etc.) */
.message-service {
    display: flex;
    justify-content: center;
    padding: 6px 14px;
    margin: 8px auto 2px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    width: fit-content;
}

.service-msg-text {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.4;
}

.service-msg-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px 2px 3px;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-rose, #e8a0bf);
    font-weight: 500;
    font-size: 13px;
    transition: background 0.15s;
}
.service-msg-chip:hover {
    background: rgba(255, 255, 255, 0.12);
}
.service-msg-chip-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.service-msg-chip-avatar-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
}
.service-msg-chip-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Service message inline icon (universal — calls, etc.) */
.service-msg-icon {
    display: inline-flex;
    vertical-align: middle;
    color: var(--color-success);
    margin-right: 2px;
}

.service-msg-icon svg {
    width: 14px;
    height: 14px;
}

.service-msg-icon--bad {
    color: var(--color-error);
}

/* Tip Message - Golden bubble */
.message-bubble.has-tip {
    background: linear-gradient(135deg, #FFC107 0%, #FF8F00 100%) !important;
    border: none !important;
    min-width: 100px;
    position: relative;
}

.message-own .message-bubble.has-tip {
    background: linear-gradient(135deg, #FFD54F 0%, #FF9800 100%) !important;
}

.tip-message-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
}

.tip-message-content .tip-value {
    font-size: 42px;
    font-weight: 800;
    color: #3E2700;
    line-height: 1;
}

/* Tip corner icon - top right */
.tip-corner-icon {
    position: absolute;
    top: 6px;
    right: 8px;
    line-height: 1;
}

.tip-corner-icon .icon-tip-corner {
    width: 20px;
    height: 20px;
    color: #C12B1A;
}

/* Tip meta label */
.tip-meta-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(62, 39, 0, 0.6);
    letter-spacing: 0.5px;
}

.tip-meta-dot {
    font-size: 11px;
    color: rgba(62, 39, 0, 0.6);
    margin: 0 4px;
}

/* Fix time color for tip messages */
.message-bubble.has-tip .message-time {
    color: rgba(62, 39, 0, 0.55) !important;
}

.message-bubble.has-tip .message-status {
    color: rgba(62, 39, 0, 0.55) !important;
}

/* ===========================================
   STICKER MESSAGES
   =========================================== */

.message-sticker {
    margin-top: 4px;
    margin-bottom: 4px;
}

.message-sticker .sticker-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 200px;
}

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

.sticker-image {
    object-fit: contain;
    border-radius: 4px;
    transition: transform 0.15s ease;
    /* iOS Safari WebP transparency fix - force GPU layer */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sticker-image:hover {
    transform: scale(1.05);
}

.sticker-emoji-large {
    font-size: 100px;
    line-height: 1;
}

/* Video stickers in messages */
video.sticker-image {
    border-radius: 4px;
}

.sticker-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-top: 4px;
    background: var(--bg-card);
    border-radius: 10px;
    font-size: 11px;
}

.message-sticker.message-own .sticker-meta {
    background: rgba(138, 43, 226, 0.2);
}

.sticker-meta .message-time {
    color: var(--text-muted);
}

.sticker-meta .message-status {
    color: var(--text-muted);
}

/* Sticker with reply - Telegram-style horizontal layout */
.message-sticker .sticker-reply-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
}

/* For other person's sticker replies - reply bubble on the RIGHT of sticker */
.message-sticker.message-other .sticker-reply-wrapper {
    flex-direction: row-reverse;
}

/* Reply bubble for stickers - always shows OTHER person's message */
.sticker-reply-bubble {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--bg-card);
    border-radius: 6px 0px 0px 6px;
    padding: 2px 4px 4px 6px;
    max-width: 180px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-left: 3px solid var(--color-primary, #8B2EA8);
}

.sticker-reply-bubble:hover {
    background: rgba(139, 46, 168, 0.15);
}

/* For other person's sticker replies - flip border and radius to the right */
.message-sticker.message-other .sticker-reply-bubble {
    border-left: none;
    border-right: 3px solid var(--color-primary, #8B2EA8);
    border-radius: 0px 6px 6px 0px;
    padding: 2px 6px 4px 4px;
}

.sticker-reply-bar {
    width: 3px;
    min-height: 100%;
    background: var(--color-primary, #8B2EA8);
    border-radius: 3px;
    margin-right: 8px;
    flex-shrink: 0;
}

.sticker-reply-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.sticker-reply-sender {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary, #8B2EA8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticker-reply-text {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===========================================
   MEDIA-ONLY MESSAGES (single photo/video without text)
   Telegram-style: no bubble, meta overlay on media
   =========================================== */

.message-media-only {
    max-width: 320px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.message-media-only .media-only-content {
    position: relative;
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;
    /* Dimensions are set via inline styles from JS */
}

.message-media-only.message-own .media-only-content {
    border-bottom-right-radius: 6px;
}

.message-media-only.message-other .media-only-content {
    border-bottom-left-radius: 6px;
}

.media-only-image,
.media-only-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    cursor: pointer;
}

.media-only-video {
    background: #000;
}

/* Fade-in effect for media-only messages with blurhash placeholder */
.media-only-image,
.media-only-video {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.media-only-image.loaded,
.media-only-video.loaded {
    opacity: 1;
}

/* Meta overlay on media (bottom-right corner) */
.media-only-meta {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    font-size: 12px;
    color: #fff;
    pointer-events: none;
}

.media-only-meta .message-time {
    color: #fff;
}

.media-only-meta .message-status {
    color: #fff;
}

.media-only-meta .message-status svg {
    width: 14px;
    height: 14px;
}

/* Sticker footer - reactions left, time right */
.sticker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    gap: 8px;
}

.sticker-footer .message-reactions {
    margin: 0;
    flex-shrink: 0;
}

.sticker-footer .sticker-meta {
    margin-top: 0;
}

/* Reactions under media-only */
.message-media-only .message-content-wrapper>.message-reactions {
    margin-top: 4px;
}

/* ===========================================
   STICKER POSTS (in channels)
   =========================================== */

.post-card-sticker {
    padding: 12px;
}

.sticker-post-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0;
}

.sticker-post-image {
    width: 180px;
    height: 180px;
    object-fit: contain;
    border-radius: 4px;
    transition: transform 0.15s ease;
}

.sticker-post-image:hover {
    transform: scale(1.05);
}

/* Video stickers in posts */
video.sticker-post-image {
    border-radius: 4px;
}

/* Large emoji placeholder for animated stickers */
.post-card-sticker .sticker-emoji-large {
    font-size: 100px;
    line-height: 1;
}

/* Message Input - Modern Grid Layout */
.chat-input-container {
    grid-row: 3;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 10px;
    padding: 12px 16px;
    padding-bottom: calc(12px + var(--sab));
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    position: sticky;
    bottom: 0;
}

.chat-attach-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    align-self: end;
}

.chat-attach-btn:hover {
    color: var(--color-purple);
    background: var(--bg-hover);
}

.chat-input-wrapper {
    min-width: 0;
    display: flex;
    align-items: end;
}

.chat-input {
    width: 100%;
    padding: 12px 18px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.4;
    resize: none;
    outline: none;
    max-height: 150px;
    min-height: 44px;
    overflow-y: auto;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    /* Hide scrollbar but keep scroll functionality */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.chat-input::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.chat-input:focus {
    border-color: var(--color-purple);
    box-shadow: 0 0 0 3px rgba(139, 46, 168, 0.15);
}

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

.chat-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--gradient-primary);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    align-self: end;
    box-shadow: 0 2px 8px rgba(139, 46, 168, 0.3);
}

.chat-send-btn:hover:not(:disabled) {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(139, 46, 168, 0.4);
}

.chat-send-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.chat-send-btn:disabled {
    background: var(--bg-secondary);
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
}

.chat-send-btn .icon-md {
    width: 22px;
    height: 22px;
}

.chat-input-disabled {
    grid-row: 3;
    padding: 16px;
    padding-bottom: calc(16px + var(--sab));
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
}

/* Chat Error */
.chat-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    color: var(--text-secondary);
}

/* Chat History Loading Indicator */
.chat-loading-history {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    min-height: 40px;
}

.loading-spinner-small {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-color);
    border-top-color: var(--color-rose);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Load more hint */
.chat-load-more-hint {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    color: var(--text-muted);
    font-size: 12px;
    opacity: 0.7;
}

.chat-list-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.chat-list-error .error-icon,
.chat-error .error-icon {
    width: 48px;
    height: 48px;
    color: var(--color-error);
}

/* Skeleton loading styles for ChatList */
.dialog-item.skeleton {
    pointer-events: none;
}

.skeleton-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-text {
    display: block;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-title {
    width: 120px;
}

.skeleton-time {
    width: 40px;
    height: 12px;
}

.skeleton-preview {
    width: 180px;
    margin-top: 4px;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Search clear button inside input */
.search-clear-btn {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-muted);
    transition: color 0.15s, background 0.15s;
}

.search-clear-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.search-clear-icon {
    width: 16px;
    height: 16px;
}

/* Search active badge */
.search-active-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 15px;
    background: rgba(138, 43, 226, 0.08);
    border-bottom: 1px solid var(--border-color);
    animation: fadeIn 0.2s ease;
}

.search-badge-text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-purple);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-badge-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.search-badge-clear {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    color: var(--text-muted);
    transition: color 0.15s, background 0.15s;
}

.search-badge-clear:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.search-badge-x {
    width: 16px;
    height: 16px;
}

/* Dialog filter fade animation */
.dialog-filter-fade {
    animation: dialogFilterIn 0.2s ease;
}

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

/* Search no results state — centered */
.search-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--text-secondary);
    min-height: 200px;
    animation: fadeIn 0.25s ease;
}

.search-no-results-icon {
    margin-bottom: 16px;
}

.search-no-results-icon .no-results-icon {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    opacity: 0.5;
}

.search-no-results-title {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0 0 4px;
}

.search-no-results-query {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    margin: 0 0 8px;
    word-break: break-word;
}

.search-no-results-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* Mobile Chat Styles */
@media (max-width: 767px) {
    .chat-view {
        top: 0;
        height: 100vh;
        height: 100dvh;
    }

    .chat-header {
        padding: 8px 12px;
        min-height: 56px;
    }

    .chat-back-btn {
        width: 36px;
        height: 36px;
    }

    .chat-header-avatar,
    .chat-header-avatar-placeholder,
    .chat-header-avatar-saved {
        width: 38px;
        height: 38px;
    }

    .chat-header-title {
        font-size: 15px;
    }

    .chat-header-subtitle {
        font-size: 12px;
    }

    .chat-messages {
        padding: 12px;
    }

    .chat-input-container {
        padding: 10px 12px;
        padding-bottom: calc(10px + var(--sab));
        gap: 8px;
    }

    .chat-attach-btn,
    .chat-send-btn {
        width: 40px;
        height: 40px;
    }

    .chat-input {
        padding: 10px 14px;
        font-size: 16px;
        /* Prevents zoom on iOS */
        min-height: 40px;
        border-radius: 20px;
    }

    .message {
        max-width: 90%;
    }

    .message-bubble {
        padding: 4px 8px;
    }
}

/* When chat is open, adjust layout */
body.chat-open {
    overflow: hidden;
}

body.chat-open .main-content {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* Hide main header on mobile when chat is open */
@media (max-width: 767px) {
    body.chat-open .app-header {
        display: none;
    }

    body.chat-open .main-content {
        margin-top: 0;
    }
}

/* Fallback for :has() support */
.main-content:has(.chat-view) {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* Desktop: Two-column layout */
@media (min-width: 768px) {
    .chat-list-wrapper {
        max-width: 420px;
        border-right: 1px solid var(--border-color);
        height: calc(100vh - var(--header-height));
    }

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

    .chat-messages {
        padding: 20px 24px;
    }

    .chat-input-container {
        padding: 14px 20px;
    }

    .message {
        max-width: 70%;
    }
}

/* Large screens - wider messages */
@media (min-width: 1200px) {
    .chat-messages {
        padding: 24px 32px;
    }

    .message {
        max-width: 60%;
    }
}

/* ===========================================
   INLINE KEYBOARD STYLES - Telegram-style
   =========================================== */

/* Сообщения с keyboard - вертикальный layout */
.message:has(.inline-keyboard) {
    flex-direction: column;
    align-items: flex-start;
}

.message-own:has(.inline-keyboard) {
    align-items: flex-end;
}

/* Сам keyboard */
.inline-keyboard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    width: 100%;
}

.keyboard-row {
    display: flex;
    gap: 4px;
    width: 100%;
}

.inline-btn {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary, #ffffff);
    backdrop-filter: blur(4px);
}

.inline-btn:hover {
    background: rgba(255, 255, 255, 0. 2);
}

.inline-btn:active {
    transform: scale(0. 98);
}

.inline-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.inline-btn.loading::after {
    content: '';
    width: 12px;
    height: 12px;
    margin-left: 6px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: inline-btn-spin 0.8s linear infinite;
}

@keyframes inline-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

.inline-btn-url {
    background: rgba(255, 255, 255, 0.08);
}

.inline-btn-url:hover {
    background: rgba(255, 255, 255, 0.15);
}

.message-other .inline-btn {
    background: rgba(139, 46, 168, 0. 3);
    color: var(--text-primary);
}

.message-other .inline-btn:hover {
    background: rgba(139, 46, 168, 0.45);
}

@media (max-width: 480px) {
    .inline-btn {
        padding: 10px 8px;
        font-size: 12px;
    }
}

/* ===========================================
   MEDIA GALLERY - Universal Component
   =========================================== */

/* Container */
.media-gallery {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-secondary);
    margin-bottom: 12px;
}

.media-gallery-wrapper {
    margin-top: -7px;
}

/* Mode variants */
.mg-mode-chat {
    max-width: 100%;
    border-radius: 0;
    margin-bottom: 6px;
}

/* Chat mode inside bubble - full width */
.message-bubble .mg-mode-chat {
    margin-left: -8px;
    margin-right: -8px;
    width: calc(100% + 24px);
    max-width: none;
}

/* First media in bubble - remove top padding gap (Telegram-style) */
.message-bubble>.mg-mode-chat:first-child {
    margin-top: -6px;
    border-radius: 8px 8px 0 0;
}

.message-bubble>.mg-mode-chat:first-child .mg-image,
.message-bubble>.mg-mode-chat:first-child .mg-video {
    border-radius: 8px 8px 0 0;
}

/* Chat mode - fill container (container has fixed dimensions) */
.message-bubble .mg-mode-chat .mg-image,
.message-bubble .mg-mode-chat .mg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: none;
}

.mg-mode-post {
    border-radius: var(--radius-md);
}

.mg-mode-feed {
    border-radius: var(--radius-md);
}

/* Single media */
.mg-single .mg-item {
    display: block;
    overflow: hidden;
    border-radius: inherit;
    background-size: cover;
    background-position: center;
}

/* Media-only message placeholder styling */
.media-only-content {
    position: relative;
    display: inline-block;
    border-radius: 16px;
    overflow: hidden;
    /* Fixed dimensions set via inline styles */
}

/* Media gallery images and videos - ORIGINAL styles with max-height */
.mg-image,
.mg-video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    /* Blurhash background is set inline; fallback color here */
    background-color: var(--bg-secondary);
    background-size: cover;
    background-position: center;
}

.mg-image {
    cursor: pointer;
}

.mg-image:hover {
    opacity: 0.95;
}

.mg-video {
    cursor: default;
}

/* ===========================================
   MEDIA GALLERY - SLIDER (CAROUSEL)
   =========================================== */
.mg-slider {
    position: relative;
    touch-action: pan-y pinch-zoom;
    user-select: none;
}

.mg-track {
    display: flex;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    cursor: grab;
}

.mg-track:active {
    cursor: grabbing;
}

.mg-slide {
    flex: 0 0 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

/* Slider slides - ORIGINAL styles */
.mg-slide .mg-image,
.mg-slide .mg-video {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

/* Navigation Arrows */
.mg-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s, transform 0.2s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mg-slider:hover .mg-arrow {
    opacity: 1;
}

.mg-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-50%) scale(1.1);
}

.mg-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.mg-arrow-prev {
    left: 8px;
}

.mg-arrow-next {
    right: 8px;
}

.mg-arrow svg {
    width: 20px;
    height: 20px;
}

/* Hide arrows on touch devices */
@media (hover: none) and (pointer: coarse) {
    .mg-arrow {
        display: none !important;
    }
}

/* Dots */
.mg-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

.mg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
}

.mg-dot.active {
    background: white;
    transform: scale(1.25);
}

.mg-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.8);
}

/* Counter (for many items) */
.mg-counter {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
    z-index: 10;
    backdrop-filter: blur(4px);
}

/* Caption */
.mg-caption {
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
}

.mg-caption:empty {
    display: none;
}

/* Caption text formatting */
.mg-caption b,
.mg-caption strong {
    font-weight: 600;
}

.mg-caption i,
.mg-caption em {
    font-style: italic;
}

.mg-caption a {
    color: var(--color-purple);
    text-decoration: none;
}

.mg-caption a:hover {
    text-decoration: underline;
}

/* ===========================================
   MEDIA GALLERY - LIGHTBOX
   =========================================== */
.mg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    backdrop-filter: blur(8px);
}

.mg-lightbox.visible {
    opacity: 1;
    visibility: visible;
}

.mg-lb-content {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mgLbFadeIn 0.2s ease;
}

@keyframes mgLbFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.mg-lb-image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    user-select: none;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.mg-lb-video {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.mg-lb-vnote {
    width: min(80vw, 480px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
}

.mg-lb-vnote-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mg-lb-vnote-video.mirror {
    transform: scaleX(-1);
}

.mg-lb-close,
.mg-lb-action {
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    z-index: 10;
    padding: 0;
}

.mg-lb-controls svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.mg-lb-action:hover,
.mg-lb-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.mg-lb-action:active,
.mg-lb-close:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
}

.mg-lb-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
    z-index: 100;
    transition: opacity 0.3s ease;
}

.mg-lb-author {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
}

.mg-lb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.mg-lb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mg-lb-avatar-placeholder {
    background: var(--accent-primary);
    color: white;
    font-size: 18px;
}

.mg-lb-author-info {
    display: flex;
    flex-direction: column;
}

.mg-lb-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

.mg-lb-date {
    font-size: 13px;
    opacity: 0.7;
    line-height: 1.2;
    margin-top: 2px;
}

.mg-lb-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-left: auto;
}

.mg-lb-controls svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.mg-lb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.mg-lb-prev {
    left: 16px;
}

.mg-lb-next {
    right: 16px;
}

.mg-lb-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}

.mg-lightbox.ui-hidden .mg-lb-header,
.mg-lightbox.ui-hidden .mg-lb-arrow,
.mg-lightbox.ui-hidden .mg-lb-counter,
.mg-lightbox.ui-hidden .mg-lb-caption {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mg-lb-header,
.mg-lb-close,
.mg-lb-arrow,
.mg-lb-counter,
.mg-lb-caption {
    transition: opacity 0.3s ease, background 0.2s, transform 0.2s !important;
}

.mg-lb-counter {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 15px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 16px;
    border-radius: 16px;
    backdrop-filter: blur(4px);
}

.mg-lb-caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%;
    color: white;
    font-size: 14px;
    text-align: center;
    line-height: 1.5;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px 20px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.mg-lb-caption.expanded {
    display: block;
    overflow-y: auto;
    max-height: 40vh;
    -webkit-line-clamp: unset;
    text-align: left;
}

/* Mobile lightbox */
@media (max-width: 768px) {
    .mg-lb-arrow {
        width: 44px;
        height: 44px;
    }

    .mg-lb-prev {
        left: 10px;
    }

    .mg-lb-next {
        right: 10px;
    }

    .mg-lb-close {
        top: 10px;
        right: 10px;
    }

    .mg-lb-controls {
        gap: 6px;
    }

    .mg-lb-controls .mg-lb-action,
    .mg-lb-controls .mg-lb-close,
    .mg-lb-controls button {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mg-lb-controls svg {
        width: 20px !important;
        height: 20px !important;
    }

    .mg-lb-author {
        gap: 8px;
        max-width: calc(100% - 140px);
    }

    .mg-lb-avatar {
        width: 32px;
        height: 32px;
    }

    .mg-lb-name {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mg-lb-date {
        font-size: 11px;
    }

    .mg-lb-counter {
        top: 14px;
        font-size: 14px;
        padding: 5px 12px;
    }

    .mg-lb-caption {
        bottom: 14px;
        max-width: 90%;
        font-size: 13px;
        padding: 8px 14px;
    }
}

/* Hide arrows on touch in lightbox */
@media (hover: none) and (pointer: coarse) {
    .mg-lb-arrow {
        opacity: 0.5;
        width: 40px;
        height: 40px;
    }

    .mg-lb-prev {
        left: 8px;
    }

    .mg-lb-next {
        right: 8px;
    }
}

/* ===========================================
   MEDIA GALLERY - RESPONSIVE
   =========================================== */

@media (max-width: 480px) {

    .mg-dots {
        bottom: 8px;
        gap: 5px;
    }

    .mg-dot {
        width: 6px;
        height: 6px;
    }

    .mg-counter {
        top: 8px;
        right: 8px;
        font-size: 12px;
        padding: 3px 8px;
    }

    .mg-caption {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ===========================================
   MEDIA GALLERY - PAID CONTENT
   =========================================== */
.mg-paid {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mg-paid-preview {
    position: relative;
    width: 100%;
    min-height: 200px;
    max-height: 400px;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    overflow: hidden;
}

.mg-paid-blur {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
    border-radius: inherit;
}

.mg-paid-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    text-align: center;
}

.mg-paid-icon {
    width: 48px;
    height: 48px;
    background: rgba(249, 115, 22, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.mg-paid-lock-svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.4));
}

.mg-paid-label {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.mg-paid-price {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.mg-paid-price .price-pepper {
    font-size: 22px;
}

.mg-paid-btn-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.mg-paid-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.35);
    overflow: hidden;
}
.mg-paid-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
    animation: cta-shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

.mg-paid-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
}

.mg-paid-btn:active:not(:disabled) {
    transform: translateY(0);
}

.mg-paid-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.mg-paid-btn svg {
    width: 18px;
    height: 18px;
}

.mg-paid-count {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* ===========================================
   MEDIA GALLERY - SELF-DESTRUCT OVERLAY
   =========================================== */
.mg-sd {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mg-sd-preview {
    position: relative;
    width: 100%;
    min-height: 200px;
    max-height: 400px;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    overflow: hidden;
}

.mg-sd-blur {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(16px);
    border-radius: inherit;
}

.mg-sd-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    text-align: center;
}

.mg-sd-icon {
    width: 52px;
    height: 52px;
    background: rgba(249, 115, 22, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(249, 115, 22, 0.2);
    margin-bottom: 2px;
}

.mg-sd-fire-svg {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.5));
}

.mg-sd-label {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}

.mg-sd-timer {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.mg-sd-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.35);
    overflow: hidden;
}

.mg-sd-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    animation: cta-shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

.mg-sd-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
}

.mg-sd-btn:active {
    transform: translateY(0);
}

.mg-sd-btn svg {
    width: 16px;
    height: 16px;
}

.mg-sd-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

/* Timer badge on revealed media (top-left corner) */
.mg-sd-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    border: 1px solid rgba(249, 115, 22, 0.25);
    font-size: 12px;
    font-weight: 600;
    color: #fb923c;
    pointer-events: none;
}

/* ==========================================================================
   NUDE CONTENT OVERLAY (radial blur + strawberry icon)
   ========================================================================== */

.mg-nude-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.5s ease;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mg-nude-overlay.mg-nude-revealed {
    opacity: 0;
    pointer-events: none;
}

.mg-nude-blur-core,
.mg-nude-blur-mid,
.mg-nude-blur-outer,
.mg-nude-tint {
    border-radius: inherit;
}

.mg-nude-blur-core {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(36px);
    -webkit-backdrop-filter: blur(36px);
    mask-image: radial-gradient(ellipse 70% 80% at 50% 60%, black 0%, black 40%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 60%, black 0%, black 40%, transparent 75%);
}

.mg-nude-blur-mid {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    mask-image: radial-gradient(ellipse 90% 95% at 50% 60%, black 0%, black 25%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 90% 95% at 50% 60%, black 0%, black 25%, transparent 85%);
}

.mg-nude-blur-outer {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    mask-image: radial-gradient(ellipse 100% 110% at 50% 60%, black 0%, black 15%, transparent 92%);
    -webkit-mask-image: radial-gradient(ellipse 100% 110% at 50% 60%, black 0%, black 15%, transparent 92%);
}

.mg-nude-tint {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 95% at 50% 60%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.12) 65%, transparent 92%);
}

.mg-nude-icon {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    background: rgba(176, 80, 204, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(176, 80, 204, 0.25);
}

.mg-nude-icon svg {
    width: 26px;
    height: auto;
    filter: drop-shadow(0 0 6px rgba(176, 80, 204, 0.4));
}

.mg-nude-icon svg path {
    fill: url(#mg-nude-grad) !important;
}

/* Author paid post pill (top-right on media) */
.mg-author-pill {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    pointer-events: auto;
}
.mg-author-pill:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(239, 68, 68, 0.4);
}
.mg-author-pill-price {
    color: #f87171;
}
.mg-author-pill-sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.15);
}
.mg-author-pill-buyers {
    color: #fb923c;
    transition: color 0.15s;
}
.mg-author-pill:hover .mg-author-pill-buyers {
    color: #fdba74;
}

/* Spinner for loading state */
.spinner-small {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ===========================================
   PURCHASE MODAL
   =========================================== */
.modal-purchase {
    max-width: 340px;
    text-align: center;
    padding: 15px 20px 28px;
    background: linear-gradient(160deg, #1e1e1e 0%, #1e1a14 40%, #1e1e1e 100%);
    border: none;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(249, 115, 22, 0.06);
}

.modal-purchase::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(160deg, rgba(251, 191, 36, 0.4), rgba(249, 115, 22, 0.12));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.modal-purchase-header {
    margin-bottom: 20px;
}

.modal-purchase-icon {
    font-size: 40px;
    margin-bottom: 12px;
    filter: drop-shadow(0 2px 8px rgba(138, 43, 226, 0.3));
}

.modal-purchase .modal-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.modal-purchase .modal-message {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.modal-purchase-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    margin: 16px 0 24px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.modal-purchase-price .price-pepper {
    font-size: 32px;
}

.modal-purchase-price .price-amount {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-purchase .modal-buttons {
    display: flex;
    gap: 12px;
}

.modal-purchase-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.35);
    margin: 5px 0 20px;
}

.modal-purchase .modal-btn {
    flex: 1;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--radius-md);
}

.modal-btn-purchase {
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.modal-btn-purchase:hover:not(:disabled) {
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.4);
    transform: translateY(-1px);
}

.modal-btn-purchase:active:not(:disabled) {
    transform: translateY(0);
}

.modal-btn-purchase:disabled {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    box-shadow: none;
    cursor: not-allowed;
}

/* Payment author widget (ILW-based) */
.payment-author {
    justify-content: center;
    font-size: 13px;
}

.payment-author .icon-xs {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Purchase info row (author · price) */
.purchase-info-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    margin: 14px 0 20px;
}

.purchase-info-row .media-sep {
    opacity: 0.4;
}

/* Card stacks for purchase modal */
.purchase-stacks-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 10px;
}

.purchase-stack-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.purchase-stack {
    position: relative;
    width: 56px;
}

.purchase-stack-card {
    width: 56px;
    height: 72px;
    border-radius: 7px;
    position: absolute;
    left: 0;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.purchase-stack-wide {
    width: 96px;
}

/* Video play icon on card */
.purchase-stack-video::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.purchase-stack-video::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -50%);
    z-index: 11;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 7px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.8);
}

/* Glow under stack */
.purchase-stack-glow {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 16px;
    background: radial-gradient(ellipse, rgba(138, 43, 226, 0.25), transparent);
    border-radius: 50%;
    filter: blur(4px);
}

.purchase-stack-label {
    font-size: 12px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 3px;
}

.purchase-stack-label strong {
    font-weight: 600;
}

.purchase-stack-label span {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 11px;
}

/* Duration badge in paid media overlay */
.mg-paid-duration {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.modal-btn-topup {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.modal-btn-topup:hover {
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
    transform: translateY(-1px);
}

.modal-btn-topup:active {
    transform: translateY(0);
}

.modal-btn-topup .btn-hint {
    opacity: 0.6;
    font-weight: 400;
    margin-left: 4px;
}

/* ===========================================
   MESSAGE STATUS INDICATORS
   =========================================== */

.message-status {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    transition: color 0.2s ease;
}

.message-status .icon-xs {
    width: 14px;
    height: 14px;
}

/* Sending - animated dot */
.message-status.status-sending {
    color: rgba(255, 255, 255, 0.5);
}

.message-other .message-status.status-sending {
    color: var(--text-muted);
}

.sending-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: sending-pulse 1s ease-in-out infinite;
}

@keyframes sending-pulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.8);
    }

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

/* Sent - single check */
.message-status.status-sent {
    color: rgba(255, 255, 255, 0.7);
}

.message-other .message-status.status-sent {
    color: var(--text-muted);
}

/* Delivered - double check (gray) */
.message-status.status-delivered {
    color: rgba(255, 255, 255, 0.7);
}

.message-other .message-status.status-delivered {
    color: var(--text-muted);
}

/* Read - double check (blue) */
.message-status.status-read {
    color: #53bdeb;
}

/* Error - red */
.message-status.status-error {
    color: var(--color-error);
}

.message-status.status-error .retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    pointer-events: auto;
    animation: pulse 1s ease-in-out infinite;
}

.message-status.status-error .retry-label {
    font-size: 11px;
    white-space: nowrap;
}

.message-status.status-error .retry-btn:active {
    opacity: 0.6;
}

/* ===========================================
   MESSAGE CONTEXT MENU
   =========================================== */

.message-context-menu {
    position: fixed;
    z-index: 10000;
    min-width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    padding: 6px;
    opacity: 0;
    transform: scale(0.95) translateY(-5px);
    transform-origin: top left;
    transition: opacity 0.15s ease, transform 0.15s ease;
    overflow: hidden;
}

.message-context-menu.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

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

.context-menu-item:active {
    background: var(--bg-input);
}

.context-menu-item.danger {
    color: var(--color-error);
}

.context-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.context-menu-item .icon-sm {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Context menu emoji grid for reactions */
.context-menu-emoji-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 4px;
}

.context-emoji-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 24px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.context-emoji-btn:hover {
    background: var(--bg-hover);
    transform: scale(1.15);
}

.context-emoji-btn:active {
    transform: scale(1.05);
}

.context-menu-back {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    margin-top: 4px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

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

.context-menu-back .icon-sm {
    width: 16px;
    height: 16px;
}

/* Quick reactions row at top of context menu (Telegram style) */
.context-menu-quick-reactions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px;
    margin: -6px -6px 0 -6px;
    /* Negative margin to span full width */
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-input);
    border-radius: 12px 12px 0 0;
}

.quick-reaction-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.quick-reaction-btn:hover {
    background: var(--bg-hover);
    transform: scale(1.15);
}

.quick-reaction-btn:active {
    transform: scale(0.95);
}

.quick-reaction-more {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: none;
    background: var(--bg-hover);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.15s ease, color 0.15s ease;
}

.quick-reaction-more:hover {
    background: var(--accent-color);
    color: white;
}

/* Hide old reaction button in context menu */
.context-menu-reaction-btn {
    display: none;
}

/* ===========================================
   REPLY PREVIEW
   =========================================== */

.reply-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.reply-preview.visible {
    opacity: 1;
    transform: translateY(0);
}

.reply-bar {
    width: 3px;
    height: 36px;
    background: var(--gradient-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.reply-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reply-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-purple);
}

.reply-text {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.reply-cancel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.reply-cancel .icon-sm {
    width: 18px;
    height: 18px;
}

/* Edit preview bar */
.edit-preview .edit-bar {
    background: var(--accent-edit, #f5a623);
}

.edit-label {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--accent-edit, #f5a623);
    display: block;
    line-height: 1.2;
}

/* ===========================================
   SMOOTH MESSAGE TRANSITIONS
   =========================================== */

.message {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Message enter animation */
@keyframes message-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message:last-child {
    animation: message-enter 0.2s ease;
}

/* Message update shimmer animation - left to right wave */
@keyframes message-update-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.message-updated .message-bubble {
    position: relative;
    overflow: hidden;
}

.message-updated .message-bubble::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 100%);
    background-size: 200% 100%;
    animation: message-update-shimmer 0.6s ease-out 2;
    pointer-events: none;
    border-radius: inherit;
}

/* Slightly brighter shimmer for dark bubbles (own messages) */
.message-own.message-updated .message-bubble::after {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.12) 50%,
            transparent 100%);
    background-size: 200% 100%;
}

/* Message deleted animation */
.message-deleted {
    animation: message-fade-out 0.3s ease-out forwards;
}

@keyframes message-fade-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}

/* Typing indicator in chat header */
.chat-header-subtitle.typing {
    color: #64B5F6 !important;
    /* Telegram-style blue */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 18px;
    line-height: 18px;
    vertical-align: middle;
}

/* Hidden subtitle must override typing display */
.chat-header-subtitle.typing.hidden-subtitle {
    display: none !important;
}

.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 12px;
    overflow: hidden;
}

.typing-dots span {
    width: 5px;
    height: 5px;
    background: currentColor;
    border-radius: 50%;
    animation: typing-pulse 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes typing-pulse {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===========================================
   INVITE LINKS PANEL (SlideOut)
   =========================================== */

.invite-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}

.invite-panel-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.invite-links-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background: var(--bg-card);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.invite-links-panel.open {
    right: 0;
}

.invite-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.invite-panel-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.invite-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

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

.invite-panel-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.invite-panel-back:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.invite-members-search {
    padding: 8px 24px;
}

.invite-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.invite-panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

/* Invite Sections */
.invite-section {
    margin-bottom: 16px;
}

.invite-section-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-cyan);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding: 0 4px;
}

/* Create Button */
.invite-create-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    color: var(--color-cyan);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 16px;
}

.invite-create-btn:hover {
    background: var(--bg-hover);
    border-color: var(--color-cyan);
}

/* Invite List */
.invite-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Invite Item */
.invite-item {
    background: var(--bg-main);
    border-radius: 12px;
    overflow: hidden;
    transition: background 0.15s ease;
    cursor: pointer;
}

.invite-item:hover {
    background: var(--bg-hover);
}

.invite-item-primary {
    background: linear-gradient(135deg,
            rgba(0, 188, 212, 0.1) 0%,
            rgba(156, 39, 176, 0.1) 100%);
    border: 1px solid rgba(0, 188, 212, 0.3);
}

.invite-item-primary:hover {
    background: linear-gradient(135deg,
            rgba(0, 188, 212, 0.15) 0%,
            rgba(156, 39, 176, 0.15) 100%);
}

.invite-item-disabled {
    opacity: 0.6;
    cursor: default;
}

.invite-item-highlighted {
    animation: invite-highlight-pulse 2s ease-out;
    box-shadow: 0 0 0 2px var(--color-purple);
}

@keyframes invite-highlight-pulse {
    0% {
        box-shadow: 0 0 0 4px var(--color-purple);
        background: rgba(139, 92, 246, 0.2);
    }

    100% {
        box-shadow: 0 0 0 2px var(--color-purple);
        background: var(--bg-secondary);
    }
}

.invite-item-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.invite-item-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    height: 40px;
    background: var(--bg-card);
    border-radius: 10px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.invite-item-primary .invite-item-icon {
    background: var(--gradient-primary);
    color: white;
}

.invite-item-icon:hover {
    transform: scale(1.1);
    opacity: 0.85;
}

.invite-item-icon:active {
    transform: scale(0.95);
}

.invite-item-members-btn,
.invite-item-primary .invite-item-members-btn {
    border: none;
    padding: 0;
    background: var(--bg-card);
    color: var(--text-secondary);
}

.invite-pending-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-purple);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.invite-pending-badge:hover {
    transform: scale(1.1);
    background: var(--color-purple-hover, #9b59b6);
}

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

.invite-item-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invite-item-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.invite-item-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.invite-item-menu-btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* Status Badges */
.invite-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.invite-status-revoked {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-rose);
}

.invite-status-expired {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.invite-status-limit {
    background: rgba(156, 163, 175, 0.2);
    color: var(--text-muted);
}

/* Primary Link Actions */
.invite-item-actions {
    display: flex;
    gap: 8px;
    padding: 0 14px 12px;
}

.btn-invite-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-invite-copy {
    background: var(--color-cyan);
    color: white;
}

.btn-invite-copy:hover {
    background: #00acc1;
}

.btn-invite-share {
    background: var(--gradient-primary);
    color: white;
}

.btn-invite-share:hover {
    opacity: 0.9;
}

/* Dropdown Menu */
.invite-dropdown-menu {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px;
    min-width: 180px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1001;
}

.invite-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.invite-dropdown-item:hover {
    background: var(--bg-hover);
}

.invite-dropdown-item.danger {
    color: var(--color-rose);
}

.invite-dropdown-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.invite-dropdown-separator {
    height: 1px;
    background: var(--border-color);
    margin: 6px 0;
}

/* Empty State */
.invite-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.invite-empty-icon {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.invite-empty p {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}

/* ===========================================
   JOIN REQUESTS PANEL
   =========================================== */

.join-requests-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.join-requests-panel-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.join-requests-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background: var(--bg-card);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.join-requests-panel.open {
    right: 0;
}

.join-requests-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.join-requests-panel-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.join-requests-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.join-requests-panel-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.join-requests-panel-search {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.join-requests-search-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease;
}

.join-requests-search-input:focus {
    border-color: var(--color-purple);
}

.join-requests-search-input::placeholder {
    color: var(--text-muted);
}

.join-requests-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.join-requests-panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

/* Invite Summary Block */
.join-requests-invite-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border-color);
}

.invite-summary-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-purple);
    color: white;
    border-radius: 10px;
}

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

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

.invite-summary-stats {
    font-size: 12px;
    color: var(--text-muted);
}

.btn-invite-summary-edit {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-invite-summary-edit:hover {
    background: var(--bg-card);
    color: var(--color-purple);
}

/* Request List */
.join-requests-list {
    display: flex;
    flex-direction: column;
}

.request-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease, opacity 0.3s ease, transform 0.3s ease;
}

.request-item:hover {
    background: var(--bg-hover);
}

.request-item-removing {
    opacity: 0;
    transform: translateX(20px);
}

.request-item-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

.request-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.request-avatar-letter {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.request-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.request-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.request-item-user {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

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

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

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

/* Request Message - single line with horizontal scroll */
.request-item-message {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    padding-bottom: 4px;
    margin-bottom: -4px;
}

.request-item-message::-webkit-scrollbar {
    height: 4px;
}

.request-item-message::-webkit-scrollbar-track {
    background: transparent;
}

.request-item-message::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.request-message-text {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Request Invite Link Info */
.request-item-invite {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.request-item-invite .icon-xs {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.request-item-invite span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-goto-invite {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    border-radius: 4px;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
}

.btn-goto-invite:hover {
    background: var(--bg-card);
    color: var(--color-purple);
}

/* Request Actions */
.request-item-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.btn-request-approve {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--color-purple);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.btn-request-approve:hover {
    background: var(--color-purple-hover, #7c3aed);
}

.btn-request-approve:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-request-approve .icon-xs {
    width: 14px;
    height: 14px;
}

.btn-request-reject {
    padding: 6px 14px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-request-reject:hover {
    background: var(--bg-hover);
    border-color: var(--color-rose);
    color: var(--color-rose);
}

.btn-request-reject:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Load More Button */
.join-requests-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    background: transparent;
    border: none;
    color: var(--color-purple);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.join-requests-load-more:hover {
    background: var(--bg-hover);
}

/* Empty State */
.join-requests-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.join-requests-empty-icon {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.join-requests-empty p {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}

/* Pending Requests Badge on Channel Page - styled like reactions */
.channel-pending-requests-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--color-purple) !important;
    border: none;
    border-radius: 16px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
    text-shadow: none;
}

.channel-pending-requests-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.channel-pending-requests-btn .icon-sm {
    width: 14px;
    height: 14px;
    filter: none;
}

/* Members Button - styled like pending requests */
.channel-members-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--color-purple) !important;
    border: none;
    border-radius: 16px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
    box-shadow: none;
    text-shadow: none;
}

.channel-members-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.channel-members-btn .icon-sm {
    width: 14px;
    height: 14px;
    filter: none;
}

/* Subscribers Button (for non-admin users) */
.channel-subscribers-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 16px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    box-shadow: none;
    text-shadow: none;
}

.channel-subscribers-btn:hover {
    background: var(--color-purple);
    transform: scale(1.05);
}

.channel-subscribers-btn .icon-sm {
    width: 14px;
    height: 14px;
    filter: none;
}


/* Static subscribers count (when hide_members is on) */
.channel-subscribers-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 600;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.channel-subscribers-count .icon-sm {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}
/* ===========================================
   MEMBERS PANEL
   =========================================== */
.members-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.members-panel-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.members-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100%;
    background: var(--bg-card);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
}

.members-panel.open {
    right: 0;
}

.members-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.members-panel-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.members-panel-tabs {
    display: flex;
    gap: 8px;
}

.members-panel-tab {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.members-panel-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.members-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
}

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

.members-panel-search {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
}

.members-search-input {
    width: 100%;
    padding: 10px 16px;
    background: var(--bg-hover);
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
}

.members-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--bg-card);
}

.members-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

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

.members-panel-empty .empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.members-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-hover);
    border-radius: 12px;
    transition: background 0.15s ease;
}

.member-item:hover {
    background: var(--bg-main);
}

.member-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-avatar span {
    font-size: 18px;
    font-weight: 600;
    color: white;
}

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

.member-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.member-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.member-role-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.member-role-owner {
    background: var(--color-gold);
    color: #1a1a1a;
}

.member-role-admin {
    background: var(--color-cyan);
    color: white;
}

.member-username {
    font-size: 13px;
    color: var(--text-muted);
    display: block;
}

.member-joined {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}

.member-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    align-items: center;
}

.btn-member-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-member-action:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-member-action:active {
    transform: translateY(0);
}

.btn-assign-admin:hover {
    background: rgba(255, 215, 0, 0.15);
    color: #FFD700;
    border-color: rgba(255, 215, 0, 0.3);
}

.btn-kick-user:hover {
    background: rgba(255, 75, 75, 0.15);
    color: var(--color-error);
    border-color: rgba(255, 75, 75, 0.3);
}

.btn-unban-user:hover {
    background: rgba(76, 175, 80, 0.15);
    color: var(--color-online);
    border-color: rgba(76, 175, 80, 0.3);
}

.ban-item {
    opacity: 0.9;
}

.ban-by-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.ban-by-link:hover {
    color: var(--accent-primary);
    text-decoration: underline;
}

.btn-member-action .icon-sm {
    width: 18px;
    height: 18px;
}

.members-load-more {
    padding: 16px 0;
    text-align: center;
}

.btn-load-more {
    padding: 10px 24px;
    background: var(--bg-hover);
    border: none;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}

.btn-load-more:hover {
    background: var(--bg-main);
}

/* Admins tab styles */
.members-add-admin-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-hover);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 16px;
}

.members-add-admin-btn:hover {
    background: var(--bg-main);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.admins-section {
    margin-bottom: 20px;
}

.admins-section-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0;
    margin-bottom: 8px;
}

.admin-item {
    cursor: pointer;
}

.admin-item[data-can-edit="true"]:hover {
    background: var(--bg-main);
}

.admin-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-avatar-letter {
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.admin-item-perms {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.admin-promoted-by {
    font-size: 11px;
    color: var(--color-cyan);
    margin-top: 4px;
    opacity: 0.8;
}

.admin-permission-special {
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
    padding-top: 8px;
}

.admin-permission-special .admin-permission-label {
    color: var(--color-gold);
}

/* Subscribers Panel (reuses members-panel layout pattern) */
.subscribers-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.subscribers-panel-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.subscribers-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100%;
    background: var(--bg-card);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
}

.subscribers-panel.open {
    right: 0;
}

.subscribers-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.subscribers-panel-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.subscribers-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
}

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

.subscribers-panel-search {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
}

.subscribers-search-input {
    width: 100%;
    padding: 10px 16px;
    background: var(--bg-hover);
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
}

.subscribers-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--bg-card);
}

.subscribers-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

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

.subscribers-panel-empty .empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.subscribers-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.subscriber-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    transition: background 0.15s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.subscriber-item:hover {
    background: var(--bg-hover);
}

.subscriber-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.subscriber-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subscriber-avatar span {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

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

.subscriber-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

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

.subscriber-role-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.subscriber-role-owner {
    background: var(--color-gold);
    color: #1a1a1a;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.subscriber-role-admin {
    background: var(--color-cyan);
    color: white;
}

.subscriber-username {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
}

.subscriber-joined {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-top: 1px;
    opacity: 0.7;
}

.subscribers-load-more {
    padding: 16px 0;
    text-align: center;
}

/* Clickable subscribers count */
.subscribers-count-link {
    cursor: pointer;
    transition: color 0.15s ease;
}

.subscribers-count-link:hover {
    color: var(--color-primary);
}

/* Mobile responsive */
@media (max-width: 480px) {
    .subscribers-panel {
        width: 100vw;
        right: -100vw;
    }
}

/* =============================================================================
   BUYERS PANEL
   ============================================================================= */

.buyers-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.buyers-panel-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
.buyers-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    max-width: 100vw;
    height: 100%;
    background: var(--bg-card);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
}
.buyers-panel.open {
    right: 0;
}
.buyers-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}
.buyers-panel-header h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.buyers-panel-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background 0.15s;
}
.buyers-panel-close:hover {
    background: var(--bg-hover);
}
.buyers-panel-search {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
}
.buyers-search-input {
    width: 100%;
    padding: 10px 16px;
    background: var(--bg-hover);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.buyers-search-input:focus {
    border-color: var(--color-purple);
}
.buyers-panel-content {
    flex: 1;
    overflow-y: auto;
}
.buyers-panel-loading {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}
.buyers-panel-empty {
    text-align: center;
    padding: 40px 24px;
    color: var(--text-tertiary);
    font-size: 14px;
}
.buyer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    cursor: pointer;
}
.buyer-item:hover {
    background: var(--bg-hover);
}
.buyer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.buyer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.buyer-avatar span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    border-radius: 50%;
}
.buyer-info {
    flex: 1;
    min-width: 0;
}
.buyer-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.buyer-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}
.buyer-username {
    color: var(--text-muted);
}
.buyer-date {
    color: var(--text-tertiary);
}
.buyer-date::before {
    content: '·';
    margin-right: 6px;
    opacity: 0.5;
}
.buyers-load-more {
    display: block;
    width: calc(100% - 48px);
    margin: 12px 24px;
    padding: 10px;
    background: var(--bg-hover);
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}
.buyers-load-more:hover {
    background: var(--bg-active);
}

@media (max-width: 480px) {
    .buyers-panel {
        width: 100vw;
        right: -100vw;
    }
}

/* Mobile responsive */
@media (max-width: 480px) {
    .members-panel {
        width: 100vw;
        right: -100vw;
    }

    .members-panel.open {
        right: 0;
    }

    .channel-members-btn,
    .channel-subscribers-btn {
        padding: 3px 8px;
        font-size: 12px;
        border-radius: 14px;
    }

    .channel-members-btn .icon-sm,
    .channel-subscribers-btn .icon-sm {
        width: 12px;
        height: 12px;
    }
}

/* Mobile responsive */
@media (max-width: 480px) {
    .join-requests-panel {
        width: 100vw;
        right: -100vw;
    }

    .join-requests-panel.open {
        right: 0;
    }

    .request-item-actions {
        flex-direction: row;
    }

    .btn-request-approve,
    .btn-request-reject {
        flex: 1;
        justify-content: center;
        padding: 6px 10px;
        font-size: 12px;
    }

    .channel-pending-requests-btn {
        padding: 3px 8px;
        font-size: 12px;
        border-radius: 14px;
    }

    .channel-pending-requests-btn .icon-sm {
        width: 12px;
        height: 12px;
    }
}

/* ==============================
   Chat Media Gallery Panel
   ============================== */

.media-panel .media-panel-tabs {
    display: flex;
    gap: 4px;
    flex: 1;
}

.media-panel-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

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

.media-panel-tab.active {
    background: var(--accent-alpha, rgba(99, 102, 241, 0.12));
    color: var(--accent, #6366f1);
}

.media-panel-tab .icon-xs {
    width: 14px;
    height: 14px;
}

.media-panel-content {
    padding: 8px;
}

.media-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}

.media-panel-grid-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    background: var(--bg-hover);
}

.media-panel-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.15s;
}

.media-panel-grid-item:hover img {
    transform: scale(1.05);
}

.media-panel-grid-item .media-panel-blurred {
    filter: blur(20px);
}

.media-panel-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

.media-panel-video-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.media-panel-video-badge .icon-xs {
    width: 12px;
    height: 12px;
}

/* Voice — mic placeholder with gradient bg */
.media-panel-voice-badge {
    background: var(--color-purple);
}

.media-panel-voice .media-panel-placeholder {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-card));
}

/* Video note — round thumbnail + simple dot badge in grid */
.media-panel-vnote {
    border-radius: 50%;
}

.media-panel-vnote img {
    border-radius: 50%;
}

.media-panel-vnote-badge {
    background: var(--color-purple);
}

/* Files list */
.media-panel-files {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.media-panel-file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.15s;
}

.media-panel-file-item:hover {
    background: var(--bg-hover);
}

.media-panel-file-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-alpha, rgba(99, 102, 241, 0.12));
    color: var(--accent, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.media-panel-file-icon .icon-md {
    width: 20px;
    height: 20px;
}

.media-panel-file-info {
    flex: 1;
    min-width: 0;
}

.media-panel-file-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-panel-file-meta {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

@media (max-width: 480px) {
    .media-panel {
        width: 100vw;
        right: -100vw;
    }

    .media-panel.open {
        right: 0;
    }
}

/* QR Modal */
.invite-qr-modal {
    text-align: center;
}

.invite-qr-image {
    padding: 20px;
    background: white;
    border-radius: 12px;
    margin: 16px 0;
    display: inline-block;
}

.invite-qr-image img {
    display: block;
    width: 200px;
    height: 200px;
}

.invite-qr-url {
    font-size: 13px;
    color: var(--text-muted);
    word-break: break-all;
    margin-bottom: 16px;
}

/* ===========================================
   INVITE LINK FORM (Modal)
   =========================================== */

/* Override z-index for invite form to be above panel */
.invite-form-overlay {
    z-index: 1100 !important;
}

.invite-form-modal {
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.invite-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.invite-form-header .modal-title {
    margin: 0;
}

.invite-form-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

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

.invite-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.invite-form-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 0;
    overflow-y: auto;
    flex: 1;
}

.invite-form-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* URL Field (edit mode) */
.invite-url-section {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
}

.invite-url-field {
    display: flex;
    gap: 8px;
    align-items: center;
}

.invite-url-input {
    flex: 1;
    background: var(--bg-main) !important;
    color: var(--text-muted) !important;
    cursor: text;
    font-family: var(--font-mono, monospace);
    font-size: 13px;
}

.invite-url-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg-main);
    color: var(--text-secondary);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.invite-url-copy-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.invite-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 13px;
}

.invite-creator-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.invite-creator-label {
    color: var(--text-muted);
}

.invite-creator-link {
    color: var(--color-cyan);
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.invite-creator-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.invite-usage-stats {
    color: var(--text-muted);
}

.invite-usage-stats-clickable {
    color: var(--color-cyan);
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
}

.invite-usage-stats-clickable:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.invite-form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-cyan);
}

.invite-form-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-main);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.invite-form-toggle:hover {
    background: var(--bg-hover);
}

.toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.toggle-hint {
    font-size: 13px;
    color: var(--text-muted);
}

/* Price Input */
.invite-price-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invite-price-input .form-input {
    flex: 1;
}

.price-currency {
    font-size: 20px;
    flex-shrink: 0;
}

/* Radio Group */
.invite-radio-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.invite-radio-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-main);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 2px solid transparent;
}

.invite-radio-option:hover {
    background: var(--bg-hover);
}

/* Selected radio option styling */
.invite-radio-option:has(input[type="radio"]:checked) {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

.invite-radio-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.invite-radio-option input[type="radio"]:checked {
    border-color: var(--color-cyan);
    background: var(--color-cyan);
}

.invite-radio-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

.radio-label {
    font-size: 15px;
    color: var(--text-primary);
}

/* Custom Input */
.invite-custom-input {
    display: none;
    padding-top: 8px;
}

.invite-custom-input.visible {
    display: block;
}

.invite-custom-input .form-input {
    width: 100%;
}

/* Form Hint */
.invite-form .form-hint {
    font-size: 12px;
    color: var(--text-muted);
    padding-left: 4px;
}

/* Form Buttons */
.invite-form-buttons {
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .invite-links-panel {
        width: 100vw;
        right: -100vw;
    }

    .invite-links-panel.open {
        right: 0;
    }

    .invite-item-actions {
        flex-direction: column;
    }

    /* Full-screen form on mobile */
    .invite-form-overlay .modal-content.invite-form-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
        padding: 16px;
    }

    .invite-form-body {
        padding: 12px 0;
    }

    .invite-radio-group {
        gap: 6px;
    }

    .invite-radio-option {
        padding: 12px 14px;
    }
}

/* ===========================================
   ADMINS PANEL - Additional Styles
   =========================================== */

.admin-item-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-card);
    overflow: hidden;
    flex-shrink: 0;
}

.admin-item-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-item-avatar-letter {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.owner-badge {
    color: #fbbf24;
}

.admin-item-perms {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    opacity: 0.8;
}

/* Admin Form Modal */
.admin-form-overlay {
    z-index: 1100;
    opacity: 1;
}

.admin-form-overlay .modal-content {
    transform: scale(1) translateY(0);
}

.admin-form-modal {
    width: 420px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
}

.admin-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.admin-form-header .modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.admin-form-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

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

.admin-form-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.admin-form-section {
    margin-bottom: 20px;
}

.admin-form-section:last-child {
    margin-bottom: 0;
}

.admin-form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-form-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-hover);
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 15px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.admin-form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--bg-card);
}

.admin-form-input::placeholder {
    color: var(--text-muted);
}

/* Search Input */
.admin-search-wrapper {
    position: relative;
}

.admin-search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: var(--bg-hover);
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 15px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.admin-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--bg-card);
}

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

.admin-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    width: 18px;
    height: 18px;
}

/* Search Results */
.admin-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.admin-search-results.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.admin-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.spinner-small {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.admin-search-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.admin-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.admin-search-item:hover {
    background: var(--bg-hover);
}

.admin-search-item:first-child {
    border-radius: 12px 12px 0 0;
}

.admin-search-item:last-child {
    border-radius: 0 0 12px 12px;
}

.admin-search-item:only-child {
    border-radius: 12px;
}

.admin-search-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-hover);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-search-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-search-item-avatar span {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
}

.admin-search-item-info {
    flex: 1;
    min-width: 0;
}

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

.admin-search-item-username {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Selected User */
.admin-selected-user {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-hover);
    border-radius: 12px;
    margin-top: 12px;
}

.admin-selected-user.visible {
    display: flex;
}

.admin-selected-readonly {
    display: flex;
    margin-top: 0;
}

.admin-selected-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-card);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-selected-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-selected-avatar span {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
}

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

.admin-selected-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.admin-selected-username {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.admin-selected-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--bg-card);
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.admin-selected-remove:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-rose);
}

/* Permissions Grid */
.admin-permissions-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-permission-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-hover);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

.admin-permission-item:hover {
    background: var(--bg-card);
}

.admin-permission-item input[type="checkbox"] {
    display: none;
}

.admin-permission-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    color: transparent;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.admin-permission-item input[type="checkbox"]:checked+.admin-permission-check {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.admin-permission-label {
    font-size: 14px;
    color: var(--text-primary);
    flex: 1;
}

/* Form Footer */
.admin-form-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

.admin-form-footer .btn-secondary,
.admin-form-footer .btn-primary {
    flex: 1;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.admin-form-footer .btn-secondary {
    background: var(--bg-hover);
    border: none;
    color: var(--text-primary);
}

.admin-form-footer .btn-secondary:hover {
    background: var(--bg-card);
}

.admin-form-footer .btn-primary {
    background: var(--gradient-primary);
    border: none;
    color: white;
}

.admin-form-footer .btn-primary:hover:not(:disabled) {
    opacity: 0.9;
}

.admin-form-footer .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile Responsive - Full-screen form like invite form */
@media (max-width: 480px) {
    .admin-form-overlay .modal-content.admin-form-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
    }

    .admin-form-header {
        padding: 16px;
        flex-shrink: 0;
    }

    .admin-form-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
    }

    .admin-form-footer {
        padding: 16px;
        flex-shrink: 0;
        background: var(--bg-card);
    }
}

/* ===========================================
   INVITE JOIN PAGE
   =========================================== */

.invite-join-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px);
    padding: 24px;
}

.invite-guest-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-height));
    padding-top: var(--header-height);
}

.invite-join-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 40px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Channel Avatar */
.invite-channel-avatar {
    width: 128px;
    height: 128px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-hover);
    border: 3px solid var(--border-color);
}

.invite-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.invite-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 600;
    color: var(--text-secondary);
    background: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-pink) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Channel Info */
.invite-channel-info {
    margin-bottom: 16px;
}

.invite-channel-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.invite-channel-members {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-muted);
}

.invite-channel-members svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

/* Description */
.invite-description {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-main);
    border-radius: 12px;
    text-align: left;
}

/* Requirements badges */
.invite-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
}

.invite-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.invite-badge svg {
    width: 14px;
    height: 14px;
}

.invite-badge-approval {
    background: rgba(255, 171, 64, 0.15);
    color: #ffab40;
    border: 1px solid rgba(255, 171, 64, 0.3);
}

.invite-badge-price {
    /*background: rgba(255, 82, 82, 0.15);
    color: #ff5252;
    border: 1px solid rgba(255, 82, 82, 0.3);*/
    background: rgb(255 255 255 / 15%);
    color: #bbbbbb;
    border: 1px solid rgb(139 139 139 / 30%);
}

/* Action Area */
.invite-action-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.invite-join-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.invite-join-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.invite-join-btn svg {
    width: 20px;
    height: 20px;
}

.invite-join-btn .btn-hint {
    opacity: 0.6;
    font-weight: 400;
    margin-left: 4px;
}

/* Approval hint */
.invite-approval-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 171, 64, 0.1);
    border-radius: 10px;
    text-align: left;
    font-size: 13px;
    color: var(--text-secondary);
}

.invite-approval-hint svg {
    width: 18px;
    height: 18px;
    color: #ffab40;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Message input */
.invite-message-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg-main);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s ease;
}

.invite-message-input:focus {
    outline: none;
    border-color: var(--color-cyan);
}

.invite-message-input::placeholder {
    color: var(--text-muted);
}

/* Price info */
.invite-price-info {
    padding: 20px;
    background: var(--bg-main);
    border-radius: 12px;
    text-align: center;
}

.invite-price-amount {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 4px;
}

.invite-price-label {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.invite-creator-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 10px;
}

.invite-balance-info {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.invite-balance-info strong {
    color: var(--text-main);
}

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

/* Success state */
.invite-success-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
}

.invite-success-state .success-icon {
    width: 64px;
    height: 64px;
    color: var(--color-green);
}

.invite-success-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.invite-success-hint {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* Already member state */
.invite-already-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
}

.invite-already-member .member-icon {
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    opacity: 0.7;
}

.invite-member-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Error state */
.invite-error-card {
    background: var(--bg-card);
}

.invite-error-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 82, 82, 0.1);
    border-radius: 50%;
}

.invite-error-icon .error-icon-lg {
    width: 40px;
    height: 40px;
    color: #ff5252;
}

.invite-error-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.invite-error-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.invite-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .invite-join-page {
        padding: 16px;
        min-height: calc(100vh - 100px);
    }

    .invite-join-card {
        padding: 15px 20px 25px 20px;
        border-radius: 16px;
    }

    .invite-channel-avatar {
        width: 128px;
        height: 128px;
    }

    .invite-avatar-placeholder {
        font-size: 32px;
    }

    .invite-channel-title {
        font-size: 20px;
    }

    .invite-join-btn {
        padding: 12px 20px;
        font-size: 15px;
    }
}

/* =============================================================================
   Transaction History Styles (Extracted from Sidebar.js)
   ============================================================================= */
#transaction-history-list {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 8px;
    transition: transform 0.2s, background-color 0.2s;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.transaction-item:active {
    transform: scale(0.98);
}

.transaction-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

.transaction-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    flex-shrink: 0;
    overflow: hidden;
}

.transaction-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.transaction-icon-wrapper.income {
    color: var(--color-success);
    background: rgba(0, 209, 102, 0.1);
}

.transaction-icon-wrapper.expense {
    color: var(--color-error);
    background: rgba(255, 75, 75, 0.1);
}

.transaction-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.transaction-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.transaction-amount {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    margin-left: 8px;
}

.transaction-amount.income {
    color: var(--color-success);
}

.transaction-amount.expense {
    color: var(--text-primary);
}

.transaction-history-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

.transaction-history-loading {
    text-align: center;
    color: var(--text-secondary);
    padding: 20px;
}

.transaction-history-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
    font-size: 14px;
}

.transaction-history-error {
    text-align: center;
    color: var(--color-error);
    padding: 10px;
}

/* Transaction item clickable state */
.transaction-item-clickable {
    cursor: pointer;
}

/* Modal spacing utilities */
.modal-message-spaced {
    margin-bottom: 12px;
}

.modal-buttons-spaced {
    margin-bottom: 24px;
}

/* Username muted state */
.username-muted {
    opacity: 0.5;
}

/* Clickable avatar in transactions */
.transaction-avatar-clickable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.transaction-avatar-clickable:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.transaction-avatar-clickable:active {
    transform: scale(1.05);
}

/* =============================================================================
   FEED PAGE
   ============================================================================= */

.feed-page {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--page-padding);
}

.feed-posts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Feed post wrapper with channel header */
.feed-post-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.2s;
}

.feed-post-wrapper:hover {
    border-color: var(--border-color-hover);
}

/* Channel header in feed */
.feed-post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.feed-post-header:hover {
    background: var(--bg-hover);
}

/* Feed post header row — wraps header + kebab menu */
.feed-post-header-row {
    display: flex;
    align-items: center;
}

.feed-post-header-row .feed-post-header {
    flex: 1;
    min-width: 0;
}

/* Kebab menu button in feed */
.feed-post-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 8px;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.feed-post-menu-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.feed-post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.feed-post-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Frozen post border (like .post-paid but blue) */
.post-frozen {
    border: 2px solid rgba(96, 165, 250, 0.35);
}
.post-frozen:hover {
    border-color: rgba(96, 165, 250, 0.5);
}

/* Frozen pill on media (like .mg-author-pill but blue) */
.mg-frozen-pill {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #60a5fa;
    pointer-events: none;
}

.feed-post-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    color: white;
}

.feed-post-channel-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feed-post-channel-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-post-date {
    font-size: 13px;
    color: var(--text-muted);
}

.feed-post-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--primary);
    opacity: 0.7;
}

/* Post content inside feed (remove duplicate styling) */
.feed-post-wrapper .post-card,
.feed-post-wrapper .message-card {
    border: none;
    border-radius: 0;
    background: transparent;
    margin: 0;
}

.feed-post-wrapper .post-card:hover,
.feed-post-wrapper .message-card:hover {
    border: none;
    background: transparent;
}

/* Feed empty state */
.feed-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.feed-empty-icon {
    width: 64px;
    height: 64px;
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 16px;
}

.feed-empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.feed-empty-state p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 20px 0;
    max-width: 300px;
}

.feed-empty-btn {
    padding: 10px 24px;
}

/* Feed loading state */
.feed-loading {
    display: flex;
    justify-content: center;
    padding: 40px;
}

/* Feed error state */
.feed-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.feed-error-icon {
    width: 48px;
    height: 48px;
    color: var(--danger);
    opacity: 0.7;
    margin-bottom: 16px;
}

.feed-error p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .feed-posts {
        gap: 12px;
    }

    .feed-post-header {
        padding: 10px 12px;
    }

    .feed-post-avatar {
        width: 36px;
        height: 36px;
    }
}

/* ===========================================
   CHAT INPUT ENHANCEMENTS
   =========================================== */

/* Enhanced chat input container - for Lit chat view */
chat-view-lit .chat-input-container {
    display: flex !important;
    align-items: end;
    gap: 8px;
    padding: 12px 16px;
    padding-bottom: calc(12px + var(--sab));
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* Input wrapper with inline actions */
.chat-input-wrapper {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: end;
}

.chat-input {
    width: 100%;
    padding: 12px 80px 12px 18px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
    resize: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    max-height: 150px;
    overflow-y: auto;
}

/* Actions inside input (emoji, tip) */
.chat-input-actions {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-input-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.chat-input-action-btn:hover {
    color: var(--color-purple);
    background: var(--bg-hover);
}

/* Tip button special styling */
.chat-tip-btn:hover {
    color: var(--warning);
}

/* Attach and send buttons */
.chat-input-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.chat-input-btn:hover {
    color: var(--color-purple);
    background: var(--bg-hover);
}

/* Send button modes (mic/send) */
.chat-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.chat-send-btn[data-mode="mic"] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.chat-send-btn[data-mode="mic"]:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.chat-send-btn[data-mode="send"] {
    background: var(--color-purple);
    color: white;
    box-shadow: 0 2px 8px rgba(139, 46, 168, 0.3);
}

.chat-send-btn[data-mode="send"]:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(139, 46, 168, 0.4);
}

.chat-send-btn[data-mode="send"]:active {
    transform: scale(0.95);
}

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

.chat-send-btn .icon-md {
    width: 22px;
    height: 22px;
}

/* Button mode change animation */
.chat-send-btn.btn-mode-change {
    animation: btn-pulse 0.2s ease;
}

@keyframes btn-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* ===========================================
   DRAG-AND-DROP OVERLAY
   =========================================== */

.chat-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: 2px dashed var(--color-purple);
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.chat-drop-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.chat-drop-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.chat-drop-overlay-content svg {
    opacity: 0.9;
}

/* ===========================================
   ATTACHMENT PREVIEW PANEL
   =========================================== */

.attachment-preview-panel {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 12px 16px;
}

.attachment-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.attachment-count {
    font-size: 13px;
    color: var(--text-secondary);
}

.attachment-clear {
    font-size: 13px;
    color: var(--color-purple);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.attachment-clear:hover {
    background: var(--bg-hover);
}

.attachment-preview-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.attachment-item {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    overflow: hidden;
}

.attachment-preview {
    position: relative;
    width: 80px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
}

.attachment-preview-img,
.attachment-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-preview-icon {
    color: var(--text-muted);
}

.attachment-status {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attachment-status.uploading {
    background: var(--color-purple);
    color: white;
}

.attachment-status.uploaded {
    background: var(--success);
    color: white;
}

.attachment-status.error {
    background: var(--danger);
    color: white;
}

.attachment-info {
    padding: 4px 6px;
}

.attachment-name {
    display: block;
    font-size: 11px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-size {
    font-size: 10px;
    color: var(--text-muted);
}

.attachment-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

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

/* ===========================================
   EMOJI PICKER
   =========================================== */

.emoji-picker-container {
    animation: emoji-picker-appear 0.2s ease;
}

@keyframes emoji-picker-appear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.emoji-picker {
    width: 320px;
    max-height: 320px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.emoji-picker-header {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.emoji-picker-search {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.emoji-picker-search:focus {
    outline: none;
    border-color: var(--color-purple);
}

.emoji-picker-tabs {
    display: flex;
    padding: 4px 8px;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.emoji-picker-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

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

.emoji-picker-tab.active {
    background: var(--color-purple);
    color: white;
}

.emoji-picker-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    align-content: start;
}

.emoji-picker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 22px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.emoji-picker-item:hover {
    background: var(--bg-hover);
    transform: scale(1.1);
}

.emoji-picker-empty {
    grid-column: 1 / -1;
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* ===========================================
   EMOJI/STICKER PICKER - MODE SWITCH
   =========================================== */

.emoji-picker {
    width: 340px;
    max-height: 380px;
}

.emoji-picker-mode-switch {
    display: flex;
    padding: 8px;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.emoji-picker-mode-switch .mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.emoji-picker-mode-switch .mode-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.emoji-picker-mode-switch .mode-btn.active {
    background: var(--color-purple);
    color: white;
}

/* ===========================================
   STICKER PICKER
   =========================================== */

.sticker-picker-header {
    display: flex;
    padding: 10px 12px;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
}

.sticker-import-input {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
}

.sticker-import-input::placeholder {
    color: var(--text-muted);
}

.sticker-import-input:focus {
    outline: none;
    border-color: var(--color-purple);
}

.sticker-import-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sticker-picker-header.importing {
    opacity: 0.7;
}

/* Importing indicator */
.sticker-importing-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 8px;
    background: var(--color-purple-alpha);
    border-bottom: 1px solid var(--border-color);
    color: var(--color-purple);
    font-size: 14px;
    font-weight: 500;
}

.sticker-importing-indicator .icon-md {
    width: 24px;
    height: 24px;
}

.importing-hint {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

.sticker-import-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--color-purple);
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sticker-import-btn:hover:not(:disabled) {
    background: var(--color-purple-dark);
}

.sticker-import-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sticker-picker-tabs {
    display: flex;
    padding: 6px 8px;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    flex-shrink: 0;
}

.sticker-picker-tabs::-webkit-scrollbar {
    display: none;
}

.sticker-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    overflow: hidden;
    color: var(--text-muted);
    position: relative;
}

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

.sticker-tab.active {
    background: var(--color-purple);
    box-shadow: 0 0 0 2px var(--color-purple);
    color: white;
}

/* Sticker grid wrapper for positioning delete button */
.sticker-grid-wrapper {
    position: relative;
}

/* Delete button for sticker packs - top right of grid */
.sticker-pack-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-error);
    z-index: 10;
    transition: all 0.2s ease;
}

.sticker-pack-delete-btn svg {
    width: 12px;
    height: 12px;
}

.sticker-pack-delete-btn:hover {
    background: var(--color-error);
    color: white;
    transform: scale(1.1);
}

.sticker-tab .pack-thumb {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.sticker-tabs-loading,
.sticker-tabs-empty {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.sticker-picker-content {
    flex: 1;
    overflow-y: auto;
    min-height: 180px;
}

.sticker-content-loading,
.sticker-content-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    gap: 8px;
}

.sticker-hint {
    font-size: 12px;
    color: var(--text-disabled);
}

.sticker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px;
}

.sticker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    padding: 4px;
    transition: all 0.15s ease;
}

.sticker-item:hover {
    background: var(--bg-hover);
    transform: scale(1.05);
}

.sticker-item img,
.sticker-item video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sticker-item .sticker-video {
    pointer-events: none;
}

.sticker-emoji-placeholder {
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Spin animation for loader */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite;
}

/* ===========================================
   TIP MODAL
   =========================================== */

.tip-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    animation: tip-modal-fade-in 0.2s ease;
}

@keyframes tip-modal-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.tip-modal {
    width: 90%;
    max-width: 360px;
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    animation: tip-modal-slide-in 0.3s ease;
}

@keyframes tip-modal-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.tip-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tip-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.tip-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
}

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

.tip-modal-recipient {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 16px;
}

.tip-modal-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.tip-modal-avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-purple);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
}

.tip-modal-recipient-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

.tip-modal-balance {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    text-align: center;
}

.tip-modal-balance strong {
    color: var(--warning);
}

.tip-modal-amounts {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.tip-amount-btn {
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tip-amount-btn:hover:not(:disabled) {
    border-color: var(--color-purple);
    background: var(--bg-hover);
}

.tip-amount-btn.selected {
    border-color: var(--color-purple);
    background: var(--color-purple);
    color: white;
}

.tip-amount-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tip-modal-custom {
    position: relative;
    margin-bottom: 16px;
}

.tip-custom-input {
    width: 100%;
    padding: 12px 40px 12px 16px;
    font-size: 15px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
}

.tip-custom-input:focus {
    outline: none;
    border-color: var(--color-purple);
}

.tip-custom-suffix {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

.tip-modal-error {
    padding: 10px;
    background: rgba(var(--danger-rgb), 0.1);
    border: 1px solid var(--danger);
    border-radius: 8px;
    color: var(--danger);
    font-size: 13px;
    text-align: center;
    margin-bottom: 16px;
}

.tip-modal-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ===========================================
   MOBILE ADJUSTMENTS FOR NEW COMPONENTS
   =========================================== */

@media (max-width: 767px) {
    chat-view-lit .chat-input-container {
        padding: 10px 12px;
        padding-bottom: calc(10px + var(--sab));
        gap: 6px;
    }

    chat-view-lit .chat-input {
        padding: 10px 70px 10px 14px;
        font-size: 16px;
        min-height: 40px;
        border-radius: 20px;
    }

    .chat-input-btn,
    .chat-send-btn {
        width: 40px;
        height: 40px;
    }

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

    .emoji-picker {
        width: calc(100vw - 20px);
        max-width: 320px;
    }

    .emoji-picker-content {
        grid-template-columns: repeat(7, 1fr);
    }

    .tip-modal {
        width: 95%;
    }

    .tip-modal-amounts {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===========================================
   VOICE RECORDER
   =========================================== */

/* Hide input elements during recording */
.chat-input-container.recording-mode .chat-input-btn,
.chat-input-container.recording-mode .chat-tip-btn,
.chat-input-container.recording-mode .chat-input-wrapper,
.chat-input-container.recording-mode .chat-send-btn {
    display: none !important;
}

.voice-recorder-wrapper,
.voice-recorder-overlay {
    flex: 1;
    display: flex;
    width: 100%;
}

.voice-recorder-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    width: 100%;
    animation: slideUp 0.2s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.voice-recorder-cancel {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 75, 75, 0.15);
    color: var(--color-error);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.voice-recorder-cancel:hover {
    background: rgba(255, 75, 75, 0.25);
    transform: scale(1.05);
}

.voice-recorder-visualization {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 40px;
    padding: 0 12px;
}

.voice-recorder-visualization .voice-bar {
    width: 3px;
    height: 4px;
    background: var(--color-rose);
    border-radius: 2px;
    transition: height 0.05s ease;
}

.voice-recorder-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 60px;
}

.voice-recorder-timer {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.voice-recorder-recording-dot {
    width: 8px;
    height: 8px;
    background: var(--color-error);
    border-radius: 50%;
    animation: pulse 1s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.voice-recorder-send {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--color-purple);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-rose);
    transition: all 0.2s;
}

.voice-recorder-send:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(139, 46, 168, 0.4);
}

/* ===========================================
   VOICE PLAYER (in messages)
   =========================================== */

.voice-player {
    display: flex;
    align-items: center;
    gap: 10px;
    /*padding: 8px 12px;*/
    padding: 0px 8px;
    min-width: 200px;
    max-width: 300px;
}

.voice-player-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.message-other .voice-player-btn {
    background: rgba(139, 46, 168, 0.2);
    color: var(--color-purple);
}

.voice-player-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.message-other .voice-player-btn:hover {
    background: rgba(139, 46, 168, 0.3);
}

/* Play/Pause icon toggle */
.voice-player .voice-icon-pause {
    display: none;
}

.voice-player.playing .voice-icon-play {
    display: none;
}

.voice-player.playing .voice-icon-pause {
    display: block;
}

.voice-player-content {
    flex: 1;
    min-width: 0;
}

.voice-player-waveform {
    position: relative;
    height: 32px;
    cursor: pointer;
    margin-bottom: 4px;
}

.voice-waveform-bars {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 1px;
}

.voice-waveform-bars .voice-bar {
    width: 2px;
    min-height: 2px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 1px;
    transition: background 0.1s;
}

.message-other .voice-waveform-bars .voice-bar {
    background: rgba(139, 46, 168, 0.3);
}

/* Waveform bars - played state */
.voice-waveform-bars .voice-bar.played {
    background: rgba(255, 255, 255, 0.95);
}

.message-other .voice-waveform-bars .voice-bar.played {
    background: var(--color-purple);
}

/* Hide the old progress element */
.voice-waveform-progress {
    display: none;
}

.voice-player-time {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

.message-other .voice-player-time {
    color: var(--text-muted);
}

.voice-current-time {
    font-variant-numeric: tabular-nums;
}

.voice-duration {
    font-variant-numeric: tabular-nums;
}

/* Voice message bubble adjustments */
.message-bubble:has(.voice-player) {
    padding: 4px;
}

/* Voice unlistened state — accent button + bright waveform */
.voice-unlistened .voice-player-btn {
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-purple);
}

.message-other .voice-unlistened .voice-player-btn {
    background: var(--color-purple);
    color: #fff;
}

.voice-unlistened .voice-waveform-bars .voice-bar {
    background: rgba(255, 255, 255, 0.95);
}

.message-other .voice-unlistened .voice-waveform-bars .voice-bar {
    background: var(--color-purple);
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .voice-recorder-container {
        padding: 10px 12px;
        gap: 8px;
    }

    .voice-recorder-visualization {
        gap: 1px;
    }

    .voice-recorder-visualization .voice-bar {
        width: 2px;
    }

    .voice-player {
        min-width: 180px;
        max-width: 260px;
    }

    .voice-player-btn {
        width: 36px;
        height: 36px;
    }
}

/* =============================================================================
   LIT COMPONENTS STYLES
   ============================================================================= */

/* Lit view cache container */
#lit-view-cache {
    display: contents;
}

/* Lit chat view - inherits .chat-view styles via no Shadow DOM */
chat-view-lit {
    display: block;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

@media (max-width: 767px) {
    chat-view-lit {
        top: 0;
        height: 100vh;
        height: 100dvh;
    }
}

@media (min-width: 1024px) {
    chat-view-lit {
        left: 280px;
    }
}

chat-view-lit .chat-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-primary);
    overflow: hidden;
    /* Override vanilla .chat-view fixed positioning */
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;

    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url(/assets/img/group-background.jpg);
    background-size: contain;
    background-position: center;
}

chat-view-lit .chat-header {
    flex-shrink: 0;
}

chat-view-lit .chat-messages {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* Important for flex children with overflow */
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

/* Scroll-to-bottom button */
.scroll-down-btn {
    position: absolute;
    bottom: 80px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, #333);
    color: var(--text-secondary, #999);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s, color 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.scroll-down-btn:hover {
    background: var(--bg-hover, #2a2a3e);
    color: var(--text-primary, #fff);
}

.scroll-down-btn svg {
    width: 22px;
    height: 22px;
}

.scroll-down-badge {
    position: absolute;
    top: -6px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--color-primary, #7c4dff);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    pointer-events: none;
}

/* Unread separator line */
.unread-separator {
    display: none; /* temporarily hidden — revisit later */
    /*display: flex;*/
    align-items: center;
    padding: 8px 16px;
    gap: 12px;
}

.unread-separator::before,
.unread-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-primary, #7c4dff);
    opacity: 0.5;
}

.unread-separator span {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary, #7c4dff);
    white-space: nowrap;
}

/* History sentinel for infinite scroll */
chat-view-lit .history-sentinel {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    min-height: 40px;
}

chat-view-lit .history-end {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

/* Lit chat loading state */
chat-view-lit .chat-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 20px;
    color: var(--text-secondary);
}

chat-view-lit .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--color-purple);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Lit chat error state */
chat-view-lit .chat-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 16px;
    color: var(--text-secondary);
    padding: 20px;
    text-align: center;
}

chat-view-lit .chat-error button {
    padding: 10px 24px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--color-purple);
    color: white;
    cursor: pointer;
    font-size: 14px;
    transition: opacity 0.2s;
}

chat-view-lit .chat-error button:hover {
    opacity: 0.9;
}

/* Lit message card styles */
message-card-lit {
    display: contents;
    /* Allow children to participate in parent flex layout */
}

message-card-lit .message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    animation: messageAppear 0.2s ease-out;
}

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

message-card-lit .message-other {
    align-self: flex-start;
    align-items: flex-start;
}

message-card-lit .message-bubble {
    padding: 6px 8px;
    max-width: 100%;
    border-radius: 8px;
    word-wrap: break-word;
    position: relative;
}

message-card-lit .message-own .message-bubble {
    background: var(--gradient-chat-bubble);
    color: white;
    border-bottom-right-radius: 4px;
}

message-card-lit .message-other .message-bubble {
    background: var(--bg-card);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

/* Desktop: fixed bubble width like Telegram */
@media (min-width: 768px) {
    message-card-lit .message-bubble {
        max-width: 480px;
    }
}

/* Media first in bubble - no top padding (Telegram-style edge-to-edge) */
message-card-lit .message-bubble:has(>.mg-mode-chat:first-child) {
    padding-top: 0;
}

message-card-lit .message-bubble>.mg-mode-chat:first-child {
    margin-top: 0;
    border-radius: 8px 8px 0 0;
}

message-card-lit .message-own .message-bubble>.mg-mode-chat:first-child {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

message-card-lit .message-bubble>.mg-mode-chat:first-child .mg-image,
message-card-lit .message-bubble>.mg-mode-chat:first-child .mg-video {
    border-radius: 8px 8px 0 0;
}

message-card-lit .message-text {
    font-size: 14px;
    line-height: 1.35;
    white-space: pre-wrap;
    margin: 0;
}

message-card-lit .message-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
}

.message-group .message-time {}

message-card-lit .message-time {
    font-size: 11px;
    opacity: 0.24;
}

.message-other .message-time {
    font-size: 11px;
    opacity: 0.1;
}

.sticker-meta .message-time {
    opacity: 0.3;
}

message-card-lit .message-own .message-time {
    color: rgba(255, 255, 255, 0.7);
}

message-card-lit .message-edited {
    font-size: 11px;
    font-style: italic;
    opacity: 0.22;
}

message-card-lit .message-own .message-edited {
    color: rgba(255, 255, 255, 0.5);
}

.media-only-meta .message-edited,
.sticker-meta .message-edited {
    color: inherit;
    opacity: 0.4;
}

message-card-lit .message-status {
    display: flex;
    color: rgba(255, 255, 255, 0.7);
}

message-card-lit .message-status .icon-xs {
    width: 14px;
    height: 14px;
}

message-card-lit .message-status.status-sending .sending-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: pulse 1s infinite;
}

message-card-lit .message-media img,
message-card-lit .message-media video {
    max-width: 100%;
    max-height: 300px;
    border-radius: 12px;
    margin-bottom: 4px;
}

message-card-lit .date-separator {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

message-card-lit .date-separator span {
    background: var(--bg-card);
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Lit chat view uses same input styles as original Chat.js */
/* Styled Chat Links */
.chat-message-link {
    color: #7EB8FF;
    text-decoration: none;
    font-weight: 500;
    transition: filter 0.2s;
}

.chat-message-link:hover {
    text-decoration: underline;
    opacity: 1;
    filter: brightness(1.2);
}

/* Internal link widget (channel/user micro-preview in messages) */
.ilw {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px 2px 4px;
    border-radius: 12px;
    vertical-align: middle;
    line-height: 1.3;
}
.ilw:hover {
    background: rgba(255, 255, 255, 0.1);
    filter: none;
}
.ilw-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.ilw-avatar-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
}
.ilw-name {
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===========================================
   MESSAGE CODE FORMATTING (Telegram-style)
   =========================================== */

/* Inline code: `like this` */
.message-text code.msg-code-inline,
.message-text > code {
    background: rgba(0, 0, 0, 0.25);
    color: var(--color-rose);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 0.9em;
    word-break: break-all;
}

/* Own messages: adjust inline code for gradient bg */
.message-own .message-text code.msg-code-inline,
.message-own .message-text > code {
    background: rgba(0, 0, 0, 0.2);
    color: #ffd6e0;
}

/* Code block wrapper */
.message-text .msg-code-block {
    margin: 6px 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

/* Blockquote — Telegram-style */
.message-text blockquote {
    margin: 4px 0;
    padding: 4px 0 4px 10px;
    border-left: 3px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    color: inherit;
    font-style: italic;
}
.message-own .message-text blockquote {
    border-left-color: rgba(255, 255, 255, 0.5);
}
.message-text blockquote[expandable] {
    max-height: 4.8em;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.message-text blockquote[expandable]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.6em;
    background: linear-gradient(transparent, var(--bg-message, #2a2a2a));
    pointer-events: none;
}
.message-own .message-text blockquote[expandable]::after {
    background: linear-gradient(transparent, var(--bg-message-own, #5b3a7a));
}
.message-text blockquote[expandable].expanded {
    max-height: none;
}
.message-text blockquote[expandable].expanded::after {
    display: none;
}

/* Code block header — Telegram-style: compact, subtle */
.message-text .msg-code-block .msg-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 10px 0;
    min-height: 18px;
}

.message-text .msg-code-block .msg-code-lang {
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: lowercase;
    letter-spacing: 0.3px;
    line-height: 1;
}

/* Hide empty lang labels */
.message-text .msg-code-block .msg-code-lang:empty {
    display: none;
}

/* Copy button — appears on hover */
.message-text .msg-code-block .msg-code-copy {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all 0.2s;
    margin-left: auto;
}

.message-text .msg-code-block:hover .msg-code-copy {
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

.message-text .msg-code-block .msg-code-copy:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.12);
}

.message-text .msg-code-block .msg-code-copy:active {
    transform: scale(0.95);
}

/* Pre/code inside code blocks */
.message-text .msg-code-block pre {
    margin: 0;
    padding: 4px 10px 8px;
    overflow-x: auto;
    white-space: pre;
}

.message-text .msg-code-block pre code {
    font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
    background: none !important;
    padding: 0;
}

/* Bot HTML <pre><code> without .msg-code-block wrapper (fallback) */
.message-text > pre {
    background: rgba(0, 0, 0, 0.35);
    margin: 6px 0;
    padding: 8px 10px;
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre;
}

.message-text > pre code {
    font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
    background: none !important;
    padding: 0;
}

/* Code block scrollbar (thin, subtle) */
.message-text .msg-code-block pre::-webkit-scrollbar,
.message-text > pre::-webkit-scrollbar {
    height: 4px;
}

.message-text .msg-code-block pre::-webkit-scrollbar-thumb,
.message-text > pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

/* ===========================================
   HIGHLIGHT.JS SYNTAX THEME (Telegram-inspired)
   Minimal dark theme matching MewPass palette
   =========================================== */

/* Reset hljs defaults */
.msg-code-block pre code.hljs {
    background: none !important;
    padding: 0 !important;
}

/* Keywords: if, else, return, function, class, etc. */
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-type {
    color: #c792ea;
}

/* Strings */
.hljs-string,
.hljs-attribute,
.hljs-template-tag,
.hljs-template-variable {
    color: #ecc48d;
}

/* Numbers, booleans, null */
.hljs-number,
.hljs-literal,
.hljs-symbol,
.hljs-bullet {
    color: #f78c6c;
}

/* Functions, methods */
.hljs-title,
.hljs-title.function_,
.hljs-section {
    color: #82aaff;
}

/* Comments */
.hljs-comment,
.hljs-quote {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

/* Variables, params */
.hljs-variable,
.hljs-params {
    color: rgba(255, 255, 255, 0.88);
}

/* Tags (HTML/XML) */
.hljs-tag {
    color: #f07178;
}

.hljs-name {
    color: #f07178;
}

.hljs-attr {
    color: #ffcb6b;
}

/* Meta, preprocessor, php tags */
.hljs-meta,
.hljs-meta .hljs-keyword {
    color: #89ddff;
}

/* Regex, special */
.hljs-regexp {
    color: #89ddff;
}

/* Additions/deletions (diffs) */
.hljs-addition {
    color: #c3e88d;
    background: rgba(195, 232, 141, 0.08);
}

.hljs-deletion {
    color: #f07178;
    background: rgba(240, 113, 120, 0.08);
}

/* Emphasis */
.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: bold;
}

/* Selector (CSS) */
.hljs-selector-class,
.hljs-selector-id {
    color: #c792ea;
}

.hljs-property {
    color: #82aaff;
}


/* ===========================================
   @MENTION LINKS
   =========================================== */

.mention-link {
    color: #bb86fc;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

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

.message-own .mention-link {
    color: #e8d5ff;
}

/* ===========================================
   MENTION AUTOCOMPLETE POPUP
   =========================================== */

.mention-autocomplete {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    z-index: 100;
    margin-bottom: 4px;
}

.mention-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.mention-autocomplete-item:hover,
.mention-autocomplete-item--selected {
    background: var(--bg-hover);
}

.mention-autocomplete-item:first-child {
    border-radius: 12px 12px 0 0;
}

.mention-autocomplete-item:last-child {
    border-radius: 0 0 12px 12px;
}

.mention-autocomplete-item:only-child {
    border-radius: 12px;
}

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

.mention-autocomplete-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-purple);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.mention-autocomplete-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

.mention-autocomplete-username {
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Command autocomplete — extends mention-autocomplete styles */
.command-autocomplete-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-purple);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.command-autocomplete-name {
    font-family: var(--font-mono, monospace);
}

.command-autocomplete-desc {
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===========================================
   GROUP CHAT MESSAGE STYLES (Telegram-like)
   =========================================== */

/* Group messages layout: avatar + content wrapper */
message-card-lit .message-group {
    flex-direction: row;
    align-items: flex-end;
    /* Avatar at bottom */
    gap: 8px;
}

/* All group messages go to left */
message-card-lit .message-group,
message-card-lit .message-group.message-other {
    align-self: flex-start;
}

/* Avatar container - at bottom left */
message-card-lit .message-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    align-self: flex-end;
    margin-bottom: 0;
}

message-card-lit .message-avatar .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

message-card-lit .message-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: white;
}

/* Content wrapper styling */
message-card-lit .message-content-wrapper {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Default for direct chats: fit content up to parent max */
    max-width: 100%;
}

/* In groups, wrapper acts as a flex item filling space */
message-card-lit .message-group .message-content-wrapper {
    flex: 1;
    max-width: 100%;
    /* Ensure it doesn't overflow parent */
    align-items: flex-start;
}

/* Align bubbles correctly in wrapper based on ownership */
message-card-lit .message-own .message-content-wrapper {
    align-items: flex-end;
}

message-card-lit .message-other .message-content-wrapper {
    align-items: flex-start;
}

/* Force left alignment for everything in groups */
message-card-lit .message-group .message-content-wrapper {
    align-items: flex-start !important;
}

/* Hide sender name by default (user request) */
message-card-lit .message-sender-name {
    display: none;
}

/* Group bubble border (extracted from inline style) */
message-card-lit .message-group .message-bubble:not(.has-media-overlay) {
    /*border: 1px solid #202020;*/
    border: 1px solid #20202026;
}

/* Stickers in groups */
message-card-lit .message-sticker.message-group .sticker-reply-wrapper {
    align-items: flex-start;
}

message-card-lit .message-sticker.message-group .sticker-meta {
    justify-content: flex-start;
    color: rgba(255, 255, 255, 0.5);
}

/* Mobile adjustments */
@media (max-width: 640px) {
    message-card-lit .message-avatar {
        width: 36px;
        height: 36px;
    }

    message-card-lit .message-group .message-content-wrapper {
        max-width: 100%;
    }
}

/* Sender Name in Group Chats */
.message-sender-name {
    display: block;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    margin-bottom: 2px;
    padding-left: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.message-media-only .message-sender-name {
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    z-index: 5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 1px rgba(0, 0, 0, 0.8);
    font-weight: 600;
    margin-bottom: 0;
}

/* Ensure name visibility */
.message-sender-name {
    display: block !important;
    min-height: 15px;
    overflow: visible !important;
    white-space: normal !important;
    margin-bottom: 4px;
    margin-top: 10px;
}

/* Admin badge styles in group chats */
.sender-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    margin-top: -5px;
    vertical-align: middle;
}

.sender-icon .icon-badge {
    width: 12px;
    height: 12px;
}

.sender-icon-owner {
    color: #ffbf00e0;
}

.sender-icon-admin {
    color: #2196F3;
}

.sender-badge {
    font-size: 0.7em;
    font-weight: 500;
    margin-left: 6px;
    opacity: 0.85;
    margin-top: -5px;
}

.sender-badge.badge-owner {
    color: #ffffff40;
    text-transform: uppercase;
}

.sender-badge.badge-admin {
    color: #2195f3;
    text-transform: uppercase;
}

/* Telegram-style spoiler effect */
.tg-spoiler {
    display: inline;
    padding: 0 2px;
    margin: 0 1px;
    cursor: pointer;
    position: relative;
    border-radius: 4px;
    transition: filter 0.2s ease;
}

/* Hidden state - blur text */
.tg-spoiler:not(.revealed) {
    filter: blur(5px);
    background: rgba(128, 128, 128, 0.2);
}

/* Hover hint on hidden spoiler */
.tg-spoiler:not(.revealed):hover {
    filter: blur(4px);
}

/* Revealed state - normal text */
.tg-spoiler.revealed {
    filter: none;
    background: transparent;
    cursor: default;
}

/* ===========================================
   MESSAGE REACTIONS (Telegram-style pills)
   =========================================== */

/* Reactions container inside message bubble */
message-card-lit .message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    margin-bottom: 2px;
}

/* Reaction pill - Telegram style: compact, avatars prominent */
message-card-lit .reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 3px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-primary);
    height: 24px;
}

message-card-lit .reaction-pill:hover {
    background: rgba(255, 255, 255, 0.18);
}

message-card-lit .reaction-pill:active {
    transform: scale(0.95);
}

/* Own reaction - highlighted with purple tint */
message-card-lit .reaction-pill.reaction-own {
    background: rgba(139, 46, 168, 0.3);
}

message-card-lit .reaction-pill.reaction-own:hover {
    background: rgba(139, 46, 168, 0.4);
}

/* Emoji in pill - Telegram style */
message-card-lit .reaction-emoji {
    font-size: 15px;
    line-height: 1;
}

/* Avatar stack in pill - Telegram style: prominent avatars */
message-card-lit .reaction-avatars {
    display: flex;
    align-items: center;
    margin-left: -1px;
}

message-card-lit .reaction-avatar,
message-card-lit .reaction-avatar-placeholder {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.4);
    margin-left: -6px;
    flex-shrink: 0;
}

message-card-lit .reaction-avatar:first-child,
message-card-lit .reaction-avatar-placeholder:first-child {
    margin-left: 0;
}

message-card-lit .reaction-avatar {
    object-fit: cover;
}

message-card-lit .reaction-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: white;
    font-size: 8px;
    font-weight: 600;
}

/* Count in pill */
message-card-lit .reaction-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 2px;
}

message-card-lit .reaction-pill.reaction-own .reaction-count {
    color: var(--color-purple);
}

/* Mobile adjustments */
@media (max-width: 640px) {
    message-card-lit .reaction-pill {
        padding: 2px 3px 2px 2px;
        height: 22px;
    }

    message-card-lit .reaction-emoji {
        font-size: 14px;
    }

    message-card-lit .reaction-avatar,
    message-card-lit .reaction-avatar-placeholder {
        width: 20px;
        height: 20px;
        margin-left: -5px;
    }
}

/* =============================================================================
   NOTIFICATION CENTER
   ============================================================================= */

.notification-center {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--page-padding) 80px;
}

.nc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    position: sticky;
    top: 0;
    background: var(--color-bg, #0a0a0a);
    z-index: 5;
}

.nc-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text, #fff);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.nc-title-icon {
    width: 22px;
    height: 22px;
    opacity: 0.7;
}

.nc-mark-all {
    background: none;
    border: 1px solid var(--color-border, rgba(255,255,255,0.1));
    color: var(--color-text-secondary, rgba(255,255,255,0.6));
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}

.nc-mark-all:hover {
    background: var(--color-surface, rgba(255,255,255,0.05));
    color: var(--color-text, #fff);
}

.nc-mark-icon {
    width: 14px;
    height: 14px;
}

.nc-list {
    display: flex;
    flex-direction: column;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.06));
}

.notif-item:hover {
    background: var(--color-surface, rgba(255,255,255,0.04));
}

.notif-item.notif-unread {
    background: rgba(108, 92, 231, 0.08);
}

.notif-item.notif-unread:hover {
    background: rgba(108, 92, 231, 0.12);
}

.notif-avatar {
    position: relative;
    flex-shrink: 0;
}

.notif-type-badge {
    position: absolute;
    bottom: -2px;
    right: -4px;
    width: 20px;
    height: 20px;
    background: var(--color-surface-elevated, #1a1a2e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-bg, #0a0a0a);
}

.notif-type-icon {
    width: 12px;
    height: 12px;
    color: var(--color-primary, #6c5ce7);
}

.notif-emoji {
    font-size: 11px;
    width: auto;
    height: auto;
}

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

.notif-text {
    font-size: 14px;
    color: var(--color-text, #fff);
    line-height: 1.4;
}

.notif-text strong {
    font-weight: 600;
}

.notif-time {
    font-size: 12px;
    color: var(--color-text-secondary, rgba(255,255,255,0.5));
    margin-top: 2px;
}

.nc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--color-text-secondary, rgba(255,255,255,0.5));
    gap: 12px;
}

.nc-empty-icon svg {
    width: 48px;
    height: 48px;
    opacity: 0.3;
}

.nc-load-more {
    display: block;
    width: 100%;
    padding: 14px;
    background: none;
    border: none;
    color: var(--color-primary, #6c5ce7);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
}

.nc-load-more:hover {
    background: var(--color-surface, rgba(255,255,255,0.04));
}

/* =========================================================================
   ONBOARDING WIZARD
   ========================================================================= */

.onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--color-bg, #0a0a0a);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.onboarding-overlay.closing {
    animation: onboardingFadeOut 0.3s ease forwards;
}

@keyframes onboardingFadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

.onboarding-modal {
    width: 100%;
    max-width: 420px;
    padding: 0 20px;
    position: relative;
}

.onboarding-progress {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    margin-bottom: 40px;
    overflow: hidden;
}

.onboarding-progress-bar {
    height: 100%;
    background: var(--color-primary, #8B2EA8);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.onboarding-step {
    text-align: center;
}

.onboarding-step-header {
    margin-bottom: 32px;
}

.onboarding-step-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text, #fff);
    margin: 0 0 8px 0;
}

.onboarding-subtitle {
    font-size: 15px;
    color: var(--color-text-secondary, rgba(255,255,255,0.6));
    margin: 0;
    line-height: 1.4;
}

/* ── Step 1: Avatar ─────────────────────────────────────────────── */

.onboarding-avatar-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.onboarding-avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.onboarding-avatar-preview:hover {
    transform: scale(1.05);
}

.onboarding-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.onboarding-avatar-empty {
    width: 120px !important;
    height: 120px !important;
    font-size: 36px !important;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
}

/* ── Step 2: Username ────────────────────────────────────────────── */

.onboarding-username-input {
    margin-bottom: 32px;
    text-align: left;
}

.input-with-prefix {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 0 16px;
    transition: border-color 0.2s ease;
}

.input-with-prefix:focus-within {
    border-color: var(--color-primary, #8B2EA8);
}

.input-prefix {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-secondary, rgba(255,255,255,0.5));
    margin-right: 2px;
}

.input-with-prefix input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 17px;
    color: var(--color-text, #fff);
    padding: 14px 0;
    font-family: inherit;
}

.input-with-prefix input::placeholder {
    color: rgba(255,255,255,0.3);
}

.username-status {
    min-height: 24px;
    margin-top: 8px;
    font-size: 13px;
    padding-left: 4px;
}

.status-ok { color: #2ecc71; }
.status-error { color: #e74c3c; }
.status-checking { color: var(--color-text-secondary, rgba(255,255,255,0.5)); }

.onboarding-hint {
    font-size: 13px;
    color: var(--color-text-secondary, rgba(255,255,255,0.4));
    margin: 4px 0 0 4px;
}

/* ── Step 3: Bio ─────────────────────────────────────────────────── */

.onboarding-bio-input {
    margin-bottom: 32px;
    text-align: left;
}

.onboarding-bio-input textarea {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 15px;
    color: var(--color-text, #fff);
    resize: none;
    outline: none;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.onboarding-bio-input textarea:focus {
    border-color: var(--color-primary, #8B2EA8);
}

.onboarding-bio-input textarea::placeholder {
    color: rgba(255,255,255,0.3);
}

.bio-counter {
    text-align: right;
    font-size: 12px;
    color: var(--color-text-secondary, rgba(255,255,255,0.4));
    margin-top: 6px;
}

/* ── Step 4: Age Confirmation ────────────────────────────────────── */

.onboarding-age-confirm {
    margin-bottom: 32px;
    text-align: left;
}

.onboarding-age-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary, rgba(255,255,255,0.6));
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 16px;
    margin: 0;
}

/* ── Step 5: Interest Categories ─────────────────────────────────── */

.onboarding-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.onboarding-category-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    color: var(--color-text-primary, #fff);
    font-size: 13px;
    line-height: 1.2;
}

.onboarding-category-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}

.onboarding-category-btn.selected {
    background: rgba(139, 92, 246, 0.15);
    border-color: var(--color-primary, #8B5CF6);
}

.category-emoji {
    font-size: 22px;
    flex-shrink: 0;
}

.category-label {
    font-weight: 500;
}

/* ── Step 6: Recommended Channels ────────────────────────────────── */

.onboarding-channels-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 32px;
    max-height: 360px;
    overflow-y: auto;
    text-align: left;
}

.onboarding-channel-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    transition: background 0.15s ease;
}

.onboarding-channel-card:hover {
    background: rgba(255,255,255,0.07);
}

.onboarding-channel-avatar {
    flex-shrink: 0;
}

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

.onboarding-channel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.onboarding-channel-members {
    font-size: 13px;
    color: var(--color-text-secondary, rgba(255,255,255,0.5));
    margin-top: 2px;
}

/* ── Buttons ─────────────────────────────────────────────────────── */

.onboarding-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.onboarding-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 14px 24px;
    text-decoration: none;
}

.onboarding-actions .btn-primary {
    background: var(--color-primary, #8B2EA8);
    color: #fff;
}

.onboarding-actions .btn-primary:hover {
    filter: brightness(1.1);
}

.onboarding-actions .btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.onboarding-actions .btn-block {
    width: 100%;
}

.onboarding-actions .btn-text {
    background: none;
    color: var(--color-text-secondary, rgba(255,255,255,0.5));
    padding: 10px 24px;
}

.onboarding-actions .btn-text:hover {
    color: var(--color-text, #fff);
}

.onboarding-actions .btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--color-text, #fff);
}

.onboarding-actions .btn-outline.btn-joined {
    color: var(--color-text-secondary, rgba(255,255,255,0.5));
    cursor: default;
}

/* Channel join buttons (smaller) */
.onboarding-channel-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px 16px;
    flex-shrink: 0;
    text-decoration: none;
}

.onboarding-channel-card .btn-primary {
    background: var(--color-primary, #8B2EA8);
    color: #fff;
}

.onboarding-channel-card .btn-primary:hover {
    filter: brightness(1.1);
}

.onboarding-channel-card .btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--color-text-secondary, rgba(255,255,255,0.5));
}

.onboarding-channel-card .btn-sm {
    font-size: 13px;
    padding: 8px 16px;
}

.onboarding-joined-badge {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent, #7c6cff);
    padding: 8px 0 4px;
    animation: fadeIn 0.3s ease;
}

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

/* Avatar choose button */
.onboarding-avatar-picker .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: var(--color-text, #fff);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px 20px;
}

.onboarding-avatar-picker .btn-outline:hover {
    background: rgba(255,255,255,0.06);
}

/* ===========================================
   CHANNEL STATS PANEL (SlideOut)
   =========================================== */

.channel-stats-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    animation: statsOverlayIn 0.2s ease;
}

.channel-stats-overlay.closing {
    animation: statsOverlayOut 0.2s ease forwards;
}

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

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

.channel-stats-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background: var(--bg-card);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
}

.channel-stats-overlay.closing .channel-stats-panel {
    animation: slideOutRight 0.2s ease forwards;
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes slideOutRight {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

.channel-stats-panel .panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.channel-stats-panel .panel-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.channel-stats-panel .panel-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
}

.channel-stats-panel .panel-back-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.channel-stats-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.channel-stats-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}

/* Stats Grid */
.channel-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-input);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-card-icon {
    width: 18px;
    height: 18px;
    color: var(--color-rose);
    opacity: 0.7;
}

.stat-card-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.stat-card-trend {
    font-size: 12px;
    font-weight: 500;
}

.stat-card-trend.trend-positive {
    color: #4ade80;
}

.stat-card-trend.trend-neutral {
    color: var(--text-secondary);
}

/* Stats Section */
.channel-stats-section {
    margin-top: 8px;
}

.channel-stats-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Top Posts List */
.top-posts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.top-post-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg-input);
    border-radius: var(--radius-md);
}

.top-post-rank {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-rose);
    background: rgba(244, 63, 94, 0.12);
    border-radius: 50%;
    flex-shrink: 0;
}

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

.top-post-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.top-post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.top-post-meta .icon-xs {
    width: 14px;
    height: 14px;
}

.top-post-date {
    color: var(--text-tertiary);
}

/* Mobile */
@media (max-width: 480px) {
    .channel-stats-panel {
        width: 100vw;
    }

    .channel-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .stat-card {
        padding: 12px;
    }

    .stat-card-value {
        font-size: 20px;
    }
}

/* =============================================================================
   AVATAR FRAMES — Decorative profile frame overlays
   ============================================================================= */

/* --- Frame wrapper (used in public profile and frame selector) --- */

.avatar-frame-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* --- Small avatar frame indicators (chat list, header, sidebar) --- */

.avatar-frame-indicator {
    position: relative;
    display: inline-flex;
}

/* Red — Fire Pulse: warm ember glow that intensifies */
.avatar-frame-indicator[data-frame="magic_red"]::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2.5px solid rgba(220,40,60,0.7);
    box-shadow:
        0 0 6px rgba(255,60,80,0.5),
        0 0 14px rgba(220,30,50,0.35),
        0 0 24px rgba(180,20,40,0.15);
    pointer-events: none;
    animation: frame-fire-pulse 2s ease-in-out infinite;
}

/* Blue — Wave Ripple: cool breathing with scale shift */
.avatar-frame-indicator[data-frame="magic_blue"]::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2.5px solid rgba(60,160,255,0.7);
    box-shadow:
        0 0 6px rgba(80,180,255,0.5),
        0 0 14px rgba(60,140,240,0.35),
        0 0 24px rgba(40,120,220,0.15);
    pointer-events: none;
    animation: frame-wave-ripple 3s ease-in-out infinite;
}

/* Gold — Sparkle Shimmer: rotating highlight with twinkle */
.avatar-frame-indicator[data-frame="magic_gold"]::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2.5px solid rgba(240,190,50,0.75);
    box-shadow:
        0 0 6px rgba(255,210,60,0.55),
        0 0 14px rgba(240,180,40,0.4),
        0 0 24px rgba(220,160,20,0.2);
    pointer-events: none;
    animation: frame-gold-shimmer 2.5s ease-in-out infinite;
}

/* Purple — Neon Pulse: electric glow with intensity spike */
.avatar-frame-indicator[data-frame="magic_purple"]::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2.5px solid rgba(160,60,255,0.7);
    box-shadow:
        0 0 6px rgba(180,80,255,0.5),
        0 0 14px rgba(150,50,240,0.35),
        0 0 24px rgba(130,30,220,0.15);
    pointer-events: none;
    animation: frame-neon-pulse 2s ease-in-out infinite;
}

/* === Small indicator keyframes === */

@keyframes frame-fire-pulse {
    0%, 100% {
        border-color: rgba(220,40,60,0.7);
        box-shadow: 0 0 6px rgba(255,60,80,0.5), 0 0 14px rgba(220,30,50,0.35), 0 0 24px rgba(180,20,40,0.15);
    }
    30% {
        border-color: rgba(255,80,40,0.85);
        box-shadow: 0 0 10px rgba(255,100,50,0.7), 0 0 22px rgba(255,60,30,0.5), 0 0 36px rgba(220,40,20,0.25);
    }
    60% {
        border-color: rgba(240,50,70,0.75);
        box-shadow: 0 0 8px rgba(255,70,60,0.6), 0 0 16px rgba(230,40,50,0.4), 0 0 28px rgba(200,30,40,0.2);
    }
}

@keyframes frame-wave-ripple {
    0%, 100% {
        transform: scale(1);
        border-color: rgba(60,160,255,0.7);
        box-shadow: 0 0 6px rgba(80,180,255,0.5), 0 0 14px rgba(60,140,240,0.35), 0 0 24px rgba(40,120,220,0.15);
    }
    50% {
        transform: scale(1.06);
        border-color: rgba(100,190,255,0.85);
        box-shadow: 0 0 10px rgba(120,200,255,0.65), 0 0 20px rgba(80,170,255,0.45), 0 0 32px rgba(60,140,240,0.2);
    }
}

@keyframes frame-gold-shimmer {
    0%, 100% {
        border-color: rgba(240,190,50,0.75);
        box-shadow: 0 0 6px rgba(255,210,60,0.55), 0 0 14px rgba(240,180,40,0.4), 0 0 24px rgba(220,160,20,0.2);
    }
    25% {
        border-color: rgba(255,220,80,0.9);
        box-shadow: 0 0 12px rgba(255,230,100,0.75), 0 0 24px rgba(255,200,60,0.5), 0 0 40px rgba(240,180,40,0.25);
    }
    50% {
        border-color: rgba(240,190,50,0.75);
        box-shadow: 0 0 6px rgba(255,210,60,0.55), 0 0 14px rgba(240,180,40,0.4), 0 0 24px rgba(220,160,20,0.2);
    }
    75% {
        border-color: rgba(255,210,60,0.85);
        box-shadow: 0 0 10px rgba(255,225,80,0.7), 0 0 20px rgba(255,200,50,0.45), 0 0 34px rgba(240,180,40,0.22);
    }
}

@keyframes frame-neon-pulse {
    0%, 100% {
        border-color: rgba(160,60,255,0.7);
        box-shadow: 0 0 6px rgba(180,80,255,0.5), 0 0 14px rgba(150,50,240,0.35), 0 0 24px rgba(130,30,220,0.15);
    }
    40% {
        border-color: rgba(190,100,255,0.9);
        box-shadow: 0 0 12px rgba(200,120,255,0.7), 0 0 24px rgba(170,80,255,0.5), 0 0 40px rgba(150,50,240,0.25);
    }
    70% {
        border-color: rgba(170,70,255,0.8);
        box-shadow: 0 0 8px rgba(190,90,255,0.6), 0 0 18px rgba(160,60,245,0.4), 0 0 30px rgba(140,40,230,0.2);
    }
}
/* ====================== PUBLIC PROFILE FRAMES ====================== */

/* Profile frame ring animations — more dramatic versions */
@keyframes magic-ring-fire {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 6px rgba(255,60,40,0.3));
    }
    30% {
        transform: scale(1.02) rotate(1deg);
        filter: drop-shadow(0 0 16px rgba(255,80,40,0.6));
    }
    60% {
        transform: scale(1.01) rotate(-0.5deg);
        filter: drop-shadow(0 0 10px rgba(240,50,50,0.45));
    }
}

@keyframes magic-ring-wave {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 6px rgba(60,160,255,0.3));
    }
    50% {
        transform: scale(1.04);
        filter: drop-shadow(0 0 18px rgba(80,180,255,0.55));
    }
}

@keyframes magic-ring-sparkle {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(255,210,60,0.3));
    }
    25% {
        filter: drop-shadow(0 0 18px rgba(255,230,100,0.6));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(240,190,40,0.35));
    }
    75% {
        filter: drop-shadow(0 0 14px rgba(255,220,80,0.5));
    }
}

@keyframes magic-ring-neon {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(160,60,255,0.3));
    }
    40% {
        filter: drop-shadow(0 0 20px rgba(190,100,255,0.6));
    }
    70% {
        filter: drop-shadow(0 0 10px rgba(170,70,255,0.4));
    }
}

/* --- Magic Red (Glowing Ruby Ring with Roses & Butterflies) --- */

.public-profile-avatar.avatar-frame-magic-red {
    overflow: visible;
}

.public-profile-avatar.avatar-frame-magic-red::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle,
        transparent 78%,
        rgba(255,40,60,0.18) 85%,
        rgba(220,20,40,0.10) 92%,
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
}

.public-profile-avatar.avatar-frame-magic-red::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none'%3E%3Cdefs%3E%3Cfilter id='rg'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3CradialGradient id='rr'%3E%3Cstop offset='0' stop-color='%23ff3050'/%3E%3Cstop offset='1' stop-color='%23aa0020'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='150' cy='150' r='142' stroke='rgba(255,40,60,0.55)' stroke-width='5' filter='url(%23rg)'/%3E%3Ccircle cx='150' cy='150' r='142' stroke='rgba(240,50,70,0.5)' stroke-width='3'/%3E%3Cg transform='rotate(0 150 150) translate(150 4) scale(0.7)'%3E%3Ccircle r='8' fill='url(%23rr)' opacity='0.9'/%3E%3Cpath d='M0 -6 Q4 -2 0 2 Q-4 -2 0 -6' fill='%23cc1030' opacity='0.8'/%3E%3Cpath d='M-5 -3 Q0 -8 5 -3 Q0 1 -5 -3' fill='%23dd2040' opacity='0.7'/%3E%3Cpath d='M-3 3 Q0 -3 3 3 Q0 6 -3 3' fill='%23bb0825' opacity='0.8'/%3E%3Ccircle r='3' fill='%23ff3050' opacity='0.6'/%3E%3Cpath d='M-10 4 Q-14 0 -12 -4 Q-10 -1 -8 2 Z' fill='rgba(30,80,20,0.6)'/%3E%3Cpath d='M10 4 Q14 0 12 -4 Q10 -1 8 2 Z' fill='rgba(30,80,20,0.6)'/%3E%3C/g%3E%3Cg transform='rotate(90 150 150) translate(150 4) scale(0.7)'%3E%3Ccircle r='8' fill='url(%23rr)' opacity='0.9'/%3E%3Cpath d='M0 -6 Q4 -2 0 2 Q-4 -2 0 -6' fill='%23cc1030' opacity='0.8'/%3E%3Cpath d='M-5 -3 Q0 -8 5 -3 Q0 1 -5 -3' fill='%23dd2040' opacity='0.7'/%3E%3Cpath d='M-3 3 Q0 -3 3 3 Q0 6 -3 3' fill='%23bb0825' opacity='0.8'/%3E%3Ccircle r='3' fill='%23ff3050' opacity='0.6'/%3E%3Cpath d='M-10 4 Q-14 0 -12 -4 Q-10 -1 -8 2 Z' fill='rgba(30,80,20,0.6)'/%3E%3Cpath d='M10 4 Q14 0 12 -4 Q10 -1 8 2 Z' fill='rgba(30,80,20,0.6)'/%3E%3C/g%3E%3Cg transform='rotate(180 150 150) translate(150 4) scale(0.7)'%3E%3Ccircle r='8' fill='url(%23rr)' opacity='0.9'/%3E%3Cpath d='M0 -6 Q4 -2 0 2 Q-4 -2 0 -6' fill='%23cc1030' opacity='0.8'/%3E%3Cpath d='M-5 -3 Q0 -8 5 -3 Q0 1 -5 -3' fill='%23dd2040' opacity='0.7'/%3E%3Cpath d='M-3 3 Q0 -3 3 3 Q0 6 -3 3' fill='%23bb0825' opacity='0.8'/%3E%3Ccircle r='3' fill='%23ff3050' opacity='0.6'/%3E%3Cpath d='M-10 4 Q-14 0 -12 -4 Q-10 -1 -8 2 Z' fill='rgba(30,80,20,0.6)'/%3E%3Cpath d='M10 4 Q14 0 12 -4 Q10 -1 8 2 Z' fill='rgba(30,80,20,0.6)'/%3E%3C/g%3E%3Cg transform='rotate(270 150 150) translate(150 4) scale(0.7)'%3E%3Ccircle r='8' fill='url(%23rr)' opacity='0.9'/%3E%3Cpath d='M0 -6 Q4 -2 0 2 Q-4 -2 0 -6' fill='%23cc1030' opacity='0.8'/%3E%3Cpath d='M-5 -3 Q0 -8 5 -3 Q0 1 -5 -3' fill='%23dd2040' opacity='0.7'/%3E%3Cpath d='M-3 3 Q0 -3 3 3 Q0 6 -3 3' fill='%23bb0825' opacity='0.8'/%3E%3Ccircle r='3' fill='%23ff3050' opacity='0.6'/%3E%3Cpath d='M-10 4 Q-14 0 -12 -4 Q-10 -1 -8 2 Z' fill='rgba(30,80,20,0.6)'/%3E%3Cpath d='M10 4 Q14 0 12 -4 Q10 -1 8 2 Z' fill='rgba(30,80,20,0.6)'/%3E%3C/g%3E%3Cg transform='rotate(45 150 150) translate(150 6) scale(0.5)' opacity='0.6'%3E%3Cpath d='M0 0 Q-8 -10 -12 -4 Q-8 -1 0 0' fill='rgba(220,40,70,0.7)' stroke='rgba(255,100,130,0.5)' stroke-width='0.5'/%3E%3Cpath d='M0 0 Q8 -10 12 -4 Q8 -1 0 0' fill='rgba(220,40,70,0.7)' stroke='rgba(255,100,130,0.5)' stroke-width='0.5'/%3E%3Cpath d='M0 0 Q-6 6 -8 2 Q-5 1 0 0' fill='rgba(200,30,60,0.6)'/%3E%3Cpath d='M0 0 Q6 6 8 2 Q5 1 0 0' fill='rgba(200,30,60,0.6)'/%3E%3Cline x1='0' y1='-2' x2='0' y2='5' stroke='rgba(150,20,40,0.8)' stroke-width='0.5'/%3E%3C/g%3E%3Cg transform='rotate(135 150 150) translate(150 6) scale(0.5)' opacity='0.6'%3E%3Cpath d='M0 0 Q-8 -10 -12 -4 Q-8 -1 0 0' fill='rgba(220,40,70,0.7)' stroke='rgba(255,100,130,0.5)' stroke-width='0.5'/%3E%3Cpath d='M0 0 Q8 -10 12 -4 Q8 -1 0 0' fill='rgba(220,40,70,0.7)' stroke='rgba(255,100,130,0.5)' stroke-width='0.5'/%3E%3Cpath d='M0 0 Q-6 6 -8 2 Q-5 1 0 0' fill='rgba(200,30,60,0.6)'/%3E%3Cpath d='M0 0 Q6 6 8 2 Q5 1 0 0' fill='rgba(200,30,60,0.6)'/%3E%3Cline x1='0' y1='-2' x2='0' y2='5' stroke='rgba(150,20,40,0.8)' stroke-width='0.5'/%3E%3C/g%3E%3Cg transform='rotate(225 150 150) translate(150 6) scale(0.5)' opacity='0.6'%3E%3Cpath d='M0 0 Q-8 -10 -12 -4 Q-8 -1 0 0' fill='rgba(220,40,70,0.7)' stroke='rgba(255,100,130,0.5)' stroke-width='0.5'/%3E%3Cpath d='M0 0 Q8 -10 12 -4 Q8 -1 0 0' fill='rgba(220,40,70,0.7)' stroke='rgba(255,100,130,0.5)' stroke-width='0.5'/%3E%3Cpath d='M0 0 Q-6 6 -8 2 Q-5 1 0 0' fill='rgba(200,30,60,0.6)'/%3E%3Cpath d='M0 0 Q6 6 8 2 Q5 1 0 0' fill='rgba(200,30,60,0.6)'/%3E%3Cline x1='0' y1='-2' x2='0' y2='5' stroke='rgba(150,20,40,0.8)' stroke-width='0.5'/%3E%3C/g%3E%3Cg transform='rotate(315 150 150) translate(150 6) scale(0.5)' opacity='0.6'%3E%3Cpath d='M0 0 Q-8 -10 -12 -4 Q-8 -1 0 0' fill='rgba(220,40,70,0.7)' stroke='rgba(255,100,130,0.5)' stroke-width='0.5'/%3E%3Cpath d='M0 0 Q8 -10 12 -4 Q8 -1 0 0' fill='rgba(220,40,70,0.7)' stroke='rgba(255,100,130,0.5)' stroke-width='0.5'/%3E%3Cpath d='M0 0 Q-6 6 -8 2 Q-5 1 0 0' fill='rgba(200,30,60,0.6)'/%3E%3Cpath d='M0 0 Q6 6 8 2 Q5 1 0 0' fill='rgba(200,30,60,0.6)'/%3E%3Cline x1='0' y1='-2' x2='0' y2='5' stroke='rgba(150,20,40,0.8)' stroke-width='0.5'/%3E%3C/g%3E%3Ccircle cx='288' cy='150' r='1.2' fill='rgba(255,180,180,0.5)'/%3E%3Ccircle cx='277' cy='201' r='0.8' fill='rgba(255,185,185,0.5)'/%3E%3Ccircle cx='249' cy='245' r='1.2' fill='rgba(255,190,190,0.5)'/%3E%3Ccircle cx='206' cy='276' r='0.8' fill='rgba(255,195,195,0.5)'/%3E%3Ccircle cx='154' cy='287' r='1.2' fill='rgba(255,200,200,0.5)'/%3E%3Ccircle cx='103' cy='279' r='0.8' fill='rgba(255,205,205,0.5)'/%3E%3Ccircle cx='58' cy='252' r='1.2' fill='rgba(255,210,210,0.5)'/%3E%3Ccircle cx='26' cy='210' r='0.8' fill='rgba(255,215,215,0.5)'/%3E%3Ccircle cx='13' cy='159' r='1.2' fill='rgba(255,220,220,0.5)'/%3E%3Ccircle cx='19' cy='108' r='0.8' fill='rgba(255,225,225,0.5)'/%3E%3Ccircle cx='45' cy='62' r='1.2' fill='rgba(255,230,230,0.5)'/%3E%3Ccircle cx='86' cy='29' r='0.8' fill='rgba(255,235,235,0.5)'/%3E%3Ccircle cx='136' cy='13' r='1.2' fill='rgba(255,240,240,0.5)'/%3E%3Ccircle cx='188' cy='18' r='0.8' fill='rgba(255,245,245,0.5)'/%3E%3Ccircle cx='234' cy='42' r='1.2' fill='rgba(255,250,250,0.5)'/%3E%3Ccircle cx='269' cy='81' r='0.8' fill='rgba(255,255,255,0.5)'/%3E%3Ccircle cx='286' cy='131' r='1.2' fill='rgba(255,260,260,0.5)'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    pointer-events: none;
}

.public-profile-avatar.avatar-frame-magic-red::after {
    animation: magic-ring-fire 2s ease-in-out infinite;
}

.public-profile-avatar.avatar-frame-magic-red > .avatar,
.public-profile-avatar.avatar-frame-magic-red > img {
    box-shadow: 0 0 18px rgba(255,60,80,0.35), 0 0 36px rgba(220,30,50,0.18), 0 8px 32px rgba(0,0,0,0.3);
    border: 3px solid rgba(220,50,70,0.5) !important;
    z-index: 2;
    position: relative;
}

/* --- Magic Blue (Frost Ring with Ice Crystals — Breathing) --- */

.public-profile-avatar.avatar-frame-magic-blue {
    overflow: visible;
}

.public-profile-avatar.avatar-frame-magic-blue::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle,
        transparent 78%,
        rgba(60,160,255,0.18) 85%,
        rgba(40,130,230,0.10) 92%,
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
}

.public-profile-avatar.avatar-frame-magic-blue::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none'%3E%3Cdefs%3E%3Cfilter id='bg'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3CradialGradient id='br'%3E%3Cstop offset='0' stop-color='%2380d0ff'/%3E%3Cstop offset='1' stop-color='%23205090'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='150' cy='150' r='142' stroke='rgba(60,160,255,0.6)' stroke-width='4' filter='url(%23bg)'/%3E%3Ccircle cx='150' cy='150' r='142' stroke='rgba(100,190,255,0.5)' stroke-width='2.5'/%3E%3Cg transform='rotate(0 150 150) translate(150 2) scale(0.7)'%3E%3Cpolygon points='0,-12 3,-4 12,-4 5,2 7,10 0,6 -7,10 -5,2 -12,-4 -3,-4' fill='url(%23br)' opacity='0.85'/%3E%3Cpolygon points='0,-7 2,-2 7,-2 3,1 4,6 0,3 -4,6 -3,1 -7,-2 -2,-2' fill='%23a0e0ff' opacity='0.5'/%3E%3C/g%3E%3Cg transform='rotate(60 150 150) translate(150 2) scale(0.7)'%3E%3Cpolygon points='0,-12 3,-4 12,-4 5,2 7,10 0,6 -7,10 -5,2 -12,-4 -3,-4' fill='url(%23br)' opacity='0.85'/%3E%3Cpolygon points='0,-7 2,-2 7,-2 3,1 4,6 0,3 -4,6 -3,1 -7,-2 -2,-2' fill='%23a0e0ff' opacity='0.5'/%3E%3C/g%3E%3Cg transform='rotate(120 150 150) translate(150 2) scale(0.7)'%3E%3Cpolygon points='0,-12 3,-4 12,-4 5,2 7,10 0,6 -7,10 -5,2 -12,-4 -3,-4' fill='url(%23br)' opacity='0.85'/%3E%3Cpolygon points='0,-7 2,-2 7,-2 3,1 4,6 0,3 -4,6 -3,1 -7,-2 -2,-2' fill='%23a0e0ff' opacity='0.5'/%3E%3C/g%3E%3Cg transform='rotate(180 150 150) translate(150 2) scale(0.7)'%3E%3Cpolygon points='0,-12 3,-4 12,-4 5,2 7,10 0,6 -7,10 -5,2 -12,-4 -3,-4' fill='url(%23br)' opacity='0.85'/%3E%3Cpolygon points='0,-7 2,-2 7,-2 3,1 4,6 0,3 -4,6 -3,1 -7,-2 -2,-2' fill='%23a0e0ff' opacity='0.5'/%3E%3C/g%3E%3Cg transform='rotate(240 150 150) translate(150 2) scale(0.7)'%3E%3Cpolygon points='0,-12 3,-4 12,-4 5,2 7,10 0,6 -7,10 -5,2 -12,-4 -3,-4' fill='url(%23br)' opacity='0.85'/%3E%3Cpolygon points='0,-7 2,-2 7,-2 3,1 4,6 0,3 -4,6 -3,1 -7,-2 -2,-2' fill='%23a0e0ff' opacity='0.5'/%3E%3C/g%3E%3Cg transform='rotate(300 150 150) translate(150 2) scale(0.7)'%3E%3Cpolygon points='0,-12 3,-4 12,-4 5,2 7,10 0,6 -7,10 -5,2 -12,-4 -3,-4' fill='url(%23br)' opacity='0.85'/%3E%3Cpolygon points='0,-7 2,-2 7,-2 3,1 4,6 0,3 -4,6 -3,1 -7,-2 -2,-2' fill='%23a0e0ff' opacity='0.5'/%3E%3C/g%3E%3Cg transform='rotate(30 150 150) translate(150 5) scale(0.4)' opacity='0.55'%3E%3Cpolygon points='0,-8 2,-2 8,-2 3,1 5,7 0,4 -5,7 -3,1 -8,-2 -2,-2' fill='rgba(120,200,255,0.8)'/%3E%3C/g%3E%3Cg transform='rotate(90 150 150) translate(150 5) scale(0.4)' opacity='0.55'%3E%3Cpolygon points='0,-8 2,-2 8,-2 3,1 5,7 0,4 -5,7 -3,1 -8,-2 -2,-2' fill='rgba(120,200,255,0.8)'/%3E%3C/g%3E%3Cg transform='rotate(150 150 150) translate(150 5) scale(0.4)' opacity='0.55'%3E%3Cpolygon points='0,-8 2,-2 8,-2 3,1 5,7 0,4 -5,7 -3,1 -8,-2 -2,-2' fill='rgba(120,200,255,0.8)'/%3E%3C/g%3E%3Cg transform='rotate(210 150 150) translate(150 5) scale(0.4)' opacity='0.55'%3E%3Cpolygon points='0,-8 2,-2 8,-2 3,1 5,7 0,4 -5,7 -3,1 -8,-2 -2,-2' fill='rgba(120,200,255,0.8)'/%3E%3C/g%3E%3Cg transform='rotate(270 150 150) translate(150 5) scale(0.4)' opacity='0.55'%3E%3Cpolygon points='0,-8 2,-2 8,-2 3,1 5,7 0,4 -5,7 -3,1 -8,-2 -2,-2' fill='rgba(120,200,255,0.8)'/%3E%3C/g%3E%3Cg transform='rotate(330 150 150) translate(150 5) scale(0.4)' opacity='0.55'%3E%3Cpolygon points='0,-8 2,-2 8,-2 3,1 5,7 0,4 -5,7 -3,1 -8,-2 -2,-2' fill='rgba(120,200,255,0.8)'/%3E%3C/g%3E%3Ccircle cx='288' cy='150' r='1.5' fill='rgba(180,220,255,0.6)'/%3E%3Ccircle cx='270' cy='200' r='1' fill='rgba(180,220,255,0.5)'/%3E%3Ccircle cx='240' cy='248' r='1.3' fill='rgba(180,220,255,0.55)'/%3E%3Ccircle cx='100' cy='275' r='1' fill='rgba(180,220,255,0.5)'/%3E%3Ccircle cx='50' cy='240' r='1.3' fill='rgba(180,220,255,0.55)'/%3E%3Ccircle cx='20' cy='180' r='1' fill='rgba(180,220,255,0.5)'/%3E%3Ccircle cx='15' cy='120' r='1.5' fill='rgba(180,220,255,0.6)'/%3E%3Ccircle cx='50' cy='60' r='1' fill='rgba(180,220,255,0.5)'/%3E%3Ccircle cx='100' cy='25' r='1.3' fill='rgba(180,220,255,0.55)'/%3E%3Ccircle cx='200' cy='25' r='1' fill='rgba(180,220,255,0.5)'/%3E%3Ccircle cx='250' cy='55' r='1.5' fill='rgba(180,220,255,0.6)'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    pointer-events: none;
    animation: magic-ring-wave 3s ease-in-out infinite;
}

.public-profile-avatar.avatar-frame-magic-blue > .avatar,
.public-profile-avatar.avatar-frame-magic-blue > img {
    box-shadow: 0 0 18px rgba(80,180,255,0.35), 0 0 36px rgba(60,140,240,0.18), 0 8px 32px rgba(0,0,0,0.3);
    border: 3px solid rgba(80,170,255,0.5) !important;
    z-index: 2;
    position: relative;
}

/* --- Magic Gold (Golden Ring with Stars — Sparkle) --- */

.public-profile-avatar.avatar-frame-magic-gold {
    overflow: visible;
}

.public-profile-avatar.avatar-frame-magic-gold::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle,
        transparent 78%,
        rgba(255,210,60,0.18) 85%,
        rgba(240,180,40,0.10) 92%,
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
}

.public-profile-avatar.avatar-frame-magic-gold::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none'%3E%3Cdefs%3E%3Cfilter id='gg'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3CradialGradient id='gr'%3E%3Cstop offset='0' stop-color='%23ffe060'/%3E%3Cstop offset='1' stop-color='%23c09010'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='150' cy='150' r='142' stroke='rgba(255,210,60,0.6)' stroke-width='5' filter='url(%23gg)'/%3E%3Ccircle cx='150' cy='150' r='142' stroke='rgba(255,220,80,0.5)' stroke-width='2.5'/%3E%3Cg transform='rotate(0 150 150) translate(150 2) scale(0.65)'%3E%3Cpolygon points='0,-14 4,-5 14,-5 6,2 8,12 0,6 -8,12 -6,2 -14,-5 -4,-5' fill='url(%23gr)' opacity='0.9'/%3E%3Cpolygon points='0,-8 2,-3 8,-3 4,1 5,7 0,4 -5,7 -4,1 -8,-3 -2,-3' fill='%23ffe880' opacity='0.5'/%3E%3C/g%3E%3Cg transform='rotate(45 150 150) translate(150 2) scale(0.65)'%3E%3Cpolygon points='0,-14 4,-5 14,-5 6,2 8,12 0,6 -8,12 -6,2 -14,-5 -4,-5' fill='url(%23gr)' opacity='0.9'/%3E%3Cpolygon points='0,-8 2,-3 8,-3 4,1 5,7 0,4 -5,7 -4,1 -8,-3 -2,-3' fill='%23ffe880' opacity='0.5'/%3E%3C/g%3E%3Cg transform='rotate(90 150 150) translate(150 2) scale(0.65)'%3E%3Cpolygon points='0,-14 4,-5 14,-5 6,2 8,12 0,6 -8,12 -6,2 -14,-5 -4,-5' fill='url(%23gr)' opacity='0.9'/%3E%3Cpolygon points='0,-8 2,-3 8,-3 4,1 5,7 0,4 -5,7 -4,1 -8,-3 -2,-3' fill='%23ffe880' opacity='0.5'/%3E%3C/g%3E%3Cg transform='rotate(135 150 150) translate(150 2) scale(0.65)'%3E%3Cpolygon points='0,-14 4,-5 14,-5 6,2 8,12 0,6 -8,12 -6,2 -14,-5 -4,-5' fill='url(%23gr)' opacity='0.9'/%3E%3Cpolygon points='0,-8 2,-3 8,-3 4,1 5,7 0,4 -5,7 -4,1 -8,-3 -2,-3' fill='%23ffe880' opacity='0.5'/%3E%3C/g%3E%3Cg transform='rotate(180 150 150) translate(150 2) scale(0.65)'%3E%3Cpolygon points='0,-14 4,-5 14,-5 6,2 8,12 0,6 -8,12 -6,2 -14,-5 -4,-5' fill='url(%23gr)' opacity='0.9'/%3E%3Cpolygon points='0,-8 2,-3 8,-3 4,1 5,7 0,4 -5,7 -4,1 -8,-3 -2,-3' fill='%23ffe880' opacity='0.5'/%3E%3C/g%3E%3Cg transform='rotate(225 150 150) translate(150 2) scale(0.65)'%3E%3Cpolygon points='0,-14 4,-5 14,-5 6,2 8,12 0,6 -8,12 -6,2 -14,-5 -4,-5' fill='url(%23gr)' opacity='0.9'/%3E%3Cpolygon points='0,-8 2,-3 8,-3 4,1 5,7 0,4 -5,7 -4,1 -8,-3 -2,-3' fill='%23ffe880' opacity='0.5'/%3E%3C/g%3E%3Cg transform='rotate(270 150 150) translate(150 2) scale(0.65)'%3E%3Cpolygon points='0,-14 4,-5 14,-5 6,2 8,12 0,6 -8,12 -6,2 -14,-5 -4,-5' fill='url(%23gr)' opacity='0.9'/%3E%3Cpolygon points='0,-8 2,-3 8,-3 4,1 5,7 0,4 -5,7 -4,1 -8,-3 -2,-3' fill='%23ffe880' opacity='0.5'/%3E%3C/g%3E%3Cg transform='rotate(315 150 150) translate(150 2) scale(0.65)'%3E%3Cpolygon points='0,-14 4,-5 14,-5 6,2 8,12 0,6 -8,12 -6,2 -14,-5 -4,-5' fill='url(%23gr)' opacity='0.9'/%3E%3Cpolygon points='0,-8 2,-3 8,-3 4,1 5,7 0,4 -5,7 -4,1 -8,-3 -2,-3' fill='%23ffe880' opacity='0.5'/%3E%3C/g%3E%3Ccircle cx='285' cy='140' r='1.5' fill='rgba(255,230,100,0.6)'/%3E%3Ccircle cx='270' cy='205' r='1' fill='rgba(255,230,100,0.5)'/%3E%3Ccircle cx='235' cy='255' r='1.3' fill='rgba(255,230,100,0.55)'/%3E%3Ccircle cx='105' cy='278' r='1' fill='rgba(255,230,100,0.5)'/%3E%3Ccircle cx='45' cy='245' r='1.5' fill='rgba(255,230,100,0.6)'/%3E%3Ccircle cx='18' cy='175' r='1' fill='rgba(255,230,100,0.5)'/%3E%3Ccircle cx='18' cy='115' r='1.3' fill='rgba(255,230,100,0.55)'/%3E%3Ccircle cx='55' cy='55' r='1' fill='rgba(255,230,100,0.5)'/%3E%3Ccircle cx='110' cy='22' r='1.5' fill='rgba(255,230,100,0.6)'/%3E%3Ccircle cx='195' cy='18' r='1' fill='rgba(255,230,100,0.5)'/%3E%3Ccircle cx='255' cy='50' r='1.3' fill='rgba(255,230,100,0.55)'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    pointer-events: none;
    animation: magic-ring-sparkle 2.5s ease-in-out infinite;
}

.public-profile-avatar.avatar-frame-magic-gold > .avatar,
.public-profile-avatar.avatar-frame-magic-gold > img {
    box-shadow: 0 0 18px rgba(255,210,60,0.35), 0 0 36px rgba(240,180,40,0.18), 0 8px 32px rgba(0,0,0,0.3);
    border: 3px solid rgba(240,200,60,0.5) !important;
    z-index: 2;
    position: relative;
}

/* --- Magic Purple (Dark Rune Ring — Pulse) --- */

.public-profile-avatar.avatar-frame-magic-purple {
    overflow: visible;
}

.public-profile-avatar.avatar-frame-magic-purple::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle,
        transparent 78%,
        rgba(160,60,255,0.18) 85%,
        rgba(140,40,230,0.10) 92%,
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
}

.public-profile-avatar.avatar-frame-magic-purple::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none'%3E%3Cdefs%3E%3Cfilter id='pg'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3CradialGradient id='pr'%3E%3Cstop offset='0' stop-color='%23d080ff'/%3E%3Cstop offset='1' stop-color='%23702098'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='150' cy='150' r='142' stroke='rgba(160,60,255,0.6)' stroke-width='5' filter='url(%23pg)'/%3E%3Ccircle cx='150' cy='150' r='142' stroke='rgba(180,80,255,0.5)' stroke-width='2.5'/%3E%3Cg transform='rotate(0 150 150) translate(150 2) scale(0.6)'%3E%3Ccircle r='10' fill='url(%23pr)' opacity='0.9'/%3E%3Ccircle r='6' fill='%23d090ff' opacity='0.45'/%3E%3Cpath d='M0,-8 L2.5,-2.5 L8,0 L2.5,2.5 L0,8 L-2.5,2.5 L-8,0 L-2.5,-2.5 Z' fill='rgba(210,160,255,0.7)'/%3E%3C/g%3E%3Cg transform='rotate(72 150 150) translate(150 2) scale(0.6)'%3E%3Ccircle r='10' fill='url(%23pr)' opacity='0.9'/%3E%3Ccircle r='6' fill='%23d090ff' opacity='0.45'/%3E%3Cpath d='M0,-8 L2.5,-2.5 L8,0 L2.5,2.5 L0,8 L-2.5,2.5 L-8,0 L-2.5,-2.5 Z' fill='rgba(210,160,255,0.7)'/%3E%3C/g%3E%3Cg transform='rotate(144 150 150) translate(150 2) scale(0.6)'%3E%3Ccircle r='10' fill='url(%23pr)' opacity='0.9'/%3E%3Ccircle r='6' fill='%23d090ff' opacity='0.45'/%3E%3Cpath d='M0,-8 L2.5,-2.5 L8,0 L2.5,2.5 L0,8 L-2.5,2.5 L-8,0 L-2.5,-2.5 Z' fill='rgba(210,160,255,0.7)'/%3E%3C/g%3E%3Cg transform='rotate(216 150 150) translate(150 2) scale(0.6)'%3E%3Ccircle r='10' fill='url(%23pr)' opacity='0.9'/%3E%3Ccircle r='6' fill='%23d090ff' opacity='0.45'/%3E%3Cpath d='M0,-8 L2.5,-2.5 L8,0 L2.5,2.5 L0,8 L-2.5,2.5 L-8,0 L-2.5,-2.5 Z' fill='rgba(210,160,255,0.7)'/%3E%3C/g%3E%3Cg transform='rotate(288 150 150) translate(150 2) scale(0.6)'%3E%3Ccircle r='10' fill='url(%23pr)' opacity='0.9'/%3E%3Ccircle r='6' fill='%23d090ff' opacity='0.45'/%3E%3Cpath d='M0,-8 L2.5,-2.5 L8,0 L2.5,2.5 L0,8 L-2.5,2.5 L-8,0 L-2.5,-2.5 Z' fill='rgba(210,160,255,0.7)'/%3E%3C/g%3E%3Cg transform='rotate(36 150 150) translate(150 5) scale(0.35)' opacity='0.6'%3E%3Cpath d='M0,-7 L2,-2 L7,0 L2,2 L0,7 L-2,2 L-7,0 L-2,-2 Z' fill='rgba(190,140,255,0.8)'/%3E%3C/g%3E%3Cg transform='rotate(108 150 150) translate(150 5) scale(0.35)' opacity='0.6'%3E%3Cpath d='M0,-7 L2,-2 L7,0 L2,2 L0,7 L-2,2 L-7,0 L-2,-2 Z' fill='rgba(190,140,255,0.8)'/%3E%3C/g%3E%3Cg transform='rotate(180 150 150) translate(150 5) scale(0.35)' opacity='0.6'%3E%3Cpath d='M0,-7 L2,-2 L7,0 L2,2 L0,7 L-2,2 L-7,0 L-2,-2 Z' fill='rgba(190,140,255,0.8)'/%3E%3C/g%3E%3Cg transform='rotate(252 150 150) translate(150 5) scale(0.35)' opacity='0.6'%3E%3Cpath d='M0,-7 L2,-2 L7,0 L2,2 L0,7 L-2,2 L-7,0 L-2,-2 Z' fill='rgba(190,140,255,0.8)'/%3E%3C/g%3E%3Cg transform='rotate(324 150 150) translate(150 5) scale(0.35)' opacity='0.6'%3E%3Cpath d='M0,-7 L2,-2 L7,0 L2,2 L0,7 L-2,2 L-7,0 L-2,-2 Z' fill='rgba(190,140,255,0.8)'/%3E%3C/g%3E%3Ccircle cx='285' cy='150' r='1.5' fill='rgba(210,170,255,0.6)'/%3E%3Ccircle cx='265' cy='210' r='1' fill='rgba(210,170,255,0.5)'/%3E%3Ccircle cx='230' cy='260' r='1.3' fill='rgba(210,170,255,0.55)'/%3E%3Ccircle cx='100' cy='280' r='1' fill='rgba(210,170,255,0.5)'/%3E%3Ccircle cx='40' cy='240' r='1.5' fill='rgba(210,170,255,0.6)'/%3E%3Ccircle cx='15' cy='170' r='1' fill='rgba(210,170,255,0.5)'/%3E%3Ccircle cx='20' cy='105' r='1.3' fill='rgba(210,170,255,0.55)'/%3E%3Ccircle cx='60' cy='50' r='1' fill='rgba(210,170,255,0.5)'/%3E%3Ccircle cx='120' cy='18' r='1.5' fill='rgba(210,170,255,0.6)'/%3E%3Ccircle cx='200' cy='15' r='1' fill='rgba(210,170,255,0.5)'/%3E%3Ccircle cx='260' cy='45' r='1.3' fill='rgba(210,170,255,0.55)'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    pointer-events: none;
    animation: magic-ring-neon 2s ease-in-out infinite;
}

.public-profile-avatar.avatar-frame-magic-purple > .avatar,
.public-profile-avatar.avatar-frame-magic-purple > img {
    box-shadow: 0 0 18px rgba(160,60,255,0.35), 0 0 36px rgba(140,40,230,0.18), 0 8px 32px rgba(0,0,0,0.3);
    border: 3px solid rgba(170,70,255,0.5) !important;
    z-index: 2;
    position: relative;
}

/* --- Frame Selector UI (in Profile page) --- */

.frame-selector {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.frame-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: border-color 0.2s, background 0.2s;
    background: transparent;
    min-width: 80px;
}

.frame-option:hover {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}

.frame-option.frame-active {
    border-color: var(--color-rose);
    background: rgba(232,180,188,0.06);
}

.frame-option-preview {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.frame-option-preview .avatar {
    width: 48px !important;
    height: 48px !important;
    font-size: 18px !important;
}

.frame-option-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
}

/* Frame preview mini versions */
.frame-option-preview.frame-preview-magic-red::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2.5px solid rgba(220,40,60,0.7);
    box-shadow: 0 0 8px rgba(255,60,80,0.45), 0 0 18px rgba(220,30,50,0.2);
    pointer-events: none;
    animation: frame-fire-pulse 2s ease-in-out infinite;
}

.frame-option-preview.frame-preview-magic-blue::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2.5px solid rgba(60,160,255,0.7);
    box-shadow: 0 0 8px rgba(80,180,255,0.45), 0 0 18px rgba(60,140,240,0.2);
    pointer-events: none;
    animation: frame-wave-ripple 3s ease-in-out infinite;
}

.frame-option-preview.frame-preview-magic-gold::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2.5px solid rgba(240,190,50,0.75);
    box-shadow: 0 0 8px rgba(255,210,60,0.5), 0 0 18px rgba(240,180,40,0.22);
    pointer-events: none;
    animation: frame-gold-shimmer 2.5s ease-in-out infinite;
}

.frame-option-preview.frame-preview-magic-purple::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2.5px solid rgba(160,60,255,0.7);
    box-shadow: 0 0 8px rgba(180,80,255,0.45), 0 0 18px rgba(150,50,240,0.2);
    pointer-events: none;
    animation: frame-neon-pulse 2s ease-in-out infinite;
}


/* --- Responsive adjustments for profile avatar frames --- */

@media (max-width: 768px) {
    .public-profile-avatar.avatar-frame-magic-red::before,
    .public-profile-avatar.avatar-frame-magic-red::after {
        inset: -8px;
    }
    .public-profile-avatar.avatar-frame-magic-blue::before,
    .public-profile-avatar.avatar-frame-magic-blue::after {
        inset: -8px;
    }
    .public-profile-avatar.avatar-frame-magic-gold::before,
    .public-profile-avatar.avatar-frame-magic-gold::after {
        inset: -8px;
    }
    .public-profile-avatar.avatar-frame-magic-purple::before,
    .public-profile-avatar.avatar-frame-magic-purple::after {
        inset: -8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ChannelCard — Reusable channel card component
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Compact mode (horizontal row — for lists, onboarding, search) */
.channel-card-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    transition: background 0.15s ease;
    cursor: pointer;
}
.channel-card-item:hover {
    background: rgba(255,255,255,0.07);
}
.channel-card-item:active {
    background: rgba(255,255,255,0.09);
}

.channel-card-avatar {
    flex-shrink: 0;
}

.channel-card-body {
    flex: 1;
    min-width: 0;
}

.channel-card-title-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.channel-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.channel-card-verified {
    flex-shrink: 0;
    color: var(--color-primary, #8B2EA8);
}

.channel-card-desc {
    font-size: 13px;
    color: var(--color-text-secondary, rgba(255,255,255,0.5));
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.channel-card-compact .channel-card-desc {
    -webkit-line-clamp: 1;
}

.channel-card-alias {
    opacity: 0.7;
}

.channel-card-footer {
    margin-top: 2px;
}

.channel-card-members {
    font-size: 12px;
    color: var(--color-text-tertiary, rgba(255,255,255,0.35));
}

.channel-card-join-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px 16px;
    flex-shrink: 0;
    text-decoration: none;
    white-space: nowrap;
}

.channel-card-join-btn.btn-primary {
    background: var(--color-primary, #8B2EA8);
    color: #fff;
}
.channel-card-join-btn.btn-primary:hover {
    filter: brightness(1.1);
}

.channel-card-join-btn.btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--color-text-secondary, rgba(255,255,255,0.5));
}

.channel-card-join-btn.btn-sm {
    font-size: 13px;
    padding: 8px 16px;
}

/* Full card mode (vertical — for grids, explore) */
.channel-card-item:not(.channel-card-compact) {
    /* Same as compact by default, can be overridden by grid containers */
}

/* Grid container for full card mode */
.channel-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
}
.channel-cards-grid .channel-card-item {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 20px 16px;
}
.channel-cards-grid .channel-card-avatar {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}
.channel-cards-grid .channel-card-title-row {
    justify-content: center;
}
.channel-cards-grid .channel-card-desc {
    text-align: center;
}
.channel-cards-grid .channel-card-footer {
    text-align: center;
    margin-bottom: 8px;
}
.channel-cards-grid .channel-card-join-btn {
    width: 100%;
}

/* =============================================================================
   EXPLORE PAGE
   ============================================================================= */

.explore-page {
    padding: 0 var(--page-padding) 24px;
    max-width: 720px;
    margin: 0 auto;
}

.explore-header {
    padding: 16px 16px 0;
}

.explore-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0 0 12px;
}

/* Search */
.explore-search {
    padding: 0 16px 16px;
    position: sticky;
    top: 56px;
    z-index: 10;
    background: var(--bg-primary, #0a0a0a);
}

.explore-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.explore-search-icon {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--text-tertiary, #666);
    pointer-events: none;
}

.explore-search-input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #222);
    background: var(--bg-secondary, #141414);
    color: var(--text-primary, #fff);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}

.explore-search-input:focus {
    border-color: var(--color-primary, #8B2EA8);
}

.explore-search-input::placeholder {
    color: var(--text-tertiary, #666);
}

/* Sections */
.explore-section {
    margin-bottom: 24px;
}

.explore-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 8px;
}

.explore-section-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0;
}

/* Horizontal scroll container */
.explore-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 16px 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.explore-scroll::-webkit-scrollbar {
    display: none;
}

.explore-scroll .channel-card-item {
    min-width: 260px;
    max-width: 300px;
    flex-shrink: 0;
    scroll-snap-align: start;
    background: var(--bg-secondary, #141414);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--border-color, #222);
    cursor: pointer;
    transition: border-color 0.15s;
}

.explore-scroll .channel-card-item:hover {
    border-color: var(--color-primary, #8B2EA8);
}

/* All channels list */
.explore-all-list {
    padding: 0 16px;
}

.explore-all-title {
    margin: 8px 0 12px;
}

.explore-all-list .channel-card-item {
    background: var(--bg-secondary, #141414);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color, #222);
    cursor: pointer;
    transition: border-color 0.15s;
}

.explore-all-list .channel-card-item:hover {
    border-color: var(--color-primary, #8B2EA8);
}

/* Loading sentinel for infinite scroll */
.explore-load-sentinel {
    text-align: center;
    padding: 16px;
    color: var(--text-tertiary, #666);
    font-size: 14px;
    min-height: 1px;
}

/* Loading state */
.explore-loading {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-tertiary, #666);
    font-size: 15px;
}

/* Empty state */
.explore-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
}

.explore-empty-svg {
    width: 56px;
    height: 56px;
    color: var(--color-primary, #8B2EA8);
    opacity: 0.6;
}

.explore-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 16px 0 8px;
}

.explore-empty-hint {
    font-size: 14px;
    color: var(--text-secondary, #aaa);
    margin: 0 0 20px;
}

.explore-empty-btn {
    padding: 10px 28px;
    border-radius: 10px;
    font-size: 15px;
}

/* Search results */
.explore-search-results {
    padding: 0 16px;
}

.explore-search-results .channel-card-item {
    background: var(--bg-secondary, #141414);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color, #222);
    cursor: pointer;
    transition: border-color 0.15s;
}

.explore-search-results .channel-card-item:hover {
    border-color: var(--color-primary, #8B2EA8);
}

.explore-no-results {
    text-align: center;
    padding: 40px 16px;
}

.explore-no-results-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary, #aaa);
    margin: 0 0 6px;
}

.explore-no-results-hint {
    font-size: 14px;
    color: var(--text-tertiary, #666);
    margin: 0;
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .explore-scroll .channel-card-item {
        min-width: 220px;
    }
}

/* ===========================================
   CALLS — Overlay, Incoming, Mini-bar, Toast
   =========================================== */

/* --- Animations --- */
@keyframes callFadeIn {
    from { opacity: 0; transform: scale(1.02); }
    to { opacity: 1; transform: scale(1); }
}

/* Subtle ring expand for ringing/dialing */
@keyframes callPulseRing {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Dramatic multi-ring pulse for active call */
@keyframes callActivePulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(139, 46, 168, 0.5),
                    0 0 0 0 rgba(139, 46, 168, 0.3),
                    0 0 0 0 rgba(139, 46, 168, 0.15),
                    0 0 20px 5px rgba(139, 46, 168, 0.12);
    }
    100% {
        box-shadow: 0 0 0 16px rgba(139, 46, 168, 0),
                    0 0 0 32px rgba(139, 46, 168, 0),
                    0 0 0 48px rgba(139, 46, 168, 0),
                    0 0 0 0 rgba(139, 46, 168, 0);
    }
}

@keyframes callActivePulseRing {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        opacity: 0.25;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes callDots {
    0%, 20% { opacity: 0.2; }
    50% { opacity: 1; }
    80%, 100% { opacity: 0.2; }
}

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

@keyframes incomingGlow {
    0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(0, 204, 102, 0.4); }
    50% { box-shadow: var(--shadow-lg), 0 0 20px 4px rgba(0, 204, 102, 0.15); }
}

@keyframes miniBarPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

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

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

@keyframes speakerGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 204, 102, 0.5); }
    50% { box-shadow: 0 0 12px 3px rgba(0, 204, 102, 0.3); }
}

/* --- Call Overlay (full-screen active call) --- */
.call-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(160deg, #0a0a12 0%, #12061f 50%, #0a0a12 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: callFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.call-overlay__peer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.call-overlay__avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(139, 46, 168, 0.5);
    transition: border-color 0.3s;
}

.call-overlay__avatar-placeholder {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-purple) 0%, #8b2ea8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 600;
    color: #fff;
}

/* Subtle rings during ringing/dialing */
.call-overlay__avatar-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-overlay__avatar-ring::before,
.call-overlay__avatar-ring::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(139, 46, 168, 0.45);
    animation: callPulseRing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.call-overlay__avatar-ring::after {
    animation-delay: 0.8s;
}

/* Dramatic pulse during active call — собеседник на связи */
.call-overlay__avatar-active {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    animation: callActivePulseGlow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.call-overlay__avatar-active::before,
.call-overlay__avatar-active::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 3px solid rgba(139, 46, 168, 0.5);
    animation: callActivePulseRing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.call-overlay__avatar-active::after {
    inset: -6px;
    border-width: 2px;
    border-color: rgba(139, 46, 168, 0.35);
    animation-delay: 0.7s;
}

.call-overlay__name {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    font-family: var(--font-heading);
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

.call-overlay__status {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    display: flex;
    align-items: center;
    gap: 2px;
}

.call-overlay__status-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    animation: callDots 1.4s infinite;
}
.call-overlay__status-dot:nth-child(2) { animation-delay: 0.2s; }
.call-overlay__status-dot:nth-child(3) { animation-delay: 0.4s; }

.call-overlay__timer {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* Video areas */
.call-overlay__remote-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #000;
}

.call-overlay__remote-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Active speaker border on remote video */
.call-overlay__remote-video.speaking {
    outline: 3px solid var(--color-success);
    outline-offset: -3px;
    animation: speakerGlow 1.5s ease-in-out infinite;
}

.call-overlay__local-video {
    position: absolute;
    bottom: 120px;
    right: 16px;
    width: 120px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    z-index: 2;
    border: 2px solid rgba(255,255,255,0.2);
    background: #000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: border-color 0.3s;
}

/* Active speaker border on local video */
.call-overlay__local-video.speaking {
    border-color: var(--color-success);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 8px rgba(0, 204, 102, 0.3);
}

.call-overlay__local-video video,
.call-overlay__remote-video.flipped video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

.call-overlay__remote-video video,
.call-overlay__local-video.flipped video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(1);
}

/* Minimize button — top-left corner */
.call-overlay__minimize-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    transition: all 0.2s;
}

.call-overlay__minimize-btn:hover {
    background: rgba(255,255,255,0.22);
}

.call-overlay__minimize-btn svg {
    width: 20px;
    height: 20px;
}

/* Controls bar */
.call-overlay__controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 20px 16px 44px;
    background: linear-gradient(transparent 0%, rgba(0,0,0,0.6) 100%);
}

.call-control-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    position: relative;
}

.call-control-btn:hover {
    background: rgba(255,255,255,0.22);
    transform: scale(1.05);
}

.call-control-btn:active {
    transform: scale(0.95);
}

/* Active state (feature ON — e.g. camera on) */
.call-control-btn.on {
    background: rgba(255,255,255,0.25);
}

/* Off state (feature disabled — e.g. muted, speaker off) */
.call-control-btn.off {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
}

/* Label under button */
.call-control-label {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.01em;
}

.call-control-btn--end {
    background: var(--color-error);
    width: 60px;
    height: 60px;
}

.call-control-btn--end:hover {
    background: var(--color-error-hover);
    transform: scale(1.05);
}

.call-control-btn--end:active {
    transform: scale(0.95);
}

.call-control-btn--end .call-control-label {
    color: rgba(255,255,255,0.85);
}

.call-control-btn svg {
    width: 24px;
    height: 24px;
}

/* Compact top bar when remote video is showing */
.call-overlay__top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 12px 60px;
    background: linear-gradient(rgba(0,0,0,0.6) 0%, transparent 100%);
}

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

.call-overlay__top-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-purple) 0%, #8b2ea8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.call-overlay__top-name {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.call-overlay__top-timer {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Content above video (audio call / no remote video) */
.call-overlay__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* --- Incoming Call popup --- */
.incoming-call {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 300px;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
    animation: incomingSlideDown 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), incomingGlow 2s ease-in-out 0.5s infinite;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.incoming-call__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.incoming-call__avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-purple) 0%, #8b2ea8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.incoming-call__info {
    flex: 1;
    min-width: 0;
}

.incoming-call__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.incoming-call__type {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.incoming-call__type svg {
    width: 14px;
    height: 14px;
}

.incoming-call__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.incoming-call__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.incoming-call__btn:active {
    transform: scale(0.9);
}

.incoming-call__btn svg {
    width: 20px;
    height: 20px;
}

.incoming-call__btn--accept {
    background: var(--color-success);
    color: #fff;
}

.incoming-call__btn--accept:hover {
    background: #00b359;
    transform: scale(1.1);
}

.incoming-call__btn--reject {
    background: var(--color-error);
    color: #fff;
}

.incoming-call__btn--reject:hover {
    background: var(--color-error-hover);
    transform: scale(1.1);
}

/* --- Mini-bar «В звонке» --- */
.call-mini-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    height: 36px;
    background: var(--color-success);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s, opacity 0.3s;
    user-select: none;
}

.call-mini-bar:hover {
    background: #00b359;
}

.call-mini-bar__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: miniBarPulse 1.5s ease-in-out infinite;
}

.call-mini-bar__timer {
    font-variant-numeric: tabular-nums;
}

/* When mini-bar is visible, push down the fixed layout to avoid overlap */
body.has-call-minibar .app-header {
    top: calc(36px + var(--sat));
}

body.has-call-minibar .chat-view {
    top: calc(36px + var(--header-height));
    height: calc(100vh - 36px - var(--header-height));
    height: calc(100dvh - 36px - var(--header-height));
}

@media (max-width: 767px) {
    body.has-call-minibar .chat-view {
        top: calc(36px + var(--sat));
        height: calc(100vh - 36px - var(--sat));
        height: calc(100dvh - 36px - var(--sat));
    }
}

body.has-call-minibar .main-content {
    margin-top: calc(36px + var(--header-height));
}

.call-overlay__local-video {
    position: absolute;
    bottom: 120px;
    right: 16px;
    width: 120px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    z-index: 2;
    border: 2px solid rgba(255,255,255,0.2);
    background: #000;
}

/* --- PiP Minimal Flip Swap --- */
.call-overlay.is-flipped .call-overlay__remote-video {
    position: absolute;
    bottom: 120px;
    right: 16px;
    top: auto;
    left: auto;
    width: 120px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    z-index: 2;
    border: 2px solid rgba(255,255,255,0.2);
    background: #000;
}
.call-overlay.is-flipped .call-overlay__local-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 0;
    border: none;
    bottom: auto;
    right: auto;
}
.call-overlay__remote-video, .call-overlay__local-video {
    cursor: pointer;
}

@media (max-width: 767px) {
    body.has-call-minibar .main-content {
        margin-top: calc(36px + var(--sat));
    }
}

/* --- Audio mini-player bar --- */
.audio-mini-bar {
    position: fixed;
    top: var(--sat);
    left: 0;
    right: 0;
    z-index: 9997;
    height: 42px;
    background: #211b1c;
    border-bottom: 1px solid #3a2e30;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    user-select: none;
    animation: callFadeIn 0.2s ease;
    overflow: hidden;
}

/* Desktop: start after sidebar, same as .app-header */
@media (min-width: 1024px) {
    .audio-mini-bar {
        left: 280px;
        width: calc(100% - 280px);
    }
}

/* Stack below call mini-bar when both visible */
body.has-call-minibar .audio-mini-bar {
    top: calc(36px + var(--sat));
}

.audio-mini-bar__left {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.audio-mini-bar__right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.audio-mini-bar__btn {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: #a0a0a0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.audio-mini-bar__btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.audio-mini-bar__btn svg {
    width: 14px;
    height: 14px;
}

.audio-mini-bar__play {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-rose);
    border: none;
    color: var(--bg-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
    padding: 0;
}

.audio-mini-bar__play:hover {
    background: var(--color-rose-dark);
}

.audio-mini-bar__play svg {
    width: 14px;
    height: 14px;
}

.audio-mini-bar__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: #e8b4bc;
}

.audio-mini-bar__time {
    font-variant-numeric: tabular-nums;
    color: #a0a0a0;
    font-size: 12px;
    flex-shrink: 0;
}

.audio-mini-bar__speed {
    min-width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: #a0a0a0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 4px;
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 0 2px;
    transition: background 0.15s, color 0.15s;
}

.audio-mini-bar__speed:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.audio-mini-bar__close {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: #a0a0a0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.audio-mini-bar__close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.audio-mini-bar__close svg {
    width: 14px;
    height: 14px;
}

.audio-mini-bar__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--color-rose);
    transition: width 0.2s linear;
    pointer-events: none;
}

/* Audio mini-bar layout push (42px bar height) */
body.has-audio-minibar .app-header {
    top: calc(42px + var(--sat));
}

body.has-audio-minibar .chat-view {
    top: calc(42px + var(--header-height));
    height: calc(100vh - 42px - var(--header-height));
    height: calc(100dvh - 42px - var(--header-height));
}

body.has-audio-minibar .main-content {
    margin-top: calc(42px + var(--header-height));
}

@media (max-width: 767px) {
    body.has-audio-minibar .chat-view {
        top: calc(42px + var(--sat));
        height: calc(100vh - 42px - var(--sat));
        height: calc(100dvh - 42px - var(--sat));
    }
}

/* Both call (36px) + audio (42px) mini-bars visible */
body.has-call-minibar.has-audio-minibar .app-header {
    top: calc(78px + var(--sat));
}

body.has-call-minibar.has-audio-minibar .chat-view {
    top: calc(78px + var(--header-height));
    height: calc(100vh - 78px - var(--header-height));
    height: calc(100dvh - 78px - var(--header-height));
}

body.has-call-minibar.has-audio-minibar .main-content {
    margin-top: calc(78px + var(--header-height));
}

@media (max-width: 767px) {
    body.has-call-minibar.has-audio-minibar .chat-view {
        top: calc(78px + var(--sat));
        height: calc(100vh - 78px - var(--sat));
        height: calc(100dvh - 78px - var(--sat));
    }
}

/* --- Call ended toast --- */
.call-ended-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    font-size: 14px;
    animation: callToastIn 0.3s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.call-ended-toast.hiding {
    animation: callToastOut 0.3s ease forwards;
}

.call-ended-toast__icon {
    color: var(--text-secondary);
    display: flex;
}

.call-ended-toast__icon svg {
    width: 18px;
    height: 18px;
}

.call-ended-toast__text {
    color: var(--text-secondary);
}

.call-ended-toast__duration {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* --- Mobile adjustments --- */
@media (max-width: 480px) {
    .incoming-call {
        left: 8px;
        right: 8px;
        transform: none;
        min-width: auto;
        max-width: none;
        animation: incomingSlideDownMobile 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), incomingGlow 2s ease-in-out 0.5s infinite;
    }

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

    .call-overlay__avatar,
    .call-overlay__avatar-placeholder {
        width: 96px;
        height: 96px;
    }
    .call-overlay__avatar-placeholder { font-size: 34px; }

    .call-overlay__local-video {
        width: 90px;
        height: 120px;
        bottom: 110px;
        right: 12px;
    }

    .call-overlay.is-flipped .call-overlay__remote-video {
        width: 90px;
        height: 120px;
        bottom: 110px;
        right: 12px;
        top: auto;
        left: auto;
    }

    .call-overlay__controls {
        gap: 18px;
        padding: 16px 12px 36px;
    }

    .call-control-btn {
        width: 54px;
        height: 54px;
    }

    .call-control-btn--end {
        width: 54px;
        height: 54px;
    }

    .call-control-label {
        font-size: 10px;
        bottom: -20px;
    }

    .call-ended-toast {
        left: 16px;
        right: 16px;
        transform: none;
        bottom: 70px;
    }

    .call-ended-toast.hiding {
        animation: none;
        opacity: 0;
        transition: opacity 0.3s;
    }
}

/* ========================================================================== */
/* WALLET MODAL                                                               */
/* ========================================================================== */

.wallet-modal { width: 100%; max-width: 460px; }

.modal-content:has(.wallet-modal) {
    position: relative;
    overflow: visible;
}

.wallet-corner-btn {
    position: absolute;
    top: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-muted);
    z-index: 2;
    transition: all 0.15s;
    font-size: 14px;
    font-weight: 600;
}
.wallet-corner-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.1); }

.wallet-address-btn { left: 16px; }
.wallet-transfer-btn { left: 52px; }
.wallet-transfer-btn .icon-sm { width: 16px; height: 16px; }
.wallet-close { right: 16px; }

.wallet-balance-section {
    text-align: center;
    padding: 12px 0 20px;
}

.wallet-balance-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.wallet-balance-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.wallet-balance-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.wallet-balance-number {
    font-size: 42px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -1px;
    flex-shrink: 0;
}

.wallet-tabs {
    display: flex;
    gap: 0;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 3px;
    margin-bottom: 12px;
}

.wallet-tab {
    flex: 1;
    padding: 7px 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-radius: calc(var(--radius-sm) - 3px);
    cursor: pointer;
    transition: all 0.15s;
}

.wallet-tab-active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.wallet-tab-hidden { display: none !important; }

.wallet-amount-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-bottom: 10px;
}

.wallet-amount-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.wallet-amount-label {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1;
}

.wallet-amount-input {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 700;
    outline: none;
    width: 100%;
}

.wallet-amount-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.wallet-methods {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wallet-method {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-primary);
    width: 100%;
    text-align: left;
}

.wallet-method:hover:not(:disabled) {
    border-color: var(--color-rose);
    background: var(--bg-hover);
}
.wallet-method:active:not(:disabled) { transform: scale(0.98); }
.wallet-method-disabled { opacity: 0.4; cursor: not-allowed; }

.wallet-method-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.wallet-method-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.wallet-method-name { font-size: 13px; font-weight: 500; }
.wallet-method-sub { font-size: 11px; color: var(--text-muted); }
.wallet-method-rate { font-size: 13px; color: var(--text-secondary); flex-shrink: 0; }

.wallet-dest-group {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}

.wallet-dest-input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
}
.wallet-dest-input:focus { border-color: var(--color-rose); }

.wallet-btn-submit {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: var(--gradient-primary);
    color: #fff;
    flex-shrink: 0;
}
.wallet-btn-submit:hover { opacity: 0.9; }

.wallet-tab-content {
    height: 270px;
    overflow-y: auto;
}

.wallet-history-list {
    height: 100%;
}

.wallet-status {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    text-align: center;
}

.wallet-status-info { background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); }
.wallet-status-success { background: rgba(0, 209, 102, 0.1); color: var(--color-success); }
.wallet-status-error { background: rgba(255, 75, 75, 0.1); color: var(--color-error); }

/* Success popup */
.success-popup {
    text-align: center;
    padding: 6px 24px 6px;
}

.success-popup-check {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 209, 102, 0.15);
    border: 6px solid rgba(0, 209, 102, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.success-popup-check svg { fill: #00D166; }

.success-popup-amount {
    font-size: 36px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -1px;
}

.success-popup-text {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
}

.success-popup-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ====================================
   VIDEO NOTE RECORDER
   ==================================== */

.vnr-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vnr-close-btn {
    position: absolute;
    top: max(16px, env(safe-area-inset-top, 16px));
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s;
}

.vnr-close-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.vnr-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.vnr-camera-circle {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.vnr-camera-circle video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vnr-camera-circle video.mirror {
    transform: scaleX(-1);
}

.vnr-ring {
    position: absolute;
    inset: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    pointer-events: none;
    transform: rotate(-90deg);
}

.vnr-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 3;
}

.vnr-ring-progress {
    fill: none;
    stroke: var(--color-purple);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

.vnr-timer {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 2px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.vnr-timer-warning {
    color: #ff4444;
}

.vnr-controls {
    display: flex;
    align-items: center;
    gap: 36px;
}

.vnr-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}

.vnr-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.vnr-record-btn {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: transparent;
    border: 4px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}

.vnr-record-btn:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.vnr-record-inner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #E53935;
    transition: border-radius 0.2s, width 0.2s, height 0.2s;
}

.vnr-record-btn.recording .vnr-record-inner {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
}

/* Preview after recording */
.vnr-preview-circle {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-purple);
}

.vnr-preview-result {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vnr-preview-result.mirror {
    transform: scaleX(-1);
}

.vnr-preview-duration {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: -12px;
    font-variant-numeric: tabular-nums;
}

.vnr-preview-controls {
    display: flex;
    align-items: center;
    gap: 24px;
}

.vnr-btn-cancel {
    width: auto;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 14px;
}

.vnr-btn-send {
    width: 56px;
    height: 56px;
    background: var(--color-purple);
}

.vnr-btn-send:hover {
    background: var(--color-purple-hover, #9b3cbe);
}

/* ====================================
   VIDEO NOTE BUBBLE (in chat)
   ==================================== */

/* Age gate avatar blur + badge */
.age-gate-avatar-wrap {
    cursor: pointer;
    margin-bottom: 12px;
}

.age-gate-avatar-blur {
    filter: blur(14px) brightness(0.6);
    transition: filter 0.4s ease;
}

.age-gate-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--gradient-primary, linear-gradient(135deg, #D69BA7 0%, #8B2EA8 100%));
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 5px 12px;
    border-radius: var(--radius-sm, 8px);
    pointer-events: none;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.message-video-note {
    margin-top: 6px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.video-note-bubble {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: var(--bg-card);
    flex-shrink: 0;
    -webkit-touch-callout: none;
}

.video-note-bubble video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    -webkit-touch-callout: none;
    pointer-events: none;
}

.video-note-touch-shield {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.video-note-bubble video.mirror {
    transform: scaleX(-1);
}

.video-note-ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: rotate(-90deg);
}

.video-note-ring circle {
    fill: none;
    stroke: var(--color-purple);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
}

.video-note-duration {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.video-note-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    pointer-events: none;
    transition: opacity 0.2s;
}

.video-note-bubble.playing .video-note-play-icon {
    opacity: 0;
}

.video-note-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.video-note-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.message-video-note.message-own .video-note-meta {
    justify-content: flex-end;
}

.video-note-processing {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 50%;
}

.video-note-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-purple);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@media (max-width: 380px) {
    .video-note-bubble {
        width: 180px;
        height: 180px;
    }
    .vnr-camera-circle {
        width: 240px;
        height: 240px;
    }
}

/* =============================================================================
   TROPHIES
   ============================================================================= */

/* Rarity color variables */
:root {
    --rarity-common: #22c55e;
    --rarity-rare: #3b82f6;
    --rarity-epic: #a855f7;
    --rarity-legendary: #fbbf24;
}

/* Featured trophy pill on profile */
.trophy-pill-row {
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
}
.trophy-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
    border: 1.5px solid var(--trophy-color);
    background: rgba(128, 128, 128, 0.08);
    background: color-mix(in srgb, var(--trophy-color) 12%, transparent);
    color: var(--text-primary);
    margin-bottom: 8px;
}
.trophy-pill:hover {
    opacity: 0.85;
}
.trophy-pill .trophy-pill-emoji {
    font-size: 16px;
    line-height: 1;
}
.trophy-pill .trophy-pill-title {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rarity colors — universal selector, applies to all trophy elements */
[data-rarity="common"]    { --trophy-color: var(--rarity-common); }
[data-rarity="rare"]      { --trophy-color: var(--rarity-rare); }
[data-rarity="epic"]      { --trophy-color: var(--rarity-epic); }
[data-rarity="legendary"] { --trophy-color: var(--rarity-legendary); }

/* Trophies counter in profile stats row (clickable) */
.profile-stat.trophies-count-link {
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
}
.profile-stat.trophies-count-link:hover {
    background: var(--bg-hover);
}

/* Trophy modals — .modal-content is 400px by default, list needs more */
.modal-content:has(.trophy-list-inner) {
    max-width: 420px;
}
.trophy-list-inner {
    max-height: 70vh;
    overflow-y: auto;
}
.trophy-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.trophy-list-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}
.trophy-list-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 20px;
    line-height: 1;
}

/* Card variant (< 10 trophies) */
.trophy-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-left: 3px solid var(--trophy-color);
}
.trophy-card:hover {
    background: var(--bg-hover);
}

.trophy-card-emoji {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}
.trophy-card-info {
    flex: 1;
    min-width: 0;
}
.trophy-card-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}
.trophy-card-rarity {
    font-size: 12px;
    color: var(--trophy-color);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.trophy-card-date {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}
.trophy-card-featured-badge {
    color: var(--trophy-color);
    font-size: 14px;
}

/* Compact variant (>= 10 trophies) */
.trophy-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
    border-left: 3px solid var(--trophy-color);
    margin-bottom: 4px;
}
.trophy-compact:hover {
    background: var(--bg-hover);
}

.trophy-compact-emoji {
    font-size: 18px;
    line-height: 1;
}
.trophy-compact-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trophy-compact-rarity {
    font-size: 11px;
    color: var(--trophy-color);
    font-weight: 500;
    text-transform: uppercase;
}

/* Trophy detail popup (uses modal-overlay from Modal.js for backdrop) */
.trophy-detail-inner {
    text-align: center;
    margin: -24px -24px 0;
    padding: 24px;
    border-top: 3px solid var(--trophy-color);
    border-radius: var(--radius-lg, 20px) var(--radius-lg, 20px) 0 0;
}

.trophy-detail-emoji {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 12px;
}
.trophy-detail-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}
.trophy-detail-rarity {
    font-size: 13px;
    color: var(--trophy-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.trophy-detail-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}
.trophy-detail-date {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.trophy-detail-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.trophy-detail-actions button {
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: background 0.15s ease;
}
.trophy-detail-actions button:hover {
    background: var(--bg-hover);
}
.trophy-detail-actions button.active {
    border-color: var(--trophy-color);
    background: rgba(128, 128, 128, 0.1);
    background: color-mix(in srgb, var(--trophy-color) 15%, transparent);
    color: var(--trophy-color);
}

/* Empty state */
.trophy-list-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 16px 0;
}

/* ==========================================================================
   Premium Modal
   ========================================================================== */

.modal-content:has(.premium-modal) { padding: 0; max-width: 420px; }
.premium-modal {
    width: 100%; position: relative;
    max-height: calc(100dvh - 40px); overflow-y: auto;
}
.premium-close-btn {
    position: absolute; top: 12px; right: 12px; z-index: 1;
    background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); cursor: pointer; transition: all 0.2s ease;
}
.premium-close-btn:hover { background: rgba(255, 255, 255, 0.15); color: var(--text-primary); }

/* Header */
.premium-header { text-align: center; padding: 16px 20px 12px; }
.premium-hero { margin-bottom: 8px; display: flex; justify-content: center; }
.premium-hero-diamond { font-size: 48px; }
.premium-hero-cat { width: 96px; height: 96px; object-fit: contain; }
.premium-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.premium-subtitle { font-size: 13px; color: var(--text-muted); margin: 0; }

/* Active status */
.premium-status { text-align: center; padding: 8px 16px; margin: 0 20px 12px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; }
.premium-status-active { background: rgba(99, 102, 241, 0.15); color: #a78bfa; }

/* Feature list */
.premium-feature-list { padding: 0 20px 12px; display: flex; flex-direction: column; gap: 6px; }
.premium-feature {
    display: flex; align-items: flex-start; gap: 12px; padding: 7px 12px;
    background: rgba(255, 255, 255, 0.03); border-radius: var(--radius-md);
    transition: background 0.15s ease;
}
.premium-feature:hover { background: rgba(255, 255, 255, 0.06); }
.premium-feature-icon { font-size: 24px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.premium-feature-text { flex: 1; min-width: 0; }
.premium-feature-title { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.premium-feature-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }

/* Plan cards */
.premium-plans {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
    padding: 0 20px 12px;
}
.premium-plan-card {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 6px; border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05); border: 2px solid transparent;
    cursor: pointer; transition: all 0.2s ease; text-align: center;
}
.premium-plan-card:hover { background: rgba(255, 255, 255, 0.08); }
.premium-plan-card.selected {
    border-color: #a78bfa;
    background: rgba(139, 92, 246, 0.12);
}
.premium-plan-row { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.premium-plan-sub { display: flex; align-items: center; gap: 4px; justify-content: center; }
.premium-plan-per-month { font-size: 11px; color: var(--text-muted); }
.premium-plan-discount {
    display: inline-block; padding: 1px 5px;
    background: rgba(34, 197, 94, 0.2); color: #22c55e;
    border-radius: 4px; font-size: 10px; font-weight: 700;
}

/* Action button */
.premium-action-btn {
    display: block; width: calc(100% - 40px); margin: 0 20px 20px;
    padding: 14px; border: none; border-radius: var(--radius-md);
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    position: relative; overflow: hidden;
}
.premium-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}
.premium-action-btn:active { transform: translateY(0); }

/* ============================================
   PROFILE CHANNELS — popup + edit widgets
   Uses project design tokens from variables.css
   ============================================ */

/* Same pattern as .trophies-count-link / .subscribers-count-link */
.profile-stat.channels-count-link {
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
}
.profile-stat.channels-count-link:hover {
    background: var(--bg-hover);
}

/* Channel card in popup — reuses .trophy-list-header/close/inner for modal shell */
.profile-channel-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s;
}
.profile-channel-card + .profile-channel-card {
    margin-top: 8px;
}
.profile-channel-card:active {
    background: var(--bg-input);
}
.profile-channel-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    background: var(--gradient-saved);
    overflow: hidden;
}
.profile-channel-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-channel-card-info {
    flex: 1;
    min-width: 0;
}
.profile-channel-card-title {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-channel-card-desc {
    font-size: 12px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    margin-top: 2px;
}
.profile-channel-card-members {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}
.profile-channel-card-arrow {
    color: var(--text-muted);
    font-size: 18px;
    flex-shrink: 0;
}

/* ============================================
   PROFILE CHANNELS — Edit profile section
   ============================================ */

.profile-channels-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.profile-channels-limit-badge {
    font-size: 11px;
    background: rgba(139, 46, 168, 0.15);
    color: var(--color-purple-light);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

/* Selected channel widget (edit profile) */
.profile-channel-widget {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}
.profile-channel-widget-avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    background: var(--gradient-saved);
    overflow: hidden;
}
.profile-channel-widget-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-channel-widget-info {
    flex: 1;
    min-width: 0;
}
.profile-channel-widget-title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-channel-widget-members {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.profile-channel-widget-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-hover);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    margin-top: 4px;
}
.profile-channel-widget-remove {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 60, 60, 0.15);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-error);
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}
.profile-channel-widget-remove:hover {
    background: rgba(255, 60, 60, 0.3);
}

/* Add channel button */
.profile-channel-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    margin-top: 4px;
}
.profile-channel-add-btn:hover {
    border-color: var(--border-color-hover);
    color: var(--color-rose);
}

/* Channel selector steps */
.profile-channel-selector {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-top: 12px;
    overflow: hidden;
}
.profile-channel-selector-header {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-rose);
    background: rgba(232, 180, 188, 0.06);
    display: flex;
    align-items: center;
    gap: 8px;
}
.profile-channel-selector-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}
.profile-channel-selector-body {
    padding: 8px;
}
.profile-channel-selector-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s;
}
.profile-channel-selector-item:hover {
    background: var(--bg-hover);
}
.profile-channel-selector-item.selected {
    background: rgba(232, 180, 188, 0.1);
}
.profile-channel-selector-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.profile-channel-selector-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
    background: var(--gradient-saved);
    overflow: hidden;
}
.profile-channel-selector-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-channel-selector-item-name {
    font-size: 14px;
    font-weight: 500;
}
.profile-channel-selector-item-meta {
    font-size: 11px;
    color: var(--text-muted);
}
.profile-channel-selector-item-meta.no-links {
    color: var(--color-error);
}

/* Link search input */
.profile-channel-link-search {
    margin: 8px 8px 4px;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    width: calc(100% - 16px);
    outline: none;
}
.profile-channel-link-search::placeholder {
    color: var(--text-muted);
}
.profile-channel-link-search:focus {
    border-color: var(--color-rose-dark);
}

/* Link item in selector */
.profile-channel-link-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s;
}
.profile-channel-link-item:hover {
    background: var(--bg-hover);
}
.profile-channel-link-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: rgba(232, 180, 188, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-rose);
    font-size: 14px;
}
.profile-channel-link-name {
    font-size: 13px;
    font-weight: 500;
}
.profile-channel-link-meta {
    font-size: 11px;
    color: var(--text-muted);
}