@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    height:100%;
}

body{
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background:#111b21;
    color:#e9edef;
    overflow:hidden;
}

body.app-shell{
    display:flex;
    flex-direction:column;
    height:100dvh;
    min-height:100vh;
}

.app-main{
    flex:1;
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

[hidden]{
    display:none !important;
}

.chat-layout{
    display:flex;
    flex:1;
    width:100%;
    min-height:0;
    height:100%;
    overflow:hidden;
}

.sidebar{
    width:350px;
    max-width:100%;
    min-height:0;
    background:#202c33;
    border-right:1px solid #2f3b43;
    display:flex;
    flex-direction:column;
    flex-shrink:0;
}

.sidebar-header{
    height:70px;
    padding:15px;
    background:#202c33;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.profile-section{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    flex:1;
}

.profile-section .sidebar-panel-back {
    flex-shrink: 0;
}

.profile-info{
    min-width:0;
}

.profile-info h3,
.profile-info span{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.profile-image{
    width:45px;
    height:45px;
    border-radius:50%;
}

.profile-info h3{
    color:white;
    font-size:15px;
}

.profile-info span{
    color:#8696a0;
    font-size:12px;
}

.menu-btn{
    background:none;
    border:none;
    color:#aebac1;
    font-size:18px;
    cursor:pointer;
    width:40px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    text-decoration:none;
    flex-shrink:0;
}

.menu-btn:hover{
    background:#2a3942;
}

.menu-btn[aria-expanded="true"] {
    background: #2a3942;
    color: #e9edef;
}

.search-box{
    padding:10px;
    background:#111b21;
}

.search-box input{
    width:100%;
    height:40px;
    border:none;
    border-radius:8px;
    background:#202c33;
    color:white;
    padding:0 15px;
}

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

.user-list.hidden,
.user-list2.hidden,
.user-list[hidden],
.user-list2[hidden] {
    display: none !important;
}

#chat-list-all.user-list2 {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.chat-list-selection-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 59px;
    padding: 0 16px;
    background: #202c33;
    border-bottom: 1px solid #2f3b43;
    flex-shrink: 0;
}

.chat-list-selection-toolbar.is-global {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    padding-top: env(safe-area-inset-top, 0);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

@media (min-width: 769px) {
    body.app-shell .chat-list-selection-toolbar.is-global {
        left: 72px;
    }
}

body.chat-list-selection-mode #sidebar-main-header,
body.chat-list-selection-mode #sidebar-chat-filters {
    display: none !important;
}

body.chat-list-selection-mode .updates-page {
    padding-top: calc(59px + env(safe-area-inset-top, 0));
}

.chat-list-selection-toolbar.hidden {
    display: none !important;
}

.chat-list-selection-toolbar button {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #aebac1;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-list-selection-toolbar button:hover:not(:disabled) {
    color: #e9edef;
    background: rgba(255, 255, 255, 0.06);
}

.chat-list-selection-toolbar button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.chat-list-selection-toolbar [data-chat-sel="delete"] {
    margin-left: auto;
    color: #ff6b6b;
}

.chat-list-selection-toolbar .chat-sel-count {
    color: #e9edef;
    font-size: 14px;
    font-weight: 500;
    min-width: 24px;
}

#sidebar-main-header.hidden {
    display: none !important;
}

.chat-list-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #8696a0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    color: #fff;
}

.chat-list-selection-mode .chat-list-check {
    display: inline-flex;
}

.chat-list-item.selected .chat-list-check {
    background: #00a884;
    border-color: #00a884;
}

.chat-list-item.selected {
    background: rgba(0, 168, 132, 0.12);
}

.chat-list-selection-mode .chat-list-item {
    cursor: pointer;
}

.chat-list-item {
    -webkit-touch-callout: none;
    user-select: none;
}

.user-list2 .user-list2-empty {
    padding: 12px 20px;
}

.updates-chats-section .user-list2 {
    flex: none;
    overflow-y: visible;
    background: transparent;
}

.updates-hub-section {
    padding: 0 0 16px;
}

.updates-hub-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px;
}

.updates-hub-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 16px 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.updates-hub-tabs::-webkit-scrollbar {
    display: none;
}

.updates-hub-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #8696a0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.updates-hub-tab.active {
    background: rgba(37, 211, 102, 0.16);
    color: #25d366;
}

.updates-hub-tab--hidden {
    display: none !important;
}

.updates-hub-tab span {
    font-size: 11px;
    opacity: 0.85;
}

.updates-hub-table-wrap {
    padding: 0 12px 8px;
    overflow-x: auto;
}

.updates-hub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.updates-hub-table thead th {
    padding: 10px 8px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8696a0;
    border-bottom: 1px solid rgba(134, 150, 160, 0.2);
}

.updates-hub-table thead th:last-child {
    text-align: right;
}

.updates-hub-row {
    border-bottom: 1px solid rgba(134, 150, 160, 0.12);
    cursor: pointer;
    transition: background 0.15s;
}

.updates-hub-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.updates-hub-user-cell,
.updates-hub-type-cell,
.updates-hub-detail-cell,
.updates-hub-action-cell {
    padding: 12px 8px;
    vertical-align: middle;
}

.updates-hub-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.updates-hub-user .status-ring-wrap,
.updates-hub-user .avatar-wrap.sm {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.updates-hub-user-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.updates-hub-user-meta strong {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.updates-hub-username {
    font-size: 12px;
    color: #8696a0;
}

.updates-hub-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.updates-hub-type-badge--viewed {
    background: rgba(134, 150, 160, 0.2);
    color: #aebac1;
}

.updates-hub-type-badge--follow {
    background: rgba(37, 211, 102, 0.14);
    color: #25d366;
}

.updates-hub-type-badge--chat {
    background: rgba(52, 183, 241, 0.14);
    color: #34b7f1;
}

.updates-hub-detail-cell {
    color: #8696a0;
    font-size: 13px;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.updates-hub-detail-cell .unread-badge.sm {
    margin-left: 6px;
    vertical-align: middle;
}

.updates-hub-action-cell {
    text-align: right;
    white-space: nowrap;
}

.btn-hub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn-hub--status,
.btn-hub--chat {
    background: rgba(37, 211, 102, 0.14);
    color: #25d366;
}

.updates-hub-loading,
.updates-hub-empty {
    padding: 20px;
    text-align: center;
    color: #8696a0;
    font-size: 14px;
}

@media (max-width: 640px) {
    .updates-hub-table thead {
        display: none;
    }

    .updates-hub-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px 8px;
        padding: 10px 4px;
    }

    .updates-hub-user-cell {
        grid-column: 1 / -1;
        padding: 0 4px 4px;
    }

    .updates-hub-type-cell {
        padding: 0 4px;
    }

    .updates-hub-detail-cell {
        padding: 0 4px;
        max-width: none;
    }

    .updates-hub-action-cell {
        grid-column: 1 / -1;
        text-align: left;
        padding: 4px 4px 0;
    }
}

.updates-follow-section {
    padding-bottom: 24px;
}

.updates-follow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px;
}

.updates-follow-pending-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--gc-accent, #25d366);
    background: rgba(37, 211, 102, 0.12);
    padding: 4px 10px;
    border-radius: 999px;
}

.updates-follow-tabs {
    display: flex;
    gap: 8px;
    padding: 8px 20px 12px;
    border-bottom: 1px solid var(--gc-border, rgba(255, 255, 255, 0.08));
}

.updates-follow-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--gc-text-muted, #8696a0);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.updates-follow-tab.active {
    background: rgba(37, 211, 102, 0.14);
    color: var(--gc-accent, #25d366);
}

.updates-follow-tab-count {
    font-size: 11px;
    opacity: 0.85;
}

.updates-follow-table-wrap {
    overflow-x: auto;
    padding: 0 12px;
}

.updates-follow-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.updates-follow-table thead {
    display: none;
}

.updates-follow-row {
    border-bottom: 1px solid var(--gc-border, rgba(255, 255, 255, 0.06));
}

.updates-follow-row:last-child {
    border-bottom: none;
}

.updates-follow-user-cell {
    padding: 12px 8px;
    min-width: 0;
}

.updates-follow-user-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.updates-follow-user-link:hover strong {
    color: var(--gc-accent, #25d366);
}

.avatar-wrap.sm {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.avatar-wrap.sm img {
    width: 44px;
    height: 44px;
}

.updates-follow-user-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.updates-follow-user-meta strong {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.updates-follow-username,
.updates-follow-bio {
    font-size: 12px;
    color: var(--gc-text-muted, #8696a0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.updates-follow-stat-cell {
    padding: 12px 8px;
    text-align: center;
    color: var(--gc-text-muted, #8696a0);
    font-size: 13px;
    white-space: nowrap;
}

.updates-follow-action-cell {
    padding: 12px 8px;
    white-space: nowrap;
}

.updates-follow-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.updates-follow-request-btns {
    display: flex;
    gap: 6px;
}

.btn-follow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, background 0.15s;
}

.btn-follow:disabled {
    opacity: 0.6;
    cursor: wait;
}

.btn-follow--primary {
    background: var(--gc-accent, #25d366);
    color: #fff;
}

.btn-follow--following,
.btn-follow--requested {
    background: rgba(255, 255, 255, 0.08);
    color: var(--gc-text, #e9edef);
    border: 1px solid var(--gc-border, rgba(255, 255, 255, 0.12));
}

.btn-follow--accept {
    background: var(--gc-accent, #25d366);
    color: #fff;
}

.btn-follow--reject,
.btn-follow--ghost {
    background: transparent;
    color: var(--gc-text-muted, #8696a0);
    border: 1px solid var(--gc-border, rgba(255, 255, 255, 0.12));
}

.btn-follow--message {
    background: rgba(52, 183, 241, 0.15);
    color: #34b7f1;
    padding: 7px 10px;
}

.updates-follow-empty,
.updates-follow-hint,
.updates-follow-loading {
    padding: 20px;
    text-align: center;
}

.updates-follow-hint {
    color: var(--gc-text-muted, #8696a0);
    font-size: 13px;
}

.chat-profile-follow-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 12px 0 4px;
    font-size: 13px;
    color: var(--gc-text-muted, #8696a0);
}

.chat-profile-follow-stats strong {
    color: var(--gc-text, #e9edef);
    font-size: 15px;
}

.chat-profile-follow-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
}

@media (min-width: 768px) {
    .updates-follow-table thead {
        display: table-header-group;
    }

    .updates-follow-table th {
        padding: 10px 8px;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--gc-text-muted, #8696a0);
    }

    .updates-follow-table th:last-child {
        text-align: right;
    }

    .updates-follow-stat-cell {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .updates-follow-stat-cell {
        display: none;
    }

    .updates-follow-action-cell {
        padding-left: 0;
    }

    .btn-follow {
        padding: 6px 10px;
        font-size: 11px;
    }
}

.user-item{
    display:flex;
    align-items:center;
    gap:15px;
    padding:12px 15px;
    cursor:pointer;
    transition:.2s;
    text-decoration:none;
}

.user-item:hover{
    background:#2a3942;
}

.user-item img{
    width:50px;
    height:50px;
    border-radius:50%;
}

.user-content h4{
    color:white;
    font-size:15px;
}

.user-content p{
    color:#8696a0;
    font-size:13px;
}

.chat-area{
    flex:1;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    background:#0b141a;
    position:relative;
    --composer-pad-x: 22px;
}

.chat-header{
    height:59px;
    min-height:59px;
    background:#202c33;
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 10px 0 12px;
    flex-shrink:0;
    position:relative;
    z-index:60;
    overflow:visible;
}

.chat-actions {
    overflow: visible;
    margin-left:auto;
    flex-shrink:0;
}

.chat-user{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
    min-width:0;
}

.chat-user > div{
    min-width:0;
    overflow:hidden;
}

.chat-user img{
    width:40px;
    height:40px;
    border-radius:50%;
    flex-shrink:0;
}

.chat-user h3{
    color:white;
    margin:0;
    font-size:15px;
    font-weight:500;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.chat-user span{
    color:#8696a0;
    font-size:12px;
    line-height:1.2;
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.chat-actions{
    display:flex;
    align-items:center;
    gap:2px;
}

.chat-header .chat-actions > button,
.chat-header .chat-actions > .call-btn,
.chat-header .chat-actions .menu-btn {
    background:none;
    border:none;
    color:#aebac1;
    font-size:16px;
    cursor:pointer;
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    flex-shrink:0;
    padding:0;
}

.chat-header .chat-actions > button:hover,
.chat-header .chat-actions > .call-btn:hover,
.chat-header .chat-actions .menu-btn:hover,
.chat-header .chat-actions .menu-btn[aria-expanded="true"] {
    background:#2a3942;
}

.chat-header-menu-wrap {
    position: relative;
    z-index: 70;
}

.chat-header-dropdown {
    position: fixed;
    top: auto;
    right: auto;
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 220px;
    max-width: min(280px, calc(100vw - 16px));
    max-height: min(70vh, 420px);
    background: #233138;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 2100;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
    -webkit-overflow-scrolling: touch;
}

.chat-header-dropdown.is-open {
    animation: chatDropdownIn 0.16s ease;
}

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

.chat-header-dropdown[hidden] {
    display: none !important;
}

.chat-header-dropdown .chat-header-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    height: auto;
    padding: 10px 16px;
    border: none;
    border-radius: 0;
    background: none;
    color: #e9edef;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    justify-content: flex-start;
    flex-shrink: 0;
    white-space: nowrap;
}

.chat-header-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    color: #e9edef;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.chat-header-menu-item i {
    width: 18px;
    color: #8696a0;
    text-align: center;
    flex-shrink: 0;
}

.chat-header-dropdown .chat-header-menu-item:hover,
.chat-header-menu-item:hover {
    background: #182229;
}

.chat-user[role="button"] {
    cursor: pointer;
    border-radius: 8px;
    padding: 2px 6px 2px 0;
    margin: 0;
}

.chat-user[role="button"]:hover {
    background: rgba(255, 255, 255, 0.05);
}

.chat-menu-modal {
    text-align: left;
    max-width: 400px;
}

.chat-menu-modal-hint {
    color: #8696a0;
    font-size: 13px;
    margin-bottom: 12px;
}

.add-user-results {
    max-height: 240px;
    overflow-y: auto;
    margin: 12px 0;
}

.add-user-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    color: #e9edef;
    text-decoration: none;
    border-radius: 8px;
}

.add-user-result-item:hover {
    background: #2a3942;
}

.add-user-result-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.add-user-empty {
    color: #8696a0;
    font-size: 13px;
    padding: 8px;
}

.chat-profile-modal {
    text-align: center;
}

.chat-profile-avatar-host {
    margin: 0 auto 12px;
    width: fit-content;
}

.chat-profile-avatar-host .avatar-status-wrap.size-profile-modal {
    margin: 0 auto;
}

.chat-profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: block;
}

.chat-profile-avatar-host .chat-profile-avatar {
    margin: 0;
}

.chat-profile-status-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px auto 4px;
    width: auto;
    min-width: 160px;
}

.chat-profile-status-btn.is-disabled,
.chat-profile-status-btn:disabled,
.chat-header-menu-item.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.chat-profile-username {
    color: #8696a0;
    font-size: 14px;
    margin-bottom: 8px;
}

.chat-profile-status {
    color: #00a884;
    font-size: 14px;
    margin-bottom: 12px;
}

.chat-profile-phone,
.chat-profile-bio,
.chat-profile-about {
    color: #aebac1;
    font-size: 14px;
    margin: 8px 0;
}

.chat-profile-actions {
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

.chat-profile-actions .auth-button {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
}

.chat-header-menu-item.danger {
    color: #ea7070;
}

.chat-mute-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}

.chat-mute-option {
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 8px;
    background: #2a3942;
    color: #e9edef;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.chat-mute-option:hover {
    background: #374248;
}

.chat-mute-option.chat-mute-unmute {
    color: #00a884;
}

.chat-wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 12px 0;
}

.chat-wallpaper-swatch {
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    background: #0b141a;
    background-image: radial-gradient(#1f2c34 1px, transparent 1px);
    background-size: 12px 12px;
}

.chat-wallpaper-swatch:hover,
.chat-wallpaper-swatch:focus {
    border-color: #00a884;
    outline: none;
}

.chat-wallpaper-swatch-custom {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.chat-wallpaper-swatch-custom span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e9edef;
    font-size: 18px;
    background: rgba(11, 20, 26, 0.45);
}

.chat-wallpaper-swatch-custom.has-image span {
    background: rgba(11, 20, 26, 0.2);
}

.chat-wallpaper-custom-upload {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-wallpaper-custom-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #e9edef;
}

.chat-wallpaper-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    margin-bottom: 10px;
    background-color: #111b21;
    background-size: cover;
    background-position: center;
    border: 1px solid #3b4a54;
}

.chat-wallpaper-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px dashed #3b4a54;
    background: #202c33;
    color: #00a884;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.chat-wallpaper-upload-btn:hover {
    background: #2a3942;
}

.chat-wallpaper-custom-upload .auth-button.full {
    width: 100%;
    margin-top: 10px;
}

.auth-button.danger {
    background: #ea7070;
    color: #fff;
}

.auth-button.danger:hover {
    background: #f08080;
}

.chat-toast-overlay {
    background: rgba(0, 0, 0, 0.45);
    z-index: 500;
}

.chat-toast-card {
    max-width: 320px;
    padding: 20px 24px;
}

.chat-toast-card p {
    margin-bottom: 16px;
    color: #e9edef;
}

.chat-media-grid-item {
    border: none;
    padding: 0;
    background: #2a3942;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
}

.chat-media-grid-item img,
.chat-media-grid-item .chat-media-video-icon {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
}

.chat-media-video-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8696a0;
    font-size: 24px;
    height: 80px;
}

body.chat-modal-open {
    overflow: hidden;
}

.chat-search-results {
    max-height: 220px;
    overflow-y: auto;
    margin: 10px 0;
}

.chat-search-hit {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px;
    border: none;
    background: #2a3942;
    color: #e9edef;
    
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 13px;
}

.chat-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
}

.chat-media-grid img,
.chat-media-grid video {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

.message-highlight {
    outline: 2px solid #00a884;
    outline-offset: 2px;
}

.call-type-label {
    color: #8696a0;
    font-size: 14px;
    margin-bottom: 8px;
}

.call-overlay.ringing .call-avatar {
    animation: call-ring-pulse 1.5s ease-in-out infinite;
}

@keyframes call-ring-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 168, 132, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(0, 168, 132, 0); }
}

.call-incoming-actions {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
}

.messages-container{
    flex:1;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding: 20px 10px 20px 10px;
    display:flex;
    flex-direction:column;
    gap:0;
    background:#0b141a;
    background-image: radial-gradient(#1f2c34 1px, transparent 1px);
    background-size:24px 24px;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.messages-container::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
}

.new-messages-pill{
    position:absolute;
    left:50%;
    bottom:calc(78px + env(safe-area-inset-bottom));
    transform:translateX(-50%);
    z-index:25;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border:none;
    border-radius:20px;
    background:#202c33;
    color:#00a884;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,0.35);
    transition:opacity 0.2s, transform 0.2s;
}

.new-messages-pill.hidden{
    display:none !important;
}

.new-messages-pill:hover{
    background:#2a3942;
}

.new-messages-pill i{
    font-size:12px;
}

.message-row{
    display:flex;
    align-items:flex-end;
    gap:6px;
    max-width:78%;
    margin-bottom:2px;
}

.messages-container > .welcome-panel{
    margin-bottom:15px;
}

.message-row.sent{
    align-self:flex-end;
    flex-direction:row;
}

.message-row.received{
    align-self:flex-start;
    flex-direction:row-reverse;
}

.msg-sender-avatar{
    width:30px;
    height:30px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
    margin-bottom:2px;
    background:#2a3942;
}

.message-row > .avatar-status-wrap {
    margin-bottom: 2px;
}

.msg-sender-avatar.is-spacer{
    visibility:hidden;
}

.msg-sender-name{
    display:block;
    font-size:12.5px;
    font-weight:600;
    line-height:1.2;
    margin:0 0 4px;
    color:#53bdeb;
}

.message-row.sent .msg-sender-name{
    color:#8696a0;
    text-align:right;
}

.message{
    max-width:100%;
    min-width:80px;
    flex:1;
    padding:6px 8px 4px 10px;
    border-radius:8px;
    color:#e9edef;
    position:relative;
    box-shadow:0 1px 0.5px rgba(0,0,0,.13);
    word-wrap:break-word;
}

.message.sent{
    background:#005c4b;
    border-top-left-radius:0;
}

.message.received{
    background:#202c33;
    border-top-right-radius:0;
}

.message p{
    margin:0;
    font-size:14.2px;
    line-height:1.35;
    white-space:pre-wrap;
}

.message .msg-meta{
    font-size:11px;
    opacity:.75;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    margin-top:4px;
    float:right;
    margin-left:12px;
    position:relative;
    top:4px;
}

.message span:not(.msg-meta){
    font-size:11px;
    opacity:.7;
}

.message-input{
    min-height:70px;
    height:auto;
    background:#202c33;
    display:flex;
    align-items:flex-end;
    gap:10px;
    padding:10px var(--composer-pad-x, 22px) 12px;
    flex-shrink:0;
    box-sizing:border-box;
}

.message-input button{
    background:none;
    border:none;
    color:#aebac1;
    font-size:22px;
    cursor:pointer;
    flex-shrink:0;
    width:40px;
    height:40px;
    padding:0;
    margin-bottom:1px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
}

.message-input button:hover{
    color:#e9edef;
}

.message-input input,
.message-input textarea{
    flex:1;
    min-width:0;
    min-height:42px;
    max-height:120px;
    border:none;
    border-radius:22px;
    background:#2a3942;
    padding:11px 16px;
    color:white;
    resize:none;
    overflow-y:hidden;
    overflow-x:hidden;
    box-sizing:border-box;
    font-family:inherit;
    font-size:15px;
    line-height:1.35;
}

.send-btn{
    color:#00a884 !important;
}

#typing-indicator {
    color: #8696a0;
    font-size: 13px;
    font-style: italic;
    padding: 10px 14px;
    align-self: flex-start;
    display: none;
    background: #202c33;
    border-radius: 10px;
    margin-bottom: 5px;
    max-width: 300px;
}

#typing-indicator.active {
    display: block;
}

/* Auth Pages Styles */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #111b21;
    color: #e9edef;
    position: relative;
    padding: 20px;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.auth-header-strip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 222px;
    background-color: #00a884;
    z-index: 1;
}

