/* Main/common CSS split from original. */

/* ============================================
   Kiters Messenger – refined styles.css
   Profile + Ads + Menu fixed | Only posts scroll
   Responsive buttons | Private left-right bubbles
   ============================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}



html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background: #f0f1f0;
    color: #222;
    -webkit-tap-highlight-color: transparent;
}



body {
    display: flex;
    justify-content: center;
    align-items: stretch;
}



/* ---------- Buttons (global) ---------- */
button,
.button {
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.2;
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s ease;
}



button:hover,
.button:hover {
    background-color: #218838;
}



button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}



/* ---------- Login ---------- */
#login-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 340px);
    text-align: center;
    padding: 20px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    background: #fff;
    z-index: 20;
}



#login-container img {
    max-width: 140px;
    height: auto;
}



#login-container h1 {
    font-size: 1.4rem;
    margin: 8px 0 12px;
}



#login-container input[type="text"],
#login-container input[type="email"],
#login-container input[type="tel"],
#login-container input[type="password"],
#login-container select,
#otp-section input {
    width: 100%;
    padding: 11px 12px;
    margin: 6px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}



#login-container input:focus,
#login-container select:focus,
#otp-section input:focus {
    border-color: #28a745;
}



#login-button {
    background-color: #007bff !important;
}



#register-button {
    background-color: #28a745 !important;
}



#auth-message {
    font-size: 13px;
    min-height: 18px;
    margin-top: 8px;
}



/* ---------- Main chat shell ---------- */
#chat-container {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 6px 8px 0;
    height: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}



#chat-header {
    flex: 0 0 auto;
}



#profile-container {
    display: flex;
    align-items: center;
    justify-content: center;
}



#left-ad,
#right-ad {
    width: clamp(70px, 22vw, 125px);
    height: clamp(70px, 22vw, 125px);
    border: 1px solid green;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
}



#profile-pic {
    cursor: pointer;
    width: clamp(80px, 28vw, 135px);
    height: clamp(75px, 26vw, 125px);
    border-radius: 5px;
    border: 2px solid #4CAF50;
    object-fit: cover;
}



/* Top toolbar buttons – responsive */
#chat-container > h3 {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(4px, 1.5vw, 8px);
    align-items: center;
    justify-content: center;
    margin: 6px 0;
    padding: 0 4px;
    position: relative;
}



#chat-container > h3 .button {
    flex: 1 1 auto;
    min-width: 36px;
    max-width: 70px;
    padding: clamp(6px, 2vw, 10px) clamp(8px, 2.5vw, 16px);
    font-size: clamp(12px, 3.5vw, 16px);
    text-align: center;
    box-sizing: border-box;
}



#contact-title {
    background-color: #007bff;
    color: #fff;
}



@media (max-width: 360px) {
    #chat-container > h3 .button {
        min-width: 32px;
        max-width: 56px;
        padding: 6px 6px;
        font-size: 12px;
    }
}



@media (min-width: 361px) and (max-width: 480px) {
    #chat-container > h3 .button {
        min-width: 36px;
        max-width: 64px;
        padding: 7px 10px;
        font-size: 13px;
    }
}



/* ---------- Contacts / Friends list ---------- */
#contacts {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    background: #fff;
    border-radius: 10px;
    width: 100%;
}



#contacts.expanded {
    max-height: 50vh;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #ddd;
    margin-bottom: 8px;
}



.contacts-mode-header {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 2px 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: 6px;
    color: #333;
}



#contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}



#contact-list li {
    list-style: none;
    padding: 8px 4px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}



#contact-list li:last-child {
    border-bottom: none;
}



#contact-list li:active {
    background: #f5f5f5;
}



/* ---------- Public messages – ONLY this scrolls ---------- */
/* ---------- Public messages – ONLY this scrolls ---------- */
#messages {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 12px;
    background: #fafafa;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    -webkit-overflow-scrolling: touch;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}



#messages p {
    margin: 4px 0;
}



.post-container {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 10px;
    margin: 6px 0;
    background: #fafafa;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}



.post-container.current-user {
    background: #e8f5e9;
}



.post-container.other-user {
    background: #fff;
}





/* ==================== FIX: Left-Right bubbles ==================== */
/* ==================== PUBLIC CHAT = PRIVATE CHAT STYLE ==================== */

.message {
    padding: 8px 12px;
    border-radius: 12px;
    margin: 4px 0;
    max-width: 100%;
    display: inline-block;
}



.current-user {
    background-color: #dcf8c6;
    text-align: right;
    margin-left: auto;
    display: block;
}



.other-user {
    background-color: #fff;
    text-align: left;
    margin-right: auto;
    display: block;
    border: 1px solid #eee;
}



/* ---------- Public input row – fixed at bottom ---------- */
#chat-container > .input-group {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.5vw, 8px);
    width: 100%;
    padding: clamp(4px, 1.5vw, 8px);
    margin-top: 6px;
    margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
}



#chat-container > .input-group .button {
    flex-shrink: 0;
    width: clamp(36px, 10vw, 44px);
    height: clamp(36px, 10vw, 44px);
    min-width: clamp(36px, 10vw, 44px);
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(13px, 3.5vw, 16px);
}



textarea#message-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: clamp(8px, 2vw, 12px);
    font-size: clamp(14px, 3.8vw, 16px);
    border-radius: 8px;
    resize: none;
    height: clamp(36px, 10vw, 44px);
    background: transparent;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}



/* ---------- Private chat FULL SCREEN ---------- */
#private-chat-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-width: none;
    margin: 0;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
}



#private-chat-container .header-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 10px 14px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}



/* Profile pic + user info side by side, center */
#private-chat-user {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}



#private-chat-user .profile-picture-container {
    flex-shrink: 0;
}



#private-chat-user .profile-picture {
    width: 64px;
    height: 64px;
    border-radius: 10%;
    object-fit: cover;
    border: 3px solid #4CAF50;
    display: block;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}



#private-chat-user .user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    text-align: left;
}



#private-chat-user .user-info .user-name {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



#private-chat-user .user-info .user-status {
    font-size: 13px;
    font-weight: 500;
}



#private-chat-user .user-profile-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-top: 3px;
    max-width: min(70vw, 420px);
    font-size: 12px;
    line-height: 1.35;
    color: #555;
    white-space: normal;
    overflow-wrap: anywhere;
}



#private-chat-user .profile-detail-sep {
    color: #999;
}



#private-chat-user .private-chat-blocked {
    color: #d9534f;
    font-size: 12px;
    font-weight: 600;
}



/* Buttons neeche */
#private-chat-container .header-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
}



#private-chat-container .header-buttons .button {
    min-width: 40px;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 12px;
    background: #007bff;
    border-radius: 100px;
    margin: 0;
}



#private-chat-container .header-buttons .button:hover {
    background: #0056b3;
}



#block-private-user {
    background: #6c757d !important;
}



#close-private-chat {
    background: #dc3545 !important;
}



#private-messages {
    flex: 1 1 auto;
    min-height: 0;
    height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    background: #f9f9f9;
    -webkit-overflow-scrolling: touch;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}



#private-messages p {
    margin: 4px 0;
}



#private-messages .post-container {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 12px;
    margin: 6px 0;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    box-sizing: border-box;
    clear: both;
}



#private-messages .post-container.current-user {
    margin-left: auto !important;
    margin-right: 0 !important;
    background-color: #dcf8c6 !important;
    text-align: left;
    float: right;
}



#private-messages .post-container.other-user {
    margin-right: auto !important;
    margin-left: 0 !important;
    background-color: #fff !important;
    border: 1px solid #eee;
    float: left;
}



#private-messages .message {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 12px;
    margin: 4px 0;
    font-size: 14px;
    clear: both;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}



#private-messages .current-user {
    margin-left: auto;
    margin-right: 0;
    background-color: #dcf8c6;
    text-align: left;
}



#private-messages .other-user {
    margin-right: auto;
    margin-left: 0;
    background-color: #fff;
    border: 1px solid #eee;
}



#private-chat-container .input-group {
    display: flex;
    align-items: flex-end;
    gap: clamp(4px, 1.5vw, 8px);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(6px, 1.5vw, 10px) clamp(6px, 2vw, 12px);
    padding-bottom: calc(clamp(6px, 1.5vw, 10px) + env(safe-area-inset-bottom, 0px));
    background: #f0f0f0;
    border: none;
    border-top: 1px solid #ddd;
    border-radius: 0;
    flex-shrink: 0;
    box-sizing: border-box;
}



textarea#private-message-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    padding: clamp(10px, 2.5vw, 14px) clamp(12px, 3vw, 16px);
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.3;
    border-radius: 22px;
    background: #fff;
    resize: none;
    height: clamp(40px, 11vw, 48px);
    min-height: clamp(40px, 11vw, 48px);
    max-height: 120px;
    overflow-y: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    -webkit-text-fill-color: #222;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}



#send-private-button,
#clear-private-chat,
#select-private-media-button {
    flex-shrink: 0;
    width: clamp(36px, 10vw, 44px);
    height: clamp(36px, 10vw, 44px);
    min-width: clamp(36px, 10vw, 44px);
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(13px, 3.5vw, 16px);
    margin: 0;
}



#send-private-button {
    background: #25d366 !important;
}



#clear-private-chat {
    background: #6c757d !important;
}



#select-private-media-button {
    background: #007bff !important;
}



/* ---------- Profile ---------- */
.profile-picture {
    border: 2px solid #4CAF50;
    border-radius: 50%;
    object-fit: cover;
}



.user-info {
    text-align: center;
}



.small-font {
    font-size: 12px;
    color: #555;
    margin: 0;
}



/* ---------- GIF Modal / Iframe ---------- */
#gif-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}



#modal-content {
    background: #fff;
    margin: 10% auto;
    padding: 16px;
    border-radius: 12px;
    width: min(92vw, 400px);
    max-height: 100vh;
    overflow-y: auto;
}



#closeModal {
    float: right;
    font-size: 24px;
    cursor: pointer;
    font-weight: bold;
}



#iframe-container {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    z-index: 2000;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
}



#iframe-container iframe {
    width: 100%;
    height: 100%;
    height: 100dvh;
    border: none;
    display: block;
}

#close-iframe-button {
    width: 100%;
    border-radius: 0;
    background: #28a745;
}

/* ---------- Toast / Popup ---------- */
#notification-toast {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    z-index: 2147483647 !important;
    max-width: 90vw;
    pointer-events: none;
}

/* ---------- Notifications panel (Accept/Reject + all notifs) ---------- */
.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.notif-badge.hidden { display: none !important; }

.notif-panel {
    position: absolute;
    top: 100%;
    left: 8px;
    right: 8px;
    max-width: 360px;
    margin-top: 6px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    z-index: 5000;
    overflow: hidden;
}
.notif-panel.hidden { display: none !important; }

.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(135deg, #f6f6f9, #e7eaf3);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}
.notif-panel-header button {
    background: transparent;
    border: none;
    color: #172033;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.notif-list {
    max-height: 320px;
    overflow-y: auto;
    background: #fafafa;
}

.notif-empty {
    padding: 24px 16px;
    text-align: center;
    color: #888;
    font-size: 13px;
}

.notif-item {
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
    background: #fff;
}
.notif-item:last-child { border-bottom: none; }
.notif-item.notif-friend-req {
    background: #f0faf4;
    border-left: 3px solid #27ae60;
}

.notif-item-main {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.notif-icon {
    font-size: 20px;
    line-height: 1.2;
    flex-shrink: 0;
}
.notif-body { flex: 1; min-width: 0; }
.notif-msg {
    font-size: 13px;
    color: #222;
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
}
.notif-meta {
    font-size: 11px;
    color: #888;
    margin-top: 3px;
}

.notif-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-left: 30px;
}
.notif-accept-btn,
.notif-reject-btn {
    flex: 1;
    padding: 7px 12px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.notif-accept-btn {
    background: #27ae60;
    color: #fff;
}
.notif-accept-btn:hover { background: #219a52; }
.notif-reject-btn {
    background: #ecf0f1;
    color: #c0392b;
}
.notif-reject-btn:hover { background: #dde4e6; }

.notif-acted {
    margin-top: 8px;
    padding-left: 30px;
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.popup {
    position: fixed;
    bottom: 20px;
    right: 12px;
    width: min(92vw, 300px);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 1200;
}

.popup.hidden {
    display: none !important;
}

.popup-header {
    background: #007bff;
    color: #fff;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px 10px 0 0;
}

#popupMessageContent {
    padding: 12px;
    font-size: 14px;
}

.bottom-right {
    position: fixed;
    bottom: 8px;
    right: 8px;
    font-size: 10px;
    color: #004d00;
    background: rgba(255, 255, 255, 0.75);
    padding: 4px 6px;
    border-radius: 4px;
    z-index: 5;
}

/* ---------- Misc ---------- */
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.icon-button:hover {
    background: #eee;
    color: #222;
}

.right {
    font-size: 11px;
    color: #888;
    margin-top: 12px;
}

/* ===== Media Modal Tabs ===== */
.media-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.media-tab {
    flex: 1;
    padding: 9px 0;
    border: none;
    border-radius: 8px;
    background: #eaedf1;
    color: #172033;
    font-weight: 600;
    cursor: pointer;
}

.media-tab.active {
    background: #27ae60;
}

.search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.search-row input {
    flex: 1;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.search-row button {
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    background: #3498db;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 8px;
    max-height: 500px;
    overflow-y: auto;
}

.media-grid img {
    width: 100%;
    height: 95px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.15s;
}

.media-grid img:hover {
    transform: scale(1.05);
}

/* old call styles removed - see bottom */





/* =====================================================
   FULL SCREEN CALL (final, highest priority)
   ===================================================== */
#call-container {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #0a0a0a !important;
    z-index: 99999 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

#call-container.active {
    display: flex !important;
}

#remote-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    background: #111 !important;
    z-index: 1;
}

/* Video call: small PIP local camera */
#local-video {
    position: absolute !important;
    bottom: max(110px, calc(env(safe-area-inset-bottom, 0px) + 100px)) !important;
    right: 16px !important;
    width: 110px !important;
    height: 150px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    border: 2px solid #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
    z-index: 5 !important;
    background: #333 !important;
}

/* AUDIO CALL: hide the small local video window completely */
#call-container.audio-mode #local-video {
    display: none !important;
}

/* AUDIO CALL: centered avatar + name instead of small window */
#call-audio-ui {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    text-align: center;
    z-index: 4;
    color: #fff;
}
#call-container.audio-mode #call-audio-ui {
    display: block;
}
#call-audio-ui img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #4CAF50;
    box-shadow: 0 0 30px rgba(76,175,80,0.35);
    margin-bottom: 18px;
    background: #222;
}
#call-audio-ui .call-audio-name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}
#call-audio-ui .call-audio-label {
    font-size: 14px;
    color: #aaa;
}

#call-status {
    position: absolute !important;
    top: 50px !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
    z-index: 6 !important;
    pointer-events: none !important;
}

.call-controls {
    position: absolute !important;
    bottom: max(40px, calc(env(safe-area-inset-bottom, 0px) + 24px)) !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    display: flex !important;
    gap: 16px !important;
    margin: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    padding: 12px 20px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    align-items: center !important;
}

/* ========== CALL CONTROL BUTTONS ========== */
.call-ctrl-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #2c3e50;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.call-ctrl-btn:hover { transform: scale(1.08); }
.call-ctrl-btn.end { background: #e74c3c; }
.call-ctrl-btn.active-speaker { background: #27ae60; }
.call-ctrl-btn.active-earpiece { background: #2980b9; }
.call-ctrl-btn.muted { background: #e74c3c; }
.call-signal {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 0 6px;
    white-space: nowrap;
}

/* ========== INCOMING CALL OVERLAY ========== */
#incoming-call-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}
#incoming-call-overlay.hidden {
    display: none !important;
}
.incoming-call-box {
    background: linear-gradient(145deg, #1a1a2e, #16213e);
    border-radius: 24px;
    padding: 36px 28px 32px;
    text-align: center;
    max-width: 320px;
    width: 90%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    color: #fff;
}
.incoming-call-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto 18px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #4CAF50;
    box-shadow: 0 0 20px rgba(76,175,80,0.4);
}
.incoming-call-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#incoming-call-name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}
#incoming-call-type {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 28px;
}
.incoming-call-actions {
    display: flex;
    justify-content: center;
    gap: 40px;
}
.incoming-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    font-size: 26px;
    color: #172033;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
}
.incoming-btn:hover { transform: scale(1.1); }
.incoming-btn.accept {
    background: #27ae60;
    box-shadow: 0 6px 18px rgba(39,174,96,0.45);
}
.incoming-btn.reject {
    background: #e74c3c;
    box-shadow: 0 6px 18px rgba(231,76,60,0.45);
}

/* ========== IMAGE PREVIEW MODAL ========== */
#image-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
}
#image-preview-modal.hidden {
    display: none !important;
}
.image-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.9);
}
.image-preview-content {
    position: relative;
    max-width: 95vw;
    max-height: 90vh;
    z-index: 1;
}
.image-preview-content img {
    max-width: 95vw;
    max-height: 85vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.image-preview-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 36px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 10px;
}
.image-preview-close:hover { color: #ff6b6b; }

#private-chat-user .profile-picture {
    cursor: pointer;
    transition: transform 0.15s;
}
#private-chat-user .profile-picture:hover {
    transform: scale(1.08);
}

.notif-item-main {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.notif-delete-btn {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #888;
    font-size: 22px;
    line-height: 22px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 50%;
}

.notif-delete-btn:hover {
    background: #eee;
    color: #d00;
}

.notif-body {
    flex: 1;
    min-width: 0;
}




/* ========== REELS (modern mobile full-screen) ========== */
#reels-btn {
    background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af);
    color: #fff;
}

#reels-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    width: 100vw;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: 100%;
    z-index: 12000;
    background: #000;
    display: flex;
    flex-direction: column;
    color: #fff;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}

#reels-overlay.hidden {
    display: none !important;
}

.reels-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top, 10px));
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
    pointer-events: none;
}

.reels-topbar button {
    pointer-events: auto;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}

.reels-topbar .reels-title {
    pointer-events: none;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.3px;
}

.reels-feed {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    /* no scroll-behavior:smooth — causes lag with snap on mobile */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-snap-stop: always;
}

.reels-empty {
    min-height: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 15px;
    padding: 28px;
    text-align: center;
    line-height: 1.5;
}

.reel-item {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #000;
    display: block;
    overflow: hidden;
}

.reel-item .reel-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    background: #000 !important;
    z-index: 1;
    display: block !important;
}

.reel-item video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    background: #000 !important;
    z-index: 1;
}

.reel-meta {
    position: absolute;
    left: 14px;
    right: 76px;
    bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 20px));
    z-index: 3;
    text-shadow: 0 2px 8px rgba(0,0,0,0.75);
    pointer-events: none;
}

.reel-meta .reel-user {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
}

.reel-meta .reel-caption {
    font-size: 13px;
    opacity: 0.95;
    margin-bottom: 6px;
    max-height: 3.6em;
    overflow: hidden;
}

.reel-meta .reel-music-line {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reel-meta .reel-views {
    font-size: 12px;
    opacity: 0.85;
}

.reel-side {
    position: absolute;
    right: 8px;
    bottom: max(110px, calc(env(safe-area-inset-bottom, 0px) + 90px));
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}

.reel-action {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 2px;
}

.reel-action .reel-ico {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.reel-action i {
    font-size: 22px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.reel-action-count {
    font-size: 11px;
    font-weight: 600;
}

.reel-action.reel-like.active .reel-ico i {
    color: #ff2d55;
}

.reel-action.reel-dislike.active .reel-ico i {
    color: #4fc3f7;
}

.reel-action.reel-delete .reel-ico i {
    color: #ff6b6b;
}

.reels-uploading {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.78);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    z-index: 30;
    font-size: 15px;
    font-weight: 600;
}

.reels-uploading.hidden {
    display: none !important;
}

.reels-upload-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(36,55,85,0.20);
    border-top-color: #e91e63;
    border-radius: 50%;
    animation: reels-spin 0.8s linear infinite;
}

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

/* Iske baad normal CSS */
.top-card {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.kite-admin-head h2{font-size:24px}

.kite-admin-tabs{top:70px;overflow:auto}

.kite-report-grid{grid-template-columns:80px 1fr}

.kite-admin-thumb,.kite-admin-thumb-placeholder{width:80px;height:105px}

.kite-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

}


/* ===== WhatsApp-style chat composer ===== */
.chat-composer {
    gap: 5px !important;
}
.chat-composer textarea {
    min-width: 0;
}
.chat-tool-button {
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f0f2f5 !important;
    color: #333 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border: 0 !important;
}
.chat-tool-button:hover { background:#e4e6e9 !important; }
.chat-tool-button[id$="-gif-button"] { font-size:11px !important; color:#7b1fa2 !important; }

/* Group composer pickers must render above the full-screen group page, not behind/on the public screen. */
body.kite-group-media-context #chat-emoji-picker,
body.kite-group-media-context #chat-sticker-picker,
body.kite-group-media-context #gif-modal,
body.kite-group-media-context #kite-ai-image-modal,
body.kite-group-media-context #kite-camera-modal {
    z-index: 2147483001 !important;
    pointer-events: auto !important;
}

.chat-picker {
    position: fixed;
    z-index: 25000;
    left: 50%;
    bottom: 76px;
    transform: translateX(-50%);
    width: min(96vw, 420px);
    max-height: 46vh;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.22);
    overflow: hidden;
}
.chat-picker.hidden { display:none !important; }
.chat-picker-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 14px;
    border-bottom:1px solid #eee;
    font-size:14px;
}
.chat-picker-head button {
    background:transparent !important;
    color:#555 !important;
    font-size:24px !important;
    padding:0 6px !important;
}
.emoji-grid, .sticker-grid {
    padding:12px;
    display:grid;
    grid-template-columns:repeat(8, 1fr);
    gap:6px;
    max-height:38vh;
    overflow-y:auto;
    font-size:25px;
    line-height:1;
}
.emoji-grid { font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.emoji-grid, .sticker-grid { word-break:normal; }
.sticker-grid {
    grid-template-columns:repeat(6, 1fr);
    font-size:38px;
}
.emoji-grid > *, .sticker-grid > * { cursor:pointer; }
.chat-big-emoji {
    font-size:56px !important;
    line-height:1.15;
    margin-bottom:6px;
}
.chat-sticker {
    font-size:72px !important;
    line-height:1;
    text-align:center;
    margin:4px 0 8px;
}

.emoji-choice, .sticker-choice {
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    padding: 4px !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    border-radius: 8px !important;
    overflow: visible !important;
}
.emoji-choice { font-size: 25px !important; }
.sticker-choice { font-size: 38px !important; }
.emoji-choice:hover, .sticker-choice:hover { background: #f1f3f5 !important; transform: scale(1.08); }

/* ===== WhatsApp-style sticker messages ===== */
.sticker-grid .sticker-choice {
    min-height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
}
.sticker-grid .sticker-choice:hover {
    background: #f2f2f2 !important;
}
.sticker-grid .sticker-choice img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    display: block;
}
.sticker-grid .sticker-fallback {
    font-size: 42px !important;
}
.chat-sticker {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 78px;
}
.chat-sticker img {
    width: 112px !important;
    height: 112px !important;
    max-width: 112px !important;
    object-fit: contain !important;
    display: block;
    border-radius: 0 !important;
}
.chat-picker-error {
    color: #d93025;
    font-size: 11px;
    margin-left: 8px;
    max-width: 190px;
    line-height: 1.2;
}


/* ===== Compact WhatsApp-style composer tools ===== */
.chat-composer {
    position: relative;
}
.chat-tool-toggle {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #28a745 !important;
    color: #fff !important;
    font-size: 18px !important;
    box-shadow: none !important;
    transition: transform .18s ease, background .18s ease !important;
}
.chat-tool-toggle.active {
    background: #218838 !important;
    transform: rotate(45deg);
}
.chat-tools-menu {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px;
    border-radius: 24px;
    background: #f0f2f5;
}
.chat-tools-menu.hidden { display: none !important; }
.chat-tools-menu .chat-tool-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
}
.chat-tools-menu .chat-file-button {
    background: #e8f5e9 !important;
    color: #218838 !important;
}
.chat-tools-menu .chat-clear-button {
    background: #fcebea !important;
    color: #d93025 !important;
}
@media (max-width: 380px) {
    .chat-tool-toggle { width: 40px !important; height: 40px !important; min-width: 40px !important; }


    .chat-tools-menu { gap: 2px; }


    .chat-tools-menu .chat-tool-button { width: 34px !important; height: 34px !important; min-width: 34px !important; font-size: 16px !important; }


}

/* ===== Vertical pin/attachment tools menu ===== */
.chat-composer {
    position: relative !important;
}
.chat-tools-menu {
    position: absolute !important;
    left: 0 !important;
    bottom: calc(100% + 8px) !important;
    z-index: 3000 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    width: 46px !important;
    padding: 6px !important;
    border-radius: 24px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.18) !important;
}
.chat-tools-menu.hidden {
    display: none !important;
}
.chat-tools-menu .chat-tool-button {
    flex: 0 0 auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
}
@media (max-width: 380px) {
    .chat-tools-menu {
        width: 40px !important;
        gap: 4px !important;
        padding: 5px !important;
    }


    .chat-tools-menu .chat-tool-button {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 16px !important;
    }


}

/* Group call picker */
.group-call-friends{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto;margin:8px 0 12px}
.group-call-friend{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(128,128,128,.25);border-radius:10px;cursor:pointer}
.group-call-friend input{width:18px;height:18px;flex:0 0 auto}
.group-call-friend img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.group-call-friend span{font-size:14px;font-weight:600}
#group-call-start:disabled{opacity:.5;cursor:not-allowed}


