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

body {
    font-family: Arial, sans-serif;
    background: #f4f6fb;
    color: #172033;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.hidden {
    display: none !important;
}


/* USERNAME SCREEN */

.username-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.username-card {
    width: 100%;
    max-width: 420px;
    background: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.logo {
    font-size: 48px;
    margin-bottom: 15px;
}

.username-card h1 {
    font-size: 28px;
    margin-bottom: 10px;
}

.username-card p {
    color: #6d7585;
    margin-bottom: 25px;
}

.username-card input {
    width: 100%;
    padding: 14px;
    border: 1px solid #d9deea;
    border-radius: 10px;
    outline: none;
    margin-bottom: 12px;
}

.username-card input:focus {
    border-color: #4778ff;
}

.username-card button {
    width: 100%;
    border: none;
    padding: 14px;
    border-radius: 10px;
    background: #4778ff;
    color: white;
    font-weight: bold;
}


/* APP */

.app {
    height: 100vh;
    display: flex;
    background: white;
}


/* SIDEBAR */

.sidebar {
    width: 310px;
    border-right: 1px solid #e5e8ef;
    display: flex;
    flex-direction: column;
    background: #fafbfe;
}

.sidebar-header {
    padding: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e8ef;
}

.sidebar-header h2 {
    font-size: 18px;
}

.sidebar-header span {
    font-size: 12px;
    color: #27a66f;
}

.icon-btn {
    border: none;
    background: transparent;
    font-size: 18px;
}


/* MENU */

.menu {
    padding: 12px;
}

.menu-item {
    width: 100%;
    display: flex;
    gap: 12px;
    align-items: center;
    border: none;
    background: #e8efff;
    padding: 13px;
    border-radius: 10px;
    color: #285ddc;
    font-weight: bold;
    text-align: left;
}


/* PRIVATE */

.private-title {
    padding: 20px 18px 8px;
    font-size: 11px;
    color: #8991a1;
    font-weight: bold;
}

.private-chats {
    flex: 1;
    overflow-y: auto;
    padding: 0 10px;
}

.empty-private {
    padding: 15px;
    color: #9299a8;
    font-size: 13px;
}


/* USER BOX */

.user-box {
    padding: 15px;
    border-top: 1px solid #e5e8ef;
    display: flex;
    gap: 12px;
    align-items: center;
}

.avatar {
    width: 40px;
    height: 40px;
    background: #e9edff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-info span {
    color: #8a91a0;
    font-size: 12px;
}


/* CHAT */

.chat {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.chat-header {
    height: 75px;
    padding: 18px 25px;
    border-bottom: 1px solid #e5e8ef;
}

.chat-header h2 {
    font-size: 18px;
}

.chat-header span {
    color: #8a91a0;
    font-size: 12px;
}


/* MESSAGES */

.messages {
    flex: 1;
    overflow-y: auto;
    padding: 25px;
    background: #f7f9fc;
}

.message {
    margin-bottom: 15px;
    max-width: 70%;
}

.message.mine {
    margin-left: auto;
    text-align: right;
}

.message-name {
    font-size: 12px;
    color: #667085;
    margin-bottom: 4px;
}

.message-bubble {
    display: inline-block;
    background: white;
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    word-break: break-word;
}

.message.mine .message-bubble {
    background: #4778ff;
    color: white;
}

.message-time {
    font-size: 10px;
    color: #9aa1af;
    margin-top: 4px;
}


/* COMPOSER */

.composer {
    padding: 15px;
    border-top: 1px solid #e5e8ef;
    display: flex;
    gap: 10px;
}

.composer input {
    flex: 1;
    padding: 13px;
    border: 1px solid #d9deea;
    border-radius: 10px;
    outline: none;
}

.composer button {
    border: none;
    padding: 0 22px;
    border-radius: 10px;
    background: #4778ff;
    color: white;
    font-weight: bold;
}


/* MODAL */

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-card {
    width: 100%;
    max-width: 380px;
    background: white;
    border-radius: 18px;
    padding: 25px;
}

.modal-card h2 {
    margin-bottom: 20px;
}

.modal-card input {
    width: 100%;
    padding: 13px;
    border: 1px solid #d9deea;
    border-radius: 9px;
    outline: none;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.modal-buttons button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 9px;
}

#saveUsernameBtn {
    background: #4778ff;
    color: white;
}


/* MOBILE */

@media (max-width: 700px) {

    .sidebar {
        width: 75px;
    }

    .sidebar-header h2,
    .sidebar-header span,
    .menu-item span:last-child,
    .private-title,
    .private-chats,
    .user-info,
    .icon-btn {
        display: none;
    }

    .sidebar-header {
        justify-content: center;
        padding: 20px 5px;
    }

    .menu-item {
        justify-content: center;
    }

    .user-box {
        justify-content: center;
    }

    .chat-header {
        padding-left: 15px;
    }

    .messages {
        padding: 15px;
    }

    .message {
        max-width: 85%;
    }
}


/* STEP 10 - Telegram-style private chat list */

.private-user {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
}

.private-user:hover {
    background: #eef2f8;
}

.private-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.private-user-top,
.private-user-bottom {
    width: 100%;
    display: flex;
    align-items: center;
}

.private-user-top {
    justify-content: space-between;
    gap: 8px;
}

.private-user-bottom {
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.private-user-info strong {
    font-size: 14px;
    color: #172033;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.private-user-info small {
    flex: 1;
    min-width: 0;
    color: #7b8494;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.private-user-bottom time {
    flex-shrink: 0;
    color: #9aa1af;
    font-size: 10px;
}

.unread-badge {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    background: #4778ff;
    color: white;
    font-size: 10px;
    font-weight: bold;
}
/* STEP 10B - Real Online / Offline Status */

.private-status-online {
    color: #27a66f !important;
}

.private-status-offline {
    color: #9aa1af !important;
}
\n\n/* STEP 11 */\n.home-page { flex:1; overflow:auto; }\n.home-content { max-width:620px; margin:0 auto; padding:55px 25px; text-align:center; }\n.home-logo { font-size:48px; margin-bottom:12px; }\n.home-content h1 { font-size:28px; margin-bottom:8px; }\n.home-content > p { color:#70798a; margin-bottom:25px; }\n.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }\n.stat-card { background:#f7f9fc; border:1px solid #e3e7ef; border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:5px; }\n.stat-card > div { font-size:24px; }\n.stat-card strong { font-size:25px; }\n.stat-card span { font-size:12px; color:#7d8696; }\n.home-action { width:100%; display:grid; grid-template-columns:45px 1fr 25px; gap:12px; align-items:center; text-align:left; padding:17px; margin-bottom:12px; border:1px solid #e2e6ee; border-radius:15px; background:#fff; }\n.home-action > span:first-child { font-size:27px; text-align:center; }\n.home-action > span:nth-child(2) { display:flex; flex-direction:column; gap:3px; }\n.home-action small { color:#8a92a1; }\n.home-action b { color:#4778ff; font-size:20px; }\n.chat-page { flex:1; min-height:0; display:flex; flex-direction:column; }\n.privacy-banner { margin:10px 18px 0; padding:10px 12px; border-radius:10px; background:#f1f5ff; color:#667085; font-size:11px; line-height:1.4; }\n.message-status.delivered { color:#777; }\n.message-status.seen { color:#4778ff; }\n@media (max-width:700px) { .stats-grid { grid-template-columns:1fr; } .home-content { padding:35px 15px; } }\n

/* HUMTUM BRAND LOGO */
.logo-image {
    width: 86px;
    height: 86px;
    object-fit: contain;
    display: block;
    margin: 0 auto 15px;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex: 0 0 42px;
}

.home-logo-image {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
    margin: 0 auto 12px;
}


/* MOBILE RESPONSIVE LAYOUT - FINAL */
@media (max-width: 700px) {
    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .app {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        display: flex;
    }

    .sidebar {
        width: 64px;
        min-width: 64px;
        height: 100dvh;
        flex: 0 0 64px;
        overflow: visible;
        position: relative;
        z-index: 20;
    }

    .sidebar-header {
        height: 74px;
        padding: 10px 4px;
        justify-content: center;
        border-bottom: 1px solid #e5e8ef;
    }

    .brand-block {
        justify-content: center;
    }

    .sidebar-logo {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .sidebar-header h2,
    .sidebar-header span,
    .icon-btn,
    .menu-item span:last-child,
    .private-title,
    .user-info {
        display: none;
    }

    .menu {
        padding: 10px 7px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .menu-item {
        width: 50px;
        height: 50px;
        padding: 0;
        justify-content: center;
        border-radius: 14px;
        font-size: 22px;
    }

    .user-box {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px 7px;
        justify-content: center;
    }

    .user-box .avatar {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .chat {
        width: calc(100% - 64px);
        min-width: 0;
        height: 100dvh;
        min-height: 0;
        flex: 1;
    }

    .chat-header {
        min-height: 74px;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e5e8ef;
    }

    .chat-header h2 {
        font-size: 19px;
    }

    .chat-header span {
        font-size: 12px;
    }

    .messages {
        padding: 12px;
    }

    .message {
        max-width: 88%;
    }

    .composer {
        padding: 8px;
        gap: 7px;
    }

    .composer input {
        min-width: 0;
        padding: 12px;
    }

    .composer button {
        padding: 12px 14px;
    }

    /* Show the Private Chats list in the main mobile area. */
    .private-list-mode .private-chats {
        display: block;
        position: fixed;
        z-index: 15;
        left: 64px;
        top: 74px;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        padding: 8px 10px 20px;
        overflow-y: auto;
        background: #fff;
        border-left: 1px solid #e5e8ef;
    }

    .private-list-mode .private-title {
        display: block;
        position: fixed;
        z-index: 16;
        left: 64px;
        top: 74px;
        right: 0;
        height: 38px;
        padding: 12px 14px 6px;
        background: #fff;
        font-size: 10px;
    }

    .private-list-mode .private-chats {
        padding-top: 38px;
    }

    .private-list-mode .private-user {
        padding: 12px 10px;
        margin-bottom: 2px;
    }

    .private-list-mode .private-avatar {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    .home-content {
        width: 100%;
        padding: 28px 14px 35px;
    }

    .home-logo-image {
        width: 92px;
        height: 92px;
        margin-bottom: 8px;
    }

    .home-content h1 {
        font-size: 24px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 18px;
    }

    .stat-card {
        padding: 14px 8px;
        border-radius: 13px;
    }

    .stat-card > div {
        font-size: 20px;
    }

    .stat-card strong {
        font-size: 21px;
    }

    .home-action {
        grid-template-columns: 38px 1fr 20px;
        gap: 8px;
        padding: 13px 12px;
    }

    .privacy-banner {
        margin: 8px 10px 0;
    }
}


/* MOBILE NAVIGATION LABELS */
@media (max-width: 700px) {
    .sidebar {
        width: 180px;
        min-width: 180px;
        flex: 0 0 180px;
    }

    .sidebar-header {
        height: 74px;
        padding: 10px 14px;
        justify-content: flex-start;
    }

    .brand-block {
        width: 100%;
        justify-content: flex-start;
    }

    .sidebar-logo {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    .sidebar-header h2,
    .sidebar-header span {
        display: none;
    }

    .menu {
        padding: 12px 10px;
        gap: 8px;
    }

    .menu-item {
        width: 100%;
        height: 52px;
        padding: 0 14px;
        justify-content: flex-start;
        gap: 12px;
        border-radius: 14px;
        font-size: 16px;
    }

    .menu-item span:first-child {
        width: 28px;
        flex: 0 0 28px;
        text-align: center;
        font-size: 22px;
    }

    .menu-item span:last-child {
        display: inline !important;
        white-space: nowrap;
    }

    .private-title,
    .private-chats {
        display: none;
    }

    .user-box {
        left: 0;
        right: 0;
        bottom: 0;
        padding: 12px 14px;
        justify-content: flex-start;
        gap: 10px;
    }

    .user-box .avatar {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .user-info {
        display: flex !important;
        flex-direction: column;
        min-width: 0;
    }

    .user-info strong {
        max-width: 105px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
    }

    .user-info span {
        display: block !important;
        font-size: 11px;
        color: #8991a1;
    }

    .chat {
        width: calc(100% - 180px);
    }

    .private-list-mode .private-chats,
    .private-list-mode .private-title {
        left: 180px;
    }
}


/* MOBILE NAVIGATION DRAWER TOGGLE */
.mobile-nav-toggle {
    display: none;
}

@media (max-width: 700px) {
    .mobile-nav-toggle {
        display: flex;
        position: absolute;
        top: 8px;
        right: 8px;
        width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 10px;
        background: #e8efff;
        font-size: 17px;
        cursor: pointer;
        z-index: 30;
    }

    .sidebar {
        position: relative;
        transition: width .22s ease, min-width .22s ease, flex-basis .22s ease;
    }

    .chat {
        transition: width .22s ease;
    }

    .sidebar.mobile-nav-collapsed {
        width: 64px;
        min-width: 64px;
        flex-basis: 64px;
    }

    .sidebar.mobile-nav-collapsed .sidebar-header {
        padding: 10px 4px;
        justify-content: center;
    }

    .sidebar.mobile-nav-collapsed .brand-block {
        justify-content: center;
        width: auto;
    }

    .sidebar.mobile-nav-collapsed .sidebar-logo {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .sidebar.mobile-nav-collapsed .menu {
        padding: 10px 7px;
    }

    .sidebar.mobile-nav-collapsed .menu-item {
        width: 50px;
        height: 50px;
        padding: 0;
        justify-content: center;
    }

    .sidebar.mobile-nav-collapsed .menu-item span:last-child,
    .sidebar.mobile-nav-collapsed .user-info {
        display: none !important;
    }

    .sidebar.mobile-nav-collapsed .user-box {
        padding: 10px 7px;
        justify-content: center;
    }

    .sidebar.mobile-nav-collapsed .mobile-nav-toggle {
        right: -17px;
        top: 84px;
        width: 34px;
        height: 34px;
        border: 1px solid #dfe5f0;
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }

    .sidebar.mobile-nav-collapsed + .chat {
        width: calc(100% - 64px);
    }

    .sidebar:not(.mobile-nav-collapsed) .mobile-nav-toggle {
        top: 8px;
        right: 8px;
    }
}


/* MOBILE DRAWER POLISH - FINAL */
@media (max-width: 700px) {
    .mobile-nav-toggle {
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid #dfe5f0;
        border-radius: 50%;
        background: #ffffff;
        color: #4b5565;
        box-shadow: 0 2px 7px rgba(31, 41, 55, .10);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-nav-toggle:active {
        transform: scale(.96);
    }

    .nav-toggle-icon {
        width: 19px;
        height: 19px;
        display: block;
    }

    /* The private list belongs to the chat area. Never leave an old
       180px fixed offset behind when the drawer is collapsed. */
    .private-list-mode .private-chats,
    .private-list-mode .private-title {
        left: 180px;
    }

    .sidebar.mobile-nav-collapsed ~ .chat .private-chats,
    .sidebar.mobile-nav-collapsed ~ .chat .private-title {
        left: 64px;
    }

    .sidebar.mobile-nav-collapsed .mobile-nav-toggle {
        right: -16px;
        top: 82px;
    }

    .sidebar:not(.mobile-nav-collapsed) .mobile-nav-toggle {
        right: 8px;
        top: 8px;
    }

    /* Let the chat always occupy all remaining space. */
    .chat {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    .sidebar.mobile-nav-collapsed + .chat {
        width: auto !important;
        flex: 1 1 auto;
    }
}


/* MOBILE PRIVATE CHAT LIST - RESPONSIVE DRAWER FIX */
@media (max-width: 700px) {
    /* Keep the private-chat list inside the main content column.
       This prevents an empty 180px/old sidebar offset when navigation is collapsed. */
    .chat {
        position: relative;
    }

    .private-list-mode .private-title {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 74px !important;
        width: auto !important;
        box-sizing: border-box;
    }

    .private-list-mode .private-chats {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 112px !important;
        bottom: 0 !important;
        width: auto !important;
        box-sizing: border-box;
        border-left: 0 !important;
    }

    .private-list-mode .private-user {
        width: 100%;
        box-sizing: border-box;
        border-radius: 12px;
        margin: 2px 0 6px;
    }
}

/* ================================
   HUMTUM UI POLISH - FINAL PASS
   ================================ */
.username-card .hidden { display:none !important; }
.username-screen { padding:24px; background:linear-gradient(135deg,#f7f9ff,#eef3ff); }
.username-card { padding:42px 34px; border:1px solid #e8ecf5; box-shadow:0 18px 55px rgba(35,55,95,.10); }
.username-card input { height:50px; padding:0 15px; }
.username-card button { height:50px; box-shadow:0 7px 18px rgba(71,120,255,.20); }

.chat { min-width:0; background:#fff; }
.chat-header { flex:0 0 76px; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 24px; background:rgba(255,255,255,.96); }
.chat-header-main { min-width:0; }
.chat-header h2 { font-size:21px; font-weight:800; letter-spacing:-.2px; }
.chat-header span { display:block; margin-top:3px; }

.private-home-btn { flex:0 0 auto; display:flex; align-items:center; gap:7px; border:1px solid #e1e6ef; background:#f7f9fd; color:#315fcf; padding:9px 13px; border-radius:12px; font-weight:700; box-shadow:0 2px 7px rgba(20,30,50,.05); }
.private-home-btn svg { width:18px; height:18px; }
.private-home-btn:hover { background:#edf3ff; }

.messages { padding:22px 28px 18px; scroll-behavior:smooth; }
.message { max-width:72%; margin-bottom:17px; }
.message-bubble { padding:11px 15px; border-radius:15px; line-height:1.38; }
.message.mine .message-bubble { border-bottom-right-radius:5px; }
.message:not(.mine) .message-bubble { border-bottom-left-radius:5px; }
.received-name { font-weight:700; color:#4b5565; margin-bottom:5px; }

.public-sender { display:flex; align-items:center; gap:7px; margin:0 0 5px 2px; min-height:28px; }
.public-sender-name { font-size:13px; font-weight:800; letter-spacing:.05px; }
.public-profile-button { width:28px; height:28px; flex:0 0 28px; padding:0; border:0; border-radius:50%; background:#eef2ff; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(20,30,50,.08); }
.public-profile-avatar { font-size:16px; line-height:1; }
.public-profile-button:not(:disabled) { cursor:pointer; }
.public-profile-button:not(:disabled):hover { transform:scale(1.06); background:#e4ebff; }
.message.mine .public-sender { justify-content:flex-end; margin-right:2px; }
.message.mine .public-profile-button { order:2; }
.message.mine .public-sender-name { order:1; }

.composer { flex:0 0 auto; position:sticky; bottom:0; z-index:8; padding:12px 18px 14px; background:rgba(255,255,255,.98); border-top:1px solid #e7ebf2; box-shadow:0 -5px 18px rgba(24,39,75,.04); }
.composer input { height:50px; padding:0 16px; border-radius:14px; background:#f9fafc; border-color:#dfe4ed; }
.composer input:focus { border-color:#4778ff; background:#fff; box-shadow:0 0 0 3px rgba(71,120,255,.09); }
.composer button { width:50px; height:50px; padding:0; border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 7px 16px rgba(71,120,255,.20); }
.composer button svg { width:22px; height:22px; }
.composer button:disabled { opacity:.65; }

.private-user { margin:3px 0; padding:12px 11px; border:1px solid transparent; }
.private-user:hover { background:#f1f5fb; border-color:#e7ebf3; }

.home-page { background:#fff; }
.home-content { max-width:680px; padding:48px 28px 55px; }
.home-logo-image { width:110px; height:110px; }
.home-content h1 { font-size:31px; letter-spacing:-.4px; }
.stats-grid { gap:16px; margin-bottom:26px; }
.stat-card { padding:20px 18px; box-shadow:0 5px 18px rgba(30,45,75,.04); }
.home-action { padding:16px 18px; transition:transform .15s, box-shadow .15s, border-color .15s; box-shadow:0 4px 15px rgba(30,45,75,.035); }
.home-action:hover { transform:translateY(-1px); border-color:#cfd9ee; box-shadow:0 7px 20px rgba(30,45,75,.07); }

/* Mobile: compact drawer, no reserved/blank space. */
@media (max-width:700px) {
    .username-screen { padding:16px; }
    .username-card { max-width:380px; padding:34px 22px; border-radius:22px; }
    .logo-image { width:82px; height:82px; }
    .chat-header { flex-basis:70px; min-height:70px; padding:12px 13px; }
    .chat-header h2 { font-size:19px; }
    .chat-header span { font-size:11px; }
    .private-home-btn { padding:8px 10px; border-radius:11px; font-size:12px; }
    .private-home-btn svg { width:17px; height:17px; }
    .messages { padding:14px 11px 12px; }
    .message { max-width:90%; margin-bottom:14px; }
    .message-bubble { padding:10px 13px; }
    .public-sender-name { font-size:12px; }
    .public-profile-button { width:27px; height:27px; flex-basis:27px; }
    .composer { padding:8px 8px calc(8px + env(safe-area-inset-bottom)); gap:7px; }
    .composer input { height:48px; padding:0 13px; border-radius:13px; }
    .composer button { width:48px; height:48px; border-radius:13px; }
    .composer button svg { width:21px; height:21px; }
    .home-content { padding:25px 14px 34px; }
    .home-logo-image { width:88px; height:88px; }
    .home-content h1 { font-size:24px; }

    /* Private list uses the same chat column, with no old drawer offset. */
    .private-list-mode .private-title { top:70px !important; left:0 !important; right:0 !important; height:37px; padding:11px 13px 6px; }
    .private-list-mode .private-chats { top:107px !important; left:0 !important; right:0 !important; bottom:0 !important; padding:42px 9px 18px !important; }
    .private-list-mode .private-user { padding:12px 10px; margin-bottom:4px; }

    /* Drawer collapsed state must give every pixel back to chat. */
    .sidebar.mobile-nav-collapsed + .chat { width:auto !important; margin-left:0 !important; }
}

/* FINAL COMPOSER POSITION FIX - keep message input at the bottom of the chat viewport */
.chat-page {
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
.chat-page .messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 92px !important;
}
.chat-page .composer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 20 !important;
}
@media (max-width:700px) {
    .chat-page .messages { padding-bottom: 76px !important; }
    .chat-page .composer {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
    }
}

/* SCROLL ISOLATION - navigation stays fixed while only chat content scrolls */
html, body {
    height: 100%;
    overflow: hidden !important;
}

body {
    overscroll-behavior: none;
}

.app {
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.sidebar {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.sidebar .private-chats {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.chat {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.chat-page {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.chat-page .messages {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Private-chat list itself remains independently scrollable, never the page. */
.private-list-mode .private-chats {
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

/* ==========================================================
   ANDROID 13+ / MODERN MOBILE FINAL LAYOUT
   ========================================================== */

/* The toolbar must never contain a second Home control. Home is navigation. */
.private-home-btn { display: none !important; }

/* Keep the two real navigation buttons visually consistent. */
.menu-item { transition: background .15s ease, color .15s ease, transform .12s ease; }
.menu-item.active { background: #e8efff; color: #285ddc; }
.menu-item:not(.active) { background: transparent; color: #334155; }
.menu-item:active { transform: scale(.985); }

/* Modern viewport sizing: stable on Android Chrome 13+ and newer. */
html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
}

body {
    min-height: 100dvh;
    background: #f7f9fc;
    overscroll-behavior: none;
}

.app {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden !important;
}

.sidebar,
.chat {
    min-height: 0 !important;
    max-height: 100dvh;
}

.chat {
    min-width: 0 !important;
    overflow: hidden !important;
}

.chat-page {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.chat-header {
    flex: 0 0 76px !important;
    min-height: 76px !important;
    box-sizing: border-box !important;
}

.chat-header-main {
    min-width: 0;
    overflow: hidden;
}

.chat-header h2,
.chat-header span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-page .privacy-banner {
    flex: 0 0 auto;
    margin: 10px 18px 0;
}

.chat-page .messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.chat-page .composer {
    flex: 0 0 auto !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 30 !important;
}

/* Public + private messages use the same compact rhythm. */
.chat-page .message {
    margin-bottom: 16px !important;
    max-width: min(72%, 680px);
}

.chat-page .message-bubble {
    line-height: 1.4;
}

/* Mobile navigation is a narrow rail by default. Tapping the chevron expands it. */
@media (max-width: 700px) {
    .app {
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .sidebar {
        width: 64px !important;
        min-width: 64px !important;
        flex: 0 0 64px !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 50 !important;
        transition: width .20s ease, min-width .20s ease, flex-basis .20s ease;
    }

    .sidebar:not(.mobile-nav-collapsed) {
        width: 220px !important;
        min-width: 220px !important;
        flex-basis: 220px !important;
        box-shadow: 5px 0 22px rgba(31,41,55,.08);
    }

    .sidebar .sidebar-header {
        height: 74px !important;
        padding: 10px 6px !important;
    }

    .sidebar .brand-block {
        min-width: 0;
        overflow: hidden;
    }

    .sidebar .sidebar-logo {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }

    .sidebar .menu {
        padding: 10px 7px !important;
        gap: 8px !important;
    }

    .sidebar .menu-item {
        min-height: 52px !important;
        padding: 0 12px !important;
        border-radius: 14px !important;
        font-size: 21px;
        gap: 12px;
        overflow: hidden;
    }

    .sidebar:not(.mobile-nav-collapsed) .menu-item {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .sidebar:not(.mobile-nav-collapsed) .menu-item span:last-child {
        display: inline !important;
        font-size: 16px;
        white-space: nowrap;
    }

    .sidebar.mobile-nav-collapsed .menu-item {
        width: 50px !important;
        height: 50px !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .sidebar.mobile-nav-collapsed .menu-item span:last-child,
    .sidebar.mobile-nav-collapsed .user-info,
    .sidebar.mobile-nav-collapsed .sidebar-header h2,
    .sidebar.mobile-nav-collapsed .sidebar-header span,
    .sidebar.mobile-nav-collapsed .icon-btn,
    .sidebar.mobile-nav-collapsed .private-title,
    .sidebar.mobile-nav-collapsed .private-chats {
        display: none !important;
    }

    .sidebar:not(.mobile-nav-collapsed) .user-info,
    .sidebar:not(.mobile-nav-collapsed) .private-title,
    .sidebar:not(.mobile-nav-collapsed) .private-chats {
        display: block !important;
    }

    .sidebar:not(.mobile-nav-collapsed) .user-box {
        justify-content: flex-start !important;
        padding: 10px 12px !important;
    }

    .sidebar.mobile-nav-collapsed .user-box {
        justify-content: center !important;
        padding: 10px 7px !important;
    }

    .sidebar .mobile-nav-toggle {
        display: flex !important;
        width: 32px !important;
        height: 32px !important;
        top: 82px !important;
        right: -16px !important;
        border: 1px solid #dfe5f0 !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: #4b5565 !important;
        box-shadow: 0 2px 8px rgba(31,41,55,.12) !important;
        z-index: 60 !important;
    }

    .sidebar:not(.mobile-nav-collapsed) .mobile-nav-toggle {
        top: 82px !important;
        right: 8px !important;
    }

    .sidebar.mobile-nav-collapsed + .chat {
        width: auto !important;
        flex: 1 1 auto !important;
    }

    .chat-header {
        flex-basis: 68px !important;
        min-height: 68px !important;
        height: 68px !important;
        padding: 10px 12px !important;
    }

    .chat-header h2 { font-size: 18px !important; }
    .chat-header span { font-size: 11px !important; }

    .chat-page .privacy-banner {
        margin: 8px 10px 0 !important;
        padding: 10px 11px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        border-radius: 10px !important;
    }

    .chat-page .messages {
        padding: 13px 10px 86px !important;
    }

    .chat-page .message {
        max-width: 92% !important;
        margin-bottom: 13px !important;
    }

    .chat-page .public-sender {
        margin-bottom: 4px !important;
        min-height: 27px !important;
    }

    .chat-page .message-bubble {
        max-width: 100%;
        padding: 10px 13px !important;
        border-radius: 14px !important;
    }

    .chat-page .composer {
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 7px !important;
        background: rgba(255,255,255,.98) !important;
    }

    .chat-page .composer input {
        min-width: 0 !important;
        height: 48px !important;
        font-size: 16px !important;
        padding: 0 13px !important;
        border-radius: 14px !important;
    }

    .chat-page .composer button {
        flex: 0 0 48px !important;
        width: 48px !important;
        height: 48px !important;
        padding: 0 !important;
        border-radius: 14px !important;
    }

    /* Private list is rendered in the chat column, never under the nav rail. */
    .private-list-mode .private-title {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 68px !important;
        height: 38px !important;
        padding: 11px 12px 5px !important;
        box-sizing: border-box !important;
        background: #fff !important;
        z-index: 5 !important;
    }

    .private-list-mode .private-chats {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 106px !important;
        bottom: 0 !important;
        width: auto !important;
        padding: 8px 9px 16px !important;
        overflow-y: auto !important;
        z-index: 4 !important;
        background: #f7f9fc !important;
    }

    .private-list-mode .private-user {
        width: 100% !important;
        padding: 12px 10px !important;
        margin: 0 0 5px !important;
        border-radius: 12px !important;
        background: #fff !important;
    }
}

/* Extra-small Android phones */
@media (max-width: 380px) {
    .sidebar:not(.mobile-nav-collapsed) {
        width: 200px !important;
        min-width: 200px !important;
        flex-basis: 200px !important;
    }

    .chat-header { padding-left: 10px !important; padding-right: 10px !important; }
    .chat-header h2 { font-size: 17px !important; }
    .chat-page .messages { padding-left: 8px !important; padding-right: 8px !important; }
    .chat-page .message { max-width: 94% !important; }
}

/* Desktop/tablet: clean two-column app without mobile-only rules. */
@media (min-width: 701px) {
    .sidebar { width: 290px; min-width: 290px; }
    .chat-page .messages { padding: 20px 24px 96px !important; }
    .chat-page .composer { padding: 11px 16px 13px !important; }
}

/* Final mobile navigation rule: sidebar is navigation only. Private chat list
   belongs to the Home > Private Chats screen, so it must not duplicate here. */
@media (max-width: 700px) {
    .sidebar .private-title,
    .sidebar .private-chats {
        display: none !important;
    }

    .sidebar:not(.mobile-nav-collapsed) .private-title,
    .sidebar:not(.mobile-nav-collapsed) .private-chats {
        display: none !important;
    }

    .sidebar:not(.mobile-nav-collapsed) .user-info {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* FINAL VISIBILITY FIX: .chat-page display rules must never override .hidden */
.hidden {
    display: none !important;
}

/* MOBILE PRIVATE LIST: render online/saved users in the main content area.
   Desktop layout remains unchanged. */
@media (max-width: 700px) {
    .private-list-mode .chat-page .messages {
        display: block !important;
        padding: 10px !important;
        background: #f7f9fc !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .private-list-mode .chat-page .messages .private-user {
        display: flex !important;
        width: 100% !important;
        min-height: 58px !important;
        margin: 0 0 7px !important;
        padding: 10px 11px !important;
        box-sizing: border-box !important;
        border: 1px solid #e6ebf3 !important;
        border-radius: 13px !important;
        background: #fff !important;
        text-align: left !important;
    }

    .private-list-mode .chat-page .messages .empty-private {
        padding: 28px 10px !important;
        text-align: center !important;
        color: #8a94a6 !important;
    }
}

/* MOBILE ONLY: Private Chats belongs inside the navigation drawer.
   Do not move or alter the desktop private-chat layout. */
@media (max-width: 700px) {
    .sidebar:not(.mobile-nav-collapsed) .private-title {
        display: block !important;
        position: static !important;
        height: auto !important;
        padding: 14px 12px 7px !important;
        margin: 0 !important;
        font-size: 10px !important;
        background: transparent !important;
    }

    .sidebar:not(.mobile-nav-collapsed) .private-chats {
        display: block !important;
        position: static !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: auto !important;
        height: auto !important;
        padding: 0 8px 10px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: transparent !important;
        border: 0 !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .sidebar.mobile-nav-collapsed .private-title,
    .sidebar.mobile-nav-collapsed .private-chats {
        display: none !important;
    }

    .sidebar:not(.mobile-nav-collapsed) .private-user {
        width: 100% !important;
        min-height: 54px !important;
        margin: 2px 0 !important;
        padding: 8px 7px !important;
        border-radius: 11px !important;
    }

    .sidebar:not(.mobile-nav-collapsed) .private-avatar {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
    }

    /* The old mobile private-list page must stay disabled. */
    .private-list-mode .chat-page .messages .private-user,
    .private-list-mode .chat-page .messages .empty-private {
        display: none !important;
    }
}

/* ==========================================================
   HUMTUM CHAT v1.1 — ONLY REQUESTED UPDATES
   ========================================================== */

/* Home action buttons: clearer separation. */
.home-content .home-action + .home-action { margin-top: 22px !important; }

/* Chat timestamps/date grouping use the viewer's local timezone. */
.messages { scroll-behavior: auto !important; }
.date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 14px 0 12px;
    width: 100%;
    pointer-events: none;
}
.date-separator span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 10px;
    background: #eef2f7;
    color: #697586;
    font-size: 10px;
    font-weight: 600;
}

/* Private-chat header status. */
.private-header-dot { font-size: 13px; vertical-align: 1px; }
.private-status-text { font-weight: 500; }

/* Long-press delete action for saved private chats. */
.private-user { position: relative !important; }
.private-delete-btn {
    display: none;
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: #fff0f0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 5;
}
.private-user.show-delete .private-delete-btn { display: inline-flex; }
.private-user.show-delete .private-user-info { padding-right: 42px; }

/* Modern mobile viewport sizing for Android 13+ and newer. */
@media (max-width:700px) {
    html, body, .app { height: 100dvh !important; min-height: 0 !important; }
    .chat, .chat-page { height: 100% !important; min-height: 0 !important; }
    .chat-page .messages { scroll-behavior: auto !important; }
    .date-separator { margin: 12px 0 10px; }
    .date-separator span { font-size: 9px; padding: 5px 9px; }
    .private-delete-btn { right: 7px; width: 32px; height: 32px; }
}

/* v1.1 drawer visibility is controlled by the current screen. */
.sidebar:not(.drawer-private-view) .private-title,
.sidebar:not(.drawer-private-view) .private-chats {
    display: none !important;
}
.sidebar.drawer-private-view .private-title,
.sidebar.drawer-private-view .private-chats {
    display: block !important;
}
.sidebar.drawer-private-view .private-chats {
    overflow-y: auto !important;
}

/* v1.1 final status colors and public online counter */
.public-online-count {
    color: #2563eb !important;
    font-weight: 600;
    margin-left: 5px;
}
.private-status-offline { color: #dc2626 !important; }
.private-status-online { color: #16a34a !important; }
.private-delete-btn:active { transform: translateY(-50%) scale(.94); }

/* v1.1 FIX: keep the current user's profile pinned to the bottom of the
   navigation drawer on Home, Public Group, and Private Chat screens. */
.sidebar .user-box {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* v1.1 PROFILE POSITION FIX
   Keep only the current user's profile at the bottom of the navigation drawer.
   Home/Public Group buttons remain at the top. */
.sidebar {
    position: relative !important;
}
.sidebar .user-box {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
    background: #fafbfe !important;
}

/* Keep private-chat entries clear of the bottom profile area when the drawer is open. */
@media (max-width:700px) {
    .sidebar:not(.mobile-nav-collapsed) .private-chats {
        padding-bottom: 82px !important;
    }
}

/* v1.1 FINAL NAV RULE:
   Public Group is opened from the Home action, not from the navigation drawer.
   Keep the drawer to Home (and Private Chats only in private view). */
.sidebar #publicChatBtn {
    display: none !important;
}

/* v2.1a - Account Setup Landing Page */
.username-screen {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    padding: 34px 20px 40px;
}

.landing-brand {
    text-align: center;
    flex-shrink: 0;
}

.landing-brand .logo-image {
    margin-bottom: 8px;
}

.landing-brand h1 {
    font-size: 30px;
    margin: 0;
}

.account-setup-card {
    margin-top: 26px;
    max-width: 440px;
    text-align: left;
}

.account-setup-card h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 8px;
}

.account-setup-card > p {
    text-align: center;
    margin-bottom: 25px;
}

.account-setup-card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #394150;
    margin: 0 0 7px;
}

.account-setup-card input,
.account-setup-card select {
    width: 100%;
    padding: 14px;
    border: 1px solid #d9deea;
    border-radius: 10px;
    outline: none;
    margin-bottom: 16px;
    background: #fff;
    color: #172033;
}

.account-setup-card input:focus,
.account-setup-card select:focus {
    border-color: #4778ff;
}

.account-setup-card #continueBtn {
    margin-top: 4px;
}

.legal-links {
    margin-top: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    padding-bottom: 10px;
}

.legal-links button {
    border: none;
    background: transparent;
    padding: 4px;
    color: #4778ff;
    cursor: pointer;
}

.legal-links button:hover {
    text-decoration: underline;
}

/* v2.1a - Single read-only Legal Page */
.legal-page {
    min-height: 100vh;
    min-height: 100dvh;
    background: #f4f6fb;
    overflow-y: auto;
    padding: 24px 20px 40px;
}

.legal-card {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 28px 32px 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.legal-back {
    border: none;
    background: transparent;
    color: #4778ff;
    font-weight: 600;
    padding: 4px 0;
    cursor: pointer;
}

.legal-header {
    text-align: center;
    padding: 8px 0 28px;
}

.legal-header img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
    margin: 0 auto 8px;
}

.legal-header h1 {
    font-size: 28px;
    margin-bottom: 6px;
}

.legal-header p {
    color: #7a8392;
    font-size: 13px;
}

.legal-section {
    color: #394150;
    line-height: 1.65;
}

.legal-section h2 {
    color: #172033;
    font-size: 22px;
    margin: 28px 0 10px;
}

.legal-section h2:first-child {
    margin-top: 0;
}

.legal-section h3 {
    color: #172033;
    font-size: 15px;
    margin: 18px 0 6px;
}

.legal-section p {
    font-size: 14px;
    margin-bottom: 10px;
}

@media (max-width: 700px) {
    .username-screen {
        padding: 25px 15px 30px;
    }

    .account-setup-card {
        margin-top: 22px;
        padding: 28px 22px;
    }

    .legal-links {
        margin-top: 200px;
    }

    .legal-page {
        padding: 12px;
    }

    .legal-card {
        border-radius: 16px;
        padding: 22px 18px 30px;
    }
}


/* ALL USERS / ENTERHUB */
.all-users-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #f7f9fc;
}

.page-header {
    min-height: 75px;
    padding: 18px 25px;
    border-bottom: 1px solid #e5e8ef;
    background: white;
}

.page-header h2 {
    font-size: 18px;
    margin-bottom: 4px;
}

.page-header span {
    color: #8a91a0;
    font-size: 12px;
}

.all-users-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.all-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 12px;
    background: white;
    border-bottom: 1px solid #eef1f5;
}

.all-user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e9edff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.all-user-info {
    min-width: 0;
}

.all-user-name {
    font-weight: 600;
    color: #172033;
    font-size: 14px;
    margin-bottom: 5px;
}

.all-user-status {
    color: #8a91a0;
    font-size: 12px;
}

.all-user-status.online {
    color: #27a66f;
}

.empty-page-message {
    padding: 30px;
    text-align: center;
    color: #9299a8;
    font-size: 13px;
}

@media (max-width: 700px) {
    .page-header {
        padding: 18px 15px;
    }

    .all-users-list {
        padding: 10px;
    }
}

/* v2.2a All User status alignment */
.all-user-info {
    flex: 1;
    text-align: left;
}

.all-user-status {
    display: block;
    width: 100%;
    text-align: left;
}


/* v4.1.2 FINAL UI RESTORE + COMPACT HOME CARDS */
.all-users-list {
    gap: 2px;
}
.all-user-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    margin: 0 0 2px 0;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(30,45,75,.06);
    box-sizing: border-box;
    text-align: left;
}
.all-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eef1ff;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
}
.all-user-info {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
.all-user-name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 5px;
    color: #172033;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.all-user-status {
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 1.25;
    color: #8a91a0;
    text-align: left;
    white-space: nowrap;
}
.all-user-status.online { color: #27a66f; }
.all-user-meta {
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    font-size: 20px;
    line-height: 1;
    color: #111;
}
.all-user-gender.female { color: #e91e63; }
.all-user-gender.male { color: #111; }
.all-user-age { font-size: 20px; color: #111; }

/* Home Public/Private cards: compact, content-driven and responsive. */
#homePage .home-action.v410-home-action {
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 14px !important;
    margin: 0 0 10px 0 !important;
    border-radius: 16px !important;
}
#homePage .home-action .v410-action-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 28px !important;
}
#homePage .home-action .v410-action-copy {
    min-width: 0 !important;
    align-items: flex-start !important;
    gap: 2px !important;
}
#homePage .home-action .v410-action-copy strong {
    font-size: 20px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
#homePage .home-action .v410-action-copy small {
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
#homePage .home-action .v410-action-end {
    width: 34px !important;
    height: 34px !important;
}
#homePage .v410-action-end svg { width: 25px !important; height: 25px !important; }

@media (max-width:700px) {
    .all-user-item { padding: 12px 14px; gap: 12px; }
    .all-user-avatar { width: 46px; height: 46px; flex-basis: 46px; }
    .all-user-name { font-size: 16px; }
    .all-user-status { font-size: 13px; }
    .all-user-meta { min-width: 44px; font-size: 18px; }
    .all-user-age { font-size: 18px; }
    #homePage .home-action.v410-home-action {
        grid-template-columns: 50px minmax(0, 1fr) auto !important;
        padding: 10px 11px !important;
        margin-bottom: 9px !important;
        border-radius: 14px !important;
    }
    #homePage .home-action .v410-action-icon {
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        font-size: 25px !important;
    }
    #homePage .home-action .v410-action-copy strong { font-size: 18px !important; }
    #homePage .home-action .v410-action-copy small { font-size: 12px !important; }
    #homePage .home-action .v410-action-end { width: 30px !important; height: 30px !important; }
    #homePage .v410-action-end svg { width: 22px !important; height: 22px !important; }
}


/* FINAL OVERRIDES - account setup always starts at top so logo cannot be clipped. */
#usernameScreen:not(.hidden) {
    justify-content: flex-start !important;
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
#usernameScreen .landing-brand .logo-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* FINAL compact flexible Home cards. */
#homePage .home-action.v410-home-action {
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
    border-radius: 15px !important;
    overflow: visible !important;
}
#homePage .home-action .v410-action-icon { width: 46px !important; height: 46px !important; font-size: 26px !important; border-radius: 13px !important; }
#homePage .home-action .v410-action-copy strong { font-size: 19px !important; white-space: normal !important; }
#homePage .home-action .v410-action-copy small { font-size: 12px !important; white-space: normal !important; }
#homePage .home-action .v410-action-end { width: 30px !important; height: 30px !important; }
@media (max-width:700px) {
    #usernameScreen:not(.hidden) { padding-top: 20px !important; }
    #usernameScreen .landing-brand .logo-image { width: 72px !important; height: 72px !important; }
    #homePage .home-action.v410-home-action { grid-template-columns: 48px minmax(0,1fr) auto !important; padding: 9px 10px !important; margin-bottom: 8px !important; }
    #homePage .home-action .v410-action-icon { width: 42px !important; height: 42px !important; font-size: 24px !important; }
    #homePage .home-action .v410-action-copy strong { font-size: 17px !important; }
    #homePage .home-action .v410-action-copy small { font-size: 11px !important; }
}

/* ACCOUNT SETUP SCROLL-ONLY FIX
   This block intentionally targets ONLY #usernameScreen.
   No Home, All User, Private Chat, or Public Group styles are changed. */
#usernameScreen:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
}

#usernameScreen .landing-brand,
#usernameScreen .account-setup-card,
#usernameScreen .legal-links {
    flex: 0 0 auto !important;
}

#usernameScreen .landing-brand {
    width: 100% !important;
}

#usernameScreen .landing-brand .logo-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}