.auth-container {
    width: 100%;
    max-width: 450px;
    background: #222e35;
    border-radius: 3px;
    box-shadow: 0 17px 50px 0 rgba(0,0,0,.19), 0 12px 15px 0 rgba(0,0,0,.24);
    z-index: 2;
    padding: 40px;
    margin-top: 50px;
    border-top: 5px solid #00a884;
}

.auth-logo-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
}

.auth-logo-section svg {
    width: 40px;
    height: 40px;
    fill: #00a884;
}

.auth-logo-section h1 {
    font-size: 20px;
    font-weight: 600;
    color: #e9edef;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.auth-title {
    font-size: 24px;
    margin-bottom: 25px;
    color: #e9edef;
    font-weight: 300;
    text-align: center;
}

.auth-field {
    margin-bottom: 20px;
    position: relative;
}

.auth-label {
    display: block;
    color: #00a884;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

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

.auth-input {
    width: 100%;
    height: 44px;
    background: #2a3942 !important;
    border: 1px solid #2f3b43;
    border-radius: 4px;
    color: #e9edef !important;
    padding: 0 16px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-input:focus {
    border-color: #00a884;
    box-shadow: 0 0 0 2px rgba(0, 168, 132, 0.2);
}

.auth-input-password {
    padding-right: 45px;
}

.password-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.password-input-wrap .password-input-field,
.password-input-wrap input[type="password"],
.password-input-wrap input[type="text"] {
    width: 100%;
    padding-right: 44px;
}

.settings-field .password-input-wrap input,
.settings-modal-card .password-input-wrap input {
    width: 100%;
}

.password-toggle-btn {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    color: #8696a0;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    z-index: 5;
}

.password-toggle-btn:hover {
    color: #e9edef;
}

.auth-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8696a0;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

.auth-checkbox {
    accent-color: #00a884;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.auth-error {
    color: #f15c6d;
    font-size: 12px;
    margin-top: 4px;
}

.auth-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    gap: 15px;
}

.auth-link {
    color: #8696a0;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s, text-decoration 0.2s;
}

.auth-link:hover {
    color: #00a884;
    text-decoration: underline;
}

.auth-button {
    background-color: #00a884;
    color: #111b21;
    border: none;
    border-radius: 4px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    outline: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.auth-button:hover {
    background-color: #008f72;
}

.auth-button:active {
    transform: scale(0.98);
}

/* GLETRA — Light theme */
html[data-theme="light"] body { background: #efeae2; }
html[data-theme="light"] .sidebar,
html[data-theme="light"] .sidebar-header,
html[data-theme="light"] .chat-header,
html[data-theme="light"] .message-input { background: #fff; }
html[data-theme="light"] .search-box input,
html[data-theme="light"] .message-input input,
html[data-theme="light"] .message-input textarea { background: #f0f2f5; color: #111; }
html[data-theme="light"] .user-content h4,
html[data-theme="light"] .chat-user h3,
html[data-theme="light"] .profile-info h3 { color: #111; }
html[data-theme="light"] .chat-area { background: #efeae2; }
html[data-theme="light"] .received { background: #fff; color: #111; }
html[data-theme="light"] .sent { background: #d9fdd3; color: #111; }

.header-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }

.mobile-new-chat-btn { display: none; }

.mobile-new-chat-sheet {
    display: none;
}

body.mobile-new-chat-open {
    overflow: hidden;
}
.search-icon { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: #8696a0; font-size: 14px; pointer-events: none; }
.search-box { position: relative; flex-shrink: 0; }
.search-box input { padding-left: 40px; }
.search-results { background: #111b21; max-height: 200px; overflow-y: auto; position: absolute; left: 10px; right: 10px; z-index: 20; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.search-results .result-item { display: flex; align-items: center; gap: 10px; padding: 10px 15px; color: #e9edef; text-decoration: none; }
.search-results .result-item:hover { background: #2a3942; }
.search-results .result-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.search-results-loading,
.search-results-empty,
.search-results-label { padding: 10px 15px; color: #8696a0; font-size: 13px; margin: 0; }
.search-results.is-loading .result-item { opacity: 0.6; }
.chat-tabs { display: flex; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #2f3b43; flex-shrink: 0; }
.chat-tabs .tab { background: transparent; border: none; color: #8696a0; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.chat-tabs .tab.active { color: #00a884; border-bottom: 2px solid #00a884; }
.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar-wrap img,
.user-item img,
.profile-image,
.chat-user img {
    object-fit: cover;
    background: #00a884;
}
.online-dot { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #25d366; border: 2px solid #202c33; border-radius: 50%; z-index: 4; }

/* WhatsApp-style status rings on chat avatars */
.avatar-status-wrap {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
}

.avatar-status-wrap.size-list {
    width: 50px;
    height: 50px;
}

.avatar-status-wrap.size-header {
    width: 40px;
    height: 40px;
}

.avatar-status-wrap.size-profile {
    width: 45px;
    height: 45px;
}

.avatar-status-wrap.size-msg {
    width: 30px;
    height: 30px;
}

.avatar-status-hit {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
}

.avatar-status-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

.avatar-status-ring path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke 0.2s ease;
}

.avatar-status-wrap img {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center center;
    background: #00a884;
}

.avatar-status-wrap.size-list img {
    inset: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
}

.avatar-status-wrap.size-header img {
    inset: 2.5px;
    width: calc(100% - 5px);
    height: calc(100% - 5px);
}

.avatar-status-wrap.size-profile img {
    inset: 2.5px;
    width: calc(100% - 5px);
    height: calc(100% - 5px);
}

.avatar-status-wrap.size-profile-modal {
    width: 96px;
    height: 96px;
    display: block;
}

.avatar-status-wrap.size-profile-modal img {
    inset: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
}

.avatar-status-wrap.size-msg img {
    inset: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
}

.avatar-wrap .avatar-status-wrap {
    display: flex;
}

.avatar-wrap .online-dot {
    z-index: 5;
}

.message-row .avatar-status-wrap.is-spacer,
.message-row .avatar-status-wrap .msg-sender-avatar.is-spacer {
    visibility: hidden;
}

.user-item .avatar-status-wrap img {
    width: calc(100% - 6px);
    height: calc(100% - 6px);
}

.chat-user .avatar-status-wrap img {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
}

.user-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.user-row time { color: #8696a0; font-size: 11px; flex-shrink: 0; }
.user-content { min-width: 0; flex: 1; }
.unread-badge { background: #00a884; color: #111; border-radius: 50%; min-width: 20px; height: 20px; font-size: 11px; display: flex; align-items: center; justify-content: center; padding: 0 6px; flex-shrink: 0; }
.user-item.active { background: #2a3942; }
.pin-icon { color: #8696a0; font-size: 12px; margin-left: auto; }
.back-btn { display: none; background: none; border: none; color: #aebac1; font-size: 16px; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; padding: 0; align-items: center; justify-content: center; }
.back-btn:hover { background: #2a3942; }
.welcome-panel { margin: auto; text-align: center; color: #8696a0; max-width: 460px; padding: 40px 24px; }
.welcome-panel h1 { color: #e9edef; margin: 16px 0; font-weight: 300; font-size: 32px; }
.welcome-icon { font-size: 64px; color: #00a884; }
.welcome-panel ul { list-style: none; text-align: left; margin-top: 24px; }
.welcome-panel li { margin: 12px 0; display: flex; gap: 12px; align-items: center; }
.empty-chat-header { display: flex; align-items: center; gap: 10px; color: #e9edef; min-width: 0; flex: 1; }
.empty-chat-header h2 { font-size: 15px; font-weight: 500; margin: 0; line-height: 1.2; }
.empty-chat-header p { color: #8696a0; font-size: 12px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gletra-logo-small { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; }
:root {
    --msg-media-max-width: 330px;
    --msg-media-max-height: 186px;
    --msg-media-min-height: 150px;
    --msg-media-aspect-ratio: 16 / 9;
    --msg-video-max-width: 330px;
    --msg-video-max-height: 186px;
    --msg-video-min-height: 150px;
}

@media (max-width: 768px) {
    :root {
        --msg-media-max-width: min(330px, 78vw);
        --msg-media-max-height: 186px;
        --msg-video-max-width: min(330px, 78vw);
        --msg-video-max-height: 186px;
    }
}

.msg-image,
.msg-video-poster,
.msg-video-preview {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    cursor: pointer;
    background: #0b141a;
}

.msg-video-preview { pointer-events: none; }

.message.message-media-bubble-wrap {
    padding: 3px;
    max-width: calc(var(--msg-media-max-width) + 6px);
    background: transparent !important;
    box-shadow: none;
}

.message.message-media-bubble-wrap.sent { background: transparent !important; }
.message.message-media-bubble-wrap.received { background: transparent !important; }

.message.message-media-bubble-wrap .msg-meta,
.msg-media-bubble > .msg-meta {
    position: absolute;
    right: 8px;
    bottom: 6px;
    margin: 0;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(11, 20, 26, 0.55);
    color: #e9edef;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 1;
    z-index: 4;
    pointer-events: none;
    float: none;
    top: auto;
}

.message.message-media-bubble-wrap.sent .msg-meta,
.message.message-media-bubble-wrap.sent .msg-media-bubble > .msg-meta {
    background: rgba(0, 92, 75, 0.72);
}

.message.message-media-bubble-wrap.received .msg-meta,
.message.message-media-bubble-wrap.received .msg-media-bubble > .msg-meta {
    background: rgba(32, 44, 51, 0.72);
}

.msg-media-bubble { position: relative; border-radius: 8px; overflow: hidden; }

.msg-media-inner {
    position: relative;
    line-height: 0;
    width: var(--msg-media-max-width);
    max-width: 100%;
    height: auto !important;
    min-height: var(--msg-media-min-height);
    max-height: var(--msg-media-max-height);
    aspect-ratio: var(--msg-media-aspect-ratio);
    background: #111b21;
    border-radius: 8px;
    overflow: hidden;
}

.msg-media-inner--video,
.msg-media-inner--social {
    width: var(--msg-video-max-width);
    max-width: 100%;
    height: auto !important;
    min-height: var(--msg-video-min-height);
    max-height: var(--msg-video-max-height);
    aspect-ratio: var(--msg-media-aspect-ratio);
}

.msg-media-inner--video .msg-video-poster {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.msg-media-inner--video .msg-video-poster-fallback {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: #8696a0;
}

.msg-media-inner--video .msg-media-skeleton {
    z-index: 1;
}

.msg-media-inner .msg-image {
    position: relative;
    z-index: 2;
}

.msg-media-inner.msg-media-ready .msg-media-skeleton {
    opacity: 0;
    pointer-events: none;
}

.msg-media-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, #1a242b 8%, #243038 18%, #1a242b 33%);
    background-size: 200% 100%;
    animation: msg-media-shimmer 1.2s linear infinite;
    z-index: 1;
    border-radius: 8px;
}

.msg-media-skeleton.loaded {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

@keyframes msg-media-shimmer {
    to { background-position-x: -200%; }
}

.msg-video-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: rgba(11, 20, 26, 0.55);
    color: #fff;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: transform 0.15s ease, background 0.15s ease;
}

.msg-video-play:hover { transform: scale(1.06); background: rgba(0, 168, 132, 0.75); }

.msg-video-inline {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    background: #0b141a;
    display: block;
}

.msg-media-inner--video.is-playing .msg-video-inline {
    border-radius: 8px;
}

.msg-media-inner--video.is-playing .msg-video-inline::-webkit-media-controls-panel {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
}

.msg-video-inline.hidden { display: none; }

.msg-media-inner--video.is-playing .msg-video-poster,
.msg-media-inner--video.is-playing .msg-video-poster-fallback,
.msg-video-poster.hidden,
.msg-video-poster-fallback.hidden,
.msg-video-play.hidden {
    opacity: 0;
    pointer-events: none;
}

.msg-video-poster-fallback {
    width: 100%;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #1a242b 0%, #111b21 100%);
    color: #8696a0;
    font-size: 42px;
}

.msg-media-upload-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(11, 20, 26, 0.45);
    z-index: 5;
    animation: msg-media-overlay-in 0.2s ease;
}

@keyframes msg-media-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.msg-media-percent {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.msg-media-cancel-btn {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 18px;
    background: rgba(234, 67, 53, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    z-index: 6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, background 0.15s ease;
}

.msg-media-cancel-btn:hover {
    background: #ea4335;
    transform: scale(1.04);
}

.msg-media-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #00a884;
    border-radius: 50%;
    animation: msg-media-spin 0.8s linear infinite;
}

@keyframes msg-media-spin {
    to { transform: rotate(360deg); }
}

.msg-media-failed {
    color: #ff6b6b;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.msg-media-failed-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 8px;
}

.msg-media-failed-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.msg-media-delete-btn,
.msg-media-delete-msg-btn {
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    background: rgba(255, 107, 107, 0.15);
    color: #ff8a8a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.msg-media-delete-btn:hover,
.msg-media-delete-msg-btn:hover {
    background: rgba(255, 107, 107, 0.28);
    transform: scale(1.03);
}

.message-media-unavailable .msg-media-inner img,
.message-media-unavailable .msg-media-inner .msg-video-poster,
.message-media-unavailable .msg-media-inner .msg-video-poster-fallback {
    filter: brightness(0.55);
}

.msg-media-resend-btn {
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    background: #00a884;
    color: #111;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.msg-media-resend-btn:hover {
    background: #06cf9c;
    transform: scale(1.03);
}

.msg-media-resend-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.message-upload-failed .msg-media-inner img,
.message-upload-failed .msg-media-inner .msg-video-poster {
    filter: brightness(0.7);
}

.msg-media-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
}

.msg-media-bubble:hover .msg-media-actions,
.msg-media-bubble:focus-within .msg-media-actions {
    opacity: 1;
}

.msg-media-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(11, 20, 26, 0.65);
    color: #e9edef;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s ease;
}

.msg-media-btn:hover { background: rgba(11, 20, 26, 0.85); }

.msg-status-uploading { opacity: 0.85; }
.msg-status-failed { color: #ff6b6b; }

.message-uploading .msg-media-inner img,
.message-uploading .msg-media-inner video {
    filter: brightness(0.85);
}

@media (max-width: 768px) {
    .msg-video-play { width: 48px; height: 48px; }
    .message.message-media-bubble-wrap { max-width: calc(var(--msg-media-max-width) + 6px); }
}
.doc-link { color: #53bdeb; display: flex; gap: 8px; align-items: center; }
.edited-tag { font-size: 10px; opacity: 0.7; }
.msg-meta .seen { color: #53bdeb; }

/* WhatsApp-style attachment sheet */
.attachment-sheet {
    position: fixed;
    inset: 0;
    z-index: 140;
    pointer-events: none;
}
.attachment-sheet.open { pointer-events: auto; }
.attachment-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.attachment-sheet.open .attachment-sheet-backdrop { opacity: 1; }
.attachment-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(70px + env(safe-area-inset-bottom));
    max-width: 520px;
    margin: 0 auto;
    background: #1a242b;
    border-radius: 16px 16px 0 0;
    padding: 0 16px 24px;
    transform: translateY(110%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
}
.attachment-sheet.open .attachment-sheet-panel { transform: translateY(0); }

.attachment-sheet-handle {
    width: 36px;
    height: 4px;
    background: #3b4a54;
    border-radius: 4px;
    margin: 10px auto 6px;
}

.attachment-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    margin: 0 -16px 8px;
    padding: 4px 12px 0;
    border-bottom: 1px solid #2f3b43;
    color: #e9edef;
    font-size: 15px;
    font-weight: 500;
}

.attachment-sheet-close-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8696a0;
    font-size: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.attachment-sheet-close-btn:hover {
    color: #e9edef;
    background: rgba(255, 255, 255, 0.08);
}

.attachment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 12px;
}
.attachment-item {
    border: none;
    background: transparent;
    color: #e9edef;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    padding: 4px;
}
.attachment-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
}
.attachment-icon.document { background: #7f66ff; }
.attachment-icon.camera { background: #ff2e74; }
.attachment-icon.gallery { background: #007bfc; }
.attachment-icon.audio { background: #ff9500; }
.attachment-icon.location { background: #00c853; }
.attachment-icon.contact { background: #0096fd; }
.attachment-icon.video { background: #ff3b30; }
.attachment-icon.link { background: #5e5ce6; }
.attachment-icon.poll { background: #ffd60a; color: #111; }
.attachment-icon.gif { background: #6e40c9; }
.attachment-icon.sticker { background: #00a884; }
.attachment-icon.files { background: #ff7043; }
.attachment-icon.category { background: #ab47bc; }

.attach-profile-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.attach-files-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.attach-files-tab {
    flex: 1;
    border: none;
    border-radius: 999px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    cursor: pointer;
    font-size: 13px;
}

.attach-files-tab.active {
    background: rgba(37, 211, 102, 0.18);
    color: #25d366;
}

.attach-files-pick-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 16px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    cursor: pointer;
    text-align: center;
    margin-bottom: 12px;
}

.attach-files-pick-zone i {
    font-size: 28px;
    color: #ff7043;
}

.attach-files-pick-zone span {
    font-size: 12px;
    opacity: 0.75;
}

.attach-files-save-check {
    margin-bottom: 4px;
}

.attach-files-list,
.attach-category-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 50vh;
    overflow: auto;
}

.attach-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.attach-file-send {
    margin-left: auto;
    color: #25d366;
    font-size: 14px;
    flex-shrink: 0;
}

.attach-file-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(127, 102, 255, 0.25);
    color: #b39cff;
}

.attach-file-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.attach-file-meta strong,
.attach-product-body strong {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attach-file-meta span,
.attach-product-body em {
    font-size: 12px;
    opacity: 0.75;
    font-style: normal;
}

.attach-category-block h4 {
    margin: 12px 0 8px;
    font-size: 13px;
    opacity: 0.85;
}

.attach-product-grid,
.profile-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.attach-product-card,
.profile-product-card {
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}

.attach-product-card img,
.profile-product-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.2);
}

.attach-product-body,
.profile-product-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.msg-product-card {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.msg-product-thumb {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
}

.msg-product-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #25d366;
}

.msg-product-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.msg-product-category {
    font-size: 11px;
    opacity: 0.75;
}

.msg-product-price {
    font-size: 14px;
    font-weight: 700;
    color: #25d366;
}

.profile-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 12px 12px 88px;
}

.profile-page-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.profile-page-header h1 {
    flex: 1;
    margin: 0;
    font-size: 18px;
}

.profile-page-back,
.profile-page-share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.profile-page-hero {
    text-align: center;
    padding: 8px 8px 20px;
}

.profile-page-avatar {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}

.profile-page-username,
.profile-page-bio,
.profile-page-about {
    opacity: 0.85;
    margin: 6px 0;
}

.profile-page-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 12px 0;
    font-size: 14px;
}

.profile-page-message-btn {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.profile-page-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.profile-page-tab {
    flex: 1;
    border: none;
    border-radius: 999px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    cursor: pointer;
}

.profile-page-tab.active {
    background: rgba(37, 211, 102, 0.18);
    color: #25d366;
}

.profile-file-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    margin-bottom: 12px;
    cursor: pointer;
}

.profile-file-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
}

.profile-file-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.profile-file-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(127, 102, 255, 0.25);
}

.profile-file-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.profile-file-delete {
    border: none;
    background: transparent;
    color: #ff6b6b;
    padding: 10px 12px;
    cursor: pointer;
}

.profile-category-block {
    margin-bottom: 18px;
}

.profile-category-title {
    margin: 0 0 10px;
    font-size: 15px;
}

.profile-empty-note {
    opacity: 0.75;
    text-align: center;
    padding: 24px 12px;
}

.chat-profile-page-btn,
.chat-profile-share-btn {
    width: 100%;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.chat-profile-share-btn {
    background: rgba(255, 255, 255, 0.08);
}

/* In-app camera capture */
.camera-capture-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    height: 100dvh;
    max-height: 100dvh;
    background: #0b141a;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.camera-capture-modal[hidden] { display: none !important; }
body.camera-open {
    overflow: hidden;
    touch-action: none;
}
.camera-capture-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.camera-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top));
    color: #e9edef;
}
.camera-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.camera-mode-tabs {
    display: flex;
    gap: 8px;
    background: #1f2c34;
    border-radius: 20px;
    padding: 4px;
    flex-shrink: 0;
}
.camera-mode {
    border: none;
    background: transparent;
    color: #8696a0;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
}
.camera-mode.active { background: #00a884; color: #fff; }
.camera-tool-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #e9edef;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.camera-tool-btn.is-active {
    background: rgba(0, 168, 132, 0.35);
    color: #00e676;
}
.camera-tool-btn.is-auto {
    background: rgba(255, 214, 10, 0.22);
    color: #ffd60a;
}
.camera-tool-btn:disabled,
.camera-tool-btn.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.camera-preview-wrap {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.camera-preview-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.camera-grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.45) calc(33.33% - 0.5px), rgba(255,255,255,0.45) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px)),
        linear-gradient(to right, transparent calc(66.66% - 0.5px), rgba(255,255,255,0.45) calc(66.66% - 0.5px), rgba(255,255,255,0.45) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
        linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.45) calc(33.33% - 0.5px), rgba(255,255,255,0.45) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px)),
        linear-gradient(to bottom, transparent calc(66.66% - 0.5px), rgba(255,255,255,0.45) calc(66.66% - 0.5px), rgba(255,255,255,0.45) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}
.camera-grid-overlay.hidden { display: none !important; }
.camera-flash-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.08s ease-out;
}
.camera-flash-overlay.active { opacity: 0.92; }
.camera-side-tools {
    position: absolute;
    top: 16px;
    right: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.camera-side-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(11, 20, 26, 0.55);
    color: #e9edef;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    backdrop-filter: blur(6px);
}
.camera-side-btn.is-active {
    background: rgba(0, 168, 132, 0.45);
    color: #fff;
}
.camera-side-btn.hidden { display: none !important; }
.camera-side-label {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}
.camera-side-label.hidden { display: none !important; }
.camera-zoom-bar {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(11, 20, 26, 0.62);
    backdrop-filter: blur(8px);
}
.camera-zoom-bar.hidden { display: none !important; }
.camera-zoom-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
}
.camera-zoom-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.camera-zoom-label {
    min-width: 36px;
    text-align: center;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.camera-timer-countdown {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 4px 24px rgba(0,0,0,0.55);
    pointer-events: none;
}
.camera-timer-countdown.hidden { display: none !important; }
.camera-recording-indicator {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 59, 48, 0.9);
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.camera-recording-indicator.hidden { display: none; }
.camera-review-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
.camera-review-wrap.hidden { display: none; }
.camera-review-media img,
.camera-review-media video {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}
.camera-controls {
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    align-items: center;
    justify-items: center;
    flex-shrink: 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    min-height: 112px;
}
.camera-gallery-btn {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 12px;
    background: rgba(255,255,255,0.12);
    color: #e9edef;
    font-size: 20px;
    cursor: pointer;
    justify-self: start;
}
.camera-gallery-btn.hidden { display: none !important; }
.camera-controls-spacer {
    width: 48px;
    height: 48px;
    justify-self: end;
}
.camera-shutter {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 4px solid #e9edef;
    background: transparent;
    cursor: pointer;
    position: relative;
    grid-column: 2;
}
.camera-shutter::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: #e9edef;
}
.camera-shutter.is-video::after { border-radius: 8px; }
.camera-shutter.recording::after { background: #ff3b30; }
.camera-send {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: #00a884;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    grid-column: 2;
}
.camera-secondary {
    border: none;
    background: transparent;
    color: #e9edef;
    font-size: 14px;
    cursor: pointer;
    grid-column: 1;
    justify-self: start;
}
.camera-secondary.hidden,
.camera-send.hidden,
.camera-shutter.hidden { display: none !important; }

.msg-media-inner--audio {
    min-width: 220px;
    padding: 8px;
}
.msg-audio-card {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e9edef;
    margin-bottom: 6px;
}
.msg-audio-card i { color: #00a884; font-size: 20px; }
.msg-audio-name {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.msg-audio-player { width: 100%; max-width: 280px; height: 36px; }
.msg-media-document { position: relative; }
.msg-media-document .msg-document-card {
    position: relative;
    min-width: 200px;
}
.msg-media-document .msg-media-upload-overlay {
    border-radius: 8px;
}
.msg-doc-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #7f66ff;
}

.attach-btn {
    background: none;
    border: none;
    color: #aebac1;
    font-size: 22px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 0;
}
.attach-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.attach-modal[hidden] { display: none !important; }
.attach-modal-card {
    background: #222e35;
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    color: #e9edef;
}
.attach-modal-card h3 { margin-bottom: 14px; font-weight: 500; }
.attach-modal-tall { max-width: 480px; }
.attach-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}
.attach-preview-body { margin: 12px 0; text-align: center; }
.attach-preview-img { max-width: 100%; max-height: 240px; border-radius: 8px; }
.attach-preview-video { max-width: 100%; max-height: 240px; border-radius: 8px; }
.attach-upload-progress {
    height: 4px;
    background: #2a3942;
    border-radius: 2px;
    margin-top: 12px;
    overflow: hidden;
}
.attach-upload-bar {
    height: 100%;
    width: 0;
    background: #00a884;
    transition: width 0.2s ease;
}
.attach-contact-list { max-height: 280px; overflow-y: auto; margin: 12px 0; }
.attach-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid #2f3b43;
    cursor: pointer;
}
.attach-contact-row img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.attach-contact-row strong { display: block; font-size: 14px; }
.attach-contact-row span { font-size: 12px; color: #8696a0; }
.attach-hint { color: #8696a0; font-size: 13px; margin: 8px 0; }
.attach-location-options { display: flex; flex-direction: column; gap: 10px; }
.attach-secondary { background: #2a3942 !important; color: #e9edef !important; }
.attach-link-preview { margin: 10px 0; font-size: 13px; color: #8696a0; }
.attach-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 8px; }

.msg-attachment-card {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 6px;
    text-decoration: none;
    color: inherit;
    display: block;
}
.msg-contact-row { display: flex; gap: 10px; align-items: center; }
.msg-contact-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.msg-contact-avatar.placeholder {
    background: #00a884;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
}
.msg-location-card { display: flex; gap: 10px; align-items: center; }
.msg-location-map {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #00a884;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #111;
}
.msg-link-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: min(var(--msg-media-max-width), 100%);
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}

.msg-link-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: var(--msg-media-aspect-ratio);
    min-height: var(--msg-media-min-height);
    max-height: var(--msg-media-max-height);
    object-fit: cover;
    border-radius: 0;
    display: block;
}

.msg-link-body {
    padding: 8px 10px;
    background: #182229;
}

.msg-link-body p { font-size: 12px; color: #8696a0; margin: 4px 0; }
.msg-link-url { font-size: 11px; color: #53bdeb; display: block; word-break: break-all; }

.msg-text {
    margin: 0;
    font-size: 14.2px;
    line-height: 1.45;
    word-break: break-word;
}

.msg-text-link {
    color: #53bdeb;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    word-break: break-all;
}

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

.message.sent .msg-text-link { color: #90caf9; }

.msg-media-social {
    width: min(var(--msg-media-max-width), 100%);
    max-width: 100%;
    margin: 0 0 4px;
    background: transparent;
}

.message.sent:has(.msg-social-video),
.message.sent.message-media-bubble-wrap:has(.msg-social-video) {
    background: transparent !important;
    box-shadow: none;
}

.message.sent .msg-social-video,
.message.sent .msg-media-social {
    background: transparent;
}

.msg-media-social .msg-social-video-thumb {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.msg-media-social .msg-social-video-thumb--placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: #8696a0;
    background: linear-gradient(145deg, #1a242b, #111b21);
    border-radius: 8px;
}

.msg-media-social .msg-social-video-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 3;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(11, 20, 26, 0.72);
    color: #e9edef;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
}

.msg-media-social .msg-social-embed {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.msg-media-social .msg-social-embed.hidden { display: none; }

.msg-media-inner--social.is-playing .msg-social-video-thumb,
.msg-media-inner--social.is-playing .msg-social-video-thumb--placeholder,
.msg-media-inner--social.is-playing .msg-social-video-badge,
.msg-media-inner--social.is-playing .msg-video-play {
    display: none;
}

.msg-media-inner--social.is-playing .msg-social-embed {
    display: block;
}

.msg-social-video-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}

.msg-social-video-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 4px 2px;
    font-size: 13px;
    font-weight: 600;
    color: #53bdeb;
    text-decoration: none;
    background: transparent;
    border-top: none;
}

.message.sent .msg-social-video-open {
    color: #90caf9;
}

.msg-social-video-open:hover {
    text-decoration: underline;
    background: transparent;
}

.message.message-media-bubble-wrap .msg-text {
    margin-top: 4px;
    padding: 0 2px;
}

.msg-document-card { display: flex; gap: 12px; align-items: center; }
.msg-document-card i { font-size: 28px; color: #53bdeb; }
.msg-poll-card .msg-poll-option {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid #2f3b43;
    background: #2a3942;
    color: #e9edef;
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.msg-poll-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 168, 132, 0.25);
    z-index: 0;
}
.msg-poll-option span, .msg-poll-option em { position: relative; z-index: 1; }
.msg-poll-option em { float: right; font-style: normal; font-size: 11px; }

html[data-theme="light"] .attachment-sheet-panel { background: #f0f2f5; }

html[data-theme="light"] .attachment-sheet-header {
    border-bottom-color: #d1d7db;
}

html[data-theme="light"] .attachment-sheet-close-btn {
    color: #667781;
}

html[data-theme="light"] .attachment-sheet-close-btn:hover {
    color: #111b21;
    background: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .attachment-item { color: #111b21; }
html[data-theme="light"] .attach-modal-card { background: #fff; color: #111b21; }

/* Unified media picker — pad-top above input */
.picker.pad-top {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(70px + env(safe-area-inset-bottom));
    max-width: 480px;
    margin: 0 auto;
    max-height: min(360px, 48vh);
    z-index: 130;
    background: #202c33;
    border-radius: 14px 14px 0 0;
    border: 1px solid #2f3b43;
    border-bottom: none;
    box-shadow: 0 -10px 28px rgba(0,0,0,0.38);
    overflow: hidden;
    flex-direction: column;
}

.picker.pad-top.open {
    display: flex;
}

body.app-shell:has(.chat-layout.has-chat) .picker.pad-top {
    bottom: calc(70px + env(safe-area-inset-bottom));
}

.picker-header.pad-top {
    padding: 0;
    border-bottom: 1px solid #2f3b43;
    flex-shrink: 0;
    background: #1a242b;
}

.picker-header-row {
    display: flex;
    align-items: stretch;
    min-height: 48px;
}

.picker-close-btn {
    flex-shrink: 0;
    width: 48px;
    min-width: 48px;
    border: none;
    border-left: 1px solid #2f3b43;
    background: transparent;
    color: #8696a0;
    font-size: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.picker-close-btn:hover {
    color: #e9edef;
    background: rgba(255, 255, 255, 0.06);
}

.picker-main-tabs {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 0;
    padding: 0;
    overflow: visible;
}

.picker-main-tabs .picker-tab {
    flex: 1;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #8696a0;
    padding: 12px 8px;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.picker-main-tabs .picker-tab .gif-label {
    font-size: 12px;
    font-weight: 700;
    color: inherit;
}

.picker-main-tabs .picker-tab.active {
    color: #00a884;
    background: transparent;
    border-bottom-color: #00a884;
    font-weight: 600;
}

.picker-main-tabs .picker-tab:hover {
    color: #e9edef;
    background: rgba(255,255,255,0.04);
}

.picker-body .picker-panel[x-show] {
    flex: 1;
    min-height: 0;
}

.picker-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.picker-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.picker-panel emoji-picker,
.picker-panel #emoji-picker {
    width: 100%;
    min-width: 100%;
    flex: 1;
    min-height: 280px;
    height: min(340px, calc(52vh - 96px));
    max-height: min(360px, calc(52vh - 96px));
    --background: #202c33;
    --border-color: transparent;
    --num-columns: 8;
    display: block;
}

.picker-open-btn.active,
#emoji-toggle.active {
    color: #00a884;
}

.picker-panel-emoji {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.messages-scroll-anchor {
    width: 100%;
    height: 1px;
    flex-shrink: 0;
    pointer-events: none;
}

.picker-subheader {
    padding: 10px 12px 0;
    flex-shrink: 0;
}

.picker-category-tabs {
    padding: 8px 12px;
}

[x-cloak] { display: none !important; }

.picker-header {
    padding: 10px 12px 0;
    flex-shrink: 0;
}

.picker-search {
    width: 100%;
    height: 38px;
    border: none;
    border-radius: 8px;
    background: #2a3942;
    color: #e9edef;
    padding: 0 12px;
    font-size: 14px;
}

.picker-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 12px;
    flex-shrink: 0;
}

.picker-tab {
    border: none;
    background: #2a3942;
    color: #8696a0;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.picker-tab.active {
    background: #00a884;
    color: #111;
    font-weight: 600;
}

.picker-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0 12px 12px;
}

.picker-sticker-btn,
.picker-gif-btn {
    border: none;
    background: transparent;
    padding: 4px;
    border-radius: 8px;
    cursor: pointer;
    aspect-ratio: 1;
}

.picker-sticker-btn:hover,
.picker-gif-btn:hover {
    background: rgba(255,255,255,0.06);
}

.picker-sticker-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.picker-gif-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.picker-empty,
.picker-loading-more {
    grid-column: 1 / -1;
    text-align: center;
    color: #8696a0;
    font-size: 13px;
    padding: 16px;
}

.gif-label {
    font-size: 11px;
    font-weight: 700;
    color: #8696a0;
    letter-spacing: 0.02em;
}

.msg-sticker {
    width: 160px;
    max-width: 70vw;
    height: auto;
    display: block;
    background: transparent;
}

.msg-gif {
    max-width: 280px;
    width: 100%;
    border-radius: 8px;
    display: block;
}

.message.message-media-only {
    background: transparent !important;
    box-shadow: none;
    padding: 4px 0;
    max-width: none;
}

.message.message-media-only .msg-meta {
    margin-top: 4px;
}

.message.message-media-only.message-media-bubble-wrap {
    max-width: calc(var(--msg-media-max-width) + 6px);
    padding: 3px;
}

.message.message-media-only.message-media-bubble-wrap .msg-meta {
    margin-top: 0;
}

.admin-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.admin-btn {
    background: #00a884;
    color: #111;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

.admin-filter-form,
.admin-bulk-form {
    background: #202c33;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.admin-bulk-form {
    flex-direction: column;
    align-items: stretch;
}

.admin-bulk-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.admin-sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.admin-sticker-card {
    background: #202c33;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.admin-sticker-card img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-bottom: 8px;
}

.admin-sticker-meta span {
    display: block;
    color: #8696a0;
    font-size: 12px;
}

.admin-sticker-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 13px;
}

.admin-sticker-actions a,
.admin-sticker-actions button.link-danger {
    background: none;
    border: none;
    color: #00a884;
    cursor: pointer;
}

.admin-sticker-actions .link-danger {
    color: #e74c3c;
}

.admin-form-card {
    background: #202c33;
    padding: 20px;
    border-radius: 8px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-form-card label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.admin-form-card input,
.admin-form-card select {
    height: 40px;
    border-radius: 6px;
    border: 1px solid #2f3b43;
    background: #111b21;
    color: #e9edef;
    padding: 0 10px;
}

.admin-sticker-preview img {
    width: 128px;
    height: 128px;
    object-fit: contain;
}

.field-error {
    color: #e74c3c;
    font-size: 12px;
}

html[data-theme="light"] .picker.pad-top {
    background: #fff;
    border-color: #ddd;
}

html[data-theme="light"] .picker-close-btn {
    border-left-color: #d1d7db;
    color: #667781;
}

html[data-theme="light"] .picker-close-btn:hover {
    color: #111b21;
    background: #f0f2f5;
}

html[data-theme="light"] .picker-header.pad-top {
    background: #f0f2f5;
}

html[data-theme="light"] .picker-search,
html[data-theme="light"] .picker-tab {
    background: #f0f2f5;
    color: #111;
}

html[data-theme="light"] .picker-tab.active {
    background: #00a884;
    color: #111;
}

html[data-theme="light"] .picker-main-tabs .picker-tab.active {
    background: transparent;
    color: #00a884;
    border-bottom-color: #00a884;
}

@media (max-width: 768px) {
    .picker-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gif-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .message-input {
        gap: 8px;
        padding: 8px var(--composer-pad-x, 18px);
    }

    .chat-area {
        --composer-pad-x: 18px;
    }
}

.attach-btn { cursor: pointer; color: #aebac1; font-size: 22px; display: inline-flex; align-items: center; }
.media-viewer[hidden] { display: none !important; }
.media-viewer:not([hidden]) {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.96);
    z-index: 300;
    display: flex;
    flex-direction: column;
}

.viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    color: #fff;
    z-index: 2;
}

.viewer-toolbar-actions { display: none; }

.viewer-tool-btn,
.viewer-nav {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.viewer-tool-btn:hover,
.viewer-nav:hover { background: rgba(255, 255, 255, 0.22); }

.viewer-counter { font-size: 14px; opacity: 0.85; }

.viewer-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    position: relative;
}

.viewer-content {
    transition: transform 0.08s ease-out;
    will-change: transform;
}

.viewer-content img,
.viewer-content video {
    max-width: min(92vw, 1200px);
    max-height: calc(100vh - 120px);
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.viewer-content video { background: #000; }

.viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.viewer-prev { left: 12px; }
.viewer-next { right: 12px; }

body.viewer-open { overflow: hidden; }

@media (max-width: 768px) {
    .viewer-nav { width: 36px; height: 36px; }
    .viewer-prev { left: 6px; }
    .viewer-next { right: 6px; }
}
/* Main nav: bottom bar on mobile, WhatsApp-style left rail on desktop */
.app-nav-rail.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #202c33;
    border-top: 1px solid #2f3b43;
    z-index: 50;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    height: calc(56px + env(safe-area-inset-bottom));
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
}

.app-nav-rail .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #8696a0;
    text-decoration: none;
    font-size: 11px;
    position: relative;
    transition: color 0.15s ease, background 0.15s ease;
}

.app-nav-rail .nav-item:hover {
    color: #e9edef;
}

.app-nav-rail .nav-item i {
    font-size: 18px;
}

.app-nav-rail .nav-item.active {
    color: #00a884;
}

.app-nav-spacer {
    display: none;
}

.admin-panel { padding: 24px; color: #e9edef; background: #111b21; min-height: 100vh; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.admin-header a { color: #00a884; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card { background: #202c33; padding: 20px; border-radius: 8px; text-align: center; }
.stat-value { display: block; font-size: 28px; font-weight: 600; color: #00a884; }
.stat-label { font-size: 13px; color: #8696a0; }
.admin-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.admin-panel table { width: 100%; border-collapse: collapse; }
.admin-panel th, .admin-panel td { padding: 10px; text-align: left; border-bottom: 1px solid #2f3b43; }
.admin-nav a { display: block; padding: 12px; background: #202c33; margin-bottom: 8px; border-radius: 6px; color: #00a884; text-decoration: none; }

@media (max-width: 768px) {
    body.app-shell {
        flex-direction: column;
    }

    .app-nav-rail.mobile-bottom-nav {
        display: flex;
        order: 2;
        flex-shrink: 0;
    }

    .app-main {
        order: 1;
        flex: 1;
        min-height: 0;
    }

    .chat-layout {
        height: calc(100dvh - 56px - env(safe-area-inset-bottom));
    }

    body.app-shell:has(.chat-layout.has-chat) .app-nav-rail.mobile-bottom-nav {
        display: none !important;
    }

    body.app-shell:has(.chat-layout.has-chat) .chat-layout {
        height: 100dvh;
    }

    .chat-layout.has-chat .message-input {
        min-height: calc(70px + env(safe-area-inset-bottom));
        height: auto;
        padding-top: 8px;
        padding-left: var(--composer-pad-x, 18px);
        padding-right: var(--composer-pad-x, 18px);
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .sidebar {
        width: 100%;
        flex: 1;
    }

    .chat-layout:not(.has-chat) .chat-area {
        display: none;
    }

    .chat-layout.has-chat .sidebar {
        display: none;
    }

    .chat-layout.has-chat .chat-area {
        display: flex;
        width: 100%;
    }

    .mobile-new-chat-btn {
        display: inline-flex;
    }

    .mobile-new-chat-sheet:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 400;
    }

    .mobile-new-chat-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
    }

    .mobile-new-chat-panel {
        position: absolute;
        inset: 0;
        background: #111b21;
        display: flex;
        flex-direction: column;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-new-chat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 60px;
        padding: 10px 12px 10px 16px;
        background: #202c33;
        border-bottom: 1px solid #2f3b43;
    }

    .mobile-new-chat-header h2 {
        margin: 0;
        color: #e9edef;
        font-size: 18px;
        font-weight: 500;
    }

    .mobile-new-chat-search {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 10px 12px;
        padding: 8px 12px;
        background: #202c33;
        border-radius: 8px;
    }

    .mobile-new-chat-search i {
        color: #8696a0;
        font-size: 14px;
    }

    .mobile-new-chat-search input {
        flex: 1;
        min-width: 0;
        border: none;
        background: transparent;
        color: #e9edef;
        font-size: 15px;
        outline: none;
    }

    .mobile-new-chat-search input::placeholder {
        color: #8696a0;
    }

    .mobile-new-chat-list {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 0 8px 12px;
    }

    .mobile-new-chat-user {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 10px;
        color: #e9edef;
        text-decoration: none;
        border-radius: 8px;
    }

    .mobile-new-chat-user:hover,
    .mobile-new-chat-user:active {
        background: #2a3942;
    }

    .mobile-new-chat-user img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    .mobile-new-chat-user span {
        font-size: 16px;
        font-weight: 500;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-new-chat-empty {
        color: #8696a0;
        text-align: center;
        padding: 24px 16px;
        font-size: 14px;
    }

    .back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .admin-grid { grid-template-columns: 1fr; }
}

@media (min-width: 769px) {
    body.app-shell {
        flex-direction: row;
        align-items: stretch;
    }

    .app-nav-rail.mobile-bottom-nav {
        display: flex !important;
        flex-direction: column;
        order: 0;
        position: sticky;
        top: 0;
        left: 0;
        bottom: auto;
        right: auto;
        width: 72px;
        min-width: 72px;
        height: 100dvh;
        max-height: 100vh;
        padding: 16px 0 20px;
        border-top: none;
        border-right: 1px solid #2f3b43;
        background: #111b21;
        justify-content: flex-start;
        gap: 2px;
        flex-shrink: 0;
        z-index: 100;
    }

    .app-nav-rail .app-nav-spacer {
        display: block;
        flex: 1;
        min-height: 12px;
    }

    .app-nav-rail .nav-item {
        flex: 0 0 auto;
        width: 100%;
        padding: 14px 0;
        border-radius: 0;
    }

    .app-nav-rail .nav-item span {
        display: none;
    }

    .app-nav-rail .nav-item i {
        font-size: 22px;
    }

    .app-nav-rail .nav-item.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 28px;
        background: #00a884;
        border-radius: 0 4px 4px 0;
    }

    .app-nav-rail .nav-item-settings {
        margin-top: auto;
    }

    .app-nav-rail .nav-item-home {
        margin-bottom: 4px;
    }

    .app-main {
        order: 1;
        flex: 1;
        min-width: 0;
        height: 100dvh;
        max-height: 100vh;
    }

    .chat-layout:not(.has-chat) .chat-area {
        display: flex;
    }

    .chat-layout:not(.has-chat) .empty-chat-header,
    .chat-layout:not(.has-chat) .chat-header {
        display: flex;
    }

    /* Chat list + rail = WhatsApp Web three-column feel */
    .chat-layout {
        height: 100%;
    }

    .sidebar {
        width: 400px;
        max-width: 40vw;
    }
}

body.app-shell:has(.admin-panel),
body.app-shell:has(.profile-page),
body.app-shell:has(.settings-page) {
    overflow: auto;
}

.app-main:has(.admin-panel),
.app-main:has(.profile-page),
.app-main:has(.settings-page) {
    overflow: auto;
}

.profile-page .profile-card {
    background: #222e35;
    color: #e9edef;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.profile-page h2,
.profile-page h3 {
    color: #e9edef;
}

.profile-page p,
.profile-page label {
    color: #8696a0;
}

.profile-page input[type="text"],
.profile-page input[type="email"],
.profile-page input[type="password"],
.profile-page input[type="file"] {
    background: #2a3942;
    border: 1px solid #2f3b43;
    color: #e9edef;
    border-radius: 4px;
}

.profile-page button,
.profile-page .btn-primary {
    background: #00a884;
    color: #111b21;
}

.profile-page {
    padding: 0 0 88px;
    color: var(--text-primary, #e9edef);
    height: 100%;
    overflow-y: auto;
    max-width: 720px;
    margin: 0;
    background: var(--bg-primary, #111b21);
}

.profile-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    background: var(--bg-secondary, #202c33);
    position: sticky;
    top: 0;
    z-index: 10;
}

.profile-page-header-start {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.profile-page-header h1 {
    font-size: 22px;
    font-weight: 500;
}

.profile-page-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

[data-theme="light"] .profile-page {
    --text-primary: #111b21;
    --bg-primary: #fff;
    --bg-secondary: #f0f2f5;
}

/* Status, groups, modals */
.status-page,
.groups-page {
    padding: 16px;
    color: #e9edef;
    overflow-y: auto;
    height: 100%;
    max-width: 720px;
    margin: 0 auto;
}

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

.page-header h1 {
    font-size: 22px;
    font-weight: 500;
}

.back-link {
    color: #aebac1;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
}

.back-link:hover {
    background: #2a3942;
}

.status-section,
.groups-list,
.groups-create {
    margin-bottom: 28px;
}

.status-section h2,
.groups-list h2,
.groups-create h2 {
    font-size: 14px;
    color: #8696a0;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-compose {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.status-compose textarea,
.group-form .auth-input {
    width: 100%;
    background: #2a3942;
    border: 1px solid #2f3b43;
    border-radius: 8px;
    color: #e9edef;
    padding: 12px;
}

.status-compose-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.status-card {
    background: var(--status-bg, #202c33);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 10px;
}

.status-card p {
    margin-bottom: 10px;
    line-height: 1.5;
}

.status-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #8696a0;
}

.status-user-block {
    margin-bottom: 16px;
}

.status-user-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.status-user-head img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.text-btn {
    background: none;
    border: none;
    color: #00a884;
    cursor: pointer;
    font-size: 13px;
}

.empty-note,
.empty-list-note {
    color: #8696a0;
    font-size: 14px;
    padding: 12px 0;
}

.group-card {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #202c33;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
}

.group-avatar,
.avatar-wrap.group-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #00a884;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.group-desc {
    color: #8696a0;
    font-size: 13px;
    margin-top: 4px;
}

.group-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-overlay,
.call-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay[hidden],
.call-overlay[hidden] {
    display: none !important;
}

.modal-card,
.call-card {
    background: #222e35;
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.modal-card h3,
.call-card h3 {
    margin-bottom: 16px;
}

.modal-card select,
.modal-card textarea {
    margin-bottom: 12px;
}

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

.call-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #00a884;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    margin: 0 auto 16px;
}

.call-end-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: #e74c3c;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin-top: 20px;
}

#voice-record-btn.recording {
    color: #e74c3c !important;
}

.flash-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #00a884;
    color: #111;
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    z-index: 500;
    transition: opacity 0.3s;
}

.flash-toast.hide {
    opacity: 0;
    pointer-events: none;
}

body.app-shell:has(.status-page),
body.app-shell:has(.groups-page),
body.app-shell:has(.calls-page) {
    overflow: auto;
}

.app-main:has(.status-page),
.app-main:has(.groups-page),
.app-main:has(.calls-page) {
    overflow: auto;
}

/* Calls page */
.calls-page {
    padding: 12px 16px 80px;
    color: #e9edef;
    max-width: 720px;
    margin: 0 auto;
}

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

.calls-page-header-start {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.calls-page-header h1 {
    font-size: 22px;
    font-weight: 500;
}

.new-call-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #00a884;
    color: #111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.calls-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 20px;
    padding-bottom: 4px;
}

.calls-filter {
    padding: 8px 14px;
    border-radius: 20px;
    background: #202c33;
    color: #8696a0;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}

.calls-filter.active {
    background: #00a884;
    color: #111;
    font-weight: 600;
}

.quick-call-section h2,
.calls-history h2 {
    font-size: 13px;
    color: #8696a0;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.quick-call-item,
.call-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #2f3b43;
}

.quick-call-item img,
.call-history-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.quick-call-item span,
.call-history-info strong {
    flex: 1;
    min-width: 0;
}

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

.call-history-meta {
    display: block;
    font-size: 12px;
    color: #8696a0;
    margin-top: 4px;
}

.missed-icon {
    color: #e74c3c;
}

.quick-call-actions,
.call-history-actions {
    display: flex;
    gap: 8px;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #202c33;
    color: #00a884;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-btn.video {
    color: #53bdeb;
}

.calls-page-header-actions {
    display: flex;
    gap: 8px;
}

.calls-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #202c33;
    color: #e9edef;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.calls-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #202c33;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.calls-search-wrap input {
    flex: 1;
    border: none;
    background: transparent;
    color: #e9edef;
    font-size: 15px;
    outline: none;
}

.calls-search-wrap i {
    color: #8696a0;
}

.missed-name {
    color: #e74c3c;
}

.call-history-item.missed .call-history-info strong {
    color: #e74c3c;
}

.calls-favorites-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.calls-favorite-chip {
    flex: 0 0 auto;
    text-align: center;
    width: 72px;
}

.calls-favorite-chip img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.calls-favorite-chip span {
    display: block;
    font-size: 11px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calls-fab-wrap {
    position: fixed;
    right: 20px;
    bottom: 88px;
    z-index: 40;
}

.calls-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #00a884;
    color: #111;
    border: none;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

.calls-fab-menu {
    position: absolute;
    bottom: 64px;
    right: 0;
    background: #233138;
    border-radius: 12px;
    padding: 8px 0;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.calls-fab-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    color: #e9edef;
    font-size: 15px;
    cursor: pointer;
    text-align: left;
}

.calls-fab-item:hover {
    background: #2a3942;
}

.calls-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
}

.calls-modal[hidden] {
    display: none !important;
}

.calls-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

.calls-modal-card {
    position: relative;
    width: 100%;
    max-height: 80vh;
    background: #111b21;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    z-index: 1;
}

.calls-modal-card header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #2f3b43;
}

.calls-modal-card header h3 {
    font-size: 18px;
    font-weight: 500;
}

.calls-modal-card header button {
    background: none;
    border: none;
    color: #8696a0;
    font-size: 20px;
    cursor: pointer;
}

.calls-modal-search {
    width: calc(100% - 32px);
    margin: 12px 16px;
    padding: 10px 14px;
    border-radius: 8px;
    border: none;
    background: #202c33;
    color: #e9edef;
}

.calls-contact-list {
    list-style: none;
    max-height: 50vh;
    overflow-y: auto;
    padding: 0 16px 24px;
}

.calls-contact-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #2f3b43;
}

.calls-contact-list li img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.calls-contact-list li span {
    flex: 1;
}

.calls-delete-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #8696a0;
    cursor: pointer;
}

.calls-fav-toggle {
    background: none;
    border: none;
    color: #8696a0;
    cursor: pointer;
}

.calls-fav-toggle.favorited {
    color: #f1c40f;
}

.calls-empty {
    text-align: center;
    padding: 40px 20px;
}

.call-settings-form .call-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

[data-theme="dark"] .call-setting-row {
    border-color: #2f3b43;
    color: #e9edef;
}

.call-setting-field {
    margin: 12px 0;
}

.call-setting-field select {
    width: 100%;
    margin-top: 6px;
    padding: 8px;
    border-radius: 8px;
}

.call-settings-save {
    margin-top: 16px;
    padding: 10px 20px;
    background: #00a884;
    color: #111;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.call-network-quality {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 4;
    color: #00a884;
    font-size: 12px;
    letter-spacing: 2px;
}

.call-network-quality[data-level="poor"] {
    color: #e74c3c;
}

.call-active-controls {
    flex-wrap: wrap;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.call-action-secondary {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
}

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

.hidden-video {
    opacity: 0.3;
}

.call-participants-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    z-index: 1;
    padding: 8px;
}

[data-theme="light"] .calls-page {
    color: #111b21;
}

[data-theme="light"] .calls-filter {
    background: #f0f2f5;
}

[data-theme="light"] .quick-call-item,
[data-theme="light"] .call-history-item {
    border-color: #e9edef;
}

/* WebRTC call overlay */
.call-overlay {
    position: fixed;
    inset: 0;
    background: #0b141a;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.call-overlay[hidden] {
    display: none !important;
}

.call-remote-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #111;
}

#remote-audio {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.call-local-video {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 120px;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid #2f3b43;
    z-index: 2;
    background: #202c33;
}

.call-ui-panel {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    text-align: center;
}

.call-overlay.video-call .call-ui-panel {
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

.call-incoming-actions,
.call-active-controls {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
}

.call-action-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.call-action-btn.accept {
    background: #00a884;
}

.call-action-btn.reject {
    background: #e74c3c;
}

.call-action-btn:not(.accept):not(.reject) {
    background: rgba(255,255,255,0.15);
}

.call-action-btn.active {
    background: #e74c3c;
}

@media (max-width: 768px) {
    .app-nav-rail .nav-item span {
        font-size: 10px;
    }

    .app-nav-rail .nav-item i {
        font-size: 16px;
    }
}

[x-cloak] {
    display: none !important;
}

/* WhatsApp Updates / Status */
.updates-page {
    padding: 0 0 88px;
    color: var(--text-primary, #e9edef);
    height: 100%;
    overflow-y: auto;
    max-width: 720px;
    margin: 0;
    background: var(--bg-primary, #111b21);
}

[data-theme="light"] .updates-page {
    --text-primary: #111b21;
    --bg-primary: #fff;
    --bg-secondary: #f0f2f5;
    --border-color: #e9edef;
}

.updates-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    background: var(--bg-secondary, #202c33);
    position: sticky;
    top: 0;
    z-index: 10;
}

.updates-header-start {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.updates-header h1 {
    font-size: 22px;
    font-weight: 500;
}

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

.updates-section {
    padding: 8px 0;
    border-bottom: 1px solid rgba(134, 150, 160, 0.15);
}

.updates-status-rings {
    padding: 0;
    border-bottom: 1px solid rgba(134, 150, 160, 0.15);
}

.updates-follow-section {
    padding: 8px 0 0;
    border-top: 1px solid rgba(134, 150, 160, 0.15);
}

.updates-search-wrap {
    padding: 10px 16px 6px;
    background: var(--bg-primary, #111b21);
    border-bottom: 1px solid rgba(134, 150, 160, 0.15);
}

.updates-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.updates-search-box i.fa-magnifying-glass {
    position: absolute;
    left: 14px;
    color: #8696a0;
    font-size: 14px;
    pointer-events: none;
}

.updates-search-box input {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: #202c33;
    color: #e9edef;
    padding: 0 40px 0 40px;
    font-size: 14px;
    outline: none;
}

.updates-search-box input::placeholder {
    color: #8696a0;
}

.updates-search-clear {
    position: absolute;
    right: 6px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8696a0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.updates-search-clear:hover {
    color: #e9edef;
    background: rgba(255, 255, 255, 0.06);
}

.updates-search-empty {
    padding: 8px 20px 0;
}

.updates-section-title {
    font-size: 14px;
    color: #8696a0;
    padding: 8px 20px 4px;
    font-weight: 500;
}

.updates-collapsed-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    padding: 8px 20px;
    cursor: pointer;
}

.updates-status-heading {
    padding-top: 4px;
    padding-bottom: 0;
}

.status-rings-scroll {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 14px 16px 18px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.status-rings-scroll::-webkit-scrollbar {
    display: none;
}

.status-ring-chip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 76px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    scroll-snap-align: start;
    color: inherit;
}

.status-rings-scroll .status-ring-chip {
    width: 108px;
    gap: 6px;
}

.status-rings-scroll .status-wa-card-visual {
    --wa-ring-size: 56px;
    --wa-ring-top: 10px;
    --wa-avatar-size: 44px;
    width: 108px;
    height: 176px;
    border-radius: 14px;
    overflow: hidden;
    background: #0b141a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.status-rings-scroll .status-wa-card-visual .status-ring-wrap {
    width: 100%;
    height: 100%;
}

.status-rings-scroll .status-wa-card-visual .status-ring-preview {
    border-radius: 0;
    position: absolute;
    inset: 0;
    z-index: 0;
}

.status-rings-scroll .status-wa-card-visual .status-ring-preview-text {
    font-size: 11px;
    padding: 28px 10px 10px;
}

.status-rings-scroll .status-wa-card-visual .status-ring-preview-audio {
    font-size: 28px;
}

.status-rings-scroll .status-wa-card-visual .status-ring-inner {
    inset: 0;
    border-radius: 0;
    background: transparent;
    z-index: 0;
}

.status-rings-scroll .status-wa-card-visual .status-ring-inner--empty {
    background: #111b21;
}

.status-rings-scroll .status-wa-card-visual .status-ring-segments {
    top: var(--wa-ring-top);
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    width: var(--wa-ring-size);
    height: var(--wa-ring-size);
    z-index: 3;
}

.status-rings-scroll .status-wa-card-visual .status-ring-avatar--top {
    top: calc(var(--wa-ring-top) + (var(--wa-ring-size) / 2));
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: var(--wa-avatar-size);
    height: var(--wa-avatar-size);
    border: 2px solid #0b141a;
    z-index: 4;
}

.status-rings-scroll .status-wa-card-visual .status-ring-avatar--solo {
    width: 72px;
    height: 72px;
    border: none;
}

.status-rings-scroll .status-ring-chip--mine .status-add-badge {
    bottom: auto;
    top: calc(var(--wa-ring-top) + var(--wa-ring-size) - 4px);
    left: calc(50% + (var(--wa-avatar-size) / 2) - 14px);
    right: auto;
    z-index: 5;
}

.status-rings-scroll .status-ring-chip-label {
    max-width: 108px;
}

.status-ring-chip-meta {
    font-size: 11px;
    line-height: 1.2;
    color: #8696a0;
    text-align: center;
    width: 100%;
    max-width: 108px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-ring-unread-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #25d366;
    color: #0b141a;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.status-rings-scroll .status-wa-card-visual .status-ring-wrap {
    position: relative;
}

.status-ring-chip:focus-visible {
    outline: 2px solid #00a884;
    outline-offset: 2px;
    border-radius: 8px;
}

.status-ring-chip .status-ring-wrap {
    width: 64px;
    height: 64px;
}

.status-ring-chip-label {
    font-size: 12px;
    line-height: 1.2;
    color: #e9edef;
    text-align: center;
    width: 100%;
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-add-badge.status-add-more {
    background: #00a884;
    cursor: pointer;
}

.status-ring-row,
.status-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.15s;
}

.status-list-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.status-ring-chip-visual {
    position: relative;
    width: 64px;
    height: 64px;
}

.status-ring-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    background: transparent;
    padding: 0;
}

.status-ring-segments {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
}

.status-ring-segments path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke 0.2s ease;
}

.status-ring-inner {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    overflow: hidden;
    background: #2a3942;
    z-index: 1;
}

.status-ring-inner--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-ring-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: #2a3942;
}

.status-ring-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.status-ring-preview-video {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 18px;
    pointer-events: none;
}

.status-ring-preview-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 8px;
    line-height: 1.15;
    text-align: center;
    padding: 6px;
    word-break: break-word;
}

.status-ring-preview-audio {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1f2c34, #128c7e);
    color: #fff;
    font-size: 18px;
}

.status-ring-avatar--top {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center center;
    border: 2px solid rgba(17, 27, 33, 0.9);
    z-index: 4;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.status-ring-avatar {
    border-radius: 50%;
    object-fit: cover;
}

.status-ring-wrap > .status-ring-avatar {
    position: absolute;
    inset: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    display: block;
    z-index: 1;
}

.status-ring-wrap > .status-ring-segments {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

.status-ring-chip .status-ring-wrap,
.status-list-item .status-ring-wrap {
    border-radius: 50%;
    overflow: visible;
}

.status-ring-segments path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke 0.2s ease;
}

.updates-follow-user-link .status-ring-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.status-ring-avatar--solo {
    position: static;
    width: 100%;
    height: 100%;
    border: 3px solid var(--bg-primary, #111b21);
    box-shadow: none;
}

.status-add-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 22px;
    height: 22px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    border: 2px solid var(--bg-primary, #111b21);
    z-index: 5;
}

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

.status-ring-info strong,
.status-list-info strong {
    display: block;
    font-size: 16px;
    font-weight: 500;
}

.status-ring-sub,
.status-list-info span {
    font-size: 13px;
    color: #8696a0;
}

.status-compose-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #8696a0;
    cursor: pointer;
}

.status-list-menu {
    position: relative;
}

.status-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    background: #233138;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 20;
    min-width: 140px;
    overflow: hidden;
}

.status-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    background: none;
    border: none;
    color: #e9edef;
    cursor: pointer;
}

.status-dropdown button:hover {
    background: #182229;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #aebac1;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

.icon-btn.light {
    color: #fff;
}

.updates-empty {
    padding: 24px 20px;
}

/* Create modal */
.status-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.status-modal {
    background: #111b21;
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
}

.status-modal.small {
    max-height: 70vh;
    padding: 20px;
}

.status-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #2a3942;
}

.status-modal-header h3 {
    font-size: 16px;
    font-weight: 500;
}

.status-post-btn {
    background: #00a884;
    color: #111;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
}

.status-post-btn:disabled {
    opacity: 0.5;
}

.status-type-tabs {
    display: flex;
    border-bottom: 1px solid #2a3942;
}

.status-type-tabs button {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    color: #8696a0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.status-type-tabs button.active {
    color: #00a884;
    border-bottom-color: #00a884;
}

.status-type-tabs button {
    font-size: 13px;
}

.status-audio-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px 0 4px;
}

.status-audio-record-btn {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: none;
    background: #00a884;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background 0.15s;
}

.status-audio-record-btn.recording {
    background: #ff3b30;
    animation: status-audio-pulse 1.2s ease-in-out infinite;
}

@keyframes status-audio-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.status-audio-hint {
    color: #8696a0;
    font-size: 14px;
    margin: 0;
}

.status-audio-hint.recording {
    color: #ff3b30;
    font-weight: 500;
}

.status-audio-upload-link {
    color: #00a884;
    font-size: 13px;
    cursor: pointer;
    margin-top: 4px;
}

.status-audio-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-audio-player,
.status-viewer-audio-player {
    width: 100%;
    max-width: 100%;
}

.status-viewer-audio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: min(320px, 88vw);
    padding: 24px;
}

.status-viewer-audio-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(0, 168, 132, 0.2);
    color: #00a884;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

.status-viewer-audio-caption {
    color: #e9edef;
    text-align: center;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}

.status-create-body {
    padding: 16px;
}

.status-text-preview {
    min-height: 200px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.status-text-preview textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: center;
    resize: none;
    min-height: 120px;
    outline: none;
}

.status-create-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    align-items: center;
}

.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
}

.color-swatch.active {
    border-color: #fff;
}

.status-select {
    background: #2a3942;
    border: 1px solid #3b4a54;
    color: #e9edef;
    padding: 8px 12px;
    border-radius: 8px;
}

.status-select.full {
    width: 100%;
}

.status-color-input {
    width: 40px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
}

.status-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 200px;
    border: 2px dashed #3b4a54;
    border-radius: 12px;
    color: #8696a0;
    cursor: pointer;
}

.status-upload-zone i {
    font-size: 40px;
}

.status-canvas {
    width: 100%;
    max-height: 360px;
    border-radius: 12px;
    background: #000;
    touch-action: none;
}

.status-video-preview {
    width: 100%;
    border-radius: 12px;
    max-height: 360px;
}

.status-editor-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.status-privacy-block {
    padding: 16px;
    border-top: 1px solid #2a3942;
}

.status-privacy-block label {
    display: block;
    font-size: 13px;
    color: #8696a0;
    margin-bottom: 8px;
}

.status-privacy-users {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    max-height: 120px;
    overflow-y: auto;
}

.privacy-user-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #2a3942;
    padding: 6px 10px;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
}

.forward-contact-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    background: #202c33;
    border: none;
    border-radius: 8px;
    color: #e9edef;
    margin-bottom: 8px;
    cursor: pointer;
}

.forward-contact-btn img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Full-screen viewer */
body.status-viewer-open {
    overflow: hidden;
}

body.status-viewer-open #chat-confirm-modal,
body.status-viewer-open #chat-toast-modal {
    z-index: 13000 !important;
}

.status-viewer {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: #000;
    display: none;
    flex-direction: column;
    touch-action: manipulation;
    user-select: none;
    visibility: hidden;
    pointer-events: none;
}

.status-viewer.status-viewer--open {
    display: flex;
    visibility: visible;
    pointer-events: auto;
    animation: status-viewer-in 0.2s ease-out;
}

@keyframes status-viewer-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.status-viewer.is-open.has-text-slide {
    background: var(--viewer-text-bg, #128C7E);
}

.viewer-slide-stack {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.viewer-slide-stack > .viewer-slide {
    position: absolute;
    inset: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.status-viewer-stage {
    position: absolute;
    inset: 0;
    bottom: 88px;
    z-index: 1;
    overflow: hidden;
    box-sizing: border-box;
}

.status-viewer-body {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.status-viewer-body .viewer-slide {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 1;
}

.status-viewer-body .viewer-slide.is-active {
    display: flex !important;
    z-index: 2;
}

.viewer-slide--text.is-active {
    padding: 72px 20px 24px;
}

.viewer-slide--text p {
    font-size: clamp(1.25rem, 4vw, 2rem);
    line-height: 1.45;
    text-align: center;
    word-break: break-word;
    padding: 16px;
    max-width: 100%;
}

.viewer-slide--fallback {
    color: #fff;
    font-size: 18px;
    text-align: center;
    padding: 24px;
    gap: 12px;
}

.status-fallback-icon {
    font-size: 42px;
    opacity: 0.7;
}

.status-viewer-loading {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.viewer-media,
.viewer-video-box video.viewer-media {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    min-width: 80px;
    min-height: 80px;
    object-fit: contain;
    display: block;
    background: transparent;
}

.viewer-slide--media.is-active .viewer-media,
.viewer-slide--media.is-active .viewer-video-box video.viewer-media {
    max-width: min(100%, 100vw);
    max-height: min(100%, calc(100vh - 160px));
}

.viewer-video-box {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.viewer-caption {
    color: #fff;
    text-align: center;
    padding: 10px 16px 0;
    font-size: 15px;
    max-width: 100%;
    flex-shrink: 0;
}

.status-reaction-toggle {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    cursor: pointer;
    pointer-events: auto;
}

.viewer-nav {
    pointer-events: auto;
}

.status-viewer-footer,
.status-viewer-footer * {
    pointer-events: auto;
}

.status-viewer-menu {
    z-index: 50;
}

.viewer-nav {
    position: absolute;
    top: 64px;
    bottom: 16px;
    width: 26%;
    z-index: 6;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
}

.viewer-nav--prev { left: 0; }
.viewer-nav--next { right: 0; }

.status-viewer-progress {
    display: flex;
    gap: 4px;
    padding: 8px 8px 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.progress-segment {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #fff;
    transition: width 0.05s linear;
}

.status-viewer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 12px 12px;
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
}

.viewer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.viewer-user-info {
    flex: 1;
    color: #fff;
}

.viewer-user-info strong {
    display: block;
    font-size: 15px;
}

.viewer-user-info span {
    font-size: 12px;
    opacity: 0.85;
}

.viewer-actions {
    display: flex;
    gap: 4px;
}

.status-viewer-content {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* legacy duplicate .status-viewer-body block removed — see rules above .status-viewer-stage */

.viewer-slide.is-active {
    display: flex !important;
}

.status-viewer-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    animation: status-viewer-spin 0.8s linear infinite;
}

@keyframes status-viewer-spin {
    to { transform: rotate(360deg); }
}

.viewer-tap-zone {
    position: absolute;
    top: 60px;
    bottom: 88px;
    width: 30%;
    z-index: 8;
}

.viewer-tap-zone.left {
    left: 0;
}

.viewer-tap-zone.right {
    right: 0;
}

.viewer-slide.text-slide {
    width: 100%;
    height: 100%;
    padding: 80px 24px;
    border-radius: 0;
}

.viewer-slide.text-slide p {
    color: inherit;
    font-size: clamp(1.35rem, 4vw, 2rem);
    line-height: 1.45;
    text-align: center;
    word-break: break-word;
    max-width: 100%;
}

.viewer-slide.media-slide {
    background: #000;
}

.viewer-slide.fallback-slide {
    color: #fff;
    text-align: center;
    font-size: 18px;
}

.viewer-slide p {
    font-size: 28px;
    text-align: center;
    line-height: 1.4;
    word-break: break-word;
}

/* duplicate .viewer-media removed — see status-viewer rules above */

.status-viewer-footer.is-hidden {
    display: none !important;
}

.status-viewer-footer--mine {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 60%, transparent);
    justify-content: center;
}

.status-mine-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    padding: 10px 20px;
    border: none;
    border-radius: 24px;
    background: rgba(231, 76, 60, 0.9);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.status-mine-delete-btn:hover {
    background: #e74c3c;
}

.status-viewer-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    pointer-events: auto;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 55%, rgba(0, 0, 0, 0.35) 80%, transparent);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-viewer-footer.is-focused {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 70%, rgba(0, 0, 0, 0.55) 100%);
}

.status-reactions-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 4px 4px;
}

.reaction-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(17, 27, 33, 0.55);
    font-size: 22px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.reaction-btn:hover,
.reaction-btn:focus-visible {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.18);
}

.reaction-btn.active {
    background: rgba(0, 168, 132, 0.45);
    border-color: rgba(0, 168, 132, 0.65);
    transform: scale(1.12);
}

.status-reply-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-reply-emoji-panel {
    width: 100%;
    max-height: 280px;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background: rgba(17, 27, 33, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
}

.status-reply-emoji-panel emoji-picker {
    width: 100%;
    --emoji-size: 1.35rem;
    --num-columns: 8;
    --background: #111b21;
    --border-color: transparent;
    --button-active-background: rgba(255, 255, 255, 0.12);
    --button-hover-background: rgba(255, 255, 255, 0.08);
    --category-font-color: #8696a0;
    --input-border-color: rgba(255, 255, 255, 0.12);
    --input-font-color: #e9edef;
    --input-placeholder-color: #8696a0;
    --outline-color: #00a884;
}

.status-reply-emoji-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    font-size: 22px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;
    pointer-events: auto;
}

.status-reply-emoji-btn:hover,
.status-reply-emoji-btn:focus-visible,
.status-reply-emoji-btn.active {
    color: #00a884;
    background: rgba(255, 255, 255, 0.08);
}

.status-reply-bar.whatsapp-style .status-reply-input {
    flex: 1;
}

.status-reply-emoji-btn,
.status-reaction-toggle,
.status-like-btn,
.status-reply-send.visible,
.status-viewer-footer.is-focused .status-reply-send {
    pointer-events: auto;
}

.status-like-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    font-size: 22px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
}

.status-like-btn:hover,
.status-like-btn:focus-visible {
    transform: scale(1.08);
}

.status-like-btn.active {
    color: #ff4d6d;
}

.status-reply-input {
    flex: 1;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 10px 16px;
    color: #fff;
    outline: none;
    font-size: 15px;
    pointer-events: auto;
}

.status-reply-input::placeholder {
    color: rgba(255, 255, 255, 0.72);
}

.status-reply-send {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.status-reply-send.visible,
.status-viewer-footer.is-focused .status-reply-send {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.status-reply-send.visible {
    background: var(--primary-color, #00a884);
}

.chat-status-viewer-root .status-viewer {
    z-index: 12000;
}

.msg-status-reply {
    display: block;
    width: 100%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 4px;
    text-align: left;
    cursor: pointer;
}

.message.sent .msg-status-reply {
    background: rgba(0, 0, 0, 0.08);
}

.msg-status-reply-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 4px solid var(--primary-color, #00a884);
    padding-left: 8px;
}

.msg-status-reply-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.msg-status-reply-icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(0, 168, 132, 0.15);
    color: var(--primary-color, #00a884);
    font-size: 16px;
}

.msg-status-reply-icon--video {
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 14px;
}

.msg-status-reply-text-slide {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.1;
    text-align: center;
    padding: 4px;
}

.msg-status-reply-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.msg-status-reply-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color, #00a884);
}

.msg-status-reply-snippet {
    font-size: 12px;
    color: #667781;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-status-reply-message {
    margin: 4px 0 0;
}

.msg-status-reaction-emoji {
    font-size: 28px;
    line-height: 1.2;
    margin-top: 2px;
}

.status-upload-progress {
    height: 3px;
    background: #2a3942;
    overflow: hidden;
}

.status-upload-progress-fill {
    height: 100%;
    background: #00a884;
    transition: width 0.15s linear;
}

.status-viewer-menu {
    position: absolute;
    top: 56px;
    right: 12px;
    background: #233138;
    border-radius: 8px;
    z-index: 20;
    overflow: hidden;
    min-width: 160px;
}

.status-viewer-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    background: none;
    border: none;
    color: #e9edef;
    cursor: pointer;
}

.status-viewers-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: #111b21;
    border-radius: 16px 16px 0 0;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    max-height: 55vh;
    overflow-y: auto;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}

.status-viewers-panel-handle {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    margin: 0 auto 12px;
}

.status-viewers-panel h4 {
    margin: 0 0 12px;
    color: #e9edef;
    font-size: 15px;
    font-weight: 500;
}

.viewer-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.viewer-list-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.viewer-list-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.viewer-list-meta span {
    color: #e9edef;
    font-size: 15px;
}

.viewer-list-meta small,
.viewer-list-item small {
    color: #8696a0;
    font-size: 12px;
}

.viewer-list-reaction {
    font-size: 20px;
    line-height: 1;
}

.status-reaction-float {
    position: absolute;
    left: 50%;
    bottom: 28%;
    transform: translateX(-50%);
    font-size: 72px;
    z-index: 25;
    pointer-events: none;
    animation: status-reaction-float 1.1s ease-out forwards;
}

@keyframes status-reaction-float {
    0% { opacity: 0; transform: translateX(-50%) scale(0.4); }
    20% { opacity: 1; transform: translateX(-50%) scale(1.1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-80px) scale(1.2); }
}

.viewer-video-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.viewer-mute-btn {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 12;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.viewer-media-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 48px 20px 24px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    z-index: 10;
    pointer-events: none;
}

.status-delete-confirm {
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.status-delete-confirm-card {
    width: min(320px, 92vw);
    background: #233138;
    border-radius: 14px;
    padding: 20px;
    text-align: center;
}

.status-delete-confirm-card h4 {
    margin: 0 0 8px;
    color: #e9edef;
    font-size: 18px;
}

.status-delete-confirm-card p {
    margin: 0 0 16px;
    color: #8696a0;
    font-size: 14px;
}

.status-delete-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.status-mine-delete-btn.compact {
    width: auto;
    min-width: 100px;
    padding: 10px 18px;
}

.status-swipe-hint {
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    pointer-events: none;
}

body.app-shell:has(.updates-page),
.app-main:has(.updates-page) {
    overflow: auto;
}

.text-btn.danger {
    color: #e74c3c;
}

.admin-truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* Settings module (WhatsApp-style) */
.settings-page {
    padding: 0 0 88px;
    color: var(--text-primary, #e9edef);
    height: 100%;
    overflow-y: auto;
    max-width: 720px;
    margin: 0;
    background: var(--bg-primary, #111b21);
    animation: settingsFadeIn 0.2s ease;
}

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

.settings-page-header {
    display: flex;
    align-items: center;
    padding: 12px 8px 12px 4px;
    background: var(--bg-secondary, #202c33);
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.settings-page-header-start {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.settings-page-header h1 {
    font-size: 20px;
    font-weight: 500;
}

.settings-page-body {
    padding: 8px 0 24px;
}

.settings-profile-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 12px 16px 20px;
    background: var(--bg-secondary, #202c33);
    color: inherit;
}

.settings-profile-link {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.settings-profile-card:active,
.settings-profile-link:active {
    opacity: 0.92;
}

.settings-profile-avatar {
    display: block;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: #2a3942;
}

.settings-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.settings-avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: #2a3942;
    flex-shrink: 0;
}

.settings-avatar-preview .settings-profile-avatar {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.settings-avatar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

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

.settings-profile-info strong {
    display: block;
    font-size: 18px;
    font-weight: 500;
}

.settings-profile-info span {
    color: #8696a0;
    font-size: 14px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-profile-qr {
    color: #00a884;
    font-size: 22px;
    padding: 8px;
}

.settings-menu {
    margin: 8px 0;
    background: var(--bg-secondary, #202c33);
}

.settings-menu-item,
.settings-menu-item.as-button {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: inherit;
    text-decoration: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.12s;
}

.settings-menu-item:hover,
.settings-menu-item.as-button:hover {
    background: rgba(255, 255, 255, 0.04);
}

.settings-menu-item.danger .settings-menu-label {
    color: #ea5a5a;
}

.settings-menu-icon {
    width: 28px;
    color: #8696a0;
    text-align: center;
}

.settings-menu-text {
    flex: 1;
    min-width: 0;
}

.settings-menu-label {
    display: block;
}

.settings-menu-hint {
    display: block;
    font-size: 13px;
    color: #8696a0;
}

.settings-menu-chevron {
    color: #54656f;
    font-size: 12px;
}

.settings-menu-form {
    display: block;
}

.settings-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: calc(100% - 32px);
    margin: 16px auto;
    padding: 14px;
    background: var(--bg-secondary, #202c33);
    border: none;
    color: #ea5a5a;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
}

.settings-card {
    margin: 8px 16px;
    padding: 12px 16px;
    background: var(--bg-secondary, #202c33);
    border-radius: 8px;
}

.settings-card-title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 12px;
}

.settings-section-label {
    padding: 12px 20px 6px;
    font-size: 13px;
    color: #00a884;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.settings-field {
    display: block;
    margin-bottom: 12px;
}

.settings-field span {
    display: block;
    font-size: 13px;
    color: #8696a0;
    margin-bottom: 6px;
}

.settings-field input,
.settings-select,
.settings-select.full {
    width: 100%;
    padding: 10px 12px;
    background: #2a3942;
    border: 1px solid #3b4a54;
    border-radius: 6px;
    color: #e9edef;
    font-size: 15px;
}

.settings-btn-primary,
.settings-btn-secondary,
.settings-btn-danger {
    padding: 10px 18px;
    border-radius: 20px;
    border: none;
    font-size: 15px;
    cursor: pointer;
    font-weight: 500;
}

.settings-btn-primary {
    background: #00a884;
    color: #111b21;
}

.settings-btn-primary.full,
.settings-btn-secondary.full {
    display: block;
    width: calc(100% - 32px);
    margin: 12px 16px;
    text-align: center;
}

.settings-btn-secondary {
    background: transparent;
    color: #00a884;
    border: 1px solid #3b4a54;
}

.settings-btn-danger {
    background: #ea5a5a;
    color: #fff;
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
}

.settings-toggle-row:last-child {
    border-bottom: none;
}

.settings-toggle-label small {
    display: block;
    color: #8696a0;
    font-size: 12px;
}

.settings-toggle {
    position: relative;
    width: 46px;
    height: 26px;
}

.settings-toggle input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.settings-toggle-slider {
    position: absolute;
    inset: 0;
    background: #3b4a54;
    border-radius: 26px;
    transition: 0.2s;
}

.settings-toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
}

.settings-toggle input:checked + .settings-toggle-slider {
    background: #00a884;
}

.settings-toggle input:checked + .settings-toggle-slider::before {
    transform: translateX(20px);
}

.settings-select-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-select-row:last-child {
    border-bottom: none;
}

.settings-select-row .settings-select {
    width: auto;
    min-width: 120px;
}

.settings-storage-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-storage-row.total {
    font-weight: 600;
    color: #00a884;
}

.settings-theme-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.settings-theme-option {
    text-align: center;
    cursor: pointer;
}

.settings-theme-option input {
    display: none;
}

.settings-theme-option span {
    display: block;
    padding: 14px 8px;
    border-radius: 8px;
    background: #2a3942;
    font-size: 13px;
}

.settings-theme-option input:checked + span {
    outline: 2px solid #00a884;
}

.settings-wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.settings-wallpaper-tile {
    aspect-ratio: 1;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
}

.settings-wallpaper-tile input {
    display: none;
}

.settings-wallpaper-tile:has(input:checked) {
    border-color: #00a884;
    box-shadow: 0 0 0 1px #00a884;
}

.wallpaper-default { background: #0b141a; }
.wallpaper-dark { background: #111b21; }
.wallpaper-light { background: #efeae2; }
.wallpaper-pattern1 { background: linear-gradient(135deg, #1f2c34, #00a884); }
.wallpaper-pattern2 { background: linear-gradient(45deg, #2a3942, #6b7c85); }

.wallpaper-custom {
    position: relative;
    overflow: hidden;
    background: #1f2c34;
    background-size: cover;
    background-position: center;
}

.wallpaper-custom .settings-wallpaper-custom-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #e9edef;
    font-size: 12px;
    background: rgba(11, 20, 26, 0.45);
    text-align: center;
    pointer-events: none;
}

.wallpaper-custom.has-image .settings-wallpaper-custom-label {
    background: rgba(11, 20, 26, 0.25);
}

.settings-custom-wallpaper-upload {
    padding: 16px;
}

.settings-custom-wallpaper-title {
    margin: 0 0 4px;
    font-size: 15px;
    color: #e9edef;
    font-weight: 600;
}

.settings-custom-wallpaper-hint {
    margin: 0 0 14px;
    font-size: 13px;
    color: #8696a0;
    line-height: 1.4;
}

.settings-custom-wallpaper-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    margin-bottom: 12px;
    background-color: #111b21;
    background-size: cover;
    background-position: center;
    border: 1px solid #3b4a54;
}

.settings-custom-wallpaper-preview.is-empty {
    display: none;
}

.settings-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px dashed #3b4a54;
    background: #202c33;
    color: #00a884;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.settings-file-btn:hover {
    background: #2a3942;
}

.settings-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.settings-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-modal[hidden] {
    display: none;
}

.settings-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.settings-modal-card {
    position: relative;
    background: #233138;
    padding: 24px;
    border-radius: 12px;
    max-width: 340px;
    width: 90%;
    z-index: 1;
}

.settings-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

.settings-toast {
    margin: 8px 16px;
    padding: 10px 14px;
    background: #00a884;
    color: #111b21;
    border-radius: 8px;
    font-size: 14px;
}

.settings-empty {
    color: #8696a0;
    padding: 16px 0;
    text-align: center;
}

.settings-about-card {
    text-align: center;
    padding: 28px 16px;
}

.settings-about-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: #00a884;
    color: #111b21;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 22px;
}

.settings-qr-card {
    text-align: center;
}

.settings-qr-card .settings-profile-avatar {
    margin: 0 auto 12px;
}

.settings-qr-box {
    margin: 20px auto;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    display: inline-block;
}

.settings-crop-modal {
    margin-top: 12px;
    width: 100%;
    max-width: 320px;
    padding: 16px;
    background: #111b21;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    text-align: center;
}

.settings-crop-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: #e9edef;
}

.settings-crop-mode {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    padding: 4px;
    background: #202c33;
    border-radius: 10px;
}

.settings-crop-mode-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #8696a0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.settings-crop-mode-btn.is-active {
    background: #00a884;
    color: #fff;
}

.settings-crop-canvas-wrap {
    position: relative;
    width: 280px;
    max-width: 100%;
    margin: 0 auto 10px;
    border-radius: 12px;
    overflow: hidden;
    background: #0b141a;
    touch-action: none;
}

.settings-crop-canvas-wrap.is-crop {
    cursor: grab;
}

.settings-crop-canvas-wrap.is-crop:active {
    cursor: grabbing;
}

.settings-crop-canvas-wrap.is-crop::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.settings-crop-canvas-wrap.is-full::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    pointer-events: none;
}

.settings-crop-modal canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.settings-crop-hint {
    margin: 0 0 10px;
    font-size: 12px;
    color: #8696a0;
}

.settings-crop-zoom {
    margin-bottom: 14px;
}

.settings-crop-zoom-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: #aebac1;
    text-align: left;
}

.settings-crop-zoom-label input[type='range'] {
    width: 100%;
    accent-color: #00a884;
}

.settings-crop-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.settings-crop-actions .settings-btn-primary,
.settings-crop-actions .settings-btn-secondary {
    flex: 1;
    min-width: 0;
}

.settings-blocked-row,
.settings-session-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-blocked-row img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.settings-session-row span {
    display: block;
    font-size: 12px;
    color: #8696a0;
}

.settings-session-row em {
    font-size: 11px;
    color: #00a884;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

html[data-theme="light"] .settings-page {
    --text-primary: #111b21;
    --bg-primary: #fff;
    --bg-secondary: #f0f2f5;
}

html[data-theme="light"] .settings-field input,
html[data-theme="light"] .settings-select {
    background: #fff;
    border-color: #d1d7db;
    color: #111b21;
}

html[data-font-size="large"] {
    font-size: 18px;
}

html[data-font-size="small"] {
    font-size: 14px;
}

/* Voice note recording & playback */
.voice-recorder-root {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 70px;
    z-index: 120;
    padding: 0 var(--composer-pad-x, 22px);
    pointer-events: none;
}

.voice-recorder-root:not(.hidden) {
    pointer-events: auto;
}

.voice-recorder-panel {
    background: #1f2c34;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    border: 1px solid #2a3942;
}

.voice-recorder-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.voice-rec-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e74c3c;
    animation: voice-pulse 1.2s ease-in-out infinite;
}

@keyframes voice-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.55; }
}

.voice-rec-label {
    flex: 1;
    color: #e9edef;
    font-size: 15px;
    font-weight: 600;
}

.voice-rec-timer {
    color: #8696a0;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}

.voice-rec-waveform,
.voice-preview-wave {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 36px;
    margin: 8px 0 12px;
    overflow: hidden;
}

.voice-rec-waveform .wave-bar,
.voice-preview-wave .wave-bar {
    flex: 1;
    min-width: 2px;
    height: calc(var(--h, 0.3) * 100%);
    max-height: 100%;
    background: #00a884;
    border-radius: 2px;
    opacity: 0.85;
    transition: background 0.15s;
}

.voice-rec-waveform .wave-bar.played,
.voice-preview-wave .wave-bar.played {
    background: #53bdeb;
}

.voice-rec-hint {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #8696a0;
    margin-bottom: 10px;
}

.voice-rec-controls,
.voice-preview-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.voice-rec-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    color: #fff;
    background: #2a3942;
}

.voice-rec-btn.cancel { background: #54656f; }
.voice-rec-btn.pause,
.voice-rec-btn.resume { background: #8696a0; }
.voice-rec-btn.send { background: #00a884; }

.voice-rec-preview .voice-preview-meta {
    display: flex;
    justify-content: space-between;
    color: #8696a0;
    font-size: 13px;
    margin-bottom: 10px;
}

.voice-rec-upload .voice-upload-bar {
    height: 4px;
    background: #2a3942;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.voice-rec-upload .voice-upload-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: #00a884;
    transition: width 0.2s;
}

.voice-rec-upload .voice-upload-text {
    font-size: 13px;
    color: #aebac1;
}

.voice-rec-upload .voice-upload-cancel {
    margin-top: 10px;
    width: 100%;
    justify-content: center;
}

.message-input.voice-recording-active input,
.message-input.voice-recording-active .attach-btn,
.message-input.voice-recording-active .picker-open-btn,
.message-input.voice-recording-active .send-btn {
    visibility: hidden;
    pointer-events: none;
}

.message-input input.hidden {
    display: none;
}

#voice-record-btn.recording,
#voice-record-btn.active {
    color: #e74c3c !important;
    transform: scale(1.08);
}

#voice-record-btn.locked {
    color: #00a884 !important;
}

#voice-record-btn.cancel-pending {
    color: #e74c3c !important;
    transform: translateX(-8px);
}

.message.message-voice {
    min-width: 240px;
    max-width: 320px;
    padding: 6px 10px 18px 8px;
    position: relative;
}

.message.message-voice .msg-meta {
    position: absolute;
    right: 8px;
    bottom: 4px;
    margin: 0;
    float: none;
    top: auto;
    font-size: 10.5px;
    opacity: 0.85;
    gap: 3px;
    z-index: 1;
}

.msg-voice-note {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 200px;
    max-width: 100%;
    padding: 2px 48px 0 0;
}

.msg-voice-play {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.18);
    color: #e9edef;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.15s ease, transform 0.1s ease;
}

.msg-voice-play:active {
    transform: scale(0.94);
}

.message.sent .msg-voice-play {
    background: rgba(0, 0, 0, 0.18);
    color: #e9edef;
}

.message.received .msg-voice-play.unplayed {
    background: #53bdeb;
    color: #fff;
}

.message.received .msg-voice-play.unplayed::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #53bdeb;
    border: 2px solid #202c33;
}

.msg-voice-body {
    flex: 1;
    min-width: 0;
}

.msg-voice-wave {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 30px;
    cursor: pointer;
    margin-bottom: 2px;
    touch-action: none;
}

.msg-voice-bar {
    flex: 1;
    min-width: 2px;
    height: calc(var(--h, 0.25) * 100%);
    max-height: 100%;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    transition: background 0.12s;
}

.message.sent .msg-voice-bar {
    background: rgba(0, 0, 0, 0.2);
}

.msg-voice-bar.played {
    background: #53bdeb;
}

.message.sent .msg-voice-bar.played {
    background: rgba(0, 0, 0, 0.45);
}

.msg-voice-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    min-height: 16px;
}

.message.sent .msg-voice-meta {
    color: rgba(0, 0, 0, 0.55);
}

.msg-voice-speed {
    margin-left: auto;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 11px;
    cursor: pointer;
    padding: 0 4px;
}

.msg-voice-note.playing .msg-voice-play {
    background: #00a884;
    color: #fff;
}

.msg-voice-note.playing .msg-voice-play.unplayed::after {
    display: none;
}

.message.received .msg-voice-bar.played {
    background: #53bdeb;
}

.msg-voice-audio {
    display: none;
}

.msg-audio-wrap.msg-audio-fallback {
    margin-top: 6px;
}

.voice-recorder-root.hidden,
.voice-rec-preview.hidden,
.voice-rec-upload.hidden,
.voice-rec-btn.hidden,
#voice-rec-resume.hidden,
#voice-rec-pause.hidden,
#voice-preview-pause.hidden,
#voice-preview-play.hidden {
    display: none !important;
}

/* WhatsApp-style messaging enhancements */
.edit-preview-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1f2c34;
    border-left: 4px solid #53bdeb;
    padding: 8px var(--composer-pad-x, 22px);
    margin: 0;
    flex-shrink: 0;
}

.edit-preview-bar.hidden { display: none !important; }

.edit-preview-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #53bdeb;
    font-size: 13px;
    font-weight: 600;
}

.edit-preview-close {
    background: none;
    border: none;
    color: #8696a0;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
}

.message-input.edit-mode .send-btn {
    background: #53bdeb;
}

.message.editing-active {
    outline: 2px solid #53bdeb;
    outline-offset: 2px;
}

.edited-inline {
    font-style: normal;
    font-size: 10px;
    color: #8696a0;
    margin-right: 4px;
}

.reply-preview-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1f2c34;
    border-left: 4px solid #00a884;
    padding: 8px var(--composer-pad-x, 22px);
    margin: 0;
    flex-shrink: 0;
}

.reply-preview-bar.hidden { display: none !important; }

.reply-preview-bar .reply-preview-content {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.reply-preview-bar strong {
    display: block;
    color: #00a884;
    font-size: 13px;
}

.reply-preview-bar span {
    display: block;
    color: #8696a0;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-preview-bar .reply-preview-close {
    background: none;
    border: none;
    color: #8696a0;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
}

.reply-preview {
    font-size: 12px;
    border-left: 4px solid #00a884;
    padding: 4px 8px;
    margin-bottom: 6px;
    background: rgba(0,0,0,.15);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}

.message.sent .reply-preview {
    border-left-color: #06cf9c;
    background: rgba(0, 0, 0, 0.08);
}

.message.sent .reply-preview strong {
    color: #06cf9c;
}

.reply-preview strong {
    display: block;
    color: #00a884;
    font-size: 12px;
}

.reply-preview span {
    display: block;
    color: #8696a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.forwarded-label {
    font-size: 11px;
    color: #8696a0;
    font-style: italic;
    margin-bottom: 4px;
}

.forwarded-label i { margin-right: 4px; }

.date-separator {
    align-self: center;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 12px 0 8px;
    position: relative;
}

.date-separator span {
    background: #182229;
    color: #8696a0;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 0.5px rgba(0,0,0,.13);
    z-index: 1;
}

.message.message-enter,
.message-row.message-enter {
    opacity: 0;
    transform: translateY(8px);
}

.message.message-enter-active,
.message-row.message-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.chat-list-item.sidebar-flash {
    background: rgba(0, 168, 132, 0.12);
    transition: background 0.4s ease;
}

.unread-divider {
    align-self: center;
    background: #182229;
    color: #00a884;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    margin: 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.messages-load-older {
    align-self: center;
    min-height: 24px;
    padding: 8px;
}

.messages-load-older.loading .load-older-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #8696a0;
    border-top-color: #00a884;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.message-context-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1999;
    background: rgba(11, 20, 26, 0.55);
    backdrop-filter: blur(2px);
}

.message-context-backdrop.hidden { display: none !important; }

body.message-context-open {
    overflow: hidden;
}

.pinned-message-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #1f2c34;
    border-bottom: 1px solid #2a3942;
}

.pinned-message-bar.hidden { display: none !important; }

.pinned-message-bar-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: none;
    color: #8696a0;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    min-width: 0;
}

.pinned-message-bar-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e9edef;
}

.pinned-message-bar-btn i { color: #00a884; flex-shrink: 0; }

.pinned-message-unpin {
    border: none;
    background: none;
    color: #8696a0;
    cursor: pointer;
    padding: 6px;
}

.message-action-modal .modal-card {
    max-width: 420px;
    width: calc(100% - 32px);
}

.message-action-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.message-action-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #e9edef;
}

.modal-close-btn {
    border: none;
    background: none;
    color: #8696a0;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
}

.message-forward-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #2a3942;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
}

.message-forward-search input {
    flex: 1;
    border: none;
    background: none;
    color: #e9edef;
    outline: none;
}

.forward-contact-list {
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.forward-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    cursor: pointer;
    border-bottom: 1px solid #2a3942;
}

.forward-contact-row img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.forward-contact-row strong {
    display: block;
    color: #e9edef;
    font-size: 15px;
}

.forward-contact-row span {
    color: #8696a0;
    font-size: 13px;
}

.message-edit-textarea {
    width: 100%;
    resize: vertical;
    min-height: 100px;
    margin-bottom: 12px;
}

.msg-deleted-placeholder {
    color: #8696a0;
    font-style: italic;
    font-size: 14px;
    margin: 0;
}

.message-context-menu {
    position: fixed;
    z-index: 2000;
    background: #233138;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    min-width: 200px;
    max-width: min(240px, calc(100vw - 24px));
    max-height: min(70vh, 360px);
    overflow-y: auto;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    animation: msg-context-in 0.15s ease-out;
}

@keyframes msg-context-in {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.message-context-menu.hidden { display: none !important; }

.message-context-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    color: #e9edef;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}

.message-context-menu button:hover { background: #2a3942; }

.message-context-menu button.hidden { display: none; }

.chat-list-context-menu {
    position: fixed;
    z-index: 2100;
    background: #233138;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    min-width: 180px;
    max-width: min(240px, calc(100vw - 24px));
    padding: 6px 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
    animation: msg-context-in 0.15s ease-out;
}

.chat-list-context-menu.hidden { display: none !important; }

.chat-list-context-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    color: #e9edef;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}

.chat-list-context-menu button.danger {
    color: #ff6b6b;
}

.chat-list-context-menu button i {
    width: 18px;
    text-align: center;
}

.chat-list-context-menu button:hover,
.chat-list-context-menu button:active {
    background: #2a3942;
}

.chat-list-item.chat-list-press-highlight {
    background: rgba(255, 255, 255, 0.06);
}

.quick-reaction-picker {
    position: fixed;
    z-index: 2001;
    display: flex;
    gap: 4px;
    background: #233138;
    padding: 6px 10px;
    border-radius: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.quick-reaction-picker.hidden { display: none !important; }

.quick-reaction-picker button {
    border: none;
    background: none;
    font-size: 22px;
    cursor: pointer;
    padding: 4px;
}

.quick-reaction-picker button.quick-reaction-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 14px;
    color: #8696a0;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    margin-left: 2px;
}

.quick-reaction-picker button.quick-reaction-more:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #e9edef;
}

.reaction-emoji-picker-panel {
    position: fixed;
    z-index: 2002;
    width: min(320px, calc(100vw - 16px));
    background: #233138;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.reaction-emoji-picker-panel.hidden { display: none !important; }

.reaction-emoji-picker-panel emoji-picker {
    width: 100%;
    --num-columns: 8;
    --border-radius: 0;
    --background: #233138;
}

.msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.msg-reaction-chip {
    background: #1f2c34;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 13px;
}

.message.selected {
    outline: 2px solid #00a884;
    outline-offset: 2px;
}

.message-selection-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    padding-right: 8px;
}

.message-selection-toolbar.hidden { display: none !important; }

.message-selection-toolbar button {
    background: none;
    border: none;
    color: #aebac1;
    font-size: 18px;
    cursor: pointer;
}

.message-selection-toolbar .sel-count {
    color: #e9edef;
    font-size: 13px;
    min-width: 20px;
}

.chat-layout.selection-mode .chat-header .back-btn {
    display: none !important;
}

.chat-layout.selection-mode .message-input { opacity: 0.5; pointer-events: none; }

.chat-header .chat-user.hidden,
.chat-header .chat-actions.hidden { display: none !important; }

.message-context-toolbar {
    display: none;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    margin-left: 8px;
}

.message-context-toolbar.hidden { display: none !important; }

@media (min-width: 769px) {
    .message-context-toolbar:not(.hidden) {
        display: flex;
    }
}

.message-context-toolbar-close {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: none;
    color: #aebac1;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.message-context-toolbar-close:hover {
    background: #2a3942;
}

.message-context-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    min-width: 0;
    flex: 1;
    padding-right: 4px;
    scrollbar-width: thin;
}

.message-context-toolbar-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    color: #e9edef;
    font-size: 12px;
    white-space: nowrap;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}

.message-context-toolbar-actions button i {
    color: #8696a0;
    font-size: 14px;
}

.message-context-toolbar-actions button:hover {
    background: #2a3942;
}

.message-context-toolbar-actions button.hidden {
    display: none !important;
}

.chat-layout.message-context-mode .chat-header .back-btn {
    display: none !important;
}

@media (min-width: 769px) {
    .message-context-menu {
        display: none !important;
    }
}

.message-context-menu button span {
    display: inline;
}

.message-swipe-hint {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #8696a0;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    z-index: 2;
}

.message-swipe-hint.visible { opacity: 1; color: #00a884; }

.message.sent { position: relative; }
.message.received { position: relative; }

.message.message-starred::after {
    content: '\f005';
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 10px;
    color: #ffd279;
}

.chat-action-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #233138;
    color: #e9edef;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

.chat-action-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Message dropdown chevron (desktop) */
.msg-menu-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #aebac1;
    font-size: 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.message.sent .msg-menu-btn { right: 2px; left: auto; }
.message.received .msg-menu-btn { left: 2px; right: auto; }

.message:hover .msg-menu-btn,
.message.message-context-highlight .msg-menu-btn {
    opacity: 1;
}

@media (hover: none) {
    .msg-menu-btn { display: none; }
}

#messages-container {
    touch-action: pan-y;
}

.message.message-swiping {
    transition: none;
    z-index: 2;
}

.msg-reaction-chip {
    cursor: pointer;
}

.msg-reaction-chip:hover {
    transform: scale(1.1);
}

.message[data-id] {
    cursor: pointer;
}

.message[data-id] .msg-video-play,
.message[data-id] .msg-voice-play,
.message[data-id] a,
.message[data-id] button {
    cursor: pointer;
}

#partner-status.online { color: #00a884; }

.message-deleted { opacity: 0.7; }

.msg-deleted-placeholder {
    font-style: italic;
    color: #8696a0;
    font-size: 13px;
    margin: 0;
}

.edited-tag {
    font-size: 10px;
    color: #8696a0;
    font-style: normal;
    display: block;
    text-align: right;
    margin-top: 2px;
}

/* Reply preview media thumbnails */
.reply-preview-inner,
.reply-preview-bar .reply-preview-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.reply-preview-text {
    flex: 1;
    min-width: 0;
}

.reply-preview-media {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    background: #2a3942;
}

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

.reply-media-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    background: rgba(0,0,0,.35);
}

.reply-preview-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: #2a3942;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8696a0;
    font-size: 16px;
}

.reply-preview-bar.reply-preview-enter {
    opacity: 0;
    transform: translateY(8px);
}

.reply-preview-bar.reply-preview-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Swipe-to-reply */
.message.message-swiping {
    transition: none;
    will-change: transform;
}

.message.message-swipe-reply {
    animation: swipe-reply-bounce 0.3s ease;
}

@keyframes swipe-reply-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(var(--swipe-dir, 8px)); }
}

.message.sent.message-swipe-reply { --swipe-dir: -8px; }
.message.received.message-swipe-reply { --swipe-dir: 8px; }

/* Context & reaction highlights */
.message-context-highlight {
    outline: 2px solid rgba(0, 168, 132, 0.5);
    outline-offset: 2px;
    border-radius: 8px;
}

.message-highlight-flash {
    animation: message-flash 1.2s ease;
}

@keyframes message-flash {
    0%, 100% { background: transparent; }
    30% { background: rgba(0, 168, 132, 0.15); }
}

.message-heart-pop {
    animation: heart-pop 0.4s ease;
}

.message.message-media-only.message-heart-pop,
.message.message-media-bubble-wrap.message-heart-pop {
    animation: heart-pop-media 0.45s ease;
}

@keyframes heart-pop-media {
    0% { transform: scale(1); }
    35% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes heart-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* Reaction animations */
.quick-reaction-picker {
    animation: reaction-picker-in 0.18s ease-out;
}

@keyframes reaction-picker-in {
    from { opacity: 0; transform: translateY(6px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.quick-reaction-picker button.reaction-pop {
    animation: emoji-pop 0.35s ease;
}

@keyframes emoji-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.45); }
    100% { transform: scale(1); }
}

.msg-reaction-chip.reaction-chip-enter {
    opacity: 0;
    transform: scale(0.6);
}

.msg-reaction-chip.reaction-chip-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Message info modal */
.message-info-body {
    padding: 4px 0;
}

.message-info-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #2a3942;
}

.message-info-row i {
    color: #8696a0;
    font-size: 16px;
    margin-top: 2px;
}

.message-info-row i.seen { color: #53bdeb; }

.message-info-row strong {
    display: block;
    color: #e9edef;
    font-size: 14px;
}

.message-info-row span {
    color: #8696a0;
    font-size: 13px;
}

.message-info-readby {
    margin-top: 16px;
}

.message-info-readby h4 {
    color: #8696a0;
    font-size: 12px;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.message-info-read-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    color: #e9edef;
    font-size: 14px;
}

.message-info-read-row time {
    color: #8696a0;
    font-size: 13px;
}

.message-info-loading {
    display: flex;
    justify-content: center;
    padding: 24px;
}

.message-info-error {
    color: #8696a0;
    text-align: center;
    padding: 16px;
}

/* Starred messages page */
.starred-page {
    max-width: 680px;
    margin: 0 auto;
    min-height: 100vh;
    background: #111b21;
}

.starred-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #202c33;
    border-bottom: 1px solid #2a3942;
}

.starred-header h1 {
    margin: 0;
    font-size: 19px;
    color: #e9edef;
}

.starred-search {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 16px;
    padding: 8px 14px;
    background: #202c33;
    border-radius: 8px;
}

.starred-search input {
    flex: 1;
    border: none;
    background: none;
    color: #e9edef;
    outline: none;
}

.starred-list {
    padding: 0 8px 24px;
}

.starred-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.starred-item:hover { background: #202c33; }

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

.starred-item-body { flex: 1; min-width: 0; }

.starred-item-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.starred-item-top strong {
    color: #e9edef;
    font-size: 16px;
}

.starred-item-top time {
    color: #8696a0;
    font-size: 12px;
    flex-shrink: 0;
}

.starred-sender {
    color: #00a884;
    font-size: 13px;
}

.starred-preview {
    color: #8696a0;
    font-size: 14px;
    margin: 4px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.starred-icon {
    color: #ffd279;
    font-size: 14px;
    margin-top: 4px;
}

.starred-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    color: #8696a0;
}

.starred-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.starred-empty p {
    color: #e9edef;
    font-size: 18px;
    margin: 0 0 8px;
}

@media (max-width: 768px) {
    .message { max-width: 100%; }
    .chat-layout.has-chat .chat-area {
        position: fixed;
        inset: 0;
        z-index: 50;
        display: flex;
        flex-direction: column;
    }

    .camera-capture-modal {
        height: 100dvh;
        height: -webkit-fill-available;
        max-height: 100dvh;
    }

    .camera-controls {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        grid-template-columns: 52px 1fr 52px;
    }
}

/* Group chat */
.group-chat-layout .group-msg-sender {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--wa-teal, #00a884);
    margin-bottom: 2px;
    padding-left: 4px;
}

.group-chat-layout .group-member-item {
    pointer-events: none;
    opacity: 0.9;
}

.group-chat-layout .load-older-wrap {
    text-align: center;
    padding: 8px;
}

.group-chat-layout .load-older-btn {
    background: transparent;
    border: 1px solid var(--border-color, #3b4a54);
    color: var(--text-secondary, #8696a0);
    padding: 6px 14px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 13px;
}

.group-chat-layout .load-older-btn:hover {
    background: var(--hover-bg, rgba(255,255,255,0.05));
}

.app-main:has(.group-chat-layout) {
    padding: 0;
}

.message.call-log {
    align-self: center;
    max-width: min(92%, 320px);
    margin: 6px auto;
    background: transparent;
    box-shadow: none;
}

.message.call-log .msg-call-log {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px 8px 14px;
    border-radius: 8px;
    background: var(--call-log-bg, rgba(17, 27, 33, 0.85));
    color: var(--text-secondary, #8696a0);
    font-size: 13px;
    max-width: 100%;
}

.message.call-log .msg-call-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    flex: 1;
    min-width: 0;
    text-align: center;
}

.message.call-log .msg-call-log.missed {
    color: #ea4335;
}

.message.call-log .msg-call-icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.message.call-log .msg-call-label {
    font-weight: 500;
    color: inherit;
}

.message.call-log .msg-call-datetime {
    flex-basis: 100%;
    font-size: 11px;
    opacity: 0.85;
}

.message.call-log .msg-call-back-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent-green, #00a884);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.message.call-log .msg-call-back-btn:hover {
    background: var(--accent-green-hover, #06cf9c);
    transform: scale(1.05);
}

.message.call-log .msg-call-back-btn:active {
    transform: scale(0.96);
}

.message.call-log .msg-meta {
    display: block;
    text-align: center;
    margin-top: 2px;
    font-size: 11px;
    opacity: 0.75;
}

html[data-theme="light"] .message.call-log .msg-call-log {
    background: rgba(240, 242, 245, 0.95);
    color: #54656f;
}

@media (max-width: 768px) {
    .group-chat-layout #group-sidebar {
        display: none;
    }
    .group-chat-layout #group-sidebar.mobile-open {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 60;
        background: var(--sidebar-bg, #111b21);
    }
}

/* Screen security */
.settings-section-hint {
    color: #8696a0;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 16px;
    padding: 0 4px;
}

.settings-section-hint--compact {
    margin: -8px 0 12px;
    font-size: 12px;
}

.settings-info-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-top: 12px;
    border-radius: 10px;
    background: rgba(0, 168, 132, 0.08);
    color: #aebac1;
    font-size: 13px;
    line-height: 1.45;
}

.settings-info-card i {
    color: #00a884;
    margin-top: 2px;
}

.settings-live-toast {
    position: sticky;
    top: 8px;
    z-index: 5;
    align-self: center;
    padding: 8px 16px;
    border-radius: 20px;
    background: #00a884;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    margin-bottom: 8px;
}

.settings-live-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.settings-live-toast-error {
    background: #ea4335;
}

.settings-status-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 1rem 1.25rem;
}

.settings-status-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.settings-status-stat strong {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--gc-text-primary, #e9edef);
}

.settings-status-stat span {
    font-size: 0.8rem;
    color: var(--gc-text-secondary, #8696a0);
}

.settings-status-pending {
    margin-left: auto;
    font-size: 0.85rem;
    color: #00a884;
    text-decoration: none;
}

.settings-status-hint {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--gc-text-secondary, #8696a0);
    line-height: 1.4;
}

.settings-status-audience-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.settings-status-audience-chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem;
    cursor: pointer;
}

.settings-status-audience-chip img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.settings-status-audience-chip input {
    flex-shrink: 0;
}

.settings-status-audience-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.settings-status-audience-meta strong {
    font-size: 0.95rem;
    font-weight: 500;
}

.settings-status-audience-meta small {
    font-size: 0.78rem;
    color: var(--gc-text-secondary, #8696a0);
}

.settings-status-relation {
    color: #00a884 !important;
}

.settings-status-empty {
    margin: 0;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--gc-text-secondary, #8696a0);
}

#screen-guard-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #0b141a;
    display: flex;
    align-items: center;
    justify-content: center;
}

#screen-guard-overlay[hidden] {
    display: none !important;
}

.screen-guard-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #00a884;
    border-radius: 50%;
    animation: screen-guard-spin 0.8s linear infinite;
}

@keyframes screen-guard-spin {
    to { transform: rotate(360deg); }
}

body.screen-guard-active .app-main,
body.screen-guard-active .app-nav-rail {
    visibility: hidden !important;
}

.settings-toggle input:disabled + .settings-toggle-slider {
    opacity: 0.45;
}

/* Notifications settings & center */
.settings-notifications-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.settings-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #202c33;
    color: #e9edef;
    font-size: 13px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}

.settings-link-btn:hover {
    background: #2a3942;
}

.settings-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #00a884;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-badge.hidden {
    display: none;
}

.notification-center-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.notification-filter {
    padding: 8px 14px;
    border-radius: 20px;
    background: #202c33;
    color: #8696a0;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.notification-filter.active,
.notification-filter:hover {
    background: #00a884;
    color: #fff;
}

.notification-center-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notification-center-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #111b21;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: background 0.15s;
}

.notification-center-item:hover {
    background: #202c33;
}

.notification-center-item.unread {
    background: #182229;
}

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

.notification-center-body {
    flex: 1;
    min-width: 0;
}

.notification-center-body strong {
    display: block;
    font-size: 14px;
    color: #e9edef;
    margin-bottom: 2px;
}

.notification-center-body p {
    margin: 0;
    font-size: 13px;
    color: #8696a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-center-body time {
    font-size: 11px;
    color: #667781;
}

.notification-unread-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00a884;
    flex-shrink: 0;
}

html[data-theme="light"] .settings-link-btn,
html[data-theme="light"] .notification-filter {
    background: #f0f2f5;
    color: #3b4a54;
}

html[data-theme="light"] .notification-center-item {
    background: #fff;
}

html[data-theme="light"] .notification-center-item.unread {
    background: #f0faf7;
}

html[data-theme="light"] .settings-info-card {
    background: rgba(0, 168, 132, 0.1);
    color: #54656f;
}

/* Chat MPIN lock */
.mpin-lock-page {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #0b141a;
}

.mpin-lock-card {
    width: 100%;
    max-width: 360px;
    background: #111b21;
    border-radius: 16px;
    padding: 28px 22px 24px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    text-align: center;
}

.mpin-lock-header h1 {
    margin: 14px 0 6px;
    font-size: 1.35rem;
    color: #e9edef;
}

.mpin-lock-header p {
    margin: 0;
    color: #8696a0;
    font-size: 0.92rem;
}

.mpin-lock-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}

.mpin-lock-error {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(234, 67, 53, 0.15);
    color: #ff8a80;
    font-size: 0.88rem;
}

.mpin-dots {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 24px 0 18px;
}

.mpin-dots span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #8696a0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.mpin-dots span.filled {
    background: #00a884;
    border-color: #00a884;
}

.mpin-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 8px;
}