/* ===== Offline-first profile identity ===== */
.top-profile-card {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
}
.profile-avatar-wrap { position:relative; display:flex; align-items:center; justify-content:center; }
.profile-display-name { font-weight:800; font-size:14px; line-height:18px; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-display-status { display:flex; align-items:center; gap:5px; font-size:11px; line-height:14px; opacity:.9; }
.profile-status-dot { width:7px; height:7px; border-radius:50%; display:inline-block; box-shadow:0 0 0 2px rgba(255,255,255,.35); }
.profile-status-dot.online { background:#22c55e; }
.profile-status-dot.offline { background:#9ca3af; }
.message-meta { display:flex; align-items:center; gap:6px; font-size:10px; opacity:.72; margin-top:4px; }
.message-state { font-weight:700; }
.message-state.pending { opacity:.65; }
.message-ticks { letter-spacing:-2px; font-weight:800; }
.deleted-message { font-style:italic; opacity:.65; }

/* =========================================================
   KITE PREMIUM GLOSSY UI — visual-only layer
   Keeps existing IDs, JS hooks and functionality intact.
   ========================================================= */
:root{
  --kite-bg:#070b17;
  --kite-surface:rgba(255,255,255,.075);
  --kite-surface-strong:rgba(255,255,255,.11);
  --kite-border:rgba(255,255,255,.13);
  --kite-text:#f7f8ff;
  --kite-muted:#aab3ca;
  --kite-primary:#7c5cff;
  --kite-primary-2:#20d8ff;
  --kite-success:#19d38b;
  --kite-danger:#ff5f78;
  --kite-shadow:0 24px 70px rgba(0,0,0,.34);
}
html,body{background:
 radial-gradient(800px 500px at 10% -10%,rgba(124,92,255,.22),transparent 60%),
 radial-gradient(700px 500px at 100% 0%,rgba(32,216,255,.14),transparent 58%),
 linear-gradient(145deg,#f5f6fa 0%,#f5f6fa 46%,#f5f6fa 100%) !important;color:var(--kite-text)!important;}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(transparent 0%,rgba(255,255,255,.012) 100%);}
button,.button{border:1px solid rgba(36,55,85,0.14)!important;background:linear-gradient(135deg,#8b6cff,#4c7dff)!important;color:#fff!important;border-radius:14px!important;box-shadow:0 10px 26px rgba(69,91,255,.24),inset 0 1px 0 rgba(255,255,255,.22)!important;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;}
button:hover,.button:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 14px 30px rgba(69,91,255,.34),inset 0 1px 0 rgba(255,255,255,.25)!important;}
button:active,.button:active{transform:translateY(0) scale(.98);}
button:disabled{filter:saturate(.35);box-shadow:none!important;}

#login-container{width:min(92vw,390px)!important;padding:28px 24px!important;background:linear-gradient(145deg,rgba(245,246,249,0.94),rgba(245,246,250,0.94))!important;border:1px solid var(--kite-border)!important;border-radius:30px!important;box-shadow:var(--kite-shadow),inset 0 1px 0 rgba(255,255,255,.08)!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;color:var(--kite-text)!important;}
#login-container:after{content:"";position:absolute;inset:auto 12% -2px; height:1px;background:linear-gradient(90deg,transparent,#7c5cff,#20d8ff,transparent);opacity:.8;}
#login-container img{filter:drop-shadow(0 10px 25px rgba(124,92,255,.28));}
#login-container h1{font-size:1.75rem!important;letter-spacing:-.03em;color:#172033!important;}
#login-container input,#login-container select,#otp-section input{background:rgba(255,255,255,.055)!important;color:#fff!important;border:1px solid rgba(36,55,85,0.12)!important;border-radius:15px!important;padding:13px 14px!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.04)!important;}
#login-container input::placeholder{color:#8993ad!important;}
#login-container input:focus,#login-container select:focus,#otp-section input:focus{border-color:rgba(124,92,255,.75)!important;box-shadow:0 0 0 4px rgba(124,92,255,.13)!important;}
#login-button,#register-button{background:linear-gradient(135deg,#7c5cff,#20bfff)!important;}

#chat-container{max-width:460px!important;padding:10px 10px 0!important;}
#chat-header{background:transparent!important;}
#profile-container{gap:7px!important;align-items:stretch!important;}
.top-card{position:relative!important;overflow:hidden!important;background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.045))!important;border:1px solid var(--kite-border)!important;box-shadow:0 14px 42px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.08)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;color:#fff!important;}
.top-card:before{content:"";position:absolute;inset:-40% auto auto -20%;width:80%;height:120%;background:radial-gradient(circle,rgba(124,92,255,.12),transparent 68%);pointer-events:none;}
#profile{border-radius:24px!important;min-height:124px;}
#profile-pic{width:78px!important;height:78px!important;border-radius:24px!important;border:2px solid rgba(255,255,255,.75)!important;box-shadow:0 12px 28px rgba(0,0,0,.28),0 0 0 5px rgba(124,92,255,.15)!important;}
.profile-display-name{font-size:15px!important;letter-spacing:-.01em;}
.profile-display-status{color:#c9d1e5!important;}
#my-status-card{border-radius:24px!important;min-height:124px!important;}
#new-user-card{border-radius:24px!important;}
#right-ad{border:0!important;border-radius:24px!important;background:linear-gradient(145deg,rgba(32,216,255,.10),rgba(124,92,255,.09))!important;}

#chat-container > h3{padding:4px!important;margin:9px 0!important;gap:7px!important;}
#chat-container > h3 .button{min-height:43px!important;max-width:72px!important;border-radius:15px!important;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.055))!important;color:#eef2ff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 25px rgba(0,0,0,.16)!important;}
#chat-container > h3 .button i{filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}
#contact-title{background:linear-gradient(135deg,#8b6cff,#20bfff)!important;}
#contacts,#messages,#private-messages{background:rgba(255,255,255,.035)!important;border:1px solid rgba(36,55,85,0.08)!important;color:#eef2ff!important;}
#contacts{border-radius:20px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;}
.contacts-mode-header{color:#172033!important;border-color:rgba(36,55,85,0.08)!important;}
#contact-list li{border-color:rgba(36,55,85,0.06)!important;border-radius:12px!important;}
#contact-list li:active{background:rgba(124,92,255,.12)!important;}
#messages{padding:14px!important;border-radius:24px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 45px rgba(0,0,0,.16)!important;scrollbar-color:rgba(255,255,255,.22) transparent;}
#messages::-webkit-scrollbar,#private-messages::-webkit-scrollbar{width:6px;}
#messages::-webkit-scrollbar-thumb,#private-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.17);border-radius:99px;}
.post-container{border:1px solid rgba(36,55,85,0.07)!important;background:rgba(255,255,255,.055)!important;border-radius:18px!important;box-shadow:0 8px 24px rgba(0,0,0,.12)!important;}
.post-container.current-user{background:linear-gradient(135deg,rgba(124,92,255,.24),rgba(32,216,255,.10))!important;border-color:rgba(124,92,255,.26)!important;}
.post-container.other-user{background:rgba(255,255,255,.065)!important;}
.message.current-user{background:linear-gradient(135deg,#6f57ff,#3d8cff)!important;color:#fff!important;border:0!important;border-radius:18px 18px 6px 18px!important;box-shadow:0 10px 24px rgba(75,76,210,.22)!important;}
.message.other-user{background:rgba(255,255,255,.075)!important;color:#f4f6ff!important;border:1px solid rgba(36,55,85,0.07)!important;border-radius:18px 18px 18px 6px!important;box-shadow:0 8px 22px rgba(0,0,0,.12)!important;}
#chat-container > .input-group,#private-chat-container .input-group{background:rgba(245,246,250,0.94)!important;border:1px solid rgba(36,55,85,0.11)!important;border-radius:22px!important;box-shadow:0 18px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;}
textarea#message-input,textarea#private-message-input{color:#fff!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(36,55,85,0.06)!important;border-radius:17px!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.03)!important;}
textarea#message-input::placeholder,textarea#private-message-input::placeholder{color:#8f99b1!important;}
#chat-container > .input-group .button,#send-private-button,#clear-private-chat,#select-private-media-button{width:42px!important;height:42px!important;min-width:42px!important;border:0!important;}
#send-private-button{background:linear-gradient(135deg,#18d68b,#0cae73)!important;}
#clear-private-chat{background:linear-gradient(135deg,#566277,#ebecf0)!important;}
#select-private-media-button{background:linear-gradient(135deg,#7c5cff,#3d8cff)!important;}
.chat-tool-toggle{background:linear-gradient(135deg,#7c5cff,#3d8cff)!important;box-shadow:0 8px 20px rgba(83,78,217,.28)!important;}
.chat-tools-menu{background:rgba(245,246,249,0.96)!important;border:1px solid rgba(36,55,85,0.10)!important;box-shadow:0 18px 42px rgba(0,0,0,.32)!important;backdrop-filter:blur(18px)!important;}

#private-chat-container{background:linear-gradient(160deg,#f5f6fa,#f5f6fa)!important;color:#172033!important;}
#private-chat-container .header-row{background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035))!important;border-bottom:1px solid rgba(36,55,85,0.08)!important;box-shadow:0 12px 30px rgba(0,0,0,.15)!important;}
#private-chat-user .profile-picture{border:2px solid rgba(255,255,255,.72)!important;border-radius:20px!important;box-shadow:0 10px 26px rgba(0,0,0,.28)!important;}
#private-chat-user .user-info .user-name{color:#172033!important;}
#private-chat-user .user-profile-details{color:#aeb7ca!important;}
#private-chat-container .header-buttons .button{background:linear-gradient(135deg,#5e6b88,#eaecf0)!important;border:1px solid rgba(36,55,85,0.09)!important;}
#close-private-chat{background:linear-gradient(135deg,#ff647e,#d83e5a)!important;}
#private-messages{border:0!important;border-radius:0!important;}
#private-messages .post-container.current-user{background:linear-gradient(135deg,#6f57ff,#3d8cff)!important!important;border:0!important;}
#private-messages .post-container.other-user{background:rgba(255,255,255,.065)!important;border:1px solid rgba(36,55,85,0.07)!important;}

.notif-panel,.popup,.kite-action-popover,.kite-settings-card,#modal-content,.profile-edit-box,.status-dialog,.status-gallery-dialog{background:linear-gradient(145deg,rgba(245,246,249,0.97),rgba(245,246,250,0.96))!important;color:#172033!important;border:1px solid rgba(36,55,85,0.12)!important;box-shadow:0 26px 80px rgba(0,0,0,.44)!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;}
.notif-item{background:rgba(255,255,255,.025)!important;border-color:rgba(36,55,85,0.07)!important;color:#eef2ff!important;}
.notif-msg{color:#172033!important;}.notif-meta{color:#8e98af!important;}.notif-panel-header,.popup-header{background:linear-gradient(135deg,#7558ff,#278fff)!important;}
.notif-accept-btn{background:linear-gradient(135deg,#19d38b,#0ea873)!important;}.notif-reject-btn{background:rgba(255,255,255,.07)!important;color:#ff8da0!important;border:1px solid rgba(36,55,85,0.09)!important;}
.search-row input,.search-row button,.media-tab,.kite-settings-select{background:rgba(255,255,255,.055)!important;color:#fff!important;border-color:rgba(36,55,85,0.10)!important;}
.media-tab.active{background:linear-gradient(135deg,#7c5cff,#2ba8ff)!important;}
.icon-button{color:#172033!important;}.icon-button:hover{background:rgba(36,55,85,.08)!important;color:#172033!important;}

#call-container{background:radial-gradient(circle at 50% 15%,rgba(124,92,255,.25),transparent 38%),linear-gradient(145deg,#03050c,#0a1020)!important;}
#call-status{color:#dfe6ff!important;text-shadow:0 3px 18px rgba(0,0,0,.5);}
.call-controls{background:rgba(10,14,26,.68)!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 18px 60px rgba(0,0,0,.35)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;border-radius:28px!important;padding:10px!important;}
.call-ctrl-btn{background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:none!important;width:50px!important;height:50px!important;}
.call-ctrl-btn.end{background:linear-gradient(135deg,#ff657e,#d93f58)!important;}
#incoming-call-overlay{background:rgba(3,6,14,.62)!important;backdrop-filter:blur(15px)!important;}
.incoming-call-box{background:linear-gradient(145deg,rgba(18,24,42,.95),rgba(8,12,24,.94))!important;color:#fff!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:32px!important;box-shadow:0 30px 90px rgba(0,0,0,.48)!important;}
.incoming-btn{border:1px solid rgba(36,55,85,0.12)!important;box-shadow:0 12px 28px rgba(0,0,0,.28)!important;}.incoming-btn.accept{background:linear-gradient(135deg,#16d387,#0ba26d)!important;}.incoming-btn.reject{background:linear-gradient(135deg,#ff687f,#db4059)!important;}
#image-preview-modal .image-preview-content{background:rgba(7,10,18,.86)!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:24px!important;box-shadow:0 30px 100px rgba(0,0,0,.5)!important;backdrop-filter:blur(20px)!important;}

.kite-app-loader{background:linear-gradient(145deg,#f5f8ff,#eaf0fb)!important;color:#172033!important;}.kite-loader-ring{border-color:rgba(36,55,85,.12)!important;border-top-color:#8b6cff!important;}.kite-loader-text{background:linear-gradient(90deg,#fff,#9cdfff 45%,#b29cff);-webkit-background-clip:text;background-clip:text;color:transparent!important;}.kite-loader-logo{filter:drop-shadow(0 14px 30px rgba(124,92,255,.35));}

@media (max-width:480px){
  #chat-container{padding:7px 7px 0!important;}
  #profile-pic{width:68px!important;height:68px!important;border-radius:21px!important;}
  #profile,#my-status-card,#right-ad{min-height:114px!important;border-radius:22px!important;}
  #messages{padding:11px!important;border-radius:21px!important;}
  #chat-container > h3 .button{min-height:41px!important;}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}}

/* =========================================================
   KITE PREMIUM THEME SWITCHER
   Theme selector lives inside the Account / Logout menu.
   Only presentation changes; app functionality is untouched.
   ========================================================= */
:root{
  --kite-accent:#7c5cff;--kite-accent2:#3d8cff;--kite-good:#18d68b;--kite-danger:#ff647e;
  --kite-bg:#eef3fb;--kite-surface:rgba(255,255,255,.92);--kite-text:#172033;--kite-muted:#65718a;
}
html[data-theme="midnight"]{--kite-accent:#6d4cf5;--kite-accent2:#2f6fe0;--kite-bg:#eef0ff;--kite-surface:rgba(255,255,255,.92);--kite-text:#172033;--kite-muted:#65718a;}
html[data-theme="ocean"]{--kite-accent:#0284c7;--kite-accent2:#2563eb;--kite-bg:#e8f4fd;--kite-surface:rgba(255,255,255,.92);--kite-text:#172033;--kite-muted:#65718a;}
html[data-theme="aurora"]{--kite-accent:#9333ea;--kite-accent2:#db2777;--kite-bg:#f5ecff;--kite-surface:rgba(255,255,255,.92);--kite-text:#172033;--kite-muted:#65718a;}
html[data-theme="emerald"]{--kite-accent:#059669;--kite-accent2:#0e7490;--kite-bg:#e6f8f1;--kite-surface:rgba(255,255,255,.92);--kite-text:#172033;--kite-muted:#65718a;}
html[data-theme="ruby"]{--kite-accent:#e11d48;--kite-accent2:#dc2626;--kite-bg:#fff0f2;--kite-surface:rgba(255,255,255,.92);--kite-text:#172033;--kite-muted:#65718a;}
html[data-theme="pearl"]{--kite-accent:#5b52f0;--kite-accent2:#0f84b8;--kite-bg:#eef3fb;--kite-surface:rgba(255,255,255,.92);--kite-text:#172033;--kite-muted:#65718a;}
html[data-theme="sunset"]{--kite-accent:#ea580c;--kite-accent2:#c2410c;--kite-bg:#fff3ea;--kite-surface:rgba(255,255,255,.92);--kite-text:#172033;--kite-muted:#65718a;}
html[data-theme="lavender"]{--kite-accent:#7c5cf0;--kite-accent2:#5b6bf0;--kite-bg:#f3eeff;--kite-surface:rgba(255,255,255,.92);--kite-text:#172033;--kite-muted:#65718a;}
html[data-theme="forest"]{--kite-accent:#15803d;--kite-accent2:#0f766e;--kite-bg:#eaf8ef;--kite-surface:rgba(255,255,255,.92);--kite-text:#172033;--kite-muted:#65718a;}
html[data-theme="rose"]{--kite-accent:#db2777;--kite-accent2:#e11d48;--kite-bg:#fff0f6;--kite-surface:rgba(255,255,255,.92);--kite-text:#172033;--kite-muted:#65718a;}
html[data-theme="graphite"]{--kite-accent:#475569;--kite-accent2:#334155;--kite-bg:#eff2f6;--kite-surface:rgba(255,255,255,.92);--kite-text:#172033;--kite-muted:#65718a;}
html[data-theme="solar"]{--kite-accent:#b45309;--kite-accent2:#c2410c;--kite-bg:#fff8e6;--kite-surface:rgba(255,255,255,.92);--kite-text:#172033;--kite-muted:#65718a;}

html[data-theme]:not([data-theme]) body{background:var(--kite-bg)!important;color:var(--kite-text)!important;}
html[data-theme] body{background:linear-gradient(145deg,#edf2fa,#f8fbff)!important;color:var(--kite-text)!important;}
html[data-theme] .button,html[data-theme] .icon-button,html[data-theme] .chat-tool-toggle{transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .2s ease!important;}
html[data-theme] .button:hover,html[data-theme] .icon-button:hover{box-shadow:0 10px 26px color-mix(in srgb,var(--kite-accent) 24%,transparent)!important;}
html[data-theme] #send-private-button{background:linear-gradient(135deg,var(--kite-good),#079d70)!important;}
html[data-theme] #select-private-media-button,html[data-theme] .chat-tool-toggle,html[data-theme] .media-tab.active{background:linear-gradient(135deg,var(--kite-accent),var(--kite-accent2))!important;}
html[data-theme] .message.current-user,html[data-theme] #private-messages .post-container.current-user{background:linear-gradient(135deg,var(--kite-accent),var(--kite-accent2))!important;}
html[data-theme] .post-container.current-user{background:linear-gradient(135deg,color-mix(in srgb,var(--kite-accent) 30%,transparent),color-mix(in srgb,var(--kite-accent2) 16%,transparent))!important;border-color:color-mix(in srgb,var(--kite-accent) 35%,transparent)!important;}
html[data-theme] .notif-panel-header,html[data-theme] .popup-header{background:linear-gradient(135deg,var(--kite-accent),var(--kite-accent2))!important;}
html[data-theme] #close-private-chat{background:linear-gradient(135deg,var(--kite-danger),#c93455)!important;}
html[data-theme] #call-container{background:radial-gradient(circle at 50% 15%,color-mix(in srgb,var(--kite-accent) 28%,transparent),transparent 38%),linear-gradient(145deg,#0b1020,#0a1020)!important;}

/* Pearl/light theme details */
html[data-theme] #private-chat-container{background:linear-gradient(160deg,#edf2fa,#f8fbff)!important;color:#172033!important;}
html[data-theme] #private-chat-container .header-row{background:rgba(255,255,255,.78)!important;border-bottom-color:rgba(36,55,85,.10)!important;}
html[data-theme] #private-chat-user .user-info .user-name{color:#172033!important;}
html[data-theme] #messages{background:rgba(255,255,255,.62)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 45px rgba(41,65,100,.10)!important;}
html[data-theme] .message.other-user,html[data-theme] .post-container.other-user{background:rgba(255,255,255,.78)!important;color:#24314a!important;border-color:rgba(36,55,85,.10)!important;}
html[data-theme] #chat-container > .input-group,html[data-theme] #private-chat-container .input-group{background:rgba(255,255,255,.82)!important;border-color:rgba(36,55,85,.12)!important;box-shadow:0 18px 50px rgba(41,65,100,.12),inset 0 1px 0 #fff!important;}
html[data-theme] textarea#message-input,html[data-theme] textarea#private-message-input{background:rgba(245,248,253,.9)!important;color:#172033!important;border-color:rgba(36,55,85,.10)!important;}
html[data-theme] textarea#message-input::placeholder,html[data-theme] textarea#private-message-input::placeholder{color:#7a879c!important;}
html[data-theme] .notif-panel,html[data-theme] .popup,html[data-theme] .kite-action-popover,html[data-theme] .kite-settings-card,html[data-theme] #modal-content,html[data-theme] .profile-edit-box,html[data-theme] .status-dialog,html[data-theme] .status-gallery-dialog{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(240,245,252,.94))!important;color:#172033!important;border-color:rgba(36,55,85,.12)!important;box-shadow:0 26px 80px rgba(41,65,100,.20)!important;}
html[data-theme] .notif-item{background:rgba(245,248,253,.78)!important;border-color:rgba(36,55,85,.08)!important;color:#24314a!important;}

/* Theme selector inside Account / Logout menu */
#account-menu #kite-theme-switcher{position:relative;width:100%;margin:2px 0;z-index:10;font-family:inherit;}
#account-menu .kite-theme-btn{width:100%;min-height:40px;border:1px solid rgba(36,55,85,0.12);border-radius:12px;color:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--kite-accent) 22%,transparent),color-mix(in srgb,var(--kite-accent2) 18%,transparent));box-shadow:none;cursor:pointer;font:600 13px inherit;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:9px 12px;}
#account-menu .kite-theme-btn:hover{transform:none;box-shadow:0 8px 20px color-mix(in srgb,var(--kite-accent) 18%,transparent);}
#account-menu .kite-theme-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);width:auto;max-height:300px;overflow:auto;padding:7px;border-radius:16px;background:rgba(245,246,250,0.98);border:1px solid rgba(36,55,85,0.13);box-shadow:0 20px 50px rgba(0,0,0,.40);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);}
#account-menu .kite-theme-menu.hidden{display:none;}
#account-menu .kite-theme-option{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:#172033;text-align:left;font:600 13px inherit;cursor:pointer;}
#account-menu .kite-theme-option:hover{background:rgba(255,255,255,.09);}
#account-menu .theme-dot{width:16px;height:16px;flex:0 0 16px;border-radius:50%;display:inline-block;border:2px solid rgba(255,255,255,.55);box-shadow:0 3px 9px rgba(0,0,0,.24);}
#account-menu .theme-dot.midnight{background:linear-gradient(135deg,#7c5cff,#3d8cff);}
#account-menu .theme-dot.ocean{background:linear-gradient(135deg,#00c6ff,#326cff);}
#account-menu .theme-dot.aurora{background:linear-gradient(135deg,#a45cff,#ff4fd8);}
#account-menu .theme-dot.emerald{background:linear-gradient(135deg,#13d99a,#00a9c7);}
#account-menu .theme-dot.ruby{background:linear-gradient(135deg,#ff426f,#ff8a3d);}
#account-menu .theme-dot.pearl{background:linear-gradient(135deg,#fff,#dbe8f8);}
#account-menu .theme-dot.sunset{background:linear-gradient(135deg,#ff6b35,#ffb000);}
#account-menu .theme-dot.lavender{background:linear-gradient(135deg,#b56cff,#6f7cff);}
#account-menu .theme-dot.forest{background:linear-gradient(135deg,#48d17a,#1aa66a);}
#account-menu .theme-dot.rose{background:linear-gradient(135deg,#ff5c9a,#ff7a7a);}
#account-menu .theme-dot.graphite{background:linear-gradient(135deg,#aeb7c7,#667085);}
#account-menu .theme-dot.solar{background:linear-gradient(135deg,#ffd23f,#ff8c42);}
html[data-theme] #account-menu .kite-theme-menu{background:rgba(255,255,255,.98);border-color:rgba(36,55,85,.12);box-shadow:0 20px 50px rgba(41,65,100,.20);}
html[data-theme] #account-menu .kite-theme-option{color:#172033;}
html[data-theme] #account-menu .kite-theme-option:hover{background:rgba(36,55,85,.06);}


/* =========================================================
   KITE THEME SYNC – BUTTONS + BACKGROUNDS
   Theme selection now controls the complete visual palette.
   ========================================================= */
html[data-theme] {
  --kite-button: var(--kite-accent);
  --kite-button2: var(--kite-accent2);
  --kite-panel: var(--kite-surface);
  --kite-border: color-mix(in srgb, var(--kite-accent) 22%, transparent);
}

/* Global buttons follow the selected theme */
html[data-theme] button:not(.kite-theme-option),
html[data-theme] .button {
  background: linear-gradient(135deg, var(--kite-button), var(--kite-button2)) !important;
  color: #fff !important;
  border-color: var(--kite-border) !important;
}
html[data-theme] button:not(.kite-theme-option):hover,
html[data-theme] .button:hover {
  background: linear-gradient(135deg, var(--kite-button2), var(--kite-button)) !important;
}

/* Keep destructive actions readable */
html[data-theme] #close-private-chat,
html[data-theme] .danger,
html[data-theme] .btn-danger {
  background: linear-gradient(135deg, var(--kite-danger), #c93455) !important;
}

/* Main app surfaces */
html[data-theme]:not([data-theme]) #chat-container,
html[data-theme]:not([data-theme]) #private-chat-container,
html[data-theme]:not([data-theme]) .popup,
html[data-theme]:not([data-theme]) .notif-panel,
html[data-theme]:not([data-theme]) .kite-settings-card,
html[data-theme]:not([data-theme]) .status-dialog,
html[data-theme]:not([data-theme]) .status-gallery-dialog,
html[data-theme]:not([data-theme]) #modal-content {
  background: var(--kite-surface) !important;
  color: var(--kite-text) !important;
  border-color: var(--kite-border) !important;
}

/* Public chat background */
html[data-theme]:not([data-theme]) #messages {
  background: color-mix(in srgb, var(--kite-bg) 78%, var(--kite-surface)) !important;
  border-color: var(--kite-border) !important;
}
html[data-theme]:not([data-theme]) .post-container,
html[data-theme]:not([data-theme]) .message.other-user,
html[data-theme]:not([data-theme]) .post-container.other-user {
  background: color-mix(in srgb, var(--kite-surface) 88%, var(--kite-bg)) !important;
  color: var(--kite-text) !important;
  border-color: var(--kite-border) !important;
}

/* Private chat/header/input surfaces */
html[data-theme]:not([data-theme]) #private-chat-container .header-row,
html[data-theme]:not([data-theme]) #chat-container > .input-group,
html[data-theme]:not([data-theme]) #private-chat-container .input-group {
  background: color-mix(in srgb, var(--kite-surface) 94%, var(--kite-bg)) !important;
  color: var(--kite-text) !important;
  border-color: var(--kite-border) !important;
}
html[data-theme]:not([data-theme]) textarea#message-input,
html[data-theme]:not([data-theme]) textarea#private-message-input {
  color: var(--kite-text) !important;
}
html[data-theme]:not([data-theme]) textarea#message-input::placeholder,
html[data-theme]:not([data-theme]) textarea#private-message-input::placeholder {
  color: var(--kite-muted) !important;
}

/* Theme-aware accents */
html[data-theme] #profile-pic,
html[data-theme] #private-chat-user .profile-picture {
  border-color: var(--kite-accent) !important;
}
html[data-theme] #contact-title,
html[data-theme] #login-button,
html[data-theme] #register-button {
  background: linear-gradient(135deg, var(--kite-button), var(--kite-button2)) !important;
}

/* Notification toast follows theme */
html[data-theme] #notification-toast {
  background: linear-gradient(135deg, var(--kite-button), var(--kite-button2)) !important;
  color: #fff !important;
  border: 1px solid var(--kite-border) !important;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--kite-accent) 28%, transparent) !important;
}

/* Light/Pearl button text remains white, while surfaces stay light */
html[data-theme] button:not(.kite-theme-option),
html[data-theme] .button {
  color: #fff !important;
}

/* =========================================================
   PRIVATE CHAT THEME FIX
   Header buttons must follow the selected theme.
   Private chat message text stays white in every theme.
   ========================================================= */
html[data-theme] #private-chat-container .header-buttons .button {
  background: linear-gradient(135deg, var(--kite-accent), var(--kite-accent2)) !important;
  color: #fff !important;
  border-color: var(--kite-border) !important;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--kite-accent) 20%, transparent) !important;
}

html[data-theme] #private-chat-container .header-buttons .button:hover {
  background: linear-gradient(135deg, var(--kite-accent2), var(--kite-accent)) !important;
  color: #fff !important;
}

/* End-call and close remain danger actions, but keep the theme-aware finish. */
html[data-theme] #private-chat-container .header-buttons #end-call-btn,
html[data-theme] #private-chat-container .header-buttons #close-private-chat {
  background: linear-gradient(135deg, var(--kite-danger), #c93455) !important;
  color: #fff !important;
}

/* Private chat textbox: typed text is always white. */
html[data-theme] #private-chat-container textarea#private-message-input {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
  caret-color: #172033 !important;
}


/* ---------- Admin push broadcast ---------- */
.kite-admin-broadcast { max-width: 720px; margin: 0 auto; }
.kite-admin-broadcast form { display:flex; flex-direction:column; gap:14px; padding:16px 0; }
.kite-admin-broadcast label { display:flex; flex-direction:column; gap:7px; font-weight:700; font-size:14px; }
.kite-admin-broadcast label small { font-weight:400; color:#777; }
.kite-admin-broadcast input,
.kite-admin-broadcast textarea { width:100%; box-sizing:border-box; border:1px solid #d7d7d7; border-radius:10px; padding:11px 12px; font:inherit; background:#fff; color:#222; outline:none; }
.kite-admin-broadcast input:focus,
.kite-admin-broadcast textarea:focus { border-color:#777; box-shadow:0 0 0 2px rgba(0,0,0,.06); }
.kite-admin-broadcast textarea { resize:vertical; min-height:120px; }
.kite-broadcast-warning { padding:11px 12px; border-radius:10px; background:#f6f6f6; color:#666; font-size:12px; line-height:1.45; }
.kite-broadcast-actions { display:flex; gap:10px; flex-wrap:wrap; }
.kite-broadcast-actions button { min-height:40px; padding:8px 14px; border:0; border-radius:9px; cursor:pointer; }
.kite-broadcast-actions .primary { font-weight:700; }
.kite-broadcast-actions button:disabled { opacity:.6; cursor:wait; }
.kite-admin-broadcast-result { min-height:20px; padding:0 2px; font-size:13px; line-height:1.45; }
.kite-admin-broadcast-result.success { color:#187a3d; }
.kite-admin-broadcast-result.warning { color:#9a6500; }
.kite-admin-broadcast-result.error { color:#b42318; }


#contact-list li > div > div > div:first-child {
    color: #172033 !important;
    font-weight: 600 !important;
}

html[data-theme] #contact-list li > div > div > div:first-child {
    color: #172033 !important;
}

/* Main screen top buttons - all colorful */
html[data-theme] #chat-container > h3 .button {
    background: linear-gradient(
        135deg,
        var(--kite-accent),
        var(--kite-accent2)
    ) !important;
    color: #fff !important;
    border-color: var(--kite-border) !important;
    box-shadow: 0 8px 20px color-mix(
        in srgb,
        var(--kite-accent) 22%,
        transparent
    ) !important;
}

html[data-theme] #chat-container > h3 .button:hover {
    background: linear-gradient(
        135deg,
        var(--kite-accent2),
        var(--kite-accent)
    ) !important;
}

/* ===== FIX: Notifications text visibility ===== */
.notif-panel,
.notif-list,
.notif-item,
.notif-item-main,
.notif-body {
    color: #222 !important;
}

.notif-msg {
    color: #222 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.notif-meta {
    color: #666 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.notif-empty {
    color: #555 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.notif-item button,
.notif-item span,
.notif-item div {
    opacity: 1 !important;
}

/* ===== Private chat: compact two-row action bar ===== */
#private-chat-container .header-buttons {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 34px);
    grid-auto-rows: 34px;
    gap: 5px !important;
    width: 100%;
    max-width: 620px;
    padding: 2px 3px;
    box-sizing: border-box;
    justify-content: stretch;
    align-items: stretch;
}

/* Empty helper element must not consume a grid cell. */
#private-chat-container #private-user {
    display: none !important;
}

/* Keep the close button as the final action in the 2-row bar. */
#private-chat-container #close-private-chat {
    grid-column: 4;
    grid-row: 2;
}
#private-chat-container .header-buttons > .button,
#private-chat-container .header-buttons > .kite-header-action-menu {
    min-width: 0 !important;
    width: 100%;
    margin: 0 !important;
}
#private-chat-container .header-buttons .button.private-header-text-btn {
    min-height: 34px;
    height: 34px;
    padding: 4px 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 11px;
    line-height: 1;
}
#private-chat-container .header-buttons .private-header-text-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
}
#private-chat-container .header-buttons .kite-header-action-menu {
    position: relative;
    display: flex;
    align-items: stretch;
}
#private-chat-container .header-buttons .kite-header-action-menu > .button {
    flex: 1 1 auto;
}
#private-chat-container .header-buttons .kite-action-popover {
    z-index: 10050;
}
#private-chat-container #end-call-btn {
    min-height: 34px;
    height: 34px;
    padding: 4px 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
#private-chat-container #end-call-btn[style*="display:none"] {
    display: none !important;
}
@media (max-width: 430px) {
    #private-chat-container .header-buttons {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(2, 32px);
        grid-auto-rows: 32px;
        gap: 4px !important;
        padding-left: 2px;
        padding-right: 2px;
    }
    #private-chat-container .header-buttons .button.private-header-text-btn,
    #private-chat-container #end-call-btn {
        font-size: 10px;
        min-height: 32px;
        height: 32px;
        padding-left: 3px;
        padding-right: 3px;
        gap: 3px;
    }
    #private-chat-container .header-buttons .button.private-header-text-btn i,
    #private-chat-container #end-call-btn i {
        font-size: 11px;
    }
}
/* ===== Reels Followers / Following: open as a dedicated full-screen page ===== */
#reels-follow-list.reels-sheet {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    z-index: 30000 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#reels-follow-list.reels-sheet.hidden {
    display: none !important;
}
#reels-follow-list .reels-sheet-grab {
    display: none !important;
}
#reels-follow-list .reels-sheet-header {
    flex: 0 0 auto;
    min-height: 56px;
    padding: 8px 12px;
    box-sizing: border-box;
}
#reels-follow-list .reels-follow-list-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 12px 24px;
    box-sizing: border-box;
}
#reels-follow-list .reels-follow-user-row {
    width: 100%;
    box-sizing: border-box;
}

/* ===== Final private-chat action bar: slim + uniform ===== */
#private-chat-container .header-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 34px) !important;
    grid-auto-rows: 34px !important;
    gap: 4px !important;
    padding: 2px !important;
    max-width: none !important;
}
#private-chat-container .header-buttons > .button,
#private-chat-container .header-buttons > .kite-header-action-menu,
#private-chat-container .header-buttons .kite-header-action-menu > .button {
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
#private-chat-container .header-buttons .kite-header-action-menu {
    display: flex !important;
    align-items: stretch !important;
}
#private-chat-container .header-buttons .button i {
    font-size: 10px !important;
    line-height: 1 !important;
    flex: 0 0 auto;
}
#private-chat-container #close-private-chat {
    grid-column: 4 !important;
    grid-row: 2 !important;
    padding: 2px !important;
}
#private-chat-container #private-user { display:none !important; }

/* ===== User Reels profile: true full-screen page ===== */
#reels-profile.reels-sheet {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    z-index: 30001 !important;
    background: #f6f7f9 !important;
}
#reels-profile .reels-sheet-grab { display:none !important; }
#reels-profile .reels-profile-grid {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto;
}


/* ===== FINAL PRIVATE CHAT ACTION BAR =====
   Exactly 8 visible actions: Calling, Notifications, Calling Tune,
   Reels, Ping, Friend/Unfriend, Block, Close.
   End Call belongs only to the actual call UI, never this header.
*/
#private-chat-container .header-buttons {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 29px) !important;
    grid-auto-rows: 29px !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

#private-chat-container #private-user {
    display: none !important;
}

#private-chat-container .header-buttons > .button,
#private-chat-container .header-buttons > .kite-header-action-menu,
#private-chat-container .header-buttons .kite-header-action-menu > .button {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

#private-chat-container .header-buttons .kite-header-action-menu {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#private-chat-container .header-buttons .kite-header-action-menu > .button {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
}

#private-chat-container .header-buttons .kite-header-action-menu {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
}

#private-chat-container .header-buttons .kite-header-action-menu > .button {
    flex: 1 1 auto !important;
}

#private-chat-container .header-buttons .button i {
    flex: 0 0 auto !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

#private-chat-container .header-buttons .button span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#private-chat-container #close-private-chat {
    grid-column: 4 !important;
    grid-row: 2 !important;
}

#private-chat-container #end-call-btn {
    display: none !important;
}

@media (max-width: 430px) {
    #private-chat-container .header-buttons {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 29px) !important;
        grid-auto-rows: 29px !important;
        gap: 4px !important;
    }

    #private-chat-container .header-buttons > .button,
    #private-chat-container .header-buttons > .kite-header-action-menu,
    #private-chat-container .header-buttons .kite-header-action-menu > .button {
        height: 29px !important;
        min-height: 29px !important;
        max-height: 29px !important;
        padding: 2px 3px !important;
        font-size: 10px !important;
    }
}

/* ===== REELS NAVIGATION CONTEXT =====
   Main Reels is full-screen. A Reels view opened from private chat
   returns to private chat when its close button is pressed.
*/
#reels-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Followers / Following are separate full-screen child pages. */
#reels-follow-list.reels-sheet {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 30000 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#reels-follow-list.reels-sheet.hidden {
    display: none !important;
}

/* User Reels profile remains a full-screen page underneath Followers/Following. */
#reels-profile.reels-sheet {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 29999 !important;
}


/* ===== FINAL PRIVATE CHAT BUTTONS / REELS NAVIGATION FIX ===== */
#private-chat-container .header-buttons {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,29px) !important;
  grid-auto-rows:29px !important;
  gap:4px !important;
  width:100% !important;
  max-width:none !important;
  padding:2px !important;
  box-sizing:border-box !important;
  align-items:stretch !important;
}
#private-chat-container #private-user { display:none !important; }
#private-chat-container .header-buttons > .button,
#private-chat-container .header-buttons > .kite-header-action-menu,
#private-chat-container .header-buttons .kite-header-action-menu > .button {
  width:100% !important;
  min-width:0 !important;
  height:29px !important;
  min-height:29px !important;
  max-height:29px !important;
  margin:0 !important;
  padding:2px 4px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  border-radius:9px !important;
  font-size:10px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}
#private-chat-container .header-buttons .kite-header-action-menu {
  position:relative !important;
  display:flex !important;
  align-items:stretch !important;
}
#private-chat-container .header-buttons .kite-header-action-menu > .button { flex:1 1 auto !important; }
#private-chat-container #close-private-chat { grid-column:4 !important; grid-row:2 !important; }
#private-chat-container #end-call-btn { display:none !important; }

/* Main Reels viewport is always full-screen. */
#reels-overlay {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  border-radius:0 !important;
}
#reels-profile.reels-sheet,
#reels-follow-list.reels-sheet {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  border-radius:0 !important;
}
#reels-profile.reels-sheet { z-index:29999 !important; }
#reels-follow-list.reels-sheet { z-index:30000 !important; }
#reels-follow-list.reels-sheet.hidden { display:none !important; }


/* ===== FINAL: FOLLOWERS / FOLLOWING MUST BE THE TOPMOST PAGE ===== */
#reels-follow-list.reels-sheet {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 2147483000 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
#reels-follow-list.reels-sheet.hidden {
    display: none !important;
}
#reels-follow-list .reels-follow-list-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* Private call popover must also sit above the chat messages/header. */
#private-chat-container .kite-header-action-menu {
    position: relative !important;
    z-index: 100000 !important;
}
#private-chat-container .kite-action-popover {
    z-index: 100001 !important;
}

/* Actual call overlay is independent of the private header. */
#call-container,
#incoming-call-overlay {
    z-index: 200000 !important;
}

/* Followers/Following are a true top-level child page, never visible behind Reels. */
#reels-follow-list.reels-sheet {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    z-index: 2147483647 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #f7f7f7 !important;
    isolation: isolate !important;
    box-sizing: border-box !important;
}
#reels-follow-list.reels-sheet::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background: #f7f7f7 !important;
    pointer-events: none !important;
}
#reels-follow-list.reels-sheet.hidden,
#reels-follow-list.reels-sheet[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ===== FINAL FIX: Followers / Following is an opaque top-level page ===== */
html.reels-follow-page-open,
body.reels-follow-page-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}
#reels-follow-list.reels-sheet {
    background-color: #f7f7f7 !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
}
#reels-follow-list.reels-sheet > * {
    position: relative;
    z-index: 1;
}

/* Fix: allow Calling/Notifications popovers to open without changing header button layout/style. */
#private-chat-container .header-buttons .kite-header-action-menu {
    overflow: visible !important;
}

/* WhatsApp-style country calling code + local mobile number */
.phone-input-row {
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-top: 10px;
}
.phone-code-box {
    min-width: 72px;
    box-sizing: border-box;
    padding: 11px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f7f7f7;
    color: #333;
    font-weight: 600;
    text-align: center;
    line-height: 20px;
}
.phone-input-row #phone {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}


/* ========== PRIVATE CHAT HISTORY ========== */
#chat-history-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--kite-bg, #f5f6fa);
}

#chat-history-modal.hidden {
    display: none;
}

.chat-history-content {
    width: min(520px, 100%);
    max-height: min(720px, 90vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--kite-surface, rgba(255,255,255,.075));
    color: var(--kite-text, #f7f8ff);
    border: 1px solid var(--kite-border, rgba(36,55,85,0.13));
    border-radius: 16px;
    box-shadow: var(--kite-shadow, 0 12px 40px rgba(0,0,0,.25));
}

.chat-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--kite-border, rgba(127,127,127,.18));
    flex-shrink: 0;
}

.chat-history-header h3 {
    margin: 0;
    font-size: 18px;
}

.chat-history-close {
    min-width: 40px;
    min-height: 40px;
    font-size: 24px;
}

.chat-history-list {
    overflow-y: auto;
    padding: 6px 0;
}

.chat-history-empty {
    padding: 35px 20px;
    text-align: center;
    color: var(--kite-muted, #aab3ca);
}

.chat-history-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid var(--kite-border, rgba(127,127,127,.12));
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.chat-history-item:hover,
.chat-history-item:focus {
    background: color-mix(in srgb, var(--kite-text, #f7f8ff) 6%, transparent);
    outline: none;
}

.chat-history-avatar {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 50%;
    object-fit: cover;
    background: color-mix(in srgb, var(--kite-text, #f7f8ff) 8%, transparent);
}

.chat-history-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-history-name {
    font-weight: 700;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-history-preview {
    color: var(--kite-muted, #aab3ca);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-history-time {
    flex: 0 0 auto;
    color: var(--kite-muted, #aab3ca);
    font-size: 11px;
}

@media (max-width: 600px) {
    #chat-history-modal {
        padding: 0;
        align-items: stretch;
    }

    .chat-history-content {
        width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }
}

/* =========================================================
   PUBLIC CHAT VIDEO PLAYER — full message width, YouTube-style overlay
   Visual-only: existing player buttons/functions are unchanged.
   ========================================================= */
.kite-video-player {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #000 !important;
    isolation: isolate !important;
    line-height: 0 !important;
}

.kite-video-element {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    background: #000 !important;
    border-radius: inherit !important;
}

/* Center play/pause button stays ON the video. */
.kite-video-center-play {
    position: absolute !important;
    z-index: 5 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.kite-video-player:not(.is-playing) .kite-video-center-play,
.kite-video-player.controls-visible .kite-video-center-play {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.kite-video-center-play:hover,
.kite-video-center-play:active {
    transform: translate(-50%, -50%) !important;
}

/* YouTube-style bottom controls overlay — never takes extra space below video. */
.kite-video-controls {
    position: absolute !important;
    z-index: 4 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    padding: 28px 8px 7px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.78)) !important;
    opacity: 0 !important;
    transition: opacity .18s ease !important;
    pointer-events: none !important;
}

.kite-video-player.controls-visible .kite-video-controls,
.kite-video-player:hover .kite-video-controls,
.kite-video-player:focus-within .kite-video-controls,
.kite-video-player:not(.is-playing) .kite-video-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.kite-video-progress {
    display: block !important;
    width: 100% !important;
    height: 4px !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: #fff !important;
}

.kite-video-control-row {
    width: 100% !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    line-height: normal !important;
}

.kite-video-control {
    flex: 0 0 auto !important;
    width: 34px !important;
    height: 32px !important;
    min-width: 34px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.kite-video-time {
    flex: 0 0 auto !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 32px !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 3px #000 !important;
}

.kite-video-spacer {
    flex: 1 1 auto !important;
    min-width: 4px !important;
}

.kite-video-player:fullscreen,
.kite-video-player:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
}

.kite-video-player:fullscreen .kite-video-element,
.kite-video-player:-webkit-full-screen .kite-video-element {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

@media (max-width: 480px) {
    .kite-video-controls {
        padding: 24px 6px 5px !important;
    }
    .kite-video-control {
        width: 32px !important;
        min-width: 32px !important;
        height: 30px !important;
        min-height: 30px !important;
    }
    .kite-video-time {
        font-size: 11px !important;
    }
}

/* ---------- Dedicated Contacts page ---------- */
#contacts.contacts-page {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0 16px 20px;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--chat-bg, #f5f7f9);
    border: 0;
    border-radius: 0;
}
#contacts.contacts-page.is-open { display: flex; }
.contacts-page-header { flex: 0 0 auto; display:flex; align-items:center; gap:14px; min-height:82px; padding: max(12px, env(safe-area-inset-top)) 4px 12px; box-sizing:border-box; }
.contacts-page-header h2 { margin:0; font-size:26px; color:#172033; }
.contacts-back-btn { width:52px; height:52px; border:0; border-radius:16px; background:linear-gradient(135deg,#536dff,#7b55ff); color:#fff; font-size:22px; cursor:pointer; }
.contacts-search-wrap { position:relative; flex:0 0 auto; margin:4px 0 14px; }
.contacts-search-wrap > i { position:absolute; left:17px; top:50%; transform:translateY(-50%); color:#aab5d0; font-size:19px; pointer-events:none; }
#contacts-search { width:100%; height:52px; padding:0 46px; box-sizing:border-box; border:1px solid rgba(36,55,85,0.12); border-radius:17px; outline:none; background:rgba(255,255,255,.07); color:#fff; font-size:16px; }
#contacts-search::placeholder { color:#9ba6c1; }
/* Hide the browser's built-in search clear control; Contacts has its own clear button. */
#contacts-search::-webkit-search-cancel-button,
#contacts-search::-webkit-search-decoration { -webkit-appearance:none; appearance:none; display:none; }
#contacts-search::-ms-clear { display:none; width:0; height:0; }
#contacts-search-clear { position:absolute; right:8px; top:8px; width:36px; height:36px; border:0; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; font-size:22px; }
.contacts-tabs { display:grid; grid-template-columns:1fr 1fr; gap:10px; flex:0 0 auto; margin-bottom:12px; }
.contacts-tab { min-height:54px; border:0; border-radius:17px; background:rgba(255,255,255,.08); color:#dce3f6; font-size:15px; font-weight:700; cursor:pointer; }
.contacts-tab.active { background:linear-gradient(135deg,#5867ff,#258cff); color:#fff; box-shadow:0 8px 24px rgba(67,102,255,.25); }
#contact-list.contacts-page-list { flex:1 1 auto; min-height:0; overflow-y:auto; margin:0; padding:0 0 24px; list-style:none; -webkit-overflow-scrolling:touch; }
#contact-list.contacts-page-list li { padding:12px 10px; margin:0 0 8px; border:1px solid rgba(36,55,85,0.07); border-radius:16px; background:rgba(255,255,255,.045); color:#eef2ff; }
#contact-list.contacts-page-list li > div { color:#172033; }
#contact-list.contacts-page-list li > div > div > div:first-child { color:#172033 !important; }
#contact-list.contacts-page-list li > div > div > div:last-child { color:#aeb8d0 !important; }
@media (max-width:480px) { #contacts.contacts-page { padding-left:12px; padding-right:12px; } .contacts-page-header h2{font-size:23px;} }

/* FINAL PRIVATE CHAT BUTTON SIZE NORMALIZATION
   All 8 private-chat header buttons use identical dimensions.
   Scoped only to #private-chat-container. */
#private-chat-container .header-buttons {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: 50px !important;
    gap: 6px !important;
    align-items: stretch !important;
}

#private-chat-container .header-buttons > .button,
#private-chat-container .header-buttons > .kite-header-action-menu {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
}

#private-chat-container .header-buttons > .kite-header-action-menu > .button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
}

/* Private Chat — all action buttons same size */
#private-chat-container .header-buttons {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 40px) !important;
    gap: 8px !important;
    align-items: stretch !important;
}

/* ===== PRIVATE CHAT: ALL 8 BUTTONS EXACT SAME SIZE ===== */

#private-chat-container .header-buttons {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 40px) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

/* Every direct button AND menu wrapper */
#private-chat-container .header-buttons > .button,
#private-chat-container .header-buttons > .kite-header-action-menu {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    justify-self: stretch !important;
    align-self: stretch !important;
}

/* Calling + Notifications ke andar actual button */
#private-chat-container .header-buttons > .kite-header-action-menu > .button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Hidden user element must never occupy grid space */
#private-chat-container #private-user {
    display: none !important;
}

/* Kiters Snapchat-style shared camera */
.kite-camera-modal{position:fixed;inset:0;z-index:100000;background:#000;display:flex;align-items:center;justify-content:center}.kite-camera-modal.hidden{display:none!important}.kite-camera-shell{width:min(100vw,620px);height:100%;max-height:100vh;display:flex;flex-direction:column;background:#050505;color:#fff}.kite-camera-top{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:19px}.kite-camera-top button{width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:27px}.kite-camera-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#111}.kite-camera-stage video,.kite-camera-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.kite-camera-stage video{opacity:0;pointer-events:none}.kite-camera-status{position:absolute;top:12px;left:50%;transform:translateX(-50%);padding:8px 14px;border-radius:20px;background:rgba(0,0,0,.48);font-size:12px;white-space:nowrap}.kite-camera-filters{display:flex;gap:9px;overflow-x:auto;padding:11px 12px;background:#050505;scrollbar-width:none}.kite-camera-filters::-webkit-scrollbar{display:none}.kite-camera-filter{min-width:76px;height:42px;flex:0 0 auto;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;border-radius:22px;padding:0 13px;font-size:13px}.kite-camera-filter.active{background:#fff;color:#111;border-color:#fff;font-weight:700}.kite-camera-bottom{height:92px;display:flex;align-items:center;justify-content:center}.kite-camera-shutter{width:76px;height:76px;border-radius:50%;border:5px solid #fff;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px rgba(255,255,255,.2);cursor:pointer}.kite-camera-shutter span{font-size:12px;font-weight:900;letter-spacing:1px}.kite-camera-shutter:active{transform:scale(.92)}.kite-camera-shutter:disabled{opacity:.5;cursor:wait}@media (orientation:landscape) and (max-height:600px){.kite-camera-shell{max-width:100vw}.kite-camera-top{height:46px}.kite-camera-bottom{height:64px}.kite-camera-filters{padding:6px 10px}.kite-camera-filter{height:36px}}
/* Kiters camera review: SHOT shows a preview; SEND/RETAKE are the second-step actions. */
.kite-camera-stage video.hidden,.kite-camera-stage canvas.hidden{display:none!important}
#kite-camera-shot-preview{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
#kite-camera-shot-preview.show{display:block}
.kite-camera-review-actions{display:flex;gap:14px;align-items:center;justify-content:center;width:100%}
.kite-camera-review-actions.hidden{display:none!important}
.kite-camera-review-actions button{min-width:110px;height:46px;border:1px solid rgba(255,255,255,.35);border-radius:24px;background:rgba(255,255,255,.12);color:#fff;font-weight:800;letter-spacing:.5px;padding:0 20px}
.kite-camera-review-actions button:last-child{background:#fff;color:#111;border-color:#fff}
.kite-camera-review-actions button:disabled{opacity:.55}


/* Camera: SHOT uses exactly the same control footprint as RETAKE/SEND. */
.kite-camera-shutter{width:110px!important;height:46px!important;min-width:110px!important;max-width:110px!important;border-radius:24px!important;border:1px solid rgba(255,255,255,.35)!important;background:rgba(255,255,255,.12)!important;box-shadow:none!important;padding:0 20px!important;box-sizing:border-box!important;}
.kite-camera-shutter span{font-size:14px!important;font-weight:800!important;letter-spacing:.5px!important;}
.kite-camera-review-actions button{width:110px!important;min-width:110px!important;max-width:110px!important;height:46px!important;padding:0 20px!important;box-sizing:border-box!important;}
/* Kiters camera controls: SHOT toggles to RETAKE on the left; SEND stays on the right. */
.kite-camera-bottom{justify-content:space-between!important;padding:0 18px!important;box-sizing:border-box!important;gap:12px!important}
.kite-camera-bottom #kite-camera-capture,
.kite-camera-bottom #kite-camera-send{width:110px!important;min-width:110px!important;max-width:110px!important;height:46px!important;border-radius:24px!important;box-sizing:border-box!important}
.kite-camera-bottom #kite-camera-capture{border:1px solid rgba(255,255,255,.35)!important;background:rgba(255,255,255,.12)!important;color:#fff!important;box-shadow:none!important;padding:0 20px!important}
.kite-camera-bottom #kite-camera-send{border:1px solid #fff!important;background:#fff!important;color:#111!important;font-weight:800!important;letter-spacing:.5px!important;padding:0 20px!important}
.kite-camera-bottom .hidden{display:none!important}

/* Kiters camera: icon-only lens selector + equal action controls */
.kite-camera-filters .kite-camera-filter{width:52px!important;min-width:52px!important;max-width:52px!important;height:52px!important;padding:0!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:25px!important;line-height:1!important}
.kite-camera-filter-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1}
.kite-camera-filters .kite-camera-filter.active{transform:scale(1.06);box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.kite-camera-bottom #kite-camera-capture,.kite-camera-bottom #kite-camera-send{width:110px!important;min-width:110px!important;max-width:110px!important;height:46px!important;min-height:46px!important;max-height:46px!important;box-sizing:border-box!important}

/* ===== Public Chat: immersive background + clickable username/avatar ===== */
#messages {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.public-chat-user-header {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-bottom: 4px;
}
.public-chat-user-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 2px solid #6246ff !important;
  background: #f5f7f9 !important;
}
.public-chat-user-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: calc(100% - 35px);
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #333;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  cursor: pointer;
  text-align: left;
}
.public-chat-user-name:hover,
.public-chat-user-name:focus-visible {
  color: #6246ff;
  text-decoration: underline;
  outline: none;
}
.public-chat-user-name:disabled {
  opacity: 1;
}
#messages .message-body > img,
#messages .message-body > .chat-sticker img,
#messages .message-body > .kite-video-player {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#messages .message-body > img { max-width: min(200px, 100%); height: auto; object-fit: contain; }
#messages .message-body > .kite-video-player { width: min(100%, 520px); }

.kite-public-bg-modal { position:fixed; inset:0; z-index:100020; display:flex; align-items:center; justify-content:center; padding:12px; box-sizing:border-box; }
.kite-public-bg-backdrop { position:absolute; inset:0; background:rgba(23,32,51,.28); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
.kite-public-bg-sheet { position:relative; z-index:1; width:min(760px,96vw); height:min(88vh,760px); max-height:88vh; overflow:hidden; padding:0 16px 16px; box-sizing:border-box; border:1px solid rgba(36,55,85,.12); border-radius:22px; background:#f8fbff; color:#172033; box-shadow:0 24px 80px rgba(41,65,100,.25); }
.kite-public-bg-head { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:66px; margin:0 -16px 14px; padding:0 16px; box-sizing:border-box; background:#f8fbff; border-bottom:1px solid rgba(36,55,85,.10); }
.kite-public-bg-head strong { font-size:17px; line-height:1.2; }
.kite-public-bg-close { flex:0 0 44px; width:44px !important; height:44px !important; min-width:44px; min-height:44px; padding:0 !important; border:1px solid rgba(36,55,85,.15) !important; border-radius:50% !important; background:rgba(36,55,85,.07) !important; color:#172033 !important; font-size:26px !important; line-height:1; display:grid; place-items:center; cursor:pointer; box-shadow:none !important; }
.kite-public-bg-close:hover { background:rgba(36,55,85,.14) !important; transform:none !important; }
.kite-public-bg-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; height:calc(100% - 80px); overflow-y:auto; overflow-x:hidden; padding:2px 2px 12px; box-sizing:border-box; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.kite-public-bg-option { position:relative; min-height:118px; width:100%; border:1px solid rgba(36,55,85,.14) !important; border-radius:15px !important; overflow:hidden; background:#eef3fb !important; background-position:center !important; background-size:cover !important; background-repeat:no-repeat !important; cursor:pointer; padding:0 !important; appearance:none; -webkit-appearance:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px rgba(41,65,100,.12) !important; }
.kite-public-bg-option::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 48%); pointer-events:none; z-index:0; }
.kite-public-bg-option::after { content:""; position:absolute; inset:0; background:none; pointer-events:none; z-index:1; }
.kite-public-bg-option span { position:absolute; z-index:2; left:11px; bottom:10px; color:#172033 !important; font-size:13px; font-weight:800; text-shadow:0 1px 4px rgba(255,255,255,.8); pointer-events:none; }
.kite-public-bg-option.is-solid::after { background:none; }
@media(max-width:600px){
  .kite-public-bg-modal{align-items:stretch;padding:0;}
  .kite-public-bg-sheet{width:100%;height:100%;max-height:100vh;border-radius:18px 18px 0 0;padding:0 12px 12px;}
  .kite-public-bg-head{margin:0 -12px 10px;padding:0 12px;min-height:64px;}
  .kite-public-bg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;height:calc(100% - 74px);}
  .kite-public-bg-option{min-height:104px;}
}

/* Facebook-style Public Chat feed — CSS-only, no startup/auth JS changes */
#publicMessages .post-container.message {
  width: min(100%, 680px);
  margin: 12px auto !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 14px !important;
  background: var(--card-bg, #fff) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 4px 14px rgba(0,0,0,.05);
  box-sizing: border-box;
  overflow: hidden;
}
#publicMessages .post-container.message .message-body {
  margin: 0 0 10px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--text-color, inherit) !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
#publicMessages .post-container.message .public-post-media,
#publicMessages .post-container.message img,
#publicMessages .post-container.message video {
  display: block;
  width: auto;
  max-width: 100% !important;
  height: auto;
  max-height: 520px;
  margin: 8px 0;
  border-radius: 10px;
  object-fit: contain;
  box-sizing: border-box;
}
#publicMessages .post-container.message video {
  width: 100%;
  background: #000;
}
#publicMessages .post-container.message .message-actions,
#publicMessages .post-container.message .post-actions {
  margin-top: 10px;
}
/* Keep icon fonts intact while making normal app text readable. */
body, input, textarea, button, select, option,
#publicMessages, #publicMessages .message,
#publicMessages .message-body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"] {
  font-family: inherit;
}


/* ===== Full profile page ===== */
.profile-page{position:fixed;inset:0;z-index:100020;overflow:hidden;background:var(--kite-bg,#f5f6fa);color:var(--kite-text,#172033);}
.profile-page.hidden{display:none!important}
.profile-page-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:12px;padding:12px 14px;background:inherit;border-bottom:1px solid rgba(127,127,127,.18);backdrop-filter:blur(14px)}
.profile-page-header h2{margin:0;font-size:20px}.profile-page-back{border:0;background:transparent;color:inherit;font-size:20px;width:40px;height:40px;border-radius:50%}
.profile-page-card{width:min(100%,900px);height:calc(100vh - 65px);margin:0 auto;padding:16px;box-sizing:border-box;border-radius:20px;background:var(--kite-surface,rgba(255,255,255,.075));box-shadow:0 10px 35px rgba(0,0,0,.12);display:flex;flex-direction:column;min-height:0;}
.profile-fixed-top{flex:0 0 auto;position:relative;z-index:20;background:var(--kite-surface,rgba(255,255,255,.075));}
.profile-fixed-bar{display:flex;align-items:flex-start;gap:18px;width:100%;}
.profile-page-photo-wrap{flex:0 0 92px;width:92px;height:92px;text-align:center;margin:0;}
.profile-page-photo-wrap img{width:92px;height:92px;border-radius:10px;object-fit:cover;display:block;margin:0;border:3px solid rgba(127,127,127,.2);box-sizing:border-box;cursor:pointer;}
.profile-fixed-actions{flex:1;min-width:0;}
.profile-content-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
.profile-content-tabs button{height:42px;min-width:0;border:0;border-radius:10px;padding:0 10px;background:rgba(127,127,127,.12);color:inherit;font:700 13px inherit;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-content-tabs button.active{background:#1877f2;color:#fff;}
.profile-scroll-area{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-top:14px;}
.profile-page-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px}.profile-page-fields label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700}.profile-page-fields input,.profile-page-fields select{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid rgba(127,127,127,.28);border-radius:10px;background:transparent;color:inherit;font:inherit;font-weight:400}.profile-page-fields input[readonly]{opacity:.65}
.profile-page-save{width:100%;min-height:42px;margin-top:14px;border:0;border-radius:10px;padding:10px 14px;background:#1877f2;color:#fff;font-weight:700;cursor:pointer}
.profile-content-section{margin-top:14px;min-height:0}.profile-content-body{display:flex;flex-direction:column;gap:10px;min-height:80px;padding-bottom:24px}.profile-content-loading,.profile-content-empty{padding:22px;text-align:center;opacity:.7}.profile-content-card{border:1px solid rgba(127,127,127,.2);border-radius:13px;overflow:hidden;background:rgba(127,127,127,.055)}.profile-content-target{display:block;width:100%;border:0;background:transparent;color:inherit;text-align:left;padding:12px;cursor:pointer;font:inherit}.profile-content-target:disabled{cursor:default}.profile-content-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;font-size:12px}.profile-content-meta strong{font-size:13px}.profile-content-meta span{opacity:.65;white-space:nowrap}.profile-content-media{display:block;width:100%;max-height:420px;object-fit:contain;border-radius:9px;background:rgba(0,0,0,.08);margin:4px 0 9px}.profile-content-video{min-height:180px}.profile-content-audio{width:100%;margin:6px 0 9px}.profile-content-text{white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.45;margin:5px 0 8px}.profile-content-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;border:1px solid rgba(127,127,127,.18);border-radius:10px;padding:8px;margin:4px 0 8px}.profile-content-link-thumb{width:92px;height:64px;object-fit:cover;border-radius:7px;flex:0 0 auto}.profile-content-link span{display:flex;flex-direction:column;gap:4px;min-width:0}.profile-content-link small{opacity:.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-content-kind{font-size:11px;opacity:.62;text-transform:capitalize}.profile-deleted{padding:16px 10px;color:#888;font-style:italic}.profile-content-missing{padding:14px;border-radius:9px;background:rgba(127,127,127,.08);opacity:.7}.profile-call-card{display:flex;align-items:center;gap:11px;border:1px solid rgba(127,127,127,.2);border-radius:13px;padding:12px;background:rgba(127,127,127,.055)}.profile-call-icon{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1877f2;color:#fff}.profile-call-main{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}.profile-call-main strong,.profile-call-main span,.profile-call-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-call-main span{font-size:12px;opacity:.8}.profile-call-main small{font-size:11px;opacity:.62}.profile-call-card em{font-size:11px;font-style:normal;opacity:.7;white-space:nowrap}
.profile-crop-modal{position:fixed;inset:0;z-index:100030;display:flex;align-items:center;justify-content:center;padding:15px;background:rgba(0,0,0,.65)}.profile-crop-modal.hidden{display:none!important}.profile-crop-box{width:min(94vw,520px);background:var(--card-bg,#fff);color:var(--text-color,#172033);border-radius:18px;padding:15px}.profile-crop-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.profile-crop-head button{border:0;background:transparent;color:inherit;font-size:25px}.profile-crop-stage{height:min(70vw,420px);min-height:280px;background:#111;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;cursor:grab}.profile-crop-stage:active{cursor:grabbing}.profile-crop-stage img{max-width:none;max-height:none;width:100%;height:100%;object-fit:contain;transform-origin:center;user-select:none;-webkit-user-drag:none;pointer-events:none}.profile-crop-box input[type=range]{width:100%;margin:15px 0}.profile-crop-actions{display:flex;gap:10px}.profile-crop-actions button{flex:1;border:0;border-radius:10px;padding:11px;font-weight:700}.profile-crop-actions button:last-child{background:#1877f2;color:#fff}
@media(max-width:600px){.profile-page-card{width:100%;height:calc(100vh - 58px);margin:0;border-radius:0;padding:12px}.profile-fixed-bar{gap:10px}.profile-page-photo-wrap{flex-basis:92px;width:92px;height:92px}.profile-page-photo-wrap img{width:92px;height:92px}.profile-content-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.profile-content-tabs button{height:34px;font-size:10px;padding:0 4px}.profile-page-fields{grid-template-columns:1fr}.profile-page-header{padding-top:8px}.profile-content-meta{align-items:flex-start;flex-direction:column;gap:3px}.profile-content-link-thumb{width:80px;height:56px}}

/* Public chat gradient backgrounds: selected gradient remains visible behind every post/media type. */
#messages.public-chat-gradient-bg,
#messages {
    background-color: transparent;
}
#messages .post-container,
#messages .public-post,
#messages .message-post,
#messages .post-content,
#messages .media-post,
#messages .gif-post,
#messages .video-post,
#messages .image-post {
    background-color: rgba(5, 8, 20, .28) !important;
    background-image: none !important;
}
.kite-public-bg-option { background-size:cover !important; background-position:center !important; }
.kite-public-bg-option::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 55%); pointer-events:none; }


/* Let the selected gradient show through every public post/media wrapper. */
#messages {
  background-color: transparent !important;
  background-image: var(--kite-public-bg-image, none) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}
#messages > *, #messages .post-container, #messages .public-post, #messages .message-post,
#messages .post-content, #messages .media-post, #messages .gif-post, #messages .video-post,
#messages .image-post, #messages .post-media, #messages .message-content {
  background-image: none !important;
}
#messages .post-container, #messages .public-post, #messages .message-post {
  background-color: rgba(8,12,28,.24) !important;
}
#messages img, #messages video { background-color: transparent; }


/* ===== Group Chat ===== */
.kite-group-chat-modal{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:12px}
.kite-group-chat-modal.hidden{display:none}
.kite-group-chat-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(5px)}
.kite-group-chat-window{position:relative;width:min(96vw,440px);height:min(88vh,720px);display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(36,55,85,0.12);border-radius:20px;background:var(--card-bg,#f6f7f9);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.kite-group-chat-header{min-height:54px;display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid rgba(36,55,85,0.10)}
.kite-group-chat-header strong{flex:1;font-size:16px}
.kite-group-icon-btn{width:36px;height:36px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:inherit;font-size:22px;cursor:pointer}
.kite-group-chat-view{min-height:0;flex:1;display:flex;flex-direction:column;padding:12px;overflow:hidden}
.kite-group-create-card{display:flex;gap:8px;margin-bottom:12px}
.kite-group-create-card input,.kite-group-name-row input,.kite-group-search{min-width:0;flex:1;padding:11px 12px;border-radius:11px;border:1px solid rgba(36,55,85,0.14);background:rgba(255,255,255,.06);color:inherit;outline:none}
.kite-group-section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.7;margin:6px 2px 9px}
.kite-group-list,.kite-group-user-list{min-height:0;overflow:auto}
.kite-group-list-item{width:100%;display:flex;align-items:center;gap:11px;padding:11px;border:0;border-bottom:1px solid rgba(36,55,85,0.07);background:transparent;color:inherit;text-align:left;cursor:pointer}
.kite-group-list-item:hover{background:rgba(255,255,255,.05)}
.kite-group-list-item span:nth-child(2){display:flex;flex-direction:column;gap:2px}
.kite-group-list-item small,.kite-group-user small{font-size:10px;opacity:.6}
.kite-group-avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:rgba(99,102,241,.22);font-size:17px}
.kite-group-empty{text-align:center;padding:28px 12px;opacity:.6;font-size:13px}
.kite-group-user{display:flex;align-items:center;gap:10px;padding:9px 5px;border-bottom:1px solid rgba(36,55,85,0.06);cursor:pointer}
.kite-group-user input{width:18px;height:18px;accent-color:#6366f1}
.kite-group-user img{width:38px;height:38px;object-fit:cover;border-radius:50%;background:#f7f7f7}
.kite-group-user span{min-width:0;display:flex;flex-direction:column;gap:2px}
.kite-group-user strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kite-group-create-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:10px}
.kite-group-room-info{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 10px}
.kite-group-room-info>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.kite-group-room-info strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kite-group-room-info small{font-size:10px;opacity:.6}
.kite-group-messages{min-height:0;flex:1;overflow:auto;padding:8px 2px;display:flex;flex-direction:column;gap:8px}
.kite-group-message{max-width:82%;align-self:flex-start;padding:8px 10px;border-radius:13px 13px 13px 4px;background:rgba(255,255,255,.08)}
.kite-group-message.mine{align-self:flex-end;border-radius:13px 13px 4px 13px;background:rgba(99,102,241,.25)}
.kite-group-message-author{font-size:10px;font-weight:700;opacity:.7;margin-bottom:2px}
.kite-group-message-body{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.kite-group-message time{display:block;font-size:9px;opacity:.5;text-align:right;margin-top:3px}
.kite-group-composer{display:flex;gap:7px;align-items:flex-end;padding-top:10px}
.kite-group-composer textarea{flex:1;resize:none;max-height:110px;padding:10px 12px;border-radius:13px;border:1px solid rgba(36,55,85,0.14);background:rgba(255,255,255,.06);color:inherit;outline:none}
.kite-group-composer .button{min-width:42px;height:42px}
.kite-group-name-row{display:flex;gap:8px}
.kite-group-name-row input{width:auto}
@media(max-width:480px){.kite-group-chat-modal{padding:0}.kite-group-chat-window{width:100vw;height:100dvh;border-radius:0}.kite-group-create-card{flex-direction:column}}


/* Private chat voice message */
.private-voice-composer-button {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    font-size: 17px !important;
}
.private-voice-composer-button.recording { animation: kiteVoicePulse 1s infinite; background: #e74c3c !important; }
.private-voice-status { font-size:11px; color:#e74c3c; text-align:center; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; min-height:0; }
@keyframes kiteVoicePulse { 50% { transform:scale(1.08); opacity:.65; } }

/* Private voice button: exactly match the composer attachment button */
#private-chat-container .private-voice-composer-button {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg,#7c5cff,#3d8cff) !important;
    color: #fff !important;
    font-size: 18px !important;
    box-shadow: 8px 8px 20px rgba(83,78,217,.28) !important;
}
#private-chat-container .private-voice-composer-button.recording {
    background: #e74c3c !important;
}















/* Functional Live hub */




/* =========================================================
   KITE v3 NAV REDESIGN
   Visual/layout only. Existing element IDs and JS hooks preserved.
   ========================================================= */
#chat-header.kite-main-header{
  position:relative;
  flex:0 0 auto;
  width:100%;
  box-sizing:border-box;
  padding:7px 6px 6px;
}
.kite-main-header .kite-brand{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0 10px;
  color:var(--kite-text,#172033);
  font-size:22px;
  font-weight:850;
  letter-spacing:.2px;
}
.kite-top-notification{
  position:absolute!important;
  top:7px;
  right:6px;
  width:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  height:42px!important;
  padding:0!important;
  border-radius:13px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,var(--kite-accent,#7c5cff),var(--kite-accent2,#20d8ff))!important;
  color:#fff!important;
  box-shadow:0 9px 25px rgba(0,0,0,.22);
}
.kite-top-notification i{font-size:17px}
.kite-top-notification .notif-badge{
  position:absolute;
  top:-3px;
  right:-3px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  background:#ff416c;
  color:#fff;
  border:2px solid #070b17;
}

#profile-container.kite-profile-status-row{
  width:100%;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  margin:2px 0 8px;
}
#profile-container.kite-profile-status-row > .top-card{
  width:100%!important;
  min-width:0;
  aspect-ratio:1/1!important;
  height:auto!important;
  max-height:none!important;
  box-sizing:border-box;
}
#profile-container #profile{
  min-height:0!important;
  border-radius:20px!important;
  padding:8px 5px!important;
}
#profile-container #profile-pic{
  width:clamp(54px,18vw,78px)!important;
  height:clamp(54px,18vw,78px)!important;
  border-radius:18px!important;
}
#profile-container .profile-display-name{
  max-width:100%;
  font-size:13px!important;
}
#profile-container .profile-display-status{
  font-size:10px!important;
}
#profile-container .status-card{
  min-height:0!important;
  border-radius:20px!important;
  padding:8px 5px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