.mpin-key {
    height: 58px;
    border: none;
    border-radius: 50%;
    background: #202c33;
    color: #e9edef;
    font-size: 1.35rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.1s ease;
}

.mpin-key:hover {
    background: #2a3942;
}

.mpin-key:active {
    transform: scale(0.96);
}

.mpin-key-muted {
    font-size: 1rem;
    color: #8696a0;
}

.mpin-lock-hint {
    margin: 16px 0 8px;
    color: #8696a0;
    font-size: 0.82rem;
}

.mpin-lock-link {
    color: #53bdeb;
    font-size: 0.88rem;
    text-decoration: none;
}

.mpin-lock-link:hover {
    text-decoration: underline;
}

.settings-mpin-card .settings-card-head {
    margin-bottom: 12px;
}

.settings-card-desc {
    margin: 6px 0 0;
    color: #8696a0;
    font-size: 0.88rem;
}

.settings-mpin-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-mpin-disable {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.settings-mpin-meta {
    margin: 12px 4px 0;
    color: #8696a0;
    font-size: 0.8rem;
}

.help-intro p,
.help-contact-note p,
.help-form-note {
    margin: 0;
    color: #8696a0;
    font-size: 14px;
    line-height: 1.5;
}

.help-faq-list {
    padding: 4px 0;
}

.help-faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 10px 0;
}