#profile-container .status-card img{
  width:clamp(54px,18vw,78px)!important;
  height:clamp(54px,18vw,78px)!important;
  border-radius:18px!important;
  object-fit:cover;
}
#profile-container .top-new-user-card{
  border-radius:20px!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:8px 5px!important;
}
#profile-container .new-user-card-content{
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
}
#profile-container #new-user-pic{
  width:clamp(54px,18vw,78px);
  height:clamp(54px,18vw,78px);
  border-radius:18px;
  object-fit:cover;
}
#profile-container .new-user-label{font-size:9px;font-weight:850;letter-spacing:.8px}
#profile-container .new-user-name{max-width:100%;font-size:12px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#profile-container .new-user-country{max-width:100%;font-size:9px;opacity:.68;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.kite-main-nav{
  position:relative;
  z-index:20;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr)) minmax(54px,.75fr);
  gap:6px;
  width:100%;
  margin:0 0 7px;
  box-sizing:border-box;
}
.kite-main-nav .kite-nav-btn{
  min-width:0!important;
  max-width:none!important;
  height:44px;
  padding:5px 3px!important;
  border-radius:13px!important;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  font-size:10px!important;
  font-weight:750;
  line-height:1;
  white-space:nowrap;
  background:linear-gradient(135deg,color-mix(in srgb,var(--kite-accent,#7c5cff) 78%,#f7f7f7 22%),color-mix(in srgb,var(--kite-accent2,#20d8ff) 72%,#f7f7f7 28%))!important;
  color:#fff!important;
}
.kite-main-nav .kite-nav-btn i{font-size:16px}
.kite-main-nav .kite-nav-btn span{display:block}





/* More menu is anchored to the More button, not the old account icon. */
.kite-more-menu{
  position:absolute!important;
  top:calc(100% + 3px)!important;
  right:0!important;
  left:auto!important;
  width:min(235px,86vw)!important;
  min-width:0!important;
  max-height:min(72vh,520px);
  overflow-y:auto;
  padding:8px!important;
  border-radius:18px!important;
  z-index:100050!important;
  background:rgba(245,246,250,0.98)!important;
  border:1px solid rgba(36,55,85,0.13)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.48)!important;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}
.kite-more-menu.hidden{display:none!important}
.kite-more-item{
  width:100%!important;
  min-height:42px!important;
  margin:2px 0!important;
  padding:9px 11px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:11px!important;
  border:0!important;
  border-radius:11px!important;
  background:transparent!important;
  color:#172033!important;
  font:600 13px inherit!important;
  cursor:pointer;
  text-align:left;
}
.kite-more-item i{width:20px;text-align:center;font-size:15px}
.kite-more-item:hover{background:rgba(255,255,255,.09)!important}
.kite-more-theme{position:relative;width:100%;margin:2px 0}
.kite-more-theme .kite-more-item{margin:0!important}
#account-menu #kite-theme-switcher{width:100%!important;margin:0!important}
#account-menu .kite-theme-menu{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  margin:5px 0 2px;
  width:100%!important;
  box-sizing:border-box;
}
#account-menu .kite-theme-btn{
  min-height:42px!important;
  padding:9px 11px!important;
  border:0!important;
  background:transparent!important;
  color:#172033!important;
}
#account-menu .kite-theme-btn:hover{background:rgba(255,255,255,.09)!important}

.notif-panel{
  top:47px!important;
  left:auto!important;
  right:0!important;
  width:min(360px,92vw)!important;
  max-width:none!important;
  margin-top:4px!important;
  z-index:100060!important;
}

/* Keep the feed as the main scrolling area below the compact header. */
#messages{min-height:0!important}

/* Small screens: retain all five navigation controls without wrapping. */
@media(max-width:380px){
  #chat-header.kite-main-header{padding-left:4px;padding-right:4px}
  .kite-main-header .kite-brand{font-size:20px;padding-left:7px}
  .kite-top-notification{right:4px}
  .kite-main-nav{gap:4px}
  .kite-main-nav .kite-nav-btn{height:42px;font-size:9px!important;border-radius:11px!important}
  .kite-main-nav .kite-nav-btn i{font-size:14px}
  #profile-container.kite-profile-status-row{gap:5px!important}
}


/* Kiters header + profile/status/new-user card alignment */
#chat-header .kite-brand{font-size:clamp(16px,4vw,20px)!important;line-height:1.15!important}
#chat-header #notif-btn{min-width:28px!important;width:28px!important;height:32px!important;padding:4px!important;display:grid!important;place-items:center!important}
#chat-header #notif-btn .fa-bell{font-size:15px!important}
#chat-header #notif-badge{font-size:9px!important;min-width:14px!important;height:14px!important;line-height:14px!important}
#profile-container .top-card{height:auto!important;min-height:146px!important;aspect-ratio:auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;padding:9px 5px!important;overflow:hidden!important}
#profile-container .profile-avatar-wrap,
#profile-container #my-status-thumb,
#profile-container #new-user-pic{width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;max-width:58px!important;max-height:58px!important;border-radius:50%!important;object-fit:cover!important;flex:0 0 58px!important;display:block!important;overflow:hidden!important}
#profile-container .profile-avatar-wrap{margin:0 auto!important;overflow:hidden!important}
#profile-container .profile-avatar-wrap #profile-pic{width:100%!important;height:100%!important;border-radius:50%!important;object-fit:cover!important;border:2px solid #4caf50!important}
#profile-container #my-status-card{position:relative!important}
#profile-container #my-status-thumb{margin:0 auto!important}
#profile-container #my-status-preview{display:none!important}
#profile-container .status-card-title,#profile-container .status-card-meta,
#profile-container .profile-display-name,#profile-container .profile-display-status,
#profile-container .new-user-label,#profile-container .new-user-name,#profile-container .new-user-country{position:static!important;display:block!important;width:100%!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.25!important;margin:0!important}
#profile-container .profile-display-name,#profile-container .new-user-name{font-size:12px!important;font-weight:700!important}
#profile-container .profile-display-status,#profile-container .status-card-meta,#profile-container .new-user-country{font-size:10px!important}
#profile-container .new-user-card-content{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;padding:0!important}
#profile-container .new-user-label{font-size:9px!important;letter-spacing:.05em!important}
#profile-container .status-card-plus{width:19px!important;height:19px!important;top:5px!important;right:5px!important;font-size:10px!important}
@media(max-width:430px){#profile-container .top-card{min-height:138px!important;padding:7px 3px!important}#profile-container .profile-avatar-wrap,#profile-container #my-status-thumb,#profile-container #new-user-pic{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;max-width:52px!important;max-height:52px!important;flex-basis:52px!important}}


/* Requested compact cards, rainbow Kiters title and uniform circular status media */
#chat-header .kite-brand{background:linear-gradient(90deg,#ff4d6d,#ff9f43,#ffe66d,#55d98b,#36c5f0,#7c5cff,#e056fd);-webkit-background-clip:text;background-clip:text;color:transparent!important;font-weight:900!important}
#profile-container.kite-profile-status-row>.top-card{aspect-ratio:auto!important;height:auto!important;min-height:0!important;max-height:none!important}
#profile-container .top-card{min-height:0!important;height:auto!important;padding:9px 6px!important;gap:5px!important;overflow:visible!important}
#profile-container #profile{background:inherit!important}
#profile-container .profile-avatar-wrap,#profile-container #my-status-thumb,#profile-container #new-user-pic,#profile-container #my-status-preview{width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;max-width:58px!important;max-height:58px!important;flex:0 0 58px!important;border-radius:50%!important;overflow:hidden!important;box-sizing:border-box!important}
#profile-container #my-status-preview{display:flex!important;align-items:center!important;justify-content:center!important;margin:0 auto!important;background:linear-gradient(135deg,#6558f5,#2998ff)!important;color:#fff!important;border:2px solid #52c878!important}
#profile-container #my-status-preview[hidden]{display:none!important}
#profile-container #my-status-preview .status-preview-text,#profile-container #my-status-preview .status-preview-link,#profile-container #my-status-preview .status-preview-audio,#profile-container #my-status-preview .status-preview-type{width:100%!important;height:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;padding:4px!important;box-sizing:border-box!important;border-radius:50%!important;background:transparent!important;color:#172033!important;text-align:center!important;overflow:hidden!important;font-size:10px!important}
#profile-container #my-status-preview .status-preview-text{font-size:9px!important;line-height:1.1!important}
#profile-container #my-status-preview i{font-size:23px!important}
#profile-container #my-status-preview small{display:none!important}
#profile-container .top-new-user-card{background:transparent!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#profile-container .top-new-user-card:before,#profile-container .top-new-user-card:after,#profile-container #new-user-card:before,#profile-container #new-user-card:after{display:none!important;content:none!important}
#profile-container .new-user-card-content{background:transparent!important;box-shadow:none!important;border:0!important;min-width:0!important;width:100%!important}
#profile-container .new-user-name{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important;line-height:1.2!important}
@media(max-width:430px){#profile-container .top-card{min-height:0!important;padding:8px 4px!important}#profile-container .profile-avatar-wrap,#profile-container #my-status-thumb,#profile-container #new-user-pic,#profile-container #my-status-preview{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;max-width:52px!important;max-height:52px!important;flex-basis:52px!important}}

/* Mobile: make the notifications dropdown span the full screen width. */
@media (max-width: 600px) {
  .notif-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    border-radius: 0 0 12px 12px !important;
  }
}


/* =========================================================
   Notification + theme card refinements
   - Bell is the single control for opening/closing notifications.
   - Remove the redundant notification-panel X.
   - Profile and New User cards follow the active Kiters theme.
   ========================================================= */

/* The bell toggles the notification panel, so the separate X is redundant. */
#notif-panel-close{
  display:none!important;
}

/* Keep the notification header clean after removing the X. */
.notif-panel-header{
  justify-content:flex-start!important;
  padding-right:14px!important;
}

/* Theme-aware profile and New User card surfaces. */
html[data-theme] #profile-container #profile,
html[data-theme] #profile-container .top-new-user-card{
  background:var(--kite-surface)!important;
  color:var(--kite-text)!important;
  border:1px solid var(--kite-border,rgba(127,127,127,.18))!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--kite-accent) 12%,transparent)!important;
}

/* Pearl/light theme gets the same theme surface without the dark glass override. */
html[data-theme] #profile-container #profile,
html[data-theme] #profile-container .top-new-user-card{
  background:var(--kite-surface)!important;
  color:var(--kite-text)!important;
  border-color:rgba(36,55,85,.12)!important;
}

/* Do not let the transparent New User content cancel the themed card. */
html[data-theme] #profile-container .new-user-card-content{
  background:transparent!important;
  color:inherit!important;
}


/* =========================================================
   KITE CARD + NAV BEHAVIOUR FIXES
   ========================================================= */
/* All three top cards use the same surface. The status card no longer
   gets the bright generic button gradient. */
html[data-theme] #profile-container #profile,
html[data-theme] #profile-container #my-status-card,
html[data-theme] #profile-container .top-new-user-card{
  background:var(--kite-surface)!important;
  color:var(--kite-text)!important;
  border:1px solid var(--kite-border,rgba(127,127,127,.18))!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--kite-accent) 12%,transparent)!important;
}

/* Keep the three circles on one horizontal level and make them larger. */
#profile-container .profile-avatar-wrap,
#profile-container #my-status-thumb,
#profile-container #new-user-pic,
#profile-container #my-status-preview{
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  min-height:64px!important;
  max-width:64px!important;
  max-height:64px!important;
  flex:0 0 64px!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
}
#profile-container .top-card{
  min-height:154px!important;
  height:154px!important;
  padding:10px 6px 8px!important;
  gap:6px!important;
  justify-content:flex-start!important;
}
#profile-container .profile-avatar-wrap,
#profile-container #my-status-thumb,
#profile-container #my-status-preview,
#profile-container #new-user-pic{margin-top:0!important;margin-bottom:2px!important}
#profile-container .profile-display-name,
#profile-container .status-card-title,
#profile-container .new-user-name{margin-top:2px!important;font-size:13px!important;line-height:1.25!important}
#profile-container .profile-display-status,
#profile-container .status-card-meta,
#profile-container .new-user-country{margin-top:1px!important;font-size:10px!important;line-height:1.25!important}
#profile-container .new-user-label{font-size:9px!important;line-height:1.2!important;margin-bottom:0!important}

/* Pearl keeps the same unified card treatment. */
html[data-theme] #profile-container #profile,
html[data-theme] #profile-container #my-status-card,
html[data-theme] #profile-container .top-new-user-card{
  background:var(--kite-surface)!important;
  color:var(--kite-text)!important;
  border-color:rgba(36,55,85,.12)!important;
}