.help-faq-item:last-child {
    border-bottom: none;
}

.help-faq-item summary {
    cursor: pointer;
    color: #e9edef;
    font-size: 15px;
    font-weight: 500;
    list-style: none;
}

.help-faq-item summary::-webkit-details-marker {
    display: none;
}

.help-faq-item summary::after {
    content: '+';
    float: right;
    color: #8696a0;
}

.help-faq-item[open] summary::after {
    content: '−';
}

.help-faq-item p,
.help-faq-item .help-policy-body {
    margin: 8px 0 0;
    color: #aebac1;
    font-size: 14px;
    line-height: 1.55;
}

.help-textarea {
    min-height: 140px;
    resize: vertical;
}

.settings-form-errors {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(234, 90, 90, 0.12);
    color: #ffb4b4;
    font-size: 13px;
}

.settings-form-errors p {
    margin: 0 0 4px;
}

.help-policy-head h2 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #e9edef;
}

.help-policy-lead {
    color: #aebac1;
    font-size: 14px;
    margin: 0 0 8px;
}

.help-policy-meta {
    color: #8696a0;
    font-size: 12px;
    margin: 0;
}

.help-policy-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.help-policy-section h3 {
    margin: 0 0 10px;
    font-size: 16px;
    color: #e9edef;
}

.help-policy-body {
    color: #aebac1;
    font-size: 14px;
    line-height: 1.6;
}

.help-policy-body p {
    margin: 0 0 10px;
}

.help-policy-body a {
    color: #53bdeb;
}