@media(max-width:430px){
  #profile-container .top-card{
    min-height:148px!important;
    height:148px!important;
    padding:9px 4px 7px!important;
  }
  #profile-container .profile-avatar-wrap,
  #profile-container #my-status-thumb,
  #profile-container #new-user-pic,
  #profile-container #my-status-preview{
    width:62px!important;height:62px!important;
    min-width:62px!important;min-height:62px!important;
    max-width:62px!important;max-height:62px!important;
    flex-basis:62px!important;
  }
}


/* ===== Unified Profile / My Status / New User card layout =====
   Profile: username -> circle -> online
   My Status: title -> circle -> views/likes
   New User remains the reference layout.
*/
#profile-container .top-card{
  min-height:146px!important;
  height:auto!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:5px!important;
  padding:7px 5px!important;
}

#profile-container #profile{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
}

#profile-container #profile-name{order:1!important;}
#profile-container .profile-avatar-wrap{order:2!important;}
#profile-container #profile-status{order:3!important;}

#profile-container .status-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:5px!important;
  padding:7px 5px!important;
}
#profile-container #my-status-card .status-card-title{order:1!important;}
#profile-container #my-status-card #my-status-thumb{order:2!important;}
#profile-container #my-status-card .my-status-preview{order:2!important;}
#profile-container #my-status-card .status-card-meta{order:3!important;}

#profile-container .profile-avatar-wrap,
#profile-container #profile-pic,
#profile-container #my-status-thumb,
#profile-container #new-user-pic{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  max-width:58px!important;
  max-height:58px!important;
  flex:0 0 58px!important;
  border-radius:50%!important;
  object-fit:cover!important;
}

#profile-container #my-status-thumb{
  margin:0 auto!important;
  display:block!important;
}

#profile-container .profile-display-name,
#profile-container .profile-display-status,
#profile-container .status-card-title,
#profile-container .status-card-meta,
#profile-container .new-user-label,
#profile-container .new-user-name,
#profile-container .new-user-country{
  width:100%!important;
  height:15px!important;
  min-height:15px!important;
  max-height:15px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:15px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#profile-container .profile-display-name,
#profile-container .status-card-title,
#profile-container .new-user-name{
  font-size:12px!important;
  font-weight:700!important;
}

#profile-container .profile-display-status,
#profile-container .status-card-meta,
#profile-container .new-user-country{
  font-size:10px!important;
}

#profile-container .profile-display-status{
  gap:4px!important;
}

#profile-container .profile-status-dot{
  flex:0 0 7px!important;
  width:7px!important;
  height:7px!important;
  margin:0!important;
}

#profile-container .new-user-card-content{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:5px!important;
}

#profile-container .status-card::after{
  display:none!important;
}

#profile-container .status-card-plus{
  z-index:5!important;
}

@media(max-width:430px){
  #profile-container .top-card{
    min-height:138px!important;
    padding:7px 3px!important;
  }
  #profile-container .profile-avatar-wrap,
  #profile-container #profile-pic,
  #profile-container #my-status-thumb,
  #profile-container #new-user-pic{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
    max-width:52px!important;
    max-height:52px!important;
    flex-basis:52px!important;
  }
}


















































































/* Star is part of the card row, always directly opposite the source text. */




/* Cards without a logo: let the text use the first two columns. */
































































/* Favorites page: no extra status line under the title. */

















/* Favorites is intentionally a plain page: no catalog tab strip or status/search row. */












/* Kiters AI Image Generator */
.kite-ai-image-modal{
  position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);
}
.kite-ai-image-modal.hidden{display:none!important}
.kite-ai-image-dialog{
  width:min(94vw,520px);max-height:92dvh;overflow:auto;background:var(--panel-bg,#f7f7f7);
  color:var(--text-color,#172033);border:1px solid rgba(36,55,85,0.16);border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.kite-ai-image-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid rgba(36,55,85,0.10)}
.kite-ai-image-head button{width:34px;height:34px;border:0;border-radius:50%;background:rgba(36,55,85,.08);color:#172033;font-size:24px;cursor:pointer}
.kite-ai-image-body{padding:15px}
#kite-ai-image-prompt{
  width:100%;min-height:110px;resize:vertical;box-sizing:border-box;border:1px solid rgba(36,55,85,0.16);
  border-radius:11px;padding:12px;background:rgba(255,255,255,.06);color:#fff;outline:none;
}
#kite-ai-image-prompt::placeholder{color:rgba(23,32,51,0.70)}
.kite-ai-image-options{display:flex;align-items:center;gap:10px;margin:11px 0}
.kite-ai-image-options label{font-size:13px;display:flex;align-items:center;gap:8px}
#kite-ai-image-ratio{border:1px solid rgba(36,55,85,0.15);border-radius:8px;padding:7px 9px;background:#f7f7f7;color:#172033}
.kite-ai-image-status{min-height:20px;font-size:13px;text-align:center;margin:8px 0}
.kite-ai-image-preview{display:flex;justify-content:center;margin:10px 0}
.kite-ai-image-preview.hidden{display:none}
#kite-ai-image-preview-img{display:block;max-width:100%;max-height:48dvh;border-radius:10px;object-fit:contain}
.kite-ai-image-actions{display:flex;gap:8px;justify-content:flex-end}
.kite-ai-image-actions button{border:0;border-radius:9px;padding:10px 14px;background:#1877f2;color:#fff;font-weight:700;cursor:pointer}
.kite-ai-image-actions button:disabled{opacity:.55;cursor:wait}
.kite-ai-image-actions .hidden{display:none!important}


/* My Status: exactly one profile circle; no nested status/upload circle. */
#profile-container #my-status-card #my-status-preview {
  display: none !important;
}
#profile-container #my-status-card #my-status-thumb {
  display: block !important;
  position: relative !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
#profile-container #my-status-card .status-card-title,
#profile-container #my-status-card .status-card-meta {
  position: static !important;
  transform: none !important;
}
.status-upload-indicator {
  font-size: 11px !important;
  min-height: 30px !important;
  padding: 5px 10px !important;
}
.status-upload-indicator span {
  font-size: 11px !important;
}


/* =========================================================
   Mobile chat keyboard behavior — WhatsApp-style viewport lock
   Keeps public/private/group chat headers at the top while the
   keyboard is open. The normal page layout is restored on blur.
   ========================================================= */
html.kite-keyboard-open,
body.kite-keyboard-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: pan-x pan-y;
}

body.kite-keyboard-open #chat-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 420px !important;
    height: var(--kite-keyboard-viewport-height, 100dvh) !important;
    max-height: var(--kite-keyboard-viewport-height, 100dvh) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    z-index: 900 !important;
}

body.kite-keyboard-open #private-chat-container {
    height: var(--kite-keyboard-viewport-height, 100dvh) !important;
    max-height: var(--kite-keyboard-viewport-height, 100dvh) !important;
    overflow: hidden !important;
}

body.kite-keyboard-open #group-chat-page {
    height: var(--kite-keyboard-viewport-height, 100dvh) !important;
    max-height: var(--kite-keyboard-viewport-height, 100dvh) !important;
    bottom: auto !important;
    overflow: hidden !important;
}

body.kite-keyboard-open #messages,
body.kite-keyboard-open #private-messages,
body.kite-keyboard-open #group-messages {
    min-height: 0 !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
    body.kite-keyboard-open textarea#message-input,
    body.kite-keyboard-open textarea#private-message-input,
    body.kite-keyboard-open textarea#group-message-input {
        scroll-margin: 0 !important;
    }
}


/* Group call UI stays inside the Group Chat page and covers only that page. */
#group-chat-page #call-container.group-call-surface {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    z-index: 999999 !important;
    border-radius: 0 !important;
    display: none;
}
#group-chat-page #call-container.group-call-surface.active { display: flex !important; }

/* Group-call participant picker */
.group-call-card{width:min(460px,100%);max-height:min(82vh,680px);overflow:hidden}
.group-call-friends{display:flex;flex-direction:column;gap:8px;max-height:min(48vh,360px);overflow-y:auto;-webkit-overflow-scrolling:touch;margin:8px 0 12px}
.group-call-friend{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(128,128,128,.25);border-radius:10px;cursor:pointer}
.group-call-friend input{width:18px;height:18px;flex:0 0 auto}
.group-call-friend img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.group-call-friend span{font-size:14px;font-weight:600}

/* Emoji/sticker pickers: vertical swipes must scroll, never trigger a send. */
.emoji-grid,
.sticker-grid {
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}
.emoji-choice,
.sticker-choice {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}


/* Group calls use a compact 2x2-style tile area. JaaS supplies the live
   participant video/avatar tiles inside the iframe; keep our status strip
   from covering those tiles. */
#call-container.group-call-surface #jaas-call-frame {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:1 !important;
}
#call-container.group-call-surface #group-call-participants-ui {
    bottom:82px;
    z-index:5;
}

/* WhatsApp-style group-call participant/status strip. JaaS renders the live
   video tiles; this strip is used for ringing/rejected/disconnected states. */
#call-container.group-call-surface #group-call-participants-ui {
    position:absolute;
    left:10px;
    right:10px;
    bottom:78px;
    z-index:20;
    pointer-events:none;
    background:rgba(0,0,0,.42);
    border-radius:16px;
    padding:7px;
    backdrop-filter:blur(8px);
}
#call-container.group-call-surface .group-call-participants-title {
    font-size:11px;
    font-weight:700;
    opacity:.82;
    padding:0 4px 5px;
}
#call-container.group-call-surface .group-call-participants-grid {
    display:flex;
    gap:7px;
    overflow-x:auto;
    scrollbar-width:none;
}
#call-container.group-call-surface .group-call-participants-grid::-webkit-scrollbar{display:none}
#call-container.group-call-surface .group-call-participant-tile {
    flex:0 0 82px;
    min-height:72px;
    border-radius:12px;
    padding:6px;
    text-align:center;
    background:rgba(30,30,30,.78);
    border:1px solid rgba(255,255,255,.14);
}
#call-container.group-call-surface .group-call-participant-tile img {
    width:32px;height:32px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 3px;
}
#call-container.group-call-surface .group-call-participant-name {
    font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#call-container.group-call-surface .group-call-participant-status {
    font-size:9px;margin-top:2px;opacity:.9;
}
#call-container.group-call-surface .group-call-participant-tile.rejected .group-call-participant-status,
#call-container.group-call-surface .group-call-participant-tile.disconnected .group-call-participant-status {font-weight:800}
@media(max-width:600px){
    #call-container.group-call-surface #group-call-participants-ui{bottom:72px;left:7px;right:7px}
    #call-container.group-call-surface .group-call-participant-tile{flex-basis:76px;min-height:68px}
}


/* =========================================================
   KITE GROUP CALL — WhatsApp-style 2x2 real JaaS surface
   Group calls only. 1-to-1 call UI remains unchanged.
   ========================================================= */
#call-container.group-call-surface {
    background:#000 !important;
    overflow:hidden !important;
}
#call-container.group-call-surface #jaas-call-frame {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:2 !important;
    background:#000 !important;
    border-radius:0 !important;
    overflow:hidden !important;
}
/* JaaS itself owns the four real video/avatar tiles. Never place our fake
   participant cards over the iframe because they hide remote video. */
#call-container.group-call-surface #group-call-participants-ui {
    position:absolute !important;
    top:10px !important;
    left:10px !important;
    right:10px !important;
    bottom:auto !important;
    z-index:12 !important;
    pointer-events:none !important;
    background:transparent !important;
    padding:0 !important;
    visibility:hidden !important;
}
#call-container.group-call-surface #group-call-participants-ui.group-call-live {
    visibility:hidden !important;
}
#call-container.group-call-surface .group-call-participants-grid {
    display:flex !important;
    justify-content:flex-end !important;
    gap:6px !important;
    width:100% !important;
    height:auto !important;
}
#call-container.group-call-surface .group-call-participant-tile {
    display:none !important;
}
#call-container.group-call-surface .call-controls {
    position:absolute !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    bottom:max(22px,calc(env(safe-area-inset-bottom,0px) + 16px)) !important;
    gap:18px !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    z-index:30 !important;
}
#call-container.group-call-surface .call-signal { display:none !important; }
#call-container.group-call-surface .call-ctrl-btn {
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    border-radius:50% !important;
    background:#4a4a4a !important;
    color:#fff !important;
    border:0 !important;
    box-shadow:0 3px 12px rgba(0,0,0,.35) !important;
}
#call-container.group-call-surface .call-ctrl-btn.end {
    background:#ff2d2d !important;
}
#call-container.group-call-surface .call-ctrl-btn.camera-off,
#call-container.group-call-surface .call-ctrl-btn.muted {
    background:#777 !important;
}
#call-container.group-call-surface #call-status {
    top:14px !important;
    z-index:30 !important;
    font-size:13px !important;
    background:rgba(0,0,0,.42) !important;
    border-radius:16px !important;
    padding:5px 10px !important;
}
#call-container.group-call-surface #call-audio-ui { display:none !important; }
#call-container.group-call-surface .group-video-only { display:flex !important; }
#call-container.group-call-surface.audio-mode .group-video-only { display:none !important; }
#call-container:not(.group-call-surface) #camera-toggle-btn { display:flex; }

/* The JaaS iframe must remain full-screen on phones as well. */
@media(max-width:600px){
    #call-container.group-call-surface #jaas-call-frame {
        inset:0 !important;
        width:100% !important;
        height:100% !important;
    }
    #call-container.group-call-surface .call-controls { gap:14px !important; }
    #call-container.group-call-surface .call-ctrl-btn {
        width:52px !important;
        height:52px !important;
        min-width:52px !important;
    }
}


/* =========================================================
   KITE GROUP CALL — FINAL JaaS NATIVE TILE SURFACE
   The same fullscreen surface is used from Private Chat and Group Chat.
   JaaS/Jitsi renders the actual participant video/avatar tiles.
   ========================================================= */
#call-container.group-call-surface {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: none !important;
    z-index: 2147483000 !important;
    background: #000 !important;
    overflow: hidden !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}
#call-container.group-call-surface.active {
    display: flex !important;
}
#call-container.group-call-surface #jaas-call-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    background: #000 !important;
    overflow: hidden !important;
}
/* Do not put the old fake participant strip over JaaS video tiles.
   JaaS is the source of truth for active participant windows. */
#call-container.group-call-surface #group-call-participants-ui {
    display: none !important;
}
#call-container.group-call-surface .call-controls {
    z-index: 50 !important;
}
#call-container.group-call-surface #call-status {
    z-index: 50 !important;
}
@media (max-width: 600px) {
    #call-container.group-call-surface {
        width: 100vw !important;
        height: 100dvh !important;
    }
}

/* Reuse the exact Public Chat video player in Private + Group Chat. */
.private-chat-video,
.group-chat-video { width: min(100%, 520px); max-width: 100%; }
.private-chat-video .kite-video-element,
.group-chat-video .kite-video-element { width: 100%; max-width: 100%; }

/* ===== Icon-only control cleanup ===== */
.icon-button,
button.icon-button,
[aria-label="Close"].icon-button,
[aria-label="Back"].icon-button {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 6px !important;
}
.icon-button i,
button.icon-button i { display:inline-block !important; }

/* Kiters clickable shared-link cards */
.kite-link-card{
  display:flex;align-items:center;gap:10px;width:min(100%,420px);box-sizing:border-box;
  margin:4px 0;padding:9px 11px;border:1px solid rgba(128,128,128,.28);
  border-radius:12px;background:rgba(255,255,255,.92);color:inherit;text-align:left;
  cursor:pointer;font:inherit;overflow:hidden;
}
.kite-link-card:hover{filter:brightness(.97)}
.kite-link-icon{width:34px;height:34px;border-radius:8px;object-fit:contain;flex:0 0 34px;background:#fff}
.kite-link-info{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}
.kite-link-info strong{font-size:13px;line-height:1.2}
.kite-link-info small{font-size:11px;line-height:1.25;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kite-link-card>i{opacity:.65;flex:0 0 auto}
.dark .kite-link-card{background:rgba(247,247,248,0.94)}


/* ===== Rich Share Cards: large thumbnail, URL hidden ===== */
.kite-rich-link-card{
  width:100% !important;
  max-width:520px !important;
  min-width:0;
  display:block !important;
  overflow:hidden !important;
  border-radius:16px !important;
  box-sizing:border-box !important;
}
.kite-rich-link-card .kite-link-preview-media{
  width:100% !important;
  height:180px !important;
  min-height:150px;
}
.kite-rich-link-card .kite-link-preview-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.kite-rich-link-card .kite-link-url{
  display:none !important;
}
.kite-rich-link-card .kite-link-copy{
  padding:11px 13px 12px;
}
@media (max-width:480px){
  .kite-rich-link-card .kite-link-preview-media{
    height:170px !important;
  }
}

.public-repost-btn:disabled{opacity:.55;cursor:default}.public-repost-label{display:block}


/* Public post Repost + Tag actions */
.public-tag-btn{
  border:0;
  background:transparent;
  padding:6px 8px;
  border-radius:8px;
  cursor:pointer;
  font:inherit;
}
.public-tag-btn:active{transform:scale(.97);}
.public-post-tags{
  margin:6px 0 2px;
  font-size:13px;
  opacity:.78;
  word-break:break-word;
}

.kite-public-tag-modal{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.48);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.kite-public-tag-panel{width:min(420px,100%);max-height:78vh;background:#fff;color:#222;border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 16px 45px rgba(0,0,0,.25)}.kite-public-tag-title{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eee}.kite-public-tag-close{border:0;background:transparent;font-size:26px;cursor:pointer}.kite-public-tag-search{margin:12px;padding:10px;border:1px solid #ddd;border-radius:10px}.kite-public-tag-list{overflow:auto;padding:0 10px}.kite-public-tag-friend{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid #f0f0f0;cursor:pointer}.kite-public-tag-friend img{width:40px;height:40px;border-radius:50%;object-fit:cover}.kite-public-tag-empty{padding:20px;text-align:center;color:#777;display:none}.kite-public-tag-footer{display:flex;gap:8px;justify-content:flex-end;padding:12px;border-top:1px solid #eee}.kite-public-tag-cancel,.kite-public-tag-submit{border:0;border-radius:9px;padding:9px 14px;cursor:pointer}.kite-public-tag-cancel{background:#eee}.kite-public-tag-submit{background:#28a745;color:#fff}.kite-post-focus{animation:kitePostFocus 1.8s ease}@keyframes kitePostFocus{20%,70%{outline:3px solid rgba(40,167,69,.5);box-shadow:0 0 0 5px rgba(40,167,69,.12)}}


/* Public feed: breathing room between posts and one consistent action row */
.post-container.message{
  margin:10px 8px !important;
}
.public-post-actions{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  width:100% !important;
  box-sizing:border-box !important;
  flex-wrap:nowrap !important;
  overflow:hidden !important;
  margin-top:8px !important;
  padding-top:7px !important;
  border-top:1px solid rgba(128,128,128,.14) !important;
}
.public-action-btn{
  flex:1 1 0 !important;
  min-width:0 !important;
  height:32px !important;
  padding:0 7px !important;
  border:1px solid rgba(128,128,128,.38) !important;
  border-radius:8px !important;
  background:transparent !important;
  color:inherit !important;
  cursor:pointer !important;
  font:inherit !important;
  font-size:12px !important;
  line-height:30px !important;
  text-align:center !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.public-action-btn:disabled{opacity:.55;cursor:not-allowed !important;}
.public-like-btn{color:#28a745 !important;border-color:#28a745 !important;}
.public-dislike-btn{color:#dc3545 !important;border-color:#dc3545 !important;}
.public-repost-btn{color:#6f42c1 !important;border-color:#6f42c1 !important;}
.public-tag-btn{color:#8a6500 !important;border-color:#b28a20 !important;}
.public-delete-btn{color:#dc3545 !important;border-color:#dc3545 !important;}
.public-action-views{
  flex:0 0 auto !important;
  min-width:42px !important;
  height:32px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:12px !important;
  opacity:.72 !important;
}
@media(max-width:380px){
  .public-post-actions{gap:4px !important;}
  .public-action-btn{font-size:11px !important;padding:0 4px !important;}
  .public-action-views{min-width:34px !important;font-size:11px !important;}
}


/* ===== Public post final UI ===== */
.public-message,
.public-post,
.public-chat-post,
.kite-public-post,
.message-container.public-message{
  border:1px solid rgba(128,128,128,.28) !important;
  border-radius:12px !important;
  margin:8px 0 !important;
  box-sizing:border-box !important;
}

.public-message .message-actions,
.public-post .message-actions,
.public-chat-post .message-actions,
.kite-public-post .message-actions,
.message-container.public-message .message-actions{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  width:100% !important;
  flex-wrap:nowrap !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.public-message .message-actions button,
.public-post .message-actions button,
.public-chat-post .message-actions button,
.kite-public-post .message-actions button,
.message-container.public-message .message-actions button{
  flex:1 1 0 !important;
  min-width:0 !important;
  width:auto !important;
  height:34px !important;
  padding:5px 7px !important;
  margin:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  font-size:13px !important;
}

.public-message .public-tag-btn,
.public-post .public-tag-btn,
.public-chat-post .public-tag-btn,
.kite-public-post .public-tag-btn{
  flex:1 1 0 !important;
  min-width:0 !important;
}

.public-message .repost-btn,
.public-message .public-repost-btn,
.public-post .repost-btn,
.public-post .public-repost-btn,
.public-chat-post .repost-btn,
.public-chat-post .public-repost-btn,
.kite-public-post .repost-btn,
.kite-public-post .public-repost-btn{
  flex:1.25 1 0 !important;
  min-width:72px !important;
  padding-left:8px !important;
  padding-right:8px !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

/* Keep the single, upper views display; hide only action-row duplicate. */
.public-message .message-actions .message-views,
.public-post .message-actions .message-views,
.public-chat-post .message-actions .message-views,
.kite-public-post .message-actions .message-views{
  display:none !important;
}

@media (max-width:420px){
  .public-message .message-actions button,
  .public-post .message-actions button,
  .public-chat-post .message-actions button,
  .kite-public-post .message-actions button{
    font-size:12px !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }
  .public-message .repost-btn,
  .public-message .public-repost-btn,
  .public-post .repost-btn,
  .public-post .public-repost-btn,
  .public-chat-post .repost-btn,
  .public-chat-post .public-repost-btn,
  .kite-public-post .repost-btn,
  .kite-public-post .public-repost-btn{
    min-width:68px !important;
  }
}
\n\n/* ===== FINAL PUBLIC POST ACTION LAYOUT ===== */\n#messages .post-container.message {\n  margin: 10px 8px !important;\n  border: 1px solid rgba(128,128,128,.32) !important;\n  border-radius: 12px !important;\n  box-sizing: border-box !important;\n  overflow: hidden !important;\n  padding: 10px !important;\n}\n#messages .post-container.message .message-meta {\n  display:flex !important;\n  align-items:center !important;\n  gap:8px !important;\n  min-height:22px !important;\n}\n#messages .post-container.message .public-top-views {\n  display:inline-flex !important;\n  align-items:center !important;\n  font-size:12px !important;\n  opacity:.72 !important;\n}\n#messages .post-container.message .public-post-actions {\n  display:flex !important;\n  flex-direction:row !important;\n  flex-wrap:nowrap !important;\n  align-items:center !important;\n  gap:5px !important;\n  width:100% !important;\n  overflow:visible !important;\n  box-sizing:border-box !important;\n}\n#messages .post-container.message .public-post-actions .public-action-btn {\n  flex:1 1 0 !important;\n  width:auto !important;\n  min-width:0 !important;\n  max-width:none !important;\n  height:34px !important;\n  padding:0 6px !important;\n  display:flex !important;\n  align-items:center !important;\n  justify-content:center !important;\n  white-space:nowrap !important;\n  overflow:visible !important;\n  text-overflow:clip !important;\n  font-size:12px !important;\n  line-height:1 !important;\n  box-sizing:border-box !important;\n}\n#messages .post-container.message .public-post-actions .public-repost-btn {\n  flex:1.15 1 0 !important;\n  min-width:78px !important;\n}\n#messages .post-container.message .public-post-actions .public-action-views {\n  display:none !important;\n}\n@media(max-width:390px){\n  #messages .post-container.message { margin-left:5px !important; margin-right:5px !important; padding:8px !important; }\n  #messages .post-container.message .public-post-actions { gap:3px !important; }\n  #messages .post-container.message .public-post-actions .public-action-btn { font-size:11px !important; padding:0 4px !important; }\n  #messages .post-container.message .public-post-actions .public-repost-btn { min-width:72px !important; }\n}\n.kite-rich-link-card .kite-link-preview-media{height:190px!important;}
.kite-rich-link-card .kite-link-description{line-height:1.35!important;}


/* ===== Link previews: thumbnail-first, no generic link icon ===== */
.kite-rich-link-card .kite-link-preview-media{
  position:relative !important;
  background:#f1f3f5 !important;
}
.kite-rich-link-card .kite-link-play-overlay{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:52px !important;
  height:52px !important;
  border-radius:50% !important;
  background:rgba(0,0,0,.72) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:23px !important;
  line-height:1 !important;
  padding-left:3px !important;
  box-sizing:border-box !important;
  pointer-events:none !important;
  z-index:2 !important;
}
.kite-rich-link-card .kite-link-preview-media > span:not(.kite-link-play-overlay){
  display:none !important;
}
.kite-rich-link-card .kite-link-title{
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:-.1px;
}
.kite-rich-link-card .kite-link-description{
  font-size:12.5px !important;
  line-height:1.35 !important;
  opacity:.72 !important;
  margin-top:5px !important;
}

/* ===== Public post username/header ===== */
.public-post-username{
  display:block !important;
  max-width:calc(100vw - 120px) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  letter-spacing:.05px !important;
}
.public-message .username,
.public-post .username,
.public-chat-post .username,
.kite-public-post .username,
.public-message .user-name,
.public-post .user-name,
.public-chat-post .user-name,
.kite-public-post .user-name{
  max-width:calc(100vw - 120px) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:14px !important;
  font-weight:700 !important;
}
.public-message .message-header,
.public-post .message-header,
.public-chat-post .message-header,
.kite-public-post .message-header{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
}
.public-message .message-header img,
.public-post .message-header img,
.public-chat-post .message-header img,
.kite-public-post .message-header img{
  flex:0 0 auto !important;
}


/* ===== Final public post/link-card corrections ===== */
/* Do NOT paint the whole post white. Keep the app/theme background. */
.public-message,
.public-post,
.public-chat-post,
.kite-public-post,
.message-container.public-message{
  background:transparent !important;
}

/* Border only surrounds the post; no forced white fill. */
.kite-rich-link-card{
  background:rgba(128,128,128,.08) !important;
}

/* Generic pasted links get the same thumbnail card treatment. */
.kite-rich-link-card .kite-link-preview-media{
  background:rgba(128,128,128,.10) !important;
  position:relative !important;
  overflow:hidden !important;
}
.kite-rich-link-card .kite-link-preview-media .kite-link-domain-fallback{
  width:62px;height:62px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(128,128,128,.22);
  font-size:24px;font-weight:800;opacity:.65;
}

/* Never show a raw link icon inside a rich card. */
.kite-rich-link-card .kite-link-preview-media > img:not([src]){
  display:none !important;
}
.kite-rich-link-card .kite-link-url{
  display:none !important;
}

/* Preserve source preview images at full card width. */
.kite-rich-link-card .kite-link-preview-media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* Description for all source types, not only YouTube. */
.kite-rich-link-card .kite-link-description{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
}

/* ===== FINAL LINK THUMBNAIL + USERNAME POLISH ===== */
/* No chain/link icon or letter placeholder inside rich link cards. */
.kite-rich-link-card .kite-link-placeholder,
.kite-rich-link-card .kite-link-domain-fallback,
.kite-rich-link-card .kite-link-preview-media > span:not(.kite-link-play-overlay) {
  display:none !important;
}

/* Social/source thumbnails fill the media area cleanly. */
.kite-rich-link-card .kite-link-preview-media {
  min-height:170px !important;
  height:190px !important;
  background:rgba(128,128,128,.10) !important;
  position:relative !important;
}
.kite-rich-link-card .kite-link-preview-media > img {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Center play button on every link that resolves/is identified as video. */
.kite-rich-link-card .kite-link-play-overlay {
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:56px !important;
  height:56px !important;
  border-radius:50% !important;
  background:rgba(0,0,0,.72) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding-left:4px !important;
  box-sizing:border-box !important;
  font-size:25px !important;
  line-height:1 !important;
  z-index:5 !important;
  pointer-events:none !important;
}

/* Smart, clean public usernames: no blue browser/button pill. */
#messages .public-chat-user-name,
#publicMessages .public-chat-user-name,
.public-chat-user-name {
  appearance:none !important;
  -webkit-appearance:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  background-image:none !important;
  color:inherit !important;
  padding:0 !important;
  margin:0 !important;
  min-width:0 !important;
  max-width:calc(100% - 36px) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  letter-spacing:-.15px !important;
  text-align:left !important;
  cursor:pointer !important;
  text-decoration:none !important;
}
#messages .public-chat-user-name:hover,
#messages .public-chat-user-name:focus-visible {
  background:transparent !important;
  color:inherit !important;
  text-decoration:underline !important;
}
.public-chat-user-header {
  gap:8px !important;
  margin-bottom:7px !important;
  min-height:32px !important;
}
.public-chat-user-avatar {
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  border:2px solid rgba(98,70,255,.9) !important;
}

@media(max-width:480px){
  .kite-rich-link-card .kite-link-preview-media { height:185px !important; }
  #messages .public-chat-user-name,
  #publicMessages .public-chat-user-name,
  .public-chat-user-name { font-size:15px !important; font-weight:800 !important; }
}

/* Stable social-card polish: no startup/network blocking media work. */
.kite-rich-link-card .kite-link-preview-media{
  height:190px !important;
  min-height:160px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(0,0,0,.18) !important;
}
.kite-rich-link-card .kite-link-preview-media > img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
}
.kite-rich-link-card .kite-link-app{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  font-weight:800 !important;
  opacity:.92 !important;
}
.kite-rich-link-card .kite-link-app i{
  width:18px !important;
  min-width:18px !important;
  text-align:center !important;
  font-size:16px !important;
}
.kite-rich-link-card .kite-link-app .fa-youtube{color:#ff0000 !important;}
.kite-rich-link-card .kite-link-app .fa-facebook{color:#1877f2 !important;}
.kite-rich-link-card .kite-link-app .fa-instagram{color:#e4405f !important;}
.kite-rich-link-card .kite-link-app .fa-tiktok{color:#111 !important;}
.kite-rich-link-card .kite-link-app .fa-vimeo-v{color:#1ab7ea !important;}
.kite-rich-link-card .kite-link-play-overlay{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:58px !important;
  height:58px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(0,0,0,.72) !important;
  color:#fff !important;
  font-size:27px !important;
  line-height:1 !important;
  padding-left:3px !important;
  z-index:4 !important;
  pointer-events:none !important;
}
\n\n/* ===== FINAL SOCIAL LINK CARD FIX ===== */\n.kite-rich-link-card .kite-link-preview-media{\n  position:relative !important;\n  display:flex !important;\n  align-items:center !important;\n  justify-content:center !important;\n  text-align:center !important;\n  overflow:hidden !important;\n}\n.kite-rich-link-card .kite-link-preview-media > img{\n  width:auto !important;\n  height:auto !important;\n  max-width:100% !important;\n  max-height:100% !important;\n  object-fit:contain !important;\n  object-position:center center !important;\n  display:block !important;\n  margin:0 auto !important;\n  flex:0 0 auto !important;\n}\n.kite-rich-link-card .kite-link-app{\n  min-height:38px !important;\n  padding:8px 13px 7px !important;\n  display:flex !important;\n  align-items:center !important;\n  gap:8px !important;\n  box-sizing:border-box !important;\n  font-weight:800 !important;\n  font-size:14px !important;\n  line-height:1 !important;\n  border-top:1px solid rgba(128,128,128,.16) !important;\n  background:rgba(0,0,0,.06) !important;\n}\n.kite-rich-link-card .kite-link-app i{\n  display:inline-flex !important;\n  align-items:center !important;\n  justify-content:center !important;\n  width:20px !important;\n  min-width:20px !important;\n  height:20px !important;\n  font-size:17px !important;\n  line-height:20px !important;\n}\n.kite-rich-link-card .kite-link-app .fa-youtube{color:#ff0000 !important;}\n.kite-rich-link-card .kite-link-app .fa-facebook{color:#1877f2 !important;}\n.kite-rich-link-card .kite-link-app .fa-instagram{color:#e1306c !important;}\n.kite-rich-link-card .kite-link-app .fa-tiktok{color:#111 !important;}\n.kite-rich-link-card .kite-link-app .fa-vimeo-v{color:#1ab7ea !important;}\n.kite-rich-link-card .kite-link-app .fa-x-twitter{color:#111 !important;}\n.kite-rich-link-card .kite-link-app .fa-globe{opacity:.8 !important;}\n.dark .kite-rich-link-card .kite-link-app .fa-tiktok,\n.dark .kite-rich-link-card .kite-link-app .fa-x-twitter{color:#fff !important;}\n.kite-rich-link-card .kite-link-play-overlay{\n  position:absolute !important;\n  left:50% !important; top:50% !important;\n  transform:translate(-50%,-50%) !important;\n  z-index:5 !important;\n}\n

/* ===== FINAL SOURCE ICONS / FACEBOOK VIDEO ===== */
.kite-rich-link-card .kite-link-app { display:flex !important; align-items:center !important; gap:7px !important; }
.kite-rich-link-card .kite-source-svg { width:22px !important; height:22px !important; flex:0 0 22px !important; display:block !important; }
.kite-rich-link-card .kite-source-svg.youtube { color:#ff0000 !important; }
.kite-rich-link-card .kite-source-svg.facebook { color:#1877f2 !important; }
.kite-rich-link-card .kite-source-svg.instagram { color:#e1306c !important; }
.kite-rich-link-card .kite-source-svg.tiktok { color:#111 !important; }
.kite-rich-link-card .kite-source-svg.vimeo { color:#1ab7ea !important; }
.kite-rich-link-card .kite-source-svg.x { color:#111 !important; }
.kite-rich-link-card .kite-source-favicon { width:22px !important; height:22px !important; border-radius:5px !important; display:block !important; object-fit:contain !important; }
.kite-rich-link-card .kite-link-app-icon-only { min-height:22px !important; }
.kite-rich-link-card .kite-link-play-overlay { display:flex !important; position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; z-index:20 !important; }

/* Private/GIF messages: keep the original animated GIF as media, never as a link card. */
#private-chat-container .message-body img:not(.chat-sticker img) {
    max-width: min(320px, 100%) !important;
    height: auto !important;
    display: block;
    border-radius: 12px;
    object-fit: contain;
}
#private-chat-container .message-body.chat-big-emoji {
    font-size: 56px !important;
    line-height: 1.12 !important;
    text-align: center;
    word-break: normal !important;
}


/* ===== FINAL CHAT LINK CARDS: compact + same preview in Private/Group ===== */
#private-messages .kite-rich-link-card,
#group-messages .kite-rich-link-card{
  width:min(100%, 360px) !important;
  max-width:360px !important;
  margin:5px 0 !important;
  border-radius:13px !important;
}
#private-messages .kite-rich-link-card .kite-link-preview-media,
#group-messages .kite-rich-link-card .kite-link-preview-media{
  height:145px !important;
  min-height:120px !important;
}
#private-messages .kite-rich-link-card .kite-link-copy,
#group-messages .kite-rich-link-card .kite-link-copy{
  padding:8px 10px 9px !important;
}
#private-messages .kite-rich-link-card .kite-link-title,
#group-messages .kite-rich-link-card .kite-link-title{
  font-size:14px !important;
  line-height:1.25 !important;
}
#private-messages .kite-rich-link-card .kite-link-description,
#group-messages .kite-rich-link-card .kite-link-description{
  font-size:11.5px !important;
  line-height:1.3 !important;
}
#private-messages .kite-rich-link-card .kite-link-app,
#group-messages .kite-rich-link-card .kite-link-app{
  min-height:32px !important;
  padding:6px 10px !important;
  font-size:12px !important;
}
.kite-rich-link-card{cursor:pointer !important;touch-action:manipulation !important;}

/* Keep rich link thumbnails compact in Private and Group chats.
   Public posts retain their existing larger preview size. */
#private-messages .kite-rich-link-card,
#group-messages .kite-rich-link-card {
  width:min(100%, 380px) !important;
  max-width:380px !important;
}
#private-messages .kite-rich-link-card .kite-link-preview-media,
#group-messages .kite-rich-link-card .kite-link-preview-media {
  height:125px !important;
  min-height:0 !important;
}
#private-messages .kite-rich-link-card .kite-link-copy,
#group-messages .kite-rich-link-card .kite-link-copy {
  padding:8px 10px 9px !important;
}
#private-messages .kite-rich-link-card .kite-link-title,
#group-messages .kite-rich-link-card .kite-link-title {
  font-size:13px !important;
  line-height:1.25 !important;
}
@media(max-width:480px){
  #private-messages .kite-rich-link-card .kite-link-preview-media,
  #group-messages .kite-rich-link-card .kite-link-preview-media { height:120px !important; }
}


/* ===== Cross-context Forward picker ===== */
.kite-forward-modal{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.58);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px)}
.kite-forward-panel{width:min(430px,100%);max-height:min(78vh,680px);overflow:hidden;border-radius:18px;background:var(--kite-card-bg,#f5f7fa);color:var(--kite-text,#172033);box-shadow:0 18px 60px rgba(0,0,0,.45);border:1px solid rgba(36,55,85,0.12);display:flex;flex-direction:column}
.kite-forward-header{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid rgba(36,55,85,0.10);font-size:18px}
.kite-forward-close{border:0;background:transparent;color:inherit;font-size:27px;line-height:1;cursor:pointer;padding:2px 7px}
.kite-forward-source{font-size:12px;opacity:.65;padding:10px 16px 4px}
.kite-forward-search-wrap{padding:8px 16px 10px}
.kite-forward-search{width:100%;box-sizing:border-box;border:1px solid rgba(36,55,85,0.16);border-radius:12px;background:rgba(255,255,255,.07);color:inherit;padding:10px 12px;outline:none}
.kite-forward-list{overflow:auto;padding:0 10px 12px}
.kite-forward-target{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:0;border-radius:12px;background:transparent;color:inherit;padding:11px 9px;cursor:pointer}
.kite-forward-target:hover{background:rgba(255,255,255,.08)}
.kite-forward-target:disabled{opacity:.55;cursor:wait}
.kite-forward-target img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none}
.kite-forward-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(80,120,255,.18);font-size:21px;flex:none}
.kite-forward-target span:not(.kite-forward-icon){display:flex;flex-direction:column;min-width:0}
.kite-forward-target strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kite-forward-target small{font-size:11px;opacity:.62;margin-top:2px}
.kite-forward-loading,.kite-forward-empty{padding:28px 10px;text-align:center;opacity:.65}
@media(max-width:520px){.kite-forward-modal{padding:10px}.kite-forward-panel{max-height:86vh;border-radius:16px}}

/* Forward uses an arrow icon; Repost is icon-only. */
.public-repost-btn i, .public-forward-btn i { pointer-events:none; }
.public-repost-btn { min-width:38px !important; width:38px !important; padding:0 !important; }

/* Forward destination picker: nested Public / Private / Group navigation. */
.kite-forward-modal{z-index:2147483000!important}
#group-conversation-view .kite-forward-modal{position:absolute!important;inset:0!important;padding:12px!important;z-index:2147483000!important;background:rgba(0,0,0,.62)!important}
.kite-forward-category{width:100%;display:flex;align-items:center;gap:13px;text-align:left;border:0;border-radius:13px;background:transparent;color:inherit;padding:14px 11px;cursor:pointer}
.kite-forward-category:hover{background:rgba(255,255,255,.08)}
.kite-forward-category>i:first-child,.kite-forward-category>.kite-forward-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(80,120,255,.18);font-size:18px;flex:none}
.kite-forward-category>span{display:flex;flex-direction:column;flex:1;min-width:0}
.kite-forward-category small{opacity:.62;margin-top:2px}
.kite-forward-category>i:last-child{opacity:.55;font-size:13px}
.kite-forward-back{border:0;background:transparent;color:inherit;font-size:16px;margin-right:9px;padding:5px;cursor:pointer}
.kite-forward-source{display:flex!important;align-items:center!important;gap:4px!important}

/* Private chat: keep the conversation surface fully opaque/solid. */
#private-chat-container,
#private-messages {
  background: var(--kite-surface, #f5f7fa) !important;
  background-color: var(--kite-surface, #f5f7fa) !important;
  opacity: 1 !important;
}
html[data-theme] #private-chat-container,
html[data-theme] #private-messages {
  background: #f7faff !important;
  background-color: #f7faff !important;
  opacity: 1 !important;
}

/* Profile activity sections open as their own page inside My Profile. */
.profile-activity-page{
  position:fixed;
  inset:0;
  z-index:100040;
  display:flex;
  flex-direction:column;
  background:var(--app-bg, #f5f6fa);
  overflow:hidden;
}
.profile-activity-page.hidden{display:none!important}
.profile-activity-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:8px 12px;
  border-bottom:1px solid rgba(36,55,85,0.10);
  background:inherit;
}
.profile-activity-header button{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
.profile-activity-header h3{margin:0;font-size:16px}
.profile-activity-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:12px;
}


/* My Profile mobile polish: keep controls compact and make the entire form scroll. */
.profile-scroll-area{
  flex:1 1 auto!important;
  height:0!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain;
  padding-top:14px!important;
  padding-bottom:24px!important;
}
.profile-page-card{
  height:calc(100dvh - 65px)!important;
  min-height:0!important;
}
@media(max-width:600px){
  .profile-page-card{height:calc(100dvh - 58px)!important;min-height:0!important;}
   .profile-page-photo-wrap{flex:0 0 92px!important;width:92px!important;height:92px!important;min-width:92px!important;}
    .profile-content-tabs button{height:40px!important;min-height:40px!important;max-height:40px!important;}
}
#admin-panel-btn[hidden]{
  display:none!important;
}

#admin-panel-btn span {
  color:#000 !important;
}


/* ===== My Profile: fix internal scrolling + overlapping activity cards ===== */
.profile-page-card{
  box-sizing:border-box!important;
  min-height:0!important;
  overflow:hidden!important;
}
.profile-scroll-area{
  flex:1 1 0!important;
  height:0!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  overscroll-behavior-y:contain!important;
  padding-bottom:24px!important;
}
.profile-page-fields,
.profile-page-save{
  flex-shrink:0!important;
}
.profile-activity-page{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
}
.profile-activity-body{
  flex:1 1 0!important;
  height:0!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  overscroll-behavior-y:contain!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  padding:12px!important;
  box-sizing:border-box!important;
}
.profile-content-card{
  flex:0 0 auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.profile-content-target{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  padding:12px!important;
}
.profile-content-meta{
  min-height:0!important;
  height:auto!important;
  white-space:normal!important;
}
.profile-content-meta span{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
@media(max-width:600px){
  .profile-scroll-area{
    flex-basis:0!important;
  }
  .profile-activity-body{
    flex-basis:0!important;
  }
}

/* ===== FINAL PROFILE BUTTON GRID + PRIVATE USER NAME VISIBILITY ===== */
.profile-content-tabs{grid-template-columns:repeat(4,minmax(0,1fr)) !important;grid-template-rows:repeat(2,34px) !important;gap:6px !important;}
.profile-content-tabs button{height:34px !important;min-height:34px !important;max-height:34px !important;padding:0 5px !important;font-size:11px !important;border-radius:8px !important;}
#private-chat-user .user-info .user-name{color:var(--kite-text,#172033) !important;font-size:16px !important;font-weight:800 !important;opacity:1 !important;text-shadow:0 1px 2px rgba(0,0,0,.35);}
#private-chat-user .user-profile-details{color:var(--kite-text-secondary,#b8c1d9) !important;opacity:1 !important;}
#private-chat-user{color:var(--kite-text,#172033) !important;}
@media(max-width:600px){.profile-content-tabs{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:5px !important;}.profile-content-tabs button{height:32px !important;min-height:32px !important;max-height:32px !important;font-size:9px !important;padding:0 3px !important;}}

/* File messages: icon + filename only; opens in a new browser/system handler. */
.kite-file-message {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(100%, 280px);
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    word-break: break-word;
}
.kite-file-message:hover { opacity: .82; }
.kite-file-message i { flex: 0 0 auto; font-size: 20px; }
.kite-file-message span { min-width: 0; overflow-wrap: anywhere; }


/* Download arrow for files and all chat media. */
.kite-file-message-wrap,
.kite-media-download-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}
.kite-media-download-wrap {
    flex-wrap: wrap;
}
.kite-media-download-wrap > img,
.kite-media-download-wrap > .kite-video-player,
.kite-media-download-wrap > audio {
    max-width: 100%;
}
.kite-download-button {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.08);
    color: inherit;
    cursor: pointer;
}
.kite-download-button:hover { opacity: .78; }
.kite-download-button:disabled { opacity: .45; cursor: wait; }
.kite-file-message-wrap .kite-file-message { flex: 1 1 auto; min-width: 0; }


/* Message download action: keep download in the post action row, not beside media. */
.kite-download-button.message-download-btn,
.group-message-actions .kite-download-button,
.public-post-actions .kite-download-button {
  width:32px !important; height:32px !important; min-width:32px !important; min-height:32px !important;
  padding:0 !important; border-radius:8px !important; font-size:18px !important; line-height:1 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  flex:0 0 32px !important;
}
.public-post-actions .public-download-btn { border:1px solid rgba(128,128,128,.38) !important; background:transparent !important; color:inherit !important; }
.public-post-actions:has(.public-download-btn) .public-like-btn,
.public-post-actions:has(.public-download-btn) .public-dislike-btn {
  flex:0 1 56px !important;
  padding-left:4px !important; padding-right:4px !important;
}
.group-message-actions .group-download-btn {
  background:rgba(0,0,0,.08) !important; color:inherit !important; border:0 !important; cursor:pointer !important;
}
@media(max-width:390px){
  .public-post-actions:has(.public-download-btn) .public-like-btn,
  .public-post-actions:has(.public-download-btn) .public-dislike-btn { flex-basis:50px !important; }
}


/* Keep sent GIF/media visually centered in every chat/post body. */
.kite-media-download-wrap {
  width: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}
.kite-media-download-wrap > img,
.kite-media-download-wrap > video,
.kite-media-download-wrap > .kite-video-player,
.kite-media-download-wrap > audio {
  margin-left: auto !important;
  margin-right: auto !important;
}
.public-post-gif,
.gif-post img,
.kite-media-download-wrap img[alt="GIF"] {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.kite-file-message-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}


/* In-Kiters download progress bar. Never opens an external app/window. */
.kite-download-progress{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:2147483000;
  width:min(92vw,420px);
  padding:10px 12px;
  border-radius:12px;
  background:var(--kite-surface,#f6f6f9);
  color:var(--kite-text,#172033);
  box-shadow:0 8px 30px rgba(0,0,0,.28);
  border:1px solid rgba(128,128,128,.28);
  box-sizing:border-box;
}
.kite-download-progress.hidden{display:none!important}
.kite-download-progress-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:7px}
.kite-download-progress-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kite-download-progress-value{flex:0 0 auto;font-weight:700}
.kite-download-progress-track{height:5px;border-radius:99px;overflow:hidden;background:rgba(128,128,128,.22)}
.kite-download-progress-fill{height:100%;width:0;border-radius:99px;background:currentColor;transition:width .18s ease}
.kite-download-progress-fill.indeterminate{width:35%;animation:kiteDownloadIndeterminate 1.05s ease-in-out infinite}
@keyframes kiteDownloadIndeterminate{0%{transform:translateX(-130%)}100%{transform:translateX(380%)}}


/* Chat typing indicator */
.kite-typing-indicator {
    min-height: 0;
    height: 0;
    padding: 0 12px;
    overflow: hidden;
    opacity: 0;
    transition: opacity .15s ease, height .15s ease, padding .15s ease;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
}
.kite-typing-indicator.is-visible {
    height: 24px;
    padding-top: 3px;
    padding-bottom: 3px;
    opacity: 1;
}


/* ===== Public Chat: friends online strip ===== */
.public-friends-online {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 10px;
    margin: 0 0 6px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(98,70,255,.16);
    border-radius: 12px;
    background: rgba(98,70,255,.06);
    scrollbar-width: none;
}
.public-friends-online::-webkit-scrollbar { display: none; }
.public-friends-online.is-visible { display: flex; }
.public-friends-online-label {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    color: #6246ff;
    white-space: nowrap;
}
.public-friend-online-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    padding: 4px 9px 4px 5px;
    background: rgba(255,255,255,.78);
    color: inherit;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.public-friend-online-chip img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #22c55e; }
.public-friend-online-chip span { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.public-friend-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; margin-left: -10px; margin-right: 1px; border: 1px solid #fff; }

/* Notifications: delete-all control */
.notif-delete-all-btn {
    border: 0;
    background: rgba(255,255,255,.12);
    color: #fff;
    border-radius: 7px;
    min-width: 32px;
    height: 30px;
    padding: 0 7px;
    cursor: pointer;
    font-size: 15px;
}
.notif-delete-all-btn:hover { background: rgba(255,255,255,.24); }

/* ===== FINAL TOP PROFILE / STATUS / USER CAROUSEL NORMALIZATION ===== */
#profile-container.kite-profile-status-row > .top-card,
#profile-container .top-card {
  height: 148px !important;
  min-height: 148px !important;
  max-height: 148px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
#profile-container .profile-avatar-wrap,
#profile-container #profile-pic,
#profile-container .status-top-avatar,
#profile-container .status-top-type,
#profile-container .new-user-top-avatar,
#profile-container #my-status-thumb,
#profile-container #my-status-preview,
#profile-container #new-user-pic {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
  flex: 0 0 62px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  object-fit: cover !important;
}
#profile-container #profile-pic { width:100% !important; height:100% !important; }
#profile-container .status-top-carousel,
#profile-container .new-user-top-carousel {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  scroll-snap-type: x mandatory !important;
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch !important;
}
#profile-container .status-top-item,
#profile-container .new-user-top-item {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  scroll-snap-align: start !important;
}
#profile-container .status-top-item .status-top-avatar,
#profile-container .status-top-item .status-top-type,
#profile-container .new-user-top-item .new-user-top-avatar {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
  flex: 0 0 62px !important;
  border-radius: 50% !important;
}
#profile-container .new-user-top-meta { display: none !important; }
#profile-container .status-top-add { display:grid !important; place-items:center !important; }
@media (max-width:430px) {
  #profile-container.kite-profile-status-row > .top-card,
  #profile-container .top-card {
    height: 148px !important;
    min-height: 148px !important;
    max-height: 148px !important;
  }
  #profile-container .profile-avatar-wrap,
  #profile-container #profile-pic,
  #profile-container .status-top-avatar,
  #profile-container .status-top-type,
  #profile-container .new-user-top-avatar,
  #profile-container #my-status-thumb,
  #profile-container #my-status-preview,
  #profile-container #new-user-pic {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
    flex-basis: 62px !important;
  }
}

/* ===== FINAL TOP PROFILE / STATUS / USER CAROUSEL NORMALIZATION ===== */
#profile-container.kite-profile-status-row > .top-card,
#profile-container .top-card {
  height: 148px !important;
  min-height: 148px !important;
  max-height: 148px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
#profile-container .profile-avatar-wrap,
#profile-container #profile-pic,
#profile-container .status-top-avatar,
#profile-container .status-top-type,
#profile-container .new-user-top-avatar,
#profile-container #my-status-thumb,
#profile-container #my-status-preview,
#profile-container #new-user-pic {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
  flex: 0 0 62px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  object-fit: cover !important;
}
#profile-container #profile-pic { width:100% !important; height:100% !important; }
#profile-container .status-top-carousel,
#profile-container .new-user-top-carousel {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  scroll-snap-type: x mandatory !important;
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch !important;
}
#profile-container .status-top-item,
#profile-container .new-user-top-item {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  scroll-snap-align: start !important;
}
#profile-container .status-top-item .status-top-avatar,
#profile-container .status-top-item .status-top-type,
#profile-container .new-user-top-item .new-user-top-avatar {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
  flex: 0 0 62px !important;
  border-radius: 50% !important;
}
#profile-container .new-user-top-meta { display: none !important; }
#profile-container .status-top-add { display:grid !important; place-items:center !important; }
@media (max-width:430px) {
  #profile-container.kite-profile-status-row > .top-card,
  #profile-container .top-card { height:148px !important; min-height:148px !important; max-height:148px !important; }
  #profile-container .profile-avatar-wrap,
  #profile-container #profile-pic,
  #profile-container .status-top-avatar,
  #profile-container .status-top-type,
  #profile-container .new-user-top-avatar,
  #profile-container #my-status-thumb,
  #profile-container #my-status-preview,
  #profile-container #new-user-pic {
    width:62px !important; height:62px !important; min-width:62px !important; min-height:62px !important;
    max-width:62px !important; max-height:62px !important; flex-basis:62px !important;
  }
}


/* ===== MY PROFILE: CENTERED PHOTO + ACTION BUTTONS BELOW ===== */
.profile-page .profile-page-header {
  position: relative !important;
  justify-content: center !important;
}
.profile-page .profile-page-header h2 {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.profile-page .profile-page-back {
  margin-right: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

.profile-page .profile-fixed-bar {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  width: 100% !important;
}

.profile-page .profile-page-photo-wrap {
  flex: 0 0 112px !important;
  width: 112px !important;
  height: 112px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.profile-page .profile-page-photo-wrap img {
  width: 112px !important;
  height: 112px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

.profile-page .profile-fixed-actions {
  width: min(100%, 760px) !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin: 0 auto !important;
}

.profile-page .profile-content-tabs {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
}

.profile-page .profile-content-tabs button {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  margin: 0 !important;
}

@media (max-width: 600px) {
  .profile-page .profile-page-card {
    padding: 12px !important;
  }

  .profile-page .profile-page-photo-wrap,
  .profile-page .profile-page-photo-wrap img {
    width: 104px !important;
    height: 104px !important;
    flex-basis: 104px !important;
  }

  .profile-page .profile-content-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .profile-page .profile-content-tabs button {
    height: 40px !important;
    font-size: 12px !important;
  }
}

/* Plain hamburger icon on the same line, immediately before the Kiters brand. */
.kite-main-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important}
#chat-header.kite-main-header{display:flex!important;flex-wrap:wrap!important;align-items:center!important;}
.kite-main-header .kite-more-top-left{
  order:-2!important; flex:0 0 24px!important; width:24px!important; min-width:24px!important;
  max-width:24px!important; height:36px!important; padding:0!important; margin:0 5px 0 0!important;
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important;
  color:var(--kite-text,#172033)!important; cursor:pointer!important;
}
.kite-main-header .kite-more-top-left i{font-size:21px!important;line-height:1!important}
.kite-main-header .kite-more-top-left span{display:none!important}
.kite-main-header .kite-brand{order:-1!important;min-height:36px!important;padding:0 4px!important;flex:0 0 auto!important;}
.kite-main-header #profile-container{flex:0 0 100%!important;width:100%!important;}
.kite-main-header .kite-more-menu{top:42px!important;left:4px!important;right:auto!important}

/* Header polish: flat hamburger and notification bell, restore the original blue Kiters title. */
#chat-header .kite-more-top-left,
#chat-header #notif-btn,
#chat-header .kite-top-notification {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
}
#chat-header .kite-more-top-left::before,
#chat-header .kite-more-top-left::after,
#chat-header #notif-btn::before,
#chat-header #notif-btn::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
#chat-header .kite-brand {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #079cf0 !important;
}

/* CONTACTS PAGE MOBILE OVERLAP FIX — scoped to the dedicated Contacts view */
#contacts.contacts-page {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20000 !important;
  display: none;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: max(8px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#contacts.contacts-page.is-open { display: flex !important; }
#contacts.contacts-page > .contacts-page-header {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  display: flex !important;
  flex: 0 0 58px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  height: 58px !important;
  margin: 0 0 10px !important;
  padding: 0 4px !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}
#contacts.contacts-page .contacts-back-btn {
  position: static !important;
  flex: 0 0 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}
#contacts.contacts-page .contacts-page-header h2 {
  position: static !important;
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: nowrap !important;
}
#contacts.contacts-page .contacts-search-wrap {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 48px !important;
  width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
  margin: 0 0 12px !important;
  box-sizing: border-box !important;
}
#contacts.contacts-page #contacts-search {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
#contacts.contacts-page .contacts-tabs {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
#contacts.contacts-page .contacts-tab {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 6px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  transform: none !important;
  box-sizing: border-box !important;
}
#contacts.contacts-page #contact-list.contacts-page-list {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  flex: 1 1 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 0 16px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  box-sizing: border-box !important;
}
#contacts.contacts-page #contact-list.contacts-page-list li {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 8px !important;
  box-sizing: border-box !important;
}

/* Contacts page must fully cover the home screen; keep other page controls from showing through. */
#contacts.contacts-page {
  background: var(--app-background, #f5f6f9) !important;
  background-color: #f5f6f9 !important;
  isolation: isolate !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#contacts.contacts-page::before,
#contacts.contacts-page::after {
  pointer-events: none !important;
}

/* Chat History now lives between Contacts and Groups in the main navigation. */
.kite-main-nav .kite-chat-history-nav{display:flex;align-items:center;justify-content:center;gap:6px;}


/* Layout update: keep main navigation controls on one compact line. */
.kite-main-nav {
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:4px !important;
  width:100%;
  min-width:0;
}
.kite-main-nav > .kite-nav-btn,
.kite-main-nav > .kite-live-action-menu {
  flex:1 1 0 !important;
  min-width:0 !important;
}
.kite-main-nav .kite-nav-btn {
  padding:6px 3px !important;
  min-width:0 !important;
  white-space:nowrap !important;
  font-size:clamp(10px, 2.7vw, 13px) !important;
  gap:3px !important;
}
.kite-main-nav .kite-nav-btn i { font-size:12px !important; }
.kite-main-nav .kite-nav-btn span { overflow:hidden; text-overflow:ellipsis; }
.kite-main-nav .kite-more-menu { flex:initial !important; }

/* My Profile activity buttons: exactly two rows on small screens. */
#profile-content-tabs.profile-content-tabs {
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows:repeat(2, minmax(34px, auto)) !important;
  gap:6px !important;
  width:100% !important;
  min-width:0 !important;
}
#profile-content-tabs.profile-content-tabs > button {
  min-width:0 !important;
  width:100% !important;
  min-height:34px !important;
  padding:5px 3px !important;
  font-size:clamp(10px, 2.8vw, 12px) !important;
  line-height:1.15 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
.profile-fixed-actions { min-width:0 !important; width:100% !important; }
@media (max-width:360px) {
  .kite-main-nav { gap:2px !important; }
  .kite-main-nav .kite-nav-btn { padding-left:1px !important; padding-right:1px !important; }
  #profile-content-tabs.profile-content-tabs { gap:4px !important; }
}

/* Forward destination picker: remove oversized gradient tiles and broken icon squares. */
.kite-forward-modal .kite-forward-category{
  display:flex!important; width:100%!important; min-height:58px!important; box-sizing:border-box!important;
  align-items:center!important; gap:12px!important; padding:14px 16px!important; margin:0!important;
  border:0!important; border-bottom:1px solid rgba(255,255,255,.10)!important; border-radius:0!important;
  background:transparent!important; box-shadow:none!important; color:var(--kite-text,#fff)!important;
  text-align:left!important; transform:none!important;
}
.kite-forward-modal .kite-forward-category:hover{background:rgba(255,255,255,.06)!important}
.kite-forward-modal .kite-forward-category>i:first-child,
.kite-forward-modal .kite-forward-category>i:last-child,
.kite-forward-modal .kite-forward-category>.kite-forward-icon{display:none!important}
.kite-forward-modal .kite-forward-category>span{display:flex!important;flex:1!important;min-width:0!important;flex-direction:column!important;gap:3px!important}
.kite-forward-modal .kite-forward-category strong{font-size:15px!important}
.kite-forward-modal .kite-forward-category small{font-size:12px!important;opacity:.68!important}
.kite-forward-modal .kite-forward-list{padding:4px 14px 12px!important}
.kite-forward-modal .kite-forward-category:last-child{border-bottom:0!important}

/* Forward picker final cleanup: Public / Private / Group menu and submenu rows */
.kite-forward-modal .kite-forward-category,
.kite-forward-modal .kite-forward-target {
  width:100%!important;
  box-sizing:border-box!important;
  border:0!important;
  border-radius:16px!important;
  margin:5px 0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  outline:none!important;
  transform:none!important;
  color:var(--kite-text,#fff)!important;
  overflow:hidden!important;
}
.kite-forward-modal .kite-forward-category:hover,
.kite-forward-modal .kite-forward-target:hover,
.kite-forward-modal .kite-forward-category:focus-visible,
.kite-forward-modal .kite-forward-target:focus-visible {
  background:rgba(120,135,255,.13)!important;
  background-image:none!important;
  box-shadow:none!important;
}
.kite-forward-modal .kite-forward-list {
  padding:4px 12px 12px!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
.kite-forward-modal .kite-forward-target {
  min-height:58px!important;
  padding:10px 12px!important;
}
.kite-forward-modal .kite-forward-category {
  min-height:58px!important;
  padding:12px 14px!important;
}


/* Final video-player simplification: center play only; no other player buttons. */
.kite-video-controls{display:none!important;visibility:hidden!important;pointer-events:none!important;}
.kite-video-center-play{width:58px!important;height:58px!important;border:0!important;border-radius:50%!important;background:rgba(25,25,35,.72)!important;color:#fff!important;font-size:24px!important;line-height:1!important;display:flex!important;align-items:center!important;justify-content:center!important;opacity:0!important;pointer-events:none!important;}
.kite-video-player:not(.is-playing) .kite-video-center-play{opacity:1!important;pointer-events:auto!important;}
.kite-video-player.is-playing .kite-video-center-play{opacity:0!important;pointer-events:none!important;}
.kite-video-player.controls-visible .kite-video-center-play{opacity:0!important;pointer-events:none!important;}
.public-tag-btn{font-size:0!important;min-width:34px!important;}
.public-tag-btn::before{content:'🏷️';font-size:16px!important;line-height:1!important;}
.public-tag-btn{color:inherit!important;}

/* Latest forward picker cleanup: no card/box backgrounds in category or destination submenus. */
.kite-forward-modal .kite-forward-panel .kite-forward-list,
.kite-forward-modal .kite-forward-panel .kite-forward-category,
.kite-forward-modal .kite-forward-panel .kite-forward-target,
.kite-forward-modal .kite-forward-panel .kite-forward-empty {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.kite-forward-modal .kite-forward-panel .kite-forward-category,
.kite-forward-modal .kite-forward-panel .kite-forward-target {
  border: 0 !important;
  border-radius: 16px !important;
  margin: 4px 0 !important;
  overflow: hidden !important;
}
.kite-forward-modal .kite-forward-panel .kite-forward-category:hover,
.kite-forward-modal .kite-forward-panel .kite-forward-target:hover,
.kite-forward-modal .kite-forward-panel .kite-forward-category:focus-visible,
.kite-forward-modal .kite-forward-panel .kite-forward-target:focus-visible {
  background: rgba(125, 140, 255, .10) !important;
  background-image: none !important;
  box-shadow: none !important;
}


/* Kiters in-app picture-in-picture: the JaaS call stays connected while browsing. */
#call-container.pip-mode {
    inset: auto 12px 96px auto !important;
    top: auto !important;
    left: auto !important;
    right: 12px !important;
    bottom: 96px !important;
    width: min(42vw, 220px) !important;
    height: min(34vh, 300px) !important;
    min-width: 150px !important;
    min-height: 190px !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 36px rgba(0,0,0,.55) !important;
    overflow: hidden !important;
    z-index: 2147483647 !important;
}
#call-container.pip-mode #call-status {
    top: 5px !important;
    font-size: 11px !important;
    padding: 3px 6px !important;
}
#call-container.pip-mode .call-controls {
    bottom: 6px !important;
    gap: 5px !important;
    padding: 3px !important;
    background: rgba(0,0,0,.72) !important;
}
#call-container.pip-mode .call-ctrl-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 13px !important;
}
#call-container.pip-mode .call-signal,
#call-container.pip-mode #call-audio-ui,
#call-container.pip-mode #group-call-participants-ui {
    display: none !important;
}

/* Compact call controls so every button stays inside short mobile screens. */
#call-container:not(.pip-mode) .call-controls {
    left: 50% !important;
    right: auto !important;
    width: max-content !important;
    max-width: calc(100vw - 16px) !important;
    gap: clamp(5px, 1.8vw, 10px) !important;
    padding: 6px !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px) + 8px) !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
}
#call-container:not(.pip-mode) .call-ctrl-btn {
    width: clamp(36px, 10.5vw, 44px) !important;
    height: clamp(36px, 10.5vw, 44px) !important;
    min-width: clamp(36px, 10.5vw, 44px) !important;
    flex: 0 1 auto !important;
    font-size: 16px !important;
}
#incoming-call-overlay {
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
}
#incoming-call-overlay .incoming-call-box {
    width: min(90vw, 320px) !important;
    max-height: calc(100dvh - 28px) !important;
    overflow-y: auto !important;
    padding: 22px 18px 20px !important;
}
#incoming-call-overlay .incoming-call-actions { gap: 24px !important; }
#incoming-call-overlay .incoming-btn {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    font-size: 19px !important;
}

/* ===== COMPACT PROFILE / MY STATUS / NEW USERS CARDS ===== */
#profile-container.kite-profile-status-row > .top-card,
#profile-container .top-card {
  height: 108px !important;
  min-height: 108px !important;
  max-height: 108px !important;
  padding: 5px 4px !important;
  gap: 3px !important;
  overflow: hidden !important;
}

#profile-container .profile-avatar-wrap,
#profile-container #profile-pic,
#profile-container .status-top-avatar,
#profile-container .status-top-type,
#profile-container .new-user-top-avatar,
#profile-container #my-status-thumb,
#profile-container #my-status-preview,
#profile-container #new-user-pic,
#profile-container .status-top-item .status-top-avatar,
#profile-container .status-top-item .status-top-type,
#profile-container .new-user-top-item .new-user-top-avatar {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  flex: 0 0 48px !important;
}

#profile-container .status-top-carousel,
#profile-container .new-user-top-carousel,
#profile-container .status-top-item,
#profile-container .new-user-top-item {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

#profile-container .profile-display-name,
#profile-container .profile-display-status,
#profile-container .status-card-title,
#profile-container .status-card-meta,
#profile-container .new-user-label,
#profile-container .new-user-name,
#profile-container .new-user-country {
  height: 13px !important;
  min-height: 13px !important;
  max-height: 13px !important;
  line-height: 13px !important;
}

#profile-container .status-card,
#profile-container .new-user-card-content {
  padding: 4px !important;
  gap: 2px !important;
}

@media (max-width:430px) {
  #profile-container.kite-profile-status-row > .top-card,
  #profile-container .top-card {
    height: 102px !important;
    min-height: 102px !important;
    max-height: 102px !important;
    padding: 4px 3px !important;
  }
  #profile-container .profile-avatar-wrap,
  #profile-container #profile-pic,
  #profile-container .status-top-avatar,
  #profile-container .status-top-type,
  #profile-container .new-user-top-avatar,
  #profile-container #my-status-thumb,
  #profile-container #my-status-preview,
  #profile-container #new-user-pic,
  #profile-container .status-top-item .status-top-avatar,
  #profile-container .status-top-item .status-top-type,
  #profile-container .new-user-top-item .new-user-top-avatar {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    flex-basis: 46px !important;
  }
}


/* ===== PUBLIC FEED: one full-screen card per post (back card = background, front card = post) ===== */
#messages#messages {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
}
#messages#messages > .post-container.message {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--kite-public-card-h, 70vh) !important;
  min-height: var(--kite-public-card-h, 70vh) !important;
  max-height: var(--kite-public-card-h, 70vh) !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  overflow: hidden !important;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  white-space: normal !important;
  background: inherit !important;                           /* back card: shows the chosen public background */
  box-shadow: inset 0 0 0 100vmax rgba(5,8,20,.28) !important; /* soft dim so the front card stays readable */
}
html[data-theme] #messages#messages > .post-container.message {
  box-shadow: inset 0 0 0 100vmax rgba(255,255,255,.22) !important;
}
#messages > .kite-typing-indicator { scroll-snap-align: none; }

#messages .public-post-front {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  overflow: hidden;
  white-space: normal;
  color: var(--kite-text, #172033);
  background: color-mix(in srgb, var(--kite-surface, #f5f6fa) 90%, transparent);
  border: 1px solid rgba(36,55,85,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html[data-theme] #messages .public-post-front { color: #24314a; background: rgba(255,255,255,.88); border-color: rgba(36,49,74,.14); }
#messages#messages .public-post-front .message-body {
  flex: 0 1 auto;
  min-height: 0;
  margin: 0 !important;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#messages#messages .public-post-front .kite-media-download-wrap { justify-content: center; max-height: 100%; }
#messages#messages .public-post-front .public-post-media,
#messages#messages .public-post-front .message-body img,
#messages#messages .public-post-front .message-body video {
  display: block;
  width: auto;
  max-width: 100% !important;
  height: auto;
  max-height: calc(var(--kite-public-card-h, 70vh) - 210px) !important;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 12px;
}
#messages#messages .public-post-front .kite-video-player { width: 100%; max-height: calc(var(--kite-public-card-h, 70vh) - 210px); }
#messages#messages .public-post-front .public-post-actions { flex-wrap: wrap !important; overflow: visible !important; margin-top: 4px !important; }
.public-download-btn { display: none !important; }

/* ===== Public post comments sheet ===== */
.kite-pc-modal { position: fixed; inset: 0; z-index: 100030; display: flex; align-items: flex-end; justify-content: center; }
.kite-pc-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.kite-pc-sheet {
  position: relative; width: 100%; max-width: 560px; height: min(78vh, 640px);
  display: flex; flex-direction: column; box-sizing: border-box;
  border-radius: 20px 20px 0 0; background: #f5f6fa; color: #172033;
  border: 1px solid rgba(36,55,85,0.12); border-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.kite-pc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(36,55,85,0.10); }
.kite-pc-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 20px; cursor: pointer; }
.kite-pc-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px; -webkit-overflow-scrolling: touch; }
.kite-pc-empty { text-align: center; opacity: .65; padding: 28px 0; font-size: 14px; }
.kite-pc-row { padding: 9px 0; border-bottom: 1px solid rgba(36,55,85,0.06); }
.kite-pc-row-head { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.kite-pc-row-head span { font-size: 11px; opacity: .55; }
.kite-pc-text { margin-top: 3px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.kite-pc-delete { margin-top: 4px; border: 0; background: none; color: #ff7a7a; font-size: 12px; padding: 0; cursor: pointer; }
.kite-pc-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(36,55,85,0.10); }
.kite-pc-input { flex: 1; min-width: 0; height: 42px; border: 1px solid rgba(36,55,85,0.14); border-radius: 21px; background: rgba(255,255,255,.07); color: #fff; padding: 0 14px; font-size: 15px; outline: none; }
.kite-pc-send { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #6246ff; color: #fff; cursor: pointer; }
.kite-pc-send:disabled { opacity: .5; }


/* ===== LINK CARDS: only app name (no title/description/domain); smaller in Private/Group ===== */
.kite-rich-link-card .kite-link-copy,
.kite-rich-link-card .kite-link-title,
.kite-rich-link-card .kite-link-description,
.kite-rich-link-card .kite-link-domain{display:none !important;}
.kite-rich-link-card .kite-link-app{min-height:34px !important;padding:7px 12px !important;font-size:14px !important;}
#private-messages .kite-rich-link-card,
#group-messages .kite-rich-link-card{
  width:min(100%, 240px) !important;
  max-width:240px !important;
  margin:4px 0 !important;
  border-radius:12px !important;
}
#private-messages .kite-rich-link-card .kite-link-preview-media,
#group-messages .kite-rich-link-card .kite-link-preview-media{
  height:100px !important;
  min-height:0 !important;
}
#private-messages .kite-rich-link-card .kite-link-app,
#group-messages .kite-rich-link-card .kite-link-app{
  min-height:28px !important;
  padding:5px 9px !important;
  font-size:12px !important;
  gap:6px !important;
}
#private-messages .kite-rich-link-card .kite-source-svg,
#group-messages .kite-rich-link-card .kite-source-svg,
#private-messages .kite-rich-link-card .kite-source-favicon,
#group-messages .kite-rich-link-card .kite-source-favicon{
  width:18px !important;height:18px !important;flex:0 0 18px !important;
}
@media(max-width:480px){
  #private-messages .kite-rich-link-card .kite-link-preview-media,
  #group-messages .kite-rich-link-card .kite-link-preview-media{height:95px !important;}
}

/* ===== PUBLIC PAGE: card keeps its full height; image fills the whole box (no side gaps) ===== */
#messages .kite-rich-link-card .kite-link-preview-media{
  height:190px !important;
  min-height:190px !important;
  display:block !important;
  background:transparent !important;
}
#messages .kite-rich-link-card .kite-link-preview-media > img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  margin:0 !important;
  display:block !important;
}

/* ===== PUBLIC PAGE composer: no textbox / send / pin; AI, GIF, Camera, Media bar at bottom ===== */
#chat-container > .input-group #message-input,
#chat-container > .input-group #send-button,
#chat-container > .input-group #chat-tools-toggle{display:none !important;}
#chat-container > .input-group{
  justify-content:center !important;
  padding:6px 8px !important;
}
#chat-container > .input-group #chat-tools,
#chat-container > .input-group #chat-tools.hidden{
  position:static !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:space-around !important;
  gap:8px !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
#chat-container > .input-group #chat-tools .chat-tool-button{
  flex:1 1 0 !important;
  width:auto !important;
  max-width:80px !important;
  height:42px !important;
  min-width:0 !important;
  border-radius:21px !important;
  font-size:15px !important;
}

/* ===== PUBLIC PAGE: every post card fills the background (same gap on all 4 sides) ===== */
#messages#messages > .post-container.message > .public-post-front{
  height:100% !important;
  max-height:100% !important;
}
#messages#messages .public-post-front .message-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
}
#messages#messages .public-post-front .message-body > .kite-rich-link-card{
  flex:1 1 auto !important;
  align-self:stretch !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  min-height:0 !important;
}
#messages#messages .public-post-front .kite-rich-link-card .kite-link-preview-media{
  flex:1 1 auto !important;
  height:auto !important;
  min-height:190px !important;
  position:relative !important;
}
#messages#messages .public-post-front .kite-rich-link-card .kite-link-preview-media > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  object-fit:cover !important;
  margin:0 !important;
}
#messages#messages .public-post-front .kite-rich-link-card .kite-link-app{flex:0 0 auto !important;}


/* ===== PUBLIC: Post button, Post window, caption above media ===== */
#chat-container > .input-group #chat-tools #post-open-button{
  background:linear-gradient(135deg,#7c5cff,#3d8cff) !important;
  color:#fff !important;
  font-size:14px !important;
}
.public-post-caption{
  align-self:stretch;
  width:100%;
  text-align:left;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:15px;
  line-height:1.4;
  margin:0 0 8px;
  max-height:7.5em;
  overflow-y:auto;
}
#messages#messages .public-post-front .message-body:has(> .public-post-caption) .public-post-media,
#messages#messages .public-post-front .message-body:has(> .public-post-caption) img,
#messages#messages .public-post-front .message-body:has(> .public-post-caption) video{
  max-height:calc(var(--kite-public-card-h, 70vh) - 330px) !important;
}
.kite-post-modal{position:fixed;inset:0;z-index:100040;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:14px;box-sizing:border-box;}
.kite-post-panel{width:100%;max-width:480px;max-height:92vh;overflow-y:auto;box-sizing:border-box;border-radius:18px;padding:14px;background:#f5f6fa;color:#172033;border:1px solid rgba(36,55,85,0.12);box-shadow:0 18px 50px rgba(0,0,0,.45);}
html[data-theme] .kite-post-panel{background:#fff;color:#24314a;border-color:rgba(36,49,74,.14);}
.kite-post-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:16px;}
.kite-post-close{width:34px;height:34px;border:0;border-radius:50%;background:rgba(128,128,128,.22);color:inherit;font-size:20px;cursor:pointer;}
.kite-post-text{display:block;width:100%;box-sizing:border-box;min-height:110px;resize:vertical;padding:10px 12px;border-radius:12px;border:1px solid rgba(128,128,128,.35);background:rgba(128,128,128,.12);color:inherit;font:inherit;font-size:15px;line-height:1.4;outline:none;}
.kite-post-count{margin:6px 2px 0;font-size:12px;opacity:.7;text-align:right;}
.kite-post-count.over{color:#ff5a5f;opacity:1;font-weight:700;}
.kite-post-preview{position:relative;margin-top:10px;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.25);text-align:center;}
.kite-post-preview[hidden]{display:none;}
.kite-post-preview img,.kite-post-preview video{display:block;width:100%;max-height:260px;object-fit:contain;}
.kite-post-remove{position:absolute;top:6px;right:6px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:18px;cursor:pointer;}
.kite-post-actions{display:flex;align-items:center;gap:8px;margin-top:12px;}
.kite-post-actions button{height:40px;padding:0 14px;border:0;border-radius:20px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;color:inherit;background:rgba(128,128,128,.22);}
.kite-post-actions .kite-post-media-btn{margin-right:auto;}
.kite-post-actions .kite-post-submit{background:linear-gradient(135deg,#7c5cff,#3d8cff);color:#fff;}
.kite-post-actions button:disabled{opacity:.55;cursor:default;}


/* ===== INSTAGRAM-STYLE PLAY BUTTON (every chat video + video link) + missing-thumbnail placeholder ===== */
.kite-video-center-play,
.kite-rich-link-card .kite-link-play-overlay{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  padding:0 !important;
  border-radius:50% !important;
  border:2px solid rgba(255,255,255,.92) !important;
  background:rgba(0,0,0,.42) !important;
  box-shadow:0 2px 14px rgba(0,0,0,.4) !important;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}
.kite-video-center-play::after,
.kite-rich-link-card .kite-link-play-overlay::after{
  content:"";
  display:block;
  width:26px;
  height:26px;
  margin-left:4px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5.2v13.6L19.2 12z' fill='white' stroke='white' stroke-width='2.2' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.kite-rich-link-card .kite-link-play-overlay{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:20 !important;
  pointer-events:none !important;
}
.kite-rich-link-card .kite-link-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,#2b3048,#171a2b);
}
.kite-rich-link-card .kite-link-fallback-instagram{
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
}
.kite-rich-link-card .kite-link-fallback svg,
.kite-rich-link-card .kite-link-fallback img{
  width:46px !important;
  height:46px !important;
  flex:0 0 46px !important;
  color:#fff !important;
}
#private-messages .kite-rich-link-card .kite-link-play-overlay,
#group-messages .kite-rich-link-card .kite-link-play-overlay{
  width:44px !important;height:44px !important;min-width:44px !important;
}
#private-messages .kite-rich-link-card .kite-link-play-overlay::after,
#group-messages .kite-rich-link-card .kite-link-play-overlay::after{
  width:20px;height:20px;margin-left:3px;
}


/* ===== Public feed: right-side fast scrollbar ===== */
.kite-fast-scroll{position:fixed;z-index:60;width:34px;pointer-events:none;display:none}
.kite-fast-scroll.is-on{display:block}
.kite-fast-scroll-thumb{position:absolute;right:0;top:0;width:34px;height:60px;pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:flex-end;opacity:.45;transition:opacity .2s}
.kite-fast-scroll-thumb::after{content:'';width:6px;height:44px;margin-right:5px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 1px 5px rgba(0,0,0,.4);transition:width .15s}
.kite-fast-scroll.is-active .kite-fast-scroll-thumb{opacity:1}
.kite-fast-scroll.is-dragging .kite-fast-scroll-thumb::after{width:10px}
.kite-fast-scroll-bubble{position:absolute;right:42px;top:0;padding:6px 11px;border-radius:12px;background:rgba(245,246,250,0.94);color:#172033;font:600 13px/1 system-ui,sans-serif;white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}
.kite-fast-scroll.is-dragging .kite-fast-scroll-bubble{opacity:1}

/* ===== Private + Group chat: every card has the link-card size =====
   Link cards, reels, images, GIFs, AI images and videos share one box.
   Change --kite-chat-card-w / --kite-chat-card-h to resize them all at once. */
#private-messages,
#group-messages {
  --kite-chat-card-w: min(280px, 72vw);
  --kite-chat-card-h: 180px;
}
@media (max-width: 480px) {
  #private-messages,
  #group-messages { --kite-chat-card-h: 170px; }
}

#private-messages .kite-rich-link-card,
#group-messages .kite-rich-link-card {
  width: var(--kite-chat-card-w) !important;
  max-width: var(--kite-chat-card-w) !important;
}
#private-messages .kite-rich-link-card .kite-link-preview-media,
#group-messages .kite-rich-link-card .kite-link-preview-media {
  height: var(--kite-chat-card-h) !important;
  min-height: var(--kite-chat-card-h) !important;
}

#private-messages .kite-media-download-wrap > img,
#private-messages .kite-media-download-wrap > video,
#private-messages .kite-media-download-wrap > .kite-video-player,
#group-messages .kite-media-download-wrap > img,
#group-messages .kite-media-download-wrap > video,
#group-messages .kite-media-download-wrap > .kite-video-player {
  display: block !important;
  box-sizing: border-box !important;
  width: var(--kite-chat-card-w) !important;
  max-width: var(--kite-chat-card-w) !important;
  height: var(--kite-chat-card-h) !important;
  min-height: var(--kite-chat-card-h) !important;
  max-height: var(--kite-chat-card-h) !important;
  object-fit: contain !important;
  background: rgba(0,0,0,.18) !important;
  border-radius: 16px !important;
}
#private-messages .kite-media-download-wrap > .kite-video-player,
#group-messages .kite-media-download-wrap > .kite-video-player {
  background: #000 !important;
}
#private-messages .kite-media-download-wrap > .kite-video-player .kite-video-element,
#group-messages .kite-media-download-wrap > .kite-video-player .kite-video-element {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
/* Fullscreen video keeps using the whole screen. */
#private-messages .kite-media-download-wrap > .kite-video-player:fullscreen,
#group-messages .kite-media-download-wrap > .kite-video-player:fullscreen,
#private-messages .kite-media-download-wrap > .kite-video-player:-webkit-full-screen,
#group-messages .kite-media-download-wrap > .kite-video-player:-webkit-full-screen {
  width: 100% !important; max-width: none !important;
  height: 100% !important; min-height: 0 !important; max-height: none !important;
  border-radius: 0 !important;
}

/* ===== Public feed: only the post fast-scroll bar is shown (no native scrollbar), bigger grab area ===== */
#messages#messages { scrollbar-width: none; -ms-overflow-style: none; }
#messages#messages::-webkit-scrollbar { width: 0; height: 0; display: none; }
.kite-fast-scroll { width: 40px; }
.kite-fast-scroll-thumb { width: 40px; opacity: .6; }
.kite-fast-scroll-thumb::after { margin-right: 8px; width: 7px; background: linear-gradient(180deg,#7c5cff,#3b82f6); box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 2px 8px rgba(0,0,0,.5); }

/* ===== Public feed: no fast-scroll bar; loop copies are display-only ===== */
#messages > [data-kite-clone] { pointer-events: none !important; }

/* ===== Compact top + bottom buttons so the public post card gets more height ===== */
#chat-header.kite-main-header { padding: 4px 6px 3px !important; }
#chat-header .kite-brand { min-height: 34px !important; }
#chat-header .kite-top-notification {
  top: 4px !important;
  width: 34px !important; min-width: 34px !important; max-width: 34px !important;
  height: 34px !important;
}
#chat-header .kite-top-notification i { font-size: 15px !important; }
#chat-header .kite-main-nav { margin: 0 0 4px !important; gap: 4px !important; }
#chat-header .kite-main-nav .kite-nav-btn {
  height: 32px !important; min-height: 0 !important;
  padding: 2px 2px !important;
  border-radius: 10px !important;
  gap: 1px !important;
  font-size: 9px !important;
}
#chat-header .kite-main-nav .kite-nav-btn i { font-size: 12px !important; }

#chat-container > .input-group {
  padding: 3px 6px !important;
  margin-top: 3px !important;
  margin-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 18px !important;
}
#chat-container > .input-group #chat-tools { gap: 6px !important; }
#chat-container > .input-group #chat-tools .chat-tool-button {
  height: 32px !important; min-height: 0 !important;
  border-radius: 16px !important;
  font-size: 13px !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
}
#chat-container > .input-group #chat-tools #post-open-button { font-size: 13px !important; }

/* ===== Top cards: My Status circle on the same row as Profile / Users; theme ring on profile pic ===== */
#profile-container #my-status-card.top-card {
  padding: 0 !important;
  gap: 0 !important;
  display: block !important;
}

/* ===== Profile / My Status / Users cards: identical ring, identical fonts, identical rows ===== */
/* Ring drawn on the round wrapper itself (always a full circle): 3px theme colour, same as the other two circles. */
html body #profile-container #profile .profile-avatar-wrap {
  border: 3px solid var(--kite-accent, #ff8a00) !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  padding: 0 !important; background: #f7f7f7 !important;
  box-shadow: none !important; outline: 0 !important;
  overflow: hidden !important;
  display: block !important;
}
html body #profile-container #profile .profile-avatar-wrap #profile-pic {
  display: block !important;
  position: static !important; transform: none !important;
  width: 100% !important; height: 100% !important;
  min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; max-height: 100% !important;
  flex: none !important; inset: auto !important; top: auto !important; left: auto !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; box-shadow: none !important; outline: 0 !important;
  border-radius: 50% !important; object-fit: cover !important;
}

/* Users card sat lower than the other two: remove the inner padding/gap that shifted it. */
#profile-container .top-new-user-card { padding: 0 !important; }
#profile-container #new-user-card.new-user-top-carousel,
#profile-container #my-status-card .status-top-carousel {
  padding: 0 !important; margin: 0 !important; gap: 0 !important;
}

/* Names: same font on all three cards */
#profile-container.kite-profile-status-row #profile #profile-name,
#profile-container.kite-profile-status-row #my-status-card .status-top-item .status-top-name,
#profile-container.kite-profile-status-row .top-new-user-card .new-user-top-item .new-user-top-name {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  text-transform: none !important;
  opacity: 1 !important;
}
/* Bottom rows (Online / Views-Likes / country): same font on all three cards */
#profile-container.kite-profile-status-row #profile .profile-display-status,
#profile-container.kite-profile-status-row #my-status-card .status-top-item .status-top-meta,
#profile-container.kite-profile-status-row .top-new-user-card .new-user-top-item .new-user-top-country {
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  text-transform: none !important;
  opacity: .9 !important;
}
#profile-container.kite-profile-status-row #profile .profile-display-status *,
#profile-container.kite-profile-status-row #my-status-card .status-top-item .status-top-meta *,
#profile-container.kite-profile-status-row .top-new-user-card .new-user-top-item .new-user-top-country * {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  opacity: 1 !important;
}

/* Public feed polish: remove the decorative background behind each post and let
   the post card fill the feed viewport. The Background picker changes the card. */
#messages#messages > .post-container.message {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
#messages .public-post-front {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 100% !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: var(--kite-post-card-bg, #f5f7ff) !important;
  padding: 14px !important;
}
#messages .public-post-front .public-post-media,
#messages .public-post-front .message-body img,
#messages .public-post-front .message-body video {
  max-height: calc(var(--kite-public-card-h, 80vh) - 190px) !important;
}
/* Background picker now changes the post card color, not a backdrop behind it. */
#messages[data-public-bg="default"] .public-post-front { --kite-post-card-bg: #f5f7ff; }
#messages[data-public-bg="galaxy-blue"] .public-post-front { --kite-post-card-bg: #dceeff; }
#messages[data-public-bg="nebula-orange"] .public-post-front { --kite-post-card-bg: #fff0df; }
#messages[data-public-bg="nebula-pink"] .public-post-front { --kite-post-card-bg: #ffe8f2; }
#messages[data-public-bg="galaxy-purple"] .public-post-front { --kite-post-card-bg: #ece5ff; }
#messages[data-public-bg="milkyway"] .public-post-front { --kite-post-card-bg: #e8edf4; }
#messages[data-public-bg="aurora-red"] .public-post-front { --kite-post-card-bg: #ffe3e3; }
#messages[data-public-bg="aurora-green"] .public-post-front { --kite-post-card-bg: #e1f7e9; }
#messages[data-public-bg="galaxy-space"] .public-post-front { --kite-post-card-bg: #e4e8ff; }
/* Keep the complete Kiters wordmark visible and readable. */
#chat-header .kite-brand {
  color: #087bc5 !important;
  -webkit-text-fill-color: #087bc5 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  opacity: 1 !important;
}


/* FINAL FIX: keep Forward/Share Reel destination text readable on the light modal. */
.kite-forward-modal .kite-forward-panel,
.kite-forward-modal .kite-forward-panel * {
  --kite-text: #172033 !important;
}
.kite-forward-modal .kite-forward-panel { color: #172033 !important; }
.kite-forward-modal .kite-forward-panel .kite-forward-category,
.kite-forward-modal .kite-forward-panel .kite-forward-target,
.kite-forward-modal .kite-forward-panel .kite-forward-category strong,
.kite-forward-modal .kite-forward-panel .kite-forward-target strong,
.kite-forward-modal .kite-forward-panel .kite-forward-category small,
.kite-forward-modal .kite-forward-panel .kite-forward-target small,
.kite-forward-modal .kite-forward-panel .kite-forward-empty,
.kite-forward-modal .kite-forward-panel .kite-forward-loading {
  color: #172033 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #172033 !important;
}
.kite-forward-modal .kite-forward-panel .kite-forward-category small,
.kite-forward-modal .kite-forward-panel .kite-forward-target small,
.kite-forward-modal .kite-forward-panel .kite-forward-source { color: #5f6878 !important; -webkit-text-fill-color: #5f6878 !important; }


/* Fix: Reels username metadata text contrast over video */
#reels-overlay .reel-meta {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.98), 0 2px 8px rgba(0,0,0,.95) !important;
    background: linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,.28) 72%, rgba(0,0,0,0)) !important;
    border-radius: 12px !important;
    padding: 18px 12px 10px !important;
    box-sizing: border-box !important;
}
#reels-overlay .reel-meta .reel-user,
#reels-overlay .reel-meta .reel-caption,
#reels-overlay .reel-meta .reel-music-line,
#reels-overlay .reel-meta .reel-views {
    color: #fff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 3px #000, 0 2px 7px rgba(0,0,0,.95) !important;
    -webkit-text-stroke: .15px rgba(0,0,0,.35);
}
#reels-overlay .reel-meta .reel-caption,
#reels-overlay .reel-meta .reel-music-line,
#reels-overlay .reel-meta .reel-views {
    font-weight: 600 !important;
}


/* Public feed: hide scrollbar completely and keep native continuous finger scrolling. */
#messages#messages { scrollbar-width:none !important; -ms-overflow-style:none !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; touch-action:pan-y !important; overscroll-behavior-y:contain; }
#messages#messages::-webkit-scrollbar { display:none !important; width:0 !important; height:0 !important; }
.kite-fast-scroll { display:none !important; }

/* Private Chats history: remove only the top-right close (X) control. */
#close-chat-history {
  display: none !important;
}

/* Admin User Cleanup tab (integrated from admin-cleanup.html) */
.kite-admin-cleanup .kite-cleanup-description{font-size:13px;line-height:1.5;color:var(--text-secondary,#666);margin:8px 0 14px}.kite-admin-cleanup .kite-cleanup-who{font-size:13px;margin:10px 0 14px;padding:10px;border-radius:9px;background:var(--surface-2,#f2f4f7)}.kite-admin-cleanup label{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:14px}.kite-admin-cleanup input{width:100%;box-sizing:border-box;border:1px solid #d7d7d7;border-radius:10px;padding:11px 12px;font:inherit;background:#fff;color:#222;outline:none}.kite-admin-cleanup input:focus{border-color:#777;box-shadow:0 0 0 2px rgba(0,0,0,.06)}.kite-admin-cleanup #admin-cleanup-go{margin-top:14px}.kite-cleanup-output{white-space:pre-wrap;word-break:break-word;background:var(--surface-2,#f0f0f6);padding:12px;border-radius:8px;font-size:12px;line-height:1.5;min-height:28px;max-height:320px;overflow:auto}


/* FINAL FIX: Admin panel tab labels must fit on small phone screens.
   High-specificity + !important overrides the app's global button/flex rules. */
.kite-admin-box .kite-admin-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  flex-wrap: unset !important;
  align-items: stretch !important;
}
.kite-admin-box .kite-admin-tabs > button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 52px !important;
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
  padding: 9px 5px !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-overflow: clip !important;
  text-align: center !important;
  line-height: 1.2 !important;
  font-size: 14px !important;
}
@media (max-width: 380px) {
  .kite-admin-box .kite-admin-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}


/* ===== PUBLIC FEED: photo / video fill the whole post card =====
   The media area takes all the height left under the caption. Nothing is
   cropped (object-fit: contain); any space left over shows the card colour,
   not black. To crop-to-fill instead, set --kite-public-media-fit: cover. */
#messages#messages .public-post-front .message-body > .kite-media-download-wrap{
  position:relative !important;
  flex:1 1 0 !important;
  align-self:stretch !important;
  width:100% !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  border-radius:12px !important;
  background:transparent !important;
}
#messages#messages .public-post-front .message-body > .kite-media-download-wrap > img.public-post-media,
#messages#messages .public-post-front .message-body > .kite-media-download-wrap > .kite-video-player.public-post-media{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}
#messages#messages .public-post-front .message-body > .kite-media-download-wrap > img.public-post-media{
  object-fit:var(--kite-public-media-fit, contain) !important;
}
/* High specificity on purpose: an older rule caps video max-height when a caption exists. */
#messages#messages .public-post-front .message-body > .kite-media-download-wrap > .kite-video-player.public-post-media .kite-video-element{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:var(--kite-public-media-fit, contain) !important;
  background:transparent !important;
  border-radius:0 !important;
}


/* ===== Group call: host "Participants" panel (Call again / Remove) ===== */
#call-container .group-call-manage-panel{
  display:none; position:absolute; left:10px; right:10px;
  bottom:calc(max(22px, env(safe-area-inset-bottom, 0px) + 16px) + 76px);
  max-height:52%; overflow:auto; z-index:60; pointer-events:auto;
  background:rgba(20,22,30,.94); color:#fff; border-radius:16px; padding:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.45); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
#call-container .group-call-manage-panel.open{display:block;}
#call-container .gcm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:14px;}
#call-container .gcm-close{border:0;background:rgba(255,255,255,.14);color:#fff;width:30px;height:30px;border-radius:50%;font-size:18px;cursor:pointer;}
#call-container .gcm-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-top:1px solid rgba(255,255,255,.08);}
#call-container .gcm-row img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 36px;}
#call-container .gcm-info{flex:1;min-width:0;}
#call-container .gcm-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#call-container .gcm-status{font-size:11px;opacity:.8;}
#call-container .gcm-row.rejected .gcm-status,#call-container .gcm-row.disconnected .gcm-status{color:#ff8a8a;font-weight:700;opacity:1;}
#call-container .gcm-actions{display:flex;gap:6px;flex:0 0 auto;}
#call-container .gcm-btn{border:0;border-radius:14px;padding:7px 11px;font-size:12px;font-weight:700;background:#2f7bff;color:#fff;cursor:pointer;}
#call-container .gcm-btn.danger{background:#e5484d;}
#call-container .gcm-empty{font-size:12px;opacity:.7;padding:8px 2px;}


/* 2026-11-09: page-level exit controls use a consistent Back arrow, not an X. */
#status-gallery-close,
#profile-activity-back,
#group-call-close,
#calling-tone-close,
#close-image-preview,
#reels-close-btn,
#reels-source-close,
#profile-crop-close,
#group-manage-close,
#close-private-chat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#reels-close-btn .fa-arrow-left,
#reels-source-close .fa-arrow-left,
#close-private-chat .fa-arrow-left,
#close-image-preview .fa-arrow-left {
  pointer-events: none;
}


/* Page-level Close controls are presented as Back navigation throughout Kiters. */
#close-iframe-button,
#kite-ai-image-close,
#close-chat-history,
#closeModal,
#reels-comments-close,
#kite-live-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#reels-follow-list-close,
#reels-profile-close { display: none !important; }

/* Ensure the Private Chats history Back control overrides its former hidden-X rule. */
#close-chat-history { display: inline-flex !important; align-items: center; justify-content: center; }
#closeModal { border: 0; background: transparent; padding: 4px 8px; }
#close-private-chat { background: var(--kite-panel, #f2f4f8) !important; color: var(--kite-text, #172033) !important; }


/* In-app Reels camera: live photo + video capture */
.reels-camera-modal{position:fixed;inset:0;z-index:100100;background:#000;color:#fff;display:flex;align-items:stretch;justify-content:center}
.reels-camera-modal.hidden{display:none!important}
.reels-camera-shell{width:100%;max-width:600px;height:100%;display:flex;flex-direction:column;background:#000}
.reels-camera-shell header{height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.reels-camera-shell header button{width:42px;height:42px;border:0;border-radius:50%;background:#242424;color:#fff;font-size:27px}
.reels-camera-shell header strong{font-size:16px}
.reels-camera-stage{position:relative;flex:1;min-height:0;background:#080808;display:flex;align-items:center;justify-content:center;overflow:hidden}
.reels-camera-stage video{width:100%;height:100%;object-fit:cover}
.reels-camera-countdown{position:absolute;top:12px;left:12px;color:#fff;font-weight:700;text-shadow:0 1px 4px #000}
.reels-camera-actions{display:flex;justify-content:center;align-items:center;gap:22px;padding:22px 16px 12px}
.reels-camera-actions button{min-width:124px;height:48px;border:1px solid #fff;border-radius:28px;background:#222;color:#fff;font-weight:800}
.reels-camera-actions [data-camera-record]{background:#d9273f;border-color:#d9273f}
.reels-camera-shell>p{text-align:center;color:#bbb;font-size:12px;margin:0 0 18px}



.reels-virtual-spacer{display:block;flex:0 0 auto;width:100%;min-height:0;scroll-snap-align:none;pointer-events:none;}


/* Native app: suppress WebView long-press selection/context menu on app
   surfaces while preserving editing inside form controls. */
.kiters-native-app,
.kiters-native-app * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
.kiters-native-app input,
.kiters-native-app textarea,
.kiters-native-app [contenteditable="true"],
.kiters-native-app [role="textbox"] {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

/* Games page: no on-screen Back button. The device Back key still closes it
   (the button stays in the layout as an invisible 1px control for back-navigation.js). */
#close-iframe-button {
  position: absolute !important;
  top: 0; left: 0;
  width: 1px !important; height: 1px !important;
  min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  opacity: 0 !important; pointer-events: none !important; overflow: hidden !important;
}


/* Compact admin navigation: tabs and active refresh stay in one toolbar row. */
.kite-admin-box .kite-admin-tabs {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:5px !important;
  align-items:center !important;
  padding:7px !important;
}
.kite-admin-box .kite-admin-tabs > button {
  min-height:34px !important;
  height:34px !important;
  max-height:34px !important;
  padding:5px 6px !important;
  border-radius:9px !important;
  font-size:11px !important;
  line-height:1.1 !important;
  font-weight:600 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.kite-admin-box .kite-admin-tabs > #admin-refresh-active {
  background:#e8f2ff !important;
  color:#155da8 !important;
  border:1px solid #b9d7f5 !important;
}
.kite-admin-box .kite-admin-toolbar {
  min-height:34px !important;
  gap:8px !important;
}


/* Kiters native AdMob sponsored cards (Android APK only). */
.kiters-native-ad-slot{display:block;width:calc(100% - 20px);max-width:520px;min-height:340px;margin:14px auto;padding:10px;box-sizing:border-box;border:1px solid rgba(120,130,150,.22);border-radius:16px;background:#fff;color:#111827;overflow:hidden;}
.kiters-native-ad-label{font:600 11px/1.3 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#667085;margin:0 0 6px 2px;}
.kiters-native-ad-mount{width:100%;min-height:320px;}


/* Native sponsored Reel cards: each ad is one normal full-screen swipe item. */
#reels-feed .reel-ad-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  box-sizing: border-box !important;
  padding: 16px 12px !important;
  background: #101114 !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  overflow: hidden !important;
}
#reels-feed .reels-native-ad-slot {
  width: min(100%, 520px) !important;
  min-height: 340px !important;
  max-height: 86% !important;
  margin: auto !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #111827 !important;
  overflow: hidden !important;
}
#reels-feed .reels-native-ad-slot .kiters-native-ad-mount {
  width: 100% !important;
  min-height: 320px !important;
  max-height: calc(86vh - 52px) !important;
  overflow: hidden !important;
}


/* Kiters Native AdMob: full-size feed containers (post and reel). */
.kiters-native-ad-slot {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 680px !important;
  height: var(--kite-public-card-h, 70vh) !important;
  min-height: var(--kite-public-card-h, 70vh) !important;
  max-height: var(--kite-public-card-h, 70vh) !important;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(120,130,150,.28) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #111827 !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}
.kiters-native-ad-label {
  flex: 0 0 auto !important;
  margin: 0 0 8px 2px !important;
}
.kiters-native-ad-mount {
  display: block !important;
  position: relative !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}
.kiters-native-ad-mount capacitor-admob-native {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Match the public feed's post-height snap card; never pin the ad to the viewport. */
#messages#messages > .kiters-native-ad-slot {
  width: 100% !important;
  max-width: none !important;
  height: var(--kite-public-card-h, 70vh) !important;
  min-height: var(--kite-public-card-h, 70vh) !important;
  max-height: var(--kite-public-card-h, 70vh) !important;
}

/* Reels ads occupy the same full-screen swipe page as a Reel. */
#reels-feed .reel-ad-item {
  align-items: stretch !important;
  justify-content: stretch !important;
}
#reels-feed .reels-native-ad-slot {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 520px !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  flex: 1 1 auto !important;
  margin: 0 auto !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
#reels-feed .reels-native-ad-slot .kiters-native-ad-mount {
  display: block !important;
  position: relative !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
#reels-feed .reels-native-ad-slot capacitor-admob-native {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}



/* 2026-11-13: compact native ad cards + continuous public feed scrolling. */
#messages#messages {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}
#messages#messages > .post-container.message {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

/* Post-feed native ads stay content-sized instead of stretching to a post viewport. */
#messages#messages > .kiters-native-ad-slot {
  display: flex !important;
  flex-direction: column !important;
  width: calc(100% - 16px) !important;
  max-width: 560px !important;
  height: auto !important;
  min-height: 300px !important;
  max-height: 440px !important;
  margin: 12px auto !important;
  padding: 10px !important;
  border-radius: 14px !important;
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}
#messages#messages > .kiters-native-ad-slot .kiters-native-ad-mount {
  flex: 1 1 auto !important;
  min-height: 270px !important;
  height: auto !important;
}

/* Reels keep a full-screen swipe page, while the actual sponsored card is
   centered and content-sized so the frame does not become a mostly-empty panel. */
#reels-feed .reel-ad-item {
  align-items: center !important;
  justify-content: center !important;
}
#reels-feed .reels-native-ad-slot {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 1 auto !important;
  width: calc(100% - 16px) !important;
  max-width: 560px !important;
  height: auto !important;
  min-height: 300px !important;
  max-height: 440px !important;
  margin: auto !important;
  padding: 10px !important;
  border-radius: 14px !important;
}
#reels-feed .reels-native-ad-slot .kiters-native-ad-mount {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 270px !important;
  max-height: 400px !important;
}

/* Smaller visual background for public-post action buttons; keep labels readable. */
#messages .post-container.message .public-post-actions .public-action-btn {
  height: 29px !important;
  min-height: 29px !important;
  padding: 0 5px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}
#messages .post-container.message .public-post-actions .public-repost-btn {
  min-width: 58px !important;
}
@media(max-width:390px) {
  #messages .post-container.message .public-post-actions {
    gap: 3px !important;
  }
  #messages .post-container.message .public-post-actions .public-action-btn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 4px !important;
    font-size: 10.5px !important;
  }
  #messages .post-container.message .public-post-actions .public-repost-btn {
    min-width: 54px !important;
  }
}


/* 2026-11-13 follow-up: compact, Facebook-feed-sized sponsored cards.
   The Reel remains a full-height swipe page; only the ad creative is compact. */
#messages#messages > .kiters-native-ad-slot {
  min-height: 280px !important;
  max-height: 360px !important;
  height: auto !important;
}
#messages#messages > .kiters-native-ad-slot .kiters-native-ad-mount {
  min-height: 250px !important;
  max-height: 315px !important;
}
#reels-feed .reel-ad-item {
  min-height: 100% !important;
  height: 100% !important;
  scroll-snap-align: start !important;
}
#reels-feed .reels-native-ad-slot {
  width: min(90%, 420px) !important;
  min-height: 280px !important;
  max-height: 360px !important;
  height: auto !important;
  flex: 0 1 auto !important;
  align-self: center !important;
}
#reels-feed .reels-native-ad-slot .kiters-native-ad-mount {
  min-height: 250px !important;
  max-height: 315px !important;
  flex: 0 1 auto !important;
}


/* Admin Center upgrade — scoped to the existing Admin overlay only. */
.kite-admin-box .kite-admin-enhanced-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 2px;margin-bottom:10px;border-bottom:1px solid rgba(127,127,127,.2)}
.kite-admin-box .kite-admin-enhanced-toolbar>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.kite-admin-box .kite-admin-enhanced-toolbar strong{font-size:16px}
.kite-admin-box .kite-admin-enhanced-toolbar small,.kite-admin-box .kite-admin-enhanced-toolbar>span{font-size:11px;opacity:.7}
.kite-admin-box .kite-admin-enhanced-content{min-width:0}
.kite-admin-box .kite-admin-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:10px 0}
.kite-admin-box .kite-admin-stat{min-width:0;padding:13px;border:1px solid rgba(127,127,127,.2);border-radius:12px;background:var(--surface-2,#f6f7f9);display:flex;flex-direction:column;gap:5px}
.kite-admin-box .kite-admin-stat>span{font-size:11px;line-height:1.3;opacity:.75}
.kite-admin-box .kite-admin-stat>strong{font-size:23px;line-height:1.2;overflow-wrap:anywhere}
.kite-admin-box .kite-admin-stat>small{font-size:10px;line-height:1.35;opacity:.7}
.kite-admin-box .kite-admin-info-line,.kite-admin-box .kite-admin-muted{font-size:12px;line-height:1.5;color:var(--text-secondary,#697386);margin:12px 0}
.kite-admin-box .kite-admin-health{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border-radius:8px;font-size:12px;font-weight:700;margin:6px 0}
.kite-admin-box .kite-admin-health.good{background:rgba(22,163,74,.1);color:#168344}
.kite-admin-box .kite-admin-health.warn{background:rgba(217,119,6,.12);color:#a35d00}
.kite-admin-box .kite-admin-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:10px 0}
.kite-admin-box .kite-admin-info-card{min-width:0;padding:12px;border:1px solid rgba(127,127,127,.2);border-radius:11px;display:flex;flex-direction:column;gap:6px}
.kite-admin-box .kite-admin-info-card>b{font-size:11px;opacity:.7}
.kite-admin-box .kite-admin-info-card>strong{font-size:13px;overflow-wrap:anywhere}
.kite-admin-box .kite-admin-info-card>small{font-size:11px;line-height:1.4;opacity:.72}
.kite-admin-box .kite-admin-table-wrap{width:100%;overflow:auto;border:1px solid rgba(127,127,127,.18);border-radius:10px}
.kite-admin-box .kite-admin-data-table{width:100%;border-collapse:collapse;font-size:12px}
.kite-admin-box .kite-admin-data-table th,.kite-admin-box .kite-admin-data-table td{padding:10px 9px;text-align:left;border-bottom:1px solid rgba(127,127,127,.15);white-space:nowrap}
.kite-admin-box .kite-admin-data-table th{font-weight:700;background:var(--surface-2,#f5f6f8)}
.kite-admin-box .kite-admin-data-table tr:last-child td{border-bottom:0}
.kite-admin-box .kite-admin-subheading{font-size:14px;margin:18px 0 8px}
.kite-admin-box .kite-admin-endpoint-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.kite-admin-box .kite-admin-endpoint-grid code{padding:8px;border-radius:8px;background:var(--surface-2,#f2f4f7);font-size:10px;overflow-wrap:anywhere}
.kite-admin-box .kite-admin-report-filter{display:grid;grid-template-columns:minmax(0,1fr) 125px;gap:8px;margin:10px 0;align-items:center}
.kite-admin-box .kite-admin-report-filter input,.kite-admin-box .kite-admin-report-filter select{width:100%;min-width:0;box-sizing:border-box;border:1px solid rgba(127,127,127,.28);border-radius:9px;padding:9px;background:var(--surface-2,#fff);color:inherit;font:inherit;font-size:12px}
.kite-admin-box .kite-admin-report-filter small{grid-column:1/-1;font-size:10px;opacity:.7}
.kite-admin-box #admin-reports-list .kite-report-card[hidden]{display:none!important}
@media(max-width:420px){
 .kite-admin-box .kite-admin-stat-grid,.kite-admin-box .kite-admin-info-grid{gap:7px}
 .kite-admin-box .kite-admin-stat{padding:10px}
 .kite-admin-box .kite-admin-stat>strong{font-size:20px}
 .kite-admin-box .kite-admin-info-grid{grid-template-columns:1fr}
 .kite-admin-box .kite-admin-endpoint-grid{grid-template-columns:1fr}
}


/* Private chat: compact Friends / Reels Followers counts beside the avatar info. */
#private-chat-user .private-user-social-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.2;
    color: var(--kite-text-secondary, #8993a8);
}
#private-chat-user .private-user-social-stats span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border: 1px solid rgba(120, 135, 160, .22);
    border-radius: 999px;
    background: rgba(120, 135, 160, .08);
    white-space: nowrap;
}
#private-chat-user .private-user-social-stats strong {
    color: var(--kite-text, #172033);
    font-weight: 800;
}


/* Empty conversation state shared by private and group chats. */
.kite-empty-posts{display:flex;align-items:center;justify-content:center;min-height:180px;width:100%;color:#8993a4;font-size:14px;font-weight:600;letter-spacing:.2px;pointer-events:none}


/* Compact, always-visible controls and draggable minimized call window. */
#call-container.pip-mode{touch-action:pan-y;}
#call-container.pip-mode .call-controls{display:flex!important;visibility:visible!important;opacity:1!important;z-index:2147483647!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:max-content!important;max-width:calc(100% - 8px)!important;gap:4px!important;padding:3px!important;bottom:5px!important;pointer-events:auto!important;}
#call-container.pip-mode .call-ctrl-btn{display:flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;justify-content:center!important;width:27px!important;height:27px!important;min-width:27px!important;max-width:27px!important;padding:0!important;font-size:11px!important;flex:0 0 27px!important;}
#call-container.pip-mode #call-pip-btn,#call-container.pip-mode #call-end-btn,#call-container.pip-mode #call-end-btn~*{display:flex!important;}
#call-container.pip-mode #call-status{pointer-events:none!important;}