/* Знакора: application styles, followed by initial HTML style declarations. */

@layer features, system;
@layer features {
:root {
    --bubble-radius: 24px;
    --bubble-radius-tail: 9px;
    --chat-font-size: 15px;
}
[data-theme="neon"] .btn-primary {
    font-weight: 600;
}
[data-theme="sunset"] .btn-primary {
    font-weight: 600;
}
* { margin: 0; padding: 0; box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }

html, body {
    width: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: var(--font);
    background-color: var(--bg-body);
    color: var(--text-main);
}
.chat-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-body);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    transform: translate3d(100%, 0, 0); 
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
}
.hidden { display: none; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.center { align-items: center; justify-content: center; }
.bold { font-weight: 600; }
.text-sm { font-size: 0.9rem; }
.text-xs { font-size: 0.75rem; }
.text-sec { color: var(--text-sec); }
.pointer { cursor: pointer; }
.w-full { width: 100%; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#view-auth {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-body);
    background-image: url('/public/images/link.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.auth-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
.auth-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
    pointer-events: none;
}
.auth-hero {
    display: none;
    z-index: 2;
}
.auth-overlay-light {
    position: absolute;
    inset: 0;
    background: var(--hover);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 1;
    pointer-events: none;
}
.auth-card {
    width: 100%; max-width: 360px; padding: 40px;
    background: var(--glass-heavy);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: none; 
    
    display: flex; flex-direction: column; align-items: center;
    animation: none;
    z-index: 2; 
}
.logo-img { height: 60px; width: auto; object-fit: contain; margin-bottom: 20px; filter: none; }
@media (min-width: 769px) and (pointer:fine), (min-width: 769px) and (min-height:501px), (min-width: 769px) and (min-width:1025px) {
    #view-auth {
        padding: 0; 
        justify-content: space-between; 
    }
    .auth-hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 50%;
        padding-left: 8%; 
        z-index: 2;
    }

    .auth-hero-title {
        font-family: var(--font);
        font-size: 4.5rem;
        font-weight: 600; 
        margin-bottom: 15px;
        line-height: 1.1;
        letter-spacing: -1px;
        color: var(--text-main);
    }

    .auth-hero-subtitle {
        font-family: var(--font);
        font-size: 1.2rem;
        font-weight: 500;
        line-height: 1.5;
        color: var(--text-sec);
    }
    .auth-card {
        margin-left: auto;       
        margin-right: 0;
        width: 480px;            
        max-width: 45vw;         
        height: 100%;            
        max-height: 100%;
        border-radius: 0;        
        border-top: none;
        border-right: none;
        border-bottom: none;
        border-left: 1px solid var(--glass-border); 
        justify-content: center; 
        overflow-y: auto;
        box-shadow: none; 
    }
}
.btn {
    border: none; padding: 0 16px; height: 44px; border-radius: 12px;
    font-weight: 600; cursor: pointer; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 0.95rem; user-select: none;
}
.btn-primary { background: var(--primary); color: var(--text-main); }
.btn-primary:active { transform: scale(0.97); }
.btn-ghost { background: transparent; color: var(--text-main); }
.btn-ghost:hover { background: rgba(0,0,0,0.05); }
.btn-danger { background: var(--surface-raised); color: var(--danger); }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; flex-shrink: 0; }

.input {
    width: 100%; height: 46px; border-radius: 12px;
    border: 1px solid transparent; 
    background: var(--surface-raised);
    padding: 0 16px; color: var(--text-main); font-size: 1rem;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.input:focus { background: var(--glass-heavy); border-color: var(--primary); box-shadow: none; }
#view-app {
    display: grid;
    grid-template-columns: clamp(320px, 30vw, 380px) 1fr;
    height: 100%; width: 100%;
    overflow: hidden;
}
.sidebar {
    background: var(--glass-bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    height: 100%; position: relative; z-index: 20; overflow: hidden;
}
.nav-rail {
    display: none;
    width: 72px;
    flex-shrink: 0;
    background: var(--surface);
    height: 100%;
    flex-direction: column;
    align-items: center;
    padding-top: 18%;
    gap: 4px;
    z-index: 21;
    position: relative;
}
.rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 56px;
    padding: 8px 0;
    cursor: pointer;
    color: var(--text-sec);
    border-radius: 16px;
    transition: color 0.15s ease;
    position: relative;
}
.rail-item .rail-icon-wrap {
    position: relative;
    width: 40px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rail-item .rail-icon-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.rail-item.active .rail-icon-wrap::before { opacity: 1; }
.rail-icon { width: 24px; height: 24px; position: relative; z-index: 1; }
.rail-icon-filled { display: none; }
.rail-item.active .rail-icon-outline { display: none; }
.rail-item.active .rail-icon-filled { display: block; width: 25px; height: 25px; }
.rail-item.active { color: var(--primary); }
.rail-item span {
    display: none;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-sec);
}
.rail-item.active span {
    display: block;
    font-weight: 600;
    color: var(--primary);
}
.rail-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--danger);
    color: var(--text-main);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
@media (min-width: 632px) and (max-width: 799px) and (min-height: 500px), (min-width: 872px) and (min-height: 500px) and (pointer:fine), (min-width: 872px) and (min-height: 500px) and (min-height:501px), (min-width: 872px) and (min-height: 500px) and (min-width:1025px) {
    .nav-rail { display: flex; }
    .tabs, .desktop-calls-btn, .sidebar-header .btn-icon:last-child {
        display: none;
    }
}
@media (min-width: 872px) and (min-height: 500px) and (pointer:fine), (min-width: 872px) and (min-height: 500px) and (min-height:501px), (min-width: 872px) and (min-height: 500px) and (min-width:1025px) {
    #view-app {
        grid-template-columns: 72px clamp(320px, calc((100vw - 72px) * 0.3), 380px) 1fr;
    }
}

.sidebar-header { 
    padding: 16px 16px 0 16px;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-shrink: 0; 
    height: 60px;
}
.tabs { display: flex; padding: 0 16px 10px; gap: 8px; flex-shrink: 0; }
.tab-btn { flex: 1; padding: 8px; text-align: center; border-radius: 10px; cursor: pointer; font-size: 0.85rem; color: var(--text-sec); font-weight: 600; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease; }
.tab-btn.active { background: var(--surface-raised); color: var(--text-main); }
.search-container { padding: 0 16px 10px; flex-shrink: 0; }
.search-input { width: 100%; height: 38px; background: var(--surface-raised); border-radius: 10px; border: none; padding: 0 30px 0 12px; color: var(--text-main); }

.list-container { flex: 1; overflow-y: auto; padding: 0 10px; position: relative; min-height: 120px; }
.chat-swipe-bg-icon { width: 20px; height: 20px; flex-shrink: 0; }
.learning-topic-row { padding: 12px 16px; cursor: pointer; }
.learning-topic-row.with-divider { border-bottom: 1px solid var(--border); }
.learning-topic-head { display: flex; align-items: flex-start; gap: 12px; }
.learning-chevron { transition: transform 0.18s; margin-top: 6px; color: var(--text-sec); }
.learning-topic-row:has(.learning-topic-body) .learning-chevron { transform: rotate(90deg); }
.learning-topic-body { margin-top: 10px; margin-left: 42px; font-size: 13.5px; line-height: 1.42; color: var(--text-main); opacity: 0.9; }
.learning-demo-box { margin-top: 10px; padding: 11px; border-radius: 12px; font-size: 13px; line-height: 1.38; }

.list-item {
    display: flex; gap: 12px; padding: 12px; border-radius: 14px;
    cursor: pointer; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease; margin-bottom: 4px; align-items: center;
}
.list-item:hover { background: rgba(0,0,0,0.03); }
.list-item.active { background: var(--primary); color: var(--text-main); }
.list-item.active .text-sec { color: var(--text-sec); }

#list-search { background: var(--glass-heavy); backdrop-filter: none; position: absolute; bottom: 70px; left: 0; width: 100%; z-index: 25; padding: 10px; overflow-y: auto; top: 170px; }
.user-panel { padding: 12px 16px; border-top: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; background: var(--glass-bg); backdrop-filter: none; flex-shrink: 0; height: 70px; }
.chat-area { 
    background: transparent; 
    position: relative; display: flex; flex-direction: column; 
    height: 100%; width: 100%; overflow: hidden; 
}

.chat-area { 
    background: transparent; 
    position: relative; display: flex; flex-direction: column; 
    height: 100%; width: 100%; 
    overflow-x: hidden;
    overflow-y: hidden;
}

.messages { 
    flex: 1; 
    overflow-y: auto; 
    overflow-x: hidden;
    padding: 85px 5% 120px 5%; 
    
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    width: 100%; 
    scroll-behavior: auto;
    position: relative;
    overscroll-behavior: contain;
}

#messages-feed {
    background-color: var(--chat-wallpaper-custom-color, var(--chat-wallpaper-color));
    background-image: var(--chat-wallpaper-image, var(--chat-wallpaper-default));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
}
.msg-row {
    display: flex;
    margin-bottom: 1px;
    max-width: 85%;
    width: 100%;
    min-width: 0;
}
@media (min-width: 769px) and (pointer:fine), (min-width: 769px) and (min-height:501px), (min-width: 769px) and (min-width:1025px) {
    .msg-row {
        max-width: 65%; 
    }
}
.msg-img, .msg-video-circle, .msg-sticker-mp4 {
    max-width: 100%;
    height: auto;
}
.swipe-reply-icon {
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%) scale(0.8);
    width: 30px;
    height: 30px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    opacity: 0;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    z-index: 5;
}
.msg-row.own {
    align-self: flex-end;
    flex-direction: row-reverse;
    margin-left: auto;
}
.msg-row.own .meta, 
.msg-row.own .tick-icon {
    color: var(--text-sec);
}
.msg-row:not(.own) .meta {
    color: var(--text-sec);
}
.bubble {
    padding: 10px 14px;
    border-radius: var(--bubble-radius, 24px);
    position: relative;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.4;
    font-size: var(--chat-font-size, 15px);
    box-shadow: none;
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
}
.msg-row:not(.own) .avatar-container {
    align-self: flex-end;
    margin-right: 8px;
    margin-bottom: 2px;
}
.group-sender-name {
    font-size: 12px;
    color: var(--text-sec);
    margin-bottom: 4px;
    margin-left: 12px;
    font-weight: 500;
}
.bubble a[href*="/uploads/"], 
.bubble div[onclick^="window.open"] {
    max-width: 100%;
    box-sizing: border-box;
}
.meta {
    margin-left: 8px;
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
    white-space: nowrap;
}
[data-bubble-style="classic"] { --bubble-radius: 17px; --bubble-radius-tail: 7px; }
[data-bubble-style="compact"] { --bubble-radius: 11px; --bubble-radius-tail: 5px; }
[data-glass-off] * { backdrop-filter: none; -webkit-backdrop-filter: none; }
@keyframes msgRowEnter {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.msg-row.msg-enter { animation: none; }
[data-anim-off] .msg-row.msg-enter { animation: none; }
.msg-row:not(.own) .bubble {
    background: var(--msg-in);
    color: var(--text-main);
    border-radius: var(--bubble-radius, 24px);
}
.msg-row.own .bubble {
    background: var(--msg-out-grad);
    color: var(--text-msg-out, var(--text-main));
    border-radius: var(--bubble-radius, 24px);
}
.msg-row.own .bubble {
    border-top-right-radius: var(--bubble-radius, 24px);
    border-bottom-right-radius: var(--bubble-radius-tail, 9px);
    border-top-left-radius: var(--bubble-radius, 24px);
    border-bottom-left-radius: var(--bubble-radius, 24px);
}
.msg-row.own + .msg-row.own .bubble {
    border-top-right-radius: var(--bubble-radius-tail, 9px);
}
.msg-row.own:has(+ .msg-row.own) .bubble {
    border-bottom-right-radius: var(--bubble-radius-tail, 9px);
}
.msg-row.own:last-child .bubble,
.msg-row.own:not(:has(+ .msg-row.own)) .bubble {
    border-bottom-right-radius: var(--bubble-radius, 24px);
}
.msg-row:not(.own) .bubble {
    border-top-left-radius: var(--bubble-radius, 24px);
    border-bottom-left-radius: var(--bubble-radius-tail, 9px);
    border-top-right-radius: var(--bubble-radius, 24px);
    border-bottom-right-radius: var(--bubble-radius, 24px);
}
.msg-row:not(.own) + .msg-row:not(.own) .bubble {
    border-top-left-radius: var(--bubble-radius-tail, 9px);
}
.msg-row:not(.own):has(+ .msg-row:not(.own)) .bubble {
    border-bottom-left-radius: var(--bubble-radius-tail, 9px);
}
.msg-row:not(.own):last-child .bubble,
.msg-row:not(.own):not(:has(+ .msg-row:not(.own))) .bubble {
    border-bottom-left-radius: var(--bubble-radius, 24px);
}
.input-area .btn-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: background 0.2s, transform 0.2s;
    margin-bottom: 0;
    color: var(--text-sec);
}

.input-area .btn-icon:hover {
    background: var(--surface-raised);
    color: var(--text-main);
}
.input-area {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 800px;
    z-index: 100;
    background: var(--glass-heavy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    
    min-height: 50px;
    padding: 6px 8px;
    
    display: flex;
    align-items: flex-end;
    gap: 8px;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.input-wrapper {
    flex: 1;
    background: transparent;
    border-radius: 0;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border: none;
}
.input-area > .btn-icon:first-child {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    margin-right: 4px;
}
.chat-area:has(#fwd-indicator:not(.hidden)) .input-area,
.chat-view:has(#fwd-indicator:not(.hidden)) .input-area {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: transparent;
}
.chat-area:has(#edit-indicator:not(.hidden)) .input-area,
.chat-view:has(#edit-indicator:not(.hidden)) .input-area,
#active-chat:has(#edit-indicator:not(.hidden)) .input-area {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: transparent;
}
textarea { width: 100%; background: transparent; border: none; resize: none; max-height: 120px; color: var(--text-main); font-family: inherit; font-size: 1rem; padding: 0; margin: 0; outline: none; }
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-md);
  opacity: 1;
  transition: opacity var(--transition-base);
}
.chat-header {
    position: absolute;
    top: 12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 800px;
    height: 50px;
    z-index: 1000;
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
}

.chat-header-main,
.chat-header-controls {
    height: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: var(--glass-heavy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
}

.chat-header-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 12px;
    overflow: hidden;
}

.chat-header-profile {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    justify-content: flex-start;
    gap: 10px;
}

.chat-header-main .avatar {
    width: 36px;
    height: 36px;
}

.chat-header-controls {
    flex: 0 0 auto;
    padding: 0 6px;
    gap: 0;
}

#header-actions {
    flex-shrink: 0;
    display: flex;
    gap: 0;
    align-items: center;
}

.chat-header-controls .btn-icon,
.chat-header-menu {
    width: 38px;
    height: 38px;
    min-width: 38px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ios-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--surface-raised);
    color: var(--text-sec);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}
.ios-close-btn:active {
    background: var(--surface-raised);
}
.modal { 
    background: var(--glass-heavy); 
    backdrop-filter: none;
    padding: 24px; 
    border-radius: 16px; 
    width: 90%; 
    max-width: 380px; 

    border: 1px solid var(--glass-border);
    animation: none; 
    max-height: 90vh; 
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-x: hidden;
    box-sizing: border-box;
}
.modal h2, .modal h3, .modal p, .modal .text-sec, .modal .bold {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
}
.modal h2 { margin-bottom: 0; margin-top: 0; }

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

.modal .input {
    margin-bottom: 0; 
}
.avatar { position: relative; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: rgba(0,0,0,0.05); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); z-index: 2; }
.dot.online { background: var(--success); }
.dot.offline { background: var(--text-sec); }
.avatar-type-badge {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--bg-body, var(--border));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    z-index: 3;
}
.avatar-type-badge svg { width: 10px; height: 10px; }
.account-status-badge {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-right: 3px;
    vertical-align: middle;
}
#view-call {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--call-bg);
}
#view-call.hidden { display: none; }
.call-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.call-bg-blur {
    position: absolute;
    inset: -40px;
    background-size: cover;
    background-position: center;
    filter: blur(48px) saturate(1.4) brightness(0.35);
    opacity: 0.85;
    transition: background-image 0.5s ease;
}
#remote-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.4s ease;
}
#remote-video:not([src]):not(.has-stream) { opacity: 0; }
#remote-video.has-stream { opacity: 1; }
#local-video {
    position: absolute;
    top: 70px;
    right: 18px;
    width: 106px;
    height: 158px;
    border-radius: 18px;
    object-fit: cover;
    transform: scaleX(-1);
    z-index: 200;
    border: 2px solid var(--border);
    box-shadow: none;
    cursor: grab;
    touch-action: none;
    transition: box-shadow 0.2s, border-color 0.2s;
    background: var(--surface-raised);
}
#local-video:active { cursor: grabbing; border-color: var(--primary, var(--border)); }
#local-video.hidden { display: none; }
.call-top-btn {
    position: absolute;
    top: 22px;
    z-index: 300;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--call-border);
    background: var(--call-glass);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--call-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s, background 0.18s;
}
.call-top-btn svg { width: 18px; height: 18px; }
.call-top-btn:hover { transform: scale(1.08); background: var(--hover); }
.call-top-btn:active { transform: scale(0.93); }
.call-top-btn--left  { left: 18px; }
.call-top-btn--right { right: 18px; }
@media (max-width: 767px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #btn-call-minimize { display: none; }
    #btn-pip-top       { display: none; }
}
.call-info-layer {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: -30px;
    pointer-events: none;
    transition: opacity 0.3s;
    flex: 1;
    justify-content: center;
}
.call-info-layer.hidden-ui { opacity: 0; }

.call-avatar-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    margin-bottom: 20px;
}
.call-avatar-img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: none;
    border: 3px solid var(--border);
    position: relative;
    z-index: 2;
}
.call-avatar-ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid var(--border);
    animation: callRingPulse 2.2s ease-in-out infinite;
    z-index: 1;
}
@keyframes callRingPulse {
    0%   { transform: scale(1);    opacity: 0.6; }
    50%  { transform: scale(1.12); opacity: 0.15; }
    100% { transform: scale(1);    opacity: 0.6; }
}

.call-name {
    font-size: 30px;
    font-weight: 600;
    color: var(--call-text);
    letter-spacing: -0.5px;
    margin: 0 0 8px;
    text-shadow: none;
}
.call-status-text {
    font-size: 15px;
    color: var(--call-text-sec);
    font-weight: 400;
    letter-spacing: 0.1px;
}
.call-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 18px;
    gap: 6px;
    pointer-events: none;
}
.call-enc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--call-enc);
    background: rgba(0,0,0,0.28);
    padding: 4px 12px;
    border-radius: 20px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    letter-spacing: 0.2px;
}
.call-timer-badge {
    font-size: 20px;
    font-weight: 600;
    color: var(--call-text);
    letter-spacing: 0.5px;
    text-shadow: none;
}
.call-quality-indicator {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    width: 19px;
    height: 13px;
    cursor: default;
}
.call-quality-indicator.hidden { display: none; }
.call-quality-bar {
    width: 4px;
    border-radius: 16px;
    transition: background-color 0.24s, opacity 0.24s;
    background: var(--hover);
}
.call-quality-bar[data-index="0"] { height: 5px; }
.call-quality-bar[data-index="1"] { height: 8px; }
.call-quality-bar[data-index="2"] { height: 11px; }
.call-controls {
    position: absolute;
    bottom: 44px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.call-ctrl-pill {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 22px;
    border-radius: 16px;
    background: var(--call-glass);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--call-border);
    box-shadow: none;
}
.call-btn {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--call-glass-btn);
    color: var(--call-text);
    transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), background 0.18s, box-shadow 0.18s;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-shrink: 0;
}
.call-btn svg { width: 24px; height: 24px; }
.call-btn:hover  { transform: scale(1.08); background: var(--hover); }
.call-btn:active { transform: scale(0.92); }
.call-btn.active {
    background: var(--call-active-btn);
    color: var(--call-active-text);
    box-shadow: none;
}
#btn-mute.active,
#btn-video.active { background: var(--call-active-btn); color: var(--call-active-text); }
.call-btn--end {
    background: var(--call-glass-end);
    color: var(--text-main);
    width: 68px;
    height: 68px;
    box-shadow: none;
}
.call-btn--end:hover  { transform: scale(1.1); box-shadow: none; }
.call-btn--end:active { transform: scale(0.9); }
.call-btn-label {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--call-text-sec);
    white-space: nowrap;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .call-controls { bottom: calc(44px + env(safe-area-inset-bottom)); }
}
#call-mini-window {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    width: 280px;
    border-radius: 20px;
    background: var(--call-glass, var(--surface-raised));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--call-border, var(--border));
    box-shadow: none;
    overflow: hidden;
    animation: none;
    user-select: none;
}
@keyframes miniCallIn {
    from { transform: scale(0.7) translateY(40px); opacity: 0; }
    to   { transform: scale(1)   translateY(0);    opacity: 1; }
}
#call-mini-window.hidden { display: none; }

.call-mini-drag {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
    cursor: move;
}
.call-mini-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}
.call-mini-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--call-text, var(--text-main));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.call-mini-status {
    font-size: 12px;
    color: var(--call-text-sec, var(--text-sec));
    margin-top: 1px;
}
.call-mini-controls {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px 16px 14px;
    gap: 8px;
}
.call-mini-btn {
    flex: 1;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: var(--hover);
    color: var(--call-text, var(--text-main));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background 0.15s;
    backdrop-filter: none;
}
.call-mini-btn:hover  { background: var(--hover); transform: scale(1.05); }
.call-mini-btn:active { transform: scale(0.93); }
.call-mini-btn.active { background: var(--hover); color: var(--text-sec); }

.call-mini-btn--end {
    background: var(--surface-raised);
    color: var(--text-main);
}
.call-mini-btn--end:hover { background: var(--surface-raised); }

.call-mini-btn--expand {
    background: var(--surface-raised);
    color: var(--text-sec);
}
@media (max-width: 767px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #call-mini-window { display: none; }
}
#modal-incoming {
    position: fixed;
    inset: 0;
    z-index: 19999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(0,0,0,0.55);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
}
#modal-incoming.hidden { display: none; }
@keyframes incomingFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.incoming-card {
    width: 100%;
    max-width: 440px;
    background: var(--call-glass, var(--surface-raised));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--call-border, var(--border));
    border-radius: 28px 28px 0 0;
    padding: 20px 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    animation: none;
    
}
@keyframes incomingSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@media (min-width: 600px) {
    #modal-incoming { align-items: center; }
    .incoming-card  {
        border-radius: 16px;
        max-width: 360px;
        padding: 28px 32px 32px;
        animation: none;
    }
    @keyframes incomingScaleIn {
        from { transform: scale(0.82); opacity: 0; }
        to   { transform: scale(1);    opacity: 1; }
    }
}

.incoming-enc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--call-enc, var(--text-sec));
    margin-bottom: 18px;
    letter-spacing: 0.2px;
}

.incoming-avatar-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    margin-bottom: 16px;
}
.incoming-avatar-pulse {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2.5px solid var(--border);
    animation: callRingPulse 1.8s ease-in-out infinite;
}
.incoming-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border);
    box-shadow: none;
    position: relative;
    z-index: 2;
}

.incoming-name {
    font-size: 24px;
    font-weight: 600;
    color: var(--call-text, var(--text-main));
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}
.incoming-type {
    font-size: 14px;
    color: var(--call-text-sec, var(--text-sec));
    margin: 0 0 28px;
}

.incoming-actions {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    width: 100%;
}
.incoming-action-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.incoming-btn {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s;
}
.incoming-btn:hover  { transform: scale(1.1); }
.incoming-btn:active { transform: scale(0.9); }

.incoming-btn--decline {
    background: var(--surface-raised);
    color: var(--text-main);
    box-shadow: none;
}
.incoming-btn--decline:hover { box-shadow: none; }

.incoming-btn--accept {
    background: var(--surface-raised);
    color: var(--text-main);
    box-shadow: none;
}
.incoming-btn--accept:hover { box-shadow: none; }

.incoming-action-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--call-text-sec, var(--text-sec));
}
.icon { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ctx-menu {
    position: fixed;
    z-index: 20050;
    background: var(--glass-heavy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--glass-border);
    
    border-radius: 16px;
    padding: 6px;
    min-width: 200px;
    max-width: 260px;
    width: auto;
}
.ctx-item svg, 
.ctx-item .icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    stroke-width: 1.8px;
    fill: none;
    overflow: visible;
    margin-right: 12px;
}
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .ctx-menu {
        position: absolute;
        right: 20px;
        left: auto;
    }
}
@keyframes menu-pop {
    to { opacity: 1; transform: scale(1); }
}
#modal-custom-alert {
    z-index: 30000;
    background: rgba(0,0,0,0.6);
}

.custom-alert-box {
    background: var(--glass-heavy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 24px;
    border-radius: 20px;
    width: 300px;
    text-align: center;
    
    border: 1px solid var(--glass-border);
    animation: none;
}

.alert-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text-main); }
.alert-msg { font-size: 14px; color: var(--text-sec); margin-bottom: 20px; line-height: 1.4; }

.alert-input {
    width: 100%;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 16px;
    color: var(--text-main);
    outline: none;
}

.alert-btns { display: flex; gap: 10px; justify-content: center; }
.alert-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    border: none;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.alert-btn.primary { background: var(--primary); color: var(--text-main); }
.alert-btn.cancel { background: var(--surface-raised); color: var(--text-main); }
.alert-btn:active { transform: scale(0.96); }
.stats-list { text-align: left; max-height: 200px; overflow-y: auto; margin-bottom: 20px; }
.stats-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.stats-row:last-child { border-bottom: none; }
.stats-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ctx-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    
    font-size: 15px;
    font-weight: 500;
    color: var(--text-main);
    
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
    text-decoration: none;
}
.ctx-item:active {
    background: rgba(0, 0, 0, 0.08);
    transform: scale(0.98);
}
.ctx-item.danger {
    color: var(--danger);
}
.ctx-item.danger svg {
    stroke: var(--danger);
}

.mobile-ctx-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 250px;
}
.ctx-item.danger { color: var(--danger); }
.ctx-item:hover { background: var(--primary); color: var(--text-main); }
#toasts {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 340px;
}
.toast {
    position: relative;
    background: var(--glass-heavy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 14px 20px;
    border-radius: 16px;
    border-left: 4px solid var(--primary);
    z-index: 999999;
    box-shadow: none;
    animation: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 0.9rem;
    pointer-events: none;
    word-break: break-word;
}
#msg-input::-webkit-outer-spin-button,
#msg-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#msg-input {
    width: 100%;
    max-height: 120px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: var(--font);
    line-height: 1.4;
    resize: none;
    padding: 10px 0;
    color: var(--text-main);
    margin: 0;
    height: 40px;
}
#msg-input::-webkit-scrollbar {
    display: none;
}
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .input-area {
        bottom: 12px;
        width: calc(100% - 24px);
        border-radius: 16px;
        padding: 4px 6px;
    }

    .chat-header {
        width: calc(100% - 24px);
        max-width: none;
        height: 50px;
        gap: 6px;
    }

    .chat-header-main,
    .chat-header-controls {
        height: 50px;
    }

    .chat-header-main {
        padding: 0 8px;
    }

    .chat-header-profile {
        gap: 7px;
    }

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

    .chat-header-controls {
        padding: 0 4px;
    }

    .chat-header-controls .btn-icon,
    .chat-header-menu {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
    #msg-input {
        font-size: 16px; 
        height: 38px;
        padding: 9px 0;
    }
    .input-area .btn-icon,
    #btn-send,
    .action-btn-container {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }
}
.mobile-visible { display: none; }
#btn-send {
    background: var(--primary); 
    color: var(--text-main);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    opacity: 1;
    padding: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}
#btn-send:hover {
    transform: scale(1.05);
    
}

#btn-send:active {
    transform: scale(0.95);
}
#btn-send svg, 
#btn-send .icon {
    stroke: var(--text-main);
    fill: none;
    width: 18px;
    height: 18px;
    margin: 0;
}
@media (max-width: 599px), (max-height: 499px) {
    .mobile-visible { display: flex; }
    .hidden-desktop { display: flex; }
    .tabs { display: none; }
    .sidebar-header .btn-icon:last-child { display: none; }
    .bottom-nav {
        position: fixed;
        bottom: 12px;
        left: 12px;
        right: 12px;
        width: auto;
        height: 65px;
        
        background: var(--glass-heavy);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        
        border: 1px solid var(--glass-border);
        border-radius: 16px;
        
        justify-content: space-around;
        align-items: center;
        z-index: 100; 
        padding: 0;
        box-shadow: none;
    }
    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 100%;
        color: var(--text-sec);
        transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
        cursor: pointer;
        position: relative;
    }

    .nav-item .icon {
        width: 26px;
        height: 26px;
        margin-bottom: 4px;
        stroke-width: 2;
    }

    .nav-item span {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.3px;
    }
    .nav-item.active {
        color: var(--primary);
    }
    
    .nav-item.active .icon {
        stroke: var(--primary);
        fill: var(--text-sec);
    }
    .nav-item:active {
        transform: scale(0.95);
    }
    .list-container {
        padding-bottom: 90px;
    }
    #list-search {
        bottom: 80px;
    }
    .nav-badge {
        position: absolute;
        top: -2px;
        right: -4px;
        background: var(--danger);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid var(--bg-body);
    }
}
@media (max-width: 799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse), (max-height: 499px) {
    #view-app { grid-template-columns: 1fr; }
    .sidebar { width: 100%; border-right: none; }
    .chat-area { position: absolute; inset: 0; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); z-index: 50; background: var(--bg-body); height: 100%; }
    .chat-area.active { transform: translateX(0); }
    #btn-back { display: flex; }
}
@media (min-width: 632px) and (max-width: 799px) and (min-height: 500px) {
    #view-app { grid-template-columns: 72px 1fr; }
    .chat-area { left: 72px; }
}
.settings-group {
    background: var(--surface-raised);
    border-radius: 12px;
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    height: 48px;
    border-bottom: 1px solid var(--border);
}

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

.setting-label { font-size: 0.95rem; color: var(--text-main); }
.select-clean {
    appearance: none; -webkit-appearance: none;
    background: transparent;
    border: none;
    font-size: 0.95rem;
    color: var(--primary);
    font-weight: 500;
    text-align: right;
    padding-right: 20px;
    background-image: var(--select-caret);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 10px;
    cursor: pointer;
}
.invite-badge {
    background: var(--surface-raised);
    color: var(--primary);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    cursor: pointer;
    font-weight: 500;
    width: 100%;
    justify-content: center;
}
.blocked-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    background: var(--bg-body);
}

.banned-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 20px;
    opacity: 0.8;
    filter: none;
}

.banned-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; color: var(--text-main); }
.banned-text { font-size: 0.95rem; color: var(--text-sec); line-height: 1.5; font-style: italic; max-width: 300px; }
.no-result img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 10px;
    opacity: 0.5;
}
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #list-search {
        top: 170px;
        bottom: 0;
        height: auto;
        border-radius: 0;
    }
}
.msg-system {
    width: 100%;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sys-badge, .date-badge {
    pointer-events: auto;
    cursor: pointer;
    color: var(--text-sec);
    background: var(--surface-raised);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
    transition: transform 0.2s;
}
.date-badge:active { transform: scale(0.95); }
.sys-avatar-prev {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 8px;
    border: 2px solid var(--border);
    
}
.desc-input {
    width: 100%;
    border: none;
    background: transparent;
    text-align: center;
    color: var(--text-sec);
    font-family: inherit;
    font-size: 0.9rem;
    resize: none;
    padding: 5px;
    margin-bottom: 10px;
}
.desc-input:disabled {
    opacity: 1;
    background: transparent;
}
.desc-input:not(:disabled) {
    background: rgba(0,0,0,0.05);
    border-radius: 8px;
    color: var(--text-main);
}

.no-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 40px;
    width: 100%;
}

.no-result img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 15px;
    opacity: 0.6;
}
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #list-search {
        top: 170px; 
        bottom: 0;
        height: auto;
        background: var(--bg-body);
        z-index: 40;
    }
}

.desc-textarea {
    width: 100%;
    min-height: 60px;
    border: 1px solid transparent;
    background: transparent;
    text-align: center;
    color: var(--text-sec);
    font-family: inherit;
    font-size: 0.95rem;
    resize: none;
    padding: 8px;
    margin: 10px 0;
    border-radius: 12px;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.desc-textarea:not(:disabled) {
    background: var(--surface-raised); 
    color: var(--text-main);
}
.desc-textarea:focus {
    background: var(--bg-surface);
    border-color: var(--primary);
}
.msg-img {
    display: block;
    max-width: 100%;
    max-height: 350px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    cursor: pointer;
    background: rgba(0,0,0,0.05);
}
.msg-video-wrap {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    max-height: 220px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-raised);
    cursor: pointer;
    flex-shrink: 0;
}
.msg-video-wrap:active { opacity: 0.85; }
.bubble.media-bubble {
    padding: 3px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 20px;
    background: transparent;
    max-width: min(100%, 320px);
    width: 100%;
}
.bubble.media-bubble .msg-img {
    width: 100%;
    border-radius: 17px;
    max-height: 280px;
    object-fit: cover;
}
.bubble.media-bubble .msg-content {
    padding: 8px 12px;
    display: block;
}
.bubble.media-bubble .meta {
    padding: 0 12px 8px;
    margin-left: 0;
    margin-top: 0;
}
.bubble.media-bubble .msg-caption {
    padding: 8px 12px;
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.4;
}
.msg-row.own .bubble.media-bubble { background: var(--msg-out-grad); }
.msg-row:not(.own) .bubble.media-bubble { background: var(--msg-in); }
.msg-row.own .bubble.media-bubble .msg-content {
    color: var(--text-main);
}
.msg-row.own .bubble.media-bubble .meta {
    color: var(--text-sec);
}
.msg-row.own .bubble.media-bubble .msg-caption {
    color: var(--text-main);
}
.img-wrapper {
    position: relative; 
    display: inline-block; 
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
}
.fwd-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--surface-raised);
    border-radius: 10px;
    padding: 7px 10px;
    margin-bottom: 6px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-left: 3px solid var(--primary);
    transition: background 0.15s;
}
.fwd-block:active { background: var(--surface-raised); }
.fwd-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.fwd-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fwd-author {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--primary);
    line-height: 1.2;
}

.fwd-date {
    font-size: 0.7rem;
    color: var(--text-sec);
}
.fwd-text-preview {
    font-size: 0.9rem;
    color: var(--text-main);
    margin-top: 2px;
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.type-switch {
    background: var(--surface-raised);
    padding: 2px;
    border-radius: 8px;
    display: flex;
    width: 100%;
    margin-bottom: 15px;
}

.type-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 6px 0;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.type-btn.active {
    background: var(--bg-surface);
    
    font-weight: 600;
}
.info-banner {
    position: relative;
    margin: 0 16px 16px;
    padding: 16px;
    background: var(--hover);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}
.info-shine {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--surface-raised);
    transform: translateX(-100%);
    transition: transform 0.8s;
    pointer-events: none;
    z-index: 1;
}

.info-banner:hover {
    transform: translateY(-2px) scale(1.01);
}

.info-banner:hover .info-shine {
    transform: translateX(100%);
}

.info-icon-box {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: var(--surface-raised);
    border-radius: 14px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        none;
        
    color: var(--text-main);
    z-index: 2;
}

.info-icon-box .icon {
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
    filter: none;
}

.info-content {
    flex: 1;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2px;
    letter-spacing: -0.02em;
}

.version-badge {
    font-size: 9px;
    background: var(--surface-raised);
    color: var(--primary);
    padding: 4px 8px;
    border-radius: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-desc {
    font-size: 13px;
    color: var(--text-sec);
    line-height: 1.35;
    font-weight: 400;
}

.banned-content {
    text-align: center; max-width: 400px; padding: 40px;
    color: var(--text-main);
}

.banned-icon {
    width: 120px; height: 120px; object-fit: contain;
    margin-bottom: 30px; opacity: 0.9;
    filter: none;
}

.banned-title {
    font-size: 2rem; font-weight: 600; margin-bottom: 20px;
    letter-spacing: -1px;
}

.banned-quote {
    font-size: 1.1rem; line-height: 1.6; font-style: italic;
    color: var(--text-sec); margin-bottom: 40px;
    border-left: 2px solid var(--danger); padding-left: 15px;
    text-align: left;
}

.banned-timer {
    font-family: monospace; font-size: 0.9rem; color: var(--danger);
    margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px;
}

.btn-logout {
    padding: 12px 30px; border-radius: 16px; font-size: 1rem;
    background: transparent; border: 1px solid var(--border);
    color: var(--text-main); transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease; width: 100%;
}
.btn-logout:hover {
    background: var(--danger); border-color: var(--danger);
    
}
.banned-content {
    text-align: center; max-width: 400px; padding: 40px;
}

.banned-icon {
    width: 100px; height: 100px; margin-bottom: 20px;
    filter: none;
}

.banned-title { font-size: 2rem; font-weight: 600; margin-bottom: 10px; }
.banned-quote { font-style: italic; color: var(--text-sec); margin-bottom: 30px; line-height: 1.5; }
.banned-timer { font-family: monospace; color: var(--danger); margin-bottom: 20px; font-size: 1.2rem; }
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--surface-raised);
    color: var(--text-sec);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 6px;
    border: 1px solid var(--border);
    user-select: none;
    vertical-align: middle;
    height: 18px;
}

.admin-badge::before {
    content: "✓";
    font-weight: 600;
    display: inline-block;
}

#view-banned {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-main);
}
.banned-content { text-align: center; padding: 20px; }
.banned-title { font-size: 2rem; font-weight: bold; margin: 10px 0; }
.banned-timer { color: var(--danger); font-family: monospace; font-size: 1.2rem; margin: 20px 0; }
.hidden {
    display: none;
}
.verify-text {
    color: var(--text-sec);
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    padding: 10px;
    border-radius: 8px;
}
.code-input {
    letter-spacing: 10px;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    color: var(--primary);
}
@media (min-width: 769px) and (pointer:fine), (min-width: 769px) and (min-height:501px), (min-width: 769px) and (min-width:1025px) {
    #modal-menu .modal {
        width: 300px;
        position: absolute;
        top: 60px;
        left: 70px;
        margin: 0;
        height: auto;
        border-radius: 16px;
    }
    .mobile-profile-header { display: none; }
}
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #modal-menu .modal {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        padding: 0;
        background: var(--bg-body);
        display: flex;
        flex-direction: column;
    }
    .menu-scroll-container {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translate3d(0, 0, 0);
    will-change: scroll-position;
    overflow-y: auto;
    height: 100%; 
    }
    .mobile-profile-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--glass-bg);
        backdrop-filter: none;
        transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
        border-bottom: 1px solid transparent;
        overflow: hidden;
        height: 350px; 
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 20px;
    }
    .mp-avatar-bg {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
    }
    .mp-overlay {
        position: absolute;
        inset: 0;
        background: var(--surface-raised);
        z-index: 2;
        transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    }
    .mp-info {
        position: relative;
        z-index: 3;
        padding: 0 20px;
        color: var(--text-main);
        transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
        transform-origin: left bottom;
    }

    .mp-name {
        font-size: 32px;
        font-weight: 600;
        line-height: 1.1;
        text-shadow: none;
    }

    .mp-handle {
        font-size: 18px;
        opacity: 0.9;
        margin-top: 5px;
        font-weight: 600;
    }
    
    .mp-numeric {
        font-size: 12px;
        opacity: 0.6;
        margin-top: 2px;
        font-family: monospace;
        letter-spacing: 1px;
    }

    .mp-bio {
        margin-top: 10px;
        font-size: 14px;
        opacity: 0.8;
        line-height: 1.4;
        max-height: 60px;
        overflow: hidden;
        transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    }
    .mobile-profile-header.shrunk {
        height: 80px;
        background: var(--glass-heavy);
        border-bottom: 1px solid var(--glass-border);
        justify-content: center;
        padding-bottom: 0;
    }

    .mobile-profile-header.shrunk .mp-avatar-bg {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        top: 15px;
        left: 20px;
        opacity: 1;
    }

    .mobile-profile-header.shrunk .mp-overlay { opacity: 0; }

    .mobile-profile-header.shrunk .mp-info {
        padding-left: 85px;
        color: var(--text-main);
    }

    .mobile-profile-header.shrunk .mp-name { font-size: 18px; text-shadow: none; }
    .mobile-profile-header.shrunk .mp-handle { font-size: 14px; color: var(--text-sec); }
    .mobile-profile-header.shrunk .mp-bio { opacity: 0; height: 0; margin: 0; }
    .mobile-profile-header.shrunk .mp-numeric { display: none; }
}
.settings-list {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    margin-top: 20px;
}

.settings-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 16px;
    color: var(--text-main);
}
.settings-item:last-child { border-bottom: none; }

.settings-icon {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--primary);
    color: var(--text-main);
    display: flex; align-items: center; justify-content: center;
}

.arrow-right { margin-left: auto; opacity: 0.3; }
.settings-section-title {
    padding: 20px 16px 8px;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--text-sec);
    font-weight: 600;
}

.settings-input-group {
    background: var(--glass-bg);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 16px;
}

.setting-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    height: 50px;
}
.setting-row input {
    text-align: right;
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--primary);
}

@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .mobile-profile-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--bg-body);
        height: 320px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 20px;
        overflow: hidden;
        transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
        border-bottom: 1px solid transparent;
        flex-shrink: 0;
    }
    
    .mp-overlay {
        position: absolute;
        inset: 0;
        background: var(--surface-raised);
        transition: opacity 0.3s;
    }

    .mp-info {
        position: relative;
        z-index: 5;
        transform-origin: left bottom;
        transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
        color: var(--text-main);
    }

    .mp-name { font-size: 28px; font-weight: 600; line-height: 1.1; margin-bottom: 4px; }
    .mp-handle { font-size: 16px; opacity: 0.8; }
    .mp-numeric { font-size: 12px; opacity: 0.6; font-family: monospace; margin-bottom: 8px; }
    .mp-bio { font-size: 14px; opacity: 0.9; line-height: 1.4; max-height: 60px; overflow: hidden; }
    .mobile-profile-header.shrunk {
        height: 70px;
        background: var(--glass-heavy);
        backdrop-filter: none;
        padding: 0 16px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        border-bottom: 1px solid var(--border);
    }
    .mobile-profile-header.shrunk .mp-avatar-bg {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
        margin-right: 12px;
        inset: auto;
        border: 1px solid rgba(0,0,0,0.1);
    }

    .mobile-profile-header.shrunk .mp-overlay { opacity: 0; }
    .mobile-profile-header.shrunk .mp-info {
        color: var(--text-main);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
    }

    .mobile-profile-header.shrunk .mp-name { font-size: 16px; margin: 0; }
    .mobile-profile-header.shrunk .mp-handle { font-size: 13px; color: var(--text-sec); opacity: 1; }
    .mobile-profile-header.shrunk .mp-numeric,
    .mobile-profile-header.shrunk .mp-bio { 
        display: none; 
    }
}
.wallpaper-preview {
    height: 100px;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s;

}
.wallpaper-preview:hover {
    transform: scale(1.05);
    border-color: var(--primary);
}
.wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 10px 0;
}
.switch-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 44px;
    flex-shrink: 0;
}
.switch-toggle input {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 8px; left: 0; right: 0; bottom: 8px;
    background-color: var(--border);
    border: 1px solid var(--border);
    transition: background-color 160ms ease, border-color 160ms ease;
    border-radius: 16px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 2px;
    bottom: 2px;
    background-color: #fff;
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
}
.switch-toggle input:checked + .slider {
    background-color: var(--primary);
    border-color: var(--primary);
}

.switch-toggle input:checked + .slider:before {
    transform: translateX(20px);
}
.switch-toggle input:focus-visible + .slider { outline: 2px solid var(--primary); outline-offset: 3px; }
.switch-toggle:has(input:disabled) { opacity: .55; }
.switch-toggle input:disabled { cursor: default; }
@media (prefers-reduced-motion: reduce) { .switch-toggle .slider, .switch-toggle .slider:before { transition: none; } }

.pinned-icon {
    font-size: 0;
    color: transparent;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 16px;
    right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238A8A8E'%3E%3Cpath d='M16,12V4H17V2H7V4H8V12L6,14V16H11V22H13V16H18V14L16,12Z' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: rotate(45deg);
    opacity: 0.8;
    z-index: 10;
}
@media (prefers-color-scheme: dark) {
    .list-item.pinned {
        background: transparent;
        border-bottom: 1px solid var(--border);
    }
}
.list-item.pinned {
    background: transparent;
    background-image: none;
    box-shadow: none;
    border-bottom: 1px solid var(--border);
}
.list-item.pinned .chat-item-name,
.list-item.pinned .bold {
    color: var(--text-main);
}

.list-item.pinned .text-sec {
    color: var(--text-sec);
}
.reaction-panel-desktop {
    position: absolute;
    top: -45px;
    right: 0;
    
    background: var(--glass-heavy);
    backdrop-filter: none;
    padding: 6px;
    border-radius: 16px;
    display: flex;
    gap: 6px;
    opacity: 0;
    visibility: hidden; 
    transform: translateY(10px) scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.2s;
    
    z-index: 1001;
    border: 1px solid var(--glass-border);
}
.bubble:hover .reaction-panel-desktop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.msg-row:not(.own) .reaction-panel-desktop {
    right: auto;
    left: 0;
}
.msg-row:hover .reaction-panel-desktop {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.msg-row:not(.own) .reaction-panel-desktop {
    right: auto;
    left: 100%;
    margin-left: 10px;
    top: 50%;
    transform: translateY(-50%) scale(0.9);
}
.msg-row:not(.own):hover .reaction-panel-desktop {
    transform: translateY(-50%) scale(1);
}

.react-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.react-btn:hover { background: rgba(0,0,0,0.1); transform: scale(1.2); }
.reactions-display {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
}
.msg-row:not(.own) .reactions-display { justify-content: flex-start; }

.reaction-chip {
    background: var(--glass-heavy);
    border: 1px solid var(--glass-border);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex; align-items: center; gap: 4px;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.msg-row.own .reaction-chip {
    background: var(--hover);
    border: none;
    color: var(--text-main);
}
.msg-row:not(.own) .reaction-chip {
    background: var(--surface-raised);
    border: 1px solid rgba(0,0,0,0.05);
}
.bubble.transparent-media {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
    border-radius: 0; 
}
.bubble.transparent-media .meta {
    background: rgba(0,0,0,0.4);
    padding: 2px 6px;
    border-radius: 10px;
    color: var(--text-main);
    position: absolute;
    bottom: 10px;
    right: 10px;
    margin: 0;
    pointer-events: none;
}
.bubble.transparent-media .tick-icon {
    color: var(--text-main);
}
.reaction-chip.active {
    background: var(--surface-raised);
    border-color: var(--primary);
    color: var(--primary);
}
.reaction-chip:hover { transform: scale(1.05); }
.mobile-react-menu {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 15px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.ctx-actions-list {
    display: flex;
    flex-direction: column;
    padding: 5px;
    background: var(--glass-heavy);
    border-radius: 0 0 16px 16px;
}
.mobile-react-btn {
    font-size: 26px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-raised);
    transition: transform 0.2s;
}
.mobile-react-btn:active {
    transform: scale(1.2);
    background: var(--surface-raised);
}
.btn-clean {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    outline: none;
}
.btn-clean:active {
    background: var(--hover);
    transform: scale(0.9);
}
#modal-forward {
    z-index: 25000;
    background: rgba(0, 0, 0, 0.6);
}
.btn-clean svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2px;
}
.share-btn-icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--primary);
    stroke-width: 1.5px;
    fill: none;
}
.share-top-actions {
    padding-top: 10px;
}
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
}
.emoji-item {
    font-size: 24px;
    cursor: pointer;
    text-align: center;
    padding: 5px;
    border-radius: 8px;
}
.emoji-item:hover { background: rgba(0,0,0,0.1); }

.react-avatars {
    display: flex;
    align-items: center;
    margin-left: 4px;
}

.react-mini-av {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    margin-left: -4px;
}
.react-mini-av:first-child {
    margin-left: 0;
}
.reaction-chip {
    padding: 2px 6px;
    gap: 2px;
}
.msg-ticks {
    display: inline-flex;
    vertical-align: bottom;
    margin-left: 4px;
    opacity: 0.8;
}

.tick-icon {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.prev-ticks {
    display: inline-flex;
    align-items: center;
    margin-right: 2px;
    flex-shrink: 0;
}
.prev-ticks .tick-icon { width: 13px; height: 13px; }
.tick-sent { color: var(--text-sec); }
.tick-read { color: var(--success); }
.msg-row.own .tick-sent {
    color: var(--text-sec);
    opacity: 1;
    filter: none;
}
@media (min-width: 1024px) {
    .msg-row {
        max-width: 45%;
    }
    .chat-area {
        max-width: 1600px;
        margin: 0 auto;
        border-left: 1px solid var(--glass-border);
        border-right: 1px solid var(--glass-border);
    }
}

.msg-row.own .tick-read {
    color: var(--text-main);
    opacity: 1;
    filter: none;
}
.msg-row:not(.own) .tick-read {
    color: var(--primary);
}
.msg-row:not(.own) .tick-sent {
    color: var(--text-sec);
}
.typing-indicator {
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 2px;
    animation: none;
}
.typing-dot {
    width: 3px; height: 3px; background: var(--primary); border-radius: 50%;
    animation: typingBounce 1s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.msg-content b { font-weight: 600; }
.msg-content i { font-style: italic; }

.msg-expand-btn {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}
.bubble .msg-expand-btn {
    color: inherit;
    opacity: 1;
    text-shadow: none;
}
.msg-content.msg-collapsed {
    max-height: 260px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
.fmt-quote {
    display: inline-block;
    border-left: 3px solid var(--primary);
    background: var(--surface-raised);
    padding: 2px 8px;
    border-radius: 4px;
    font-style: italic;
    color: var(--text-sec);
    margin: 2px 0;
}
.msg-row.own .fmt-quote {
    background: var(--hover);
    border-left-color: var(--border);
    color: var(--text-sec);
}
#pinned-bar {
    position: absolute;
    top: calc(70px + env(safe-area-inset-top, 0px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 800px;
    box-sizing: border-box;
    height: auto;
    min-height: 50px;
    z-index: 999;
    
    background: var(--glass-heavy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    cursor: pointer;
}

#pinned-bar.hidden { display: none; }

#pinned-bar .pinned-line {
    width: 3px;
    height: 34px;
    flex: 0 0 3px;
    border-radius: 16px;
    background: var(--primary);
}

@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse), (pointer: coarse) {
    .reaction-panel-desktop {
        display: none;
    }
}

.msg-row.send-failed .bubble {
    outline: 1px solid var(--danger);
}
.msg-row.send-failed .msg-ticks,
.msg-row[data-send-status="sending"] .msg-ticks { display: none; }

.message-send-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 2px 8px;
    padding: 3px 4px 0;
    color: var(--text-sec);
    font-size: 12px;
}
.message-retry-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    max-width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 12px;
    background: var(--surface-raised);
    color: var(--primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.message-retry-button svg { width: 16px; height: 16px; flex: 0 0 16px; }
.message-retry-button:hover { background: var(--accent-subtle); }
.message-retry-button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.message-retry-button:disabled { cursor: wait; color: var(--text-sec); }

.msg-row.album-member-marker {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .messages {
        scroll-behavior: auto;
    }

    .msg-row,
    .bubble,
    .reaction-panel-desktop {
        animation: none;
        transition-duration: 0.01ms;
    }
}
#pinned-bar .pinned-icon-area {
    width: 3px;
    height: 34px;
    background: var(--primary);
    border-radius: 3px;
    margin: 0;
    flex-shrink: 0;
    display: block;
}
#pinned-bar .pinned-icon-area svg,
#pinned-bar .pinned-icon-area .icon { display: none; }
#pinned-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
}

#pinned-title, #pinned-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 2px;
    line-height: 1.2;
}

#pinned-text {
    font-size: 13px;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}
#btn-unpin {
    width: 26px;
    height: 26px;
    background: var(--surface-raised);
    border: none;
    display: flex;
    align-items: center;
    border-radius: 50%;
    justify-content: center;
    cursor: pointer;
    margin-left: auto;
    color: var(--text-sec);
    opacity: 0.6;
    transition: opacity 0.2s;
}
#btn-unpin:hover { opacity: 1; }
#btn-unpin svg { width: 20px; height: 20px; stroke-width: 1.5; }
.unread-badge {
    background-color: var(--primary);
    color: var(--text-main);
    font-size: 11px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    margin-left: 8px;
    flex-shrink: 0;

}
.unread-badge {
    animation: none;
}
#typing-preview-row .bubble {
    backdrop-filter: none;
    border-color: var(--primary);
}
.unread-badge {
    background-color: var(--surface-raised);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    margin-left: 8px;
    flex-shrink: 0;

    animation: none;
}
.unread-badge.muted {
    background-color: var(--text-sec);
    box-shadow: none;
}

@keyframes popIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}
#modal-incoming {
    z-index: 9999;
    background: rgba(0,0,0,0.8);
}

#modal-incoming .modal {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 30px;
    width: 300px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#modal-incoming .avatar {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    border: 2px solid var(--border);
}
#inc-name {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-main);
    text-shadow: none;
    margin-bottom: 10px;
    text-align: center;
}
#inc-type {
    font-size: 16px;
    color: var(--text-sec);
    margin-bottom: 40px;
    text-align: center;
}
.btn-incoming {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-main);
    border: none;
}
.btn-incoming.decline { background: var(--surface-raised); }
.btn-incoming.accept { background: var(--surface-raised); }
.incoming-actions {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
}

.btn-incoming {
    width: 70px; 
    height: 70px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: 1.8rem;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    color: var(--text-main);
}

.btn-incoming.decline {
    background: var(--surface-raised);

}

.btn-incoming.accept {
    background: var(--surface-raised);

}

.btn-incoming:active { transform: scale(0.9); }
#btn-record {
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    overflow: hidden;
}
#btn-record.recording {
    transform: scale(1.2);
    color: var(--danger);
    background: var(--surface-raised);
    border-radius: 50%;
}
#record-timer {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--danger);
    color: var(--text-main);
    padding: 5px 12px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: none;
    z-index: 100;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}
.msg-audio-custom {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 8px;
    min-width: 220px;
    max-width: 280px;
    user-select: none;
    background: transparent;
}

.audio-control-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--text-main);
    transition: transform .12s, opacity .12s;

}
.audio-control-btn:active { transform: scale(.92); }
.msg-row.own .audio-control-btn {
    background: var(--hover);
    color: var(--primary);

}

.audio-track {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.audio-waveform-canvas {
    width: 100%;
    height: 32px;
    display: block;
    border-radius: 2px;
}

.audio-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.audio-time-label {
    font-size: 11px;
    font-weight: 600;
    opacity: .7;
    letter-spacing: .2px;
    font-variant-numeric: tabular-nums;
}

.audio-speed-btn {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    background: var(--surface-raised);
    border-radius: 10px;
    padding: 1px 6px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}
.msg-row.own .audio-speed-btn {
    color: var(--text-main);
    background: var(--hover);
}

.msg-video-circle {
    width: 195px;
    height: 190px;
    position: relative;
    border-radius: 50%;
    background: var(--surface-raised);
    cursor: pointer;
    flex-shrink: 0;
    margin: 2px;
}

.progress-ring {
    position: absolute;
    inset: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    z-index: 10;
    pointer-events: none;
    transform: rotate(-90deg);
}
.msg-content {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-width: 100%;
    display: block;
}
.msg-content a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    font-weight: 500;
}
.msg-content a:hover {
    border-bottom-color: var(--primary);
}
.msg-content b { font-weight: 600; }
.msg-content i { font-style: italic; }
.msg-content s { text-decoration: line-through; opacity: 0.7; }
.msg-content code {
    background: rgba(0,0,0,0.1);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}
.msg-quote {
    border-left: 3px solid var(--primary);
    background: var(--surface-raised);
    padding: 6px 10px;
    border-radius: 0 4px 4px 0;
    margin: 4px 0;
    color: var(--text-sec);
    font-size: 0.95em;
}
.msg-buttons button:hover {
    background: var(--hover);
}
.msg-row.own .msg-buttons button {
    background: rgba(0,0,0,0.1);
    border-color: rgba(0,0,0,0.1);
}
.msg-row:not(.own) .msg-buttons button {
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-main);
}
.admin-badge {
            background: var(--primary);
            color: var(--text-main);
            font-size: 9px;
            padding: 2px 6px;
            border-radius: 4px;
            margin-left: 6px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            flex-shrink: 0;
            vertical-align: middle;
        }
code.copyable {
        background: var(--surface-raised);
        color: var(--primary);
        padding: 4px 8px;
        border-radius: 6px;
        font-family: monospace;
        cursor: pointer;
        transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
        border: 1px dashed var(--border);
    }
    code.copyable:hover {
        background: var(--surface-raised);
        transform: scale(1.02);
    }
    code.copyable:active {
        transform: scale(0.98);
    }
.msg-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
}
.btn-row {
    display: flex;
    gap: 5px;
    width: 100%;
}
.bot-btn {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--hover);
    color: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    backdrop-filter: none;
    border: 1px solid var(--border);
}
.bot-btn:hover {
    background: var(--hover);
    transform: translateY(-1px);
}
.bot-btn:active {
    transform: scale(0.98);
}
.bot-btn.link::after {
    content: ' ↗';
    font-size: 10px;
    opacity: 0.7;
}
.badge-tech {
    background: var(--surface-raised);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.code-block {
    background: var(--surface-raised);
    color: var(--text-sec);
    padding: 16px;
    border-radius: 12px;
    position: relative;
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    overflow-x: auto;
    border: 1px solid var(--border);
}

.code-block.small {
    padding: 12px;
    font-size: 12px;
}

.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--hover);
    border: none;
    color: var(--text-main);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.copy-btn:hover { background: var(--hover); }

.api-method {
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    background: var(--bg-secondary);
}

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

.method-verb {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.method-verb.post { background: var(--surface-raised); color: var(--text-main); }
.method-verb.get { background: var(--surface-raised); color: var(--text-main); }

.method-url {
    font-family: monospace;
    font-weight: 600;
    color: var(--text-main);
}

.method-desc {
    font-size: 13px;
    color: var(--text-sec);
    margin-bottom: 12px;
}

.params-table {
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 10px;
    border-left: 2px solid var(--border);
}

.param-name { font-family: monospace; color: var(--primary); font-weight: 600; }
.param-type { font-size: 11px; color: var(--text-sec); background: rgba(0,0,0,0.05); padding: 1px 4px; border-radius: 4px; margin-right: 6px; }
.cmd-link {
    color: var(--primary);
    cursor: pointer;
    font-weight: 500;
}
.cmd-link:hover {
    text-decoration: underline;
}
.bot-start-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 30px;
    text-align: center;
    background: var(--bg-body);
}
.bot-start-img {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    margin-bottom: 20px;
    object-fit: cover;
}
.bot-start-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}
.bot-start-desc {
    color: var(--text-sec);
    font-size: 15px;
    line-height: 1.5;
    max-width: 400px;
    margin-bottom: 30px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}
.btn-start-big {
    background: var(--primary);
    color: var(--text-main);
    font-size: 16px;
    padding: 14px 40px;
    border-radius: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.btn-start-big:hover { transform: scale(1.05); }
.date-divider {
    position: sticky;
    top: 8px;
    z-index: 50;
    pointer-events: none;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px 0;
}
#float-date-indicator {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    pointer-events: none;
    background: rgba(0,0,0,0.52);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 12px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
.calendar-container {
    width: 100%;
    padding: 10px;
}
.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.cal-title {
    font-weight: 600;
    font-size: 17px;
    text-transform: capitalize;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    justify-items: center;
}

.cal-day-name {
    font-size: 13px;
    color: var(--text-sec);
    font-weight: 500;
    margin-bottom: 10px;
}

.cal-day {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.2s;
    color: var(--text-main);
}

.cal-day:hover {
    background: var(--bg-secondary);
}

.cal-day.active {
    background: var(--primary);
    color: var(--text-main);
    font-weight: 600;
}

.cal-day.empty-slot { background: transparent; cursor: default; }
.cal-day.empty { opacity: 0.3; cursor: not-allowed; }
.cal-day.has-messages {
    background: var(--surface-raised);
    color: var(--primary);
    font-weight: 600;
}
.cal-day.has-messages:active { background: var(--surface-raised); }
.msg-buttons {
    display: flex; flex-direction: column; gap: 8px; margin-top: 10px; width: 100%;
}
.btn-row {
    display: flex; gap: 8px; width: 100%;
}
.bot-btn {
    flex: 1;
    background: var(--surface-raised);
    color: var(--primary);
    border: 1px solid var(--border);
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.bot-btn:active { background: var(--surface-raised); transform: scale(0.98); }
.bot-btn.link { text-decoration: none; }
#reply-keyboard-area {
    position: absolute;
    bottom: 85px;
    left: 0; 
    width: 100%;
    
    background: transparent;
    padding: 0 10px;
    
    display: none;
    flex-direction: column;
    gap: 6px;
    
    z-index: 80;
    transform-origin: bottom;
    animation: none;
    pointer-events: none;
}
#reply-keyboard-area.visible {
    display: flex;
}
.reply-row {
    display: flex;
    gap: 6px;
    width: 100%;
    pointer-events: auto;
}
.reply-btn {
    flex: 1;
    background: var(--hover);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    
    color: var(--text-main);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    
    padding: 12px 10px;
    border: none;
    border-radius: 12px;
    

    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-btn:active {
    transform: scale(0.96);
    background: var(--hover);
}

#view-onboarding {
    position: fixed; inset: 0;
    background: var(--surface-raised);
    z-index: 5000;
    display: flex; align-items: center; justify-content: center;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}

@media (min-width: 768px) and (pointer:fine), (min-width: 768px) and (min-height:501px), (min-width: 768px) and (min-width:1025px) {
    #view-onboarding {
        background: var(--surface-raised);
        backdrop-filter: none;
    }
}

.onb-card {
    width: 100%; max-width: 440px;
    height: 100%;
    background: var(--surface-raised);
    display: flex; flex-direction: column;
    padding: 40px 30px;
    overflow-y: auto;
    position: relative;
}

@media (min-width: 768px) and (pointer:fine), (min-width: 768px) and (min-height:501px), (min-width: 768px) and (min-width:1025px) {
    .onb-card {
        height: auto; min-height: 600px;
        border-radius: 16px;
        box-shadow: none;
        border: 1px solid rgba(0,0,0,0.05);
    }
}
.onb-step {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: 100%;
}

.onb-logo-anim {
    margin-top: 60px;
    margin-bottom: 40px;
    animation: none;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.onb-logo-img { width: 120px; height: auto; }

.onb-title {
    font-size: 32px; font-weight: 600; color: var(--text-sec);
    text-align: center; margin-bottom: 15px; letter-spacing: -0.5px;
}

.onb-desc {
    font-size: 17px; color: var(--text-sec); text-align: center;
    line-height: 1.5; max-width: 320px; margin-bottom: 40px;
}
.onb-avatar-preview {
    position: relative; width: 140px; height: 140px;
    margin-bottom: 30px;
}
#onb-user-avatar {
    width: 100%; height: 100%; border-radius: 50%;
    object-fit: cover;

    border: 4px solid var(--border);
}
.onb-cam-icon {
    position: absolute; bottom: 5px; right: 5px;
    width: 44px; height: 44px;
    background: var(--primary);
    color: var(--text-main); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--border); cursor: pointer;
    transition: transform 0.2s;
    box-shadow: none;
}
.onb-cam-icon:active { transform: scale(0.9); }
.onb-cam-icon .icon { width: 20px; height: 20px; stroke-width: 2.5; stroke: var(--text-main); fill: none; }
.onb-presets-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px;
    margin-bottom: 30px; padding: 5px;
}
.onb-preset {
    width: 56px; height: 56px; border-radius: 50%;
    cursor: pointer; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    border: 2px solid transparent;
}
.onb-preset:hover { transform: scale(1.1); }
.onb-preset.selected {
    border-color: var(--primary);
    transform: scale(1.1);

}
.onb-input-group { width: 100%; margin-bottom: 15px; }
.onb-label {
    display: block; font-size: 13px; font-weight: 600; color: var(--text-sec);
    margin-bottom: 6px; margin-left: 12px; text-transform: uppercase; letter-spacing: 0.5px;
}
.onb-input {
    background: var(--surface-raised); border: none; border-radius: 16px;
    height: 56px; font-size: 17px; padding: 0 20px; color: var(--text-main);
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.onb-input:focus { background: var(--surface-raised); transform: translateY(-1px); }
.onb-settings {
    background: var(--surface-raised); border-radius: 20px; overflow: hidden;
    margin: 0 10px; width: 100%;
}
.onb-settings .setting-row {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 16px 20px; height: auto;
}
.onb-settings span { font-size: 16px; font-weight: 500; color: var(--text-sec); }
.onb-shield-icon {
    width: 100px; height: 100px;
    background: var(--surface-raised);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: 40px; margin-bottom: 20px;
    color: var(--success);
}
.onb-shield-icon .icon { width: 50px; height: 50px; stroke-width: 1.5; }
.onb-bottom { margin-top: auto; width: 100%; padding-top: 30px; display: flex; flex-direction: column; gap: 12px; }
.onb-btn {
    height: 56px; border-radius: 18px; font-size: 17px; font-weight: 600;

    transition: transform 0.2s, box-shadow 0.2s;
}
.onb-btn:active { transform: scale(0.98); }
.onb-btn-sec { color: var(--primary); font-size: 17px; height: 50px; }
#view-onboarding { color: var(--text-main); }
.action-btn-container {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
}
.btn-anim {
    position: absolute;
    inset: 0;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-anim.visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    pointer-events: auto;
}
.btn-anim.hidden-state {
    opacity: 0;
    transform: scale(0.01) rotate(90deg);
    pointer-events: none;
}
.icon-anim {
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    position: absolute;
}

.icon-anim.hidden-icon {
    opacity: 0;
    transform: translateY(10px) scale(0.5);
}

.icon-anim.visible-icon {
    opacity: 1;
    transform: translateY(0) scale(1);
}
#sticker-picker {
    position: absolute;
    bottom: 80px;
    left: 10px;
    width: 350px;
    height: 420px;
    
    background: var(--glass-heavy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    
    border: 1px solid var(--glass-border);
    border-radius: 16px;

    
    display: flex;
    flex-direction: column;
    z-index: 2000;
    overflow: hidden;
    transform-origin: bottom left;
    animation: none;
}

@keyframes stickerPop {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.sticker-header {
    padding: 12px 16px;
    background: var(--hover);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sticker-search {
    width: 100%;
    height: 36px;
    background: var(--surface-raised);
    border: none;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--text-main);
    text-align: left;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.sticker-search::placeholder { text-align: center; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease; }
.sticker-search:focus { background: var(--surface-raised); }
.sticker-search:focus::placeholder { opacity: 0; }
.sticker-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    align-content: start;
    box-sizing: border-box;
    isolation: isolate;
}
.sticker-item {
    aspect-ratio: 1 / 1;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 12px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: transparent;
    overflow: visible;
    position: relative;
    box-sizing: border-box;
    isolation: isolate;
}

.sticker-item:hover {
    transform: scale(1.15);
    z-index: 10;
    filter: none;
}

.sticker-item:active { transform: scale(0.95); }
.sticker-item img,
.sticker-item video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    padding: 3px;
    display: block;
    box-sizing: border-box;
}
.sticker-tabs {
    height: 50px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    background: var(--surface-raised);
    border-top: 1px solid var(--border);
    overflow-x: auto;
    flex-shrink: 0;
}
.sticker-tabs::-webkit-scrollbar { display: none; }

.pack-tab {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0.5;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    flex-shrink: 0;
}
.pack-tab:hover { opacity: 0.8; background: rgba(0,0,0,0.05); }
.pack-tab.active {
    opacity: 1;
    background: var(--surface-raised);
}
.pack-tab img, .pack-tab video {
    width: 24px; height: 24px; object-fit: contain;
}
.sticker-msg {
    width: 140px;
    height: 140px;
    border-radius: 0;
    object-fit: contain;
    display: block;
    background: transparent;
    box-shadow: none;
}
.msg-sticker-mp4 {
    width: 160px;
    height: 160px;
    border-radius: 20%;
    object-fit: contain;
    display: block;
    background: transparent;
    box-shadow: none;
}
.msg-sticker-png {
    width: 160px;
    height: 160px;
    border-radius: 20%;
    object-fit: cover;
    display: block;
    background: transparent;
    box-shadow: none;
}
#sticker-picker::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 5px;
    background: var(--surface-raised);
    border-radius: 5px;
    z-index: 2001;
    pointer-events: none;
}
.bubble.is-sticker {
    background: transparent;
    padding: 0;
    box-shadow: none;
    border: none;
}
.msg-video-round {
    position: relative;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-raised);
    cursor: pointer;
    flex-shrink: 0;
    transform: translateZ(0);
}
.msg-video-round video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.progress-ring-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
    z-index: 10;
}

.ring-circle {
    fill: none;
    stroke: var(--success);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 741;
    stroke-dashoffset: 741;
    transition: stroke-dashoffset 0.1s linear;
}
.vid-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.2s;
}
.msg-video-round.paused .vid-overlay {
    opacity: 1;
}

.vid-play-icon {
    width: 50px;
    height: 50px;
    fill: var(--text-main);
    filter: none;
}
.sticker-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sec);
    margin-top: 8px;
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}
#msg-input:focus {
    outline: none;
    box-shadow: none;
}
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #sticker-picker {
        width: 100%;
        left: 0;
        bottom: 65px; 
        height: 45vh;
        border-radius: 16px;
        border: none;
        border-top: 1px solid var(--glass-border);

    }
    .sticker-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        padding: 8px 10px;
        min-height: 0;
    }
    .sticker-item {
        width: 100%;
        min-width: 0;
        overflow: visible;
        aspect-ratio: 1 / 1;
        isolation: isolate;
    }
    .sticker-item img,
    .sticker-item video {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        display: block;
        object-fit: contain;
        box-sizing: border-box;
    }
    .sticker-header { padding: 16px; }
}

@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #modal-menu.modal-overlay,
    #modal-settings-profile.modal-overlay,
    #modal-settings-site.modal-overlay,
    #modal-settings-chats.modal-overlay,
    #modal-devices.modal-overlay,
    #modal-blacklist.modal-overlay {
        padding: 0;
        background: var(--bg-body);
        align-items: flex-start; 
        z-index: 99999;
    }

    #modal-menu .modal,
    #modal-settings-profile .modal,
    #modal-settings-site .modal,
    #modal-settings-chats .modal,
    #modal-devices .modal,
    #modal-blacklist .modal {
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border-radius: 0;
        border: none;
        background: var(--bg-body);
        margin: 0;
        padding: 0;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        animation: none;
    }

    @keyframes slideUpFullscreen {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}

@media (min-width: 769px) and (pointer:fine), (min-width: 769px) and (min-height:501px), (min-width: 769px) and (min-width:1025px) {
    #modal-menu.modal-overlay {
        background: rgba(0, 0, 0, 0.4);
        align-items: center;
        justify-content: center;
        padding: 0;
        backdrop-filter: none;
    }
    #modal-menu .modal,
    #modal-menu .modal-fs {
        width: 360px;
        height: auto;
        min-height: auto;
        max-height: 85vh;
        
        position: relative;
        top: auto;
        left: auto;
        margin: 0;
        
        border-radius: 16px;
        overflow: hidden;
        
        box-shadow: none;
        border: 1px solid var(--border);
        background: var(--glass-heavy);
        
        display: flex;
        flex-direction: column;
    }
    #profile-scroll::-webkit-scrollbar {
        width: 0;
        background: transparent;
    }
    #modal-menu .settings-list {
        padding-bottom: 20px;
    }
    #modal-menu .modal > div:first-child {
        flex-shrink: 0;
    }
}
.settings-modal-bg {
    background: var(--bg-body);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.menu-header-card {
    position: relative;
    padding: 30px 20px 20px 20px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.menu-avatar-large {
    width: 80px; height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;

    border: 2px solid var(--surface);
}

.menu-name-text {
    font-size: 20px; font-weight: 600;
    color: var(--text-main); margin-bottom: 2px;
}

.menu-handle-text {
    font-size: 14px; font-weight: 500;
    color: var(--primary);
    background: var(--surface-raised);
    padding: 4px 10px; border-radius: 12px;
}
.settings-group-ios {
    background: var(--surface);
    border-radius: 12px;
    margin: 0 16px 24px 16px;
    overflow: hidden;
}

.settings-row-ios {
    display: flex; align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer; text-decoration: none;
    color: var(--text-main); transition: background 0.2s;
}
.settings-row-ios:last-child { border-bottom: none; }
.settings-row-ios:active { background: var(--bg-secondary); }
.bubble-style-btn {
    flex: 1;
    padding: 10px 4px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--text-sec);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.bubble-style-btn.active { background: var(--surface-raised); color: var(--primary); }
.check-color-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.check-color-swatch {
    width: 26px; height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    box-sizing: border-box;
}
.check-color-swatch.active { border-color: var(--primary); }
.check-shape-row { display: flex; gap: 6px; }
.check-shape-btn {
    flex: 1;
    padding: 8px 4px;
    border-radius: 10px;
    border: none;
    background: var(--surface-raised);
    color: var(--text-sec);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.check-shape-btn.active { background: var(--surface-raised); color: var(--primary); }
.ios-icon-box {
    width: 30px; height: 30px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    margin-right: 12px;
    color: var(--text-main); font-size: 16px;
}
.ios-section-header {
    margin: 0 16px 8px 32px;
    font-size: 12px; text-transform: uppercase;
    color: var(--text-sec); font-weight: 600;
    letter-spacing: 0.5px;
}
.ios-nav-header {
    padding: 12px 16px;
    display: flex; align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.ios-input-group {
    background: var(--surface);
    margin: 0 16px 24px 16px;
    border-radius: 12px; overflow: hidden;
}
.ios-input-row {
    display: flex; align-items: center;
    padding: 0 16px; height: 50px;
    border-bottom: 1px solid var(--border);
}
.ios-input-row:last-child { border-bottom: none; }
.ios-input-label { width: 130px; font-weight: 500; color: var(--text-main); }
.ios-input {
    flex: 1; border: none; background: transparent;
    text-align: right; outline: none;
    color: var(--primary); font-size: 15px;
}

@keyframes slideUpKey {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
#reply-keyboard-area.visible {
    display: flex;
}
.reply-row {
    display: flex;
    gap: 6px;
    width: 100%;
}
.reply-btn {
    flex: 1;
    background: var(--hover);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    
    color: var(--text-main);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    
    padding: 10px 12px;
    border: none;
    border-radius: 8px;

    
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reply-btn:active {
    opacity: 0.7;
    transform: scale(0.98);
}
#btn-toggle-kb.hidden {
    display: none;
}
#btn-toggle-kb {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    color: var(--text-sec);
    margin-left: 4px;
}

#btn-toggle-kb:active {
    transform: scale(0.9);
}

#btn-toggle-kb.active {
    color: var(--primary);
    background: var(--surface-raised);
}
#fwd-indicator {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 800px;

    background: var(--glass-heavy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    border: 1px solid var(--glass-border);
    border-bottom: none;
    border-radius: 16px 16px 0 0;

    display: flex;
    align-items: center;
    padding: 8px 15px;
    gap: 12px;
    z-index: 90;
    animation: none;
}
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #fwd-indicator {
        bottom: 62px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 24px);
        max-width: none;
        border-radius: 14px 14px 0 0;
    }
}
#fwd-indicator.hidden {
    display: none;
}
#edit-indicator {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 800px;

    background: var(--glass-heavy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    border: 1px solid var(--glass-border);
    border-bottom: none;
    border-radius: 16px 16px 0 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    gap: 12px;
    z-index: 100;
    animation: none;
    color: var(--primary);
    font-size: 13px;
    font-weight: 500;
}

#edit-indicator.hidden {
    display: none;
}
.long-text-attachment {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 800px;
    min-height: 64px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px 8px 13px;
    z-index: 100;
    color: var(--text-main);
    background: var(--glass-heavy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--glass-border);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    animation: none;
}

.long-text-attachment-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.long-text-attachment-icon svg {
    width: 21px;
    height: 21px;
}

.long-text-attachment-copy {
    min-width: 0;
    flex: 1;
}

.long-text-attachment-name {
    overflow: hidden;
    color: var(--text-main);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.long-text-attachment-meta {
    margin-top: 2px;
    overflow: hidden;
    color: var(--text-sec);
    font-size: 11.5px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.long-text-attachment-remove {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    color: var(--text-sec);
    background: transparent;
    cursor: pointer;
}

.long-text-attachment-remove:hover {
    color: var(--text-main);
    background: var(--surface-raised);
}

.long-text-attachment-remove svg {
    width: 18px;
    height: 18px;
}

.chat-area:has(#long-text-attachment:not(.hidden)) .input-area,
.chat-view:has(#long-text-attachment:not(.hidden)) .input-area,
#active-chat:has(#long-text-attachment:not(.hidden)) .input-area {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: transparent;
}

.chat-area:has(#long-text-attachment:not(.hidden)) #fwd-indicator,
.chat-view:has(#long-text-attachment:not(.hidden)) #fwd-indicator,
#active-chat:has(#long-text-attachment:not(.hidden)) #fwd-indicator {
    bottom: 133px;
}

@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .long-text-attachment {
        bottom: 62px;
        width: calc(100% - 24px);
        max-width: none;
        border-radius: 14px 14px 0 0;
    }

    .chat-area:has(#long-text-attachment:not(.hidden)) #fwd-indicator,
    .chat-view:has(#long-text-attachment:not(.hidden)) #fwd-indicator,
    #active-chat:has(#long-text-attachment:not(.hidden)) #fwd-indicator {
        bottom: 125px;
    }
}

.edit-indicator-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--primary);
    font-weight: 600;
    font-size: 13px;
}

.edit-indicator-close {
    background: none;
    border: none;
    color: var(--text-sec);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
}
.edit-indicator-close:hover {
    opacity: 1;
    background: rgba(0,0,0,0.06);
}

@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #edit-indicator {
        bottom: 62px;
        width: calc(100% - 24px);
        max-width: none;
        border-radius: 14px 14px 0 0;
        font-size: 12px;
    }
}
.fwd-line {
    width: 3px;
    height: 32px;
    background: var(--primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.fwd-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fwd-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px;
}

.fwd-preview {
    font-size: 12px;
    color: var(--text-sec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fwd-close-btn {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-sec);
    opacity: 0.6;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fwd-close-btn:hover {
    opacity: 1;
}

.fwd-close-btn .icon {
    width: 20px;
    height: 20px;
}
#pinned-list-dropdown {
    position: absolute;
    top: 128px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 800px;
    box-sizing: border-box;
    z-index: 2000;

    background: var(--glass-heavy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    
    border: 1px solid var(--glass-border);
    border-radius: 16px;

    
    max-height: 50vh;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}
#pinned-list-dropdown .list-item {
    background: transparent;
    border-radius: 0;
    margin: 0;
    border-bottom: 1px solid var(--border); 
    padding: 12px 16px;
    transition: background 0.2s;
    align-items: flex-start;
}

#pinned-list-dropdown .list-item:first-child {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#pinned-list-dropdown .list-item:last-child {
    border-bottom: none;
}

#pinned-list-dropdown .list-item:active {
    background: rgba(0, 0, 0, 0.05);
}
#pinned-list-dropdown::-webkit-scrollbar {
    display: none;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.pin-media-preview {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    margin-right: 10px;
    background: var(--surface-raised);
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.1);
}

.pin-media-preview.circle {
    border-radius: 50%;
}

.pin-text-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pin-msg-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
    line-height: 1.3;
}

.pin-msg-body {
    font-size: 12px;
    color: var(--text-sec);
    opacity: 0.8;
}

.btn-unpin-list {
    opacity: 0.6;
    transition: opacity 0.2s;
}
.btn-unpin-list:hover { opacity: 1; }
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .sidebar .search-container {
        display: none;
    }
    .sidebar.search-active #list-chats,
    .sidebar.search-active #list-contacts {
        display: none;
    }
    .sidebar.search-active #list-search {
        display: block;
        padding-top: 10px;
    }
    .sidebar.search-active #list-search:empty::before {
        content: 'Введите запрос для поиска...';
        display: block;
        text-align: center;
        color: var(--text-sec);
        margin-top: 40px;
        font-size: 14px;
    }
}
.story-screen {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    background: var(--surface-raised); overflow: hidden; z-index: 5001;
}

#story-video-preview {
    width: 100%; height: 100%; object-fit: cover;
}
.story-cam-controls {
    position: absolute; bottom: 40px; left: 0; right: 0;
    display: flex; justify-content: space-around; align-items: center;
    padding: 0 20px; z-index: 10;
}

.shutter-outer {
    width: 72px; height: 72px; 
    border: 4px solid var(--border); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; 
    cursor: pointer; transition: transform 0.1s;
}
.shutter-outer:active { transform: scale(0.95); }

.shutter-inner {
    width: 60px; height: 60px; background: var(--surface-raised); border-radius: 50%;
}

.btn-cam-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(0,0,0,0.4); backdrop-filter: none;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-main); cursor: pointer; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.btn-cam-icon:active { transform: scale(0.9); background: var(--hover); }
.btn-cam-icon svg { width: 24px; height: 24px; stroke-width: 2; }
.story-editor-tools.header {
    position: absolute; top: 0; left: 0; right: 0;
    padding: 20px; display: flex; justify-content: space-between;
    background: var(--surface-raised);
    z-index: 20;
}
.story-editor-tools.footer {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px; display: flex; flex-direction: column; gap: 15px;
    background: var(--surface-raised);
    z-index: 20;
}
.story-desc-row {
    display: flex; gap: 10px; align-items: center; width: 100%;
}
.story-desc-input {
    flex: 1; background: var(--hover); border: 1px solid var(--border);
    border-radius: 20px; padding: 12px 15px; color: var(--text-main); 
    backdrop-filter: none; outline: none;
}
.story-desc-input::placeholder { color: var(--text-sec); }

.btn-publish {
    background: var(--surface-raised); color: var(--text-main); border: none;
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: none;
}
.story-privacy-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    background: var(--hover);
    border: 1px solid var(--border);
    backdrop-filter: none;
    color: var(--text-main);
    border-radius: 20px;
    padding: 10px 13px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.size-slider-container {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 0 20px; opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
}
.size-slider-container.active { opacity: 1; pointer-events: auto; }

input[type=range].story-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
}
input[type=range].story-slider::-webkit-slider-thumb {
    -webkit-appearance: none; height: 20px; width: 20px;
    border-radius: 50%; background: var(--surface-raised); cursor: pointer;
    box-shadow: none; margin-top: -8px;
}
input[type=range].story-slider::-webkit-slider-runnable-track {
    width: 100%; height: 4px; background: var(--hover); border-radius: 2px;
}
.story-trash-zone {
    position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--surface-raised); display: flex; align-items: center; justify-content: center;
    color: var(--text-main); opacity: 0; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease; pointer-events: none; z-index: 15;
}
.story-trash-zone.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.story-trash-zone.hovered { transform: translateX(-50%) scale(1.2); background: var(--surface-raised); }
.story-overlay-item {
    position: absolute; cursor: grab; user-select: none;
    color: var(--text-main); font-weight: bold; text-shadow: none;
    padding: 5px; text-align: center; white-space: nowrap;
    touch-action: none;
}
.story-overlay-item:active { cursor: grabbing; opacity: 0.8; }
.stories-rail {
    display: flex;
    gap: 12px;
    padding: 5px 15px 15px 15px; 
    overflow-x: auto;
    background: transparent;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none; 
}
.stories-rail::-webkit-scrollbar { display: none; }

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    min-width: 70px;
}

.story-ring {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    padding: 2px;
    position: relative;
    background: var(--surface-raised);
    transition: transform 0.2s;
}

.story-ring.seen {
    background: var(--surface-raised);
}
.story-ring.create {
    background: transparent;
    border: 2px dashed var(--border);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--surface);
    object-fit: cover;
    background: var(--surface-raised);
}

.story-plus {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--primary);
    color: var(--text-main);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid var(--surface);
}

.story-name {
    font-size: 11px;
    margin-top: 4px;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
}
.story-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: var(--surface-raised);
    z-index: 20000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.story-progress-bar {
    display: flex;
    gap: 4px;
    padding: 10px 5px;
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20002;
}

.progress-segment {
    flex: 1;
    height: 2px;
    background: var(--hover);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--surface-raised);
    width: 0%;
}

.story-header {
    position: absolute;
    top: 25px; left: 15px; right: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 20002;
    color: var(--text-main);
    text-shadow: none;
}

.story-media-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.story-media {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.story-desc-view {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--text-main);
    padding: 10px 20px;
    font-size: 16px;
    text-shadow: none;
    z-index: 20003;
    pointer-events: none;
    white-space: pre-wrap;
}
.story-nav {
    position: absolute;
    top: 0; bottom: 0;
    z-index: 20001;
}
.nav-left { left: 0; width: 30%; }
.nav-right { right: 0; width: 70%; }
.story-actions-container {
    position: absolute;
    bottom: 20px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 20005;
}

.story-btn-round {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    
    background: var(--hover);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
    
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    
    padding: 0;
    margin: 0;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.2s, background 0.2s;
}
.story-btn-round:active {
    transform: scale(0.9);
    background: var(--hover);
}
.story-btn-round svg, 
.story-btn-round .icon {
    width: 24px;
    height: 24px;
    display: block;
    stroke-width: 2px;
    fill: none;
}
.story-btn-round.liked svg {
    fill: var(--danger);
    stroke: none;
}

.story-btn-round:active {
    transform: scale(0.9);
    background: var(--hover);
}
.story-btn-round.liked {
    background: var(--hover);
    color: var(--danger);
    border-color: var(--border);
    box-shadow: none;
}

.story-btn-round svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}
.story-viewer-stats {
    position: absolute;
    bottom: 25px;
    left: 20px;
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: none;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 20005;
    border: 1px solid var(--border);
    cursor: pointer;
}
.shared-story-card {
    display: flex;
    align-items: center;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 12px;
    margin-top: 6px;
    cursor: pointer;
    max-width: 280px;
    transition: background 0.2s;
    user-select: none;
}

.shared-story-card:active {
    background: var(--surface-raised);
}

.shared-story-icon {
    width: 42px; 
    height: 42px;
    border-radius: 50%;
    background: var(--surface-raised); 
    padding: 2px;
    margin-right: 12px;
    flex-shrink: 0;
}

.shared-story-inner {
    width: 100%; 
    height: 100%;
    border-radius: 50%;
    background: var(--bg-body);
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.story-card-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--primary);
    margin-bottom: 2px;
}

.story-card-sub {
    font-size: 11px;
    color: var(--text-sec);
}
.share-top-actions {
    display: flex;
    gap: 12px;
    padding: 0 16px 15px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

.share-action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface-raised);
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
    color: var(--primary);
}

.share-action-btn:active {
    transform: scale(0.96);
    background: var(--surface-raised);
}

.share-btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;

}
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .list-item {
        padding: 12px 16px;
        border-radius: 14px;
    }
    .list-container {
        padding: 4px 8px;
    }
}
.share-btn-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-main);
}
.chat-item.pinned {
    background: var(--surface-raised);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
}
.chat-item.pinned .chat-item-name {
    color: var(--text-main); 
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-item.pinned .chat-item-msg {
    color: var(--text-sec);
}
.pin-icon-custom {
    width: 14px;
    height: 14px;
    color: var(--primary);
    transform: rotate(45deg);
    filter: none;
    flex-shrink: 0;
}
.pin-icon-wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin-icon-svg {
    width: 14px;
    height: 14px;
    fill: var(--primary);
    transform: rotate(45deg);
    filter: none;
}
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .chat-area {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--bg-body);
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 1000;
        visibility: hidden;
    }

    .chat-area.active {
        transform: translateX(0);
        visibility: visible;
    }
    
    .sidebar {
        width: 100%;
        background: var(--bg-body);
    }
}
@media (prefers-color-scheme: dark) {
    .chat-item.pinned {
        background: var(--surface-raised);
        border-bottom: 1px solid var(--border);
    }
}
.interactive-code {
    background: var(--surface-raised);
    color: var(--primary);
    font-family: monospace;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px dashed var(--border);
    transition: background 0.2s;
}
.interactive-code:active { background: var(--surface-raised); }

.interactive-link {
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
}
.interactive-link:hover { text-decoration: underline; }
.interactive-link.cmd { color: var(--text-sec); }

.safe-link {
    color: var(--primary);
    text-decoration: underline;
    word-break: break-all;
}
#story-edit-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--surface-raised);
}
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .sidebar-header {
        height: 70px;
        padding: 10px 16px 0 16px;
        align-items: flex-start;
    }
    .sidebar-header .logo-img {
        height: 32px;
        margin-top: 5px;
    }
    .stories-rail {
        padding-top: 0px;
        padding-bottom: 10px;
        margin-top: 0px;
    }
}
.prev-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: -3px;
    fill: none;
    stroke: var(--text-sec);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
    transition: stroke 0.2s, opacity 0.2s;
}
.list-item:hover .prev-icon {
    opacity: 1;
    stroke: var(--primary);
}
.list-item.active .prev-icon {
    stroke: var(--text-sec);
    opacity: 1;
}
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .prev-icon {
        width: 14px;
        height: 14px;
        margin-top: -2px;
    }
}

.msg-row .bubble:has(.msg-sticker-mp4),
.msg-row .bubble:has(.msg-sticker-png),
.msg-row .bubble:has(.msg-video-circle),
.msg-row .bubble.is-sticker {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
    border-radius: 0;
}
.msg-row .bubble:has(.msg-sticker-mp4) .meta,
.msg-row .bubble:has(.msg-sticker-png) .meta,
.msg-row .bubble:has(.msg-video-circle) .meta,
.msg-row .bubble.is-sticker .meta {
    position: absolute;
    bottom: 10px;
    right: 15px;
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 8px;
    border-radius: 12px;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 500;
    
    margin: 0;
    z-index: 20;
    pointer-events: none;
}
.msg-row .bubble:has(.msg-sticker-mp4) .tick-icon,
.msg-row .bubble:has(.msg-sticker-png) .tick-icon,
.msg-row .bubble:has(.msg-video-circle) .tick-icon,
.msg-row .bubble.is-sticker .tick-icon,
.msg-row .bubble:has(.msg-sticker-mp4) .msg-views,
.msg-row .bubble:has(.msg-sticker-png) .msg-views,
.msg-row .bubble:has(.msg-video-circle) .msg-views,
.msg-row .bubble.is-sticker .msg-views {
    color: var(--text-main);
    stroke: var(--text-main);
}
.msg-row.own .interactive-link, 
.msg-row.own .msg-content span[data-action="command"],
.msg-row.own a,
.msg-row.own .safe-link {
    color: var(--text-main);
    text-decoration: underline;
    opacity: 1;
    pointer-events: auto;
    position: relative;
    z-index: 10;
    cursor: pointer;
}
.msg-row:not(.own) .safe-link,
.msg-row:not(.own) .interactive-link,
.msg-row:not(.own) .msg-content a {
    color: var(--primary);
    pointer-events: auto;
    position: relative;
    z-index: 5;
}
.msg-row.own .interactive-code {
    color: var(--text-main);
    background: var(--hover);
    border-color: var(--border);
}
#smart-link-handler.modal-overlay {
    background: url('/public/images/link.png') no-repeat center center;
    background-size: cover;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#smart-link-handler .modal-content {
    background: var(--hover);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
    color: var(--text-main);
    border-radius: 16px;
}
#smart-link-handler .modal-close {
    width: 30px;
    height: 30px;
    background: var(--surface-raised);
    border-radius: 50%;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#smart-link-handler .modal-close::before,
#smart-link-handler .modal-close::after {
    background-color: var(--surface-raised);
    height: 2px;
    width: 14px;
    top: auto;
    left: auto;
}
#smart-link-handler .primary-btn {
    background: var(--surface-raised);
    border-radius: 14px;
    font-weight: 600;
    font-size: 17px;
    padding: 12px;
    width: 100%;
    margin-top: 15px;
    box-shadow: none;
}
.reaction-svg {
    width: 28px;
    height: 28px;
    display: block;
    pointer-events: none;
    overflow: visible;
    filter: none;
}
.emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.emoji-item:hover { transform: scale(1.15); }
.emoji-item .reaction-svg { width: 34px; height: 34px; }
.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 16px;
    margin-right: 4px;
    margin-bottom: 4px;
    border: 1px solid transparent;
}
.reaction-chip.active {
    background: var(--surface-raised);
    border-color: var(--border);
}
.reaction-chip .reaction-svg { width: 20px; height: 20px; }
.media-hint-tooltip {
    position: absolute;
    bottom: 85px;
    right: 15px;
    width: auto;
    max-width: 260px;
    background: var(--surface-raised);
    color: var(--text-main);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 12px 30px 12px 15px;
    border-radius: 18px;

    border: 1px solid var(--border);
    z-index: 2000;
    animation: none;
}

.media-hint-tooltip.hidden { display: none; }

.hint-content { display: flex; flex-direction: column; gap: 8px; }

.hint-row { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.3; }

.hint-icon { font-size: 16px; width: 20px; text-align: center; }

.hint-text { color: var(--text-sec); }
.hint-text b { color: var(--text-main); font-weight: 600; }

.hint-tail {
    position: absolute; bottom: -6px; right: 25px; width: 14px; height: 14px;
    background: var(--surface-raised);
    transform: rotate(45deg);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.hint-close {
    position: absolute; top: 5px; right: 5px; width: 20px; height: 20px;
    background: var(--hover); border: none; border-radius: 50%;
    color: var(--text-sec); font-size: 16px; line-height: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.history-loader {
    position: sticky;
    top: 10px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    height: 0;
    overflow: visible;
}

.history-loader.visible {
    opacity: 1;
    transform: translateY(0);
    height: 40px;
}
.spinner-circle {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: history-spin 0.8s linear infinite;
    background: var(--hover);
    backdrop-filter: none;
    box-shadow: none;
    padding: 3px;
    box-sizing: content-box;
}

@keyframes history-spin {
    to { transform: rotate(360deg); }
}
.ptn-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.1s;
}

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

.ptn-action-icon {
    width: 46px;
    height: 46px;
    background: var(--surface-raised);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.ptn-action-btn:hover .ptn-action-icon {
    background: var(--surface-raised);
}

.ptn-action-btn span {
    font-size: 11px;
    color: var(--primary);
    font-weight: 600;
}

@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #modal-partner, #modal-group-info {
        align-items: flex-start;
        padding: 0;
    }
    
    .profile-modal-ios {
        position: relative;
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border-radius: 0;
        background: var(--bg-body);
        justify-content: flex-start;
        align-items: center;
        padding: 60px 20px 20px 20px;
        border: none;
        box-shadow: none;
    }

    .ios-close-btn {
        top: 20px;
        right: 20px;
    }
}
@media (min-width: 769px) and (pointer:fine), (min-width: 769px) and (min-height:501px), (min-width: 769px) and (min-width:1025px) {
    .profile-modal-ios {
        width: 360px;
        background: var(--glass-heavy);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid var(--glass-border);
        border-radius: 16px;
        padding: 24px;
    }
}
.media-grid-ios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    width: 100%;
    padding: 0 16px 20px 16px;
}

.media-grid-item {
    aspect-ratio: 1 / 1;
    background: var(--surface-raised);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.media-grid-item:first-child { border-top-left-radius: 12px; }
.media-grid-item:nth-child(3) { border-top-right-radius: 12px; }

.media-grid-item:active { opacity: 0.7; }
.media-type-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
}
.media-type-icon svg { width: 12px; height: 12px; stroke: var(--text-main); fill: none; }

.media-duration-badge {
    position: absolute;
    bottom: 5px;
    right: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: var(--text-main);
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.media-tabs-ios { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 10px 16px; scrollbar-width: none; }
.media-tabs-ios::-webkit-scrollbar { display: none; }
.media-tab-pill {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    background: var(--surface-raised);
    color: var(--text-sec);
    border: 1px solid transparent;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.media-tab-pill.active { background: var(--surface-raised); color: var(--primary); font-weight: 600; border-color: var(--border); }
.media-grid-empty { padding: 20px; text-align: center; color: var(--text-sec); width: 100%; grid-column: span 3; font-size: 13px; }
#mv-content-box img.mv-zoomed { transform: scale(2); cursor: zoom-out; transition: transform 0.2s; }
#mv-content-box img { transition: transform 0.2s; cursor: zoom-in; }
.scrollable-bio {
    max-height: 120px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scrollable-bio::-webkit-scrollbar {
    display: none;
}
.modal, 
.profile-modal-ios, 
#grp-part-list,
.settings-group-ios,
textarea {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.modal::-webkit-scrollbar, 
.profile-modal-ios::-webkit-scrollbar, 
#grp-part-list::-webkit-scrollbar,
.settings-group-ios::-webkit-scrollbar,
textarea::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}
.group-modal-clean {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--bg-body);
}
.group-modal-header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 15px 15px 0 15px;
    z-index: 10;
    flex-shrink: 0;
    background: transparent;
}
.group-modal-body {
    display: block; 
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 15px;
    padding-bottom: 80px;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}
.group-modal-body .avatar { margin: 0 auto 16px auto; }
#grp-info-name { text-align: center; }
.group-modal-body::-webkit-scrollbar {
    display: none;
}
.group-modal-body .settings-group-ios {
    width: calc(100% - 40px);
    margin: 0 auto 20px auto;
    flex-shrink: 0;
}
#grp-invite-link {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#grp-part-list {
    display: block; 
    max-height: none;
    overflow: visible;
}
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #modal-group-info.modal-overlay {
        padding: 0;
        background: var(--bg-body);
    }

    .group-modal-clean {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border-radius: 0;
        border: none;
        box-shadow: none;
        animation: none;
    }
}
@media (min-width: 769px) and (pointer:fine), (min-width: 769px) and (min-height:501px), (min-width: 769px) and (min-width:1025px) {
    .group-modal-clean {
        width: 400px;
        height: 85vh;
        border-radius: 16px;
        background: var(--glass-heavy);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid var(--glass-border);
    }
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: env(safe-area-inset-top, 0px);
    background-color: var(--primary);
    z-index: 999999;
    transition: background-color 0.3s ease;
}
body:has(#view-call:not(.hidden))::before,
body:has(#media-viewer-modal:not(.hidden))::before,
body:has(#story-creator:not(.hidden))::before,
body:has(.story-viewer)::before {
    background-color: var(--surface-raised);
}
.chat-header {
    top: calc(12px + env(safe-area-inset-top, 0px));
}

#pinned-bar {
    top: calc(70px + env(safe-area-inset-top, 0px));
}

#pinned-list-dropdown {
    top: calc(128px + env(safe-area-inset-top, 0px));
}
.messages {
    padding-top: calc(85px + env(safe-area-inset-top, 0px));
}
.sidebar-header {
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    height: calc(60px + env(safe-area-inset-top, 0px));
}
.group-modal-header,
.menu-header-card {
    padding-top: calc(15px + env(safe-area-inset-top, 0px));
}
.ios-close-btn {
    top: calc(15px + env(safe-area-inset-top, 0px));
}
.modal-fs > div:first-child {
    padding-top: calc(15px + env(safe-area-inset-top, 0px));
}
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .sidebar-header {
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
        height: calc(70px + env(safe-area-inset-top, 0px));
    }
    .profile-modal-ios {
        padding-top: calc(60px + env(safe-area-inset-top, 0px));
    }
}
.settings-input-group {
    background: var(--surface); 
    border-radius: 12px;
    margin: 0 16px 24px 16px;
    overflow: hidden;

    border: none;
}
.setting-row {
    background: transparent;
    border-bottom: 1px solid var(--border);
    min-height: 50px;
}
.settings-input-group .setting-row:last-child {
    border-bottom: none;
}
.settings-section-title {
    padding: 24px 16px 8px 32px; 
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-sec);
    letter-spacing: 0.5px;
}
@media (min-width: 769px) and (pointer:fine), (min-width: 769px) and (min-height:501px), (min-width: 769px) and (min-width:1025px) {
    #modal-menu.modal-overlay,
    #modal-settings-profile.modal-overlay,
    #modal-settings-site.modal-overlay,
    #modal-settings-chats.modal-overlay,
    #modal-devices.modal-overlay,
    #modal-blacklist.modal-overlay {
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        align-items: center;
        justify-content: center;
        padding: 0;
        z-index: 99999;
    }

    #modal-menu .modal,
    #modal-settings-profile .modal,
    #modal-settings-site .modal,
    #modal-settings-chats .modal,
    #modal-devices .modal,
    #modal-blacklist .modal {
        width: 380px; 
        height: auto;
        min-height: 320px;
        max-height: 85vh;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: none;
        border: 1px solid var(--glass-border);
        background: var(--bg-body);
        position: relative;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    .settings-modal-bg > div:first-child,
    .menu-header-card {
        border-top-left-radius: 28px;
        border-top-right-radius: 28px;
        background: var(--surface);
        flex-shrink: 0;
    }
    .settings-modal-bg > div:last-child {
        scrollbar-width: none;
    }
    .settings-modal-bg > div:last-child::-webkit-scrollbar {
        display: none;
    }
}
.chat-area:has(#pinned-bar:not(.hidden)) .chat-header-main,
.chat-area:has(#pinned-bar:not(.hidden)) .chat-header-controls,
#pinned-bar:not(.hidden) {
    border-radius: 16px;
    border-color: var(--glass-border);
}

#pinned-bar:not(.hidden) {
    top: calc(70px + env(safe-area-inset-top, 0px));
    margin-top: 0;
}

@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #pinned-bar:not(.hidden) {
        top: calc(64px + env(safe-area-inset-top, 0px));
        width: calc(100% - 24px);
        max-width: none;
        min-height: 42px;
        padding: 4px 10px;
        gap: 8px;
    }

    #pinned-bar .pinned-line,
    #pinned-bar .pinned-icon-area {
        height: 26px;
    }

    #pinned-title,
    #pinned-count {
        font-size: 12px;
        margin-bottom: 1px;
    }

    #pinned-text {
        font-size: 11px;
    }

    #btn-unpin {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }

    #btn-unpin svg {
        width: 14px;
        height: 14px;
    }

    #pinned-list-dropdown {
        top: calc(112px + env(safe-area-inset-top, 0px));
        width: calc(100% - 24px);
        max-width: none;
        border-radius: 20px;
    }
}
.hidden-mobile {
    display: none;
}
@media (min-width: 600px) {
    .hidden-mobile {
        display: flex;
    }
}
.mobile-search-btn {
    display: none;
}
.desktop-calls-btn {
    display: flex;
    color: var(--text-main);
}

@media (max-width: 599px) {
    .desktop-calls-btn {
        display: none;
    }
}
@media (max-width: 599px) {
    .mobile-search-btn {
        display: flex;
        color: var(--text-main);
    }
}

.mobile-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 10px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                padding 0.2s ease;
}

.mobile-search-bar.hidden {
    display: none;
}

.mobile-search-bar--visible {
    max-height: 60px;
    opacity: 1;
    display: flex;
}
.calls-header {
    flex-shrink: 0;
}

.calls-sort-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-sec);
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}

.calls-sort-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-main);
}

.calls-date-sep {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sec);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 8px 16px 4px;
    opacity: 0.6;
}

.calls-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: 0;
}

.calls-item:hover {
    background: var(--glass-light);
}

.calls-item:active {
    background: var(--glass-heavy);
}

.calls-item-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--glass-heavy);
}

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

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

.calls-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.calls-item-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
}

.calls-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.calls-item-time {
    font-size: 11px;
    color: var(--text-sec);
    font-weight: 500;
}

.calls-item-actions {
    display: flex;
    gap: 6px;
}

.calls-call-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    flex-shrink: 0;
}

.calls-voice-btn {
    background: var(--surface-raised);
    color: var(--success);
}

.calls-voice-btn:hover {
    background: var(--surface-raised);
    transform: scale(1.08);
}

.calls-video-btn {
    background: var(--surface-raised);
    color: var(--primary);
}

.calls-video-btn:hover {
    background: var(--surface-raised);
    transform: scale(1.08);
}

.calls-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-sec);
    font-size: 14px;
    gap: 4px;
}
.date-pin-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--surface-raised);
    flex-shrink: 0;
    transition: background 0.2s;
}

.chip-pin-icon {
    width: 11px;
    height: 11px;
    color: var(--text-sec);
    transform: rotate(45deg);
    opacity: 0.75;
    flex-shrink: 0;
}

.chip-mute-icon {
    width: 11px;
    height: 11px;
    color: var(--text-sec);
    opacity: 0.75;
    flex-shrink: 0;
}

.chip-date {
    font-size: 11px;
    color: var(--text-sec);
    white-space: nowrap;
    line-height: 1;
}
.chat-search-overlay {
    position: absolute;
    top: calc(70px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: var(--bg-body);
    display: flex;
    flex-direction: column;
}
.chat-search-overlay.hidden { display: none; }
.chat-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-sec);
    flex-shrink: 0;
}
.chat-search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 15px;
    color: var(--text-main);
    font-family: var(--font);
}
.chat-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 6px 10px;
}
.chat-search-hint {
    padding: 20px;
    text-align: center;
    color: var(--text-sec);
    font-size: 14px;
}
.chat-search-result {
    padding: 10px 12px;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.chat-search-result:hover {
    background: var(--surface-raised);
}
.chat-search-result-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.chat-search-result-date {
    font-weight: 400;
    color: var(--text-sec);
    font-size: 11px;
    white-space: nowrap;
}
.chat-search-result-text {
    font-size: 14px;
    color: var(--text-sec);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-search-result-text mark {
    background: color-mix(in srgb, var(--primary) 30%, transparent);
    color: var(--text-main);
    border-radius: 3px;
    padding: 0 1px;
}
.multi-select-bar {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 800px;
    height: 50px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border-radius: 16px;
    background: var(--glass-heavy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--glass-border);
}
.multi-select-bar.hidden { display: none; }
.multi-select-count {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-main);
}
.msg-row.selected {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-radius: 12px;
}
.app-promo-banner {
    position: relative;
    margin: 10px 12px 4px;
    padding: 16px 18px;
    border-radius: 20px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
}
.app-promo-banner.hidden { display: none; }
.app-promo-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-sec);
    cursor: pointer;
    padding: 4px;
    display: flex;
}
.app-promo-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--primary);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.app-promo-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
    padding-right: 20px;
}
.app-promo-text {
    font-size: 13px;
    color: var(--text-sec);
    line-height: 1.4;
    margin-bottom: 12px;
}
.app-promo-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--primary);
    color: var(--text-main);
    font-weight: 600;
    font-size: 14px;
    padding: 10px;
    border-radius: 14px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
}
.invite-card {
    position: relative;
    margin: 10px 12px 4px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface-raised);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}
.invite-card.hidden { display: none; }
.invite-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-right: 22px;
}
.invite-card-text { min-width: 0; }
.invite-card-artwork {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    pointer-events: none;
}
.invite-card-close {
    position: absolute;
    right: 8px;
    top: 8px;
    background: none;
    border: none;
    color: var(--text-sec);
    cursor: pointer;
    padding: 4px;
    display: flex;
}
.invite-card-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.3;
    color: var(--text-sec);
    margin-bottom: 4px;
}
.invite-card-body {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--text-sec);
}
.invite-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border: none;
    border-radius: 14px;
    background: var(--primary);
    color: var(--text-main);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
}
.app-promo-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
}
.app-promo-modal.hidden { display: none; }
.app-promo-modal-close {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--hover);
    border: none;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.app-promo-modal-inner {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    color: var(--text-main);
}
.app-promo-modal-title {
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 600;
    margin: 0;
}
.app-promo-modal-sub {
    font-size: 15px;
    color: var(--text-sec);
    max-width: 560px;
    margin: 0;
    line-height: 1.45;
}
.app-promo-carousel {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: center;
}
.app-promo-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    height: min(62vh, 620px);
}
.app-promo-slide-img {
    max-height: 100%;
    max-width: 100%;
    min-height: 0;
    border-radius: 16px;
    box-shadow: none;
    object-fit: contain;
}
.app-promo-caption {
    font-size: 14px;
    color: var(--text-sec);
}
.app-promo-nav {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--hover);
    border: none;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.app-promo-nav:hover { background: var(--hover); }
.app-promo-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.app-promo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--hover);
    cursor: pointer;
    transition: background 0.15s, width 0.15s;
}
.app-promo-dot.active {
    background: var(--surface-raised);
    width: 22px;
    border-radius: 4px;
}
.app-promo-modal-btn {
    display: inline-block;
    background: var(--primary);
    color: var(--text-main);
    font-weight: 600;
    font-size: 15px;
    padding: 13px 34px;
    border-radius: 16px;
    text-decoration: none;
    margin-top: 4px;
}
body:has(#app-promo-modal:not(.hidden)) .bottom-nav { display: none; }

@media (max-width: 599px) {
    .app-promo-modal { padding: 16px 12px 20px; align-items: flex-start; }
    .app-promo-modal-close { top: 12px; right: 12px; width: 38px; height: 38px; }
    .app-promo-modal-inner { gap: 10px; padding-top: 44px; }
    .app-promo-modal-sub { font-size: 13.5px; }
    .app-promo-nav { width: 36px; height: 36px; }
    .app-promo-carousel { gap: 4px; }
    .app-promo-track { height: 46vh; }
    .app-promo-slide-img { border-radius: 16px; }
    .app-promo-caption { font-size: 13px; }
    .app-promo-modal-btn { padding: 12px 26px; font-size: 14.5px; }
}
.ms-checkbox {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--text-sec);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background 0.15s, border-color 0.15s;
}
.ms-checkbox svg {
    width: 14px;
    height: 14px;
    opacity: 0;
    transition: opacity 0.15s;
}
.ms-checkbox.checked {
    background: var(--primary);
    border-color: var(--primary);
}
.ms-checkbox.checked svg { opacity: 1; }

.messages.multi-select-mode .msg-row {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding-left: 38px;
    cursor: pointer;
    border-radius: 14px;
    transition: background 0.15s;
}
.messages.multi-select-mode .msg-row.selected {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.chat-multi-select-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.chat-multi-select-bar.hidden { display: none; }
#list-chats.multi-select-mode .list-item {
    position: relative;
    padding-left: 44px;
}
#list-chats.multi-select-mode .list-item.selected {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.ai-composer-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--glass-heavy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 12px;
    z-index: 150;
}
.ai-composer-panel.hidden { display: none; }
.ai-composer-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sec);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
    padding: 0 2px;
}
.ai-composer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ai-composer-chip {
    flex: 1 1 calc(25% - 6px);
    min-width: 74px;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    border-radius: 12px;
    padding: 8px 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--primary);
    cursor: pointer;
    transition: background 0.15s;
}
.ai-composer-chip:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.ai-composer-chip.disabled { opacity: 0.5; pointer-events: none; }
@media (max-width: 599px) {
    .ai-composer-chip { flex: 1 1 calc(33.333% - 6px); }
}
.msg-views {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 5px;
    font-size: 11px;
    opacity: 0.7;
    color: inherit;
    white-space: nowrap;
}

.msg-views-icon {
    width: 12px;
    height: 12px;
    stroke-width: 2;
    flex-shrink: 0;
}
.own .msg-views {
    opacity: 0.65;
}
.no-messages-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    padding: 40px 24px;
    text-align: center;
    animation: none;
    pointer-events: none;
    user-select: none;
}

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

.no-messages-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--glass-heavy);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--glass-border);
    animation: none;
}

@keyframes noMsgFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

.no-messages-icon svg {
    width: 52px;
    height: 52px;
}

.no-messages-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.no-messages-subtitle {
    font-size: 14px;
    color: var(--text-sec);
    line-height: 1.5;
    max-width: 240px;
}

.messages:has(#no-messages-state) {
    display: flex;
    align-items: center;
    justify-content: center;
}
.desktop-calls-btn {
    display: flex;
    color: var(--text-main);
}
@media (max-width: 599px) {
    .desktop-calls-btn {
        display: none;
    }
}
.blacklist-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--surface);
    transition: background 0.18s;
}
.blacklist-user-row:active {
    background: var(--hover);
}
@media (hover: hover) {
    .blacklist-user-row:hover {
        background: var(--hover);
    }
}
.blacklist-user-avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    background: var(--surface-raised);
}
.blacklist-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blacklist-user-info {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.blacklist-user-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.blacklist-user-handle {
    font-size: 12px;
    color: var(--text-sec);
    margin-top: 2px;
}
.blacklist-unblock-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface-raised);
    color: var(--danger);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
    white-space: nowrap;
}
.blacklist-unblock-btn:hover {
    background: var(--surface-raised);
    border-color: var(--border);
}
.blacklist-unblock-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.theme-picker-btn {
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.theme-picker-btn:hover {
    transform: scale(1.04);
}
.theme-picker-btn:active {
    transform: scale(0.97);
}
.theme-picker-btn.active {
    border-color: var(--primary);

    transform: scale(1.04);
}
@keyframes neonPulse {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: none; }
}
.theme-import-open-btn {
    grid-column: span 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    color: var(--text-sec);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    font-family: var(--font);
}
.theme-import-open-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.premium-btn-header {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    flex-shrink: 0;
    border-radius: 50%;
}
.premium-btn-header:hover {
    transform: scale(1.22) rotate(12deg);
    filter: none;
}
.premium-avatar-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.premium-avatar-wrap.has-premium::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--surface-raised);
    z-index: 0;
    animation: premiumRingSpin 3s linear infinite;
}
.premium-avatar-wrap.has-premium::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: var(--surface, var(--surface-raised));
    z-index: 1;
}
.premium-avatar-wrap img,
.premium-avatar-wrap .avatar-initials {
    position: relative;
    z-index: 2;
    border-radius: 50%;
    display: block;
}
@keyframes premiumRingSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.has-premium.premium-anim-paused::before { animation-play-state: paused; }
#menu-avatar-wrap { margin-bottom: 12px; }
#menu-avatar-wrap img.menu-avatar-large { margin-bottom: 0; }
.premium-avatar-ring {
    position: relative;
    display: inline-flex;
    border-radius: 50%;
    padding: 3px;
    background: var(--surface-raised);
    animation: premiumRingSpin 3s linear infinite;
}
.premium-avatar-ring img {
    border-radius: 50%;
    display: block;
    background: var(--surface, var(--surface-raised));
}
.premium-username {
    background: var(--surface-raised);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}
.premium-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--surface-raised);
    color: var(--text-main);
    -webkit-text-fill-color: var(--text-main);
    vertical-align: middle;
    flex-shrink: 0;

}
.premium-menu-label {
    background: var(--surface-raised);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}
#modal-premium {
    z-index: 100020;
    padding: 16px;
    align-items: center;
    justify-content: center;
}

.premium-modal-wrap {
    position: relative;
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    animation: none;
}
@keyframes pmModalIn {
    from { opacity: 0; transform: scale(0.88) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pm-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 30;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--hover);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
}
.pm-close-btn:hover {
    background: var(--hover);
    transform: scale(1.1);
}
.premium-modal-header {
    position: relative;
    background: var(--surface-raised);
    padding: 40px 24px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
}
.premium-modal-header::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -20%;
    width: 70%;
    height: 80%;
    background: var(--surface-raised);
    pointer-events: none;
}
.premium-modal-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0; right: 0;
    height: 20px;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
}
.pm-gem-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    filter: none;
    animation: none;
}
@keyframes pmGemFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-4px) rotate(1deg); }
}
.pm-body {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
    padding: 20px 20px 24px;
}
.pm-body::-webkit-scrollbar { width: 3px; }
.pm-body::-webkit-scrollbar-thumb { background: var(--surface-raised); border-radius: 3px; }
.premium-feature-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 22px;
}
.premium-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.4;
}

.pm-business-card {
    margin: 0 0 22px;
    padding: 15px;
    border-radius: 19px;
    background: color-mix(in srgb, var(--surface) 76%, var(--surface-raised) 24%);
    color: var(--text-main);
}

.pm-business-card-compact {
    width: 100%;
    margin: 0 0 14px;
    text-align: left;
}

.pm-business-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pm-business-heading > div:last-child {
    min-width: 0;
    flex: 1;
}

.pm-business-heading strong {
    display: block;
    font-size: 14px;
    line-height: 1.3;
}

.pm-business-heading > div:last-child > span,
.pm-business-heading p {
    display: block;
    margin: 3px 0 0;
    color: var(--text-sec);
    font-size: 11.5px;
    line-height: 1.4;
}

.pm-business-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--text-main);
    background: var(--surface-raised);
}

.pm-business-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.pm-business-title-row span {
    padding: 3px 7px;
    border-radius: 16px;
    color: var(--text-sec);
    background: var(--surface-raised);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .25px;
}

.pm-business-grid {
    display: grid;
    gap: 7px;
    margin-top: 13px;
}

.pm-business-grid span {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--text-main);
}

.pm-business-note {
    margin-top: 12px;
    padding: 9px 11px;
    border-radius: 12px;
    color: var(--text-sec);
    background: var(--surface-raised);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.35;
}

.pm-business-action {
    width: 100%;
    min-height: 40px;
    margin-top: 12px;
    padding: 8px 14px;
    border: 0;
    border-radius: 13px;
    color: var(--text-main);
    background: var(--surface-raised);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.pm-business-action:hover {
    background: var(--surface-raised);
}
.pm-feat-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.pm-feat-icon::after {
    content: '';
    position: absolute;
    top: -40%;
    left: -20%;
    width: 60%;
    height: 60%;
    background: var(--surface-raised);
    pointer-events: none;
}
.pm-feat-icon svg { display: block; position: relative; z-index: 1; }

.pm-header-sparkles {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    pointer-events: none;
}
.pm-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sec);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.premium-plans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.premium-plan-card {
    position: relative;
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 10px 4px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
    background: var(--bg-body, var(--surface));
    overflow: hidden;
    user-select: none;
}
.premium-plan-card:hover { border-color: var(--border); transform: translateY(-2px); }
.premium-plan-card.selected {
    border-color: transparent;
    background: var(--surface-raised);
}
.premium-plan-card.popular {
    background: var(--surface-raised);
}
.plan-popular-badge {
    position: absolute;
    top: 0; left: 0; right: 0;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: var(--surface-raised);
    color: var(--text-main);
    -webkit-text-fill-color: var(--text-main);
    padding: 3px 0;
    line-height: 1;
}
.plan-name   { font-size: 11px; font-weight: 600; color: var(--text-sec); margin-top: 12px; }
.plan-price  { font-size: 17px; font-weight: 600; color: var(--text-main); margin: 3px 0; line-height: 1.1; }
.plan-period { font-size: 10px; color: var(--text-sec); }
.plan-save   { font-size: 9px; color: var(--text-sec); font-weight: 600; margin-top: 2px; }
.premium-pay-btn {
    width: 100%;
    padding: 15px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    background: var(--surface-raised);
    color: var(--text-main);
    -webkit-text-fill-color: var(--text-main);
    transition: opacity 0.18s, transform 0.15s, box-shadow 0.18s;
    letter-spacing: 0.1px;
}
.premium-pay-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}
.premium-pay-btn:disabled {
    opacity: 0.55;
    transform: none;
    cursor: not-allowed;
    box-shadow: none;
}
.premium-pay-btn.pm-waiting {
    animation: pmBtnPulse 1.4s ease-in-out infinite;
}
@keyframes pmBtnPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.68; }
}

.pm-legal {
    text-align: center;
    font-size: 11px;
    color: var(--text-sec);
    margin-top: 10px;
    line-height: 1.5;
}
.pm-active-view {
    padding: 22px 22px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.pm-active-card {
    width: 100%;
    background: var(--surface-raised);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 20px 18px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}
.pm-active-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 100%;
    background: var(--surface-raised);
    pointer-events: none;
}
.pm-plan-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--surface-raised);
    color: var(--text-main);
    -webkit-text-fill-color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}
.pm-expiry-info {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin: 4px 0;
}
.pm-renew-status {
    font-size: 12px;
    color: var(--text-sec);
    margin-top: 4px;
}
.pm-cancel-btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: var(--surface-raised);
    color: var(--danger);
    -webkit-text-fill-color: var(--danger);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    margin-top: 8px;
    letter-spacing: 0.1px;
}
.pm-cancel-btn:hover {
    background: var(--surface-raised);
    border-color: var(--border);
}
.pm-cancel-info {
    font-size: 11px;
    color: var(--text-sec);
    margin-top: 8px;
    line-height: 1.5;
}
@media (max-height: 680px) {
    .premium-modal-wrap { max-height: 96vh; }
    .premium-modal-header { padding: 26px 20px 18px; }
    .pm-gem-icon { width: 42px; height: 42px; }
}
.chat-item-avatar.has-premium,
.msg-avatar.has-premium {
    position: relative;
    border-radius: 50%;
    z-index: 0;
}
.chat-item-avatar.has-premium::before,
.msg-avatar.has-premium::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--surface-raised);
    animation: premiumRingSpin 3s linear infinite;
    z-index: -2;
}
.chat-item-avatar.has-premium::after,
.msg-avatar.has-premium::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: var(--bg-body, var(--surface, var(--surface-raised)));
    z-index: -1;
}
.chat-item-avatar.has-premium img,
.msg-avatar.has-premium img {
    position: relative;
    z-index: 1;
    border-radius: 50%;
    display: block;
}
.avatar.has-premium {
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    z-index: 0;
}
.avatar.has-premium::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--surface-raised);
    animation: premiumRingSpin 3s linear infinite;
    z-index: -2;
}
.avatar.has-premium::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: var(--bg-body, var(--surface, var(--surface-raised)));
    z-index: -1;
}
.avatar.has-premium img {
    position: relative;
    z-index: 1;
    border-radius: 50%;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar.has-premium .dot {
    z-index: 2;
}
#head-name.premium-username,
#head-name.premium-username span {
    background: var(--surface-raised);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}
.chat-item-name.premium-username {
    background: var(--surface-raised);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}
.chat-item-name.premium-username span {
    -webkit-text-fill-color: transparent;
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
}
.msg-row .has-premium {
    position: relative;
    border-radius: 50%;
    z-index: 0;
}
.msg-row .has-premium::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--surface-raised);
    animation: premiumRingSpin 3s linear infinite;
    z-index: -2;
}
.msg-row .has-premium::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: var(--bg-body, var(--surface, var(--surface-raised)));
    z-index: -1;
}
.msg-row .has-premium img {
    position: relative;
    z-index: 1;
    border-radius: 50%;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.plan-badge.plan-basic {
    background: var(--surface-raised);
    color: var(--text-main);
}
.plan-badge.plan-standard {
    background: var(--surface-raised);
    color: var(--text-main);
}
.plan-badge.plan-pro {
    background: var(--surface-raised);
    color: var(--text-main);
}
.plans-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 12px;
}
.plans-compare-table th {
    padding: 8px 6px;
    text-align: center;
    font-weight: 600;
    border-bottom: 2px solid var(--border, var(--border));
}
.plans-compare-table td {
    padding: 7px 6px;
    text-align: center;
    border-bottom: 1px solid var(--border, var(--border));
}
.plans-compare-table td:first-child {
    text-align: left;
    font-size: 11px;
    color: var(--text-sec);
}
.plans-compare-table .check { color: var(--success); font-size: 14px; }
.plans-compare-table .cross { color: var(--danger); font-size: 14px; }
.attach-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: transparent;
}
.attach-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: var(--surface, var(--surface-raised));
    border-radius: 20px;
    box-shadow: none;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 210px;
    z-index: 3001;
    animation: none;
    transform-origin: bottom left;
}
@keyframes attachMenuIn {
    from { opacity: 0; transform: scale(.88) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.attach-menu-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 14px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-main);
    transition: background .13s;
    user-select: none;
}
.attach-menu-item:hover, .attach-menu-item:active {
    background: var(--bg-body, var(--surface-raised));
}
.attach-menu-item svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}
.attach-menu-item.poll-item svg { color: var(--primary, var(--primary)); }
.attach-menu-item.file-item svg { color: var(--primary); }
.attach-menu-item.photo-item svg { color: var(--success); }
.attach-menu-item.video-item svg { color: var(--text-sec); }
.attach-menu-divider {
    height: 1px;
    background: var(--border, var(--surface-raised));
    margin: 4px 14px;
}
.poll-bubble {
    min-width: 220px;
    max-width: min(340px, calc(100vw - 100px));
    width: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    box-sizing: border-box;
}
@media (max-width: 480px) {
    .poll-bubble {
        min-width: 0;
        max-width: calc(100vw - 90px);
        width: 100%;
    }
}
.poll-bubble .meta {
    float: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 12px 10px;
    margin: 0;
    gap: 3px;
    opacity: .65;
}
.poll-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 8px;
}
.poll-header-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--hover);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.msg-row:not(.own) .poll-header-icon {
    background: var(--surface-raised);
}
.poll-header-icon svg {
    width: 14px;
    height: 14px;
    color: var(--text-main);
}
.msg-row:not(.own) .poll-header-icon svg { color: var(--primary, var(--primary)); }
.poll-meta {
    flex: 1;
    min-width: 0;
}
.poll-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .7px;
    opacity: .65;
    margin-bottom: 3px;
}
.poll-question {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}
.poll-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 0 14px 8px;
}
.poll-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--hover);
    color: var(--text-main);
    letter-spacing: .2px;
}
.msg-row:not(.own) .poll-badge {
    background: var(--surface-raised);
    color: var(--primary, var(--primary));
}
.poll-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 10px 10px;
}
.poll-option {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .12s, opacity .12s;
    background: var(--hover);
    min-height: 36px;
}
.msg-row:not(.own) .poll-option { background: rgba(0,0,0,0.05); }
.poll-option:not(.voted):hover { opacity: .88; }
.poll-option:active { transform: scale(.97); }
.poll-option.voted { cursor: default; }
.poll-option.voted:active { transform: none; }
.poll-option-bar {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    border-radius: 10px;
    background: var(--hover);
    transition: width .5s cubic-bezier(.4,0,.2,1);
}
.msg-row:not(.own) .poll-option-bar { background: var(--surface-raised); }
.poll-option-bar.winner { background: var(--hover); }
.msg-row:not(.own) .poll-option-bar.winner { background: var(--surface-raised); }
.poll-option-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    gap: 8px;
}
.poll-option-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.poll-option-check {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1.8px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s, border-color .18s;
}
.msg-row:not(.own) .poll-option-check { border-color: rgba(0,0,0,0.25); }
.poll-option.selected .poll-option-check {
    background: var(--surface-raised);
    border-color: var(--border);
}
.msg-row:not(.own) .poll-option.selected .poll-option-check {
    background: var(--primary, var(--surface-raised));
    border-color: var(--primary, var(--border));
}
.poll-option-check svg {
    width: 9px; height: 9px;
    display: none;
}
.poll-option.selected .poll-option-check svg { display: block; color: var(--primary, var(--primary)); }
.msg-row:not(.own) .poll-option.selected .poll-option-check svg { color: var(--text-main); }
.checklist-item { cursor: pointer; }
.checklist-item .poll-option-check.filled {
    background: var(--surface-raised);
    border-color: var(--border);
}
.msg-row:not(.own) .checklist-item .poll-option-check.filled {
    background: var(--primary, var(--surface-raised));
    border-color: var(--primary, var(--border));
}
.checklist-item .poll-option-check.filled svg { display: block; color: var(--primary, var(--primary)); }
.msg-row:not(.own) .checklist-item .poll-option-check.filled svg { color: var(--text-main); }
.checklist-item.checked .poll-option-text { text-decoration: line-through; opacity: .65; }
.poll-option-text {
    font-size: 13.5px;
    font-weight: 500;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.3;
    color: inherit;
    min-width: 0;
    flex: 1;
}
.poll-option-pct {
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    opacity: .8;
}
.poll-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 14px 12px;
    font-size: 11px;
    opacity: .65;
    gap: 8px;
}
.poll-voters-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 11px;
    cursor: pointer;
    color: inherit;
    opacity: .8;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: opacity .15s, text-decoration-color .15s;
}
.poll-voters-btn:hover { opacity: 1; text-decoration-color: currentColor; }
.poll-close-btn {
    background: none;
    border: none;
    font-size: 11px;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    padding: 0;
    font-weight: 500;
    transition: opacity .15s;
}
.poll-close-btn:hover { opacity: 1; }
.poll-closed-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--surface-raised);
    color: var(--danger);
}
.msg-row.own .poll-closed-badge {
    background: var(--hover);
    color: var(--text-main);
    opacity: .7;
}
.poll-create-modal {
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px;
    background: var(--surface);
    padding: 0;
}
.poll-create-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 0;
    margin-bottom: 16px;
}
.poll-create-title {
    font-size: 18px;
    font-weight: 600;
}
.poll-create-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--bg-body, var(--surface-raised));
    border: none;
    cursor: pointer;
    color: var(--text-sec);
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.poll-create-close:hover { background: var(--border); }
.poll-create-body { padding: 0 20px 20px; }
.poll-create-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-sec);
    margin-bottom: 6px;
    margin-top: 16px;
}
.poll-create-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border, var(--border));
    border-radius: 14px;
    font-size: 15px;
    background: var(--bg-body, var(--surface-raised));
    color: var(--text-main);
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s;
    resize: none;
    font-family: inherit;
}
.poll-create-input:focus { border-color: var(--primary, var(--border)); }
.poll-options-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.poll-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.poll-option-input {
    flex: 1;
    padding: 10px 13px;
    border: 1.5px solid var(--border, var(--border));
    border-radius: 12px;
    font-size: 14px;
    background: var(--bg-body, var(--surface-raised));
    color: var(--text-main);
    outline: none;
    transition: border-color .2s;
    font-family: inherit;
}
.poll-option-input:focus { border-color: var(--primary, var(--border)); }
.poll-option-remove {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--surface-raised);
    color: var(--danger);
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.poll-option-remove:hover { background: var(--surface-raised); }
.poll-add-option-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 0;
    background: none; border: none;
    color: var(--primary, var(--primary));
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    margin-top: 2px;
}
.poll-settings {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1.5px solid var(--border, var(--border));
    border-radius: 14px;
    overflow: hidden;
    margin-top: 6px;
}
.poll-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    background: var(--bg-body, var(--surface-raised));
    border-bottom: 1px solid var(--border, var(--border));
}
.poll-setting-row:last-child { border-bottom: none; }
.poll-setting-label { font-size: 14px; font-weight: 500; }
.poll-setting-desc { font-size: 11px; color: var(--text-sec); margin-top: 1px; }
.ios-toggle { position: relative; display: inline-block; width: 44px; height: 26px; cursor: pointer; }
.ios-toggle input { opacity: 0; width: 0; height: 0; }
.ios-slider {
    position: absolute; inset: 0;
    background: var(--border, var(--surface-raised));
    border-radius: 16px;
    transition: background .2s;
}
.ios-slider:before {
    content: '';
    position: absolute;
    height: 22px; width: 22px;
    left: 2px; bottom: 2px;
    background: var(--surface-raised);
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: none;
}
.ios-toggle input:checked + .ios-slider { background: var(--primary, var(--surface-raised)); }
.ios-toggle input:checked + .ios-slider:before { transform: translateX(18px); }
.poll-expiry-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 0;
}
.poll-expiry-select {
    flex: 1;
    padding: 10px 13px;
    border: 1.5px solid var(--border, var(--border));
    border-radius: 12px;
    font-size: 14px;
    background: var(--bg-body, var(--surface-raised));
    color: var(--text-main);
    outline: none;
    cursor: pointer;
    font-family: inherit;
}
.poll-create-submit {
    width: 100%;
    padding: 14px;
    background: var(--primary, var(--surface-raised));
    color: var(--text-main);
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    transition: opacity .15s;
}
.poll-create-submit:hover { opacity: .88; }
.poll-create-submit:disabled { opacity: .45; cursor: not-allowed; }
.poll-voters-modal {
    max-width: 380px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 16px;
    background: var(--surface);
    padding: 0;
}
.poll-voters-header {
    padding: 18px 18px 0;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
}
.poll-voters-title { font-size: 17px; font-weight: 600; }
.poll-voters-tabs {
    display: flex;
    gap: 0;
    padding: 12px 12px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    cursor: grab;
}
.poll-voters-tabs:active { cursor: grabbing; }
.poll-voters-tabs::-webkit-scrollbar { height: 3px; }
.poll-voters-tabs::-webkit-scrollbar-track { background: transparent; }
.poll-voters-tabs::-webkit-scrollbar-thumb { background: var(--border, var(--surface-raised)); border-radius: 3px; }
.poll-voters-tab {
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    color: var(--text-sec);
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.poll-voters-tab.active {
    background: var(--primary, var(--surface-raised));
    color: var(--text-main);
}
.poll-voters-list {
    padding: 10px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 60px;
}
.poll-voter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 12px;
}
.poll-voter-row:hover { background: var(--bg-body); }
.poll-voter-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-body);
}
.poll-voter-name { font-size: 14px; font-weight: 500; }
.poll-voters-empty {
    text-align: center;
    color: var(--text-sec);
    font-size: 13px;
    padding: 20px 0;
}
#btn-attach {
    position: relative;
}
#attach-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    z-index: 3001;
}
.poll-footer-divider {
    height: 1px;
    background: var(--hover);
    margin: 0 10px;
}
.msg-row:not(.own) .poll-footer-divider {
    background: rgba(0,0,0,0.07);
}
.poll-bubble .reactions-display {
    padding: 0 10px 8px;
}
.msg-row.poll-msg {
    max-width: min(420px, calc(100vw - 24px));
    width: min(420px, calc(100vw - 24px));
    overflow: hidden;
    box-sizing: border-box;
}
.msg-row.poll-msg .poll-bubble {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
@media (max-width: 600px) {
    .msg-row.poll-msg {
        max-width: calc(100vw - 24px);
        width: calc(100vw - 24px);
        overflow: hidden;
        box-sizing: border-box;
    }
    .poll-bubble {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .poll-question { font-size: 14px; word-break: break-word; }
    .poll-option-text { font-size: 12.5px; word-break: break-word; }
    .poll-footer { font-size: 10.5px; padding: 4px 10px 10px; flex-wrap: wrap; gap: 4px; }
    .poll-header { padding: 12px 12px 6px; }
    .poll-options { padding: 0 8px 8px; gap: 5px; }
    .poll-option-content { padding: 7px 8px; gap: 6px; }
    .poll-header-icon { width: 24px; height: 24px; }
}
@media (min-width: 769px) and (pointer:fine), (min-width: 769px) and (min-height:501px), (min-width: 769px) and (min-width:1025px) {
    .poll-bubble {
        min-width: 260px;
        max-width: min(360px, calc(100% - 20px));
        width: auto;
    }
    .msg-row.poll-msg {
        max-width: 400px;
        width: auto;
    }
}
#thread-feed {
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
}
#thread-feed > div[data-comment-id] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
}
#thread-feed [data-bubble-wrap] {
    min-width: 0;
    max-width: calc(100% - 41px);
    width: 0;
    flex-grow: 1;
    overflow: hidden;
    box-sizing: border-box;
}
#thread-feed .bubble {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    max-width: 100%;
    width: fit-content;
    overflow: hidden;
    box-sizing: border-box;
}
#thread-feed [data-thread-reactions] {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.changelog-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 0 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.35s ease;
    pointer-events: none;
}
.changelog-overlay.visible {
    background: rgba(0, 0, 0, 0.55);
    pointer-events: all;
}
.changelog-overlay.hidden {
    display: none;
}
.changelog-card {
    width: 100%;
    max-width: 480px;
    background: var(--bg-primary, var(--surface-raised));
    border-radius: 28px 28px 0 0;
    padding: 12px 28px 40px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    transform: translateY(100%);
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 92vh;
    overflow: hidden;
    position: relative;
}
.changelog-overlay.visible .changelog-card {
    transform: translateY(0);
}
.changelog-card::before {
    content: '';
    display: block;
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: rgba(0,0,0,0.13);
    margin-bottom: 20px;
    flex-shrink: 0;
}
.changelog-dots {
    display: flex;
    gap: 7px;
    margin-bottom: 24px;
    flex-shrink: 0;
}
.cl-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0,0,0,0.15);
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.cl-dot.active {
    width: 20px;
    border-radius: 4px;
    background: var(--primary, var(--surface-raised));
}
.changelog-slides {
    width: 100%;
    position: relative;
    min-height: 360px;
    overflow: hidden;
    flex: 1;
}
.cl-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 4px;
    opacity: 0;
    transform: translateX(60px) scale(0.97);
    transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
}
.cl-slide.active {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: all;
    position: relative;
}
.cl-slide.prev {
    opacity: 0;
    transform: translateX(-60px) scale(0.97);
}
.cl-icon-wrap {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    flex-shrink: 0;

}
.cl-icon-wrap svg {
    width: 58px;
    height: 58px;
}
.cl-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--primary, var(--primary));
    background: var(--surface-raised);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.cl-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-main, var(--text-sec));
    margin: 0 0 12px;
    line-height: 1.25;
    letter-spacing: -0.3px;
    flex-shrink: 0;
}
.cl-desc {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-sec, var(--text-sec));
    margin: 0;
    max-width: 340px;
}
.changelog-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 24px;
    flex-shrink: 0;
    gap: 12px;
}
.cl-btn-skip {
    background: none;
    border: none;
    font-size: 15px;
    color: var(--text-sec, var(--text-sec));
    cursor: pointer;
    padding: 10px 4px;
    font-weight: 500;
    transition: color 0.15s;
    flex-shrink: 0;
    min-width: 60px;
}
.cl-btn-skip:hover { color: var(--text-main); }
.cl-btn-next {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--primary, var(--surface-raised));
    color: var(--text-main);
    border: none;
    border-radius: 16px;
    padding: 13px 26px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;

    flex: 1;
    justify-content: center;
    max-width: 220px;
    margin-left: auto;
}
.cl-btn-next:hover {
    transform: scale(1.02);

}
.cl-btn-next:active {
    transform: scale(0.97);
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .changelog-card {
        padding-bottom: calc(40px + env(safe-area-inset-bottom));
    }
}
@media (min-width: 600px) {
    .changelog-overlay {
        align-items: center;
    }
    .changelog-card {
        border-radius: 16px;
        padding: 32px 36px 36px;
        max-width: 420px;
        max-height: 85vh;
        transform: translateY(30px) scale(0.95);
        opacity: 0;
        transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
    }
    .changelog-card::before {
        display: none;
    }
    .changelog-overlay.visible .changelog-card {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    .changelog-slides {
        min-height: 320px;
    }
}
.ad-list-item {
    cursor: default;
    background: var(--surface-raised);
    border-left: 3px solid var(--border);
    position: relative;
}
.ad-list-item:hover {
    background: var(--surface-raised);
}
.ad-list-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 12px;
    overflow: hidden;
}
.ad-list-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ad-list-badge {
    font-size: 9px;
    font-weight: 600;
    background: var(--surface-raised);
    color: var(--text-sec);
    border-radius: 4px;
    padding: 1px 5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.ad-list-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    pointer-events: all;
}
.chat-ad-banner {
    display: flex;
    justify-content: center;
    padding: 6px 16px 10px;
    animation: none;
    pointer-events: all;
}
.chat-ad-inner {
    width: 100%;
    max-width: 420px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--glass-heavy);
    border: 1px solid var(--glass-border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.chat-ad-header {
    padding: 7px 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid var(--glass-border);
    background: var(--surface-raised);
}
.chat-ad-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sec);
}
.chat-ad-premium-hint {
    font-size: 10px;
    color: var(--text-sec);
    margin-left: auto;
    opacity: 0.75;
    cursor: pointer;
}
.chat-ad-premium-hint:hover { opacity: 1; }
.chat-ad-content {
    min-height: 60px;
    padding: 6px 8px;
}
.ad-chat-avatar {
    background: var(--surface-raised);
    flex-shrink: 0;
    overflow: hidden;
}
.ad-chat-avatar-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: -0.5px;
}
.ad-badge-pill {
    display: inline-block;
    background: var(--surface-raised);
    color: var(--text-main);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 1px 4px;
    border-radius: 4px;
    line-height: 1.4;
    vertical-align: middle;
    flex-shrink: 0;
}
.ad-chat-item {
    cursor: pointer;
    transition: background 0.15s;
    max-height: 72px;
    overflow: hidden;
}
.ad-chat-item:active {
    background: var(--hover);
}
.ad-chat-rtb {
    width: 100%;
    min-height: 0;
    max-height: 20px;
    overflow: hidden;
    pointer-events: none;
    font-size: 12px;
    color: var(--text-sec);
}
.ad-chat-rtb iframe,
.ad-chat-rtb > div,
.ad-chat-rtb > div[style] {
    display: none;
    height: 0;
    max-height: 0;
}
.ad-fallback-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    width: 100%;
}
.ad-fallback-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.ad-fallback-text {
    flex: 1;
    min-width: 0;
}
.ad-fallback-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ad-fallback-body {
    font-size: 11px;
    color: var(--text-sec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.ad-fallback-cta {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sec);
    flex-shrink: 0;
    white-space: nowrap;
}
.msg-ad-row {
    pointer-events: all;
}
.msg-ad-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface-raised);
    flex-shrink: 0;
}
.ad-msg-rtb {
    min-height: 60px;
    width: 100%;
    overflow: hidden;
}
.ad-msg-rtb .ad-fallback-inner {
    padding: 2px 0;
}
.ad-list-item,
.chat-ad-banner,
.ad-chat-item,
.ad-chat-rtb,
.ad-msg-rtb,
.msg-ad-row,
.ad-fallback-inner,
.ad-fallback-icon,
.ad-fallback-text,
.ad-fallback-title,
.ad-fallback-body,
.ad-fallback-cta,
.ad-badge-pill,
.ad-list-badge,
.ad-list-icon,
.ad-list-name,
.ad-list-body,
.msg-ad-avatar,
.ad-chat-avatar,
.ad-chat-avatar-inner,
.chat-ad-inner,
.chat-ad-header,
.chat-ad-label,
.chat-ad-premium-hint,
.chat-ad-content {
    display: none;
}
.modal-overlay.hidden,
.list-container.hidden,
#list-search.hidden,
#view-auth.hidden,
#view-app.hidden,
.ctx-menu.hidden {
    content-visibility: hidden;
}
.list-item {
    content-visibility: auto;
    contain-intrinsic-size: 0 72px;
}
#active-chat.hidden .messages {
    content-visibility: hidden;
}
.chat-header, .sidebar-header {
    contain: layout paint;
}
.slow-delay-btn {
    border: none;
    background: var(--surface-raised);
    color: var(--text-main);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
    flex: 1;
    min-width: 44px;
    text-align: center;
}
.slow-delay-btn:active { background: var(--primary); color: var(--text-main); }
.audit-log-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.audit-log-item:last-child { border-bottom: none; }
.audit-log-item img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.audit-log-text {
    flex: 1;
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.4;
}
.audit-log-time {
    font-size: 12px;
    color: var(--text-sec);
    white-space: nowrap;
    flex-shrink: 0;
}
.album-grid {
    display: grid;
    gap: 3px;
    border-radius: 14px;
    overflow: hidden;
    max-width: 320px;
}
.album-grid-2 { grid-template-columns: repeat(2, 1fr); }
.album-grid-3 { grid-template-columns: repeat(3, 1fr); }
.album-grid-4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.album-grid-5 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.album-grid-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.album-grid > .album-cell {
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
    background: var(--surface-raised);
}
.album-grid > .album-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}
.album-grid > .album-cell:hover img { transform: scale(1.04); }
.album-grid .album-more-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    color: var(--text-main);
    font-size: 20px;
    font-weight: 600;
}
.album-cell { position: relative; }
.msg-content {
    overflow-wrap: anywhere;
    word-break: normal;
}
.chat-folder-rail {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin: 0 15px 10px;
}

.chat-folder-scroll {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding: 3px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-body) 90%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.chat-folder-scroll::-webkit-scrollbar { display: none; }

.chat-folder-chip {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 11px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.chat-folder-chip.active {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.chat-folder-edit {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--text-main);
    background: var(--primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    cursor: pointer;
}

.chat-folder-edit svg { width: 20px; height: 20px; }

.chat-folder-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, .42);
}

.chat-folder-dialog {
    width: min(560px, 100%);
    max-height: min(760px, 90vh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: var(--bg-body);
    color: var(--text-main);
}

.chat-folder-dialog-head,
.chat-folder-dialog-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
}

.chat-folder-dialog-head { border-bottom: 1px solid var(--border); }
.chat-folder-dialog-head h3 { flex: 1; margin: 0; font-size: 20px; }
.chat-folder-dialog-body { overflow: auto; padding: 14px 18px; }
.chat-folder-limit { color: var(--text-sec); font-size: 13px; }
.chat-folder-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.chat-folder-row-main { flex: 1; min-width: 0; }
.chat-folder-row-main strong,.chat-folder-row-main small { display: block; }
.chat-folder-row-main small { color: var(--text-sec); margin-top: 3px; }
.chat-folder-mini-btn {
    border: 0;
    border-radius: 10px;
    padding: 9px 11px;
    background: var(--surface-raised);
    color: var(--text-main);
    cursor: pointer;
}
.chat-folder-mini-btn.danger { color: var(--danger); }
.chat-folder-primary {
    border: 0;
    border-radius: 12px;
    padding: 11px 16px;
    color: var(--text-main);
    background: var(--primary);
    font-weight: 600;
    cursor: pointer;
}
.chat-folder-primary:disabled { opacity: .45; cursor: default; }
.chat-folder-name-input {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: var(--surface-raised);
    color: var(--text-main);
    font: inherit;
}
.chat-folder-chat-list { max-height: 48vh; overflow: auto; }
.chat-folder-chat-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    border-bottom: 1px solid var(--border);
}
.chat-folder-switch { flex: 0 0 auto; }
.chat-folder-visible-row { padding: 12px 0; }

@media (max-width: 700px) {
    .chat-folder-rail { margin-inline: 12px; }
    .chat-folder-modal { align-items: end; padding: 0; }
    .chat-folder-dialog { width: 100%; max-height: 88vh; border-radius: 22px 22px 0 0; }
}
.msg-row .bubble.document-bubble,
.msg-row.own .bubble.document-bubble,
.msg-row:not(.own) .bubble.document-bubble {
    width: auto;
    min-width: 164px;
    max-width: min(270px, 66vw);
    padding: 4px 4px 7px;
    color: var(--text-sec);
    background: var(--surface-raised);
    border: 0;
    border-radius: 17px;
    box-shadow: none;
}

.document-file-card {
    padding: 8px 9px;
    border-radius: 13px;
    background: var(--hover);
}

.document-file-link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.document-file-icon {
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--text-sec);
    background: var(--surface-raised);
}

.document-file-type-icon { width: 21px; height: 21px; }
.document-file-details { flex: 1; min-width: 0; }
.document-file-name {
    display: block;
    overflow: hidden;
    color: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.document-file-details small {
    display: block;
    margin-top: 2px;
    color: var(--text-sec);
    font-size: 11px;
}
.document-file-download { flex: 0 0 21px; width: 21px; height: 21px; color: var(--text-sec); }
.msg-row .bubble.document-bubble .meta,
.msg-row.own .bubble.document-bubble .meta,
.msg-row .bubble.document-bubble .tick-icon {
    color: var(--text-sec);
}
.msg-row .bubble.document-bubble .msg-content {
    display: block;
    padding: 5px 7px 0;
    color: var(--text-sec);
    font-size: 13px;
}
.business-name-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 5px;
    flex: 0 0 16px;
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--text-main);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.business-avatar-badge::after {
    content: "✓";
    position: absolute;
    right: -2px;
    bottom: -2px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--text-main);
    font-size: 10px;
    font-weight: 600;
    box-sizing: border-box;
}
.premium-avatar-wrap.has-premium.business-avatar-badge::after,
.avatar.has-premium.business-avatar-badge::after,
.chat-item-avatar.has-premium.business-avatar-badge::after,
.msg-avatar.has-premium.business-avatar-badge::after,
.msg-row .has-premium.business-avatar-badge::after {
    content: "✓";
    inset: auto -2px -2px auto;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--text-main);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    box-sizing: border-box;
    z-index: 5;
}

.premium-avatar-wrap.has-premium.business-avatar-badge img,
.avatar.has-premium.business-avatar-badge img,
.chat-item-avatar.has-premium.business-avatar-badge img,
.msg-avatar.has-premium.business-avatar-badge img,
.msg-row .has-premium.business-avatar-badge img {
    border: 2px solid var(--surface);
    box-sizing: border-box;
}

.calls-item-avatar.business-avatar-badge {
    position: relative;
    overflow: visible;
}
.calls-item-avatar.business-avatar-badge img { border-radius: 50%; }

.business-menu-status {
    margin-left: auto;
    margin-right: 8px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
}

.business-account-overlay {
    z-index: 10020;
    padding: 24px;
    overscroll-behavior: contain;
}

.business-account-modal,
.modal.business-account-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: min(980px, calc(100vw - 48px));
    max-width: 980px;
    height: min(880px, calc(100dvh - 48px));
    max-height: calc(100dvh - 48px);
    padding: 0;
    overflow: hidden;
    background: var(--bg-body);
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    border-radius: 16px;
    box-shadow: none;
    box-sizing: border-box;
}

.business-account-modal h2,
.business-account-modal h3,
.business-account-modal p,
.business-account-modal .text-sec,
.business-account-modal .bold {
    max-width: none;
    margin: 0;
    text-align: left;
    word-break: normal;
    overflow-wrap: break-word;
}

.business-page-header {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 132px;
    align-items: center;
    gap: 16px;
    min-height: 74px;
    padding: 10px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 38%, transparent);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-sizing: border-box;
}

.business-back-btn {
    justify-self: start;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    color: var(--text-main);
    font-size: 24px;
    line-height: 1;
}

.business-page-title {
    min-width: 0;
    text-align: center;
}

.business-page-header .business-page-title h2 {
    margin: 0;
    text-align: center;
    white-space: nowrap;
    font-size: 21px;
    line-height: 1.15;
}

.business-page-header .business-page-title .text-sec {
    margin-top: 3px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.business-save-top {
    justify-self: end;
    min-width: 132px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 14px;
}

.business-page-scroll {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 22px 26px max(44px, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    box-sizing: border-box;
}

.business-page-scroll::-webkit-scrollbar { width: 8px; }
.business-page-scroll::-webkit-scrollbar-track { background: transparent; }
.business-page-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 16px;
    background: color-mix(in srgb, var(--text-sec) 42%, transparent);
    background-clip: padding-box;
}

.business-card {
    width: 100%;
    border-radius: 16px;
    background: var(--surface);
    overflow: hidden;
    box-sizing: border-box;
}

.business-preview-card {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 132px;
    padding: 22px 24px;
}

.business-preview-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.business-logo-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
}
.business-logo-wrap img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 50%;
}
.business-logo-wrap button {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--text-main);
    cursor: pointer;
}
.business-preview-name {
    max-width: 100%;
    overflow: hidden;
    color: var(--text-main);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.business-preview-description {
    max-width: 620px;
}
.business-company-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 7px 0 5px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
}
.business-company-label span {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--text-main);
    font-size: 10px;
}

.business-section-title,
.business-page-scroll > .ios-section-header {
    margin: 22px 4px 9px;
    padding: 0;
    color: var(--text-sec);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .045em;
    line-height: 1.2;
    text-transform: uppercase;
}

.business-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 18px;
    padding: 22px;
}
.business-form-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.business-field-description,
.business-field-services,
.business-field-socialLinks,
.business-field-additionalLinks,
.business-field-additionalInfo { grid-column: 1 / -1; }
.business-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    color: var(--text-sec);
    font-size: 12px;
    font-weight: 600;
}
.business-field > span {
    padding-inline: 2px;
    line-height: 1.3;
}
.business-field input,
.business-field textarea,
.business-hour-row input[type="time"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid transparent;
    outline: none;
    border-radius: 14px;
    background: var(--bg-body);
    color: var(--text-main);
    padding: 13px 14px;
    font: inherit;
    font-size: 14px;
    line-height: 1.35;
    resize: vertical;
}
.business-field input { min-height: 48px; }
.business-field textarea { min-height: 104px; max-height: 260px; }
.business-field input:hover,
.business-field textarea:hover { border-color: color-mix(in srgb, var(--border) 60%, transparent); }
.business-field input:focus,
.business-field textarea:focus {
    border-color: var(--border);
    box-shadow: none;
}
.business-field input:disabled,
.business-field textarea:disabled { opacity: .58; cursor: not-allowed; }

.business-hours { padding: 6px 22px; }
.business-hour-row {
    display: grid;
    grid-template-columns: 42px minmax(128px, 168px) 18px minmax(128px, 168px) minmax(120px, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 13px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
    color: var(--text-main);
}
.business-hour-row:last-child { border-bottom: none; }
.business-hour-row > strong { font-size: 15px; }
.business-hour-row > span { text-align: center; }
.business-hour-row input[type="time"] {
    min-height: 46px;
    padding: 11px 12px;
}
.business-hour-row label {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-sec);
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}
.business-hour-row label input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
}
.business-notice {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--surface-raised);
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.45;
}
.business-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}
.business-actions .btn { min-height: 50px; border-radius: 16px; }
.business-disable-btn { border: 1px solid var(--border); background: transparent; color: var(--danger); }
.business-disable-btn:disabled { opacity: .5; }
.partner-business-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--text-main); }
.partner-business-row { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr); gap: 12px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--border) 25%, transparent); font-size: 13px; }
.partner-business-row span { color: var(--text-sec); }
.partner-business-row strong, .partner-business-row a { color: var(--text-main); overflow-wrap: anywhere; text-align: right; }
.partner-business-row a { color: var(--primary); text-decoration: none; }

@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #modal-business-account.business-account-overlay {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
        background: var(--bg-body);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #modal-business-account .business-account-modal,
    #modal-business-account .modal.business-account-modal {
        position: fixed;
        inset: 0;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
        animation: none;
    }

    .business-page-header {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 8px;
        min-height: calc(64px + env(safe-area-inset-top));
        padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    }
    .business-back-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }
    .business-page-header .business-page-title h2 { font-size: 18px; }
    .business-page-header .business-page-title .text-sec { font-size: 11px; }
    .business-save-top {
        min-width: 0;
        min-height: 40px;
        padding: 0 14px;
        border-radius: 13px;
        font-size: 14px;
    }

    .business-page-scroll {
        padding: 16px 14px max(34px, calc(18px + env(safe-area-inset-bottom)));
        scrollbar-gutter: auto;
    }
    .business-page-scroll::-webkit-scrollbar { width: 0; }
    .business-card { border-radius: 20px; }
    .business-preview-card {
        align-items: center;
        gap: 15px;
        min-height: 116px;
        padding: 18px;
    }
    .business-logo-wrap,
    .business-logo-wrap img {
        width: 76px;
        height: 76px;
    }
    .business-logo-wrap { flex-basis: 76px; }
    .business-logo-wrap button { width: 29px; height: 29px; font-size: 13px; }
    .business-preview-name { font-size: 20px; }
    .business-preview-description { font-size: 12px; line-height: 1.35; }

    .business-section-title,
    .business-page-scroll > .ios-section-header { margin: 20px 4px 8px; }
    .business-form-grid,
    .business-form-grid.two-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
        padding: 18px;
    }
    .business-field-description,
    .business-field-services,
    .business-field-socialLinks,
    .business-field-additionalLinks,
    .business-field-additionalInfo { grid-column: auto; }
    .business-field input,
    .business-field textarea { font-size: 16px; }

    .business-hours { padding: 4px 16px; }
    .business-hour-row {
        grid-template-columns: 30px minmax(0, 1fr) 12px minmax(0, 1fr);
        grid-template-areas:
            "day open separator close"
            ". closed closed closed";
        gap: 8px;
        padding: 13px 0;
    }
    .business-hour-row > strong { grid-area: day; }
    .business-hour-row > .business-hour-open { grid-area: open; }
    .business-hour-row > span { grid-area: separator; }
    .business-hour-row > .business-hour-close { grid-area: close; }
    .business-hour-row > label {
        grid-area: closed;
        justify-self: start;
        min-height: 26px;
    }
    .business-hour-row input[type="time"] {
        min-width: 0;
        min-height: 44px;
        padding: 9px 8px;
        font-size: 14px;
    }
}

@media (max-width: 390px) {
    .business-page-header {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        padding-inline: 8px;
    }
    .business-page-header .business-page-title h2 { font-size: 16px; }
    .business-save-top { padding-inline: 11px; font-size: 13px; }
    .business-page-scroll { padding-inline: 10px; }
    .business-preview-card { gap: 12px; padding: 16px; }
    .business-logo-wrap,
    .business-logo-wrap img { width: 66px; height: 66px; }
    .business-logo-wrap { flex-basis: 66px; }
    .business-preview-name { font-size: 18px; }
    .business-hours { padding-inline: 12px; }
    .business-hour-row { grid-template-columns: 27px minmax(0, 1fr) 9px minmax(0, 1fr); gap: 6px; }
    .business-hour-row input[type="time"] { padding-inline: 5px; font-size: 13px; }
}
.call-feedback-overlay {
    position: fixed;
    inset: 0;
    z-index: 100020;
    display: grid;
    place-items: center;
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    overflow-y: auto;
    background: var(--surface-raised);
    isolation: isolate;
}
.call-feedback-overlay.hidden { display: none; }
.call-feedback-card {
    position: relative;
    z-index: 2;
    width: min(438px, calc(100vw - 28px));
    overflow: hidden;
    border-radius: 16px;
    color: var(--cf-text);
    background:
        var(--surface-raised);
    border: 1px solid var(--border);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
}
.call-feedback-overlay[data-profile="maximum_beauty"] .call-feedback-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--border);
}
.call-feedback-overlay[data-profile="maximum_optimization"] .call-feedback-card {
    background: var(--cf-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
.call-feedback-overlay[data-profile="maximum_optimization"] .call-feedback-orb { display: none; }
.call-feedback-view { padding: 17px 24px 13px; text-align: center; }
.call-feedback-icon { width: 118px; height: 118px; object-fit: contain; display: block; margin: 0 auto 2px; }
.call-feedback-view h2, .call-feedback-thanks h2 {
    margin: 0;
    color: var(--cf-text);
    font-size: clamp(24px, 6vw, 29px);
    line-height: 1.15;
    letter-spacing: -.55px;
    font-weight: 600;
}
.call-feedback-lead { margin: 10px 0 0; color: var(--cf-muted); font-size: 15.5px; line-height: 1.45; font-weight: 500; }
.call-feedback-divider { height: 1px; margin: 20px 0; background: var(--surface-raised); }
.call-feedback-label { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.call-feedback-stars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.call-feedback-stars button { appearance: none; border: 0; background: none; color: var(--cf-muted); padding: 0; cursor: pointer; font: inherit; }
.call-feedback-stars button > span {
    width: 53px; height: 53px; max-width: 100%; margin: auto;
    display: grid; place-items: center; border-radius: 50%;
    font-size: 34px; line-height: 1;
    background: var(--hover); border: 1px solid var(--border);
    transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
.call-feedback-stars button.selected { color: var(--primary); }
.call-feedback-stars button.selected > span { transform: translateY(-2px) scale(1.04); background: color-mix(in srgb, var(--primary) 19%, transparent); border-color: color-mix(in srgb, var(--primary) 72%, var(--border));  }
.call-feedback-stars button small { display: block; margin-top: 7px; font-size: 14px; font-weight: 600; }
.call-feedback-comment-wrap { position: relative; margin-top: 19px; }
.call-feedback-comment-wrap textarea {
    display: block; width: 100%; min-height: 82px; resize: none;
    border: 1px solid var(--border); border-radius: 19px;
    padding: 14px 15px 27px; background: var(--hover); color: var(--cf-text);
    font: 500 14px/1.4 inherit; outline: 0;
}
.call-feedback-comment-wrap textarea:focus { border-color: var(--primary); box-shadow: none; }
.call-feedback-comment-wrap textarea::placeholder { color: var(--cf-muted); opacity: .75; }
.call-feedback-comment-wrap span { position: absolute; right: 14px; bottom: 9px; color: var(--cf-muted); font-size: 11px; }
.call-feedback-submit {
    width: 100%; height: 58px; margin-top: 13px; border: 0; border-radius: 16px; cursor: pointer;
    color: var(--text-main); font: 700 17px/1 inherit; background: var(--primary);
     transition: transform .15s ease, opacity .15s ease;
}
.call-feedback-submit:hover { transform: translateY(-1px); }
.call-feedback-submit:disabled { opacity: .62; cursor: wait; }
.call-feedback-close { appearance: none; border: 0; background: none; color: var(--primary); padding: 12px 28px; cursor: pointer; font: 700 16px/1.2 inherit; }
.call-feedback-thanks { position: relative; min-height: 430px; display: grid; place-content: center; text-align: center; overflow: hidden; }
.call-feedback-thanks.hidden { display: none; }
.call-feedback-thanks p { color: var(--cf-muted); font-size: 15.5px; line-height: 1.45; margin: 10px 0 0; }
.call-feedback-check { width: 112px; height: 112px; margin: 0 auto 30px; border-radius: 50%; display: grid; place-items: center; color: var(--text-main); font-size: 64px; font-weight: 400; background: var(--surface-raised);  animation: none; }
.call-feedback-thanks i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--surface-raised); box-shadow: none; animation: none; }
.call-feedback-thanks i:nth-of-type(1){left:18%;top:23%}.call-feedback-thanks i:nth-of-type(2){right:18%;top:28%;background:var(--surface-raised)}.call-feedback-thanks i:nth-of-type(3){left:23%;bottom:25%;background:var(--surface-raised)}.call-feedback-thanks i:nth-of-type(4){right:22%;bottom:22%}.call-feedback-thanks i:nth-of-type(5){left:11%;top:51%}.call-feedback-thanks i:nth-of-type(6){right:11%;top:48%;background:var(--surface-raised)}
.call-feedback-orb { position: fixed; border-radius: 50%; filter: blur(70px); opacity: 0; pointer-events: none; }
.call-feedback-overlay[data-profile="maximum_beauty"] .call-feedback-orb { opacity: .25; }
.call-feedback-orb--one { width: 300px; height: 300px; left: -90px; top: 16%; background: var(--surface-raised); }
.call-feedback-orb--two { width: 320px; height: 320px; right: -110px; bottom: 12%; background: var(--surface-raised); }
@keyframes callFeedbackIn { from{opacity:0;transform:scale(.93) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes callFeedbackCheck { from{opacity:0;transform:scale(.2) rotate(-18deg)} to{opacity:1;transform:scale(1) rotate(0)} }
@keyframes callFeedbackSpark { from{opacity:0;transform:scale(.1)} 45%{opacity:1} to{opacity:.2;transform:scale(1.6)} }
@media (max-height: 730px) {
    .call-feedback-view { padding-top: 12px; }
    .call-feedback-icon { width: 92px; height: 92px; }
    .call-feedback-divider { margin-block: 14px; }
    .call-feedback-comment-wrap { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .call-feedback-card, .call-feedback-check, .call-feedback-thanks i { animation: none; }
}
.birthday-banner-slot {
    margin: 0 12px 10px;
}

.birthday-banner-card {
    position: relative;
    min-height: 168px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-raised);
    box-shadow: none;
}

.birthday-banner-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
}

.birthday-banner-art--dark { display: none; }

[data-theme="dark"] .birthday-banner-art--light,
[data-theme="neon"] .birthday-banner-art--light,
[data-theme="love"] .birthday-banner-art--light,
[data-theme="forest"] .birthday-banner-art--light,
[data-theme="sunset"] .birthday-banner-art--light { display: none; }

[data-theme="dark"] .birthday-banner-art--dark,
[data-theme="neon"] .birthday-banner-art--dark,
[data-theme="love"] .birthday-banner-art--dark,
[data-theme="forest"] .birthday-banner-art--dark,
[data-theme="sunset"] .birthday-banner-art--dark { display: block; }

.birthday-banner-copy {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 168px;
    padding: 17px 72px 14px 86px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.birthday-banner-kicker {
    color: var(--text-sec);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
}

.birthday-banner-title {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.birthday-banner-subtitle {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    color: var(--text-sec);
    font-size: 11px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.birthday-banner-action {
    margin-top: 10px;
    padding: 8px 17px;
    border: 0;
    border-radius: 16px;
    background: var(--surface-raised);
    color: var(--text-main);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.birthday-banner-close {
    position: absolute;
    z-index: 2;
    top: 6px;
    right: 6px;
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    background: transparent;
    color: var(--text-sec);
    cursor: pointer;
    font-size: 20px;
}

.birthday-setting-label {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.birthday-setting-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 9px;
    place-items: center;
    color: var(--text-main);
}

.birthday-setting-icon svg { width: 17px; height: 17px; }
.birthday-setting-icon--date { background: var(--surface-raised); }
.birthday-setting-icon--visibility { background: var(--surface-raised); }

.birthday-date-input {
    max-width: 148px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    text-align: right;
}

.birthday-composer-overlay {
    position: fixed;
    z-index: 100010;
    inset: 0;
    display: grid;
    padding: 18px;
    place-items: center;
    background: rgba(0, 0, 0, .42);
    backdrop-filter: none;
}

.birthday-composer {
    width: min(480px, 100%);
    max-height: min(720px, calc(100dvh - 36px));
    overflow: auto;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: none;
}

.birthday-composer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.birthday-composer-title { color: var(--text-main); font-size: 20px; font-weight: 600; }
.birthday-composer-close { border: 0; background: transparent; color: var(--text-sec); cursor: pointer; font-size: 25px; }
.birthday-recipient-list { max-height: 230px; margin: 14px 0; overflow: auto; }

.birthday-recipient-row {
    display: flex;
    min-height: 46px;
    padding: 4px 2px;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    cursor: pointer;
}

.birthday-recipient-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    place-items: center;
    background: var(--surface-raised);
    color: var(--text-sec);
    font-weight: 600;
}

.birthday-composer textarea {
    width: 100%;
    min-height: 116px;
    padding: 13px 14px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 16px;
    outline: 0;
    background: var(--bg-body);
    color: var(--text-main);
    font: inherit;
    line-height: 1.4;
}

.birthday-composer-send { width: 100%; min-height: 48px; margin-top: 12px; border-radius: 15px; }

@media (max-width: 420px) {
    .birthday-banner-copy { padding-right: 62px; padding-left: 76px; }
    .birthday-banner-title { font-size: 14px; }
    .birthday-banner-subtitle { font-size: 10.5px; }
    .birthday-settings-group .setting-row { height: auto; min-height: 54px; gap: 10px; }
    .birthday-setting-label { font-size: 14px; }
}

.partner-birthday {
    position: relative;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--text-sec);
}

.partner-birthday-date { font-size: 13px; font-weight: 600; }
.partner-birthday-near { margin-top: 3px; color: var(--primary); font-size: 13px; font-weight: 600; }
.partner-birthday-near.is-today { color: var(--danger); }

.partner-birthday-emoji {
    display: inline-block;
    margin-top: 5px;
    font-size: 38px;
    line-height: 1;
    transform-origin: 50% 80%;
    animation: none;
}

@keyframes partner-birthday-celebrate {
    0%, 100% { transform: translateY(0) rotate(-7deg) scale(1); }
    45% { transform: translateY(-5px) rotate(8deg) scale(1.12); }
    70% { transform: translateY(0) rotate(-2deg) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    .partner-birthday-emoji { animation: none; }
}
#message-request-banner {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    margin: calc(74px + env(safe-area-inset-top, 0px)) 14px 8px;
    padding: 12px 14px;
    max-height: calc(100% - 90px - env(safe-area-inset-top, 0px));
    overflow: auto;
    overflow-wrap: anywhere;
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    z-index: 2;
}

#active-chat:has(#message-request-banner:not(.hidden)) > .chat-pins-container:has(#pinned-bar:not(.hidden)) {
    flex: 0 0 auto;
    margin-top: calc(74px + env(safe-area-inset-top, 0px));
}

#active-chat:has(#message-request-banner:not(.hidden)) #pinned-bar:not(.hidden) {
    position: relative;
    flex: 0 0 auto;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    margin: 0 auto;
}

#active-chat:has(#pinned-bar:not(.hidden)) > #message-request-banner {
    margin-top: 12px;
    max-height: calc(100% - 150px - env(safe-area-inset-top, 0px));
}

#active-chat:has(#message-request-banner:not(.hidden)) #pinned-list-dropdown {
    top: calc(100% + 8px);
}

#active-chat:has(#message-request-banner:not(.hidden)) > .messages {
    min-height: 0;
    padding-top: 12px;
    padding-bottom: 16px;
}
#input-container:has(#photo-attachments) {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    transition: background-color 180ms ease, border-color 180ms ease;
}
#input-container:has(#photo-attachments:not(.hidden)) {
    flex-wrap: wrap;
    border-radius: 16px;
}
#input-container:has(#photo-attachments:not(.hidden)) .input-wrapper { min-width: 0; }
.photo-attachments {
    flex: 0 0 100%;
    min-width: 0;
    padding: 8px 8px 10px;
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-main);
    box-sizing: border-box;
}
.photo-attachments-header, .photo-attachments-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.photo-attachments-header { margin-bottom: 10px; }
.photo-attachments-count { flex: 1; font-size: 13px; font-weight: 600; }
.photo-attachments-add, .photo-attachments-clear, .photo-attachments-timer {
    border: 0;
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    border-radius: 10px;
    padding: 7px 10px;
    cursor: pointer;
    flex-shrink: 0;
}
.photo-attachments-clear { width: 32px; height: 32px; padding: 0; font-size: 23px; }
.photo-attachments button:disabled { opacity: .45; cursor: default; }
.photo-attachments button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.photo-attachments-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 376px; gap: 8px; }
#input-container:has(#photo-attachments:not(.hidden)) #msg-input {
    height: var(--photo-caption-height, 40px);
    min-height: 40px; max-height: 96px; overflow-y: auto;
}
.photo-attachment-tile {
    position: relative;
    aspect-ratio: 1;
    min-width: 0;
    overflow: hidden;
    border-radius: 14px;
    background: var(--bg-secondary, var(--glass-border));
    border: 1px solid var(--glass-border);
}
.photo-attachment-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-attachment-remove {
    position: absolute;
    top: 4px; right: 4px;
    width: 28px; height: 28px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--text-main);
    font-size: 20px; line-height: 1;
    cursor: pointer;
}
.photo-attachments-footer { margin-top: 8px; justify-content: space-between; }
#photo-attachments-status { min-width: 0; font-size: 11px; color: var(--text-sec); overflow-wrap: anywhere; }
.photo-attachments-motion { opacity: 1; transform: translateY(0); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
@starting-style {
    .photo-attachments-motion:not(.hidden) { opacity: 0; transform: translateY(6px); }
}
#active-chat:has(#photo-attachments:not(.hidden)) > .messages {
    padding-bottom: calc(var(--photo-composer-height, 230px) + 28px);
}
#active-chat:has(#photo-attachments:not(.hidden)) #fwd-indicator,
#active-chat:has(#photo-attachments:not(.hidden)) #edit-indicator {
    bottom: calc(var(--photo-composer-height, 230px) + 20px);
}
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .photo-attachments { padding: 8px 4px; }
    .photo-attachments-grid { gap: 6px; }
    .photo-attachments-add { padding: 7px 8px; }
    #active-chat:has(#photo-attachments:not(.hidden)) #fwd-indicator,
    #active-chat:has(#photo-attachments:not(.hidden)) #edit-indicator { bottom: calc(var(--photo-composer-height, 230px) + 12px); }
}
@media (max-width: 480px) {
    #input-container:has(#photo-attachments:not(.hidden)) .photo-attachments { order: -2; }
    #input-container:has(#photo-attachments:not(.hidden)) .input-wrapper { order: -1; flex: 0 0 100%; }
    #input-container:has(#photo-attachments:not(.hidden)) .action-btn-container { margin-left: auto; }
}
@media (hover: hover) and (pointer: fine) {
    .photo-attachments-add:not(:disabled):hover, .photo-attachments-timer:not(:disabled):hover {
        background: color-mix(in srgb, var(--primary) 16%, transparent);
    }
    .photo-attachment-remove:not(:disabled):hover { background: var(--surface-raised); }
}
@media (prefers-reduced-motion: reduce) {
    .photo-attachments-motion { transform: none; transition: none; }
    @starting-style { .photo-attachments-motion:not(.hidden) { opacity: 1; transform: none; } }
}
#modal-thread .thread-panel-header { top: calc(12px + env(safe-area-inset-top, 0px)); }
#modal-thread .thread-close-button { color: var(--text-main); }
#modal-thread .thread-close-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#thread-input { min-width: 0; min-height: 30px; max-height: 96px; padding: 4px 0; line-height: 1.4; resize: none; }
#thread-feed { min-height: 0; padding-top: calc(84px + env(safe-area-inset-top, 0px)); padding-bottom: 148px; }
#thread-input-bar { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1100px) {
    #active-chat.thread-panel-open { --thread-panel-width: min(400px, 42%); }
    #active-chat.thread-panel-open #modal-thread { width: var(--thread-panel-width); z-index: 1200; animation: none; }
    #active-chat.thread-panel-open > #messages-feed {
        width: calc(100% - var(--thread-panel-width));
        margin-right: 0;
        transition: none;
    }
    #active-chat.thread-panel-open > .chat-header,
    #active-chat.thread-panel-open > .input-area,
    #active-chat.thread-panel-open > #fwd-indicator,
    #active-chat.thread-panel-open > #edit-indicator,
    #active-chat.thread-panel-open > #long-text-attachment {
        left: calc((100% - var(--thread-panel-width)) / 2);
        width: calc(100% - var(--thread-panel-width) - 40px);
        margin-right: 0;
        transition: none;
    }
    #active-chat.thread-panel-open #pinned-bar,
    #active-chat.thread-panel-open #pinned-list-dropdown {
        left: calc((100% - var(--thread-panel-width)) / 2);
        right: auto;
        width: calc(100% - var(--thread-panel-width) - 40px);
        transform: translateX(-50%);
        transition: none;
    }
    #active-chat.thread-panel-open > #message-request-banner { margin-right: calc(var(--thread-panel-width) + 14px); }
}
@media (prefers-reduced-motion: reduce) { #modal-thread { animation: none; } }
.chat-header-controls .channel-broadcast-button svg {
    display: block;
    width: 22px; height: 22px;
    flex-shrink: 0; stroke-width: 1.8;
}
.channel-broadcast-button[data-live="true"] { background: var(--surface-raised); }
            .ios-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 12px 16px;
                border-bottom: 1px solid var(--border);
                height: 54px;
                background: var(--surface-raised);
            }

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

            .select-wrapper select {
                appearance: none;
                border: none;
                background: transparent;
                color: var(--primary);
                font-size: 16px;
                padding-right: 15px;
                cursor: pointer;
                outline: none;
                direction: rtl;
                font-weight: 400;
            }
            .modal-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.4);
                backdrop-filter: none;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
                opacity: 1;
                transition: opacity 0.3s ease;
            }

            .modal-overlay.hidden {
                opacity: 0;
                pointer-events: none;
            }

            .apple-modal {
                background: var(--surface-raised);
                width: 90%;
                max-width: 800px;
                max-height: 85vh;
                border-radius: 16px;
                box-shadow: none;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                font-family: var(--font);
                color: var(--text-sec);
            }
            .apple-header {
                padding: 20px 24px;
                border-bottom: 1px solid var(--border);
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: var(--hover);
                backdrop-filter: none;
            }

            .apple-title {
                font-size: 20px;
                font-weight: 600;
                margin: 0;
                color: var(--text-main);
            }

            .apple-subtitle {
                font-size: 13px;
                color: var(--text-sec);
                margin: 4px 0 0 0;
            }

            .apple-close-btn {
                background: var(--surface-raised);
                border: none;
                border-radius: 50%;
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: var(--text-sec);
                transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;
            }

            .apple-close-btn:hover {
                background: var(--surface-raised);
                color: var(--text-sec);
            }

            .apple-close-btn svg {
                width: 18px;
                height: 18px;
            }
            .apple-content {
                padding: 24px;
                overflow-y: auto;
                flex: 1;
            }

            .apple-section {
                margin-bottom: 32px;
            }

            .apple-section:last-child {
                margin-bottom: 0;
            }

            .apple-section-title {
                font-size: 17px;
                font-weight: 600;
                margin-bottom: 16px;
                color: var(--text-main);
            }

            .apple-text {
                font-size: 15px;
                line-height: 1.5;
                color: var(--text-sec);
            }
            .apple-segmented-control {
                padding: 16px;
                overflow-x: auto;
            }

            .apple-code-block-wrapper.hidden {
                display: none;
            }

            .apple-pre {
                margin: 0;
                font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
                font-size: 13px;
                line-height: 1.4;
            }
            .apple-api-list {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            .apple-api-card {
                background: var(--surface-raised);
                border: 1px solid var(--border);
                border-radius: 12px;
                overflow: hidden;
                transition: border-color 0.2s;
            }

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

            .api-card-head {
                padding: 12px 16px;
                background: var(--surface-raised);
                border-bottom: 1px solid var(--border);
                font-family: "SF Mono", Menlo, monospace;
                font-size: 14px;
                font-weight: 600;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .method-tag {
                font-size: 11px;
                padding: 3px 6px;
                border-radius: 4px;
                font-weight: 600;
                text-transform: uppercase;
            }

            .method-tag.post {
                background: var(--surface-raised);
                color: var(--text-main);
            }

            .api-card-body {
                padding: 16px;
                font-size: 14px;
                color: var(--text-sec);
            }

            .api-returns {
                margin-top: 12px;
                font-size: 13px;
                color: var(--text-sec);
            }

            .api-returns code {
                background: var(--surface-raised);
                padding: 2px 4px;
                border-radius: 4px;
                color: var(--text-main);
            }

            .api-params-list {
                margin: 12px 0 0 0;
                padding-left: 20px;
            }

            .api-params-list li {
                margin-bottom: 6px;
                color: var(--text-sec);
            }

            .param-key {
                font-family: "SF Mono", Menlo, monospace;
                font-weight: 600;
                color: var(--text-main);
            }

            .param-type {
                color: var(--text-sec);
                font-size: 12px;
            }
            .apple-content::-webkit-scrollbar {
                width: 8px;
            }

            .apple-content::-webkit-scrollbar-track {
                background: transparent;
            }

            .apple-content::-webkit-scrollbar-thumb {
                background-color: var(--surface-raised);
                border-radius: 4px;
                border: 2px solid var(--border);
            }
        

            @keyframes qrScanMove {

                0%,
                100% {
                    top: 20px;
                }

                50% {
                    top: calc(100% - 22px);
                }
            }

            .qr-spinner {
                width: 32px;
                height: 32px;
                border: 3px solid var(--border);
                border-top-color: var(--primary, var(--border));
                border-radius: 50%;
                animation: spin 0.8s linear infinite;
            }

            @keyframes spin {
                to {
                    transform: rotate(360deg);
                }
            }
            .thread-modal-wrap {
                position: fixed;
                inset: 0;
                z-index: 5100;
                background: var(--bg-body);
                display: flex;
                flex-direction: column;
                overflow: hidden;
                animation: none;
            }

            @keyframes threadSlide {
                from {
                    transform: translateX(100%);
                    opacity: 0;
                }

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

            @keyframes threadDot {

                0%,
                80%,
                100% {
                    opacity: 0.3;
                    transform: scale(0.7);
                }

                40% {
                    opacity: 1;
                    transform: scale(1);
                }
            }
            @media (min-width: 1100px) {
                .thread-modal-wrap {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: auto;
                    width: min(400px, 45%);
                    border-left: 1px solid var(--border);
                    box-shadow: none;
                    z-index: 1200;
                }
                #active-chat.thread-panel-open #messages-feed {
                    margin-right: min(400px, 45%);
                    transition: margin-right 0.25s;
                }

                #active-chat.thread-panel-open .input-area {
                    margin-right: min(400px, 45%);
                    transition: margin-right 0.25s;
                }

                #active-chat.thread-panel-open .chat-header {
                    margin-right: min(400px, 45%);
                    transition: margin-right 0.25s;
                }

                #active-chat.thread-panel-open #pinned-bar {
                    right: calc(min(400px, 45%) + 12px);
                    transition: right 0.25s;
                }

                #active-chat.thread-panel-open #pinned-list-dropdown {
                    right: calc(min(400px, 45%) + 12px);
                    transition: right 0.25s;
                }
            }
        

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

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


    .security-restriction-screen{position:fixed;inset:0;z-index:100000;background:var(--surface-raised);display:flex;align-items:center;justify-content:center;padding:22px;overflow:auto}.security-restriction-screen.hidden,.security-warning-banner.hidden{display:none}.security-restriction-card{width:min(100%,480px);text-align:center;color:var(--text-main)}.security-shield-art{display:inline-flex;width:142px;height:142px}.security-shield-art svg,.account-center-art svg,.security-warning-icon svg{display:block;width:100%;height:100%}.security-restriction-card h1{font-size:30px;line-height:1.15;margin:12px 0 18px}.security-restriction-card p{color:var(--text-sec);line-height:1.5}.security-reason{color:var(--text-sec);font-size:14px}.security-fact{display:flex;flex-direction:column;align-items:flex-start;background:var(--surface-raised);border:1px solid var(--border);border-radius:20px;padding:14px 18px;margin:8px 0}.security-fact span{color:var(--text-sec);font-size:13px}.security-fact b{color:var(--text-sec);font-size:19px;margin-top:3px}.security-pill{width:100%;height:56px;border:0;border-radius:16px;color:var(--text-main);font-size:16px;font-weight:600;margin-top:10px;cursor:pointer}.security-pill.primary{background:var(--surface-raised)}.security-pill.secondary{background:var(--surface-raised);border:1px solid var(--border)}.security-warning-banner{position:fixed;z-index:90000;top:145px;left:22px;width:min(430px,calc(100vw - 44px));display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:16px;background:var(--surface-raised);color:var(--text-main);text-align:left;box-shadow:none}.security-warning-icon{display:block;flex:0 0 54px;width:54px;height:62px}.security-warning-banner>span:not(.security-warning-icon){display:flex;min-width:0;flex:1;flex-direction:column;gap:4px}.security-warning-banner b{line-height:1.25}.security-warning-banner small{color:var(--text-sec);line-height:1.25}.security-warning-banner strong{font-size:30px;color:var(--text-sec)}.account-center-card{position:relative;width:min(100%,620px);padding:28px;border:1px solid var(--border);border-radius:16px;background:var(--surface-raised);box-shadow:none;text-align:left}.account-center-close{position:absolute;right:18px;top:18px;width:44px;height:44px;border:0;border-radius:16px;background:var(--surface-raised);color:var(--text-main);font-size:28px;line-height:1;cursor:pointer}.account-center-heading{display:flex;align-items:center;gap:16px;padding-right:52px}.account-center-art{display:block;flex:0 0 72px;width:72px;height:72px}.account-center-eyebrow{color:var(--danger);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.account-center-heading h1{margin:4px 0 0;font-size:30px}.account-rating-card{margin-top:22px;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--surface-raised)}.account-rating-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.account-rating-row h2{margin:0;font-size:20px}.account-rating-row span{flex:0 0 auto;padding:7px 11px;border-radius:16px;background:var(--surface-raised);color:var(--text-sec);font-size:13px;font-weight:600}.account-rating-track{height:10px;margin-top:15px;border-radius:16px;background:var(--surface-raised);overflow:hidden}.account-rating-track i{display:block;height:100%;width:100%;background:var(--surface-raised);border-radius:inherit;transition:width .25s ease}.account-rating-card #account-rating-recovery{margin:10px 0 0;font-size:13px}.account-center-card #account-center-description{margin:18px 2px 0;font-size:14px}.account-center-section-title{margin:22px 2px 8px;color:var(--text-sec);font-size:13px;letter-spacing:.04em;text-transform:uppercase}.account-violation{background:var(--surface-raised);border:1px solid var(--border);border-radius:18px;padding:14px 16px;margin-top:8px;color:var(--text-main)}.account-violation.clickable{cursor:pointer}.account-violation-head{display:flex;align-items:center;gap:12px}.account-violation-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:3px}.account-violation-copy b{font-size:15px}.account-violation-copy small{color:var(--text-sec);font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.account-violation.expanded .account-violation-copy small{-webkit-line-clamp:unset}.account-violation-count{flex:0 0 auto;padding:6px 10px;border-radius:16px;background:var(--surface-raised);color:var(--text-sec);font-size:13px}.account-violation.ok{border-color:var(--border);background:var(--surface-raised)}.account-violation.ok .account-violation-count{background:var(--surface-raised);color:var(--text-sec)}.account-violation-chevron{flex:0 0 auto;width:20px;height:20px;color:var(--text-sec);transition:transform .18s}.account-violation.expanded .account-violation-chevron{transform:rotate(180deg)}.account-violation-details{display:none;margin:12px 0 0 35px;color:var(--text-sec);font-size:12px;line-height:1.3}.account-violation.expanded .account-violation-details{display:block}.account-violation-divider{border:none;border-top:0.7px solid var(--border);margin:12px 0}@media(max-width:600px){.security-restriction-screen{align-items:flex-start;padding:12px}.account-center-card{margin:auto 0;padding:22px 16px;border-radius:16px}.account-center-heading{gap:12px}.account-center-art{flex-basis:58px;width:58px;height:58px}.account-center-heading h1{font-size:25px}.account-rating-row{align-items:flex-start;flex-direction:column;gap:9px}.security-warning-banner{top:112px;left:12px;width:calc(100vw - 24px)}.security-warning-icon{flex-basis:46px;width:46px;height:54px}}

}
/* Знакора — matte neutral surfaces with a faint blue undertone, shared by every screen. */
:root {
  color-scheme: dark;
  --bg-body: #232425;
  --sidebar-bg: #282929;
  --surface: #2b2d2e;
  --surface-raised: #363a3e;
  --hover: #34383b;
  --active: #434445;
  --text-main: #edf0f2;
  --text-sec: #b6bec5;
  --text-muted: #a1abb4;
  --border: #464c51;
  --primary: #a4bdd1;
  --primary-hover: #b7ccdc;
  --primary-active: #94afc6;
  --accent-subtle: #303c43;
  --accent-border: #5b6c7b;
  --accent-text: #adc5d9;
  --on-primary: #20282f;
  --primary-grad: var(--primary);
  --msg-in: #2d3134;
  --msg-out: #34414b;
  --msg-out-grad: var(--msg-out);
  --text-msg-out: var(--text-main);
  --danger: #bdd3e5;
  --danger-bg: #2e3b46;
  --success: #a4bdd1;
  --scrim: rgb(12 18 24 / 58%);
  --glass-bg: var(--sidebar-bg);
  --glass-heavy: var(--surface);
  --glass-border: var(--border);
  --glass-shadow: 0 16px 56px rgb(0 0 0 / 22%);
  --shadow-popover: var(--glass-shadow);
  --focus-ring: var(--primary);
  --blur: 0px;
  --font: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--font);
  --radius: 12px;
  --bubble-radius: 16px;
  --bubble-radius-tail: 6px;
  --chat-font-size: 15px;
  --chat-wallpaper-default: none;
  --chat-wallpaper-color: var(--bg-body);
  --call-bg: var(--bg-body);
  --call-glass: var(--surface);
  --call-glass-btn: var(--surface-raised);
  --call-glass-end: var(--danger-bg);
  --call-text: var(--text-main);
  --call-text-sec: var(--text-sec);
  --call-enc: var(--text-sec);
  --call-border: var(--border);
  --call-active-btn: var(--primary);
  --call-active-text: var(--on-primary);
  --cf-surface: var(--surface);
  --cf-text: var(--text-main);
  --cf-muted: var(--text-sec);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-medium: 240ms;
  --motion-slow: 320ms;
  --motion-panel: var(--motion-medium);
  --space-md: 16px;
  --transition-base: var(--motion-normal) var(--ease-standard);
  --rail-width: 72px;
  --composer-height: 72px;
  --viewport-height: 100dvh;
  --bg-primary: var(--bg-body);
  --bg-secondary: var(--surface);
  --bg-tertiary: #34393d;
  --bg-elevated: var(--surface-raised);
  --chat-bg: var(--bg-body);
  --input-bg: #2e3337;
  --text-primary: var(--text-main);
  --text-secondary: var(--text-sec);
  --border-primary: var(--border);
  --border-subtle: #383e43;
  --hover-bg: var(--hover);
  --surface-hover: var(--hover);
  --bg-surface: var(--surface);
  --glass-light: var(--hover);
  --text: var(--text-main);
  --active-bg: var(--active);
  --accent-primary: var(--primary);
  --accent-hover: var(--primary-hover);
  --accent-contrast: var(--on-primary);
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-xl: 20px;
  --reference-blue: #007aff;
  --warning: #a4bdd1;
}
:root[data-theme='light'] {
  color-scheme: light;
  --bg-body: #f5f6f5;
  --sidebar-bg: #e6e9e7;
  --surface: #ebeeed;
  --surface-raised: #fcfdff;
  --bg-secondary: var(--surface);
  --bg-tertiary: #e2e7eb;
  --input-bg: #eff2f4;
  --hover: #dde1e1;
  --active: #dce9f6;
  --text-main: #272d32;
  --text-sec: #5d6770;
  --text-muted: #606b75;
  --border: #d8dfe4;
  --border-subtle: #e2e7eb;
  /* Muted blue keeps small white button labels readable. */
  --primary: #486986;
  --primary-hover: #3d5d79;
  --primary-active: #34516b;
  --accent-subtle: #eef6ff;
  --accent-border: #c1d3e5;
  --accent-text: #456782;
  --on-primary: #fff;
  --msg-in: #edf0f2;
  --msg-out: #e3ecf4;
  --text-msg-out: var(--text-main);
  --danger: #486986;
  --danger-bg: #eef6ff;
  --success: #486986;
  --scrim: rgb(22 30 38 / 24%);
  --glass-shadow: 0 16px 56px rgb(0 0 0 / 10%);
  --call-bg: var(--bg-body);
  --call-glass: var(--surface);
  --call-glass-btn: var(--surface-raised);
  --call-border: var(--border);
  --call-active-btn: var(--primary);
  --warning: #486986;
}
/* Each saved theme owns its entire surface and accent scale. IDs stay compatible. */
:root[data-theme='neon'] {
  --bg-body: #1b1e21; --sidebar-bg: #22262a; --surface: #282d32;
  --surface-raised: #32383e; --bg-tertiary: #2e343a; --input-bg: #252b30;
  --hover: #323b43; --active: #354653; --border: #404a53; --border-subtle: #303941;
  --text-main: #edf2f6; --text-sec: #b7c3cc; --text-muted: #9facb7;
  --primary: #a6c3d9; --primary-hover: #bdd2e2; --primary-active: #95b5cd;
  --accent-subtle: #293c4a; --accent-border: #536e83; --accent-text: #b5cfe3;
  --on-primary: #1c2a35; --msg-in: #292f35; --msg-out: #304454;
}
:root[data-theme='love'] {
  --bg-body: #29282a; --sidebar-bg: #302f32; --surface: #363639;
  --surface-raised: #414247; --bg-tertiary: #3b3c41; --input-bg: #323338;
  --hover: #404249; --active: #434e5b; --border: #53555c; --border-subtle: #414249;
  --text-main: #f1f0f3; --text-sec: #c4c3cc; --text-muted: #adafb9;
  --primary: #b5c3d7; --primary-hover: #c9d4e3; --primary-active: #a4b5cd;
  --accent-subtle: #3a4250; --accent-border: #657387; --accent-text: #c0cee1;
  --on-primary: #262b35; --msg-in: #37383d; --msg-out: #414c5b;
}
:root[data-theme='forest'] {
  --bg-body: #242a2b; --sidebar-bg: #2b3233; --surface: #31393a;
  --surface-raised: #3b4546; --bg-tertiary: #364142; --input-bg: #2d3638;
  --hover: #3a4648; --active: #405156; --border: #4d5a5d; --border-subtle: #394547;
  --text-main: #edf3f3; --text-sec: #bcc9ca; --text-muted: #a6b7b9;
  --primary: #a9c4ce; --primary-hover: #c0d5dc; --primary-active: #97b6c2;
  --accent-subtle: #34464d; --accent-border: #5b7782; --accent-text: #b9d1db;
  --on-primary: #202f34; --msg-in: #323c3f; --msg-out: #3a4f57;
}
:root[data-theme='sunset'] {
  --bg-body: #2c2b2c; --sidebar-bg: #343234; --surface: #3b393c;
  --surface-raised: #46454a; --bg-tertiary: #414045; --input-bg: #36363c;
  --hover: #45464d; --active: #485361; --border: #59585f; --border-subtle: #434249;
  --text-main: #f3f1f3; --text-sec: #cbc7ce; --text-muted: #b4afb9;
  --primary: #bbc7d7; --primary-hover: #d1dae5; --primary-active: #a9b9cf;
  --accent-subtle: #3f4856; --accent-border: #6c7a8b; --accent-text: #c7d4e4;
  --on-primary: #292d35; --msg-in: #3c3c41; --msg-out: #465261;
}
:root[data-bubble-style='classic'] { --bubble-radius: 17px; --bubble-radius-tail: 7px; }
:root[data-bubble-style='compact'] { --bubble-radius: 11px; --bubble-radius-tail: 5px; }

@layer system {
  *, *::before, *::after { box-sizing: border-box; }
  html { height: 100%; background: var(--bg-body); }
  body {
    margin: 0; height: var(--viewport-height); width: 100%; overflow: hidden;
    color: var(--text-main); background: var(--bg-body); font-family: var(--font);
    font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  }
  button, input, textarea, select { font: inherit; }
  button, [role='button'], a, input, textarea { -webkit-tap-highlight-color: transparent; }
  button { cursor: pointer; }
  button:disabled { cursor: default; opacity: .45; }
  h1, h2, h3, h4 { color: var(--text-main); font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
  h2 { font-size: 22px; } h3 { font-size: 18px; }
  a { color: var(--accent-text); text-underline-offset: 3px; }
  .bold { font-weight: 600; }
  .text-sec { color: var(--text-sec); }
  .text-xs { font-size: 12px; } .text-sm { font-size: 14px; }
  :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
  input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 1px; }
  ::selection { background: var(--primary); color: var(--on-primary); }
  * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
  ::-webkit-scrollbar { width: 5px; height: 4px; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
  svg.icon, .icon, .lucide { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.75; }
  svg[stroke='currentColor'] { stroke-width: 1.75; }
  .btn {
    min-height: 40px; padding: 10px 16px; border: 1px solid transparent; border-radius: 11px;
    background: var(--surface-raised); color: var(--text-main); font-size: 14px; font-weight: 500;
    box-shadow: none; display: inline-flex; gap: 8px; align-items: center; justify-content: center;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease,
      border-color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out);
  }
  .btn-primary { background: var(--primary); color: var(--on-primary) !important; border-color: var(--primary); }
  .btn-primary svg, .btn-primary .icon { color: var(--on-primary) !important; }
  .btn-danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
  .btn-ghost { background: transparent; color: var(--text-sec); }
  .btn-icon { padding: 0; width: 40px; height: 40px; min-height: 40px; flex-shrink: 0; border-radius: 10px; }
  .btn:active:not(:disabled) { transform: scale(.97); }
  .input, .search-input, .poll-create-input, .poll-option-input, .tb-input, .tb-textarea {
    width: 100%; min-width: 0; min-height: 44px; padding: 11px 14px;
    color: var(--text-main); background: var(--input-bg); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: none; font-size: 14px;
    transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
  }
  input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
  .input:focus, .search-input:focus, .poll-create-input:focus, .poll-option-input:focus { border-color: var(--primary); box-shadow: none; }
  textarea { resize: vertical; }
  select { color: var(--text-main); background: var(--surface-raised); accent-color: var(--primary); }
  input[type='checkbox'], input[type='radio'], input[type='range'] { accent-color: var(--primary); }

  /* Sign in, registration, verification and password recovery. */
  #view-auth {
    width: 100%; height: 100%; overflow: auto; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); align-items: center;
    padding: 48px max(48px, calc((100vw - 1240px) / 2)); gap: 72px; background: var(--bg-body);
  }
  #view-auth::before, #view-auth::after { display: none; }
  .auth-hero { max-width: 580px; margin: 0; padding: 0; position: static; text-align: left; }
  .auth-eyebrow { display: flex; align-items: center; gap: 12px; color: var(--text-main); margin-bottom: 80px; font-size: 19px; font-weight: 600; letter-spacing: -.04em; }
  .brand-mark { width: 32px; height: 32px; flex-shrink: 0; color: var(--primary); }
  .auth-hero-title { font-family: var(--font-display); font-size: clamp(40px, 4.5vw, 62px); font-weight: 400; line-height: 1.12; letter-spacing: -.035em; margin: 0 0 24px; }
  .auth-hero-subtitle { color: var(--text-sec); font-size: 16px; line-height: 1.75; max-width: 420px; margin: 0; }
  .auth-note { display: flex; align-items: center; gap: 8px; margin-top: 52px; font-size: 12px; color: var(--text-muted); }
  .auth-card {
    position: relative; width: 100%; max-width: 440px; height: auto; max-height: none; margin: 0;
    padding: 36px; border-radius: 20px; border: 1px solid var(--border);
    background: var(--sidebar-bg); box-shadow: none; backdrop-filter: none;
    display: flex; flex-direction: column; align-items: stretch; animation: none; overflow: visible;
  }
  .auth-card > .logo-img { display: none; }
  .auth-heading { margin: 0 0 6px; font-size: 24px; font-weight: 500; }
  .auth-caption { color: var(--text-sec); font-size: 13px; margin: 0 0 28px; }
  .auth-card .input { background: var(--bg-body); }
  .auth-card label { font-size: 12px; font-weight: 500; color: var(--text-sec); margin: 0 0 -4px; }
  .auth-card .btn-primary { min-height: 44px; }
  .auth-footer { font-size: 13px; }
  .auth-theme { position: absolute; right: 16px; top: 16px; }

  /* Desktop navigation and the independently scrolling conversation list. */
  #view-app { display: grid; grid-template-columns: var(--rail-width) 304px minmax(0, 1fr); height: 100%; width: 100%; overflow: hidden; }
  .nav-rail {
    display: flex; width: var(--rail-width); min-width: 0; height: 100%; padding: 24px 10px 12px;
    flex-direction: column; align-items: stretch; gap: 6px; background: var(--sidebar-bg);
    border-right: 1px solid var(--border); position: relative; z-index: 21;
  }
  .rail-brand { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin: 0 0 32px; padding: 0; background: transparent; color: var(--text-main); border: 0; }
  .rail-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
  .rail-topline .rail-brand { margin: 0; }
  .rail-collapse { width: 28px; height: 28px; min-height: 28px; display: none; }
  .rail-compose { margin-bottom: 20px; min-height: 40px; font-size: 13px; font-weight: 500; justify-content: flex-start; background: transparent; }
  .rail-wordmark { display: none; font-size: 20px; font-weight: 600; letter-spacing: -.045em; }
  .rail-caption { display: none; color: var(--text-muted); padding: 0 12px; margin-bottom: 6px; font-size: 11px; }
  .rail-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%;
    gap: 4px; padding: 9px 4px; margin: 0; min-height: 56px; border: 0; border-radius: 10px;
    background: transparent; color: var(--text-sec); font-size: 10px; font-weight: 500;
    cursor: pointer; transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
  }
  .rail-item.active { color: var(--accent-text); background: var(--accent-subtle); }
  .rail-item > span:not(.rail-icon-wrap), .rail-item.active > span:not(.rail-icon-wrap) { display: block; font-size: inherit; font-weight: 500; color: inherit; }
  .rail-icon-wrap { width: 24px; height: 24px; padding: 0; border-radius: 0; background: transparent; position: relative; }
  .rail-icon-wrap::before { display: none; }
  .rail-icon { width: 22px; height: 22px; stroke-width: 1.75; }
  .rail-icon-outline, .rail-item.active .rail-icon-outline { display: block; }
  .rail-icon-filled, .rail-item.active .rail-icon-filled { display: none; }
  .rail-badge { position: absolute; right: -8px; top: -5px; background: var(--primary); color: var(--on-primary); border: 2px solid var(--sidebar-bg); font-size: 9px; min-width: 18px; height: 18px; border-radius: 8px; }
  .rail-spacer { flex: 1; min-height: 16px; }
  .rail-profile { display: flex; gap: 10px; align-items: center; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--border); color: var(--text-main); background: transparent; margin-top: 10px; justify-content: center; border-radius: 0; }
  .rail-profile img { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; background: var(--surface-raised); }
  .rail-profile-copy { display: none; min-width: 0; text-align: left; }
  .rail-profile-name { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-profile-handle { display: block; color: var(--text-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar { width: 100%; min-width: 0; display: flex; flex-direction: column; overflow: hidden; height: 100%; background: var(--bg-body); border-right: 1px solid var(--border); backdrop-filter: none; }
  .sidebar-header { padding: 22px 20px 14px; min-height: 72px; height: auto; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
  .sidebar-header .logo-img { display: none; }
  .sidebar-header > .flex:first-of-type { display: none; }
  .sidebar-title { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.035em; }
  .sidebar-header .btn-icon { width: 32px; height: 32px; min-height: 32px; }
  .sidebar-header .btn-icon svg, .sidebar-header .btn-icon .lucide { width: 20px; height: 20px; }
  .tabs { display: none; }
  #btn-mobile-calls, #btn-mobile-search, #btn-get-premium { display: none !important; }
  .tab-btn { flex: 1; text-align: center; padding: 7px 10px; font-size: 12px; font-weight: 500; color: var(--text-sec); border-radius: 7px; border: 0; background: transparent; cursor: pointer; }
  .tab-btn.active { background: var(--active); color: var(--text-main); box-shadow: none; }
  .search-container { padding: 0 20px 16px; position: relative; flex-shrink: 0; }
  .search-input { min-height: 38px; padding: 8px 12px; background: var(--surface); border-color: transparent; font-size: 13px; }
  #desktop-search-input { padding-left: 36px; }
  .search-container::before { content: ''; position: absolute; left: 33px; top: 11px; width: 13px; height: 13px; border: 1.5px solid var(--text-muted); border-radius: 50%; pointer-events: none; }
  .search-container::after { content: ''; position: absolute; left: 45px; top: 23px; width: 5px; height: 1.5px; background: var(--text-muted); transform: rotate(45deg); pointer-events: none; }
  .chat-folder-rail { padding: 0 16px 12px; margin: 0; border-bottom: 1px solid var(--border); gap: 6px; min-height: 42px; }
  .chat-folder-chip { border: 0; background: transparent; color: var(--text-sec); font-size: 12px; border-radius: 8px; padding: 6px 10px; min-height: 30px; }
  .chat-folder-chip.active { background: var(--accent-subtle); color: var(--accent-text); }
  .chat-folder-edit { color: var(--text-sec); background: transparent; border-radius: 8px; width: 30px; height: 30px; }
  .list-container { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
  .list-item { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 0 0 2px; min-height: 76px; border: 0; border-radius: 11px; background: transparent; color: var(--text-main); box-shadow: none; cursor: pointer; transition: background-color var(--motion-fast) ease; }
  .list-item.active, .list-item.pinned.active { background: var(--active); color: var(--text-main); border: 0; box-shadow: none; }
  .list-item .bold { font-size: 13px; font-weight: 600; line-height: 1.4; }
  .list-item .text-sec, .list-item.active .text-sec { color: var(--text-sec); }
  .list-item .avatar { width: 44px; height: 44px; min-width: 44px; }
  .avatar, .avatar img { border-radius: 50%; }
  .avatar img { object-fit: cover; }
  .avatar { background: var(--surface-raised); }
  .avatar-type-badge { background: var(--surface-raised); color: var(--text-sec); border: 2px solid var(--bg-body); }
  .avatar-type-badge svg { stroke-width: 1.75; }
  .tick-read { color: var(--primary); }
  .date-pin-chip { gap: 4px; color: var(--text-muted); background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: 10px; padding: 0; }
  .list-item.active .date-pin-chip { color: var(--text-sec); background: transparent; }
  .unread-badge { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 7px; font-size: 10px; font-weight: 600; background: var(--primary); color: var(--on-primary); box-shadow: none; }
  .unread-badge.muted { background: var(--surface-raised); color: var(--text-sec); }
  .dot { width: 9px; height: 9px; border: 2px solid var(--bg-body); }
  .dot.online { background: var(--success); }
  .list-item.active .chip-date, .list-item.active .prev-ticks, .list-item.active .chip-pin-icon { color: var(--text-sec); }
  .admin-badge { background: var(--surface-raised); color: var(--text-sec); font-size: 8px; font-weight: 500; border-radius: 4px; }
  .stories-rail { background: transparent; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); }
  .story-item { width: 56px; min-width: 56px; }
  .story-avatar-wrap { width: 46px; height: 46px; }
  .story-ring { width: 46px; height: 46px; padding: 2px; border-radius: 50%; }
  .story-avatar { width: 42px; height: 42px; }
  .story-avatar-wrap, .story-ring, .story-avatar-ring { background: var(--border); box-shadow: none; }
  .app-promo-banner, .invite-card { flex-shrink: 0; margin: 12px 16px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: none; }
  .app-promo-title, .invite-card-title { color: var(--text-main); font-size: 13px; font-weight: 500; }
  .app-promo-text, .invite-card-body { color: var(--text-sec); font-size: 11px; line-height: 1.5; }
  .app-promo-icon, .invite-card-artwork { display: none; }
  .app-promo-btn, .invite-card-btn { background: var(--surface-raised); color: var(--text-main); border: 1px solid var(--border); border-radius: 8px; box-shadow: none; font-size: 12px; font-weight: 500; padding: 8px 12px; }
  .app-promo-close, .invite-card-close { color: var(--text-sec); background: transparent; }
  .calls-sort-btn { border-radius: 8px; color: var(--text-sec); background: transparent; }
  .calls-sort-btn.active { color: var(--text-main); background: var(--active); }

  /* Conversation: static content stays still, only occasional panels move. */
  .chat-area { position: relative; min-width: 0; width: 100%; max-width: none; height: 100%; margin: 0; border: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-body); transform: none; visibility: visible; }
  #empty-state { gap: 0; background: var(--bg-body); }
  #empty-state > .flex { width: 64px; height: 64px; margin-bottom: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: none; }
  #empty-state-icon { width: 28px; height: 28px; stroke: var(--text-sec); }
  #empty-state-title { max-width: 420px; font-family: var(--font-display); font-size: 30px; font-weight: 400; margin: 0 0 12px; }
  #empty-state-desc { max-width: 350px; font-size: 13px; line-height: 1.75; color: var(--text-sec); margin: 0; }
  .chat-header {
    position: absolute; top: 0; left: 0; right: 0; width: 100%; min-height: 76px;
    height: 76px; max-width: none; transform: none; margin: 0; padding: 14px 28px; border: 0; border-bottom: 1px solid var(--border);
    border-radius: 0; background: var(--bg-body); backdrop-filter: none; box-shadow: none;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; z-index: 110;
  }
  .chat-header-main, .chat-header-controls { height: auto; min-height: 40px; padding: 0; background: transparent; border: 0; border-radius: 0; backdrop-filter: none; box-shadow: none; }
  .chat-header-main { min-width: 0; flex: 1; }
  .chat-header-main .avatar { width: 40px; height: 40px; }
  .chat-header-controls { flex-shrink: 0; }
  #head-name { font-size: 14px; font-weight: 600; }
  #head-status { color: var(--text-sec); font-size: 11px; margin-top: 2px; }
  .messages { flex: 1; min-height: 0; gap: 5px; width: 100%; padding: 100px max(24px, calc((100% - 880px) / 2)) calc(var(--composer-height) + 42px); overflow-x: hidden; overflow-y: auto; scroll-behavior: auto; }
  .messages::before { background-image: var(--chat-wallpaper-image, var(--chat-wallpaper-default)); background-color: var(--chat-wallpaper-custom-color, var(--bg-body)); opacity: 1; }
  .msg-row { max-width: min(76%, 580px); width: auto; min-width: 0; margin-bottom: 1px; animation: none; }
  .msg-row.own { margin-left: auto; }
  .msg-bubble { min-width: 44px; max-width: 100%; padding: 10px 13px; border-radius: var(--bubble-radius); color: var(--text-main); background: var(--msg-in); background-image: none; border: 1px solid transparent; box-shadow: none; backdrop-filter: none; font-size: var(--chat-font-size); line-height: 1.55; overflow-wrap: anywhere; word-break: normal; }
  .msg-bubble.own { color: var(--text-msg-out); background: var(--msg-out); background-image: none; box-shadow: none; border-color: transparent; }
  .bubble { min-width: 44px; max-width: 100%; padding: 10px 13px; border-radius: var(--bubble-radius); color: var(--text-main); background: var(--msg-in); border: 1px solid transparent; box-shadow: none; font-size: var(--chat-font-size); line-height: 1.55; overflow-wrap: anywhere; word-break: normal; }
  .own .bubble { background: var(--msg-out); color: var(--text-msg-out); }
  .bubble::before, .bubble::after { display: none; }
  .bubble.media-bubble { padding: 0; overflow: hidden; background: var(--msg-in); border-radius: 14px; }
  .own .bubble.media-bubble { background: var(--msg-out); }
  .bubble.transparent-media { padding: 0; background: transparent; border: 0; box-shadow: none; }
  .bubble.document-bubble, .own .bubble.document-bubble { max-width: min(270px, 66vw); padding: 12px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; color: var(--text-main); }
  .bubble.media-bubble .msg-caption { padding: 10px 12px; color: var(--text-main); }
  .bubble.media-bubble .meta, .bubble.transparent-media .meta { color: #fff; background: rgb(0 0 0 / 48%); border-radius: 5px; padding: 2px 5px; }
  .bubble .msg-content { overflow-wrap: anywhere; }
  .msg-bubble::before, .msg-bubble::after { display: none; }
  .msg-row .meta, .msg-bubble .meta { font-size: 10px; color: var(--text-muted); gap: 4px; }
  .msg-row.own .meta { color: var(--text-sec); }
  .msg-bubble a { color: inherit; }
  .date-divider, .date-separator, .system-msg { align-self: center; color: var(--text-sec); background: transparent; border: 0; border-radius: 8px; box-shadow: none; font-size: 11px; margin: 16px 0; padding: 4px 10px; }
  .date-badge { background: var(--surface); color: var(--text-muted); border: 0; border-radius: 7px; box-shadow: none; font-size: 10px; padding: 4px 10px; }
  .reply-quote, .reply-box, .fwd-box, .msg-reply { background: var(--accent-subtle); border-color: var(--primary); border-radius: 8px; }
  .msg-media-img, .msg-media-video, .album-grid { border-radius: 12px; }
  .file-message-card, .file-card, .msg-file-card { color: var(--text-main); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; box-shadow: none; }
  .voice-play, .audio-play-btn { color: var(--text-main); background: var(--surface-raised); border-radius: 50%; box-shadow: none; }
  .reaction-chip { background: var(--surface-raised); color: var(--text-main); border: 1px solid var(--border); border-radius: 8px; box-shadow: none; }
  .reaction-chip.active, .reaction-chip.own { background: var(--accent-subtle); border-color: var(--accent-border); }
  .chat-pins-container { z-index: 105; }
  #pinned-bar { top: 76px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: var(--surface); box-shadow: none; }
  .messages:has(~ .input-area) { scroll-padding-bottom: calc(var(--composer-height) + 32px); }
  #scroll-to-bottom-btn { background: var(--surface-raised); color: var(--text-main); border: 1px solid var(--border); border-radius: 10px; box-shadow: none; bottom: calc(var(--composer-height) + 36px); }

  .input-area {
    position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
    width: calc(100% - 48px); max-width: 880px; min-height: 60px; z-index: 100;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 12px 8px;
    border: 1px solid var(--border); border-radius: 20px; background: var(--input-bg);
    box-shadow: 0 4px 20px rgb(0 0 0 / 5%); backdrop-filter: none;
    transition: border-color var(--motion-fast) ease;
  }
  .input-area:focus-within { border-color: var(--accent-border); }
  .input-area .input-wrapper { width: 100%; min-width: 0; min-height: 46px; padding: 0; flex: none; order: 0; }
  #msg-input { width: 100%; min-width: 0; min-height: 46px; max-height: 180px; height: auto; padding: 8px 8px; border: 0; border-radius: 0; background: transparent; color: var(--text-main); resize: none; font-size: var(--chat-font-size); line-height: 1.5; outline: none; box-shadow: none; overflow-y: auto; }
  .composer-toolbar { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 40px; order: 1; }
  .composer-toolbar .action-btn-container { margin-left: auto; }
  .input-area .btn-icon { width: 36px; height: 40px; min-height: 40px; border-radius: 10px; }
  #btn-send { color: var(--on-primary); background: var(--primary); border-radius: 11px; box-shadow: none; }
  #btn-record { color: var(--text-sec); background: transparent; }
  #fwd-indicator, #edit-indicator, .long-text-attachment { width: calc(100% - 48px); max-width: 880px; left: 50%; bottom: calc(var(--composer-height) + 23px); transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: none; color: var(--text-main); }
  #fwd-indicator:not(.hidden) ~ .input-area, #edit-indicator:not(.hidden) ~ .input-area { border-top-left-radius: 0; border-top-right-radius: 0; }
  .fwd-line { background: var(--text-muted); }
  .fwd-title, .edit-indicator-label { color: var(--text-sec); font-size: 12px; }
  .photo-attachments { width: 100%; background: transparent; border-radius: 10px; }
  .photo-attachments-motion { transform: none; transition: opacity 180ms var(--ease-out); }
  @starting-style { .photo-attachments-motion:not(.hidden) { transform: none; } }
  .photo-attachment-tile { border-radius: 10px; border: 1px solid var(--border); }
  .message-request-banner { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text-main); box-shadow: none; }
  .message-request-privacy-note { color: var(--text-sec); }
  .chat-search-overlay { top: 76px; background: var(--bg-body); border-color: var(--border); box-shadow: none; }
  .chat-search-bar { background: var(--surface); border-color: var(--border); }

  /* Shared dialog, settings, profile, group and business-account surfaces. */
  .modal-overlay { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; padding: 24px; background: var(--scrim); backdrop-filter: none; overflow: hidden; }
  .modal, .apple-modal, .poll-create-modal, .poll-voters-modal, .premium-modal-wrap, .changelog-card, .tb-sheet {
    background: var(--surface); color: var(--text-main); border: 1px solid var(--border);
    border-radius: 18px; box-shadow: var(--glass-shadow); backdrop-filter: none;
    animation: none; max-height: min(90dvh, 900px); overflow-x: hidden;
    transition: opacity var(--motion-panel) var(--ease-out), transform var(--motion-panel) var(--ease-out);
  }
  .modal { width: min(100%, 440px); padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
  .modal-fs { width: min(100%, 640px); max-width: 640px; height: min(84dvh, 840px); padding: 0; gap: 0; }
  .settings-modal-bg { background: var(--bg-body); }
  .modal-header, .settings-header-ios, .group-modal-header, .poll-create-header, .poll-voters-header {
    flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 20px; color: var(--text-main); border-radius: 0; min-height: 64px;
  }
  .ios-close-btn, .modal-close-ios, .btn-close, .poll-create-close, .premium-close-btn { background: var(--surface-raised); color: var(--text-sec); width: 32px; height: 32px; border-radius: 9px; box-shadow: none; border: 0; }
  .settings-group-ios { margin: 0 20px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
  .settings-row-ios { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-main); text-decoration: none; background: transparent; transition: background-color var(--motion-fast) ease; }
  .settings-row-ios:last-child { border-bottom: 0; }
  .ios-icon-box { background: var(--surface-raised); color: var(--text-sec); width: 30px; height: 30px; border-radius: 8px; box-shadow: none; margin-right: 2px; }
  .ios-icon-box svg { width: 18px; height: 18px; }
  .ios-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; }
  .ios-arrow { margin-left: auto; color: var(--text-muted); width: 16px; height: 16px; }
  .ios-section-header, .settings-section-title { padding: 0 24px; margin: 24px 0 10px; color: var(--text-sec); font-size: 11px; font-weight: 500; letter-spacing: .05em; }
  .settings-input-group { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
  .ios-input, .ios-textarea { color: var(--text-main); background: transparent; font-size: 14px; }
  .ios-input-label, .settings-input-label { color: var(--text-sec); font-size: 12px; }
  .settings-input-group select { max-width: 100%; font-size: 13px; }
  .settings-shell { display: grid; grid-template-columns: 208px minmax(0, 1fr); width: min(880px, 100%); max-width: 880px; height: min(82dvh, 820px); max-height: min(82dvh, 820px); padding: 0; gap: 0; overflow: hidden; }
  .settings-navigation { padding: 28px 12px; background: var(--sidebar-bg); }
  .settings-navigation h2 { margin: 0 12px 24px; font-size: 18px; font-weight: 500; }
  .settings-navigation-item { width: 100%; padding: 11px 12px; text-align: left; border: 0; border-radius: 9px; background: transparent; color: var(--text-sec); font-size: 12px; line-height: 1.5; margin-bottom: 4px; }
  .settings-navigation-item.active { color: var(--accent-text); background: var(--accent-subtle); }
  .settings-content { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; background: var(--bg-body); }
  .settings-pane-header { display: flex; align-items: center; gap: 12px; padding: 20px 24px; min-height: 68px; flex-shrink: 0; background: var(--bg-body); border: 0; }
  .settings-pane-header h3 { font-size: 18px; font-weight: 500; margin: 0; }
  .account-identity { display: flex; flex-direction: row; align-items: center; gap: 20px; padding: 24px; }
  .account-identity-avatar { width: 64px; height: 64px; flex-shrink: 0; position: relative; background: var(--surface-raised); border-radius: 50%; }
  .account-identity-avatar .btn-icon { color: var(--on-primary) !important; }
  .settings-shell .settings-input-group { background: transparent; border: 0; border-radius: 0; }
  .settings-shell .setting-row { padding: 14px 0; min-height: 64px; height: auto; gap: 20px; align-items: flex-start; border-color: var(--border-subtle); }
  .settings-shell .setting-row > span:first-child { flex: 0 0 40%; font-weight: 400; font-size: 13px; padding-top: 10px; }
  .settings-shell .setting-row > input, .settings-shell .setting-row > textarea, .settings-shell .setting-row > select { flex: 1; width: 100%; min-width: 0; padding: 9px 12px; text-align: left; font-size: 13px; background: var(--surface); color: var(--text-main); border: 1px solid var(--border); border-radius: 10px; }
  .ios-section-header, .settings-section-title { text-transform: none; letter-spacing: 0; font-size: 12px; }
  .settings-pane-header > .btn { margin-left: auto; order: 1; font-size: 12px; padding: 6px 10px; min-height: 32px; }
  .settings-shell .settings-group-ios { border: 0; background: transparent; border-radius: 0; margin: 0 24px 24px; }
  .settings-shell .settings-row-ios { padding: 14px 0; border-color: var(--border-subtle); }
  #modal-menu .modal { width: min(390px, 100%); max-width: 390px; height: auto; max-height: 82dvh; padding: 0; }
  .menu-header-card { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; min-height: 112px; padding: 24px; background: transparent; border-bottom: 1px solid var(--border-subtle); }
  #menu-avatar-wrap { flex: 0 0 48px; width: 48px; margin: 0; }
  #menu-avatar-bg { width: 48px; height: 48px; }
  .menu-user-info { min-width: 0; }
  .menu-user-info > div:first-child { justify-content: flex-start; }
  .menu-identity-line { display: flex; gap: 7px; align-items: center; }
  .menu-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; min-height: 28px; color: var(--text-sec); background: transparent; }
  .menu-name-text { font-size: 17px; }
  #modal-menu .settings-group-ios { margin: 12px 12px 16px; border: 0; background: transparent; }
  #modal-menu .settings-row-ios { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; }
  #modal-menu .ios-section-header { margin: 18px 0 8px; padding: 0 24px; }
  .menu-profile-header { background: var(--surface); padding: 28px 24px 24px; border-bottom: 1px solid var(--border); }
  .menu-name-text { font-size: 22px; font-weight: 500; letter-spacing: -.035em; color: var(--text-main); }
  .menu-handle-text { color: var(--text-sec); font-size: 12px; background: transparent; padding: 0; }
  .account-status-badge, .verified-badge { color: var(--primary); }
  .avatar-type-badge { color: var(--text-sec); }
  img[src*="/public/images/favicon.png"], img[src*="/public/images/logo.png"] { filter: grayscale(1); }
  #btn-back { display: none; }
  .profile-modal-ios, .group-modal-clean { padding: 0; gap: 0; background: var(--bg-body); width: min(100%, 560px); max-width: 560px; }
  .profile-ios-avatar { border-radius: 50%; box-shadow: none; border: 1px solid var(--border); }
  .profile-ios-name, .group-title { font-size: 23px; font-weight: 500; letter-spacing: -.03em; }
  .profile-ios-handle, .profile-ios-status { color: var(--text-sec); }
  .profile-action-btn, .profile-ios-action-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text-main); box-shadow: none; }
  .media-tabs-ios, .media-category-tabs { border-color: var(--border); background: transparent; }
  .media-tab-pill { color: var(--text-sec); background: var(--surface); border: 1px solid transparent; border-radius: 8px; font-weight: 500; }
  .media-tab-pill.active { color: var(--text-main); background: var(--active); }
  .theme-picker-btn { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; color: var(--text-main); box-shadow: none; }
  .theme-picker-btn.active { outline: 2px solid var(--primary); outline-offset: 2px; background: var(--accent-subtle); }
  .theme-picker-btn span { color: var(--text-sec); }
  .theme-picker-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  .theme-picker-btn { display: flex; flex-direction: row; align-items: center; justify-content: center; min-width: 0; gap: 8px; padding: 10px 6px; min-height: 42px; font-size: 12px; font-weight: 400; border-radius: 10px; }
  @media (max-width:380px) { .theme-picker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
  .theme-tone-icon { flex-shrink: 0; color: var(--text-sec); }
  .theme-tone-preview { position: relative; display: block; flex-shrink: 0; width: 30px; height: 24px; overflow: hidden; border: 1px solid var(--preview-border); border-radius: 5px; background: var(--preview-bg); }
  .theme-tone-preview::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 9px; background: var(--preview-sidebar); border-right: 1px solid var(--preview-border); }
  .theme-tone-preview i { position: absolute; right: 3px; top: 5px; width: 12px; height: 4px; border-radius: 2px; background: var(--preview-primary); }
  .calls-sort-btns { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  .calls-sort-btn { padding: 7px 8px; min-height: 32px; font-size: 11px; white-space: nowrap; }
  .bubble-style-btn, .check-shape-btn { background: var(--surface-raised); color: var(--text-sec); border: 1px solid var(--border); border-radius: 9px; box-shadow: none; }
  .bubble-style-btn.active, .check-shape-btn.active { color: var(--accent-text); background: var(--accent-subtle); border-color: var(--accent-border); }
  .business-account-modal, .business-plan-card, .business-preview-card { background: var(--surface); color: var(--text-main); border-color: var(--border); border-radius: 12px; box-shadow: none; }
  .business-account-hero, .business-section { background: var(--surface); border-color: var(--border); }
  .business-plan-name, .business-preview-name { color: var(--text-main); }
  .business-plan-card.selected { border-color: var(--text-muted); background: var(--active); }
  .business-profile-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; box-shadow: none; }
  .poll-bubble { color: var(--text-main); background: var(--msg-in); border: 1px solid var(--border); border-radius: 14px; box-shadow: none; }
  .poll-question { color: var(--text-main); font-size: 15px; font-weight: 600; }
  .poll-header-icon, .poll-badge, .poll-closed-badge { background: var(--surface-raised); color: var(--text-sec); border-color: var(--border); }
  .poll-option { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; }
  .poll-option-bar, .poll-option-bar.winner { background: var(--accent-subtle); }
  .poll-option.selected .poll-option-check, .checklist-item .poll-option-check.filled { background: var(--primary); border-color: var(--primary); }
  .poll-option.selected .poll-option-check svg, .checklist-item .poll-option-check.filled svg { color: var(--on-primary); }
  .poll-create-submit, .premium-pay-btn { background: var(--primary); color: var(--on-primary); border: 0; border-radius: 11px; font-size: 14px; font-weight: 500; box-shadow: none; animation: none; }
  .poll-setting-label { font-size: 13px; }
  .premium-modal-header { background: var(--surface-raised); color: var(--text-main); border-bottom: 1px solid var(--border); padding: 28px 24px; }
  .premium-modal-header::before, .premium-modal-header::after, .premium-feature-item::before { display: none; }
  .premium-modal-title { color: var(--text-main); font-size: 26px; font-weight: 500; }
  .premium-modal-subtitle { color: var(--text-sec); }
  .premium-feature-item, .premium-plan-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; box-shadow: none; }
  .premium-plan-card.selected { background: var(--active); border-color: var(--text-sec); }
  .premium-feature-icon { background: var(--surface); color: var(--text-sec); box-shadow: none; }
  .premium-gem { animation: none; filter: grayscale(1); }
  .has-premium::before, .has-premium::after { background: var(--text-muted); animation: none; box-shadow: none; }
  .premium-name, .premium-chat-name, .premium-menu-label, .has-premium-name { background: none; color: var(--text-main); -webkit-text-fill-color: currentColor; }
  .premium-badge, .premium-active-tag { background: var(--surface-raised); color: var(--text-sec); border: 1px solid var(--border); box-shadow: none; }
  .premium-btn-header svg { filter: grayscale(1); }
  .thread-modal-wrap { background: var(--bg-body); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--glass-shadow); }
  .thread-panel-header { background: var(--surface); border-bottom: 1px solid var(--border); }
  .thread-comment-bubble { background: var(--msg-in); color: var(--text-main); border-radius: 12px; box-shadow: none; }
  .thread-comment-bubble.own { background: var(--msg-out); color: var(--text-msg-out); }
  .thread-input-area { background: var(--surface); border-top: 1px solid var(--border); }
  .changelog-overlay { background: var(--scrim); backdrop-filter: none; }
  .changelog-icon-circle, .changelog-tag { background: var(--surface-raised); color: var(--text-sec); border: 1px solid var(--border); }
  .changelog-next-btn { background: var(--primary); color: var(--on-primary); border-radius: 10px; box-shadow: none; }
  .security-restriction-screen { background: var(--bg-body); color: var(--text-main); }
  .security-restriction-card, .account-center-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: none; }
  .security-restriction-card h1, .account-center-title { font-size: 26px; font-weight: 500; }
  .account-center-logo, .security-restriction-img { filter: grayscale(1); }
  .birthday-banner-card { background: var(--surface); border-color: var(--border); box-shadow: none; }
  #rustore-promo-modal > div { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--glass-shadow); }

  /* Menus, media, upload progress and ongoing calls. */
  #ctx-menu, .ctx-menu, .context-menu, .attach-menu, #sticker-picker, #pinned-list-dropdown, .msg-action-sheet {
    background: var(--surface); color: var(--text-main); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--glass-shadow); backdrop-filter: none; animation: none;
    max-width: calc(100vw - 24px); transform-origin: bottom left;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  }
  .ctx-item, .attach-menu-item, .msg-action-sheet-item { min-height: 40px; color: var(--text-main); font-size: 13px; font-weight: 400; border-radius: 8px; background: transparent; }
  .ctx-item.danger, .ctx-item.delete { color: var(--danger); }
  .attach-menu-item svg { color: var(--text-sec); }
  .ctx-actions-list, .mobile-react-menu { background: var(--surface); border-color: var(--border); box-shadow: none; }
  .sticker-header, .sticker-tabs { background: var(--surface); border-color: var(--border); }
  .sticker-search { background: var(--surface-raised); color: var(--text-main); border: 1px solid var(--border); border-radius: 9px; }
  .upload-widget { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--glass-shadow); }
  .upload-widget-progress, .upload-progress-fill { background: var(--primary); }
  .toast { background: var(--surface-raised); color: var(--text-main); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--glass-shadow); animation: none; }
  .toast.err { border-color: var(--danger); }
  .toast.ok { border-color: var(--success); }
  #call-screen { background: var(--call-bg); }
  .call-controls { background: var(--call-glass); border: 1px solid var(--call-border); border-radius: 18px; box-shadow: none; }
  .call-ctrl-btn { background: var(--call-glass-btn); color: var(--call-text); border-radius: 12px; box-shadow: none; }
  .call-ctrl-btn.end { background: var(--call-glass-end); color: var(--danger); }
  .call-btn { background: var(--call-glass-btn); color: var(--call-text); border-radius: 12px; box-shadow: none; }
  .call-btn.active { background: var(--call-active-btn); color: var(--call-active-text); }
  .call-btn--end, .call-mini-btn--end { background: var(--call-glass-end); color: var(--danger); }
  .call-btn:hover, .call-top-btn:hover, .call-mini-btn:hover { transform: none; }
  .calls-item { padding: 12px 16px; border-radius: 11px; color: var(--text-main); background: transparent; }
  .calls-date-sep { color: var(--text-muted); font-size: 11px; padding: 16px 16px 8px; }
  .calls-ctx-menu { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--glass-shadow); }
  .msg-row.msg-enter { animation: message-arrive 180ms var(--ease-out) both; }
  [data-anim-off] .msg-row.msg-enter, [data-keyboard-input] .msg-row.msg-enter { animation: none; }
  @keyframes message-arrive { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
  :root:not([data-glass-off]) .input-area { background: var(--input-bg); backdrop-filter: none; }
  .incoming-call-card { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--glass-shadow); }
  .call-mini { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--glass-shadow); }
  .call-feedback-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--glass-shadow); }
  .onboarding-title { font-size: 24px; font-weight: 500; }
  .no-messages-icon, .no-messages-title { animation: none; }
  .no-messages-icon { background: var(--surface); box-shadow: none; border-radius: 16px; }
  .conversation-empty-state { flex:0 0 auto; width:min(100%,440px); height:auto; min-width:0; padding:28px 16px; pointer-events:auto; user-select:text; }
  .conversation-empty-state .no-messages-icon { flex:none; width:72px; height:72px; margin-bottom:20px; border-radius:18px; background:var(--accent-subtle); border-color:var(--accent-border); color:var(--accent-text); }
  .conversation-empty-state .no-messages-icon svg { display:block; width:30px; height:30px; }
  .conversation-empty-state .no-messages-title { margin:0 0 10px; font:400 28px/1.2 var(--font-display); letter-spacing:-.025em; }
  .conversation-empty-state .no-messages-subtitle { max-width:34ch; margin:0; font-size:14px; line-height:1.65; }
  .conversation-empty-state :is(.channel-first-post,.group-invite-start) { min-height:44px; max-width:100%; margin-top:22px; gap:8px; }
  .conversation-empty-state :is(.channel-first-post,.group-invite-start) .icon { width:18px; height:18px; }
  @media(max-width:599px) { .conversation-empty-state { padding:20px 8px; } .conversation-empty-state .no-messages-title { font-size:25px; } }

  /* Dialogs opened by the existing application, with progressive entry motion. */
  @starting-style {
    .modal-overlay:not(.hidden) > :is(.modal, .apple-modal, .poll-create-modal, .poll-voters-modal, .premium-modal-wrap) { opacity: 0; transform: scale(.97); }
    .attach-menu:not(.hidden) { opacity: 0; transform: translateY(4px); }
  }
  [data-keyboard-input] .modal, [data-keyboard-input] .attach-menu { transition-duration: 0ms; }
  .skeleton { color: transparent; background: var(--surface-raised); border-radius: 8px; overflow: hidden; position: relative; }
  .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(128 128 140 / 10%), transparent); transform: translateX(-100%); animation: skeleton-sweep 1.6s linear infinite; }
  @keyframes skeleton-sweep { to { transform: translateX(100%); } }
  @media (hover: hover) and (pointer: fine) {
    .btn:hover:not(:disabled), .rail-item:hover, .list-item:hover, .settings-row-ios:hover, .ctx-item:hover, .attach-menu-item:hover { background: var(--hover); color: var(--text-main); }
    .btn-primary:hover:not(:disabled), #btn-send:hover { background: var(--primary-hover); color: var(--on-primary); opacity: 1; }
    .btn-danger:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger); }
    .list-item.active:hover { background: var(--active); }
    .rail-profile:hover { background: var(--surface); }
  }
  @media (min-width: 1280px) {
    :root { --rail-width: 256px; }
    .nav-rail { padding: 26px 14px 12px; }
    .rail-brand { justify-content: flex-start; padding-left: 10px; }
    .rail-wordmark, .rail-caption { display: block; }
    .rail-collapse { display: inline-flex; }
    .rail-item { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 10px 12px; font-size: 13px; }
    .rail-profile { justify-content: flex-start; padding: 16px 10px 8px; }
    .rail-profile-copy { display: block; }
    .rail-badge { top: -3px; right: -7px; }
  }
  @media (min-width: 800px) and (pointer:fine), (min-width: 800px) and (min-height:501px), (min-width: 800px) and (min-width:1025px) { .sidebar-header button:is([onclick="Profile.openMenu()"],[data-zn-onclick="h0025"]) { display: none; } }
  @media (min-width: 800px) and (max-width: 1023px) and (pointer:fine), (min-width: 800px) and (max-width: 1023px) and (min-height:501px), (min-width: 800px) and (max-width: 1023px) and (min-width:1025px) {
    #view-app { grid-template-columns: 64px 292px minmax(0, 1fr); }
    :root { --rail-width: 64px; }
    .nav-rail { padding-left: 6px; padding-right: 6px; }
    .sidebar-header { padding: 20px 16px 12px; }
    .messages { padding-left: 20px; padding-right: 20px; }
    .msg-row { max-width: 88%; }
  }
  @media (max-width: 799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    :root { --rail-width: 0px; }
    #view-app { grid-template-columns: minmax(0, 1fr); }
    .nav-rail { display: none; }
    .sidebar { border: 0; background: var(--bg-body); }
    .sidebar-header { padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 12px; min-height: 68px; align-items: center; }
    .sidebar-title { font-size: 24px; }
    .tabs { display: none; }
    .search-container { display: flex; padding: 0 20px 14px; }
    .mobile-search-btn { display: none; }
    .desktop-calls-btn { display: none; }
    .list-container { padding: 8px 8px calc(76px + env(safe-area-inset-bottom, 0px)); }
    .list-item { min-height: 78px; padding: 12px; }
    .list-item .bold { font-size: 14px; }
    .chat-area { position: fixed; inset: 0; width: 100%; height: var(--viewport-height); z-index: 1000; visibility: hidden; transform: translateX(100%); transition: transform var(--motion-panel) var(--ease-drawer); }
    .chat-area.active { visibility: visible; transform: translateX(0); }
    .chat-header { min-height: calc(64px + env(safe-area-inset-top, 0px)); height: calc(64px + env(safe-area-inset-top, 0px)); padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; gap: 8px; }
    .chat-header .btn-icon { width: 36px; height: 40px; min-height: 40px; }
    .chat-header-profile { gap: 8px; }
    #btn-back { display: inline-flex; }
    .messages { padding: calc(88px + env(safe-area-inset-top, 0px)) 12px calc(var(--composer-height) + 30px + env(safe-area-inset-bottom, 0px)); }
    .msg-row { max-width: 88%; }
    .msg-bubble { padding: 9px 12px; }
    .input-area { width: calc(100% - 20px); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); min-height: 56px; padding: 7px 5px; gap: 2px; border-radius: 18px; }
    .input-area .btn-icon { width: 40px; height: 40px; min-height: 40px; }
    #msg-input { font-size: max(16px, var(--chat-font-size)); padding-left: 6px; padding-right: 4px; }
    #fwd-indicator, #edit-indicator, .long-text-attachment { width: calc(100% - 20px); bottom: calc(var(--composer-height) + 9px + env(safe-area-inset-bottom, 0px)); }
    #scroll-to-bottom-btn { bottom: calc(var(--composer-height) + 24px + env(safe-area-inset-bottom, 0px)); }
    #pinned-bar { top: calc(64px + env(safe-area-inset-top, 0px)); }
    .chat-search-overlay { top: calc(64px + env(safe-area-inset-top, 0px)); }
    #bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; background: var(--sidebar-bg); border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; backdrop-filter: none; z-index: 100; }
    .nav-item { flex: 1; color: var(--text-muted); min-height: 48px; padding: 6px 4px; gap: 3px; font-size: 10px; font-weight: 500; border-radius: 10px; }
    .nav-item.active { color: var(--accent-text); background: var(--accent-subtle); }
    .nav-item.active svg { fill: none; stroke: currentColor; }
    .nav-item svg { width: 20px; height: 20px; stroke-width: 1.75; }
    .modal-overlay { padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); }
    .modal { max-height: calc(var(--viewport-height) - 24px); width: 100%; max-width: 440px; padding: 20px; border-radius: 16px; }
    .modal-fs, .profile-modal-ios, .group-modal-clean { width: 100%; max-width: 640px; height: calc(var(--viewport-height) - 24px); max-height: calc(var(--viewport-height) - 24px); padding: 0; }
    .settings-shell { display: flex; flex-direction: column; height: calc(var(--viewport-height) - 24px); max-height: calc(var(--viewport-height) - 24px); }
    .settings-navigation { display: flex; flex-shrink: 0; gap: 4px; padding: 10px; overflow-x: auto; border-bottom: 1px solid var(--border-subtle); }
    .settings-navigation h2 { display: none; }
    .settings-navigation-item { flex: 0 0 auto; width: auto; margin: 0; padding: 8px 10px; font-size: 11px; white-space: nowrap; }
    .settings-content { flex: 1; }
    .settings-pane-header { min-height: 60px; padding: 14px 20px; }
    .settings-shell .settings-group-ios { margin-left: 20px; margin-right: 20px; }
    .modal-header, .settings-header-ios, .group-modal-header { padding: 14px 16px; }
    .settings-group-ios { margin-left: 16px; margin-right: 16px; }
    .settings-row-ios { padding: 14px 12px; }
    .input, .ios-input, .ios-textarea, .poll-create-input, .poll-option-input, select { font-size: 16px; }
    .poll-create-modal, .poll-voters-modal, .premium-modal-wrap { width: 100%; max-height: calc(var(--viewport-height) - 24px); border-radius: 16px; }
    .thread-modal-wrap { border-radius: 0; border: 0; }
    .attach-menu { max-width: calc(100vw - 24px); bottom: calc(100% + 8px); left: 0; }
    #view-auth { display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: 40px 20px; min-height: 100%; height: auto; }
    .auth-hero { width: min(100%, 400px); text-align: left; }
    .auth-hero { display: block; }
    .auth-hero-title, .auth-hero-subtitle { display: none; }
    .auth-eyebrow { margin-bottom: 24px; font-size: 18px; }
    .auth-hero-title { font-size: 32px; margin-bottom: 12px; }
    .auth-hero-subtitle { font-size: 13px; }
    .auth-note { display: none; }
    .auth-card { padding: 28px 24px; width: 100%; max-width: 400px; height: auto; border-radius: 18px; }
    .auth-heading { font-size: 22px; }
  }
  @media (max-width: 374px) {
    .sidebar-header { padding-left: 16px; padding-right: 12px; }
    .search-container { padding-left: 16px; padding-right: 16px; }
    .search-container::before { left: 29px; } .search-container::after { left: 41px; }
    .chat-header { padding-left: 6px; padding-right: 8px; }
    .chat-header-main .avatar { width: 34px; height: 34px; }
    .chat-header-profile { gap: 6px; }
    .input-area { gap: 0; }
    .input-area .btn-icon { width: 38px; }
    .input-area .icon { width: 18px; height: 18px; }
    .settings-row-ios { flex-wrap: wrap; }
    #view-auth { padding: 32px 16px; gap: 24px; }
    .auth-card { padding: 26px 20px; }
  }
  @media (max-height: 499px) and (min-width: 800px) and (pointer:fine), (max-height: 499px) and (min-width: 800px) and (min-height:501px), (max-height: 499px) and (min-width: 800px) and (min-width:1025px) {
    .nav-rail { padding-top: 8px; }
    .rail-brand { margin-bottom: 6px; }
    .rail-item { min-height: 40px; padding: 4px; }
    .rail-profile { margin-top: 0; padding: 6px 0; }
    #view-auth { padding: 24px; gap: 32px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .skeleton::after { animation: none; }
  }
}
@layer system {
  /* One motion vocabulary. Text stays still; occasional surfaces bridge state changes. */
  .btn-primary:active:not(:disabled), #btn-send:active { background: var(--primary-active); }
  .rail-item.active:hover { color: var(--accent-text); background: var(--accent-subtle); }
  .settings-navigation-item, .chat-folder-chip, .calls-sort-btn, .media-tab-pill, .theme-picker-btn, .nav-item,
  .reaction-chip, .poll-option, .bubble-style-btn, .check-shape-btn {
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;
  }
  .switch-ios::after, .toggle-switch::after, .switch-knob { transition: transform var(--motion-normal) var(--ease-out); }
  .toast, .upload-widget { transition: opacity var(--motion-normal) var(--ease-out), transform var(--motion-normal) var(--ease-out); }
  .zn-dialog { opacity: 0; transform: scale(.97); }
  .zn-dialog[open] { opacity: 1; transform: scale(1); }
  .zn-dialog { transition: opacity var(--motion-panel) var(--ease-out), transform var(--motion-panel) var(--ease-out); }
  #ctx-menu, #pinned-list-dropdown, .calls-ctx-menu { transform-origin: top left; }
  #sticker-picker, .attach-menu { transform-origin: bottom left; }
  @starting-style {
    .zn-dialog[open] { opacity: 0; transform: scale(.97); }
    #ctx-menu:not(.hidden), #pinned-list-dropdown:not(.hidden), .calls-ctx-menu:not(.hidden), #sticker-picker:not(.hidden) { opacity: 0; }
    .toast { opacity: 0; transform: translateY(6px); }
    .upload-widget { opacity: 0; }
  }
  /* Application state changes immediately; the browser finishes the short visual exit. */
  @supports (transition-behavior: allow-discrete) {
    :is(.modal-overlay, .chat-folder-modal, .changelog-overlay, #modal-qr-login, #rustore-promo-modal) {
      opacity: 1; transition: opacity var(--motion-normal) var(--ease-out), display var(--motion-normal) allow-discrete;
    }
    :is(.modal-overlay, .chat-folder-modal, .changelog-overlay, #modal-qr-login, #rustore-promo-modal).hidden { opacity: 0; pointer-events: none; }
    :is(.modal-overlay, .chat-folder-modal, .changelog-overlay).hidden > :is(.modal, .apple-modal, .poll-create-modal, .poll-voters-modal, .premium-modal-wrap, .chat-folder-dialog, .changelog-card) { opacity: 0; transform: scale(.97); }
    #ctx-menu, #sticker-picker, .attach-menu, #pinned-list-dropdown, .calls-ctx-menu {
      transition: opacity var(--motion-normal) var(--ease-out), transform var(--motion-normal) var(--ease-out), display var(--motion-normal) allow-discrete;
    }
    :is(#ctx-menu, #sticker-picker, .attach-menu, #pinned-list-dropdown, .calls-ctx-menu).hidden { opacity: 0; pointer-events: none; }
    .zn-dialog { transition: opacity var(--motion-panel) var(--ease-out), transform var(--motion-panel) var(--ease-out), display var(--motion-panel) allow-discrete, overlay var(--motion-panel) allow-discrete; }
    .zn-dialog::backdrop { opacity: 0; transition: opacity var(--motion-panel) var(--ease-out), display var(--motion-panel) allow-discrete, overlay var(--motion-panel) allow-discrete; }
    .zn-dialog[open]::backdrop { opacity: 1; }
    @starting-style {
      :is(.modal-overlay, .chat-folder-modal, .changelog-overlay, #modal-qr-login, #rustore-promo-modal):not(.hidden) { opacity: 0; }
      .zn-dialog[open]::backdrop { opacity: 0; }
    }
  }
  :root[data-theme-changing] :is(body, .sidebar, .nav-rail, .chat-area, .chat-header, .input-area, .bubble, .settings-content, .modal, #bottom-nav) {
    transition: background-color var(--motion-normal) ease, color var(--motion-normal) ease, border-color var(--motion-normal) ease;
  }
  [data-keyboard-input] :is(.modal-overlay, .chat-folder-modal, .changelog-overlay, .zn-dialog, #ctx-menu, #sticker-picker, .attach-menu, .toast, .chat-area) { transition-duration: 0ms; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .chat-area, .modal, .zn-dialog, .toast { animation: none; }
  }
}
/* Visibility is an application state and must also beat inline display values. */
.hidden, [hidden] { display: none !important; }
@media (min-width: 800px) and (pointer:fine), (min-width: 800px) and (min-height:501px), (min-width: 800px) and (min-width:1025px) { #bottom-nav { display: none !important; } }
/* Layout tokens are unlayered, like the base token declaration. */
@media (min-width: 1280px) { :root { --rail-width: 256px; } }
@media (min-width: 800px) and (max-width: 1023px) and (pointer:fine), (min-width: 800px) and (max-width: 1023px) and (min-height:501px), (min-width: 800px) and (max-width: 1023px) and (min-width:1025px) { :root { --rail-width: 64px; } }
@media (max-width: 799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) { :root { --rail-width: 0px; } }
@media (min-width: 1280px) {
  :root[data-rail-collapsed] { --rail-width: 72px; }
  @layer system {
    :root[data-rail-collapsed] .rail-wordmark, :root[data-rail-collapsed] .rail-caption, :root[data-rail-collapsed] .rail-profile-copy, :root[data-rail-collapsed] .rail-compose span { display: none; }
    :root[data-rail-collapsed] .rail-item { flex-direction: column; justify-content: center; padding: 8px 0; font-size: 10px; gap: 4px; }
    :root[data-rail-collapsed] .nav-rail { padding-left: 8px; padding-right: 8px; }
    :root[data-rail-collapsed] .rail-topline { flex-direction: column; gap: 8px; }
    :root[data-rail-collapsed] .rail-brand { padding: 0; }
    :root[data-rail-collapsed] .rail-profile { justify-content: center; padding-left: 0; padding-right: 0; }
    :root[data-rail-collapsed] .rail-compose { padding: 8px 0; justify-content: center; }
  }
}

/* The messenger's actual shell: one sidebar, one conversation, shared on desktop and phone. */
@layer system {
  #view-app { grid-template-columns: var(--workspace-width) minmax(0, 1fr); }
  .workspace-sidebar { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; background: var(--sidebar-bg); border-right: 1px solid var(--border-subtle); overflow: hidden; }
  .workspace-header { flex-shrink: 0; padding: 24px 16px 8px; }
  .workspace-header .rail-topline { margin-bottom: 22px; min-height: 32px; }
  .workspace-header .rail-brand { padding: 0 8px; margin: 0; justify-content: flex-start; min-height: 32px; }
  .workspace-header .rail-wordmark { display: block; font-size: 21px; }
  .workspace-header .brand-mark { width: 28px; height: 28px; }
  .workspace-header .rail-collapse { display: inline-flex; width: 32px; height: 32px; }
  .workspace-header .rail-compose { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text-main); min-height: 42px; font-size: 13px; }
  .workspace-navigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 16px 12px; gap: 4px; border: 0; width: 100%; height: auto; min-height: 0; flex-shrink: 0; background: transparent; }
  .workspace-navigation .rail-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 52px; padding: 7px 4px; font-size: 11px; border-radius: 9px; }
  .workspace-navigation .rail-icon { width: 19px; height: 19px; }
  .workspace-navigation #rail-menu { display: none; }
  .workspace-sidebar .sidebar { flex: 1; width: 100%; min-height: 0; background: transparent; border: 0; }
  .workspace-sidebar .sidebar-header { min-height: 40px; padding: 10px 24px 12px; }
  .workspace-sidebar .sidebar-title { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--text-sec); }
  .workspace-sidebar .sidebar-header > .flex { display: none; }
  .workspace-sidebar .search-container { padding: 0 16px 14px; }
  .workspace-sidebar .search-container::before { left: 29px; }
  .workspace-sidebar .search-container::after { left: 41px; }
  .workspace-sidebar .search-input { background: var(--bg-body); border: 1px solid var(--border-subtle); min-height: 38px; }
  .workspace-sidebar .chat-folder-rail { padding: 0 12px 10px; border-bottom: 1px solid var(--border-subtle); }
  .workspace-sidebar .chat-folder-chip { padding: 5px 8px; font-size: 11px; }
  .workspace-sidebar .list-container { padding: 6px 8px; }
  .workspace-sidebar .list-item { min-height: 72px; padding: 11px 12px; border-radius: 10px; gap: 11px; }
  .workspace-sidebar .list-item .avatar { width: 38px; height: 38px; min-width: 38px; }
  .workspace-sidebar .list-item .bold { font-size: 13px; font-weight: 500; }
  .workspace-sidebar .stories-rail { padding: 8px 16px; }
  .workspace-footer { flex-shrink: 0; display: flex; align-items: center; gap: 8px; margin: 0 16px; padding: 10px 0 16px; border-top: 1px solid var(--border-subtle); background: var(--sidebar-bg); }
  .workspace-footer .rail-profile { flex: 1; min-width: 0; border: 0; padding: 8px; margin: 0; border-radius: 9px; justify-content: flex-start; }
  .workspace-footer .rail-profile-copy { display: block; }
  .workspace-footer .rail-item { width: 36px; min-height: 36px; padding: 8px; flex-shrink: 0; }
  .workspace-footer .rail-item > span:last-child { display: none; }
  #view-auth { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 40px 24px; }
  .auth-hero { display: block; width: min(100%, 420px); text-align: center; }
  .auth-eyebrow { justify-content: center; margin: 0 0 20px; font-size: 24px; }
  .auth-hero-title, .auth-hero-subtitle, .auth-note { display: none; }
  .auth-card { width: min(100%, 420px); background: transparent; padding: 20px 16px; border: 0; border-radius: 0; }
  .auth-heading { font-family: var(--font-display); font-size: 32px; font-weight: 400; text-align: center; letter-spacing: -.02em; }
  .auth-caption { text-align: center; font-size: 13px; margin: 8px 0 28px; }
  .auth-card .input { background: var(--input-bg); border-radius: 12px; }
  .auth-theme { top: -55px; right: 12px; }
  .auth-card form { gap: 14px; }
  .auth-footer { margin-top: 24px; font-size: 11px; line-height: 1.6; }
  .group-modal-body { text-align: left; }
  .modal.dialog-shell { padding: 0; gap: 0; overflow: hidden; align-items: stretch; }
  .dialog-header { flex-shrink: 0; padding: 22px 24px 16px; border-bottom: 1px solid var(--border-subtle); }
  .dialog-header h2, .dialog-header h3 { font-size: 20px; font-weight: 500; margin: 0; }
  .dialog-header > div { width: 100%; }
  .dialog-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; gap: 16px; padding: 24px; }
  .dialog-actions { flex-shrink: 0; padding: 16px 24px 20px; border-top: 1px solid var(--border-subtle); }
  .dialog-actions > .btn { width: 100%; }
  .dialog-actions > div { margin: 0; }
  .partner-identity, .group-identity { display: flex; gap: 18px; align-items: center; width: 100%; padding: 28px 24px 24px; }
  #ptn-avatar-wrap { flex: 0 0 64px; margin: 0; }
  #ptn-avatar { width: 64px; height: 64px; border-radius: 50%; display: block; object-fit: cover; }
  .partner-identity-copy, .group-identity-copy { min-width: 0; flex: 1; text-align: left; }
  .partner-identity-copy > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
  #ptn-name { font-size: 23px; font-weight: 500; letter-spacing: -.03em; text-align: left; margin: 0; }
  #ptn-ids { margin-top: 4px; color: var(--text-sec); text-align: left; }
  #ptn-status { margin-top: 5px; font-size: 12px; color: var(--text-sec); text-align: left; }
  #ptn-security-rating { border: 1px solid var(--border); padding: 3px 7px; border-radius: 7px; font-size: 10px; background: var(--surface); color: var(--success); }
  .partner-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 24px 24px; width: calc(100% - 48px); }
  .ptn-action-btn { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 11px 8px; min-height: 44px; width: auto; border: 1px solid var(--border); border-radius: 10px; color: var(--text-main); background: var(--surface); font-size: 12px; }
  .ptn-action-icon { width: auto; height: auto; padding: 0; background: transparent; color: var(--accent-text); box-shadow: none; }
  .ptn-action-icon .icon { width: 18px; height: 18px; }
  .group-identity > .avatar { width: 64px; height: 64px; flex: 0 0 64px; margin: 0; position: relative; overflow: hidden; border-radius: 50%; }
  #grp-info-img { width: 100%; height: 100%; object-fit: cover; }
  #grp-edit-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--scrim); }
  #grp-info-name { min-height: 30px; padding: 0; margin: 0 0 6px; background: transparent; border: 0; text-align: left; font-size: 21px; font-weight: 500; color: var(--text-main); }
  #grp-info-desc { width: 100%; padding: 0; margin: 0; min-height: 42px; background: transparent; border: 0; font-size: 13px; color: var(--text-sec); resize: none; text-align: left; }
  #grp-info-name:disabled, #grp-info-desc:disabled { opacity: 1; }
  #modal-partner .ios-close-btn { top: 12px; right: 12px; }
  :root[data-glass-off] .input-area { background: var(--surface-raised); }
  .group-modal-clean .group-modal-header { min-height: 54px; }
  .group-modal-clean .settings-group-ios { background: transparent; border: 0; border-radius: 0; }
  .group-modal-clean .settings-row-ios { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
  .date-divider { position: relative; top: auto; }
  button, .btn { -webkit-text-fill-color: currentColor; }
  .premium-username, .premium-username span { color: var(--accent-text); background: none !important; -webkit-text-fill-color: currentColor !important; }
  .premium-avatar-ring { background: var(--accent-subtle); animation: none; }
  .channel-broadcast-mobile-card, .channel-live-setup, .channel-live-media-card { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--glass-shadow); }
  #channel-broadcast-modal { background: var(--scrim); color: var(--text-main); backdrop-filter: none; padding: 16px; }
  .channel-broadcast-mobile-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--accent-subtle); color: var(--accent-text); box-shadow: none; }
  .channel-broadcast-mobile-card h2 { font-size: 22px; font-weight: 500; }
  .channel-broadcast-mobile-card p { color: var(--text-sec); font-size: 13px; }
  .channel-broadcast-mobile-primary { background: var(--primary); color: var(--on-primary); }
  .channel-broadcast-mobile-secondary { background: var(--surface-raised); color: var(--text-main); }
  .channel-live-header, .channel-live-badge { background: var(--accent-subtle); color: var(--accent-text); box-shadow: none; }
  .premium-pay-btn, .poll-create-submit, .channel-broadcast-mobile-primary, .btn-publish { color: var(--on-primary) !important; background: var(--primary); }
  .premium-modal-wrap { max-width: 920px; border: 1px solid var(--border); background: var(--bg-body); max-height: min(840px, calc(var(--viewport-height) - 48px)); border-radius: 18px; }
  .premium-modal-header { flex-direction: row; gap: 16px; align-items: center; text-align: left; padding: 26px 64px 24px 26px; background: var(--bg-body); border-bottom: 1px solid var(--border); }
  .premium-modal-header::before, .premium-modal-header::after, .pm-feat-icon::after { display: none; }
  .premium-modal-header h2 { font: 400 27px/1.2 var(--font-display); letter-spacing: -.025em; margin: 0 0 5px; }
  .premium-modal-header p { color: var(--text-sec); font-size: 13px; margin: 0; }
  .pm-gem-icon { width: 38px; height: 38px; margin: 0; flex-shrink: 0; filter: none; color: var(--accent-text); animation: none; }
  .pm-close-btn { width: 32px; height: 32px; top: 20px; right: 20px; border-radius: 9px; background: var(--surface); color: var(--text-sec); }
  .pm-close-btn:hover { transform: none; background: var(--hover); }
  .premium-plan-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; gap: 28px; padding: 24px 26px; }
  .premium-details, .premium-checkout { min-width: 0; }
  .premium-feature-list { gap: 0; margin: 0 0 24px; }
  .premium-feature-item { border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; border-radius: 0; padding: 11px 0; font-size: 13px; gap: 12px; min-height: 44px; }
  .pm-feat-icon { width: 26px; height: 26px; border-radius: 6px; background: transparent !important; color: var(--accent-text); }
  .premium-checkout { position: sticky; top: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 16px; }
  .pm-section-label { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; margin: 0 0 12px; color: var(--text-sec); }
  .premium-plans-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 16px; }
  .premium-plan-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; text-align: left; align-items: center; gap: 3px 8px; padding: 12px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
  .premium-plan-card.selected { background: var(--accent-subtle); border-color: var(--accent-border); }
  .plan-name { font-size: 13px; margin: 0; color: var(--text-main); }
  .plan-price { font-size: 20px; margin: 0; font-weight: 500; }
  .plan-period { font-size: 11px; margin: 0; }
  .plan-save { font-size: 11px; margin: 0; text-align: right; color: var(--accent-text); }
  .plan-popular-badge { display: none; }
  .pm-business-card { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 16px; margin: 0; }
  .pm-business-note { font-weight: 400; }
  .pm-active-view { align-items: stretch; text-align: left; padding: 24px 26px; gap: 16px; }
  .premium-active-heading { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 500; color: var(--text-main); }
  .premium-active-heading svg { color: var(--accent-text); flex-shrink: 0; }
  .pm-active-card { background: var(--surface); padding: 20px; border: 1px solid var(--border); border-radius: 12px; margin: 0; flex-shrink: 0; }
  .pm-active-card::before { display: none; }
  .pm-plan-pill { background: var(--accent-subtle); color: var(--accent-text); -webkit-text-fill-color: currentColor; border-radius: 7px; font-weight: 500; }
  .pm-expiry-info { font-weight: 500; font-size: 14px; line-height: 1.5; }
  .pm-renew-status { line-height: 1.5; }
  .pm-active-view > .pm-business-card { flex-shrink: 0; }
  .pm-active-view > .btn, .pm-cancel-btn { flex-shrink: 0; }
  .pm-legal { font-size: 10px; line-height: 1.5; margin-top: 12px; color: var(--text-sec); }
  @media (max-width: 799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .premium-modal-wrap { max-width: 560px; max-height: calc(var(--viewport-height) - 24px); }
    .premium-modal-header { padding: 22px 56px 20px 20px; gap: 12px; }
    .premium-modal-header h2 { font-size: 23px; }
    .premium-modal-header p { font-size: 12px; }
    .pm-close-btn { top: 16px; right: 16px; }
    .pm-gem-icon { width: 28px; height: 28px; }
    .premium-plan-layout { display: flex; flex-direction: column; gap: 20px; padding: 20px; }
    .premium-checkout { order: -1; position: static; width: 100%; }
    .premium-details { width: 100%; }
  }
  .btn-publish svg { stroke: var(--on-primary) !important; color: var(--on-primary) !important; }
  .call-feedback-overlay { padding: 16px; background: var(--scrim); backdrop-filter: none; }
  .call-feedback-orb { display: none; }
  .call-feedback-card { width: min(420px, 100%); border: 1px solid var(--border); border-radius: 18px; padding: 24px; box-shadow: var(--glass-shadow); }
  .call-feedback-icon { width: 48px; height: 48px; margin-bottom: 18px; filter: none; }
  #call-feedback-title { font-size: 22px; font-weight: 500; margin: 0 0 10px; }
  .call-feedback-lead { font-size: 13px; font-weight: 400; color: var(--text-sec); }
  .call-feedback-stars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .call-feedback-stars button { width: 100%; min-width: 0; background: transparent; color: var(--text-sec); }
  .call-feedback-stars button > span { width: 100%; height: 44px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-sec); font-size: 26px; }
  .call-feedback-stars button.selected > span { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-subtle); }
  #call-feedback-submit { min-height: 44px; background: var(--primary); color: var(--on-primary); border-radius: 10px; font-weight: 500; }
  #view-call { background: var(--call-bg); color: var(--call-text); }
  .call-bg-blur, .call-avatar-ring { display: none; }
  .call-name { font-size: 28px; font-weight: 500; color: var(--call-text); }
  .call-controls { max-width: calc(100% - 24px); gap: 8px; }
  .call-btn { width: 48px; height: 48px; min-width: 48px; }
  #story-cam-view .btn-cam-icon { background: var(--call-glass); color: var(--call-text); border-color: var(--call-border); }
  .story-editor-tools .btn-cam-icon { background: var(--surface-raised); color: var(--text-main); border: 1px solid var(--border); border-radius: 10px; }
  .shutter-outer { border-color: var(--primary); }
  .shutter-inner { background: var(--on-primary); }
  .story-cam-controls { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .story-editor-tools.footer { padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .story-desc-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
  .story-privacy-btn { grid-column: 1 / -1; justify-self: start; min-height: 34px; padding: 7px 11px; border-radius: 9px; font-size: 12px; background: var(--surface); color: var(--text-main); border: 1px solid var(--border); }
  #story-desc-in { min-width: 0; width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text-main); padding: 11px 12px; }
  .btn-publish { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
  #story-canvas-area { background: var(--bg-body); }
  @media (min-width: 800px) and (pointer:fine), (min-width: 800px) and (min-height:501px), (min-width: 800px) and (min-width:1025px) { .story-desc-row { grid-template-columns: auto minmax(0, 1fr) 44px; } .story-privacy-btn { grid-column: auto; } }
  @media (min-width: 800px) and (pointer:fine), (min-width: 800px) and (min-height:501px), (min-width: 800px) and (min-width:1025px) {
    :root[data-rail-collapsed] .workspace-header { padding-left: 8px; padding-right: 8px; }
    :root[data-rail-collapsed] .workspace-header .rail-topline { flex-direction: column; gap: 10px; margin-bottom: 16px; }
    :root[data-rail-collapsed] .workspace-header .rail-brand { padding: 0; }
    :root[data-rail-collapsed] .workspace-header .rail-wordmark, :root[data-rail-collapsed] .rail-compose span,
    :root[data-rail-collapsed] .workspace-sidebar .sidebar, :root[data-rail-collapsed] .workspace-footer .rail-item { display: none; }
    :root[data-rail-collapsed] .workspace-header .rail-compose { justify-content: center; padding: 8px; border: 0; }
    :root[data-rail-collapsed] .workspace-navigation { display: flex; flex-direction: column; padding: 0 6px; }
    :root[data-rail-collapsed] .workspace-navigation #rail-menu { display: flex; }
    :root[data-rail-collapsed] .workspace-footer { margin: auto 8px 0; padding: 10px 0; }
    :root[data-rail-collapsed] .workspace-footer .rail-profile-copy { display: none; }
    :root[data-rail-collapsed] .workspace-footer .rail-profile { justify-content: center; padding: 6px; }
  }
  @media (max-width: 799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #view-app { grid-template-columns: minmax(0, 1fr); }
    .workspace-sidebar { border: 0; width: 100%; }
    .workspace-header, .workspace-navigation, .workspace-footer { display: none; }
    .workspace-sidebar .sidebar { background: var(--bg-body); }
    .workspace-sidebar .sidebar-header { padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 14px; min-height: 70px; }
    .workspace-sidebar .sidebar-title { font-size: 25px; font-family: var(--font-display); color: var(--text-main); font-weight: 400; }
    .workspace-sidebar .sidebar-header > .flex:last-child { display: flex; }
    .workspace-sidebar .sidebar-header .btn-icon { width: 38px; min-height: 40px; height: 40px; }
    .workspace-sidebar .sidebar-header button:is([onclick="Profile.openMenu()"],[data-zn-onclick="h0025"]) { display: inline-flex; }
    .workspace-sidebar .list-container { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
    .workspace-sidebar .list-item { min-height: 78px; padding: 12px; }
    .workspace-sidebar .list-item .avatar { width: 44px; height: 44px; min-width: 44px; }
    .workspace-sidebar .list-item .bold { font-size: 14px; }
    #view-auth { padding: 32px 20px; gap: 8px; }
    .auth-card { padding: 12px 4px; }
    .auth-heading { font-size: 30px; }
    .auth-eyebrow { margin-bottom: 24px; }
  }
}
:root { --workspace-width: 312px; }
@media (min-width: 1600px) { :root { --workspace-width: 328px; } }
@media (min-width: 800px) and (max-width: 1023px) and (pointer:fine), (min-width: 800px) and (max-width: 1023px) and (min-height:501px), (min-width: 800px) and (max-width: 1023px) and (min-width:1025px) { :root { --workspace-width: 280px; } }
@media (min-width: 800px) and (pointer:fine), (min-width: 800px) and (min-height:501px), (min-width: 800px) and (min-width:1025px) { :root[data-rail-collapsed] { --workspace-width: 72px; } }

/* Compact account menus and a business editor with separate preview and form. */
@layer system {
  body:has(.modal-overlay:not(.hidden), .chat-folder-modal:not(.hidden), .changelog-overlay:not(.hidden)) #float-date-indicator { visibility: hidden; }
  #modal-menu.modal-overlay { padding: 12px; align-items: center; justify-content: center; }
  #modal-menu .modal { position: relative; inset: auto; transform: none; margin: 0; width: min(390px, 100%); max-height: calc(var(--viewport-height) - 24px); height: auto; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
  #modal-menu .menu-header-card { position: relative; flex-shrink: 0; align-items: flex-start; gap: 12px; padding: 22px 42px 18px 20px; min-height: 104px; }
  #modal-menu .menu-user-info { flex: 1; min-width: 0; text-align: left; }
  #modal-menu .menu-identity-line { flex-wrap: wrap; gap: 6px 8px; justify-content: flex-start; }
  #modal-menu .menu-name-text { min-width: 0; max-width: 100%; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
  #menu-security-rating { flex-shrink: 0; }
  #modal-menu .menu-handle-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; margin-top: 5px; }
  #modal-menu #menu-bio { max-width: 100%; margin-top: 8px; line-height: 1.5; text-align: left; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  #modal-menu .menu-close { top: 12px; right: 10px; width: 28px; height: 28px; min-height: 28px; }
  #modal-menu .menu-sections { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-bottom: 16px; }
  #modal-menu .settings-row-ios { flex-wrap: nowrap; gap: 10px; align-items: center; min-height: 46px; padding: 9px 10px; }
  #modal-menu .ios-icon-box, #modal-menu .ios-arrow { flex-shrink: 0; }
  #modal-menu .ios-label { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
  #modal-menu .menu-row-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
  #modal-menu .menu-row-copy .ios-label { flex: initial; }
  #modal-menu .menu-row-description { color: var(--text-sec); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; text-align: left; }

  #modal-group-info.modal-overlay { padding: 12px; align-items: center; justify-content: center; background: var(--scrim); }
  #modal-group-info .group-modal-clean { position: relative; inset: auto; margin: 0; width: min(560px, 100%); max-width: 560px; height: min(860px, calc(var(--viewport-height) - 24px)); max-height: calc(var(--viewport-height) - 24px); border: 1px solid var(--border); border-radius: 16px; }
  .group-modal-clean .group-modal-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; min-height: 64px; border-bottom: 1px solid var(--border-subtle); }
  .group-modal-clean .group-modal-body { padding-top: 0; }
  #group-info-heading { min-width: 0; margin: 0; font: 400 22px/1.25 var(--font-display); text-align: left; overflow-wrap: anywhere; }
  .group-modal-header .btn-icon { flex-shrink: 0; width: 32px; height: 32px; min-height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-sec); }
  .group-identity { align-items: flex-start; }
  #grp-info-name { min-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
  #grp-info-desc { min-height: 52px; max-height: 180px; line-height: 1.5; overflow-wrap: anywhere; }
  #ptn-name { overflow-wrap: anywhere; }
  #ptn-ids, #ptn-bio { overflow-wrap: anywhere; }

  #modal-business-account.business-account-overlay { padding: 24px; align-items: center; justify-content: center; background: var(--scrim); }
  #modal-business-account .business-account-modal { position: relative; inset: auto; margin: 0; display: flex; flex-direction: column; align-items: stretch; width: min(1000px, 100%); max-width: 1000px; height: min(860px, calc(var(--viewport-height) - 48px)); max-height: calc(var(--viewport-height) - 48px); padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-body); overflow: hidden; }
  #modal-business-account .business-page-header { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; padding: 16px 22px; min-height: 76px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-body); }
  #modal-business-account .business-back-btn { width: 36px; min-width: 36px; height: 36px; border-radius: 8px; }
  #modal-business-account .business-page-title { text-align: left; }
  #modal-business-account .business-page-title h2 { font: 400 26px/1.2 var(--font-display); text-align: left; white-space: normal; }
  #modal-business-account .business-page-title .text-sec { text-align: left; margin-top: 4px; font-size: 12px; }
  #modal-business-account .business-save-top { min-width: 104px; min-height: 38px; border-radius: 9px; padding: 8px 14px; font-size: 12px; }
  #modal-business-account .business-page-scroll { padding: 24px; scrollbar-gutter: stable; }
  #modal-business-account .business-notice { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 13px; font-weight: 400; }
  #business-notice-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  #business-premium-action { flex-shrink: 0; min-height: 38px; padding: 8px 12px; font-size: 12px; border-radius: 9px; }
  .business-editor-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 28px; align-items: start; }
  .business-editor-aside { position: sticky; top: 0; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  #modal-business-account .business-preview-card { flex-direction: column; align-items: flex-start; gap: 16px; min-height: 0; padding: 20px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); }
  #modal-business-account .business-logo-wrap { width: 64px; height: 64px; flex: 0 0 64px; }
  #modal-business-account .business-logo-wrap img { width: 64px; height: 64px; border-radius: 16px; border: 1px solid var(--border-subtle); }
  #modal-business-account .business-logo-wrap button { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-raised); border: 1px solid var(--border); }
  #modal-business-account .business-logo-wrap .icon { width: 16px; height: 16px; }
  #modal-business-account .business-preview-copy { width: 100%; }
  #modal-business-account .business-preview-name { font: 400 22px/1.25 var(--font-display); white-space: normal; overflow-wrap: anywhere; text-align: left; }
  #modal-business-account .business-company-label { margin: 8px 0; font-size: 11px; font-weight: 400; color: var(--accent-text); }
  #modal-business-account .business-preview-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; color: var(--text-sec); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
  .business-section-navigation { display: flex; flex-direction: column; gap: 4px; }
  .business-section-navigation button { min-width: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-sec); text-align: left; font: 400 12px/1.4 var(--font); padding: 10px 12px; cursor: pointer; }
  .business-section-navigation button:hover { background: var(--hover); color: var(--text-main); }
  .business-editor-content { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
  .business-form-section { min-width: 0; scroll-margin-top: 8px; }
  #modal-business-account .business-section-title { margin: 0 0 16px; padding: 0; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--text-main); }
  #modal-business-account .business-form-grid { padding: 0; gap: 16px; border-radius: 0; background: transparent; }
  #modal-business-account .business-field { gap: 7px; color: var(--text-sec); font-size: 12px; font-weight: 400; }
  #modal-business-account .business-field input, #modal-business-account .business-field textarea, #modal-business-account .business-hour-row input[type=time] { min-height: 42px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--input-bg); color: var(--text-main); -webkit-text-fill-color: currentColor; font-size: 13px; font-weight: 400; line-height: 1.5; }
  #modal-business-account .business-field textarea { min-height: 88px; }
  #modal-business-account input:disabled, #modal-business-account textarea:disabled { opacity: 1; background: var(--surface); color: var(--text-sec); cursor: not-allowed; }
  #modal-business-account button:disabled { opacity: 1; background: var(--surface); border-color: var(--border); color: var(--text-sec) !important; -webkit-text-fill-color: currentColor !important; cursor: not-allowed; }
  #modal-business-account .business-field input:focus-visible, #modal-business-account .business-field textarea:focus-visible { border-color: var(--primary); outline: 2px solid var(--accent-subtle); outline-offset: 2px; }
  #modal-business-account .business-hours { padding: 0; background: transparent; border-radius: 0; }
  #modal-business-account .business-hour-row { grid-template-columns: 28px minmax(72px, 1fr) 12px minmax(72px, 1fr) 92px; gap: 8px; padding: 10px 0; border-color: var(--border-subtle); }
  #modal-business-account .business-hour-row > strong { font-size: 12px; font-weight: 500; }
  #modal-business-account .business-hour-row input[type=time] { padding: 8px; font-size: 12px; }
  #modal-business-account .business-hour-row label { font-size: 12px; gap: 6px; }
  #modal-business-account .business-actions { margin-top: 0; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
  #modal-business-account .business-actions .btn { min-height: 42px; border-radius: 9px; font-size: 13px; white-space: normal; }
  @media (max-width: 899px) {
    .business-editor-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .business-editor-aside { position: static; }
    #modal-business-account .business-preview-card { flex-direction: row; align-items: center; }
    .business-section-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .business-section-navigation button { background: var(--surface); border: 1px solid var(--border-subtle); }
    #modal-business-account .business-preview-copy { width: auto; }
  }
  @media (max-width: 599px) {
    #modal-business-account.business-account-overlay { padding: 12px; }
    #modal-business-account .business-account-modal { width: 100%; height: calc(var(--viewport-height) - 24px); max-height: calc(var(--viewport-height) - 24px); }
    #modal-business-account .business-page-header { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; padding: 14px 12px; }
    #modal-business-account .business-back-btn { width: 28px; min-width: 28px; }
    #modal-business-account .business-page-title h2 { font-size: 20px; }
    #modal-business-account .business-page-title .text-sec { font-size: 10px; }
    #modal-business-account .business-save-top { min-width: 0; padding: 7px 9px; font-size: 11px; }
    #modal-business-account .business-page-scroll { padding: 16px; scrollbar-gutter: auto; }
    #modal-business-account .business-notice { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px; margin-bottom: 16px; font-size: 12px; }
    #modal-business-account .business-preview-card { gap: 12px; padding: 14px; }
    #modal-business-account .business-logo-wrap, #modal-business-account .business-logo-wrap img { width: 48px; height: 48px; flex-basis: 48px; border-radius: 12px; }
    #modal-business-account .business-preview-name { font-size: 20px; }
    #modal-business-account .business-form-grid, #modal-business-account .business-form-grid.two-columns { grid-template-columns: minmax(0, 1fr); }
    #modal-business-account .business-field input, #modal-business-account .business-field textarea { font-size: 16px; }
    #modal-business-account .business-hour-row { grid-template-columns: 24px minmax(0, 1fr) 12px minmax(0, 1fr); gap: 6px; }
    #modal-business-account .business-hour-row label { grid-column: 2 / -1; justify-self: start; }
    #modal-business-account .business-hour-row input[type=time] { font-size: 14px; }
    #modal-menu .menu-header-card { padding-left: 16px; }
    #group-info-heading { font-size: 20px; }
  }
}

@layer system {
  :root:is([data-sidebar-section="contacts"],[data-sidebar-section="calls"]) .workspace-sidebar :is(.search-container,.stories-rail,#mobile-search-bar) { display:none !important; }
  .sidebar.search-active :is(#list-chats,#list-contacts,#list-calls,#chat-folder-rail,.stories-rail,#invite-friends-banner,#app-promo-banner) { display:none !important; }
  .search-field { position:relative; }
  .workspace-sidebar #desktop-search-input { min-width:0; padding-right:38px; }
  .search-clear { display:none; position:absolute; right:22px; top:4px; width:28px; height:28px; align-items:center; justify-content:center; padding:0; border:0; border-radius:6px; background:transparent; color:var(--text-sec); cursor:pointer; }
  .search-clear .icon { width:16px; height:16px; }
  .sidebar.search-active .search-clear { display:flex; }
  #list-search { position:relative; inset:auto; flex:1 1 auto; min-height:0; height:auto; width:100%; background:transparent; padding:6px 8px 20px; z-index:1; overflow-y:auto; overscroll-behavior:contain; }
  #list-search:empty::before { content:none; }
  .search-summary,.search-header { padding:12px 16px 8px; color:var(--text-sec); font-size:11px; font-weight:400; line-height:1.5; }
  .search-header { margin-top:8px; border-top:1px solid var(--border-subtle); }
  #list-search .list-item { min-height:66px; gap:10px; }
  .search-result-copy { min-width:0; flex:1; }
  .search-result-copy .bold { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; gap:5px; }
  .search-result-copy .text-sec { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; }
  .search-result-copy .account-status-badge { flex-shrink:0; }
  .list-state { display:flex; flex-direction:column; align-items:center; text-align:center; padding:36px 20px; max-width:340px; margin:0 auto; gap:10px; }
  .list-state-icon { display:grid; place-items:center; color:var(--text-sec); width:40px; height:40px; margin-bottom:4px; }
  .list-state-icon svg { width:28px; height:28px; }
  .list-state h3 { font:400 21px/1.3 var(--font-display); color:var(--text-main); margin:0; overflow-wrap:anywhere; }
  .list-state p { font-size:12px; line-height:1.65; color:var(--text-sec); margin:0; overflow-wrap:anywhere; }
  .list-state .btn { margin-top:8px; min-height:38px; padding:8px 12px; font-size:12px; border:1px solid var(--border); border-radius:9px; }
  #contacts-search-row { flex-shrink:0; padding:0 16px 12px; }
  #contacts-search-input,#calls-search-input { background:var(--bg-body); border:1px solid var(--border-subtle); min-height:38px; }
  .contact-row-copy { flex:1; min-width:0; }
  .contact-row-main,.calls-open-btn { display:flex; align-items:center; flex:1; min-width:0; gap:11px; padding:0; border:0; background:transparent; color:inherit; text-align:left; font:inherit; cursor:pointer; }
  .contact-row-main { min-height:48px; }
  .contact-row-copy .text-xs { margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .contact-profile-btn { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; padding:0; border:0; border-radius:8px; color:var(--text-sec); background:transparent; cursor:pointer; }
  .contact-profile-btn:hover { background:var(--hover); color:var(--text-main); }
  .contact-profile-btn .icon { width:18px; height:18px; }
  #list-calls .calls-header { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:28px; padding:2px 20px 8px; }
  #calls-history-count { color:var(--text-sec); font-size:11px; }
  #list-calls .calls-header .btn-icon { display:none; }
  .calls-controls { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 16px 12px; }
  .calls-controls .calls-sort-btns { flex-wrap:nowrap; display:flex; gap:2px; padding:3px; border:1px solid var(--border-subtle); border-radius:9px; background:var(--surface); }
  .calls-controls .calls-sort-btn { min-height:28px; padding:4px 10px; border:0; border-radius:6px; font-size:11px; color:var(--text-sec); background:transparent; }
  .calls-controls .calls-sort-btn.active { background:var(--surface-raised); color:var(--text-main); }
  .calls-clear-btn { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:8px; color:var(--text-sec); background:transparent; cursor:pointer; }
  .calls-clear-btn .icon { width:17px; height:17px; }
  .calls-clear-btn:hover { background:var(--danger-bg); color:var(--danger); }
  #calls-list-inner { padding:4px 8px 20px; }
  .calls-date-sep { padding:12px 12px 6px; font-size:11px; font-weight:400; color:var(--text-sec); text-align:left; background:transparent; }
  .calls-item { display:flex; gap:10px; align-items:center; padding:11px 12px; min-height:72px; margin:0 0 2px; border:0; border-radius:10px; background:transparent; }
  .calls-item-avatar { flex:0 0 38px; width:38px; height:38px; border-radius:50%; }
  .calls-item-avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
  .calls-item-info { flex:1; min-width:0; width:100%; }
  .calls-item-name { font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .calls-item-meta { display:flex; align-items:center; gap:5px; font-size:11px; margin-top:4px; }
  .calls-item-meta span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .calls-item-right { flex-shrink:0; display:flex; align-items:flex-end; flex-direction:column; gap:5px; }
  .calls-item-time { font-size:10px; color:var(--text-sec); }
  .calls-item-actions { display:flex; gap:2px; }
  .calls-call-btn { width:28px; height:28px; display:grid; place-items:center; padding:0; border:0; border-radius:7px; background:transparent; color:var(--text-sec); }
  .calls-call-btn:hover { background:var(--hover); color:var(--accent-text); }
  #empty-state { padding:32px; height:100%; }
  .empty-state-content { display:flex; flex-direction:column; align-items:center; text-align:center; max-width:520px; gap:0; }
  .empty-state-content > .flex { background:transparent; border:0; width:52px; height:52px; margin-bottom:20px; }
  #empty-state-icon { width:32px; height:32px; }
  #empty-state-title { font-size:34px; line-height:1.2; letter-spacing:-.025em; }
  .empty-state-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:24px; }
  .empty-state-actions .btn { min-height:40px; font-size:12px; padding:9px 14px; border-radius:10px; }
  #empty-state-secondary { border:1px solid var(--border); }
  .ctx-menu { width:230px; max-width:calc(100vw - 24px); max-height:calc(var(--viewport-height) - 24px); min-width:210px; padding:6px; overflow-y:auto; overscroll-behavior:contain; transform-origin:top left; }
  .ctx-menu .ctx-item { display:flex; align-items:center; gap:10px; min-height:38px; padding:9px 10px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
  .ctx-menu .ctx-item .icon { flex-shrink:0; width:17px; height:17px; }
  .ctx-menu .ctx-item[aria-disabled="true"] { color:var(--text-muted); cursor:default; }
  .chat-search-overlay { top:0; z-index:950; padding-top:0; background:var(--bg-body); }
  .chat-search-bar { gap:10px; padding:18px 24px; background:var(--bg-body); border-bottom:1px solid var(--border-subtle); }
  #chat-search-input { min-width:0; min-height:40px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:var(--input-bg); font-size:14px; }
  .chat-search-results { padding:12px max(16px,calc((100% - 820px)/2)); }
  .chat-search-result { padding:16px; border:1px solid var(--border-subtle); border-radius:12px; margin-bottom:8px; background:var(--surface); }
  .chat-search-result-name { display:flex; gap:12px; align-items:center; margin-bottom:8px; }
  .chat-search-result-author { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; font-weight:500; }
  .chat-search-result-date { flex-shrink:0; }
  .chat-search-result-text { white-space:normal; overflow-wrap:anywhere; font-size:14px; line-height:1.65; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
  .chat-search-result-text mark { background:var(--accent-subtle); color:var(--accent-text); padding:0 2px; }
  @media (max-width:799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #list-search { padding-bottom:calc(80px + env(safe-area-inset-bottom,0px)); }
    .search-clear { right:22px; }
    :root:is([data-sidebar-section="contacts"],[data-sidebar-section="calls"]) .workspace-sidebar .sidebar-header { margin-bottom:8px; }
    #list-contacts { padding-bottom:calc(80px + env(safe-area-inset-bottom,0px)); }
    #calls-list-inner { padding-bottom:calc(80px + env(safe-area-inset-bottom,0px)); }
    .contact-row .avatar,.calls-item-avatar { width:42px; height:42px; flex-basis:42px; }
    .contact-profile-btn { width:36px; height:36px; flex-basis:36px; }
    .chat-search-overlay { top:0; }
    .chat-search-bar { padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px; }
    #chat-search-input { font-size:16px; }
    .chat-search-results { padding:12px; }
  }
}

@layer system {
  /* Every message has one body and a dedicated, reachable action control. */
  .messages { gap: 8px; }
  .msg-row { position: relative; align-items: flex-end; gap: 8px; max-width: min(84%, 680px); padding: 0; }
  .message-body { display: flex; flex-direction: column; min-width: 0; max-width: 100%; gap: 3px; }
  .msg-row.own { flex-direction: row-reverse; }
  .message-author { line-height: 1.4; }
  .bubble { border-radius: var(--bubble-radius); padding: 11px 15px; line-height: 1.6; }
  .msg-row:not(.own) .bubble:not(.media-bubble,.transparent-media,.document-bubble,.audio-bubble,.poll-bubble) { background:var(--msg-in); border:1px solid var(--border-subtle); padding:10px 13px; }
  .message-menu-button { display: flex; align-items: center; justify-content: center; width: 28px; height: 32px; flex: 0 0 28px; border: 0; border-radius: 8px; color: var(--text-sec); background: transparent; cursor: pointer; opacity: 0; }
  .message-menu-button .icon { width: 18px; height: 18px; }
  .msg-row:hover .message-menu-button, .msg-row:focus-within .message-menu-button { opacity: 1; }
  .message-menu-button:hover { background: var(--hover); }
  .message-body .meta { position: static; float: none; display: flex; justify-content: flex-end; align-items: center; margin: 6px 0 0; min-height: 12px; line-height: 1.3; }
  .message-body .media-bubble .meta { margin: 0; padding: 7px 12px; background: transparent; color: var(--text-sec); border-radius: 0; }
  .message-body .transparent-media .meta { width: fit-content; margin-left: auto; }
  .bubble.document-bubble, .own .bubble.document-bubble { width: min(360px, 100%); max-width: 360px; padding: 14px; border-radius: 13px; }
  .document-file-link { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text-main); text-decoration: none; }
  .document-file-card { padding: 0; border-radius: 0; background: transparent; }
  .document-file-icon { width: 42px; height: 48px; flex: 0 0 42px; display: flex; justify-content: center; align-items: center; border-radius: 9px; background: var(--surface); color: var(--accent-text); }
  .document-file-type-icon { width: 24px; height: 24px; }
  .document-file-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .document-file-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
  .document-file-details small { font-size: 11px; line-height: 1.4; color: var(--text-sec); }
  .document-file-download { flex: 0 0 18px; width: 18px; height: 18px; color: var(--text-sec); }
  .audio-bubble { width: min(350px, 100%); border: 1px solid var(--border); background: var(--surface-raised); }
  .msg-audio-custom { width: 300px; max-width: 100%; min-width: 0; gap: 12px; padding: 0; }
  .audio-track { flex: 1; width: 0; min-width: 0; }
  .audio-control-btn, .msg-row.own .audio-control-btn { width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 11px; color: var(--on-primary); background: var(--primary); }
  .audio-control-btn:disabled { background: var(--surface); color: var(--text-muted); }
  .audio-waveform-canvas { display: block; max-width: 100%; }
  .audio-speed-btn, .msg-row.own .audio-speed-btn { min-width: 32px; height: 24px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 11px; line-height: 1; color: var(--text-sec); background: var(--surface); cursor: pointer; }
  .audio-time-label { color: var(--text-sec); font-size: 11px; }
  .bubble.media-bubble { box-sizing: border-box; width: min(420px,100%); max-width: min(420px,100%); padding: 3px; border: 0; border-radius: var(--bubble-radius); overflow: hidden; }
  .bubble.media-bubble .album-grid { max-width: 100%; width: 100%; gap: 3px; border-radius: max(0px,calc(var(--bubble-radius) - 3px)); overflow: hidden; }
  .bubble.media-bubble .album-cell, .bubble.media-bubble .album-cell .msg-img { border-radius: 0; }
  .bubble.media-bubble > .msg-img, .bubble.media-bubble > .msg-video-wrap { border-radius: max(0px,calc(var(--bubble-radius) - 3px)); }
  .album-grid-1 > .album-cell { aspect-ratio: auto; }
  .bubble.media-bubble .album-grid-1 .msg-img { height: auto; max-height: 420px; object-fit: contain; border-radius: 0; }
  .album-grid > .album-cell:hover img { transform: none; }
  #attach-menu { width: min(270px, calc(100vw - 32px)); padding: 8px; border-radius: 14px; background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--glass-shadow); }
  .attach-menu-item { display: flex; width: 100%; min-height: 44px; gap: 12px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-main); text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
  .attach-menu-item svg, .attach-menu-item.file-item svg, .attach-menu-item.photo-item svg, .attach-menu-item.video-item svg, .attach-menu-item.poll-item svg { width: 19px; height: 19px; color: var(--text-sec); }
  .attach-menu-item:hover { background: var(--hover); }
  .composer-toolbar #btn-record-mode { margin-left: auto; min-width: 54px; height: 34px; min-height: 34px; padding: 4px 8px; border-radius: 8px; font-size: 11px; color: var(--text-sec); }
  .composer-toolbar .action-btn-container { margin-left: 0; }
  #btn-record.recording { background: var(--accent-subtle); color: var(--accent-text); animation: none; }
  .recording-panel { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); order: -1; }
  .recording-panel-copy { min-width: 0; display: flex; align-items: center; gap: 8px; }
  #recording-title { min-width: 0; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
  .recording-indicator { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--primary); }
  #record-timer { position: static; transform: none; padding: 0; background: transparent; color: var(--text-sec); font-size: 12px; font-variant-numeric: tabular-nums; margin-left: auto; }
  .recording-panel-actions { display: flex; gap: 4px; }
  .recording-panel-actions .btn { min-height: 34px; height: 34px; padding: 7px 10px; font-size: 11px; border-radius: 8px; }
  #recording-preview { position: static; width: 120px; height: 120px; max-width: 100%; border-radius: 16px; object-fit: cover; transform: scaleX(-1); border: 1px solid var(--border); box-shadow: none; grid-column: 1 / -1; }
  .upload-progress-card { position: fixed; z-index: 9999; bottom: 24px; left: 50%; transform: translateX(-50%); width: min(360px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-raised); color: var(--text-main); box-shadow: var(--glass-shadow); }
  .upload-progress-header { display: flex; align-items: center; gap: 10px; }
  .upload-progress-header > .icon { width: 28px; height: 28px; color: var(--accent-text); flex-shrink: 0; }
  .upload-progress-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .upload-progress-copy strong { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .upl-sz, .upload-progress-footer { font-size: 11px; color: var(--text-sec); }
  .upload-progress-track { height: 4px; width: 100%; border-radius: 4px; background: var(--border); overflow: hidden; margin: 14px 0 8px; }
  .upl-bar-fill { display: block; width: 0; height: 100%; background: var(--primary); }
  .upload-progress-footer { display: flex; justify-content: space-between; }
  .media-viewer { position: fixed; inset: 0; z-index: 10000; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; width: 100%; min-width: 0; max-width: 100vw; padding: 0; background: var(--bg-body); color: var(--text-main); }
  .media-viewer-header { display: flex; min-width: 0; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 28px; border-bottom: 1px solid var(--border); }
  .media-viewer-identity { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
  .media-viewer-eyebrow { font-size: 11px; color: var(--text-sec); }
  #mv-title { margin: 0; font-size: 14px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .media-viewer-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .media-viewer-stage { position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; overscroll-behavior: contain; background: var(--surface); }
  .media-viewer-stage > img, .media-viewer-stage > video { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; }
  .media-viewer-stage[data-kind='image']:not(.is-unavailable) { display: block; touch-action: pan-y; }
  .media-viewer-stage[data-kind='image'].is-zoomed { touch-action: auto; cursor: grab; }
  .media-viewer-stage.is-dragging { cursor: grabbing; user-select: none; }
  .media-viewer-canvas { display: grid; place-items: center; min-width: 100%; min-height: 100%; }
  .media-viewer-canvas img { display: block; flex: none; max-width: none; max-height: none; object-fit: contain; border-radius: 8px; transform: none; transition: none; user-select: none; -webkit-user-drag: none; cursor: zoom-in; }
  .media-viewer-canvas img[hidden] { display: none; }
  .media-viewer-stage.is-zoomed img { cursor: inherit; }
  .media-viewer-stage:focus-visible { outline: 2px solid var(--accent-border); outline-offset: -3px; }
  .media-viewer-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: var(--text-sec); font-size: 13px; text-align: center; width: calc(100% - 48px); pointer-events: none; }
  .media-viewer-stage.is-unavailable .list-state { width: min(100%,440px); }
  .media-viewer-stage.is-unavailable .list-state .btn { margin-top: 6px; }
  .media-viewer-stage > audio { width: min(100%,480px); }
  .media-viewer-footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 16px 28px; border-top: 1px solid var(--border); }
  .media-viewer-footer .btn { text-decoration: none; }
  #mv-zoom[aria-pressed='true'] .mv-zoom-plus { display: none; }
  .media-viewer-navigation { display: flex; align-items: center; gap: 12px; }
  .media-viewer-navigation .btn-icon { flex: 0 0 40px; }
  #mv-counter { font-size: 12px; color: var(--text-sec); font-variant-numeric: tabular-nums; }
  .media-viewer-file { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(100%,440px); text-align: center; }
  .media-viewer-file > .icon { width: 48px; height: 48px; color: var(--accent-text); }
  .media-viewer-file strong { width: 100%; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
  .media-viewer-file p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-sec); }
  @media (hover: none) { .message-menu-button { opacity: 1; } }
  @media (max-width: 799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .msg-row { max-width: 96%; gap: 4px; }
    .message-menu-button { width: 24px; flex-basis: 24px; }
    .bubble { padding: 10px 12px; }
    .msg-audio-custom { width: min(300px,calc(100vw - 122px)); gap: 9px; }
    .recording-panel { grid-template-columns: minmax(0,1fr); gap: 10px; padding: 10px; }
    .recording-panel-actions { justify-content: flex-end; }
    .media-viewer-header { padding: 14px 16px; gap: 10px; }
    .media-viewer-actions { gap: 2px; }
    .media-viewer-stage { padding: 16px; }
    .media-viewer-footer { padding: 12px 16px; gap: 8px; }
    .media-viewer-footer .btn-primary { padding: 10px 12px; min-height: 40px; font-size: 12px; }
    .media-viewer-navigation { gap: 3px; }
    #mv-counter { min-width: 40px; text-align: center; }
  }
  @media (max-height: 480px) { .media-viewer-header, .media-viewer-footer { padding-top: 8px; padding-bottom: 8px; min-height: 56px; } }
}

@layer system {
  #input-container > #fwd-indicator.composer-context,
  #input-container > #edit-indicator.composer-context {
    position:relative;inset:auto;transform:none;width:100%;max-width:none;flex:none;order:-5;
    display:flex;align-items:center;gap:10px;margin:0;padding:10px 0 12px;border:0;border-bottom:1px solid var(--border);
    border-radius:0;background:transparent;box-shadow:none;animation:none;
  }
  .composer-context-icon {width:18px;height:18px;flex-shrink:0;color:var(--primary);}
  .composer-toolbar .action-btn-container > .hidden-state {visibility:hidden;pointer-events:none;}
  .input-area #btn-send > svg {color:var(--on-primary);stroke:var(--on-primary);}
  .composer-toolbar #msg-schedule-btn,.composer-toolbar #msg-timer-btn {position:relative;width:32px;height:34px;min-height:34px;border:0;border-radius:8px;padding:6px;color:var(--text-sec);background:transparent;flex-shrink:0;}
  .composer-toolbar #msg-schedule-btn {margin-left:auto;}
  .composer-toolbar #msg-schedule-btn.active,.composer-toolbar #msg-timer-btn.active {color:var(--accent-text);background:var(--accent-subtle);}
  #msg-action-sheet {z-index:10050;}
  .composer-actions-sheet {width:min(420px,calc(100vw - 24px));max-height:calc(var(--viewport-height) - 24px);padding:0;display:flex;flex-direction:column;}
  .composer-actions-content {padding:8px;min-height:0;overflow-y:auto;}
  .composer-actions-content hr {border:0;border-top:1px solid var(--border);margin:6px 8px;}
  .composer-option-item {display:flex;flex-direction:column;gap:3px;width:100%;padding:11px 13px;border:0;border-radius:8px;color:var(--text-main);background:transparent;text-align:left;font-family:inherit;cursor:pointer;}
  .composer-option-item strong {font-size:13px;font-weight:500;line-height:1.6;overflow-wrap:anywhere;}
  .composer-option-item > span {font-size:11px;line-height:1.6;color:var(--text-sec);}
  .composer-option-item.danger {color:var(--danger);}
  .composer-option-item:hover {background:var(--surface-hover);}
  .composer-context .fwd-content,.thread-reply-copy {display:flex;flex:1;flex-direction:column;min-width:0;gap:3px;}
  .composer-context .fwd-title,.thread-reply-copy strong {color:var(--text-main);font-size:12px;font-weight:600;line-height:1.5;}
  .composer-context .fwd-preview,.thread-reply-copy span {color:var(--text-sec);font-size:12px;line-height:1.5;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  #input-container > .edit-context {justify-content:space-between;}
  .bubble > .message-quote,.thread-comment-bubble > .message-quote {
    display:flex;align-items:flex-start;gap:9px;min-width:0;width:100%;max-width:100%;padding:10px 11px;margin:0 0 9px;
    border:0;border-left:2px solid var(--primary);border-radius:0 8px 8px 0;
    background:var(--surface);color:var(--text-main);text-align:left;font-family:inherit;cursor:pointer;
  }
  .message-quote .icon {width:16px;height:16px;flex-shrink:0;color:var(--text-sec);margin-top:2px;}
  .message-quote-copy {display:flex;min-width:0;flex:1;flex-direction:column;gap:3px;}
  .message-quote-copy strong {font-size:12px;font-weight:600;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .message-quote-copy > span {font-size:12px;line-height:1.5;color:var(--text-sec);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .bubble > .fwd-block {display:flex;gap:9px;align-items:flex-start;border:0;border-bottom:1px solid var(--border);padding:0 0 10px;margin:0 0 10px;background:transparent;border-radius:0;max-width:100%;}
  .fwd-block > .icon {width:16px;height:16px;margin-top:2px;color:var(--text-sec);flex-shrink:0;}
  .fwd-copy {display:flex;flex-direction:column;min-width:0;gap:3px;}
  .fwd-copy .fwd-label {font-size:10px;color:var(--text-sec);line-height:1.5;}
  .fwd-copy .fwd-author {font-size:12px;color:var(--text-main);font-weight:600;}
  .fwd-copy .fwd-text-preview {font-size:12px;color:var(--text-sec);line-height:1.5;overflow-wrap:anywhere;}
  .reactions-display,.thread-reactions {display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
  .reactions-display .reaction-chip,.thread-reactions .reaction-chip {
    display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:44px;min-height:30px;padding:4px 8px;
    border:1px solid var(--border);border-radius:8px;background:var(--surface-raised);color:var(--text-sec);font:inherit;cursor:pointer;
  }
  .reactions-display .reaction-chip.active,.thread-reactions .reaction-chip.active {border-color:var(--accent-border);background:var(--accent-subtle);color:var(--accent-text);}
  .reaction-chip .reaction-emoji {width:17px!important;height:17px!important;}
  .reaction-count {font-size:11px;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums;}
  .message-body {position:relative;}
  .msg-row .reaction-panel-desktop {position:absolute;inset:auto 0 100% auto;display:flex;gap:2px;min-height:38px;padding:3px;margin:0;border:1px solid var(--border);border-radius:10px;background:var(--surface-raised);box-shadow:var(--glass-shadow);transform:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .1s ease;z-index:110;}
  .msg-row:not(.own) .reaction-panel-desktop {left:0;right:auto;top:auto;transform:none;margin:0;}
  .msg-row:is(:hover,:focus-within) .reaction-panel-desktop {opacity:1;visibility:visible;pointer-events:auto;transform:none;}
  .reaction-panel-desktop .react-btn {width:32px;height:32px;min-width:32px;display:flex;align-items:center;justify-content:center;padding:4px;border:0;border-radius:7px;background:transparent;color:var(--text-main);cursor:pointer;transform:none;}
  .reaction-panel-desktop .react-btn:hover {background:var(--surface-hover);transform:none;}
  #emoji-picker-list {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:8px 0;}
  #emoji-picker-list .emoji-item {border:0;background:transparent;border-radius:9px;min-height:44px;min-width:0;display:flex;align-items:center;justify-content:center;cursor:pointer;}
  #emoji-picker-list .emoji-item .reaction-emoji {width:26px!important;height:26px!important;}
  #emoji-picker-list .emoji-item:hover {background:var(--surface-hover);transform:none;}
  #fwd-list {overflow-y:auto;min-height:0;max-height:60dvh;}
  .forward-preview {padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:14px;}
  .forward-preview p {font-size:13px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;margin:6px 0 0;}
  .forward-search {display:block;width:100%;min-height:40px;margin-bottom:12px;}
  .forward-recipients {display:flex;flex-direction:column;gap:3px;}
  .forward-recipient {display:flex;align-items:center;gap:11px;width:100%;padding:10px;border:0;border-radius:9px;background:transparent;color:var(--text-main);text-align:left;cursor:pointer;font-family:inherit;}
  .forward-recipient:hover {background:var(--surface-hover);}
  .forward-avatar {width:38px;height:38px;flex-shrink:0;border-radius:50%;object-fit:cover;}
  .forward-recipient-copy {display:flex;flex:1;min-width:0;flex-direction:column;gap:3px;}
  .forward-recipient-copy strong {font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .forward-recipient-copy > span {font-size:11px;color:var(--text-sec);}
  .forward-recipient > .icon {width:16px;height:16px;color:var(--text-sec);}
  .forward-no-results {color:var(--text-sec);font-size:13px;text-align:center;padding:20px 0;}
  .discussion-eyebrow {color:var(--text-sec);font-size:10px;line-height:1.5;letter-spacing:.04em;}
  #modal-thread.discussion-panel {position:fixed;inset:0 0 0 auto;width:min(460px,100vw);height:var(--viewport-height);max-height:none;display:flex;flex-direction:column;gap:0;border:0;border-left:1px solid var(--border);border-radius:0;padding:0;background:var(--bg-body);box-shadow:none;overflow:hidden;z-index:1000;transform:none;}
  .discussion-panel .thread-panel-header {position:relative;inset:auto;width:100%;height:auto;min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-shrink:0;padding:18px 20px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:var(--bg-body);}
  .thread-panel-heading {display:flex;flex-direction:column;gap:3px;min-width:0;}
  .thread-panel-heading h2 {margin:0;font-size:18px;font-weight:500;line-height:1.5;letter-spacing:-.02em;}
  #thread-count {margin-left:6px;color:var(--text-sec);font-size:12px;font-variant-numeric:tabular-nums;}
  .thread-root-card {padding:13px 20px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;}
  #thread-root-preview {margin:5px 0 0;font-size:12px;line-height:1.65;color:var(--text-main);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
  .discussion-panel #thread-feed {position:relative;inset:auto;width:100%;flex:1;min-height:0;padding:20px 16px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;overflow-x:hidden;}
  .discussion-state {margin:auto;max-width:290px;padding:32px 12px;text-align:center;color:var(--text-sec);font-size:13px;line-height:1.75;}
  .discussion-state > .icon {width:30px;height:30px;display:block;margin:0 auto 14px;color:var(--text-muted);}
  .discussion-state p {margin:0 0 14px;}
  .thread-comment {display:flex;align-items:flex-start;gap:9px;min-width:0;margin:0;padding:0;border-radius:10px;}
  .thread-comment-avatar {width:26px;height:26px;flex-shrink:0;border-radius:50%;object-fit:cover;margin-top:1px;}
  .thread-comment-body {flex:1;min-width:0;max-width:100%;}
  .thread-comment-heading {display:flex;align-items:baseline;gap:8px;margin:2px 0 5px;min-width:0;}
  .thread-comment-heading strong {font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .thread-comment-heading time {font-size:10px;color:var(--text-muted);flex-shrink:0;margin-left:auto;font-variant-numeric:tabular-nums;}
  .thread-comment .thread-comment-bubble {padding:0;background:transparent;color:var(--text-main);border-radius:0;font-size:13px;line-height:1.75;min-width:0;max-width:100%;}
  .thread-comment.own .thread-comment-bubble {background:var(--msg-out);padding:9px 11px;border-radius:10px;}
  .thread-comment-text {white-space:pre-wrap;overflow-wrap:anywhere;}
  .thread-comment-menu {width:26px;height:28px;flex-shrink:0;padding:4px;margin-top:-2px;border:0;border-radius:6px;background:transparent;color:var(--text-muted);cursor:pointer;}
  .thread-comment-menu .icon {stroke-width:4px;}
  .thread-comment-menu:hover {background:var(--surface-hover);color:var(--text-main);}
  .thread-comment-file {display:block;color:var(--primary);overflow-wrap:anywhere;margin-top:5px;}
  .thread-comment-edited {display:block;color:var(--text-sec);font-size:10px;margin-top:5px;}
  .discussion-panel .thread-composer-area {flex-shrink:0;padding:12px 16px 16px;border-top:1px solid var(--border);background:var(--bg-body);}
  .thread-typing-bar {font-size:11px;color:var(--text-sec);margin-bottom:8px;}
  .thread-composer {background:var(--surface-raised);border:1px solid var(--border);border-radius:12px;padding:10px 11px;}
  .thread-composer:focus-within {border-color:var(--text-muted);}
  #thread-reply-indicator {position:relative;inset:auto;display:flex;align-items:center;gap:8px;padding:0 0 10px;margin:0 0 8px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;}
  #thread-reply-indicator .btn {width:26px;height:26px;min-height:26px;flex-shrink:0;}
  #thread-input-bar.thread-input-bar {position:relative;inset:auto;display:flex;align-items:flex-end;gap:8px;width:100%;min-height:36px;padding:0;margin:0;border:0;border-radius:0;background:transparent;}
  #thread-input {flex:1;min-width:0;max-height:128px;min-height:36px;padding:7px 0;background:transparent;border:0;color:var(--text-main);font:inherit;font-size:13px;line-height:1.65;resize:none;box-shadow:none;}
  #thread-send {width:32px;height:32px;min-height:32px;padding:6px;border-radius:8px;flex-shrink:0;color:var(--on-primary);}
  #thread-send:disabled {background:var(--surface);color:var(--text-muted);border-color:var(--border);opacity:1;cursor:default;}
  .discussion-menu {position:fixed;z-index:3000;width:min(270px,calc(100vw - 16px));padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--surface-raised);box-shadow:var(--glass-shadow);}
  .discussion-quick-reactions {display:flex;justify-content:space-between;gap:2px;padding:4px 1px 9px;margin-bottom:4px;border-bottom:1px solid var(--border);}
  .discussion-quick-reactions .react-btn {width:36px;height:36px;min-width:0;border:0;border-radius:8px;background:transparent;cursor:pointer;}
  .discussion-menu-item {display:flex;align-items:center;gap:10px;padding:10px;width:100%;border:0;border-radius:7px;color:var(--text-main);background:transparent;text-align:left;font-family:inherit;font-size:13px;cursor:pointer;}
  .discussion-menu-item .icon {width:17px;height:17px;flex-shrink:0;color:var(--text-sec);}
  .discussion-menu-item.danger,.discussion-menu-item.danger .icon {color:var(--danger);}
  .discussion-menu-item:hover,.discussion-quick-reactions .react-btn:hover {background:var(--surface-hover);}
  .discussion-highlight {background:var(--accent-subtle);}
  body:has(#modal-thread:not(.hidden)) #float-date-indicator {visibility:hidden;pointer-events:none;}
  @media(min-width:1100px) {#active-chat.thread-panel-open {--thread-panel-width:390px;}#active-chat.thread-panel-open #modal-thread.discussion-panel {position:absolute;inset:0 0 0 auto;width:var(--thread-panel-width);height:100%;z-index:500;}#active-chat.thread-panel-open > #input-container {width:calc(100% - var(--thread-panel-width) - 48px);left:calc((100% - var(--thread-panel-width))/2);}}
  @media(max-width:799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {#modal-thread.discussion-panel {width:100vw;height:var(--viewport-height);border:0;} .discussion-panel .thread-panel-header {padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px;min-height:70px;}.discussion-panel .thread-composer-area {padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));}.discussion-panel #thread-feed {padding:18px 12px;}.thread-root-card {padding:12px 16px;}#emoji-picker-list {grid-template-columns:repeat(5,minmax(0,1fr));}}
  @media(max-height:500px) {.discussion-panel .thread-panel-header {min-height:56px;padding-top:9px;padding-bottom:9px;}.discussion-panel .thread-panel-heading h2 {font-size:16px;}.discussion-panel .thread-root-card {padding-top:8px;padding-bottom:8px;} .discussion-panel #thread-root-preview {-webkit-line-clamp:1;}#thread-input {max-height:68px;} .discussion-panel .thread-composer-area {padding-top:8px;padding-bottom:8px;}}
  @media(max-width:380px) {#input-container .composer-toolbar > .btn-icon {width:34px;min-width:34px;}#input-container .composer-toolbar .action-btn-container {width:34px;min-width:34px;}}
  @media(max-width:799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse), (pointer:coarse) {.msg-row .reaction-panel-desktop {display:none;}}
}

@layer system {
  .tool-eyebrow {font-size:11px;line-height:1.4;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);font-weight:600;}
  .tool-create-dialog,.tool-voters-dialog,.schedule-dialog {width:min(540px,calc(100vw - 32px));max-height:min(850px,calc(100dvh - 40px));display:flex;flex-direction:column;overflow:hidden;min-width:0;}
  .modal.tool-create-dialog,.modal.tool-voters-dialog,.modal.schedule-dialog {max-width:540px;}
  .tool-create-dialog .dialog-header,.tool-voters-dialog .dialog-header {display:flex;justify-content:space-between;flex-shrink:0;gap:12px;align-items:center;border-color:var(--border);}
  .tool-create-dialog .dialog-header>div,.tool-voters-dialog .dialog-header>div {width:auto;flex:1;min-width:0;}
  .tool-create-dialog .dialog-header>button,.tool-voters-dialog .dialog-header>button {flex-shrink:0;}
  .tool-create-dialog .dialog-header h2,.tool-voters-dialog .dialog-header h2 {text-align:left;margin:4px 0 0;font-family:var(--font);font-size:26px;font-weight:400;line-height:1.15;}
  .modal.tool-create-dialog h3,.modal.tool-create-dialog p,.modal.tool-voters-dialog p,.modal.schedule-dialog p {text-align:left;margin:0;}
  .tool-create-dialog .dialog-actions,.tool-voters-dialog .dialog-actions,.schedule-dialog .dialog-actions {display:flex;justify-content:flex-end;align-items:center;gap:10px;border-color:var(--border);}
  .tool-create-dialog .dialog-actions>.btn,.tool-voters-dialog .dialog-actions>.btn,.schedule-dialog .dialog-actions>.btn {width:auto;}
  .tool-form-body {padding:24px;display:flex;flex-direction:column;gap:24px;overflow-y:auto;min-height:0;overscroll-behavior:contain;}
  .tool-form-field {display:flex;flex-direction:column;gap:9px;}
  .tool-form-field>label,.schedule-editor>label {font-size:13px;font-weight:600;color:var(--text-main);}
  .tool-create-dialog .input {width:100%;min-height:44px;background:var(--bg-body);border:1px solid var(--border);border-radius:10px;box-shadow:none;padding:11px 13px;color:var(--text-main);font-size:14px;font-weight:400;line-height:1.5;}
  .tool-create-dialog textarea.input {resize:vertical;min-height:86px;max-height:180px;}
  .tool-form-section {display:flex;flex-direction:column;gap:12px;}
  .tool-section-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .tool-form-section h3 {margin:0;font-size:13px;font-weight:600;line-height:1.4;}
  .tool-section-heading>span {font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
  .tool-create-dialog .poll-options-list {display:flex;flex-direction:column;gap:8px;}
  .tool-create-dialog .poll-option-row {display:grid;grid-template-columns:25px minmax(0,1fr) 34px;align-items:center;gap:8px;margin:0;}
  .tool-option-number {font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
  .tool-create-dialog .poll-option-input {min-width:0;width:100%;height:44px;margin:0;padding:10px 12px;background:var(--bg-body);border:1px solid var(--border);border-radius:10px;font-weight:400;}
  #modal-poll-create .tool-create-dialog :is(.input,.poll-option-input),#modal-checklist-create .tool-create-dialog :is(.input,.poll-option-input) {font-weight:400;}
  .tool-create-dialog .poll-option-remove {height:34px;width:34px;padding:8px;margin:0;background:transparent;color:var(--text-sec);border:0;border-radius:8px;}
  .tool-create-dialog .poll-option-remove:disabled {visibility:hidden;}
  .tool-create-dialog .poll-add-option-btn {align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:8px 10px;margin:0;font-size:13px;border:0;background:transparent;color:var(--text-sec);}
  .tool-form-hint {font-size:12px;color:var(--text-muted);line-height:1.6;margin:0;}
  .tool-setting {display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;}
  .tool-setting:last-child {border-bottom:0;padding-bottom:0;}
  .tool-setting>span {display:flex;flex-direction:column;gap:4px;min-width:0;}
  .tool-setting strong {font-size:13px;font-weight:500;}
  .tool-setting small {font-size:12px;color:var(--text-muted);line-height:1.4;}
  .tool-setting input {width:18px;height:18px;flex-shrink:0;accent-color:var(--primary);}
  .tool-form-error {margin:0;border:1px solid var(--primary);border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.5;color:var(--text-main);background:var(--accent-subtle);}
  .tool-create-dialog .dialog-actions {flex-shrink:0;}
  .tool-create-dialog .poll-create-submit {width:auto;margin:0;letter-spacing:0;text-transform:none;box-shadow:none;font-size:13px;}
  .msg-row .bubble.poll-bubble {padding:0;width:min(380px,100%);max-width:min(380px,100%);background:var(--surface-raised);border:1px solid var(--border);border-radius:16px;box-shadow:none;overflow:visible;}
  .tool-card {padding:20px;min-width:0;width:100%;}
  .tool-card-header {display:flex;flex-direction:column;gap:8px;margin:0;}
  .tool-card .poll-question {font-family:var(--font);font-size:22px;font-weight:400;line-height:1.3;color:var(--text-main);margin:0;overflow-wrap:anywhere;}
  .tool-card-meta {font-size:11px;color:var(--text-muted);line-height:1.7;margin:10px 0 16px;}
  .tool-choices {display:flex;flex-direction:column;gap:7px;margin:16px 0;}
  .tool-choice {position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;column-gap:10px;text-align:left;width:100%;min-height:46px;padding:12px;background:var(--bg-body);border:1px solid var(--border);border-radius:9px;color:var(--text-main);font:inherit;cursor:pointer;overflow:hidden;margin:0;}
  .tool-choice:hover:not(:disabled) {background:var(--hover);border-color:var(--text-muted);}
  .tool-choice.selected {border-color:var(--primary);background:var(--accent-subtle);}
  .tool-choice:disabled {cursor:default;opacity:1;}
  .tool-choice .poll-option-text {font-size:13px;line-height:1.45;overflow-wrap:anywhere;min-width:0;font-weight:400;z-index:1;}
  .tool-choice-mark {display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--text-muted);border-radius:50%;color:transparent;z-index:1;}
  .tool-choice-mark svg {width:14px;height:14px;}
  .tool-choice.selected .tool-choice-mark,.tool-choice.checked .tool-choice-mark {background:var(--primary);border-color:var(--primary);color:var(--on-primary);}
  .tool-choice-value {font-size:12px;font-variant-numeric:tabular-nums;line-height:1.5;color:var(--text-sec);z-index:1;}
  .tool-result-track {grid-column:2/-1;width:100%;height:3px;margin-top:8px;background:var(--border);border-radius:2px;overflow:hidden;}
  .tool-result-track>span {display:block;height:100%;background:var(--primary);border-radius:2px;}
  .checklist-card .tool-choice-mark {border-radius:4px;}
  .checklist-card .checked .poll-option-text {color:var(--text-muted);text-decoration:line-through;}
  .tool-progress {height:4px;background:var(--border);margin:16px 0;border-radius:2px;overflow:hidden;}
  .tool-progress>span {display:block;height:100%;background:var(--primary);}
  .tool-card-footer {display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--border);padding-top:14px;color:var(--text-muted);font-size:12px;}
  .tool-card-footer button {background:transparent;border:0;padding:2px 0;color:var(--text-sec);font-size:12px;cursor:pointer;line-height:1.4;}
  .tool-card-footer button:hover {color:var(--primary);text-decoration:underline;}
  .msg-row .poll-bubble>.meta {margin:0 16px 12px;}
  #poll-voters-question {margin:20px 24px 16px;color:var(--text-main);font-family:var(--font);font-size:20px;overflow-wrap:anywhere;}
  .tool-voters-dialog .poll-voters-tabs {display:flex;overflow-x:auto;flex-shrink:0;gap:6px;margin:0;padding:0 24px 14px;border-bottom:1px solid var(--border);background:transparent;}
  .tool-voters-dialog .poll-voters-tab {flex-shrink:0;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 12px;font:inherit;font-size:12px;line-height:1.3;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text-sec);cursor:pointer;}
  .tool-voters-dialog .poll-voters-tab.active {background:var(--accent-subtle);color:var(--accent-text);border-color:var(--primary);}
  .tool-voters-dialog .poll-voters-list {overflow-y:auto;min-height:140px;padding:12px 24px;}
  .tool-voters-dialog .poll-voter-row {display:flex;align-items:center;gap:12px;padding:12px 0;margin:0;border-bottom:1px solid var(--border);background:transparent;}
  .tool-voters-dialog .poll-voter-row:last-child {border:0;}
  .tool-voters-dialog .poll-voter-avatar {width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;}
  .tool-voters-dialog .poll-voter-row>div {display:flex;flex-direction:column;gap:5px;min-width:0;}
  .tool-voters-dialog .poll-voter-row strong {font-size:13px;font-weight:500;overflow-wrap:anywhere;}
  .tool-voters-dialog .poll-voter-row span {color:var(--text-muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere;}
  .tool-empty {display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 12px;gap:14px;color:var(--text-muted);font-size:13px;line-height:1.6;}
  .tool-empty p {margin:0;}
  #pinned-bar {display:flex;gap:8px;align-items:center;padding:8px 12px;min-height:56px;}
  #active-chat>.chat-pins-container:has(#pinned-bar:not(.hidden)) {flex:0 0 auto;margin-top:84px;}
  #active-chat>.chat-pins-container #pinned-bar:not(.hidden) {position:relative;top:auto;left:auto;right:auto;transform:none;margin:0 auto;width:calc(100% - 40px);}
  #active-chat:has(#pinned-bar:not(.hidden))>#messages-feed {padding-top:20px;}
  #pinned-content {display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:10px;flex:1;min-width:0;width:auto;border:0;background:transparent;text-align:left;color:var(--text-main);cursor:pointer;padding:0;}
  .pin-thumbnail {display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:6px;overflow:hidden;background:var(--hover);color:var(--text-muted);}
  .pin-thumbnail img {width:100%;height:100%;object-fit:cover;}
  .pin-thumbnail .icon {width:17px;height:17px;}
  .pin-text-wrap {display:flex;flex-direction:column;gap:4px;min-width:0;overflow:hidden;flex:1;}
  #pinned-count {font-size:11px;color:var(--accent-text);font-weight:600;}
  #pinned-text {font-size:12px;line-height:1.4;color:var(--text-sec);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #pinned-bar #btn-unpin {height:32px;width:32px;padding:7px;flex-shrink:0;border-radius:8px;background:transparent;color:var(--text-muted);}
  #pinned-list-dropdown {width:min(500px,calc(100% - 24px));max-height:min(420px,calc(100dvh - 180px));overflow-y:auto;left:max(12px,calc((100% - 800px)/2));right:auto;top:100%;transform:none;border-radius:12px;padding:6px;}
  #active-chat:has(#message-request-banner:not(.hidden)) #pinned-list-dropdown {top:100%;}
  @media(max-width:799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse){#active-chat>.chat-pins-container:has(#pinned-bar:not(.hidden)){margin-top:calc(72px + env(safe-area-inset-top,0px));}#active-chat>.chat-pins-container #pinned-bar:not(.hidden){width:calc(100% - 24px);}}
  .pin-list-header {display:flex;align-items:center;justify-content:space-between;padding:8px 10px;gap:12px;border-bottom:1px solid var(--border);}
  .pin-list-header strong {font-size:12px;font-weight:600;}
  .pin-list-header button {font-size:11px;padding:6px 8px;}
  .pin-list-row {display:flex;gap:6px;align-items:center;border-bottom:1px solid var(--border);padding:4px;}
  .pin-list-row:last-child {border-bottom:0;}
  .pin-list-jump {display:flex;gap:10px;align-items:center;flex:1;min-width:0;border:0;background:transparent;color:var(--text-main);padding:8px 4px;cursor:pointer;text-align:left;border-radius:6px;}
  .pin-list-jump:hover {background:var(--hover);}
  .pin-msg-title {font-size:13px;font-weight:400;line-height:1.4;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .pin-msg-body {font-size:11px;color:var(--text-muted);}
  .pin-list-row .btn-unpin-list {width:30px;height:30px;flex-shrink:0;}
  .schedule-dialog .composer-actions-content {display:flex;flex-direction:column;padding:20px 24px;gap:12px;}
  .schedule-dialog .dialog-header h2 {text-align:left;font-family:var(--font);font-size:26px;font-weight:400;line-height:1.2;}
  .schedule-list-item {display:flex;flex-direction:column;gap:8px;width:100%;padding:16px;text-align:left;background:var(--bg-body);border:1px solid var(--border);border-radius:10px;color:var(--text-main);font:inherit;cursor:pointer;}
  .schedule-list-item:hover {border-color:var(--text-muted);background:var(--hover);}
  .schedule-list-item time {font-size:12px;color:var(--accent-text);font-weight:600;}
  .schedule-list-item>span {font-size:14px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap;}
  .schedule-list-item small {font-size:11px;color:var(--text-muted);}
  .schedule-editor {display:flex;flex-direction:column;gap:10px;min-width:0;}
  .schedule-editor .input {width:100%;max-width:100%;min-width:0;font-size:14px;min-height:44px;}
  .schedule-editor textarea.input {resize:vertical;height:112px;min-height:112px;max-height:260px;line-height:1.5;}
  .schedule-editor>label:not(:first-child) {margin-top:10px;}
  .schedule-extra-actions {display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--border);padding-top:14px;margin-top:8px;flex-wrap:wrap;}
  .schedule-extra-actions .btn {font-size:12px;}
  .schedule-extra-actions .danger {color:var(--accent-text);}
  .schedule-message-card {padding:16px;max-width:min(380px,100%);border:1px dashed var(--border);border-radius:14px;background:var(--surface);color:var(--text-main);}
  .schedule-message-card time {font-size:11px;color:var(--accent-text);}
  .schedule-message-card p {font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0;}
  .schedule-message-card .btn {padding:6px 10px;font-size:12px;}
  @media(max-width:600px){
    .tool-create-dialog,.tool-voters-dialog,.schedule-dialog {width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:16px;}
    .tool-form-body {padding:18px;gap:22px;}
    .tool-create-dialog .dialog-header,.tool-voters-dialog .dialog-header {padding:18px;}
    .tool-create-dialog .dialog-header h2,.tool-voters-dialog .dialog-header h2 {font-size:23px;}
    .tool-create-dialog .dialog-actions {padding:14px 18px;gap:8px;}
    .tool-create-dialog .dialog-actions button {font-size:12px;padding:10px 12px;}
    .tool-create-dialog .input,.tool-create-dialog .poll-option-input,.schedule-editor .input {font-size:16px;}
    .tool-card {padding:16px;}
    .tool-card .poll-question {font-size:21px;}
    .schedule-dialog .composer-actions-content {padding:16px 18px;}
  }
}

@layer system {
  .modal.window-shell,.apple-modal.window-shell {width:min(520px,100%);max-width:520px;max-height:calc(var(--viewport-height) - 32px);padding:0;gap:0;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;text-align:left;}
  .window-shell .window-dialog-header,.window-dialog-header {display:flex;align-items:center;gap:14px;justify-content:space-between;padding:22px 24px;flex-shrink:0;border-bottom:1px solid var(--border);min-width:0;}
  .window-shell .dialog-header :is(h2,h3),.window-dialog-header :is(h2,h3) {text-align:left;font:400 26px/1.2 var(--font-display);margin:0;min-width:0;flex:1;overflow-wrap:anywhere;}
  .window-shell .dialog-header>div {display:flex;flex-direction:column;gap:6px;min-width:0;flex:1;background:transparent;border:0;padding:0;}
  .window-shell .dialog-header>div>p {margin:0;font-size:12px;line-height:1.5;color:var(--text-sec);overflow-wrap:anywhere;}
  .window-shell .dialog-header button {display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;flex:0 0 32px;font-size:0;padding:6px;margin:0;order:1;border:0;border-radius:8px;background:transparent;color:var(--text-sec);}
  .window-shell .dialog-header button .icon {width:18px;height:18px;margin:0;}
  .window-shell .dialog-content {align-items:stretch;padding:24px;gap:18px;min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;}
  .window-shell .dialog-content :is(p,h2,h3,.text-sec) {text-align:left;max-width:100%;margin-left:0;margin-right:0;}
  .window-shell .apple-content {padding:0;max-height:none;overflow:visible;}
  #modal-docs .apple-section-title {font:400 20px/1.3 var(--font-display);margin:0 0 16px;}
  #modal-docs .apple-text {font-size:13px;line-height:1.8;}
  #modal-docs .apple-segmented-control {display:flex;gap:4px;width:max-content;max-width:100%;padding:4px;margin:0 0 16px;border:1px solid var(--border);border-radius:9px;background:var(--sidebar-bg);}
  #modal-docs .apple-segment {border:0;border-radius:6px;padding:8px 16px;background:transparent;color:var(--text-sec);font:400 12px/1.5 var(--font);cursor:pointer;}
  #modal-docs .apple-segment.active {background:var(--surface-raised);color:var(--text-main);}
  #modal-docs .apple-code-block-wrapper {overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:10px;}
  #modal-docs .apple-pre {padding:16px;font-size:12px;line-height:1.8;color:var(--text-main);}
  .window-shell .dialog-content>div:has(>svg):not([id]) {display:none;}
  .window-shell .dialog-actions {display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px;border-color:var(--border);flex-shrink:0;}
  .window-shell .dialog-actions>div {display:flex;flex-direction:row;justify-content:flex-end;gap:10px;width:100%;margin:0;}
  .window-shell .dialog-actions .btn {width:auto;flex:0 1 auto;min-height:40px;padding:10px 16px;font-size:13px;}
  .window-shell .input,.window-shell textarea,.window-shell select {min-width:0;width:100%;font:400 14px/1.5 var(--font);color:var(--text-main);background:var(--bg-body);border:1px solid var(--border);border-radius:10px;padding:11px 12px;}
  .window-shell .input::placeholder {font-weight:400;color:var(--text-muted);}
  .window-field {display:flex;flex-direction:column;gap:9px;min-width:0;text-align:left;}
  .window-field>span {color:var(--text-sec);font-size:12px;font-weight:500;}
  .window-shell .settings-input-group {background:transparent;border:0;margin:0;}
  #modal-create .type-switch {width:100%;padding:4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:var(--sidebar-bg);border:1px solid var(--border);border-radius:10px;margin:0;}
  #modal-create .type-btn {padding:9px 6px;background:transparent;border:0;border-radius:7px;color:var(--text-sec);font-size:13px;min-width:0;}
  #modal-create .type-btn.active {background:var(--surface-raised);color:var(--text-main);box-shadow:none;}
  .window-create-avatar {position:relative;width:60px;height:60px;border-radius:14px;overflow:hidden;align-self:flex-start;border:1px solid var(--border);padding:0;background:var(--sidebar-bg);cursor:pointer;margin:0;}
  .window-create-avatar img {width:100%;height:100%;object-fit:cover;}
  .window-create-avatar>div {border-radius:0;background:var(--scrim);}
  .window-create-avatar>span {position:absolute;right:3px;bottom:3px;display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:var(--surface-raised);color:var(--text-main);}
  .window-create-avatar>span .icon {width:14px;height:14px;}
  #modal-create #bot-hint {padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:12px;line-height:1.6;text-align:left;}
  #modal-change-email .dialog-content :is(#change-email-step-1,#change-email-step-2) {display:flex;flex-direction:column;gap:16px;}
  #modal-change-email .dialog-content>div.hidden {display:none;}
  #modal-change-email .dialog-content p {margin:0;line-height:1.6;font-size:13px;}
  #modal-change-email .window-field {margin:0;}
  #modal-change-email #change-email-code {font-size:25px;letter-spacing:3px;overflow-wrap:anywhere;}
  #modal-change-email #change-email-code[data-expired] {font-family:var(--font-sans, sans-serif)!important;font-size:18px!important;font-weight:500!important;letter-spacing:normal!important;line-height:1.5;color:var(--text-sec)!important;}
  #premium-payment-link {display:flex;justify-content:center;width:100%;margin-top:10px;text-decoration:none;}
  #premium-payment-status {margin:10px 0 0;line-height:1.6;}
  #btn-premium-pay.payment-pending {background:var(--surface-raised)!important;color:var(--text-main)!important;-webkit-text-fill-color:var(--text-main)!important;border:1px solid var(--border);}
  #toasts {right:max(12px,env(safe-area-inset-right,0px));max-width:min(340px,calc(100vw - 24px));}
  .settings-shell .settings-content {overflow:hidden;min-height:0;}
  .settings-shell .settings-pane-header {border-bottom:1px solid var(--border);padding:20px 24px;min-height:74px;}
  .settings-shell .settings-pane-header h3 {font:400 25px/1.2 var(--font-display);text-align:left;}
  .settings-page-body {flex:1;min-height:0;overflow-y:auto;padding:20px 24px;overscroll-behavior:contain;scrollbar-gutter:stable;}
  .settings-page-body>.settings-section-title,.settings-page-body>.ios-section-header {margin:28px 0 12px;padding:0;font-size:12px;color:var(--text-muted);}
  .settings-page-body>.settings-section-title:first-child,.settings-page-body>.ios-section-header:first-child {margin-top:0;}
  .settings-page-body .settings-input-group,.settings-page-body .settings-group-ios {margin:0;padding:0;width:100%;}
  .settings-page-body .account-identity {padding:0 0 20px;}
  .settings-page-body .setting-row {padding:14px 0;gap:16px;align-items:center;}
  .settings-page-body .setting-row>span:first-child {font-size:13px;padding:0;}
  .settings-page-body :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select) {max-width:100%;font-size:14px;font-weight:400;}
  .settings-page-body button.setting-row,.settings-page-body button.settings-row-ios {width:100%;font:inherit;text-align:left;color:var(--text-main);background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;cursor:pointer;}
  .settings-page-body button.setting-row:hover,.settings-page-body button.settings-row-ios:hover {background:var(--hover);}
  .settings-fixed-footer {padding:14px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;flex-shrink:0;}
  .settings-fixed-footer .btn {width:auto;min-height:40px;}
  .settings-shell .settings-navigation {overflow-y:auto;min-height:0;}
  .settings-mobile-navigation {display:none;}
  .settings-page-body .theme-picker-row {width:100%;}
  .settings-page-body :is(.color-palette-row,.check-color-row,.check-shape-row) {display:flex;flex-wrap:wrap;max-width:100%;gap:8px;}
  .settings-page-body .wallpaper-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .settings-page-body button.wallpaper-preview {width:100%;height:auto;aspect-ratio:1.4;border-radius:10px;}
  .window-section-intro {color:var(--text-muted);font-size:13px;line-height:1.6;margin:0 0 18px;text-align:left;}
  .window-list-state {min-height:140px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:24px;grid-column:1/-1;color:var(--text-muted);font-size:13px;line-height:1.6;text-align:center;}
  .window-list-state p {margin:0;text-align:center;}
  .settings-page-body #sessions-list {padding:0;overflow:visible;}
  .window-session-card {display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:start;padding:18px 0;border-bottom:1px solid var(--border);}
  .window-device-icon {width:36px;height:36px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--text-sec);}
  .window-device-icon svg {width:19px;height:19px;}
  .window-session-copy {display:flex;flex-direction:column;gap:7px;min-width:0;}
  .window-session-copy h4 {font-size:14px;font-weight:500;margin:0;line-height:1.4;overflow-wrap:anywhere;}
  .window-session-copy p,.window-session-copy small {font-size:12px;color:var(--text-muted);margin:0;line-height:1.6;overflow-wrap:anywhere;text-align:left;}
  .window-session-status {font-size:10px;color:var(--accent-text);letter-spacing:.02em;}
  .window-session-card .window-session-revoke {padding:7px 10px;min-height:32px;font-size:11px;color:var(--text-sec);}
  .window-session-footer {margin-top:20px;}
  .window-session-footer .btn {white-space:normal;font-size:12px;text-align:left;}
  .window-person-button,.window-folder-open {display:flex;gap:12px;align-items:center;flex:1;min-width:0;background:transparent;border:0;font:inherit;text-align:left;color:var(--text-main);padding:0;cursor:pointer;}
  .window-person-avatar {width:36px;height:36px;object-fit:cover;border-radius:50%;flex-shrink:0;}
  .window-person-copy {display:flex;flex-direction:column;gap:5px;min-width:0;text-align:left;}
  .window-person-copy strong {font-size:13px;font-weight:500;line-height:1.4;overflow-wrap:anywhere;}
  .window-person-copy :is(small,time) {font-size:11px;color:var(--text-muted);line-height:1.5;overflow-wrap:anywhere;}
  .window-blacklist-row,.window-member-row {display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);}
  .window-blacklist-row>.btn {font-size:11px;padding:7px 10px;min-height:34px;flex-shrink:0;}
  .window-member-row {flex-wrap:wrap;}
  .window-member-actions {display:flex;align-items:center;gap:8px;flex-shrink:0;}
  .window-member-actions>.btn {font-size:11px;min-height:32px;padding:7px 10px;}
  .window-member-actions>.btn-icon {width:30px;height:30px;padding:7px;}
  .window-member-permission {display:flex;align-items:center;gap:7px;font-size:11px;line-height:1.4;color:var(--text-sec);}
  .window-more-members {margin-top:12px;font-size:12px;}
  #modal-group-info .group-modal-body {padding:0 24px 24px;}
  #modal-group-info .group-identity {padding:20px 0;}
  #modal-group-info .settings-group-ios {margin:0 0 12px;width:100%;padding:0;border:0;}
  #modal-group-info #grp-info-name {font:400 23px/1.3 var(--font-display);height:36px;}
  #modal-group-info #grp-info-desc {font-size:13px;line-height:1.6;min-height:48px;}
  #modal-group-info #grp-admin-tools {padding:8px 0;gap:12px;}
  #modal-group-info #add-part-id {border:1px solid var(--border);border-radius:9px;padding:10px 12px;background:var(--bg-body);min-width:0;}
  #modal-group-info #grp-admin-tools>.btn {border-radius:9px;min-width:36px;}
  #modal-group-info .settings-row-ios {padding:14px 0;gap:12px;min-width:0;width:100%;max-width:100%;flex-wrap:nowrap;font:inherit;text-align:left;}
  #modal-group-info button.settings-row-ios {border:0;border-bottom:1px solid var(--border-subtle);border-radius:0;background:transparent;}
  #modal-group-info .settings-row-ios > span {min-width:0;overflow-wrap:anywhere;}
  #modal-group-info .settings-row-ios:is([onclick="Chat.copyLink()"],[data-zn-onclick="h0221"]) {flex-direction:column;align-items:flex-start;gap:8px;}
  #modal-group-info .settings-row-ios:is([onclick="Chat.copyLink()"],[data-zn-onclick="h0221"]) > div {min-width:0;}
  #modal-group-info #slow-mode-options {padding:12px 0;}
  #modal-group-info .slow-delay-btn {min-width:38px;font-size:12px;border-radius:7px;padding:7px 10px;}
  .modal.window-profile {width:min(620px,100%);max-width:620px;height:auto;max-height:calc(var(--viewport-height) - 32px);padding:0;display:flex;flex-direction:column;align-items:stretch;gap:0;overflow:hidden;background:var(--bg-body);}
  .window-profile .window-dialog-header {width:100%;align-self:stretch;}
  .window-profile .window-dialog-header h2 {font:400 26px/1.2 var(--font-display);text-align:left;margin:0;}
  .window-profile .window-dialog-header .window-close {margin-left:auto;}
  .window-profile-body {overflow-y:auto;min-height:0;flex:1;padding:0 24px 24px;overscroll-behavior:contain;}
  .window-profile .partner-identity {padding:26px 0;align-items:center;}
  .window-profile #ptn-name {font:400 27px/1.2 var(--font-display);margin:0;text-align:left;overflow-wrap:anywhere;}
  .window-profile #ptn-avatar-wrap {width:56px;height:56px;flex:0 0 56px;}
  .window-profile #ptn-avatar {width:56px;height:56px;object-fit:cover;border-radius:50%;}
  .window-profile #ptn-security-rating {background:var(--surface);color:var(--text-sec);padding:4px 6px;border:1px solid var(--border);border-radius:6px;font-size:10px;}
  .window-profile .partner-actions {margin:0 0 22px;width:100%;gap:8px;}
  .window-profile .ptn-action-btn {background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 8px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-main);font:inherit;font-size:12px;flex-direction:row;cursor:pointer;}
  .window-profile .ptn-action-icon {width:20px;height:20px;padding:0;}
  .window-profile .settings-group-ios {margin:0 0 18px;width:100%;border:0;background:transparent;}
  .window-profile #ptn-bio {padding:0;font-size:14px;line-height:1.7;text-align:left;max-height:none;}
  .window-profile #ptn-security-restricted {padding:16px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:13px;line-height:1.6;}
  .window-profile #ptn-security-restricted b {display:block;color:var(--danger);margin-bottom:7px;}
  .window-profile #ptn-bio-text {white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;}
  .window-profile :is(#btn-add-contact,#btn-del-contact,#btn-block,#btn-edit-bot) {justify-content:flex-start;text-align:left;}
  #modal-partner .window-profile :is(#ptn-bio,#ptn-bio-text,#btn-add-contact,#btn-del-contact,#btn-block,#btn-edit-bot) {text-align:left;justify-content:flex-start;}
  #modal-partner .window-profile #ptn-bio {padding:0;}
  .window-profile .settings-row-ios {display:flex;align-items:center;min-height:44px;padding:12px 0;width:100%;font:inherit;font-size:13px;background:transparent;border:0;border-bottom:1px solid var(--border);text-align:left;justify-content:flex-start;cursor:pointer;}
  .window-profile #ptn-media-section {margin:22px 0 0;}
  .window-profile #ptn-media-section .ios-section-header {margin:0 0 12px;padding:0;font-size:13px;text-align:left;}
  .window-profile #ptn-media-tabs {display:flex;gap:7px;overflow-x:auto;flex-wrap:nowrap;padding:0 0 14px;scrollbar-width:thin;}
  .window-profile .media-tab-pill {flex-shrink:0;background:transparent;border:1px solid var(--border);border-radius:8px;padding:7px 10px;font:inherit;font-size:11px;color:var(--text-sec);cursor:pointer;}
  .window-profile .media-tab-pill.active {color:var(--accent-text);background:var(--accent-subtle);border-color:var(--accent-border);}
  .window-profile #ptn-media-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;background:var(--surface);border-radius:12px;overflow:hidden;}
  .window-profile .window-media-item {display:block;width:100%;position:relative;aspect-ratio:1;background:var(--sidebar-bg);border:0;border-radius:0;padding:0;overflow:hidden;cursor:pointer;color:var(--text-sec);}
  .window-profile .window-media-item :is(img,video) {width:100%;height:100%;object-fit:cover;display:block;border-radius:0;}
  .window-profile .window-media-item.media-loading::after {content:'Загрузка…';position:absolute;inset:0;display:grid;place-items:center;background:var(--sidebar-bg);font-size:11px;color:var(--text-muted);}
  .window-profile .window-media-item.media-unavailable {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;font-size:10px;padding:8px;line-height:1.4;}
  .window-profile .media-unavailable>.icon {width:22px;height:22px;}
  .window-media-play {position:absolute;inset:0;display:grid;place-items:center;background:transparent;color:var(--media-text);pointer-events:none;}
  .window-media-play .icon {width:36px;height:36px;padding:9px;border:1px solid var(--media-border);border-radius:50%;background:var(--media-control);}
  .window-profile #ptn-media-grid.window-media-file-list {display:flex;flex-direction:column;padding:0;background:transparent;gap:0;border-radius:0;}
  .window-profile .window-media-file-list .window-media-item {display:flex;aspect-ratio:auto;align-items:center;text-align:left;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);background:transparent;min-height:60px;}
  .window-media-file-icon {width:34px;height:34px;border-radius:8px;background:var(--surface);display:grid;place-items:center;flex-shrink:0;}
  .window-media-file-icon .icon {width:19px;height:19px;}
  .window-folder-dialog {display:flex;flex-direction:column;width:min(580px,calc(100vw - 32px));max-height:calc(var(--viewport-height) - 32px);border:1px solid var(--border);border-radius:16px;background:var(--bg-body);overflow:hidden;}
  .window-dialog-header>div {flex:1;min-width:0;}
  .window-dialog-header>button {flex-shrink:0;}
  .window-eyebrow {font-size:10px;color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;}
  .window-folder-dialog .window-dialog-header h2 {margin-top:5px;}
  .window-folder-body {padding:24px;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:18px;}
  .window-folder-section h3 {margin:0 0 12px;font-size:12px;font-weight:500;color:var(--text-muted);}
  .window-folder-row {display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);}
  .window-folder-icon {width:34px;height:34px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;display:grid;place-items:center;color:var(--text-muted);}
  .window-folder-icon .icon {width:17px;height:17px;}
  .window-folder-row>input,.window-switch-row>input,.window-folder-chat>input {width:18px;height:18px;flex-shrink:0;accent-color:var(--primary);}
  .window-dialog-footer {display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0;}
  .window-folder-capacity {margin-right:auto;color:var(--text-muted);font-size:12px;}
  .window-folder-body .input {width:100%;min-height:44px;font-size:14px;}
  .window-folder-chats {display:flex;flex-direction:column;gap:0;}
  .window-folder-chat {display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);cursor:pointer;}
  .window-folder-chat span {font-size:13px;line-height:1.5;min-width:0;overflow-wrap:anywhere;}
  .window-folder-selection-count {font-size:12px;color:var(--text-muted);}
  .window-switch-row {display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;}
  .window-switch-row>span {display:flex;flex-direction:column;gap:5px;}
  .window-switch-row strong {font-size:13px;font-weight:500;}
  .window-switch-row small {font-size:12px;color:var(--text-muted);}
  .window-form-error {padding:12px;border:1px solid var(--accent-border);border-radius:8px;background:var(--accent-subtle);color:var(--text-main);font-size:13px;line-height:1.5;margin:0;}
  .window-audit-row {display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--border);}
  #audit-log-list {padding:0;overflow:visible;}
  #modal-audit-log .window-shell {max-width:640px;width:min(640px,100%);}
  .window-qr-shell,.window-qr-login {background:var(--bg-body);}
  .window-qr-shell .dialog-content>div:not([id]),.window-qr-login .dialog-content>div:not([id]) {padding:0;background:transparent;border:0;text-align:left;}
  .window-qr-shell .dialog-content p,.window-qr-login .dialog-content p {font-size:13px;line-height:1.6;margin:0 0 16px;}
  .window-qr-shell .dialog-content div:is([style*="width:58px"],[style*="width: 58px"]),.window-qr-shell .dialog-content div:is([style*="width:60px"],[style*="width: 60px"]) {display:none;}
  .window-qr-shell .alert-btn,.window-qr-shell .dialog-content>div>button {font:inherit;font-size:13px;border-radius:9px;min-height:40px;padding:10px 14px;}
  .window-qr-shell :is(#alert-content,#invite-friends-text) {max-height:none;overflow:visible;white-space:pre-wrap;font-size:13px;line-height:1.6;text-align:left;margin:0;}
  #modal-qr-login {padding:12px;background:var(--scrim);}
  .window-qr-login .dialog-content {gap:0;}
  .window-qr-login #qr-expired-overlay {background:var(--surface-raised);}
  .window-qr-shell .dialog-content :is(canvas,img),.window-qr-login .dialog-content canvas {max-width:100%;}
  .window-learning-section {margin:0 0 24px;}
  .window-shell .window-learning-intro {margin:0 0 24px;font-size:13px;font-weight:400;line-height:1.7;color:var(--text-sec);}
  .window-shell .window-learning-section h3 {font:500 12px/1.5 var(--font);color:var(--text-muted);margin:0 0 12px;}
  .window-learning-topic {border-bottom:1px solid var(--border);}
  .window-learning-topic summary {display:flex;align-items:center;gap:12px;padding:16px 0;list-style:none;cursor:pointer;}
  .window-learning-topic summary::-webkit-details-marker {display:none;}
  .window-learning-topic summary>span {display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;}
  .window-learning-topic summary strong {font-size:14px;font-weight:500;line-height:1.5;}
  .window-learning-topic summary small {font-size:12px;line-height:1.6;color:var(--text-muted);}
  .window-learning-topic summary>.icon {width:16px;height:16px;flex-shrink:0;color:var(--text-muted);}
  .window-learning-topic[open] summary>.icon {transform:rotate(90deg);}
  .window-learning-body {padding:0 0 18px;font-size:13px;line-height:1.8;}
  .window-learning-body p {font-weight:400;}
  .window-learning-example {background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:14px;margin-top:16px;}
  .window-learning-example>strong {font-size:11px;font-weight:500;color:var(--accent-text);}
  .window-shell .window-learning-example p {margin:8px 0 0;}
  .window-camera-preview {position:relative;width:min(100%,320px);aspect-ratio:1;margin:0 auto;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--sidebar-bg);}
  .window-camera-preview #qr-video {width:100%;height:100%;object-fit:cover;display:block;}
  .window-camera-preview #qr-scan-line {position:absolute;top:50%;left:24px;right:24px;height:1px;background:var(--primary);}
  .window-shell #qr-camera-status {text-align:left;font-size:13px;line-height:1.6;color:var(--text-sec);}
  .window-learning-search {margin-bottom:8px;}
  #modal-group-info #group-stats-content {padding:16px 0;}
  .window-group-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:24px;}
  .window-group-metrics>div {display:flex;flex-direction:column;gap:8px;border:1px solid var(--border);background:var(--surface);padding:14px;border-radius:10px;min-width:0;}
  .window-group-metrics strong {font:400 27px/1.2 var(--font-display);color:var(--text-main);overflow-wrap:anywhere;}
  .window-group-metrics span {font-size:11px;color:var(--text-muted);line-height:1.5;}
  #group-stats-content h4 {font-size:12px;font-weight:500;margin:0 0 14px;color:var(--text-sec);}
  .window-group-stat-day {display:grid;grid-template-columns:62px minmax(0,1fr) 40px;gap:10px;align-items:center;padding:9px 0;font-size:11px;color:var(--text-muted);}
  .window-stat-track {height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
  .window-stat-track>span {display:block;height:100%;background:var(--primary);border-radius:3px;}
  .window-group-stat-day strong {font-weight:400;font-variant-numeric:tabular-nums;text-align:right;}
  @media(max-width:799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse){
    .settings-shell .settings-navigation {display:none;}
    .settings-mobile-navigation {display:flex;align-items:center;flex-shrink:0;gap:10px;min-height:54px;padding:10px 18px;border-bottom:1px solid var(--border);background:var(--sidebar-bg);}
    .settings-mobile-navigation>span {font-size:11px;color:var(--text-muted);flex:0 0 62px;}
    .settings-mobile-navigation>select {min-width:0;flex:1;font:400 13px/1.5 var(--font);color:var(--text-main);background:var(--bg-body);border:1px solid var(--border);border-radius:8px;padding:7px 8px;}
    .settings-shell .settings-navigation h2 {display:none;}
    .settings-shell .settings-navigation-item {flex:0 0 auto;width:auto;margin:0;padding:8px 10px;font-size:11px;white-space:nowrap;}
    .settings-shell .settings-pane-header {padding:16px 18px;min-height:64px;}
    .settings-shell .settings-pane-header h3 {font-size:23px;}
    .settings-page-body {padding:18px;scrollbar-gutter:auto;}
    .settings-fixed-footer {padding:12px 18px;}
    .settings-page-body .setting-row {flex-wrap:wrap;gap:8px;}
    .settings-page-body .setting-row>span:first-child {flex:0 0 100%;}
    .settings-page-body .setting-row>input,.settings-page-body .setting-row>select,.settings-page-body .setting-row>textarea {flex:1 1 100%;}
    .settings-page-body .setting-row:has(.switch-toggle) {flex-wrap:nowrap;}
    .settings-page-body .setting-row:has(.switch-toggle)>div {min-width:0;}
    .window-session-card {grid-template-columns:32px minmax(0,1fr);gap:10px;}
    .window-session-revoke {grid-column:2;justify-self:start;}
    .window-blacklist-row {flex-wrap:wrap;}
    .window-blacklist-row>.btn {margin-left:48px;}
    .window-member-row .window-person-button {flex-basis:100%;}
    .window-member-actions {margin-left:48px;}
  }
  @media(max-width:600px){
    .modal.window-shell,.apple-modal.window-shell,.modal.window-profile {max-height:calc(var(--viewport-height) - 24px);width:100%;border-radius:14px;}
    .window-shell .window-dialog-header,.window-dialog-header {padding:18px;}
    .window-shell .dialog-header :is(h2,h3),.window-dialog-header :is(h2,h3) {font-size:23px;}
    .window-shell .dialog-content,.window-profile-body,.window-folder-body {padding:18px;}
    .window-shell .dialog-actions,.window-dialog-footer {padding:14px 18px;}
    .window-shell .dialog-actions .btn {font-size:12px;padding:10px 12px;}
    .window-profile-body .partner-identity {padding:12px 0 24px;}
    .window-profile #ptn-name {font-size:24px;}
    .window-profile .ptn-action-btn {flex-direction:column;gap:6px;}
    .window-shell .input,.window-folder-body .input,.settings-page-body :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select) {font-size:16px;}
    .window-folder-dialog {width:calc(100vw - 24px);max-height:calc(var(--viewport-height) - 24px);border-radius:14px;}
    #modal-group-info .group-modal-body {padding:0 18px 18px;}
    #modal-group-info #grp-info-name {font-size:22px;}
    .window-group-metrics {grid-template-columns:repeat(2,minmax(0,1fr));}
    .window-group-metrics>div:last-child {grid-column:1/-1;}
  }
}

@layer system {
  .directory-search {position:relative;display:flex;align-items:center;min-width:0;width:100%;}
  .directory-search>.icon {position:absolute;left:12px;width:16px;height:16px;pointer-events:none;color:var(--text-sec);}
  .directory-search .search-input {width:100%;min-width:0;min-height:40px;padding:9px 40px 9px 36px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--input-bg);color:var(--text-main);font:400 12px/1.5 var(--font);}
  .directory-search input::-webkit-search-cancel-button {appearance:none;}
  .directory-search-clear {position:absolute;right:4px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:7px;padding:0;background:transparent;color:var(--text-sec);cursor:pointer;}
  .directory-search-clear[hidden] {display:none;}
  .directory-search-clear .icon {width:15px;height:15px;}
  .directory-search-clear:hover {background:var(--hover);color:var(--text-main);}
  #contacts-search-row {padding:0 16px;}
  .directory-summary {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:4px 4px 0;color:var(--text-sec);font-size:11px;}
  .directory-invite {display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--text-sec);padding:6px;cursor:pointer;}
  .directory-invite:hover {background:var(--hover);color:var(--text-main);}
  .directory-invite .icon {width:17px;height:17px;}
  .directory-list-heading,#list-calls .calls-date-sep {padding:12px 12px 5px;color:var(--text-muted);font:500 11px/1.5 var(--font);letter-spacing:0;text-transform:none;text-align:left;background:transparent;}
  #list-contacts .contact-row {min-height:64px;padding:7px 10px;margin:0 0 2px;gap:8px;}
  .contact-row-main {gap:10px;min-height:48px;}
  .contact-row-copy {display:flex;flex-direction:column;gap:4px;min-width:0;}
  .directory-person-name {display:flex;align-items:center;gap:5px;min-width:0;color:var(--text-main);font:500 13px/1.4 var(--font);}
  .directory-person-name>span {min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .directory-person-name .account-status-badge {flex:0 0 14px;width:14px;height:14px;}
  .directory-person-address {display:block;color:var(--text-sec);font-size:11px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .contact-profile-btn {width:36px;height:36px;flex-basis:36px;}
  .calls-directory-tools {flex:0 0 auto;padding:0 16px;}
  #list-calls {display:flex;flex-direction:column;min-height:0;overflow:hidden;}
  #list-calls .calls-header {padding:8px 0 4px;min-height:44px;gap:8px;}
  #calls-history-count,#contacts-result-count {min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;}
  .calls-directory-tools .calls-controls {padding:0;gap:6px;}
  .calls-directory-tools .calls-sort-btns {background:transparent;border:0;padding:2px;gap:0;}
  .calls-directory-tools .calls-sort-btn {min-height:30px;padding:5px 8px;font-size:11px;}
  .calls-directory-tools .calls-sort-btn.active {background:var(--accent-subtle);color:var(--accent-text);}
  .calls-directory-tools .calls-clear-btn {width:30px;height:32px;}
  #calls-list-inner {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-top:0;}
  #list-calls .calls-item {padding:9px 10px;min-height:74px;gap:8px;margin:0 0 2px;}
  #list-calls .calls-item-avatar {display:grid;place-items:center;padding:0;border:0;background:transparent;cursor:pointer;flex:0 0 36px;width:36px;height:36px;}
  .calls-item-info {display:flex;flex-direction:column;gap:5px;}
  .calls-item-meta {margin:0;color:var(--text-sec);line-height:1.4;}
  .calls-item-meta>.icon {width:12px;height:12px;flex:0 0 12px;}
  .calls-item-missed .calls-item-meta {color:var(--danger);}
  .calls-item-right {gap:3px;}
  .calls-item-time {font-size:10px;line-height:1.5;font-variant-numeric:tabular-nums;}
  .calls-call-btn {width:32px;height:32px;border-radius:8px;cursor:pointer;}
  .calls-call-btn .icon {width:16px;height:16px;}
  .calls-item button:disabled {cursor:default;}
  .directory-call-picker.modal {width:min(460px,100%);height:auto;min-height:0;max-height:calc(var(--viewport-height) - 32px);padding:0;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:16px;}
  .directory-picker-header {display:flex;align-items:center;gap:16px;padding:20px 22px 16px;flex-shrink:0;}
  .directory-picker-header h2 {flex:1;min-width:0;margin:0;font:400 26px/1.2 var(--font-display);text-align:left;}
  .directory-picker-header>.btn {width:36px;height:36px;min-height:36px;flex:0 0 36px;padding:8px;border:0;background:transparent;color:var(--text-sec);}
  .directory-picker-header>.btn .icon {width:18px;height:18px;}
  .directory-picker-tools {display:flex;flex-direction:column;gap:12px;padding:0 22px 14px;flex-shrink:0;border-bottom:1px solid var(--border-subtle);}
  .directory-picker-tools .directory-search .search-input {background:var(--input-bg);font-size:13px;}
  .directory-call-types {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;border:1px solid var(--border-subtle);padding:3px;border-radius:10px;background:var(--sidebar-bg);}
  .directory-call-types button {display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:36px;padding:7px 12px;border:0;border-radius:7px;background:transparent;color:var(--text-sec);font:500 12px/1.5 var(--font);cursor:pointer;}
  .directory-call-types button[aria-pressed="true"] {background:var(--surface-raised);color:var(--text-main);}
  .directory-call-types .icon {width:16px;height:16px;}
  .directory-picker-list {flex:0 1 auto;min-height:0;max-height:360px;padding:8px 12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;}
  .directory-call-person {display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px;border:0;border-radius:10px;background:transparent;color:var(--text-main);text-align:left;cursor:pointer;font:inherit;}
  .directory-call-person:hover {background:var(--hover);}
  .directory-call-person .avatar {width:38px;height:38px;min-width:38px;flex:0 0 38px;}
  .directory-call-person .avatar img {width:100%;height:100%;object-fit:cover;}
  .directory-call-copy {display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
  .directory-call-indicator {display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;color:var(--accent-text);border-radius:8px;background:var(--accent-subtle);}
  .directory-call-indicator .icon {width:16px;height:16px;}
  .directory-call-person:disabled {opacity:.6;cursor:wait;}
  .directory-picker-footer {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;border-top:1px solid var(--border-subtle);flex-shrink:0;}
  #new-call-count {color:var(--text-sec);font-size:11px;line-height:1.5;}
  .directory-picker-footer .btn {width:auto;min-height:36px;padding:8px 12px;font-size:12px;border-radius:8px;}
  .directory-picker-list .list-state {padding:28px 16px;gap:8px;}
  .directory-picker-list .list-state p {text-align:center;}
  .directory-context-menu.ctx-menu {width:240px;min-width:0;max-width:calc(100vw - 24px);padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--surface-raised);color:var(--text-main);}
  .directory-context-title {padding:9px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--border-subtle);color:var(--text-sec);font:500 11px/1.5 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .directory-context-menu .ctx-item {width:100%;border:0;border-radius:7px;background:transparent;color:var(--text-main);font:400 13px/1.5 var(--font);text-align:left;min-height:40px;padding:10px;cursor:pointer;}
  .directory-context-menu .ctx-item:hover {background:var(--hover);}
  .directory-context-menu .ctx-item.danger {color:var(--danger);}
  .directory-context-menu .ctx-item.danger:hover {background:var(--danger-bg);}
  .directory-context-menu .ctx-item>span {min-width:0;overflow-wrap:anywhere;}
  .directory-contact-dialog.modal {display:flex;flex-direction:column;align-items:stretch;gap:0;width:min(460px,100%);max-height:calc(var(--viewport-height) - 32px);padding:0;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);text-align:left;}
  .directory-contact-header {display:flex;align-items:flex-start;gap:12px;padding:22px 24px 18px;flex-shrink:0;}
  .directory-contact-header>div {flex:1;min-width:0;}
  .directory-contact-header h2 {flex:1;min-width:0;margin:0;font:400 25px/1.25 var(--font-display);color:var(--text-main);overflow-wrap:anywhere;text-align:left;}
  .directory-contact-header p {margin:7px 0 0;font-size:12px;line-height:1.5;color:var(--text-sec);text-align:left;}
  .directory-contact-header>.btn {display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;min-height:36px;padding:7px;border:0;color:var(--text-sec);background:transparent;}
  .directory-contact-header>.btn .icon {width:18px;height:18px;}
  #contact-edit-form {display:flex;flex-direction:column;gap:0;min-height:0;overflow:hidden;}
  .directory-contact-body {display:flex;flex-direction:column;align-items:stretch;gap:22px;padding:6px 24px 24px;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
  .directory-edit-photo {display:flex;align-items:center;gap:16px;min-width:0;}
  .directory-photo-preview {position:relative;flex:0 0 64px;width:64px;height:64px;border:0;border-radius:50%;background:var(--surface-raised);padding:0;cursor:pointer;}
  .directory-photo-preview>img {display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover;}
  .directory-photo-preview>span {position:absolute;display:grid;place-items:center;right:-2px;bottom:-2px;width:25px;height:25px;border-radius:50%;border:2px solid var(--surface);background:var(--accent-subtle);color:var(--accent-text);}
  .directory-photo-preview>span .icon {width:14px;height:14px;}
  .directory-photo-preview:disabled {cursor:wait;opacity:.6;}
  .directory-edit-photo-copy {display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
  #contact-edit-original {display:block;color:var(--text-main);font:500 13px/1.4 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #contact-edit-address {color:var(--text-sec);font-size:11px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .directory-photo-actions {display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:2px;}
  .directory-photo-actions button {padding:3px 0;min-height:28px;border:0;background:transparent;color:var(--accent-text);font:400 12px/1.5 var(--font);text-align:left;cursor:pointer;}
  .directory-photo-actions button:hover {text-decoration:underline;text-underline-offset:3px;}
  #contact-photo-reset {color:var(--text-sec);}
  #contact-photo-detail {color:var(--text-sec);font-size:10px;line-height:1.5;overflow-wrap:anywhere;}
  #contact-photo-detail:empty {display:none;}
  .directory-contact-field {display:flex;flex-direction:column;gap:8px;min-width:0;}
  .directory-contact-field>span {color:var(--text-main);font-size:12px;font-weight:500;}
  .directory-contact-field .input {width:100%;min-width:0;min-height:44px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--input-bg);color:var(--text-main);font:400 14px/1.5 var(--font);}
  .directory-contact-field .input[aria-invalid="true"] {border-color:var(--danger);}
  .directory-contact-field small {color:var(--text-sec);font-size:11px;line-height:1.6;}
  .directory-form-error {margin:0;padding:10px 12px;border:1px solid var(--danger-border,var(--border));border-radius:9px;color:var(--danger);background:var(--danger-bg);font-size:12px;line-height:1.6;overflow-wrap:anywhere;text-align:left;}
  .directory-contact-footer {display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:14px 24px;border-top:1px solid var(--border-subtle);flex-shrink:0;}
  .directory-contact-footer .btn {width:auto;min-height:40px;padding:9px 14px;border-radius:9px;font:500 12px/1.5 var(--font);}
  .directory-delete-person {display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--input-bg);min-width:0;}
  .directory-delete-person>img {width:40px;height:40px;flex:0 0 40px;border-radius:50%;object-fit:cover;}
  .directory-delete-person>div {flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
  #contact-delete-name {font:500 13px/1.4 var(--font);color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #contact-delete-address {color:var(--text-sec);font-size:11px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .directory-delete-explanation {margin:0;color:var(--text-sec);font-size:13px;line-height:1.7;text-align:left;}
  @media(max-width:799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .directory-search .search-input {font-size:16px;min-height:44px;padding-top:9px;padding-bottom:9px;}
    .directory-search-clear {width:36px;height:36px;}
    #list-contacts .contact-row {min-height:68px;}
    .contact-profile-btn {width:44px;height:44px;flex-basis:44px;}
    .directory-invite {width:40px;height:40px;}
    .directory-summary {min-height:44px;}
    .calls-directory-tools .calls-header {padding-top:5px;min-height:46px;}
    .calls-directory-tools .calls-sort-btn {min-height:36px;padding:6px 10px;}
    .calls-directory-tools .calls-clear-btn {width:40px;height:40px;}
    .calls-call-btn {width:36px;height:36px;}
    #list-calls .calls-item-avatar {width:40px;height:40px;flex-basis:40px;}
    #list-calls .calls-item {min-height:78px;}
    .directory-call-picker.modal {max-height:calc(var(--viewport-height) - 24px);}
    .directory-picker-header {padding:16px 18px 12px;}
    .directory-picker-header h2 {font-size:25px;}
    .directory-picker-tools {padding:0 18px 12px;gap:10px;}
    .directory-picker-tools .directory-search .search-input {font-size:16px;}
    .directory-call-types button {min-height:40px;}
    .directory-picker-footer {padding:10px 18px;}
    .directory-picker-footer .btn {min-height:40px;}
    .directory-contact-dialog.modal {max-height:calc(var(--viewport-height) - 24px);border-radius:14px;}
    .directory-contact-header {padding:18px 18px 16px;}
    .directory-contact-header h2 {font-size:23px;}
    .directory-contact-body {padding:4px 18px 20px;gap:18px;}
    .directory-contact-field .input {font-size:16px;}
    .directory-contact-footer {padding:12px 18px;}
    .directory-photo-actions button {min-height:36px;}
  }
}

@layer system {
  #message-request-banner {width:calc(100% - 40px);max-width:640px;flex-shrink:0;align-self:center;margin:16px auto;padding:20px;border:1px solid var(--border-subtle);border-radius:14px;background:var(--surface);color:var(--text-main);overflow-y:auto;min-height:0;}
  .boundary-request-header {display:flex;align-items:flex-start;gap:12px;text-align:left;}
  .boundary-request-header>span {display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:8px;background:var(--accent-subtle);color:var(--accent-text);}
  .boundary-request-header .icon {width:18px;height:18px;}
  .boundary-request-header>div {flex:1;min-width:0;}
  .boundary-request-header h3 {margin:0;font:400 22px/1.25 var(--font-display);text-align:left;color:var(--text-main);overflow-wrap:anywhere;}
  .boundary-request-header p {margin:6px 0 0;color:var(--text-sec);font-size:12px;line-height:1.6;text-align:left;}
  .boundary-request-preview {margin:16px 0 0;padding:12px 14px;max-height:120px;overflow-y:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.65;color:var(--text-main);border-left:2px solid var(--border);background:var(--input-bg);border-radius:0 8px 8px 0;}
  .boundary-request-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
  .boundary-request-actions .btn {width:auto;min-height:40px;padding:9px 14px;font:500 12px/1.5 var(--font);border-radius:9px;}
  .boundary-request-actions [data-request-action="decline"] {color:var(--danger);margin-left:auto;}
  .boundary-request-error {margin:14px 0 0;font-size:12px;line-height:1.6;color:var(--danger);text-align:left;overflow-wrap:anywhere;}
  .boundary-peer-state {display:grid;place-items:center;min-height:100%;padding:32px 24px;background:var(--bg-body);}
  .boundary-peer-copy {width:100%;max-width:460px;text-align:center;}
  .boundary-state-icon {display:grid;place-items:center;width:44px;height:44px;margin:0 auto 18px;color:var(--text-sec);}
  .boundary-state-icon .icon {width:32px;height:32px;}
  .boundary-peer-copy h2 {font:400 28px/1.2 var(--font-display);margin:0;color:var(--text-main);overflow-wrap:anywhere;}
  .boundary-peer-copy p {font-size:13px;line-height:1.7;color:var(--text-sec);margin:14px 0 20px;}
  .boundary-peer-copy dl,.boundary-entity-body dl {margin:0;border:1px solid var(--border-subtle);border-radius:10px;padding:12px 14px;background:var(--surface);text-align:left;}
  .boundary-peer-copy dl>div,.boundary-entity-body dl>div {display:flex;flex-direction:column;gap:4px;padding:4px 0;}
  .boundary-peer-copy dt,.boundary-entity-body dt {color:var(--text-sec);font-size:11px;}
  .boundary-peer-copy dd,.boundary-entity-body dd {margin:0;color:var(--text-main);font-size:13px;line-height:1.6;overflow-wrap:anywhere;}
  .boundary-entity-dialog.modal,.boundary-account-dialog.modal {display:flex;flex-direction:column;align-items:stretch;gap:0;width:min(480px,100%);max-height:calc(var(--viewport-height) - 32px);padding:0;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);}
  .boundary-dialog-header {display:flex;align-items:flex-start;gap:14px;padding:22px 24px 18px;flex-shrink:0;}
  .boundary-dialog-header>div,.boundary-dialog-header h2 {flex:1;min-width:0;}
  .boundary-dialog-header h2 {margin:0;font:400 26px/1.2 var(--font-display);color:var(--text-main);text-align:left;overflow-wrap:anywhere;}
  .boundary-dialog-header .btn {display:grid;place-items:center;width:36px;height:36px;min-height:36px;flex:0 0 36px;padding:8px;border:0;background:transparent;color:var(--text-sec);}
  .boundary-dialog-header .btn .icon {width:18px;height:18px;}
  .boundary-entity-body {padding:0 24px 22px;overflow-y:auto;min-height:0;}
  .boundary-entity-body>p {font-size:13px;line-height:1.7;color:var(--text-sec);margin:0 0 16px;text-align:left;overflow-wrap:anywhere;}
  .boundary-entity-footer {display:flex;justify-content:flex-end;border-top:1px solid var(--border-subtle);padding:14px 24px;flex-shrink:0;}
  .boundary-entity-footer .btn {width:auto;min-height:40px;padding:9px 16px;font-size:12px;border-radius:9px;}
  #account-center-modal {display:flex;align-items:center;justify-content:center;padding:24px;background:var(--scrim);}
  .boundary-account-dialog.modal {width:min(640px,100%);}
  .boundary-eyebrow {display:block;color:var(--text-sec);font-size:11px;line-height:1.5;margin-bottom:7px;}
  .boundary-account-body {padding:0 24px 24px;min-height:0;overflow-y:auto;overscroll-behavior:contain;text-align:left;}
  .boundary-rating-section {padding:16px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--input-bg);}
  .boundary-rating-section .account-rating-row {display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 12px;justify-content:space-between;}
  #account-rating {margin:0;color:var(--text-main);font:500 14px/1.5 var(--font);text-align:left;}
  #account-rating-status {padding:3px 8px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--surface);color:var(--text-sec);font-size:11px;line-height:1.5;white-space:nowrap;}
  #account-rating-status:is([data-status="high_risk"],[data-status="restricted"]) {color:var(--danger);background:var(--danger-bg);}
  .boundary-rating-section .account-rating-track {height:4px;margin-top:14px;border-radius:2px;background:var(--border);}
  .boundary-rating-section .account-rating-track i {display:block;height:100%;max-width:100%;border-radius:inherit;background:var(--primary);}
  #account-rating-recovery,#account-center-description {margin:12px 0 0;font-size:12px;line-height:1.7;color:var(--text-sec);text-align:left;overflow-wrap:anywhere;}
  :is(#account-rating-recovery,#account-center-description):empty {display:none;}
  .boundary-events-heading {margin:24px 0 10px;color:var(--text-main);font:500 12px/1.5 var(--font);text-align:left;}
  #account-center-violations {display:flex;flex-direction:column;gap:8px;}
  .boundary-violation.account-violation {padding:0;margin:0;border:1px solid var(--border-subtle);border-radius:10px;background:var(--surface);text-align:left;overflow:hidden;}
  .boundary-violation .account-violation-head {display:flex;align-items:flex-start;gap:12px;padding:14px;min-width:0;}
  .boundary-violation summary {cursor:pointer;list-style:none;}
  .boundary-violation summary::-webkit-details-marker {display:none;}
  .boundary-violation summary:hover {background:var(--hover);}
  .boundary-violation .account-violation-copy {display:flex;flex-direction:column;gap:5px;min-width:0;flex:1;}
  .boundary-violation .account-violation-copy strong {font:500 13px/1.4 var(--font);color:var(--text-main);overflow-wrap:anywhere;}
  .boundary-violation .account-violation-copy small {color:var(--text-sec);font-size:11px;line-height:1.6;overflow-wrap:anywhere;}
  .boundary-violation-metrics {display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto;font-size:11px;}
  .boundary-violation .account-violation-count {width:auto;min-width:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--text-sec);font-size:11px;}
  .boundary-rating-impact {color:var(--danger);font-size:11px;line-height:1.5;}
  .boundary-violation summary>.icon {width:16px;height:16px;flex:0 0 16px;margin-top:1px;color:var(--text-sec);}
  .boundary-violation[open] summary>.icon {transform:rotate(180deg);}
  .boundary-violation .account-violation-details {display:none;padding:0 14px 14px;}
  .boundary-violation[open] .account-violation-details {display:block;}
  .boundary-violation-detail {padding:12px 0;border-top:1px solid var(--border-subtle);}
  .boundary-violation-detail:last-child {padding-bottom:0;}
  .boundary-violation-detail h4 {margin:0 0 10px;color:var(--text-main);font:500 12px/1.5 var(--font);overflow-wrap:anywhere;}
  .boundary-violation-detail dl {display:flex;flex-direction:column;gap:6px;margin:0;}
  .boundary-violation-detail dl>div {display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;}
  .boundary-violation-detail dt,.boundary-violation-detail dd {font-size:11px;line-height:1.6;color:var(--text-sec);margin:0;overflow-wrap:anywhere;}
  .boundary-violation-detail dd {color:var(--text-main);}
  .boundary-violation-detail dd.boundary-rating-impact {color:var(--danger);}
  .boundary-violation-detail blockquote {margin:12px 0 0;padding:10px 12px;border-left:2px solid var(--border);background:var(--input-bg);border-radius:0 8px 8px 0;color:var(--text-sec);font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;max-height:160px;overflow-y:auto;overscroll-behavior:contain;}
  .boundary-account-state {margin:0;padding:20px 14px;color:var(--text-sec);font-size:12px;line-height:1.6;text-align:left;}
  .boundary-account-error {color:var(--danger);}
  #account-center-retry {margin-top:8px;font-size:12px;min-height:40px;}
  .boundary-account-empty {display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--border-subtle);border-radius:10px;}
  .boundary-account-empty>.icon {width:20px;height:20px;flex:0 0 20px;color:var(--accent-text);}
  .boundary-account-empty strong {color:var(--text-main);font:500 13px/1.5 var(--font);}
  .boundary-account-empty p {margin:5px 0 0;font-size:11px;line-height:1.6;color:var(--text-sec);text-align:left;}
  .boundary-once-tile {display:flex;flex-direction:column;align-items:center;gap:10px;width:230px;max-width:70vw;min-height:138px;padding:18px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--input-bg);color:var(--text-main);font:inherit;cursor:pointer;}
  .boundary-once-tile:hover {background:var(--hover);}
  .boundary-once-tile-icon {display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--accent-subtle);color:var(--accent-text);}
  .boundary-once-tile-icon .icon {width:20px;height:20px;}
  .boundary-once-tile strong {font:500 13px/1.4 var(--font);text-align:center;}
  .boundary-once-tile small {font:400 11px/1.5 var(--font);color:var(--text-sec);text-align:center;}
  #view-once-modal {z-index:10080;padding:0;background:var(--bg-body);}
  .boundary-once-dialog.modal {display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--bg-body);}
  .boundary-once-header {display:flex;align-items:center;gap:12px;padding:14px 24px;border-bottom:1px solid var(--border-subtle);flex-shrink:0;background:var(--surface);}
  .boundary-once-header h2 {flex:1;min-width:0;margin:0;font:400 22px/1.25 var(--font-display);color:var(--text-main);text-align:left;overflow-wrap:anywhere;}
  .boundary-once-counter {font:500 12px/1.5 var(--font);font-variant-numeric:tabular-nums;color:var(--accent-text);white-space:nowrap;padding:5px 9px;border-radius:7px;background:var(--accent-subtle);}
  .boundary-once-header .btn {width:36px;height:36px;min-height:36px;flex:0 0 36px;padding:8px;color:var(--text-sec);border:0;background:transparent;}
  .boundary-once-header .icon {width:18px;height:18px;}
  .boundary-once-stage {position:relative;display:flex;flex:1;min-height:0;align-items:center;justify-content:center;padding:24px;overflow:hidden;}
  .boundary-once-stage img {display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;}
  .boundary-once-status {position:absolute;inset:auto 24px;margin:0;color:var(--text-sec);font:400 13px/1.6 var(--font);text-align:center;}
  .boundary-once-footer {flex-shrink:0;padding:12px 24px;color:var(--text-sec);font:400 11px/1.6 var(--font);text-align:center;}
  @media(max-width:799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #message-request-banner {width:calc(100% - 24px);margin:12px auto;padding:16px;}
    .boundary-request-header h3 {font-size:20px;}
    .boundary-request-actions {gap:6px;}
    .boundary-request-actions .btn {min-height:44px;padding:10px 12px;}
    .boundary-request-actions [data-request-action="decline"] {margin-left:0;}
    .boundary-peer-copy h2 {font-size:25px;}
    .boundary-peer-state {padding:24px 18px;}
    #account-center-modal {padding:12px;}
    .boundary-entity-dialog.modal,.boundary-account-dialog.modal {max-height:calc(var(--viewport-height) - 24px);border-radius:14px;}
    .boundary-dialog-header {padding:18px 18px 16px;}
    .boundary-dialog-header h2 {font-size:23px;}
    .boundary-entity-body,.boundary-account-body {padding:0 18px 18px;}
    .boundary-entity-footer {padding:12px 18px;}
    .boundary-violation .account-violation-head {padding:12px;gap:8px;flex-wrap:wrap;}
    .boundary-violation-metrics {align-items:flex-start;flex-direction:row;gap:8px;}
    .boundary-violation .account-violation-copy {flex-basis:calc(100% - 24px);}
    .boundary-violation summary>.icon {order:-1;}
    .boundary-violation-detail dl>div {grid-template-columns:64px minmax(0,1fr);gap:8px;}
    .boundary-once-header {padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px;gap:8px;flex-wrap:wrap;}
    .boundary-once-header h2 {font-size:20px;flex-basis:calc(100% - 44px);}
    .boundary-once-header .btn {order:-1;}
    .boundary-once-counter {margin-left:44px;}
    .boundary-once-stage {padding:14px;}
    .boundary-once-footer {padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));}
  }
}

@layer system {
  #sticker-picker.expression-picker {position:fixed;left:12px;bottom:auto;width:392px;height:auto;max-height:480px;border-radius:16px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-popover);z-index:2000;overflow:hidden;}
  #sticker-picker::after {display:none;}
  .expression-picker-header,.bot-keyboard-header {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 6px;flex-shrink:0;}
  .expression-picker-header h3,.bot-keyboard-header h3 {font:400 23px/1.2 var(--font-display);letter-spacing:-.02em;margin:0;color:var(--text-main);}
  .expression-picker-header .btn-icon,.bot-keyboard-header .btn-icon {width:36px;height:36px;min-width:36px;padding:8px;}
  .expression-search {display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface-raised);margin:4px 14px 10px;padding:0 10px;min-height:40px;flex-shrink:0;}
  .expression-search>.icon {width:17px;height:17px;color:var(--text-sec);flex-shrink:0;}
  .expression-search:focus-within {border-color:var(--primary);}
  .expression-search .sticker-search {min-width:0;width:100%;height:38px;background:transparent;border:0;border-radius:0;outline:0;box-shadow:none;padding:0;font:400 13px var(--font);color:var(--text-main);text-align:left;}
  .expression-search .sticker-search::placeholder {opacity:1;text-align:left;color:var(--text-sec);}
  .expression-search .btn-icon {width:28px;height:28px;min-width:28px;padding:5px;}
  #sticker-tabs {height:auto;min-height:42px;padding:0 14px 8px;gap:6px;background:transparent;border:0;overflow-x:auto;}
  #sticker-tabs .pack-tab {width:auto;height:34px;padding:0 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-sec);opacity:1;font:500 12px var(--font);gap:6px;}
  #sticker-tabs .pack-tab.active {background:var(--accent-subtle);border-color:var(--accent-border);color:var(--primary);}
  #sticker-tabs .pack-tab:disabled {color:var(--text-sec);opacity:.55;cursor:not-allowed;}
  #sticker-tabs .pack-tab small {font-size:10px;color:var(--text-sec);font-variant-numeric:tabular-nums;}
  .expression-grid-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 14px 8px;border-top:1px solid var(--border);flex-shrink:0;}
  #sticker-pack-title {font:500 12px/1.4 var(--font);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #sticker-count {font:400 11px var(--font);color:var(--text-sec);flex-shrink:0;}
  #sticker-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:3px 11px 10px;min-height:0;flex:1 1 auto;max-height:304px;overflow-y:auto;overscroll-behavior:contain;}
  #sticker-grid .sticker-item {border:0;border-radius:9px;background:transparent;padding:3px;aspect-ratio:1;min-height:44px;overflow:hidden;transform:none;transition:background-color var(--motion-fast) ease;isolation:auto;color:var(--text-sec);}
  #sticker-grid .sticker-item:hover {transform:none;filter:none;background:var(--hover);z-index:auto;}
  #sticker-grid .sticker-item img,#sticker-grid .sticker-item video {padding:0;max-width:100%;max-height:100%;border-radius:6px;object-fit:contain;}
  #sticker-grid .sticker-item[data-state=loading] {background:var(--surface-raised);}
  #sticker-grid .sticker-item[data-state=loading]::after {content:'';width:14px;height:14px;border:1.5px solid var(--border);border-top-color:var(--primary);border-radius:50%;position:absolute;animation:spin .8s linear infinite;}
  #sticker-grid .sticker-item[data-state=error] {flex-direction:column;gap:5px;background:var(--surface-raised);font:400 10px/1.2 var(--font);}
  #sticker-grid .sticker-item[data-state=error] .icon {width:18px;height:18px;}
  .expression-picker-footer {padding:9px 14px;border-top:1px solid var(--border);flex-shrink:0;color:var(--text-sec);font:400 11px/1.5 var(--font);}
  .expression-picker-footer p {margin:4px 0 0;color:var(--danger);overflow-wrap:anywhere;}
  #sticker-grid .list-state {grid-column:1/-1;padding:18px 10px;}
  #sticker-grid .list-state h3 {font:400 20px var(--font-display);}
  #sticker-grid .list-state p {font-size:12px;}
  #reply-keyboard-area {position:fixed;display:none;left:12px;bottom:auto;width:640px;max-height:360px;gap:0;padding:0;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--shadow-popover);pointer-events:auto;overflow:hidden;z-index:1900;}
  #reply-keyboard-area.visible {display:flex;}
  .bot-keyboard-header {padding-bottom:10px;border-bottom:1px solid var(--border);}
  .bot-keyboard-header span {display:block;margin-top:3px;font-size:11px;color:var(--text-sec);}
  .bot-keyboard-list {min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:6px;padding:10px;}
  #reply-keyboard-area .reply-row {display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:6px;}
  #reply-keyboard-area .reply-btn {display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;min-width:0;padding:10px;border:1px solid var(--border);border-radius:9px;background:var(--surface-raised);color:var(--text-main);font:400 13px/1.4 var(--font);white-space:normal;transform:none;pointer-events:auto;}
  #reply-keyboard-area .reply-btn span {min-width:0;overflow-wrap:anywhere;}
  #reply-keyboard-area .reply-btn .icon {flex-shrink:0;width:17px;height:17px;color:var(--text-sec);}
  #reply-keyboard-area .reply-btn:hover {background:var(--hover);}
  #reply-keyboard-area .reply-btn.loading {color:var(--text-sec);}
  .bot-keyboard-status {margin:0;padding:0 14px 12px;color:var(--text-sec);font:400 12px/1.5 var(--font);overflow-wrap:anywhere;flex-shrink:0;}
  .bot-keyboard-status.is-error {color:var(--danger);}
  .msg-buttons {width:100%;display:flex;flex-direction:column;gap:5px;margin-top:9px;padding-top:9px;border-top:1px solid var(--border);}
  .msg-buttons .btn-row {display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:5px;width:100%;}
  .msg-buttons .bot-btn {display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:38px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised);color:var(--text-main);font:400 12px/1.4 var(--font);white-space:normal;text-decoration:none;transform:none;}
  .msg-buttons .bot-button-label {min-width:0;overflow-wrap:anywhere;}
  .msg-buttons .bot-btn .icon {width:15px;height:15px;flex-shrink:0;color:var(--text-sec);}
  .msg-buttons .bot-btn:hover {background:var(--hover);}
  .msg-buttons .bot-btn.link::after {content:none;display:none;}
  .msg-buttons .bot-btn.pending::after {content:'';width:11px;height:11px;flex-shrink:0;border:1.5px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;}
  @media(max-width:399px){#sticker-grid{grid-template-columns:repeat(3,minmax(0,1fr));}#reply-keyboard-area .reply-row{grid-auto-flow:row;grid-auto-columns:1fr;}.expression-picker-header h3,.bot-keyboard-header h3{font-size:21px;}}
  @media(prefers-reduced-motion:reduce){#sticker-grid .sticker-item[data-state=loading]::after,.msg-buttons .bot-btn.pending::after{animation:none;}}
}

@layer system {
  .bot-preview-system {font-style:italic;}
  .bubble.bot-share-bubble {padding:3px;border:0;background:transparent;box-shadow:none;max-width:min(360px,calc(100vw - 56px));}
  .bot-share-bubble>.meta {margin:5px 8px 2px;}
  .bot-share-card {display:grid;grid-template-columns:44px minmax(0,1fr) 18px;align-items:center;gap:12px;width:100%;min-width:220px;max-width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-raised);color:var(--text-main);font:400 13px/1.4 var(--font);text-align:left;text-decoration:none;transition:background-color var(--motion-fast) ease;}
  .bot-share-card:hover {background:var(--hover);color:var(--text-main);text-decoration:none;}
  .bot-share-card>img {width:44px;height:44px;border-radius:50%;object-fit:cover;}
  .bot-share-copy {display:flex;flex-direction:column;gap:3px;min-width:0;}
  .bot-share-copy strong {font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bot-share-copy>span {font-size:12px;color:var(--text-sec);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .bot-share-copy small {font-size:11px;color:var(--text-sec);}
  .bot-share-action .icon {width:17px;height:17px;color:var(--text-sec);}
  .bot-location-icon {display:grid;place-items:center;width:44px;height:44px;background:var(--accent-subtle);color:var(--primary);border-radius:10px;}
  .bot-location-icon .icon {width:23px;height:23px;}
  @media(max-width:399px){.bot-share-card{gap:9px;min-width:200px;padding:10px;}}
}

@layer system {
 body:has(#active-chat.hidden,.sidebar.search-active,#chat-search-overlay:not(.hidden)) #float-date-indicator { display:none !important; }
 .global-search-controls { display:flex; gap:4px; padding:6px; margin:2px 4px 4px; border:1px solid var(--border-subtle); border-radius:11px; background:var(--surface); }
 .search-filter { display:flex; flex:1; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:32px; padding:6px 8px; border:0; border-radius:7px; background:transparent; color:var(--text-sec); font:400 12px/1.3 var(--font); cursor:pointer; }
 .search-filter:hover { background:var(--hover); }
 .search-filter[aria-pressed="true"] { background:var(--accent-subtle); color:var(--accent-text); }
 .search-filter-count { font-size:10px; font-variant-numeric:tabular-nums; opacity:.7; }
 #list-search .search-header { font-weight:400; margin:8px 4px 2px; padding:12px 8px 6px; }
 #list-search .search-result-row { display:flex; min-height:68px; padding:6px 8px; gap:4px; border:0; border-radius:10px; background:transparent; }
 .search-result-main { display:flex; flex:1; min-width:0; gap:10px; align-items:center; min-height:50px; padding:0; border:0; background:transparent; color:var(--text-main); font:inherit; text-align:left; cursor:pointer; }
 .search-result-main > .icon { width:14px; height:14px; flex-shrink:0; color:var(--text-muted); }
 .search-result-main .avatar { flex:0 0 38px; width:38px; height:38px; }
 .search-result-copy { display:flex; flex-direction:column; min-width:0; }
 .search-result-copy .bold { display:block; font-size:13px; font-weight:500; }
 .search-result-title { display:flex; align-items:center; gap:5px; min-width:0; }
 .search-result-title .search-result-name { min-width:0; flex:0 1 auto; }
 .search-result-title .account-status-badge { width:14px; height:14px; flex:0 0 14px; color:var(--accent-text); }
 .search-result-copy .text-xs { display:block; font-size:11px; }
 .search-result-copy mark { background:transparent; color:var(--accent-text); }
 .search-result-profile { display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--text-sec); cursor:pointer; }
 .search-result-profile > .icon { width:17px; height:17px; }
 .search-result-profile:hover { background:var(--hover); color:var(--accent-text); }
 .search-result-main:disabled,.search-result-profile:disabled { opacity:.55; cursor:wait; }
 .search-result-main[aria-busy="true"] > .icon { opacity:.25; }
 .discovery-search { overflow:hidden; background:var(--bg-body); }
 .message-search-header { display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; gap:12px; padding:24px max(20px,calc((100% - 760px)/2)) 14px; border:0; }
 .message-search-header > div { min-width:0; }
 .message-search-header h2 { margin:0; font:400 27px/1.3 var(--font-display); letter-spacing:-.02em; }
 .message-search-header p { margin:5px 0 0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--text-sec); }
 .message-search-header > button { flex-shrink:0; }
 .message-search-controls { flex:0 0 auto; padding:0 max(20px,calc((100% - 760px)/2)) 12px; border-bottom:1px solid var(--border-subtle); }
 .message-search-field { display:flex; align-items:center; gap:10px; padding:4px 8px 4px 12px; min-height:44px; border:1px solid var(--border); border-radius:11px; background:var(--input-bg); }
 .message-search-field > .icon { width:18px; height:18px; flex:0 0 18px; color:var(--text-sec); }
 .message-search-field:focus-within { outline:2px solid var(--focus-ring); outline-offset:2px; }
 .message-search-field #chat-search-input { flex:1; min-width:0; width:100%; min-height:34px; height:34px; padding:5px 0; border:0; border-radius:0; outline:0; box-shadow:none; background:transparent; color:var(--text-main); font:400 14px/1.5 var(--font); }
 #chat-search-input::-webkit-search-cancel-button { appearance:none; }
 #chat-search-clear { width:28px; height:28px; min-height:28px; flex:0 0 28px; padding:5px; }
 #chat-search-clear[hidden] { display:none; }
 .message-search-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; font-size:11px; color:var(--text-sec); }
 .search-keyboard-hint { font-size:10px; color:var(--text-muted); }
 .discovery-search .chat-search-results { flex:1 1 auto; min-height:0; padding:14px max(20px,calc((100% - 760px)/2)) 24px; overscroll-behavior:contain; }
 .message-search-day { margin:12px 2px 8px; font:400 11px/1.4 var(--font); color:var(--text-sec); }
 .discovery-search .chat-search-result { display:flex; align-items:flex-start; text-align:left; width:100%; min-width:0; gap:12px; margin:0 0 6px; padding:14px; border:1px solid var(--border-subtle); border-radius:11px; background:var(--surface); color:var(--text-main); font:inherit; cursor:pointer; transition:background-color var(--motion-fast) ease; }
 .discovery-search .chat-search-result:hover { background:var(--hover); }
 .discovery-search .chat-search-result:disabled { opacity:.65; cursor:wait; }
 .message-search-kind { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border-radius:8px; background:var(--accent-subtle); color:var(--accent-text); }
 .message-search-kind .icon { width:16px; height:16px; }
 .message-search-result-copy { display:block; flex:1; min-width:0; }
 .discovery-search .chat-search-result-name { display:flex; gap:10px; min-width:0; margin-bottom:6px; }
 .discovery-search .chat-search-result-date { font-size:10px; color:var(--text-muted); white-space:nowrap; }
 .discovery-search .chat-search-result-text { font-size:13px; line-height:1.6; -webkit-line-clamp:3; }
 .message-search-arrow { align-self:center; color:var(--text-muted); flex:0 0 14px; }
 .message-search-arrow .icon { width:14px; height:14px; }
 .message-search-status { flex:0 0 auto; padding:12px max(20px,calc((100% - 760px)/2)); border-top:1px solid var(--border-subtle); color:var(--text-sec); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
 .message-search-status:empty { display:none; }
 .msg-row.search-highlight > .bubble { outline:2px solid var(--accent-text); outline-offset:3px; }
 .search-return-latest { position:absolute; z-index:210; bottom:94px; right:max(20px,calc((100% - 850px)/2)); display:flex; align-items:center; gap:7px; max-width:calc(100% - 32px); min-height:34px; padding:7px 11px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--accent-text); font:400 12px/1.4 var(--font); cursor:pointer; }
 .search-return-latest[hidden] { display:none; }
 .search-return-latest:hover { background:var(--hover); }
 .search-return-latest:disabled { opacity:.65; cursor:wait; }
 .search-return-latest .icon { width:15px; height:15px; flex:0 0 15px; }
 @media (max-width:799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
  .message-search-header { padding:calc(18px + env(safe-area-inset-top,0px)) 16px 14px; }
  .message-search-header h2 { font-size:24px; }
  .message-search-controls { padding:0 16px 12px; }
  .message-search-field #chat-search-input { font-size:16px; }
  .discovery-search .chat-search-results { padding:10px 12px 20px; }
  .discovery-search .chat-search-result { gap:9px; padding:12px 10px; }
  .message-search-kind { width:26px; height:26px; flex-basis:26px; }
  .message-search-arrow { display:none; }
  .message-search-status { padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); }
  .search-keyboard-hint { display:none; }
 }
}

@layer system {
  .zn-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(var(--viewport-height) - 32px); margin: auto; padding: 28px; overflow-y: auto; color: var(--text-main); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--glass-shadow); }
  .zn-dialog::backdrop { background: var(--scrim); backdrop-filter: none; }
  .zn-dialog h2 { font-size: 20px; margin: 0 0 12px; font-weight: 500; }
  #zn-dialog-message { color: var(--text-sec); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; }
  #zn-dialog-input { margin-top: 20px; }
  .zn-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
  .zn-dialog-actions .btn { min-width: 100px; }
  @media (max-width: 799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .input-area { flex-wrap: wrap; }
    .input-wrapper { order: -1; flex: 1 0 100%; width: 100%; }
    .photo-attachments { order: -2; }
    .action-btn-container { margin-left: auto; }
    .zn-dialog { padding: 24px; }
  }
}

@layer system {

.learning-topic-row:has(.learning-topic-body) .learning-chevron { transform: rotate(90deg); }

.chat-area:has(#long-text-attachment:not(.hidden)) #fwd-indicator,
.chat-view:has(#long-text-attachment:not(.hidden)) #fwd-indicator,
#active-chat:has(#long-text-attachment:not(.hidden)) #fwd-indicator {
    bottom: 133px;
}

@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {

    .chat-area:has(#long-text-attachment:not(.hidden)) #fwd-indicator,
    .chat-view:has(#long-text-attachment:not(.hidden)) #fwd-indicator,
    #active-chat:has(#long-text-attachment:not(.hidden)) #fwd-indicator {
        bottom: 125px;
    } }

.msg-row .bubble:has(.msg-sticker-mp4),
.msg-row .bubble:has(.msg-sticker-png),
.msg-row .bubble:has(.msg-video-circle),
.msg-row .bubble.is-sticker {
    padding: 0;
}
.msg-row .bubble:has(.msg-sticker-mp4) .meta,
.msg-row .bubble:has(.msg-sticker-png) .meta,
.msg-row .bubble:has(.msg-video-circle) .meta,
.msg-row .bubble.is-sticker .meta {
    position: absolute;
    bottom: 10px;
    right: 15px;
    padding: 2px 8px;
    
    margin: 0;
}
body:has(#app-promo-modal:not(.hidden)) .bottom-nav { display: none; }

.messages:has(#no-messages-state) {
    display: flex;
}

#active-chat:has(#message-request-banner:not(.hidden)) > .chat-pins-container:has(#pinned-bar:not(.hidden)) {
    flex: 0 0 auto;
    margin-top: calc(74px + env(safe-area-inset-top, 0px));
}

#active-chat:has(#message-request-banner:not(.hidden)) #pinned-bar:not(.hidden) {
    position: relative;
    flex: 0 0 auto;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    margin: 0 auto;
}

#active-chat:has(#pinned-bar:not(.hidden)) > #message-request-banner {
    margin-top: 12px;
    max-height: calc(100% - 150px - env(safe-area-inset-top, 0px));
}

#active-chat:has(#message-request-banner:not(.hidden)) #pinned-list-dropdown {
    top: calc(100% + 8px);
}

#active-chat:has(#message-request-banner:not(.hidden)) > .messages {
    min-height: 0;
    padding-top: 12px;
    padding-bottom: 16px;
}
#input-container:has(#photo-attachments) {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
#input-container:has(#photo-attachments:not(.hidden)) {
    flex-wrap: wrap;
}
#input-container:has(#photo-attachments:not(.hidden)) .input-wrapper { min-width: 0; }
#input-container:has(#photo-attachments:not(.hidden)) #msg-input {
    height: var(--photo-caption-height, 40px);
    min-height: 40px; max-height: 96px; overflow-y: auto;
}
#active-chat:has(#photo-attachments:not(.hidden)) > .messages {
    padding-bottom: calc(var(--photo-composer-height, 230px) + 28px);
}
#active-chat:has(#photo-attachments:not(.hidden)) #fwd-indicator,
#active-chat:has(#photo-attachments:not(.hidden)) #edit-indicator {
    bottom: calc(var(--photo-composer-height, 230px) + 20px);
}
@media (max-width: 768px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #active-chat:has(#photo-attachments:not(.hidden)) #fwd-indicator,
    #active-chat:has(#photo-attachments:not(.hidden)) #edit-indicator { bottom: calc(var(--photo-composer-height, 230px) + 12px); } }
@media (max-width: 480px) {
    #input-container:has(#photo-attachments:not(.hidden)) .photo-attachments { order: -2; } }
@media (max-width: 480px) {
    #input-container:has(#photo-attachments:not(.hidden)) .input-wrapper { order: -1; flex: 0 0 100%; } }
@media (max-width: 480px) {
    #input-container:has(#photo-attachments:not(.hidden)) .action-btn-container { margin-left: auto; } }
@media (min-width: 1100px) {
    #active-chat.thread-panel-open { --thread-panel-width: min(400px, 42%); } }
@media (min-width: 1100px) {
    #active-chat.thread-panel-open #modal-thread { width: var(--thread-panel-width); } }
@media (min-width: 1100px) {
    #active-chat.thread-panel-open > #messages-feed {
        width: calc(100% - var(--thread-panel-width));
        margin-right: 0;
    } }
@media (min-width: 1100px) {
    #active-chat.thread-panel-open > .chat-header,
    #active-chat.thread-panel-open > .input-area,
    #active-chat.thread-panel-open > #fwd-indicator,
    #active-chat.thread-panel-open > #edit-indicator,
    #active-chat.thread-panel-open > #long-text-attachment {
        left: calc((100% - var(--thread-panel-width)) / 2);
        width: calc(100% - var(--thread-panel-width) - 40px);
        margin-right: 0;
    } }
@media (min-width: 1100px) {
    #active-chat.thread-panel-open #pinned-bar,
    #active-chat.thread-panel-open #pinned-list-dropdown {
        left: calc((100% - var(--thread-panel-width)) / 2);
        right: auto;
        width: calc(100% - var(--thread-panel-width) - 40px);
        transform: translateX(-50%);
    } }
@media (min-width: 1100px) {
    #active-chat.thread-panel-open > #message-request-banner { margin-right: calc(var(--thread-panel-width) + 14px); } }
@media (min-width: 1100px) {
                #active-chat.thread-panel-open #messages-feed {
                    margin-right: min(400px, 45%);
                } }
@media (min-width: 1100px) {

                #active-chat.thread-panel-open .input-area {
                    margin-right: min(400px, 45%);
                } }
@media (min-width: 1100px) {

                #active-chat.thread-panel-open .chat-header {
                    margin-right: min(400px, 45%);
                } }
@media (min-width: 1100px) {

                #active-chat.thread-panel-open #pinned-bar {
                    right: calc(min(400px, 45%) + 12px);
                } }
@media (min-width: 1100px) {

                #active-chat.thread-panel-open #pinned-list-dropdown {
                    right: calc(min(400px, 45%) + 12px);
                } }
}

@layer system {
  #message-request-banner { margin-top: 84px; }
  #active-chat:has(#message-request-banner:not(.hidden)) > .chat-pins-container:has(#pinned-bar:not(.hidden)) { margin-top: 84px; }
  #active-chat:has(#pinned-bar:not(.hidden)) > #message-request-banner { margin-top: 12px; }
  @media (max-width: 799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    #message-request-banner { margin-top: calc(72px + env(safe-area-inset-top, 0px)); }
    #active-chat:has(#message-request-banner:not(.hidden)) > .chat-pins-container:has(#pinned-bar:not(.hidden)) { margin-top: calc(72px + env(safe-area-inset-top, 0px)); }
    #active-chat:has(#pinned-bar:not(.hidden)) > #message-request-banner { margin-top: 12px; }
    .modal-overlay:has(.settings-shell) { padding: 12px; align-items: center; justify-content: center; }
    .modal-overlay .modal.settings-shell { position:relative; inset:auto; width: 100%; margin: 0; max-width: 640px; padding: 0; border: 1px solid var(--border); border-radius: 16px; height: calc(var(--viewport-height) - 24px); max-height: calc(var(--viewport-height) - 24px); }
  }
  @media (min-width: 1100px) {
    #active-chat.thread-panel-open > .chat-header { left: 0; width: calc(100% - var(--thread-panel-width)); transform: none; }
  }
}
@layer system {
  #input-container.input-area {min-height:54px;padding:7px 9px;gap:0;border-radius:15px;}
  #input-container .composer-toolbar {width:100%;display:flex;flex-wrap:nowrap;align-items:center;gap:4px;min-height:38px;order:0;}
  #input-container .input-wrapper {flex:1;order:2;width:auto;min-width:0;min-height:36px;display:flex;align-items:center;}
  #input-container #msg-input {height:36px;min-height:36px;max-height:144px;padding:6px 8px;font-size:var(--chat-font-size);line-height:24px;}
  #input-container .composer-toolbar>.btn,#input-container .composer-extra-tools>.btn {flex-shrink:0;width:34px;min-width:34px;height:36px;min-height:36px;padding:7px;border-radius:8px;}
  #input-container #btn-attach {order:0;}
  #input-container .composer-extra-tools {display:flex;align-items:center;gap:2px;order:1;flex-shrink:0;}
  #input-container .composer-tool-label {display:none;}
  #input-container #composer-more {display:none;order:3;}
  #input-container #btn-record-mode {order:4;min-width:46px;width:auto;font-size:11px;margin:0;padding:5px 7px;}
  #input-container .action-btn-container {order:5;margin:0;flex:0 0 36px;width:36px;height:36px;}
  #input-container .action-btn-container>.btn {width:36px;height:36px;min-height:36px;min-width:36px;}
  #input-container .composer-extra-tools :is(#msg-schedule-btn,#msg-timer-btn) {width:32px;height:36px;min-height:36px;margin:0;}
  #input-container .action-btn-container>.hidden-state {visibility:hidden;pointer-events:none;}
  #input-container>#photo-attachments {order:-2;margin-bottom:8px;}
  #active-chat>.chat-pins-container {background:transparent;border:0;box-shadow:none;backdrop-filter:none;pointer-events:none;}
  #active-chat>.chat-pins-container:has(#pinned-bar:not(.hidden)) {position:absolute;inset:84px 0 auto;flex:none;height:auto;margin:0;padding:0;background:transparent;z-index:105;}
  #active-chat:has(#message-request-banner:not(.hidden))>.chat-pins-container:has(#pinned-bar:not(.hidden)) {position:absolute;inset:84px 0 auto;margin:0;}
  #active-chat>.chat-pins-container #pinned-bar:not(.hidden) {pointer-events:auto;position:relative;inset:auto;margin:0 auto;width:calc(100% - 40px);max-width:880px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 3px 12px rgb(0 0 0 / 4%);}
  #active-chat>.chat-pins-container #pinned-list-dropdown {pointer-events:auto;}
  #active-chat:has(#pinned-bar:not(.hidden))>#messages-feed {padding-top:var(--pin-clearance,168px);}
  #active-chat:has(#pinned-bar:not(.hidden))>#message-request-banner {margin-top:var(--pin-clearance,168px);max-height:calc(100% - var(--pin-clearance,168px) - 28px - env(safe-area-inset-top,0px));}
  #active-chat:has(#message-request-banner:not(.hidden))>#messages-feed {padding-top:20px;}
  @media(max-width:799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse){
    #input-container.input-area {padding:6px;min-height:50px;border-radius:14px;}
    #input-container #msg-input {font-size:max(16px,var(--chat-font-size));padding-left:4px;padding-right:4px;}
    #active-chat>.chat-pins-container:has(#pinned-bar:not(.hidden)) {top:calc(72px + env(safe-area-inset-top,0px));margin:0;}
    #active-chat:has(#message-request-banner:not(.hidden))>.chat-pins-container:has(#pinned-bar:not(.hidden)) {top:calc(72px + env(safe-area-inset-top,0px));margin:0;}
    #active-chat>.chat-pins-container #pinned-bar:not(.hidden) {width:calc(100% - 24px);}
    #active-chat:has(#pinned-bar:not(.hidden))>#messages-feed {padding-top:var(--pin-clearance,calc(156px + env(safe-area-inset-top,0px)));}
    #active-chat:has(#pinned-bar:not(.hidden))>#message-request-banner {margin-top:var(--pin-clearance,calc(156px + env(safe-area-inset-top,0px)));max-height:calc(100% - var(--pin-clearance,156px) - 28px - env(safe-area-inset-top,0px));}
    #active-chat:has(#message-request-banner:not(.hidden))>#messages-feed {padding-top:20px;}
  }
  @media(max-width:699px){
    #input-container #composer-more {display:flex;}
    #input-container .composer-extra-tools {display:none;position:absolute;bottom:calc(100% + 8px);right:0;z-index:150;width:min(300px,calc(100vw - 24px));padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--surface-raised);box-shadow:var(--glass-shadow);}
    #input-container .composer-extra-tools[data-open=true] {display:flex;flex-direction:column;align-items:stretch;gap:2px;}
    #input-container .composer-extra-tools>.btn {display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:42px;height:auto;text-align:left;padding:10px 12px;font-size:12px;margin:0;}
    #input-container .composer-extra-tools>.btn.hidden {display:none;}
    #input-container .composer-tool-label {display:inline;}
    #input-container .composer-extra-tools :is(#msg-schedule-btn,#msg-timer-btn) {width:100%;height:auto;min-height:42px;margin:0;}
    #input-container .composer-toolbar>.btn {width:30px;min-width:30px;padding:5px;}
    #input-container #btn-record-mode {min-width:42px;width:42px;padding:5px 3px;}
  }
}
@layer system {
 .access-form{display:flex;flex-direction:column;gap:16px}.access-field{display:flex;flex-direction:column;gap:7px;min-width:0;text-align:left}.access-field>span{font-size:13px;font-weight:500;color:var(--text-main)}.access-field .input{width:100%;margin:0;border:1px solid var(--border);border-radius:10px;min-height:44px;padding:11px 12px;background:var(--surface-raised);color:var(--text-main);box-sizing:border-box;resize:vertical}.access-hint{margin:0;color:var(--text-sec);font-size:12px;line-height:1.5;overflow-wrap:anywhere}.auth-form-options{display:flex;justify-content:flex-end;margin-top:-6px}.auth-text-action{display:inline;padding:0;background:none;border:0;color:var(--primary);font:inherit;cursor:pointer}.auth-footer{margin:18px 0 0!important;display:flex;flex-direction:column;gap:14px;text-align:left!important}.auth-footer p{margin:0;font-size:13px;text-align:center;color:var(--text-sec)}.auth-back{width:100%}.access-result{padding:16px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}.access-result h3{margin:0 0 8px;font-size:16px}.access-result p{font-size:13px;color:var(--text-sec);line-height:1.5}.auth-card .auth-heading{font-family:var(--font);font-size:28px;font-weight:400;text-align:left;letter-spacing:-.6px;line-height:1.15;margin:0 0 12px}.auth-card .auth-caption{font-size:14px;line-height:1.5;margin:0 0 24px;color:var(--text-sec);text-align:left}.auth-card .logo-img{height:28px;width:auto;margin:0 0 30px;align-self:flex-start}.auth-card{align-items:stretch;max-height:none}.auth-card [id$="code"],.auth-card #verify-code-input{letter-spacing:7px;font-size:23px;font-variant-numeric:tabular-nums}.auth-card .btn-primary{min-height:44px;border-radius:10px}
 .access-onboarding,.access-calendar{padding:0!important;width:min(580px,calc(100vw - 24px));max-height:calc(var(--viewport-height) - 24px);display:flex;flex-direction:column;overflow:hidden;background:var(--surface-raised);border:1px solid var(--border);border-radius:16px;margin:0}.access-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-bottom:1px solid var(--border);flex:0 0 auto}.access-dialog-header>div{min-width:0;flex:1}.access-dialog-header h2{margin:0;font-family:var(--font);font-size:25px;font-weight:400;letter-spacing:-.4px;line-height:1.2;text-align:left}.access-dialog-header>.btn-icon{flex:0 0 32px;width:32px;min-width:32px;height:32px;min-height:32px;padding:7px}.access-eyebrow{display:block;color:var(--text-sec);font-size:12px;margin-bottom:6px}.access-dialog-body{padding:24px;overflow:auto;min-height:0}.access-dialog-footer{display:flex;justify-content:space-between;gap:8px;padding:14px 24px;border-top:1px solid var(--border);flex-shrink:0}.onb-progress{display:block;width:100%;height:3px;border:0;appearance:none;background:var(--border);flex-shrink:0}.onb-progress::-webkit-progress-bar{background:var(--border)}.onb-progress::-webkit-progress-value{background:var(--primary)}.onb-step-slide{display:flex;flex-direction:column;gap:16px;min-width:0}.onb-step-slide h3{font-size:23px;font-weight:400;font-family:var(--font);letter-spacing:-.3px;margin:0}.onb-step-description{margin:0 0 4px;color:var(--text-sec);font-size:14px;line-height:1.6}.onb-next{align-self:flex-end;min-height:42px;margin-top:8px}.onb-overview{list-style:none;margin:0;padding:0;display:grid;gap:10px}.onb-overview li{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:10px;font-size:14px}.onb-overview .icon{width:21px;height:21px;color:var(--text-sec)}.onb-avatar-row{display:flex;align-items:center;gap:16px}.onb-avatar-button{width:82px;height:82px;border-radius:16px;padding:0;overflow:hidden;border:1px solid var(--border);background:var(--surface);cursor:pointer}.onb-avatar-button img{width:100%;height:100%;object-fit:cover}.onb-presets{display:flex;gap:10px;flex-wrap:wrap}.onb-preset{width:48px;height:48px;border:2px solid transparent;border-radius:12px;background:none;padding:2px;cursor:pointer}.onb-preset[aria-pressed=true]{border-color:var(--primary)}.onb-preset img{height:100%;width:100%;border-radius:8px}.onb-privacy-list{display:flex;flex-direction:column}.onb-privacy-field{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);font-size:14px}.onb-privacy-field select{width:150px;max-width:50%;min-height:40px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text-main);padding:8px}.onb-security-choice{display:flex;align-items:center;gap:20px;justify-content:space-between;border:1px solid var(--border);border-radius:12px;padding:18px}.onb-security-choice span{display:flex;flex-direction:column;gap:6px}.onb-security-choice strong{font-size:14px;font-weight:500}.onb-security-choice small{color:var(--text-sec);font-size:12px;line-height:1.5}.onb-security-choice input{appearance:auto;accent-color:var(--primary);width:18px;height:18px;flex-shrink:0}
 .access-calendar{width:min(380px,calc(100vw - 24px))}.access-calendar .access-dialog-header{padding:18px 20px}.access-calendar .access-dialog-header h2{font-size:23px}.access-calendar .access-dialog-body{padding:16px 20px 22px}.access-calendar .cal-header{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:14px}.access-calendar #cal-title{font-size:15px;font-weight:500;text-align:center}.access-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;width:100%;margin-bottom:18px}.access-calendar .cal-day,.access-calendar .cal-day-name{aspect-ratio:1;height:auto;width:100%;display:grid;place-items:center;margin:0;padding:0;min-height:0;font-size:13px;border-radius:9px;border:1px solid transparent;font-family:inherit}.access-calendar .cal-day-name{color:var(--text-sec);font-size:11px}.access-calendar button.cal-day{background:transparent;color:var(--text-sec);cursor:pointer}.access-calendar button.cal-day:disabled{opacity:.45;cursor:default}.access-calendar button.has-messages{color:var(--accent-text);background:var(--accent-subtle);font-weight:500}.access-calendar button.has-messages:hover{border-color:var(--primary)}.access-calendar button[aria-current=date]{border-color:var(--primary)}.access-calendar .access-hint{line-height:1.5}.access-calendar #cal-retry{margin-top:12px}
 button.rail-item,button.tab-btn,button.nav-item,button.settings-row-ios{font-family:inherit;cursor:pointer;text-align:left;border:0;background:transparent;color:inherit}button.ai-composer-chip{font-family:inherit;text-align:left;cursor:pointer}button.ai-composer-chip:disabled{opacity:.5;cursor:wait}#modal-menu button.settings-row-ios{display:flex;width:100%;justify-content:space-between;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border)}#modal-menu button.settings-row-ios:last-child{border-bottom:0}
 @media(max-width:600px){.access-dialog-header{padding:18px}.access-dialog-body{padding:20px 18px}.access-dialog-footer{padding:12px 14px}.access-dialog-footer .btn{font-size:12px;padding:10px}.onb-privacy-field{font-size:13px;gap:10px}.onb-privacy-field select{width:130px}.auth-card{padding:26px 22px}.auth-hero-title{font-size:34px}.auth-hero-subtitle{font-size:14px}}
}
@layer system {
 #story-creator{z-index:5000;background:var(--scrim);padding:16px;backdrop-filter:none}
 .immersive-shell{width:min(920px,100%);max-height:calc(var(--viewport-height) - 32px);overflow:auto;background:var(--bg-body);border:1px solid var(--border);border-radius:16px}
 .immersive-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--border);position:relative;inset:auto;background:var(--bg-body)}
 .immersive-header h2{margin:0;font:500 25px/1.2 var(--font);letter-spacing:-.5px;color:var(--text-main)}.immersive-header p{margin:5px 0 0;color:var(--text-sec);font-size:13px}
 #story-creator .story-screen{position:relative;inset:auto;width:100%;height:auto;min-height:0;max-height:calc(var(--viewport-height) - 34px);overflow:hidden;background:transparent;display:flex;flex-direction:column}
 #story-creator .immersive-header{flex-shrink:0}#story-creator .story-editor-layout{flex:1;min-height:0;overflow:auto}
 .story-camera-stage{position:relative;align-self:center;width:min(320px,100%);aspect-ratio:9/16;max-height:calc(var(--viewport-height) - 220px);margin:18px;border-radius:12px;background:var(--media-bg);overflow:hidden}
 #story-video-preview{position:relative;width:100%;height:100%;object-fit:cover;border-radius:0}
 .story-camera-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:20px;color:var(--media-text);background:var(--media-bg)}.story-camera-state.ready{inset:auto 8px 8px;padding:8px;border-radius:8px;font-size:12px;background:var(--media-bg)}
 #story-creator .story-cam-controls{position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;align-items:center;gap:8px;padding:16px;border-top:1px solid var(--border);background:var(--bg-body);height:auto;transform:none;width:100%;box-sizing:border-box}
 #story-creator .story-cam-controls .btn{min-width:0;padding:10px;font-size:13px;white-space:nowrap}
 .story-editor-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:24px;padding:24px;align-items:start}.story-preview-column{min-width:0;text-align:center}
 #story-canvas-area{position:relative;aspect-ratio:9/16;width:min(100%,320px,calc((var(--viewport-height) - 190px)*.5625));margin:auto;overflow:hidden;border-radius:12px;background:var(--media-bg);max-height:none}
 #story-edit-img,#story-edit-video{position:relative;width:100%;height:100%;object-fit:contain}#story-overlays-container{position:absolute;inset:0;pointer-events:none}
 .story-overlay-item{pointer-events:auto;touch-action:none;user-select:none;cursor:grab;position:absolute;color:white;background:none;border:0;padding:4px;font-weight:600;line-height:1.2;text-align:center;max-width:95%;overflow-wrap:anywhere;white-space:pre-wrap}.story-overlay-item:focus-visible{outline:2px solid var(--primary);outline-offset:3px}.story-overlay-item:active{cursor:grabbing}
 #story-trash{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:48px;height:48px;border-radius:12px;display:none;align-items:center;justify-content:center;color:white;background:var(--media-control)}#story-trash.visible{display:flex}#story-trash.hovered{background:var(--primary)}
 .story-editor-panel{display:flex;flex-direction:column;gap:20px;min-width:0}.story-editor-toolbox{display:flex;gap:8px}.story-editor-toolbox .btn{flex:1}.story-editor-panel input[type=range]{width:100%;accent-color:var(--primary)}
 #story-size-slider-box{position:relative;inset:auto;width:100%;padding:0;background:transparent;opacity:1;transform:none;pointer-events:auto;display:flex;flex-direction:column;align-items:stretch}
 .story-editor-privacy{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}.story-editor-actions{position:sticky;bottom:0;display:flex;justify-content:space-between;gap:8px;padding:14px 24px;border-top:1px solid var(--border);background:var(--bg-body);z-index:3;flex-shrink:0}
 .story-editor-actions .btn-publish{position:relative;inset:auto;width:auto;height:auto;border-radius:10px;min-height:44px;padding:10px 16px;box-shadow:none;transform:none}
 .access-onboarding .onb-step-slide h3,.access-onboarding .onb-step-description{text-align:left}
 .immersive-feedback{width:min(420px,100%);padding:0;max-height:calc(var(--viewport-height) - 24px);overflow:auto;border-radius:16px}.immersive-feedback .call-feedback-view{display:block;padding:20px 24px 0;background:transparent}.immersive-feedback .call-feedback-stars{display:flex;justify-content:space-between;gap:4px;margin:20px 0}
 .immersive-feedback .call-feedback-stars button{display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;height:68px;padding:6px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text-sec);font-family:inherit}
 .immersive-feedback .call-feedback-stars button>span{display:grid;place-items:center;width:28px;height:28px;margin:0;border:0;border-radius:0;background:transparent;transform:none;line-height:1}
 .immersive-feedback .call-feedback-stars button>span svg{display:block;width:26px;height:26px}
 .immersive-feedback .call-feedback-stars button small{margin:0;font-size:12px;line-height:16px}
 .immersive-feedback .call-feedback-stars button.selected{border-color:var(--accent-border);color:var(--primary);background:var(--accent-subtle)}
 .immersive-feedback .call-feedback-stars button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
 .immersive-feedback textarea{min-height:96px}.immersive-feedback #call-feedback-count{display:block;margin-top:6px;text-align:right}.immersive-feedback .access-dialog-footer{margin:20px -24px 0}.immersive-feedback .call-feedback-thanks{display:block;text-align:left;padding:24px}.immersive-feedback .call-feedback-thanks h3{font:500 25px var(--font)}.immersive-feedback .call-feedback-thanks p{color:var(--text-sec)}
 #view-call{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background:var(--bg-body);color:var(--text-main);padding:0;overflow:hidden}.immersive-call-header{position:relative;display:flex;flex-shrink:0;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--border);z-index:2;background:var(--bg-body)}
 .immersive-call-header>div:first-child{min-width:0;flex:1}.immersive-call-header .call-name{font:500 25px/1.2 var(--font-display);margin:0;color:var(--text-main);overflow-wrap:anywhere}.immersive-call-header .call-status-text{font-size:12px;margin:6px 0 0;color:var(--text-sec)}.immersive-call-meta{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}.immersive-call-options{display:flex;gap:6px;flex-shrink:0}#view-call .call-timer-badge{color:var(--text-main);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font:500 13px/1.3 var(--font);font-variant-numeric:tabular-nums}
 .immersive-call-options .call-top-btn{position:relative;inset:auto;transform:none;display:grid;place-items:center;width:38px;height:38px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text-main)}.immersive-call-options svg{width:20px;height:20px}
 .immersive-call-stage{position:relative;flex:1;min-height:0;margin:16px 24px;border-radius:12px;overflow:hidden;background:var(--surface)}#view-call .call-bg-layer{position:absolute;inset:0;background:var(--surface)}#view-call .call-bg-blur{display:none}
 #view-call #remote-video{width:100%;height:100%;object-fit:contain;background:transparent}#view-call #local-video{border:1px solid var(--border);border-radius:10px;width:140px;height:190px;right:16px;bottom:16px;top:auto;left:auto}
 #view-call .call-info-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transform:none;padding:0;margin:0}#view-call .call-avatar-img{width:112px;height:112px;border-radius:24px;box-shadow:none;border:1px solid var(--border)}
 #view-call #btn-call-enable-audio{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:3;background:var(--primary);color:var(--on-primary)}
 #view-call .call-controls{position:relative;inset:auto;transform:none;padding:0 16px;display:flex;flex-shrink:0;justify-content:center;width:100%;max-width:none;height:auto;background:transparent;border:0;border-radius:0}.call-ctrl-pill{display:flex;gap:10px;background:transparent;border:0;padding:0;border-radius:0;box-shadow:none;backdrop-filter:none}
 #view-call .call-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:84px;height:68px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--text-main);box-shadow:none}#view-call .call-btn--end{background:var(--danger-bg);color:var(--danger);border-color:transparent}#view-call .call-btn.active{background:var(--primary);color:var(--on-primary)}#view-call .call-btn svg{width:24px;height:24px}#view-call .call-control-label{font:400 11px/1.2 var(--font)}.call-mini-btn--end,.call-ctrl-btn.end{color:var(--danger)}
 #view-call .call-btn:after{display:none}.immersive-call-security{text-align:center;color:var(--text-sec);font-size:11px;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
 #modal-incoming{background:var(--scrim);backdrop-filter:none;padding:12px}#modal-incoming .incoming-card{width:min(380px,100%);padding:28px;border:1px solid var(--border);border-radius:16px;background:var(--bg-body);box-shadow:none;color:var(--text-main);text-align:center}
 #modal-incoming .incoming-avatar{display:block;width:80px;height:80px;border-radius:20px;margin:24px auto 16px;border:1px solid var(--border)}#modal-incoming h2{font:500 25px/1.2 var(--font);margin:0}#modal-incoming .incoming-actions{display:flex;gap:10px;margin:24px 0 16px}#modal-incoming .incoming-actions .btn{flex:1}
 #channel-broadcast-modal.modal-overlay{background:var(--scrim);padding:12px}.immersive-broadcast{width:min(460px,100%);padding:0;max-height:calc(var(--viewport-height) - 24px);overflow:auto}.immersive-broadcast .btn{margin-top:12px}.immersive-broadcast h3{font:500 24px var(--font)}
 #view-banned{background:var(--bg-body);color:var(--text-main)}#view-banned .banned-content{width:min(440px,calc(100% - 32px));padding:28px;border:1px solid var(--border);border-radius:16px;background:var(--surface-raised);text-align:left;transform:none;animation:none}#view-banned .banned-title{font:500 32px/1.15 var(--font);letter-spacing:-.6px;color:var(--text-main);text-shadow:none}#view-banned .banned-timer{margin:24px 0;color:var(--primary);font-size:15px}
 .story-viewer-shell{display:flex;flex-direction:column;background:var(--bg-body);color:var(--text-main);padding:16px;gap:12px}.story-viewer-card{display:flex;flex-direction:column;width:min(440px,100%);max-height:100%;margin:auto;min-height:0;background:var(--bg-body);border:1px solid var(--border);border-radius:16px;overflow:hidden}
 .story-media-container{position:relative;height:100%;width:100%}.story-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);margin-top:12px;padding-top:8px;font-size:12px}.story-viewer-heading time{font-size:11px;color:var(--text-sec)}.story-viewer-progress{display:flex;gap:4px;padding:12px 16px 0}.story-progress-segment{height:3px;flex:1;background:var(--border);border-radius:2px;overflow:hidden}.story-progress-fill{height:100%;background:var(--primary);width:0}
 .story-viewer .story-header{position:relative;inset:auto;transform:none;width:100%;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--bg-body);height:auto;flex-shrink:0}.story-viewer-header img{width:34px;height:34px;border-radius:9px;object-fit:cover}.story-viewer-heading{flex:1;min-width:0}.story-viewer-heading strong,.story-viewer-heading small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.story-viewer-heading small{color:var(--text-sec);font-size:11px;margin-top:3px}
 .story-viewer .story-progress-bar{position:relative;inset:auto;width:auto;transform:none;flex-shrink:0}.story-viewer-header .btn{position:relative;inset:auto;transform:none;flex-shrink:0}.story-viewer .story-media-container{position:relative;inset:auto;transform:none}.story-viewer .story-desc-view{position:relative;inset:auto;transform:none;background:transparent;padding:0;color:var(--text-main);text-align:left}
 .story-viewer-stage{position:relative;min-height:0;aspect-ratio:9/16;background:var(--media-bg);overflow:hidden;flex:1}.story-viewer-stage img,.story-viewer-stage video{width:100%;height:100%;object-fit:contain;display:block}.story-viewer-overlay{position:absolute;color:white;white-space:pre-wrap;text-align:center;overflow-wrap:anywhere;max-width:95%;pointer-events:none;text-shadow:0 1px 4px rgb(0 0 0 / 70%)}
 .story-viewer-media-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--media-bg);color:var(--media-text);text-align:center}.story-viewer-prev,.story-viewer-next{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:34px;height:44px;border:1px solid var(--media-border);border-radius:8px;background:var(--media-bg);color:var(--media-text);font-size:24px}.story-viewer-prev{left:8px}.story-viewer-next{right:8px}
 .story-viewer .story-viewer-footer{position:relative;inset:auto;transform:none;padding:12px 16px;background:var(--bg-body);flex-shrink:0;display:flex;flex-direction:column;width:100%;box-sizing:border-box}.story-viewer .story-viewer-description{margin:0 0 10px;font-size:13px;overflow-wrap:anywhere;order:0}.story-viewer-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;order:1}.story-navigation{order:2}.story-viewer-actions .btn.liked{color:var(--primary);background:var(--surface)}.story-viewer-stats{display:flex;gap:12px;flex:1;flex-wrap:wrap;font-size:11px;color:var(--text-sec)}.story-share-actions{display:flex;gap:8px;padding:12px}.story-stat-person{display:flex;align-items:center;gap:10px;padding:8px 0}.story-stat-person img{width:36px;height:36px;border-radius:10px}
 .admin-broadcast-banner{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:999999;width:min(640px,calc(100% - 24px));display:flex;align-items:flex-start;gap:16px;background:var(--surface-raised);color:var(--text-main);padding:18px 20px;border:1px solid var(--border);border-radius:12px;box-sizing:border-box;box-shadow:0 8px 32px rgb(0 0 0 / 10%)}.admin-broadcast-banner>div{flex:1;min-width:0}.admin-broadcast-banner strong{font-size:12px;font-weight:500;color:var(--text-sec)}.admin-broadcast-banner p{margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.5}.admin-broadcast-banner .btn{flex-shrink:0;width:32px;height:32px;min-width:32px;padding:6px}
 button.shared-story-card{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;text-align:left;font:inherit;color:var(--text-main);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;cursor:pointer}.shared-story-copy{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.shared-story-copy strong{font-size:14px;font-weight:500}.shared-story-copy small{font-size:12px;color:var(--text-sec)}button.shared-story-card .shared-story-icon{display:grid;place-items:center;width:38px;height:38px;min-width:38px;background:var(--accent-subtle);color:var(--accent-text);border-radius:10px;border:0}button.shared-story-card>.icon{width:18px;height:18px;color:var(--text-sec)}
 @media(max-width:650px){#story-creator{padding:8px}#story-creator .story-screen{max-height:calc(var(--viewport-height) - 18px)}.immersive-shell{max-height:calc(var(--viewport-height) - 16px)}.immersive-header{padding:16px}.immersive-header h2{font-size:23px}.story-editor-layout{grid-template-columns:1fr;gap:16px;padding:16px}.story-preview-column{display:flex;align-items:center;gap:12px;flex-direction:column}#story-canvas-area{width:min(200px,calc((var(--viewport-height) - 230px)*.5625));max-height:none}.story-editor-panel{gap:16px}.story-editor-toolbox .btn{min-height:40px}.immersive-call-header{padding:14px 16px;gap:8px;flex-wrap:wrap}.immersive-call-header .call-name{font-size:22px}.immersive-call-options{margin-left:auto}.immersive-call-meta{margin-left:0}.immersive-call-stage{margin:12px}.story-viewer-shell{padding:8px}.story-viewer-card{border-radius:12px}.immersive-feedback .call-feedback-view{padding:16px 18px 0}.immersive-feedback .access-dialog-footer{margin:16px -18px 0}}
 @media(max-height:550px) and (min-width:651px){.story-editor-layout{padding:16px;gap:16px}.story-editor-panel{gap:10px}.story-editor-panel .access-hint{margin:0}.story-camera-stage{max-height:220px}#view-call #local-video{width:96px;height:128px}.immersive-header{padding:12px 20px}.story-viewer-card{width:360px}.story-viewer-stage{aspect-ratio:auto;min-height:130px}}
}
/* Dark, quiet media surfaces share the blue undertone in either page theme. */
:root {
  --media-bg: #20262c;
  --media-text: #edf2f6;
  --media-border: #3c4650;
  --media-control: #303a43;
}

@layer system {
  .workspace-header .rail-wordmark { font: 400 28px/1.2 var(--font-display); letter-spacing: -.025em; }
  .auth-eyebrow { font: 400 34px/1.2 var(--font-display); letter-spacing: -.025em; }
  :root[data-rail-collapsed] .workspace-header .rail-brand { display: none; }
  .btn:disabled { opacity: 1; transition: none; cursor: not-allowed; }
  .btn-primary:disabled { background: var(--surface); border-color: var(--border); color: var(--text-sec) !important; }
  .btn-primary:disabled .icon, .btn-primary:disabled svg { color: var(--text-sec) !important; }
  #modal-business-account button:disabled { transition: none; }
}

@layer system {
:root { --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3c8dd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-theme="light"] { --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f6f88' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
}

@layer system {
  #modal-changelog { padding:16px; align-items:center; justify-content:center; background:var(--scrim); }
  #modal-changelog:not(.hidden) { display:flex; }
  #modal-changelog.hidden { display:none; }
  #modal-changelog .updates-dialog { display:flex; flex-direction:column; align-items:stretch; width:min(760px,100%); max-width:760px; height:auto; max-height:calc(var(--viewport-height) - 32px); min-height:0; margin:0; padding:0; gap:0; background:var(--surface); color:var(--text-main); border:1px solid var(--border); border-radius:18px; overflow:hidden; transform:none; transition:none; }
  #modal-changelog .updates-dialog::before { display:none; content:none; }
  #modal-changelog .updates-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px; border-bottom:1px solid var(--border); flex-shrink:0; }
  #modal-changelog .updates-header h2 { margin:0; font:400 30px/1.2 var(--font-display); letter-spacing:-.025em; }
  #modal-changelog .updates-caption { margin:8px 0 0; font:400 12px/1.5 var(--font); color:var(--text-sec); }
  #modal-changelog .updates-header .btn-icon { width:36px; height:36px; min-width:36px; padding:8px; }
  #modal-changelog .updates-layout { display:grid; grid-template-columns:190px minmax(0,1fr); min-height:0; flex:1 1 auto; overflow:hidden; }
  #modal-changelog .updates-nav { display:flex; flex-direction:column; gap:6px; margin:0; padding:16px; background:var(--bg-body); border-right:1px solid var(--border); }
  #modal-changelog .cl-dot { display:block; width:100%; height:auto; min-height:44px; padding:10px 12px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--text-sec); font:500 13px/1.4 var(--font); text-align:left; cursor:pointer; transition:none; }
  #modal-changelog .cl-dot:hover { background:var(--hover); color:var(--text-main); }
  #modal-changelog .cl-dot[aria-selected="true"] { background:var(--accent-subtle); color:var(--accent-text); border-color:var(--accent-border); }
  #modal-changelog .updates-nav-short { display:none; }
  #modal-changelog .updates-content { position:relative; width:auto; min-width:0; min-height:0; margin:0; padding:28px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
  #modal-changelog .cl-slide { position:static; inset:auto; display:block; min-height:0; padding:0; opacity:1; visibility:visible; transform:none; transition:none; text-align:left; }
  #modal-changelog .cl-slide[hidden] { display:none; }
  #modal-changelog .updates-section-label { display:block; margin:0 0 14px; color:var(--text-muted); font:500 11px/1.5 var(--font); }
  #modal-changelog .cl-title { margin:0 0 16px; color:var(--text-main); font:400 28px/1.22 var(--font-display); letter-spacing:-.025em; text-wrap:balance; overflow-wrap:anywhere; }
  #modal-changelog .cl-desc { margin:0; color:var(--text-sec); font:400 14px/1.75 var(--font); max-width:none; text-align:left; overflow-wrap:anywhere; }
  #modal-changelog .updates-controls { display:flex; align-items:center; justify-content:space-between; width:100%; margin:0; padding:16px 24px; gap:8px; flex-shrink:0; border-top:1px solid var(--border); background:var(--surface); }
  #modal-changelog .updates-step-actions { display:flex; gap:8px; }
  #modal-changelog .updates-controls .btn { width:auto; min-width:0; min-height:42px; padding:10px 14px; font-size:13px; }
  #modal-changelog .updates-controls #cl-next-btn { min-width:88px; }
  #modal-changelog .cl-slide:focus { outline:none; }
  #modal-changelog .cl-slide:focus-visible { outline:2px solid var(--primary); outline-offset:5px; border-radius:4px; }
  @media(max-width:600px) {
    #modal-changelog .updates-header { padding:20px; gap:8px; }
    #modal-changelog .updates-header h2 { font-size:28px; }
    #modal-changelog .updates-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
    #modal-changelog .updates-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding:10px; border-right:0; border-bottom:1px solid var(--border); }
    #modal-changelog .cl-dot { min-height:42px; padding:8px 2px; font-size:12px; text-align:center; }
    #modal-changelog .updates-nav-name { display:none; }
    #modal-changelog .updates-nav-short { display:block; }
    #modal-changelog .updates-content { padding:20px; }
    #modal-changelog .cl-title { font-size:25px; }
    #modal-changelog .updates-controls { padding:12px 16px; }
    #modal-changelog .updates-controls .btn { padding-inline:10px; }
    #modal-changelog .updates-controls #cl-next-btn { min-width:76px; }
  }
}

@layer system {
  #modal-design-welcome { --primary:#486986; --primary-hover:#3f607c; --on-primary:#fff; --bg-body:#f5f6f5; --surface:#fbfcfc; --surface-raised:#fff; --text-main:#252c31; --text-sec:#65717b; --text-muted:#76818a; --border:#dbe1e5; --hover:#edf2f6; --accent-subtle:#eef6ff; --accent-text:#486986; --accent-border:#c1d3e5; --danger:#486986; color-scheme:light; color:var(--text-main); padding:20px; background:rgba(29,39,47,.34); align-items:center; justify-content:center; transition:none; }
  #modal-design-welcome.hidden { display:none; }
  #modal-design-welcome:not(.hidden) { display:flex; }
  #modal-design-welcome .welcome-dialog { width:min(1000px,100%); max-width:1000px; max-height:calc(var(--viewport-height) - 40px); min-height:0; display:flex; flex-direction:column; gap:0; margin:0; padding:0; border:1px solid var(--border); border-radius:22px; overflow:hidden; background:var(--surface); color:var(--text-main); transform:none; }
  #modal-design-welcome .welcome-header { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; padding:22px 28px; gap:16px; border-bottom:1px solid var(--border); }
  #modal-design-welcome .welcome-brand { font:400 27px/1 var(--font-display); letter-spacing:-.025em; }
  #modal-design-welcome .welcome-header-actions { display:flex; align-items:center; gap:16px; }
  #modal-design-welcome .welcome-step-count { color:var(--text-sec); font-size:12px; }
  #modal-design-welcome .welcome-header .btn-icon { width:36px; height:36px; padding:8px; }
  #modal-design-welcome .welcome-body { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
  #modal-design-welcome .welcome-step { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:40px; padding:32px; }
  #modal-design-welcome .welcome-step[hidden] { display:none; }
  #modal-design-welcome .welcome-intro { min-width:0; }
  #modal-design-welcome .welcome-art { width:126px; height:126px; margin:0 0 16px; }
  #modal-design-welcome .welcome-art svg { display:block; width:100%; height:100%; }
  #modal-design-welcome #welcome-step-2 .welcome-art { width:104px; height:104px; }
  #modal-design-welcome .welcome-eyebrow { display:inline-flex; align-items:center; gap:6px; margin:0 0 16px; padding:5px 9px; background:var(--accent-subtle); color:var(--accent-text); border:1px solid var(--accent-border); border-radius:6px; font:500 11px/1.4 var(--font); }
  #modal-design-welcome .welcome-title { margin:0 0 14px; text-align:left; color:var(--text-main); font:400 38px/1.12 var(--font-display); letter-spacing:-.035em; text-wrap:balance; overflow-wrap:anywhere; }
  #modal-design-welcome .welcome-description { margin:0; color:var(--text-sec); font:400 14px/1.7 var(--font); max-width:37ch; text-align:left; }
  #modal-design-welcome .welcome-features { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; }
  #modal-design-welcome .welcome-features li { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-sec); }
  #modal-design-welcome .welcome-features svg { width:17px; height:17px; color:var(--primary); flex-shrink:0; }
  #modal-design-welcome .welcome-settings { min-width:0; }
  #modal-design-welcome .welcome-settings h3 { margin:0 0 7px; color:var(--text-main); text-align:left; font:400 25px/1.25 var(--font-display); letter-spacing:-.02em; }
  #modal-design-welcome .welcome-help { margin:0 0 20px; color:var(--text-sec); font:400 13px/1.65 var(--font); text-align:left; }
  #modal-design-welcome .welcome-theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0; padding:0; border:0; }
  #modal-design-welcome .welcome-choice { position:relative; display:flex; flex-direction:column; gap:9px; min-width:0; min-height:44px; padding:9px; border:1px solid var(--border); border-radius:11px; background:white; cursor:pointer; color:var(--text-main); }
  #modal-design-welcome .welcome-choice:has(input:checked) { border-color:var(--primary); background:var(--accent-subtle); box-shadow:0 0 0 1px var(--primary); }
  #modal-design-welcome .welcome-choice:has(input:focus-visible) { outline:2px solid var(--primary); outline-offset:3px; }
  #modal-design-welcome .welcome-choice:has(input:disabled) { cursor:wait; }
  #modal-design-welcome .welcome-choice input { position:absolute; opacity:0; width:1px; height:1px; min-height:0; margin:0; padding:0; }
  #modal-design-welcome .welcome-choice-label { display:flex; align-items:center; justify-content:space-between; gap:4px; font:500 12px/1.4 var(--font); }
  #modal-design-welcome .welcome-choice-label svg { opacity:0; width:15px; height:15px; flex-shrink:0; color:var(--primary); }
  #modal-design-welcome .welcome-choice:has(input:checked) .welcome-choice-label svg { opacity:1; }
  #modal-design-welcome .welcome-swatch { display:grid; grid-template-columns:20% 1fr; gap:6px; height:50px; padding:7px; border-radius:5px; background:var(--preview-bg); border:1px solid var(--preview-line); }
  #modal-design-welcome .welcome-swatch::before { content:""; background:var(--preview-side); border-radius:3px; }
  #modal-design-welcome .welcome-swatch-lines { display:flex; flex-direction:column; justify-content:center; gap:5px; }
  #modal-design-welcome .welcome-swatch-lines::before,#modal-design-welcome .welcome-swatch-lines::after { content:""; width:75%; height:9px; border-radius:4px; background:var(--preview-in); border:1px solid var(--preview-line); }
  #modal-design-welcome .welcome-swatch-lines::after { width:60%; background:var(--preview-out); align-self:flex-end; }
  #modal-design-welcome [data-preview-theme] { --preview-bg:#f5f6f5; --preview-side:#e6e9e7; --preview-in:#fff; --preview-out:#dce9f6; --preview-text:#252c31; --preview-sec:#65717b; --preview-line:#dbe1e5; }
  #modal-design-welcome [data-preview-theme="dark"] { --preview-bg:#232425; --preview-side:#2b2d2e; --preview-in:#303438; --preview-out:#374b5e; --preview-text:#eceff2; --preview-sec:#aeb9c4; --preview-line:#3c454d; }
  #modal-design-welcome [data-preview-theme="neon"] { --preview-bg:#1b2229; --preview-side:#25303b; --preview-in:#27323e; --preview-out:#385773; --preview-text:#e8f0f7; --preview-sec:#b0c0cf; --preview-line:#394a59; }
  #modal-design-welcome [data-preview-theme="love"] { --preview-bg:#292a2e; --preview-side:#32353b; --preview-in:#363a43; --preview-out:#4b5f79; --preview-text:#eef0f6; --preview-sec:#bbc2ce; --preview-line:#454b57; }
  #modal-design-welcome [data-preview-theme="forest"] { --preview-bg:#22282b; --preview-side:#2b353a; --preview-in:#303d45; --preview-out:#436073; --preview-text:#e8eff1; --preview-sec:#b5c4ca; --preview-line:#3d4d57; }
  #modal-design-welcome [data-preview-theme="sunset"] { --preview-bg:#292d31; --preview-side:#333b43; --preview-in:#38434e; --preview-out:#516f87; --preview-text:#edf1f5; --preview-sec:#c0cbd5; --preview-line:#475766; }
  #modal-design-welcome .welcome-recommended { margin:12px 0 0; color:var(--text-sec); font-size:12px; line-height:1.6; text-align:left; }
  #modal-design-welcome .welcome-preview { margin-top:26px; border:1px solid var(--preview-line); border-radius:13px; background:var(--preview-bg); color:var(--preview-text); overflow:hidden; }
  #modal-design-welcome .welcome-preview-header { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--preview-line); color:var(--preview-text); font-size:12px; }
  #modal-design-welcome .welcome-preview-avatar { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:var(--preview-out); font-size:10px; }
  #modal-design-welcome .welcome-preview-online { margin-left:auto; color:var(--preview-sec); font-size:10px; }
  #modal-design-welcome .welcome-preview-messages { display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:15px 14px; }
  #modal-design-welcome .welcome-preview-bubble { padding:9px 12px; max-width:92%; background:var(--preview-in); border:1px solid var(--preview-line); border-radius:13px; font-size:var(--welcome-preview-font,14px); line-height:1.5; overflow-wrap:anywhere; }
  #modal-design-welcome .welcome-preview-bubble.own { align-self:flex-end; background:var(--preview-out); }
  #modal-design-welcome [data-preview-bubble="classic"] .welcome-preview-bubble { border-radius:7px; }
  #modal-design-welcome [data-preview-bubble="compact"] .welcome-preview-bubble { padding:6px 10px; border-radius:9px; }
  #modal-design-welcome .welcome-preview-composer { display:flex; align-items:center; gap:9px; margin:0 12px 12px; padding:8px 10px; border:1px solid var(--preview-line); border-radius:10px; background:var(--preview-in); color:var(--preview-sec); font-size:11px; }
  #modal-design-welcome .welcome-preview-composer svg { width:15px; height:15px; flex-shrink:0; }
  #modal-design-welcome .welcome-preview-composer svg:last-child { margin-left:auto; color:var(--preview-text); }
  #modal-design-welcome .welcome-fieldset { margin:0 0 23px; padding:0; border:0; min-width:0; }
  #modal-design-welcome .welcome-fieldset legend,#modal-design-welcome .welcome-field-label { display:block; margin:0 0 10px; color:var(--text-main); font:500 13px/1.5 var(--font); }
  #modal-design-welcome .welcome-font-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
  #modal-design-welcome .welcome-font-heading output { color:var(--primary); font-size:13px; font-variant-numeric:tabular-nums; }
  #modal-design-welcome .welcome-font-heading label { margin:0; }
  #modal-design-welcome input[type="range"] { width:100%; height:28px; min-height:28px; margin:0; padding:0; accent-color:var(--primary); cursor:pointer; }
  #modal-design-welcome .welcome-range-labels { display:flex; justify-content:space-between; color:var(--text-muted); font-size:11px; margin-top:4px; }
  #modal-design-welcome .welcome-bubble-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
  #modal-design-welcome .welcome-bubble-grid .welcome-choice { justify-content:center; padding:10px; border-radius:8px; }
  #modal-design-welcome .welcome-switch { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:54px; cursor:pointer; padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:0 0 23px; }
  #modal-design-welcome .welcome-switch strong { display:block; font:500 13px/1.5 var(--font); }
  #modal-design-welcome .welcome-switch small { display:block; margin-top:3px; color:var(--text-sec); font:400 12px/1.55 var(--font); }
  #modal-design-welcome .welcome-switch input { width:19px; height:19px; min-height:19px; margin:0; padding:0; flex-shrink:0; accent-color:var(--primary); }
  #modal-design-welcome .welcome-field select { width:100%; min-height:44px; border:1px solid var(--border); border-radius:9px; padding:10px 36px 10px 12px; background-color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2365717b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position:right 12px center; background-repeat:no-repeat; background-size:14px; color:var(--text-main); font-size:13px; text-align:left; }
  #modal-design-welcome .welcome-field .welcome-help { margin:8px 0 0; font-size:12px; }
  #modal-design-welcome .welcome-footer { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:16px; padding:18px 28px; border-top:1px solid var(--border); background:white; }
  #modal-design-welcome .welcome-footer-note { margin:0; color:var(--text-sec); font:400 12px/1.55 var(--font); max-width:38ch; text-align:left; }
  #modal-design-welcome .welcome-footer-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  #modal-design-welcome .welcome-footer .btn { min-height:44px; min-width:0; padding:10px 15px; font-size:13px; white-space:normal; }
  #modal-design-welcome .welcome-footer .btn-primary { background:var(--primary); color:#fff; border:1px solid var(--primary); }
  #modal-design-welcome .welcome-footer .btn-primary:hover { background:var(--primary-hover); }
  #modal-design-welcome .welcome-footer .btn-ghost { background:transparent; color:var(--primary); border:1px solid transparent; }
  #modal-design-welcome .welcome-error { margin:0; padding:12px 28px; border-top:1px solid var(--accent-border); background:var(--accent-subtle); color:var(--accent-text); text-align:left; font:400 13px/1.6 var(--font); flex-shrink:0; }
  #modal-design-welcome .welcome-error[hidden] { display:none; }
  #modal-design-welcome :is(button,input,select):focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
  #modal-changelog .cl-title { text-align:left; }
  @media(max-width:760px) {
    #modal-design-welcome { padding:12px; }
    #modal-design-welcome .welcome-dialog { max-height:calc(var(--viewport-height) - 24px); border-radius:18px; }
    #modal-design-welcome .welcome-header { padding:18px 20px; }
    #modal-design-welcome .welcome-step { grid-template-columns:minmax(0,1fr); padding:24px; gap:25px; }
    #modal-design-welcome .welcome-intro { text-align:center; }
    #modal-design-welcome .welcome-art { width:88px; height:88px; margin:0 auto 10px; }
    #modal-design-welcome #welcome-step-2 .welcome-art { width:64px; height:64px; margin-bottom:10px; }
    #modal-design-welcome .welcome-eyebrow { margin-bottom:10px; }
    #modal-design-welcome .welcome-title { font-size:31px; max-width:none; text-align:center; margin-bottom:10px; }
    #modal-design-welcome .welcome-description { max-width:40ch; margin-inline:auto; font-size:13px; line-height:1.6; text-align:center; }
    #modal-design-welcome #welcome-preview-1,#modal-design-welcome .welcome-features { display:none; }
    #modal-design-welcome #welcome-step-1 .welcome-settings>.welcome-help { display:none; }
    #modal-design-welcome #welcome-step-1 .welcome-settings h3 { font-family:var(--font); font-size:14px; font-weight:500; margin-bottom:12px; }
    #modal-design-welcome #welcome-preview-2 .welcome-preview-header,#modal-design-welcome #welcome-preview-2 .welcome-preview-composer { display:none; }
    #modal-design-welcome .welcome-preview { margin-top:20px; }
    #modal-design-welcome .welcome-footer { padding:14px 20px; align-items:stretch; flex-direction:column; gap:9px; }
    #modal-design-welcome .welcome-footer-note { max-width:none; font-size:11px; }
    #modal-design-welcome .welcome-footer-actions { width:100%; justify-content:space-between; }
    #modal-design-welcome .welcome-footer-actions .btn-primary { flex:1; max-width:240px; }
    #modal-design-welcome .welcome-error { padding:10px 20px; }
  }
  @media(max-width:380px) {
    #modal-design-welcome .welcome-step { padding:20px; gap:22px; }
    #modal-design-welcome .welcome-header { padding:16px; }
    #modal-design-welcome .welcome-brand { font-size:25px; }
    #modal-design-welcome .welcome-header-actions { gap:8px; }
    #modal-design-welcome .welcome-title { font-size:28px; }
    #modal-design-welcome .welcome-art { width:76px; height:76px; }
    #modal-design-welcome .welcome-theme-grid { gap:8px; }
    #modal-design-welcome .welcome-choice { padding:7px; }
    #modal-design-welcome .welcome-choice-label { font-size:11px; }
    #modal-design-welcome .welcome-swatch { height:42px; padding:5px; }
    #modal-design-welcome .welcome-footer { padding:12px 16px; }
    #modal-design-welcome .welcome-footer .btn { font-size:12px; padding:9px 10px; }
    #modal-design-welcome .welcome-bubble-grid { gap:6px; }
    #modal-design-welcome .welcome-bubble-grid .welcome-choice { padding:9px 6px; }
  }
}
@layer system {
  :root { --check-blue:#a4bdd1; --check-ice:#c1d3e5; --check-deep:#97b6cf; --check-slate:#a6b6c3; --check-mist:#b1c8da; --check-steel:#9bb7cb; --check-grey:#bbc6ce; --check-on-dark:#263b4c; }
  :root[data-theme='light'] { --check-blue:#486986; --check-ice:#a4bdd1; --check-deep:#456782; --check-slate:#687b8c; --check-mist:#7596af; --check-steel:#536f87; --check-grey:#9ba9b5; --check-on-dark:#fff; }
  .check-color-row { gap:6px; }
  .check-color-swatch { width:40px; height:40px; padding:6px; display:grid; place-items:center; background:transparent; border:1px solid transparent; border-radius:9px; }
  .check-color-swatch:hover { background:var(--hover); }
  .check-color-swatch.active { border-color:var(--accent-border); background:var(--accent-subtle); }
  .check-color-dot { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--check-color); border:1px solid var(--border); color:var(--check-ink); }
  .check-color-dot svg { width:17px; height:17px; opacity:0; }
  .check-color-swatch[aria-pressed="true"] svg { opacity:1; }
  .check-color-swatch:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
  .check-color-swatch:disabled,.check-shape-btn:disabled { opacity:.65; cursor:wait; }
}
@layer system {
  :is(.avatar,.chat-item-avatar,.msg-avatar,.premium-avatar-wrap,.premium-avatar-ring,.story-avatar,.story-avatar-wrap,.calls-item-avatar,.call-avatar-wrap,.incoming-avatar-wrap,.menu-avatar-large,.profile-ios-avatar,.blacklist-user-avatar,.account-identity-avatar,.forward-avatar,.fwd-avatar,.birthday-recipient-avatar,.thread-comment-avatar,.react-avatars,.ad-chat-avatar,.msg-ad-avatar,.onb-avatar-button,.onb-avatar-preview,.window-create-avatar,.rail-profile) img,
  img:is(.avatar,.window-person-avatar,.poll-voter-avatar,.call-avatar-img,.call-mini-avatar,.incoming-avatar,.thread-comment-avatar,.story-avatar,.sys-avatar-prev),
  #ptn-avatar,#menu-avatar-bg,#my-avatar,#onb-preview-img,#head-avatar,#call-avatar-img,#incoming-avatar,#inc-avatar,#call-mini-avatar {
    filter:none; opacity:1; mix-blend-mode:normal;
  }
  .calls-item-avatar:disabled { opacity:1; }
}
@layer system {
  #modal-forward { background:var(--scrim); padding:16px; }
  #modal-forward .forward-dialog { display:flex; flex-direction:column; width:min(560px,100%); height:min(700px,calc(var(--viewport-height) - 32px)); max-height:calc(var(--viewport-height) - 32px); padding:0; border:1px solid var(--border); border-radius:18px; background:var(--bg-body); overflow:hidden; text-align:left; }
  #modal-forward .forward-dialog-header { display:flex; align-items:flex-start; gap:16px; padding:22px 24px 18px; border-bottom:1px solid var(--border-subtle); flex-shrink:0; }
  #modal-forward .forward-dialog-header>div { flex:1; min-width:0; }
  #modal-forward .forward-dialog-header h2 { margin:0; font:400 27px/1.2 var(--font-display); text-align:left; }
  #modal-forward .forward-dialog-header p { margin:7px 0 0; color:var(--text-sec); font-size:12px; text-align:left; }
  #modal-forward .forward-dialog-header>.btn { flex:0 0 44px; width:44px; height:44px; min-height:44px; }
  #modal-forward #fwd-list { display:flex; flex:1; flex-direction:column; gap:0; min-height:0; max-height:none; padding:0; overflow:hidden; }
  #modal-forward .forward-preview { flex-shrink:0; display:flex; gap:12px; margin:16px 24px 12px; padding:12px 14px; border:1px solid var(--accent-border); border-radius:11px; background:var(--accent-subtle); }
  #modal-forward .forward-preview>.icon { flex:0 0 19px; width:19px; height:19px; margin-top:2px; color:var(--accent-text); }
  #modal-forward .forward-preview-copy { min-width:0; }
  #modal-forward .forward-preview .discussion-eyebrow { color:var(--accent-text); font-size:11px; letter-spacing:0; text-transform:none; }
  #modal-forward .forward-preview p { margin:4px 0 0; font-size:12px; line-height:1.5; -webkit-line-clamp:2; }
  #modal-forward .forward-tools { flex-shrink:0; padding:0 24px 12px; border-bottom:1px solid var(--border-subtle); }
  #modal-forward .forward-search-field { display:flex; align-items:center; gap:9px; min-width:0; height:44px; padding:0 11px; border:1px solid var(--border); border-radius:10px; background:var(--surface-raised); }
  #modal-forward .forward-search-field:focus-within { border-color:var(--primary); outline:2px solid var(--accent-subtle); outline-offset:1px; }
  #modal-forward .forward-search-field>.icon { flex:0 0 18px; width:18px; height:18px; color:var(--text-sec); }
  #modal-forward .forward-search { flex:1; min-width:0; width:100%; height:42px; min-height:0; margin:0; padding:0; border:0; border-radius:0; outline:0; box-shadow:none; background:transparent; color:var(--text-main); font-size:14px; }
  #modal-forward .forward-search::-webkit-search-cancel-button { appearance:none; }
  #modal-forward .forward-search-clear { width:28px; height:28px; min-height:28px; padding:5px; flex:0 0 28px; }
  #modal-forward .forward-search-clear[hidden] { display:none; }
  #modal-forward .forward-filters { display:flex; gap:4px; margin-top:10px; }
  #modal-forward .forward-filter { display:flex; align-items:center; justify-content:center; gap:5px; flex:1; min-width:0; min-height:36px; padding:6px 8px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--text-sec); font:inherit; font-size:12px; white-space:nowrap; }
  #modal-forward .forward-filter[aria-pressed='true'] { border-color:var(--accent-border); background:var(--accent-subtle); color:var(--accent-text); }
  #modal-forward .forward-filter-count { color:var(--text-muted); font-size:10px; font-variant-numeric:tabular-nums; }
  #modal-forward .forward-recipients { display:flex; flex:1; flex-direction:column; gap:3px; min-height:0; overflow:auto; overscroll-behavior:contain; padding:8px 14px 14px; }
  #modal-forward .forward-group-heading { flex-shrink:0; margin:10px 10px 4px; color:var(--text-muted); font:500 11px/1.5 var(--font); letter-spacing:0; text-align:left; }
  #modal-forward .forward-recipient { flex-shrink:0; min-height:64px; gap:12px; padding:10px; border-radius:11px; }
  #modal-forward .forward-avatar { width:42px; height:42px; border-radius:14px; filter:none; opacity:1; }
  #modal-forward .forward-recipient-copy strong { font-size:14px; font-weight:500; }
  #modal-forward .forward-recipient-copy>span { font-size:11px; }
  #modal-forward .forward-recipient:disabled { opacity:1; color:var(--text-muted); cursor:default; }
  #modal-forward .forward-recipient:disabled:hover { background:transparent; }
  #modal-forward .forward-recipient[aria-busy='true'] { background:var(--accent-subtle); }
  #modal-forward .forward-dialog-footer { display:flex; align-items:center; gap:12px; flex-shrink:0; padding:12px 24px; border-top:1px solid var(--border-subtle); }
  #modal-forward #forward-count { flex:1; min-width:0; font-size:11px; color:var(--text-sec); overflow-wrap:anywhere; }
  #modal-forward .forward-dialog-footer .btn { min-height:38px; }
  #modal-forward .forward-error { flex-shrink:0; margin:0; padding:10px 24px; background:var(--accent-subtle); color:var(--accent-text); font-size:12px; overflow-wrap:anywhere; }
  #modal-forward .story-share-actions { display:flex; flex-shrink:0; gap:8px; padding:14px 24px 0; }
  #modal-forward .story-share-actions>.btn { flex:1; min-width:0; }
  #modal-forward .list-state { padding:28px 14px; }
  #modal-forward .list-state h3 { font-size:20px; }
  #modal-partner #ptn-media-tabs { gap:5px; padding-bottom:12px; scroll-padding-inline:4px; }
  #modal-partner .media-tab-pill { display:flex; align-items:center; gap:6px; min-height:44px; padding:7px 10px; border-color:transparent; border-radius:9px; }
  #modal-partner .media-tab-pill[aria-selected='true'] { border-color:var(--accent-border); background:var(--accent-subtle); color:var(--accent-text); }
  #modal-partner .media-tab-pill>.icon { width:16px; height:16px; }
  #modal-partner .media-tab-count { font-size:10px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
  #modal-partner #ptn-media-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; }
  #modal-partner #ptn-media-summary strong { font-size:12px; font-weight:500; }
  #modal-partner #ptn-media-summary span { font-size:11px; color:var(--text-muted); }
  #modal-partner #ptn-media-grid>.window-list-state { grid-column:1/-1; }
  #modal-partner .window-media-item:focus-visible { outline:2px solid var(--primary); outline-offset:-3px; }
  #modal-partner .window-media-file-list .window-media-item { justify-content:flex-start; padding:12px 8px; gap:11px; border-radius:9px; min-height:64px; }
  #modal-partner .window-media-file-list .window-media-item:hover { background:var(--hover); }
  #modal-partner .window-media-file-icon { width:40px; height:40px; border:1px solid var(--accent-border); border-radius:11px; background:var(--accent-subtle); color:var(--accent-text); }
  #modal-partner .window-media-file-list .window-person-copy { flex:1; min-width:0; }
  #modal-partner .window-media-file-list .window-person-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
  #modal-partner .window-media-file-list .window-person-copy small { font-size:11px; }
  @media (max-width:600px) {
    #modal-forward { padding:10px; }
    #modal-forward .forward-dialog { height:min(740px,calc(var(--viewport-height) - 20px)); max-height:calc(var(--viewport-height) - 20px); border-radius:16px; }
    #modal-forward .forward-dialog-header { padding:18px 16px 14px; gap:10px; }
    #modal-forward .forward-dialog-header h2 { font-size:24px; }
    #modal-forward .forward-preview { margin:12px 16px 10px; padding:10px 12px; }
    #modal-forward .forward-tools { padding:0 16px 10px; }
    #modal-forward .forward-search { font-size:16px; }
    #modal-forward .forward-recipients { padding:6px 6px 12px; }
    #modal-forward .forward-dialog-footer { padding:10px 16px; }
    #modal-forward .forward-filter { font-size:11px; padding-inline:4px; gap:4px; }
    #modal-forward .forward-error { padding:10px 16px; }
    #modal-forward .story-share-actions { padding:12px 16px 0; }
  }
  @media (max-height:520px) {
    #modal-forward .forward-preview { display:none; }
    #modal-forward .forward-dialog-header { padding-block:12px; }
    #modal-forward .forward-dialog-header p { display:none; }
    #modal-forward .forward-tools { padding-top:10px; }
  }
}
@layer system {
  #modal-settings-profile .profile-identity { display:grid; grid-template-columns:72px minmax(0,1fr); gap:16px; padding:0 0 22px; border-bottom:1px solid var(--border-subtle); text-align:left; }
  #modal-settings-profile .profile-identity .account-identity-avatar { width:72px; height:72px; border-radius:22px; }
  #modal-settings-profile .profile-identity #set-avatar { border-radius:22px; filter:none; opacity:1; }
  #modal-settings-profile .profile-photo-trigger { position:absolute; inset:0; display:grid; place-items:center; width:100%; height:100%; padding:0; border:0; border-radius:22px; background:transparent; }
  #modal-settings-profile .profile-photo-trigger .icon { position:absolute; width:28px; height:28px; right:-4px; bottom:-4px; padding:6px; border:2px solid var(--bg-body); border-radius:9px; background:var(--primary); color:var(--on-primary); }
  #modal-settings-profile .profile-identity-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; min-width:0; }
  #modal-settings-profile #profile-identity-name { max-width:100%; color:var(--text-main); font:400 22px/1.25 var(--font-display); overflow-wrap:anywhere; }
  #modal-settings-profile #profile-identity-address { color:var(--text-sec); font-size:12px; overflow-wrap:anywhere; }
  #modal-settings-profile .profile-photo-action { min-height:32px; padding:3px 0; border:0; background:transparent; color:var(--accent-text); font:inherit; font-size:12px; text-align:left; }
  #modal-settings-profile .profile-photo-action:disabled { opacity:.65; }
  #modal-settings-profile .profile-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; padding:0; border:0; background:transparent; }
  #modal-settings-profile .profile-field { display:flex; flex-direction:column; gap:7px; min-width:0; margin:0; color:var(--text-main); font-size:12px; text-align:left; }
  #modal-settings-profile .profile-field :is(input,textarea) { width:100%; min-width:0; max-width:100%; min-height:42px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-raised); color:var(--text-main); font:400 14px/1.5 var(--font); text-align:left; }
  #modal-settings-profile .profile-field textarea { min-height:94px; resize:vertical; }
  #modal-settings-profile .profile-field small { color:var(--text-muted); font-size:11px; line-height:1.45; }
  #modal-settings-profile .profile-field-wide { grid-column:1/-1; }
  #modal-settings-profile .profile-id-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; color:var(--text-sec); font-size:12px; }
  #modal-settings-profile #set-numeric-id { overflow-wrap:anywhere; font-variant-numeric:tabular-nums; color:var(--text-main); }
  #modal-settings-profile .profile-device-link { display:flex; align-items:center; gap:12px; width:100%; padding:12px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text-main); text-align:left; }
  #modal-settings-profile .profile-device-link>.icon:first-child { flex:0 0 21px; width:21px; height:21px; color:var(--accent-text); }
  #modal-settings-profile .profile-device-link>span { flex:1; min-width:0; }
  #modal-settings-profile .profile-device-link strong { display:block; font:500 13px/1.45 var(--font); }
  #modal-settings-profile .profile-device-link small { display:block; margin-top:3px; color:var(--text-sec); font-size:11px; line-height:1.5; }
  #modal-settings-profile .profile-save-footer { display:flex; align-items:center; gap:12px; }
  #modal-settings-profile #profile-save-error { flex:1; min-width:0; margin:0; color:var(--accent-text); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
  #modal-settings-profile #profile-save-error[hidden] { display:none; }
  #modal-devices .session-intro { margin:0 0 18px; font-size:13px; line-height:1.6; color:var(--text-sec); text-align:left; }
  #modal-devices .session-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:22px; }
  #modal-devices .session-overview-item { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; padding:13px 14px; border:1px solid var(--border); border-radius:11px; background:var(--surface); }
  #modal-devices .session-overview-item span { min-width:0; font-size:12px; color:var(--text-sec); }
  #modal-devices .session-overview-item strong { font:400 25px/1 var(--font-display); color:var(--text-main); }
  #modal-devices .session-section-heading { display:flex; align-items:center; gap:12px; margin:20px 0 10px; }
  #modal-devices .session-section-heading h4 { flex:1; margin:0; font:500 12px/1.5 var(--font); text-align:left; }
  #modal-devices .session-section-heading .btn { min-height:36px; padding:6px 10px; font-size:11px; }
  #modal-devices .window-session-card { grid-template-columns:42px minmax(0,1fr); gap:12px; margin-bottom:10px; padding:16px; border:1px solid var(--border); border-radius:13px; background:var(--surface); }
  #modal-devices .window-session-card.is-current { border-color:var(--accent-border); background:var(--accent-subtle); }
  #modal-devices .window-device-icon { width:42px; height:42px; border-radius:12px; background:var(--surface-raised); border-color:var(--border); color:var(--accent-text); }
  #modal-devices .window-session-copy { gap:6px; }
  #modal-devices .window-session-copy h4 { font-size:14px; line-height:1.4; text-align:left; }
  #modal-devices .window-session-copy p { font-size:12px; }
  #modal-devices .session-metadata { display:flex; flex-wrap:wrap; gap:5px 12px; min-width:0; }
  #modal-devices .session-metadata span { color:var(--text-muted); font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
  #modal-devices .window-session-revoke { grid-column:2; justify-self:start; min-height:38px; margin-top:2px; padding:7px 11px; border:1px solid var(--border); border-radius:8px; font-size:11px; }
  #modal-devices .session-actions { align-items:center; justify-content:space-between; gap:14px; }
  #modal-devices .session-actions[hidden] { display:none; }
  #modal-devices #session-other-count { min-width:0; font-size:11px; color:var(--text-sec); }
  #modal-devices .session-actions .btn { min-height:40px; white-space:normal; text-align:center; font-size:12px; }
  :is(#modal-revoke-session,#modal-revoke-all-sessions) .session-confirm-dialog { width:min(480px,100%); text-align:left; }
  :is(#modal-revoke-session,#modal-revoke-all-sessions) .window-dialog-header h3 { flex:1; min-width:0; margin:0; font:400 26px/1.2 var(--font-display); text-align:left; }
  :is(#modal-revoke-session,#modal-revoke-all-sessions) .session-confirm-copy { margin:0 0 16px; color:var(--text-sec); font-size:13px; line-height:1.6; text-align:left; }
  .session-confirm-device { display:flex; align-items:flex-start; gap:12px; padding:14px; border:1px solid var(--accent-border); border-radius:12px; background:var(--accent-subtle); }
  .session-confirm-device>.icon { flex:0 0 23px; width:23px; height:23px; margin-top:2px; color:var(--accent-text); }
  .session-confirm-device>div { display:flex; flex-direction:column; gap:5px; min-width:0; }
  .session-confirm-device strong { color:var(--text-main); font-size:13px; font-weight:500; overflow-wrap:anywhere; }
  .session-confirm-device span { color:var(--text-sec); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
  .session-confirm-error { margin:14px 0 0; color:var(--accent-text); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
  .session-confirm-error[hidden] { display:none; }
  :is(#modal-revoke-session,#modal-revoke-all-sessions) .dialog-actions { display:flex; flex-direction:row; justify-content:flex-end; gap:8px; }
  :is(#modal-revoke-session,#modal-revoke-all-sessions) .dialog-actions>.btn { width:auto; min-height:44px; padding:10px 14px; }
  #modal-group-info #grp-part-list { max-height:none; overflow:visible; padding:0; background:transparent; border:0; }
  #modal-group-info .group-member-heading { display:flex; align-items:center; gap:9px; margin:24px 0 12px; padding:0; }
  #modal-group-info .group-member-heading h3 { margin:0; font:500 13px/1.4 var(--font); text-align:left; }
  #modal-group-info #grp-part-count { padding:3px 7px; border:1px solid var(--border); border-radius:7px; color:var(--text-muted); font-size:11px; font-variant-numeric:tabular-nums; }
  #modal-group-info .group-exit-actions { margin-top:20px; }
  #modal-group-info .group-member-tools { margin:0 0 10px; padding:0; }
  #modal-group-info .group-member-search { display:flex; align-items:center; gap:8px; min-width:0; min-height:44px; padding:0 11px; border:1px solid var(--border); border-radius:10px; background:var(--surface-raised); }
  #modal-group-info .group-member-search:focus-within { border-color:var(--primary); outline:2px solid var(--accent-subtle); }
  #modal-group-info .group-member-search>.icon { width:17px; height:17px; flex:0 0 17px; color:var(--text-sec); }
  #modal-group-info .group-member-search input { flex:1; width:100%; min-width:0; min-height:42px; margin:0; padding:7px 0; border:0; outline:0; box-shadow:none; background:transparent; color:var(--text-main); font:400 14px/1.5 var(--font); }
  #modal-group-info .group-member-search input::-webkit-search-cancel-button { appearance:none; }
  #modal-group-info .group-member-search-clear { width:28px; height:28px; min-height:28px; padding:5px; }
  #modal-group-info .group-member-search-clear[hidden] { display:none; }
  #modal-group-info .group-member-filters { display:flex; flex-wrap:wrap; gap:5px; padding:10px 0 0; }
  #modal-group-info .group-member-filter { display:flex; align-items:center; gap:6px; min-height:36px; padding:6px 10px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--text-sec); font:inherit; font-size:11px; }
  #modal-group-info .group-member-filter[aria-pressed='true'] { border-color:var(--accent-border); background:var(--accent-subtle); color:var(--accent-text); }
  #modal-group-info .group-member-filter-count { font-size:10px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
  #modal-group-info .group-member-summary { margin:12px 0 6px; color:var(--text-muted); font-size:11px; text-align:left; }
  #modal-group-info .group-member-results { max-height:460px; overflow:auto; overscroll-behavior:contain; padding:0 4px 0 0; }
  #modal-group-info .window-member-row { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding:13px 0; border-bottom:1px solid var(--border-subtle); }
  #modal-group-info .window-member-row .window-person-button { width:100%; min-width:0; min-height:44px; gap:11px; }
  #modal-group-info .window-member-row .window-person-avatar { width:42px; height:42px; border-radius:14px; filter:none; opacity:1; }
  #modal-group-info .window-member-row .window-person-copy { flex:1; gap:4px; min-width:0; }
  #modal-group-info .group-member-name { display:flex; align-items:center; gap:7px; min-width:0; }
  #modal-group-info .group-member-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
  #modal-group-info .group-member-self { flex:0 0 auto; font-size:10px; color:var(--text-muted); }
  #modal-group-info .window-member-row .window-member-actions { margin:0 0 0 53px; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:7px; }
  #modal-group-info .window-member-actions>.btn { min-height:38px; padding:7px 10px; font-size:11px; }
  #modal-group-info .window-member-actions>.btn-icon { width:38px; height:38px; min-height:38px; padding:9px; }
  #modal-group-info .window-member-permission { min-height:38px; padding:6px 9px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font-size:11px; }
  #modal-group-info .window-member-permission input { flex:0 0 auto; accent-color:var(--primary); }
  #modal-group-info .group-member-error { margin:0 0 0 53px; color:var(--accent-text); font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
  #modal-group-info .window-more-members { width:100%; min-height:42px; margin-top:10px; border:1px solid var(--border); border-radius:9px; font-size:12px; }
  @media (min-width:800px) and (pointer:fine), (min-width:800px) and (min-height:501px), (min-width:800px) and (min-width:1025px) {
    #modal-group-info .window-member-row { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
    #modal-group-info .window-member-row .window-member-actions { margin:0; max-width:215px; justify-content:flex-end; }
    #modal-group-info .group-member-error { grid-column:1/-1; }
  }
  @media (max-width:600px) {
    #modal-settings-profile .profile-fields { grid-template-columns:minmax(0,1fr); gap:16px; }
    #modal-settings-profile .profile-field :is(input,textarea) { font-size:16px; }
    #modal-settings-profile .profile-identity { grid-template-columns:64px minmax(0,1fr); gap:13px; }
    #modal-settings-profile .profile-identity .account-identity-avatar { width:64px; height:64px; }
    #modal-settings-profile #profile-identity-name { font-size:21px; }
    #modal-settings-profile .profile-save-footer { flex-wrap:wrap; }
    #modal-settings-profile #profile-save-error { flex-basis:100%; }
    #modal-settings-profile .profile-save-footer .btn { width:100%; }
    #modal-devices .session-overview { gap:8px; }
    #modal-devices .session-overview-item { padding:11px; }
    #modal-devices .window-session-card { padding:13px 12px; gap:10px; }
    #modal-devices .session-actions { flex-wrap:wrap; gap:8px; }
    #modal-devices .session-actions .btn { flex:1; }
    #modal-group-info .group-member-search input { font-size:16px; }
    #modal-group-info .group-member-results { max-height:400px; }
    #modal-group-info .window-member-actions>.btn { min-height:44px; }
    #modal-group-info .window-member-actions>.btn-icon { width:44px; height:44px; min-height:44px; }
    #modal-group-info .window-member-permission { min-height:44px; }
  }
}
@layer system {
  :is(#join-requests-panel,#group-stats-panel,#modal-audit-log) { padding:16px; background:var(--scrim); z-index:5001; }
  :is(#join-requests-panel,#group-stats-panel,#modal-audit-log) .group-tool-dialog { display:flex; flex-direction:column; align-items:stretch; gap:0; width:min(720px,100%); height:min(760px,calc(var(--viewport-height) - 32px)); max-width:none; max-height:calc(var(--viewport-height) - 32px); padding:0; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--bg-body); text-align:left; }
  .group-tool-header { display:flex; align-items:center; gap:12px; flex:0 0 auto; padding:20px 22px 18px; border-bottom:1px solid var(--border-subtle); }
  .group-tool-header>div { flex:1; min-width:0; }
  .group-tool-header h2 { margin:0; font:400 28px/1.2 var(--font-display); text-align:left; }
  .group-tool-header p { margin:6px 0 0; color:var(--text-sec); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
  .group-tool-header>.btn-icon { flex:0 0 44px; width:44px; height:44px; min-height:44px; }
  .group-tool-toolbar { flex:0 0 auto; padding:14px 22px; border-bottom:1px solid var(--border-subtle); }
  .group-tool-search { display:flex; align-items:center; gap:9px; min-width:0; height:44px; padding:0 11px; border:1px solid var(--border); border-radius:10px; background:var(--surface-raised); }
  .group-tool-search:focus-within { border-color:var(--primary); outline:2px solid var(--accent-subtle); outline-offset:1px; }
  .group-tool-search>.icon { flex:0 0 18px; width:18px; height:18px; color:var(--text-sec); }
  .group-tool-search input { flex:1; min-width:0; width:100%; height:42px; min-height:0; margin:0; padding:7px 0; border:0; border-radius:0; outline:0; box-shadow:none; background:transparent; color:var(--text-main); font:400 14px/1.5 var(--font); text-align:left; }
  .group-tool-search input::-webkit-search-cancel-button { appearance:none; }
  .group-tool-search .group-tool-clear { flex:0 0 28px; width:28px; height:28px; min-height:28px; padding:5px; }
  .group-tool-clear[hidden] { display:none; }
  .group-tool-scroll { flex:1; min-height:0; padding:16px 22px 22px; overflow:auto; overscroll-behavior:contain; }
  #join-requests-list { display:flex; flex-direction:column; gap:10px; }
  .join-request-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px; border:1px solid var(--border); border-radius:13px; background:var(--surface); }
  .join-request-person { display:flex; align-items:center; gap:12px; min-width:0; width:100%; padding:0; border:0; background:transparent; color:var(--text-main); font:inherit; text-align:left; }
  .join-request-person img { flex:0 0 44px; width:44px; height:44px; border-radius:14px; object-fit:cover; filter:none; opacity:1; }
  .join-request-copy { display:flex; flex:1; flex-direction:column; gap:4px; min-width:0; }
  .join-request-copy strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-main); font-size:13px; font-weight:500; }
  .join-request-copy span,.join-request-copy time { min-width:0; font-size:11px; line-height:1.5; color:var(--text-sec); overflow-wrap:anywhere; }
  .join-request-actions { display:flex; align-items:center; gap:6px; }
  .join-request-actions>.btn { min-height:40px; padding:9px 12px; font-size:12px; }
  .join-request-card[aria-busy='true'] { border-color:var(--accent-border); background:var(--accent-subtle); }
  .join-request-card button:disabled { opacity:.65; cursor:wait; }
  .group-tool-row-error { grid-column:1/-1; margin:0; color:var(--accent-text); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
  .group-tool-row-error[hidden] { display:none; }
  .group-tool-footer { display:flex; align-items:center; gap:12px; flex:0 0 auto; padding:12px 22px; border-top:1px solid var(--border-subtle); }
  .group-tool-footer>span { flex:1; min-width:0; color:var(--text-sec); font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
  .group-tool-footer>.btn { min-height:40px; padding:8px 12px; font-size:12px; }
  #group-stats-content .stats-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 24px; }
  .stats-metric { display:flex; flex-direction:column; gap:8px; min-width:0; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
  .stats-metric>.icon { width:19px; height:19px; color:var(--accent-text); }
  .stats-metric strong { font:400 29px/1.2 var(--font-display); color:var(--text-main); overflow-wrap:anywhere; }
  .stats-metric span { font-size:11px; line-height:1.5; color:var(--text-sec); }
  .stats-metric-exact { color:var(--text-muted); font-size:11px; line-height:1.5; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
  .stats-activity-header { margin:0 0 14px; }
  .stats-activity-header h3 { margin:0; font:400 23px/1.3 var(--font-display); text-align:left; }
  .stats-activity-header p { margin:6px 0 0; color:var(--text-sec); font-size:12px; line-height:1.5; text-align:left; }
  .stats-days { display:flex; flex-direction:column; gap:5px; }
  .stats-day { display:grid; grid-template-columns:76px minmax(0,1fr) 84px; align-items:center; gap:12px; min-width:0; width:100%; min-height:46px; padding:9px 12px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--text-main); font:inherit; text-align:left; }
  .stats-day[aria-pressed='true'] { border-color:var(--accent-border); background:var(--accent-subtle); }
  .stats-day time { color:var(--text-sec); font-size:11px; }
  .stats-day-track { display:block; height:8px; border-radius:5px; background:var(--border-subtle); overflow:hidden; }
  .stats-day-fill { display:block; height:100%; min-width:0; border-radius:5px; background:var(--primary); }
  .stats-day strong { min-width:0; color:var(--text-main); font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; text-align:right; overflow-wrap:anywhere; }
  .stats-selected-day { margin:14px 0 0; padding:14px; border:1px solid var(--accent-border); border-radius:11px; background:var(--accent-subtle); color:var(--accent-text); font-size:12px; line-height:1.6; text-align:left; }
  #modal-audit-log .audit-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:10px; }
  #modal-audit-log #audit-log-filter { width:100%; min-width:0; height:44px; min-height:44px; padding:9px 32px 9px 12px; border:1px solid var(--border); border-radius:10px; background-color:var(--surface-raised); color:var(--text-main); font:400 13px/1.5 var(--font); text-align:left; }
  #modal-audit-log #audit-log-list { flex:1; min-height:0; padding:16px 22px 22px; overflow:auto; }
  .audit-day-heading { margin:16px 0 7px; color:var(--text-muted); font:500 11px/1.5 var(--font); text-align:left; }
  .audit-day-heading:first-child { margin-top:0; }
  .audit-event { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--border-subtle); }
  .audit-event>.window-person-avatar { flex:0 0 42px; width:42px; height:42px; border-radius:14px; filter:none; opacity:1; }
  .audit-event-copy { display:flex; flex:1; flex-direction:column; gap:6px; min-width:0; }
  .audit-event-heading { display:flex; align-items:center; gap:10px; min-width:0; }
  .audit-event-heading strong { flex:1; min-width:0; font-size:12px; font-weight:500; overflow-wrap:anywhere; }
  .audit-event-heading time { color:var(--text-muted); font-size:10px; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .audit-event-action { display:flex; align-items:flex-start; gap:6px; color:var(--text-main); font-size:13px; line-height:1.5; }
  .audit-event-action>.icon { flex:0 0 15px; width:15px; height:15px; margin-top:2px; color:var(--accent-text); }
  .audit-event-detail { margin:0; color:var(--text-sec); font-size:12px; line-height:1.6; overflow-wrap:anywhere; text-align:left; }
  .audit-event-changes { margin:2px 0 0; color:var(--text-sec); font-size:12px; }
  .audit-event-changes summary { width:max-content; max-width:100%; min-height:32px; padding:5px 0; color:var(--accent-text); cursor:pointer; }
  .audit-event-changes>div { display:grid; gap:8px; margin:6px 0 0; padding:12px; border:1px solid var(--border); border-radius:9px; background:var(--surface); }
  .audit-event-change { display:flex; flex-direction:column; gap:4px; min-width:0; }
  .audit-event-change span { color:var(--text-muted); font-size:10px; }
  .audit-event-change p { margin:0; font-size:12px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; text-align:left; }
  @media (hover:hover) and (pointer:fine) { .stats-day:hover,.join-request-person:hover { color:var(--accent-text); } .stats-day:hover { background:var(--hover); } }
  @media (max-width:600px) {
    :is(#join-requests-panel,#group-stats-panel,#modal-audit-log) { padding:10px; }
    :is(#join-requests-panel,#group-stats-panel,#modal-audit-log) .group-tool-dialog { height:calc(var(--viewport-height) - 20px); max-height:calc(var(--viewport-height) - 20px); border-radius:16px; }
    .group-tool-header { gap:8px; padding:14px 14px 12px; }
    .group-tool-header h2 { font-size:24px; }
    .group-tool-toolbar { padding:12px 14px; }
    .group-tool-search input { font-size:16px; }
    .group-tool-scroll,#modal-audit-log #audit-log-list { padding:14px; }
    .join-request-card { grid-template-columns:minmax(0,1fr); padding:12px; gap:11px; }
    .join-request-actions { margin-left:56px; }
    .join-request-actions>.btn { flex:1; min-height:44px; padding:9px 10px; font-size:11px; }
    .group-tool-footer { padding:10px 14px; }
    .group-tool-footer>.btn { min-height:44px; }
    #group-stats-content .stats-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .stats-metric { padding:13px; }
    .stats-metric:last-child { grid-column:1/-1; display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:10px; }
    .stats-metric:last-child strong { grid-column:3; grid-row:1; font-size:25px; }
    .stats-metric:last-child span { grid-column:2; grid-row:1; }
    .stats-metric:last-child .stats-metric-exact { grid-column:2/-1; grid-row:2; }
    .stats-day { grid-template-columns:65px minmax(0,1fr) 64px; gap:8px; padding:9px 6px; }
    #modal-audit-log .audit-toolbar { grid-template-columns:minmax(0,1fr); gap:8px; }
    #modal-audit-log #audit-log-filter { font-size:16px; }
    .audit-event { gap:10px; }
    .audit-event-heading { gap:7px; }
  }
}
/* Conversation creation and invitations share the workspace's quiet blue surfaces. */
  :is(#modal-create,#modal-bot-token,#modal-invite-friends) { padding:16px; background:var(--scrim); }
  :is(#modal-create,#modal-bot-token,#modal-invite-friends) .conversation-dialog { display:flex; flex-direction:column; align-items:stretch; gap:0; width:min(600px,100%); max-width:none; max-height:calc(var(--viewport-height) - 32px); padding:0; border:1px solid var(--border); border-radius:18px; background:var(--bg-body); overflow:hidden; text-align:left; }
  .conversation-header { display:flex; flex:none; align-items:flex-start; justify-content:space-between; gap:16px; padding:23px 24px 20px; border-bottom:1px solid var(--border); background:var(--bg-body); }
  .conversation-header>div { flex:1; min-width:0; }
  .conversation-header h2 { margin:0; color:var(--text-main); font:400 28px/1.18 var(--font-display); overflow-wrap:anywhere; text-align:left; }
  .conversation-header p { margin:8px 0 0; color:var(--text-sec); font:400 12px/1.5 var(--font); overflow-wrap:anywhere; }
  :is(#modal-create,#modal-bot-token,#modal-invite-friends) .conversation-header p,:is(#modal-create,#modal-bot-token) .conversation-note p { text-align:left; }
  .conversation-header .btn-icon { flex:0 0 44px; width:44px; height:44px; min-height:44px; margin:-6px -8px 0 0; border-radius:10px; }
  .conversation-header .icon { width:20px; height:20px; }
  .conversation-form { display:flex; flex-direction:column; flex:1; min-height:0; margin:0; }
  .conversation-body { display:flex; flex:1; flex-direction:column; gap:20px; min-height:0; padding:22px 24px 24px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
  #modal-create .type-switch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; width:100%; margin:0; padding:5px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
  #modal-create .type-btn { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:46px; padding:10px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--text-sec); font:500 13px/1.4 var(--font); cursor:pointer; box-shadow:none; }
  #modal-create .type-btn .icon { flex:none; width:19px; height:19px; }
  #modal-create .type-btn.active { background:var(--accent-subtle); color:var(--accent-text); border-color:var(--accent-border); }
  .conversation-type-description { margin:-8px 0 0; min-height:38px; color:var(--text-sec); font:400 12px/1.6 var(--font); text-align:left; }
  .conversation-photo-row { display:flex; align-items:center; gap:16px; padding:0 0 20px; border-bottom:1px solid var(--border-subtle); }
  .conversation-photo { position:relative; flex:0 0 72px; width:72px; height:72px; padding:0; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:var(--surface); cursor:pointer; }
  .conversation-photo img { display:block; width:100%; height:100%; object-fit:cover; opacity:1; filter:none; }
  .conversation-photo>span { position:absolute; display:grid; place-items:center; width:24px; height:24px; right:3px; bottom:3px; border:1px solid var(--border); border-radius:7px; background:var(--surface-raised); color:var(--text-main); }
  .conversation-photo>span .icon { width:14px; height:14px; }
  .conversation-photo-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:5px; }
  .conversation-photo-copy>strong { color:var(--text-main); font:500 14px/1.4 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .conversation-photo-copy>span { color:var(--text-sec); font:400 11px/1.4 var(--font); overflow-wrap:anywhere; }
  .conversation-photo-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:1px 0 -6px; }
  .conversation-photo-actions .btn { min-height:36px; padding:6px 8px; margin-left:-8px; font-size:12px; }
  .conversation-field { display:flex; flex-direction:column; gap:8px; min-width:0; margin:0; text-align:left; }
  .conversation-field>span:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--text-main); font:500 12px/1.5 var(--font); }
  .conversation-field output { flex:none; color:var(--text-muted); font:400 11px/1.5 var(--font); font-variant-numeric:tabular-nums; }
  .conversation-field :is(input,textarea) { width:100%; min-width:0; min-height:44px; margin:0; padding:11px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-raised); color:var(--text-main); font:400 14px/1.5 var(--font); text-align:left; }
  .conversation-field textarea { resize:vertical; min-height:96px; }
  .conversation-field small { color:var(--text-sec); font:400 11px/1.6 var(--font); text-align:left; }
  .conversation-field [aria-invalid='true'] { border-color:var(--danger); }
  .conversation-field .conversation-field-error { color:var(--danger); }
  .conversation-address-input { display:flex; align-items:center; min-width:0; min-height:44px; overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--surface-raised); }
  .conversation-address-input>span { flex:none; padding:0 0 0 12px; color:var(--text-muted); font:400 14px/1.5 var(--font); }
  .conversation-address-input .input { flex:1; min-height:42px; padding-left:5px; border:0; border-radius:0; background:transparent; }
  .conversation-address-input:focus-within { outline:2px solid var(--primary); outline-offset:2px; }
  .conversation-address-input .input:focus { outline:0; box-shadow:none; }
  .conversation-address-input:has([aria-invalid='true']) { border-color:var(--danger); }
  #modal-create #bot-hint,.conversation-note { display:flex; align-items:flex-start; gap:12px; padding:14px; margin:0; border:1px solid var(--accent-border); border-radius:11px; background:var(--accent-subtle); color:var(--accent-text); text-align:left; }
  .conversation-note .icon { flex:none; width:20px; height:20px; margin-top:2px; }
  .conversation-note p { margin:0; color:inherit; font:400 12px/1.6 var(--font); }
  .conversation-footer { display:flex; flex:none; flex-direction:column; gap:12px; padding:16px 24px; border-top:1px solid var(--border); background:var(--bg-body); }
  .conversation-footer>div { display:flex; justify-content:flex-end; align-items:center; gap:10px; }
  .conversation-footer .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:44px; padding:10px 15px; border-radius:10px; font-size:13px; }
  .conversation-footer p,.conversation-copy-status { margin:0; color:var(--text-sec); font:400 12px/1.6 var(--font); overflow-wrap:anywhere; text-align:left; }
  :is(.conversation-footer p,.conversation-copy-status)[data-error='true'] { color:var(--danger); }
  .conversation-copy-status[data-success='true'] { color:var(--accent-text); }
  #bot-token-value { font:400 13px/1.7 ui-monospace,Consolas,monospace; }
  #modal-bot-token { z-index:5002; }
  .invite-person { display:flex; align-items:center; gap:13px; padding:16px; border:1px solid var(--accent-border); border-radius:13px; background:var(--accent-subtle); }
  .invite-person img { flex:0 0 48px; width:48px; height:48px; border-radius:15px; object-fit:cover; opacity:1; filter:none; }
  .invite-person>div { display:flex; flex:1; flex-direction:column; gap:5px; min-width:0; }
  .invite-person strong { color:var(--text-main); font:500 14px/1.4 var(--font); overflow-wrap:anywhere; }
  .invite-person span { color:var(--text-sec); font:400 11px/1.5 var(--font); overflow-wrap:anywhere; }
  .invite-person>.icon { flex:none; width:19px; height:19px; color:var(--primary); }
  #invite-friends-text { min-height:190px; resize:vertical; font:400 13px/1.7 var(--font); }
  .conversation-help { margin:0; color:var(--text-sec); font:400 12px/1.6 var(--font); }
  .group-invite-card { display:flex; flex-direction:column; gap:12px; padding:16px; }
  .group-invite-heading { display:flex; gap:12px; align-items:flex-start; }
  .group-invite-heading>.icon { flex:none; width:20px; height:20px; margin-top:1px; color:var(--primary); }
  .group-invite-heading>div { display:flex; flex:1; min-width:0; flex-direction:column; gap:5px; }
  .group-invite-heading strong { color:var(--text-main); font:500 13px/1.5 var(--font); }
  .group-invite-heading p { margin:0; color:var(--text-sec); font:400 11px/1.6 var(--font); }
  .group-invite-link-row { display:flex; align-items:center; gap:8px; min-width:0; }
  #modal-group-info #grp-invite-link { flex:1; min-width:0; padding:11px 12px; border:1px solid var(--border); border-radius:9px; background:var(--surface-raised); color:var(--text-sec); font:400 12px/1.5 var(--font); white-space:nowrap; overflow:auto; user-select:all; }
  .group-invite-link-row>.btn { flex:none; min-height:44px; padding:10px 12px; gap:7px; font-size:12px; }
  .group-invite-link-row>.btn .icon { width:17px; height:17px; }
  .group-invite-card .conversation-copy-status { font-size:11px; }
  #grp-admin-panel .group-setting-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; border-bottom:1px solid var(--border-subtle); }
  #modal-group-info .group-add-person { display:flex; flex-direction:column; gap:10px; padding:16px; }
  .group-add-person>label { color:var(--text-main); font:500 13px/1.5 var(--font); text-align:left; }
  .group-add-person>div { display:flex; align-items:center; gap:8px; min-width:0; }
  #modal-group-info .group-add-person .input { flex:1; width:0; min-width:0; min-height:44px; border:1px solid var(--border); border-radius:9px; padding:10px 12px; background:var(--surface-raised); font:400 14px/1.5 var(--font); }
  .group-add-person .btn { flex:none; min-height:44px; padding:10px 12px; font-size:12px; }
  .group-setting-copy { flex:1; display:flex; flex-direction:column; gap:5px; min-width:0; }
  .group-setting-copy label { color:var(--text-main); font:500 13px/1.5 var(--font); }
  .group-setting-copy p { margin:0; color:var(--text-sec); font:400 11px/1.6 var(--font); }
  .group-setting-row>.ios-toggle { flex:none; }
  .group-setting-intervals { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:0 16px 14px; }
  #grp-admin-panel .slow-delay-btn { min-height:40px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-raised); color:var(--text-sec); font:400 12px/1.5 var(--font); cursor:pointer; }
  #grp-admin-panel .slow-delay-btn[aria-pressed='true'] { border-color:var(--accent-border); background:var(--accent-subtle); color:var(--accent-text); }
  .group-setting-status { margin:0; padding:0 16px 14px; color:var(--danger); font:400 11px/1.6 var(--font); text-align:left; }
  .conversation-dialog [hidden],.conversation-dialog .hidden,#grp-admin-panel [hidden],.group-invite-card [hidden] { display:none!important; }
  .conversation-dialog :is(button,input,textarea):disabled { cursor:default; opacity:.6; }
  .conversation-dialog .conversation-photo:disabled { opacity:1; }
  #modal-group-info :is(.group-invite-heading p,.group-setting-copy p,.group-setting-status) { text-align:left; }
  #modal-group-info .group-identity>#grp-avatar-button { padding:0; border:0; overflow:visible; background:transparent; cursor:pointer; }
  #grp-avatar-button>img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; opacity:1; filter:none; }
  #grp-avatar-button:disabled { opacity:1; cursor:default; }
  #grp-avatar-button #grp-edit-overlay { inset:auto; right:-3px; bottom:-3px; display:grid; place-items:center; width:26px; height:26px; border:2px solid var(--bg-body); border-radius:9px; background:var(--primary); color:var(--on-primary); }
  #grp-edit-overlay>.icon { width:15px; height:15px; }
  @media(max-width:600px) {
    :is(#modal-create,#modal-bot-token,#modal-invite-friends) { padding:10px; }
    :is(#modal-create,#modal-bot-token,#modal-invite-friends) .conversation-dialog { max-height:calc(var(--viewport-height) - 20px); border-radius:16px; }
    .conversation-header { padding:20px 16px 17px; }
    .conversation-header h2 { font-size:25px; }
    .conversation-header p { font-size:12px; }
    .conversation-body { gap:18px; padding:18px 16px 20px; }
    #modal-create .type-btn { gap:7px; min-height:46px; padding:10px 5px; font-size:12px; }
    #modal-create .type-btn .icon { width:17px; height:17px; }
    .conversation-photo-row { gap:13px; }
    .conversation-photo-actions .btn { min-height:44px; }
    .conversation-field :is(input,textarea),.conversation-address-input>span { font-size:16px; }
    .conversation-footer { padding:14px 16px; }
    .conversation-footer>div { gap:8px; }
    .conversation-footer .btn { flex:1; padding:10px 9px; font-size:12px; }
    .invite-person { padding:13px; gap:11px; }
    .invite-person>.icon { display:none; }
    #invite-friends-text { font-size:16px; }
    .group-invite-card { padding:14px; }
    .group-invite-link-row { flex-wrap:wrap; }
    #modal-group-info #grp-invite-link { flex-basis:100%; font-size:13px; }
    .group-invite-link-row>.btn { flex:1; justify-content:center; }
    #grp-admin-panel .group-setting-row { padding:14px; gap:12px; }
    .group-setting-intervals { padding:0 14px 14px; }
    #grp-admin-panel .slow-delay-btn { min-height:44px; }
  }
/* Keep the navigation compact so conversations receive the available height. */
  .workspace-sidebar>.workspace-header { padding:10px 12px 5px; }
  .workspace-header .rail-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; margin:0; }
  .workspace-header .rail-brand { flex:1; min-width:0; min-height:44px; padding:0 6px; }
  .workspace-header .rail-wordmark { font-size:27px; }
  .workspace-header-actions { display:flex; flex:none; align-items:center; gap:3px; }
  .workspace-header .rail-compose,.workspace-header .rail-collapse { flex:none; display:inline-flex; align-items:center; justify-content:center; width:40px; height:44px; min-height:44px; margin:0; padding:9px; border:0; border-radius:9px; background:transparent; }
  .workspace-header .rail-compose span { display:none; }
  .workspace-header-actions .icon { width:20px; height:20px; }
  .workspace-sidebar>.workspace-navigation { padding:2px 12px 6px; gap:4px; }
  .workspace-navigation .rail-item { flex-direction:row; gap:7px; min-height:44px; height:44px; padding:8px 5px; }
  .workspace-navigation .rail-icon-wrap { flex:none; width:20px; height:20px; }
  .workspace-navigation .rail-icon { width:19px; height:19px; }
  .workspace-navigation .rail-item>span { font-size:11px; }
  .workspace-sidebar .sidebar { flex:1 1 0; min-height:0; overflow:hidden; }
  :root[data-sidebar-section='chats'] .workspace-sidebar .sidebar-header { display:none; }
  .workspace-sidebar .sidebar-header { min-height:32px; padding:6px 18px; }
  .workspace-sidebar .search-container { flex:none; padding:2px 12px 6px; }
  .workspace-sidebar .search-container::before { left:25px; top:17px; }
  .workspace-sidebar .search-container::after { left:37px; top:29px; }
  .workspace-sidebar .search-container .search-input { min-height:40px; height:40px; }
  .workspace-sidebar .chat-folder-rail { flex:none; min-height:44px; padding:0 8px 3px; border-bottom:1px solid var(--border-subtle); }
  .workspace-sidebar .chat-folder-scroll { padding:2px; scrollbar-width:none; }
  .workspace-sidebar .chat-folder-scroll::-webkit-scrollbar { display:none; width:0; height:0; }
  .workspace-sidebar .chat-folder-chip { min-height:36px; height:36px; padding:7px 8px; }
  .workspace-sidebar .chat-folder-edit { width:40px; height:40px; min-height:40px; flex-basis:40px; }
  .workspace-sidebar .stories-rail { flex:none; gap:8px; padding:5px 12px; min-height:54px; }
  .workspace-sidebar .story-item { display:flex; flex-direction:row; align-items:center; gap:7px; width:auto; min-width:0; flex:none; min-height:44px; padding:0; }
  .workspace-sidebar .story-ring { flex:none; width:38px; height:38px; min-width:38px; padding:2px; border-radius:50%; }
  .workspace-sidebar .story-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; }
  .workspace-sidebar .story-plus { width:17px; height:17px; font-size:13px; right:-2px; bottom:-2px; }
  .workspace-sidebar .story-name { margin:0; max-width:72px; font-size:11px; line-height:1.4; }
  .workspace-sidebar .list-container { flex:1 1 0; min-height:0; padding:4px 6px; }
  .workspace-sidebar .list-item { min-height:66px; padding:9px 11px; }
  .workspace-sidebar>.workspace-footer { margin:0 12px; padding:5px 0 7px; gap:5px; min-height:56px; }
  .workspace-footer .rail-profile { min-height:44px; padding:5px 6px; }
  .workspace-footer .rail-item { width:40px; height:44px; min-height:44px; }
  .sidebar-suggestions { flex:none; min-height:0; margin:0 12px; border-top:1px solid var(--border-subtle); }
  .sidebar-suggestions>summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:36px; padding:7px 6px; color:var(--text-sec); font:400 11px/1.5 var(--font); list-style:none; cursor:pointer; }
  .sidebar-suggestions>summary::-webkit-details-marker { display:none; }
  .sidebar-suggestions>summary>.icon { width:15px; height:15px; flex:none; }
  .sidebar-suggestions[open]>summary>.icon { transform:rotate(90deg); }
  .sidebar-suggestions-body { max-height:min(180px,24dvh); overflow:auto; overscroll-behavior:contain; padding:0 0 6px; }
  .workspace-sidebar .sidebar-suggestions :is(.app-promo-banner,.invite-card) { margin:0 0 7px; padding:12px; }
  .sidebar-suggestions:not(:has(#app-promo-banner:not(.hidden),#invite-friends-banner:not(.hidden))),.sidebar.search-active .sidebar-suggestions,:root:is([data-sidebar-section='contacts'],[data-sidebar-section='calls']) .sidebar-suggestions { display:none; }
  :is(#ctx-chat-actions,#ctx-list-actions) .ctx-item { display:flex; align-items:center; justify-content:flex-start; width:100%; gap:12px; min-height:42px; padding:10px 12px; border:0; font:400 13px/1.5 var(--font); text-align:left; }
  :is(#ctx-chat-actions,#ctx-list-actions) .ctx-item>.icon { flex:0 0 19px; width:19px; height:19px; color:inherit; opacity:.9; }
  :is(#ctx-chat-actions,#ctx-list-actions) .ctx-action-label { flex:1; min-width:0; overflow-wrap:anywhere; }
  :root[data-rail-collapsed] .workspace-header-actions { flex-direction:column; }
  :root[data-rail-collapsed] .workspace-header .rail-topline { flex-direction:column; }
  :root[data-rail-collapsed] .workspace-sidebar>.workspace-navigation { padding:0 6px; }
  .settings-page-body .appearance-effect-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; padding:8px 12px; border:0; border-radius:10px; cursor:pointer; }
  .appearance-effect-row .ios-label { flex:1; min-width:0; padding:0; font-size:13px; line-height:1.5; }
  .appearance-effect-row:hover { background:var(--hover); }
  .appearance-effect-row:has(input:focus-visible) { background:var(--accent-subtle); }
  #modal-menu :is(button,a,div).settings-row-ios { display:flex; width:100%; min-height:52px; padding:10px 14px; gap:12px; align-items:center; border:0; border-radius:10px; text-align:left; }
  #modal-menu .settings-row-ios .ios-icon-box { flex:0 0 30px; width:30px; height:30px; margin:0; }
  #appearance-effects-status { margin:8px 12px 0; color:var(--text-sec); font-size:12px; line-height:1.5; }
  @media(min-width:800px) and (pointer:fine), (min-width:800px) and (min-height:501px), (min-width:800px) and (min-width:1025px) {
    :root[data-rail-collapsed] .workspace-header .rail-topline { margin:0; }
    :root[data-rail-collapsed] .workspace-navigation { align-items:stretch; gap:6px; }
    :root[data-rail-collapsed] .workspace-navigation .rail-item { flex-direction:column; justify-content:center; width:100%; height:48px; min-height:48px; padding:8px 0; gap:0; }
    :root[data-rail-collapsed] .workspace-navigation .rail-item>span { display:none; }
    :root[data-rail-collapsed] .workspace-navigation .rail-icon-wrap { width:24px; height:24px; }
    :root[data-rail-collapsed] .workspace-navigation .rail-icon { width:22px; height:22px; }
    :root[data-rail-collapsed] .workspace-sidebar>.workspace-footer { margin:auto 8px 0; padding:8px 0; min-height:60px; }
    :root[data-rail-collapsed] .workspace-footer .rail-profile { min-width:44px; min-height:44px; margin:0; padding:6px; }
  }
  @media(min-width:800px) and (max-height:520px) and (pointer:fine), (min-width:800px) and (max-height:520px) and (min-height:501px), (min-width:800px) and (max-height:520px) and (min-width:1025px) {
    :root:not([data-rail-collapsed]) .workspace-sidebar>.workspace-header { position:relative; z-index:2; height:0; padding:0; }
    :root:not([data-rail-collapsed]) .workspace-header .rail-topline { min-height:0; height:0; }
    :root:not([data-rail-collapsed]) .workspace-header .rail-brand { display:none; }
    :root:not([data-rail-collapsed]) .workspace-header-actions { position:absolute; right:6px; top:0; }
    :root:not([data-rail-collapsed]) .workspace-sidebar>.workspace-navigation { padding:0 92px 0 6px; gap:3px; }
    :root:not([data-rail-collapsed]) .workspace-navigation .rail-item { min-width:0; padding:6px; }
    :root:not([data-rail-collapsed]) .workspace-navigation .rail-item>span { display:none; }
    .workspace-sidebar .search-container { padding:0 8px; }
    .workspace-sidebar .search-container::before { left:21px; top:15px; }
    .workspace-sidebar .search-container::after { left:33px; top:27px; }
    .workspace-sidebar .chat-folder-rail { min-height:40px; padding:0 4px; }
    .workspace-sidebar .chat-folder-scroll { padding:0; }
    .workspace-sidebar .stories-rail { min-height:44px; padding:0 8px; }
    :root:not([data-rail-collapsed]) .workspace-sidebar>.workspace-footer { min-height:44px; padding:0; margin:0 8px; }
    .workspace-footer .rail-profile { margin:0; padding:4px; }
    .sidebar-suggestions>summary { min-height:28px; padding:4px; font-size:10px; }
    .sidebar-suggestions[open] { position:absolute; z-index:3; bottom:44px; left:0; right:0; margin:0 8px; padding:0 8px; border:1px solid var(--border); border-radius:10px; background:var(--surface-raised); box-shadow:var(--glass-shadow); }
    .sidebar-suggestions-body { max-height:100px; }
    :root[data-rail-collapsed] .workspace-sidebar { overflow-y:auto; }
    :root[data-rail-collapsed] .workspace-sidebar>.workspace-footer { margin-top:8px; }
  }
  @media(max-width:799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
    .workspace-sidebar>.workspace-header,.workspace-sidebar>.workspace-navigation,.workspace-sidebar>.workspace-footer { display:none; }
    :root[data-sidebar-section='chats'] .workspace-sidebar .sidebar-header { display:flex; }
    .workspace-sidebar .sidebar-header { min-height:58px; padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px; }
    .workspace-sidebar .search-container { padding:0 12px 6px; }
    .workspace-sidebar .search-container .search-input { min-height:44px; height:44px; }
    .workspace-sidebar .list-container { padding-bottom:calc(70px + env(safe-area-inset-bottom,0px)); }
    .workspace-sidebar .list-item { min-height:72px; padding:10px; }
    .sidebar-suggestions { margin-bottom:calc(64px + env(safe-area-inset-bottom,0px)); }
    .sidebar-suggestions>summary { min-height:40px; }
    .sidebar-suggestions-body { max-height:160px; }
    :root[data-sidebar-section='chats'] .workspace-sidebar .list-container:has(+ :not(.hidden)) { min-height:0; }
    #modal-group-info .group-add-person .input { font-size:16px; }
  }
#modal-settings-chats .wallpaper-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
  .wallpaper-layout h4 { margin:0 0 8px; font:500 14px/1.5 var(--font); text-align:left; }
  .wallpaper-help { margin:0; color:var(--text-sec); font-size:12px; line-height:1.6; text-align:left; overflow-wrap:anywhere; }
  #modal-settings-chats .wallpaper-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:0; margin:16px 0 0; gap:8px; }
  .wallpaper-option { min-width:0; padding:4px; border:1px solid var(--border-subtle); border-radius:11px; color:var(--text-sec); background:transparent; cursor:pointer; }
  .wallpaper-option:hover { border-color:var(--accent-border); background:var(--hover); }
  .wallpaper-option[aria-pressed='true'] { border-color:var(--primary); background:var(--accent-subtle); color:var(--accent-text); }
  .wallpaper-swatch { display:flex; flex-direction:column; gap:5px; align-items:flex-start; justify-content:center; min-height:52px; padding:10px; border:1px solid var(--border-subtle); border-radius:7px; background:var(--wallpaper-color); }
  .wallpaper-swatch>span { width:65%; height:9px; border:1px solid var(--border-subtle); border-radius:3px; background:var(--msg-in); }
  .wallpaper-swatch>span+span { align-self:flex-end; width:50%; background:var(--msg-out); }
  .wallpaper-option-label { display:flex; align-items:center; justify-content:space-between; gap:3px; min-height:36px; padding:4px 2px; font:400 10px/1.4 var(--font); text-align:left; overflow-wrap:anywhere; }
  .wallpaper-option-label>.icon { flex:none; width:14px; height:14px; visibility:hidden; }
  .wallpaper-option[aria-pressed='true'] .wallpaper-option-label>.icon { visibility:visible; }
  .wallpaper-preview-caption { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; padding:0 0 12px; color:var(--text-sec); font-size:11px; }
  .wallpaper-preview-caption strong { color:var(--text-main); font-weight:500; }
  .wallpaper-chat-preview { display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-height:248px; padding:16px 12px 12px; border:1px solid var(--border); border-radius:14px; background:var(--bg-body); background-size:cover; background-position:center; }
  .wallpaper-preview-date { align-self:center; padding:3px 8px; border:1px solid var(--border-subtle); border-radius:6px; background:var(--surface-raised); color:var(--text-sec); font-size:9px; }
  .wallpaper-preview-message { display:block; max-width:92%; padding:10px 12px; border:1px solid var(--border-subtle); border-radius:var(--bubble-radius,14px); background:var(--msg-in); color:var(--text-main); font:400 12px/1.5 var(--font); overflow-wrap:anywhere; }
  .wallpaper-preview-message.own { align-self:flex-end; background:var(--msg-out); }
  .wallpaper-preview-message small { display:flex; align-items:center; justify-content:flex-end; gap:3px; margin-top:6px; color:var(--text-sec); font-size:9px; }
  .wallpaper-preview-message small>.icon { width:12px; height:12px; }
  .wallpaper-preview-composer { display:flex; align-items:center; align-self:stretch; gap:8px; margin-top:auto; padding:10px; border:1px solid var(--border); border-radius:9px; background:var(--input-bg); color:var(--text-sec); font-size:10px; }
  .wallpaper-preview-composer>.icon { width:16px; height:16px; flex:none; }
  .wallpaper-share { margin-top:20px; padding-top:16px; border-top:1px solid var(--border-subtle); }
  #wallpaper-share-button { display:flex; align-items:center; justify-content:center; width:100%; gap:8px; margin-top:12px; min-height:44px; font-size:12px; }
  #wallpaper-share-button>.icon { width:17px; height:17px; }
  .wallpaper-status { margin:10px 0 0; color:var(--text-sec); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
  .wallpaper-status[data-error='true'] { color:var(--accent-text); }
  .wallpaper-proposal { display:grid; grid-template-columns:40px minmax(0,1fr); gap:10px; align-items:start; margin-top:14px; padding:12px; border:1px solid var(--accent-border); border-radius:11px; background:var(--accent-subtle); }
  .wallpaper-proposal[hidden],.wallpaper-status[hidden] { display:none; }
  .wallpaper-proposal strong { display:block; font-size:12px; font-weight:500; line-height:1.5; }
  .wallpaper-proposal-swatch { display:block; width:40px; height:44px; border:1px solid var(--border); border-radius:7px; background-size:cover; background-position:center; }
  .wallpaper-proposal-actions { grid-column:1/-1; display:flex; gap:8px; }
  .wallpaper-proposal-actions[hidden] { display:none; }
  .wallpaper-proposal-actions>.btn { flex:1; min-height:44px; font-size:12px; }
  @media(min-width:1100px) { #modal-settings-chats .wallpaper-layout { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:20px; } }
  @media(max-width:799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) { .wallpaper-option-label { min-height:40px; font-size:11px; } .wallpaper-chat-preview { min-height:242px; } }
#ctx-menu:has(.mobile-ctx-container) { position:fixed; width:272px; min-width:0; max-width:calc(100vw - 24px); padding:6px; overflow-x:hidden; overflow-y:auto; }
  #ctx-menu .mobile-ctx-container { width:100%; min-width:0; max-width:100%; }
  #ctx-menu .mobile-react-menu { position:sticky; top:-6px; z-index:2; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; justify-items:center; gap:3px; width:100%; padding:6px 2px 10px; margin:0 0 4px; border-bottom:1px solid var(--border-subtle); background:var(--surface); }
  #ctx-menu .mobile-react-btn { display:flex; align-items:center; justify-content:center; width:100%; max-width:44px; min-width:0; height:44px; padding:8px; border:0; border-radius:50%; background:var(--surface-raised); color:var(--text-main); cursor:pointer; }
  #ctx-menu .mobile-react-btn:is(:hover,:focus-visible) { background:var(--accent-subtle); color:var(--accent-text); }
  #ctx-menu .mobile-react-btn:active { transform:scale(.97); }
  #ctx-menu .mobile-react-btn :is(img,.icon) { display:block; width:24px!important; height:24px!important; margin:0; flex:none; object-fit:contain; }
  #ctx-menu .ctx-actions-list { width:100%; min-width:0; padding:0; gap:2px; border-radius:0; background:transparent; }
  #ctx-menu .ctx-item { display:flex; align-items:center; justify-content:flex-start; min-width:0; width:100%; min-height:44px; gap:12px; padding:10px 12px; border:0; border-radius:8px; background:transparent; color:var(--text-main); font:400 13px/1.5 var(--font); text-align:left; }
  #ctx-menu .ctx-item>.icon { width:19px; min-width:19px; height:19px; flex:0 0 19px; margin:0; stroke-width:1.7; }
  #ctx-menu .ctx-action-label { flex:1; min-width:0; overflow-wrap:anywhere; }
  #ctx-menu .ctx-item:hover { background:var(--hover); }
  #ctx-menu .ctx-item.danger { color:var(--danger); }
  :root[data-bubble-style='rounded'] { --bubble-radius:16px; }
  #messages-feed .msg-row .bubble:not(.transparent-media) { border-radius:var(--bubble-radius); }
  #messages-feed .msg-row .bubble.context-bubble { padding:3px!important; border-radius:var(--bubble-radius); }
  #messages-feed .bubble.context-bubble>:is(.message-quote,.fwd-block) { display:flex; flex-direction:row; align-items:flex-start; gap:9px; width:100%; min-width:0; max-width:100%; margin:0 0 3px; padding:11px 16px; border:0; border-radius:max(0px,calc(var(--bubble-radius) - 3px)); background:var(--surface); color:var(--text-main); }
  #messages-feed .bubble.context-bubble .fwd-copy { flex:1; min-width:0; }
  #messages-feed .bubble.context-bubble .fwd-text-preview { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #messages-feed .bubble.context-bubble .fwd-text-preview:empty { display:none; }
  #messages-feed .bubble.context-bubble>.message-quote:hover { background:var(--hover); }
  #messages-feed .bubble.context-bubble>.fwd-block { border:1px solid var(--border-subtle); }
  #messages-feed .bubble.context-bubble>.msg-content:not(.msg-caption) { display:block; margin:0; padding:8px 13px 0; }
  #messages-feed .bubble.context-bubble>.msg-caption { margin:0; padding:8px 13px 0; }
  #messages-feed .bubble.context-bubble>.meta { margin:0; padding:5px 13px 8px; }
  #messages-feed .bubble.context-bubble>.msg-expand-btn { margin-left:13px; }
  #messages-feed .bubble.context-bubble>.document-file-card { margin:3px 0; }
  #messages-feed .bubble.context-bubble>:is(.msg-img,.msg-video-wrap,.album-grid) { margin:0; }
  #group-identity-status { margin:0 0 12px; }
  #group-identity-status[hidden] { display:none; }
/* Decide which account view to show before painting the login form. */
  #session-startup { display:none; }
  :root[data-session-state] :is(#view-auth,#view-app,#bottom-nav) { display:none!important; }
  :root[data-session-state] #session-startup { position:fixed; inset:0; z-index:900; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; background:var(--bg-body); color:var(--text-main); text-align:center; }
  #session-startup .startup-wordmark { font:400 32px/1.2 var(--font-display); letter-spacing:-.025em; }
  #session-startup-caption { max-width:34ch; margin:0; color:var(--text-sec); font:400 13px/1.65 var(--font); }
  #session-startup-retry { min-height:44px; margin-top:6px; }
  #session-startup [hidden] { display:none!important; }
/* Make the first-post action visible while reusing the normal message composer. */
  #active-chat:has(.channel-empty-state) #input-container[data-first-post-chat] { border-color:var(--primary); background:var(--surface-raised); box-shadow:0 0 0 3px var(--accent-subtle); }
  #active-chat:has(.channel-empty-state) #input-container[data-first-post-chat]::before { content:'Первая публикация'; position:absolute; bottom:calc(100% + 8px); left:4px; color:var(--accent-text); font:500 12px/1.4 var(--font); pointer-events:none; }
/* Group invitation picker shares the unlayered conversation styles. */
  #modal-group-invite { padding:16px; background:var(--scrim); }
  #modal-group-invite .group-invite-dialog { display:flex; flex-direction:column; width:min(560px,100%); max-width:none; max-height:calc(var(--viewport-height) - 32px); padding:0; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--bg-body); }
  .group-invite-dialog .conversation-header { flex:none; padding:22px 24px 18px; }
  .group-invite-dialog .conversation-header h2 { font:400 27px/1.2 var(--font-display); margin:0; letter-spacing:-.025em; }
  .group-invite-dialog .conversation-header p { margin:6px 0 0; color:var(--text-sec); font-size:12px; overflow-wrap:anywhere; text-align:left; }
  .group-invite-picker-body { display:flex; flex-direction:column; flex:1; min-height:0; padding:18px 24px; gap:12px; overflow:auto; overscroll-behavior:contain; }
  .group-invite-modes { display:flex; gap:6px; padding:4px; border:1px solid var(--border); border-radius:11px; background:var(--surface); }
  .group-invite-modes>.btn { flex:1; min-width:0; min-height:42px; padding:8px 6px; font-size:12px; background:transparent; color:var(--text-sec); }
  .group-invite-modes>.btn[aria-pressed='true'] { background:var(--accent-subtle); border-color:var(--accent-border); color:var(--accent-text); }
  .group-invite-modes .icon { width:17px; height:17px; }
  .group-invite-help { margin:0; color:var(--text-sec); font:400 12px/1.65 var(--font); text-align:left; }
  .group-invite-search { display:flex; align-items:center; gap:9px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-raised); }
  .group-invite-search>.icon { flex:none; width:18px; height:18px; color:var(--text-sec); }
  .group-invite-search>input { flex:1; width:100%; min-width:0; min-height:44px; padding:10px 0; background:transparent; border:0; color:var(--text-main); font:400 14px/1.5 var(--font); }
  .group-invite-search:focus-within { outline:2px solid var(--primary); outline-offset:2px; border-color:var(--primary); }
  .group-invite-search>input:focus-visible { outline:none; }
  .group-invite-candidates { display:flex; flex-direction:column; min-height:100px; gap:4px; }
  .group-invite-candidate { display:flex; align-items:center; gap:11px; min-height:64px; padding:10px; border:1px solid transparent; border-radius:11px; cursor:pointer; }
  .group-invite-candidate:hover { background:var(--hover); }
  .group-invite-candidate:has(input:checked) { background:var(--accent-subtle); border-color:var(--accent-border); }
  .group-invite-candidate:has(input:focus-visible) { outline:2px solid var(--primary); outline-offset:1px; }
  .group-invite-candidate:has(input:disabled) { cursor:default; }
  .group-invite-candidate>img { flex:none; width:40px; height:40px; border-radius:50%; object-fit:cover; filter:none; opacity:1; }
  .group-invite-candidate>span { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
  .group-invite-candidate strong { color:var(--text-main); font:500 13px/1.5 var(--font); overflow-wrap:anywhere; }
  .group-invite-candidate small { color:var(--text-sec); font:400 11px/1.5 var(--font); overflow-wrap:anywhere; }
  .group-invite-candidate>input { flex:none; width:18px; height:18px; min-height:0; margin:0; padding:0; accent-color:var(--primary); }
  .group-invite-dialog .conversation-footer { flex:none; padding:14px 24px; border-top:1px solid var(--border); display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:12px; }
  .group-invite-dialog .conversation-footer>span { color:var(--text-sec); font-size:12px; }
  .group-invite-dialog [hidden] { display:none!important; }
  @media(max-width:599px) { #modal-group-invite { padding:10px; } #modal-group-invite .group-invite-dialog { max-height:calc(var(--viewport-height) - 20px); border-radius:16px; } .group-invite-dialog .conversation-header { padding:20px 16px 16px; } .group-invite-picker-body { padding:16px; } .group-invite-dialog .conversation-header h2 { font-size:25px; } .group-invite-search>input { font-size:16px; } .group-invite-dialog .conversation-footer { padding:12px 16px; } .group-invite-dialog .conversation-footer .btn { padding:10px; font-size:12px; } }
/* External-link confirmation uses normal paragraphs, without template indentation. */
  #messages-feed.multi-select-mode .msg-row { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:12px; width:100%; max-width:100%; margin-left:0; padding:8px 10px; border-radius:12px; }
  #messages-feed.multi-select-mode .msg-row.selected { background:var(--accent-subtle); }
  #messages-feed.multi-select-mode .msg-row>.ms-checkbox { position:static; grid-column:1; grid-row:1; width:24px; height:24px; min-width:24px; padding:3px; margin:0; transform:none; border:1.5px solid var(--text-sec); color:var(--on-primary); background:transparent; }
  #messages-feed.multi-select-mode .ms-checkbox.checked { background:var(--primary); border-color:var(--primary); }
  #messages-feed.multi-select-mode .ms-checkbox svg { width:15px; height:15px; stroke-width:2.3; }
  #messages-feed.multi-select-mode .ms-checkbox:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
  #messages-feed.multi-select-mode .msg-row>.message-body { grid-column:2; grid-row:1; width:fit-content; min-width:0; max-width:100%; }
  #messages-feed.multi-select-mode .msg-row.own>.message-body { justify-self:end; }
  #messages-feed.multi-select-mode .msg-row:has(.message-author) { grid-template-columns:24px 32px minmax(0,1fr); }
  #messages-feed.multi-select-mode .msg-row:has(.message-author)>.message-body { grid-column:3; }
  #messages-feed.multi-select-mode .msg-row>:not(.ms-checkbox,.message-body,.message-menu-button) { grid-column:2; grid-row:1; margin:0!important; }
  #messages-feed.multi-select-mode :is(.message-menu-button,.reaction-panel-desktop) { display:none!important; pointer-events:none; }
  #messages-feed .bubble.context-bubble>.document-file-card { padding:11px 13px; margin:0; }
  #messages-feed .bubble.context-bubble>.msg-video-wrap { overflow:hidden; border-radius:max(0px,calc(var(--bubble-radius) - 3px)); }
  @media(max-width:599px) { #messages-feed.multi-select-mode .msg-row { padding:6px; gap:8px; } }
  .link-confirm-icon { display:none; }
  #modal-custom-alert.link-mode { padding:16px; background:var(--scrim); }
  #modal-custom-alert.link-mode .modal { width:min(480px,100%); max-width:480px; max-height:calc(var(--viewport-height) - 32px); border:1px solid var(--border); border-radius:18px; background:var(--bg-body); }
  #modal-custom-alert.link-mode .dialog-header { display:flex; align-items:center; gap:12px; padding:20px; }
  #modal-custom-alert.link-mode .link-confirm-icon { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border:1px solid var(--accent-border); border-radius:11px; background:var(--accent-subtle); color:var(--accent-text); }
  .link-confirm-icon .icon { width:21px; height:21px; margin:0; }
  #modal-custom-alert.link-mode #alert-title { flex:1; min-width:0; margin:0; font:400 26px/1.2 var(--font-display); letter-spacing:-.025em; text-align:left; }
  #modal-custom-alert.link-mode .window-close { flex:0 0 36px; width:36px; height:36px; min-width:36px; margin:0; }
  #modal-custom-alert.link-mode .dialog-content { padding:20px; gap:0; }
  #modal-custom-alert.link-mode #alert-content { display:flex; flex-direction:column; gap:12px; margin:0; white-space:normal; text-align:left; overflow-wrap:anywhere; }
  #modal-custom-alert.link-mode #alert-content p { margin:0; color:var(--text-sec); font:400 14px/1.65 var(--font); text-align:left; }
  #modal-custom-alert.link-mode .link-confirm-address { display:flex; flex-direction:column; gap:6px; margin-top:4px; padding:14px; border:1px solid var(--border); border-radius:11px; background:var(--surface); text-align:left; }
  .link-confirm-address>span { color:var(--text-sec); font:400 12px/1.5 var(--font); }
  .link-confirm-address>strong { color:var(--text-main); font:500 15px/1.5 var(--font); overflow-wrap:anywhere; }
  .link-confirm-address>small { color:var(--text-sec); font:400 12px/1.6 var(--font); overflow-wrap:anywhere; user-select:text; }
  #modal-custom-alert.link-mode .dialog-actions { display:flex; flex-direction:row; gap:10px; padding:16px 20px; }
  #modal-custom-alert.link-mode .alert-btn { flex:1; min-width:0; min-height:44px; padding:10px 14px; border:1px solid transparent; border-radius:10px; font:500 13px/1.5 var(--font); }
  #modal-custom-alert.link-mode .alert-btn.primary { background:var(--primary); color:var(--on-primary); }
  #modal-custom-alert.link-mode .alert-btn.primary:hover { background:var(--primary-hover); }
  #modal-custom-alert.link-mode .alert-btn.cancel { background:var(--surface); border-color:var(--border); color:var(--text-main); }
  #modal-custom-alert.link-mode .alert-btn.cancel:hover { background:var(--hover); }
  #modal-custom-alert.link-mode button:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
  @media(max-width:599px) { #modal-custom-alert.link-mode { padding:12px; } #modal-custom-alert.link-mode .modal { max-height:calc(var(--viewport-height) - 24px); border-radius:16px; } #modal-custom-alert.link-mode .dialog-header { padding:18px 16px; gap:10px; } #modal-custom-alert.link-mode #alert-title { font-size:23px; } #modal-custom-alert.link-mode .dialog-content { padding:18px 16px; } #modal-custom-alert.link-mode .dialog-actions { padding:14px 16px; } }
    /* Use the visible viewport for fixed screens, including Safari keyboard panning. */
    :is(.modal-overlay, #view-call, #media-viewer-modal, #story-viewer, #story-creator, .boundary-once-overlay) {
      top: var(--viewport-offset-top, 0px);
      bottom: auto;
      height: var(--viewport-height, 100vh);
    }
    #modal-thread.discussion-panel {
      top: var(--viewport-offset-top, 0px);
      height: var(--viewport-height, 100vh);
    }
    html[data-keyboard-open] #view-app {
      position: fixed;
      top: var(--viewport-offset-top, 0px);
      bottom: auto;
      height: var(--viewport-height, 100vh);
    }
    html[data-keyboard-open] .input-area { bottom: 8px; }
    html[data-keyboard-open] #thread-input-bar { padding-bottom: 8px; }
    .zn-dialog[open] {
      position: fixed;
      top: calc(var(--viewport-offset-top, 0px) + var(--viewport-height) / 2);
      left: calc(var(--viewport-offset-left, 0px) + var(--viewport-width, 100vw) / 2);
      right: auto;
      bottom: auto;
      margin: 0;
      max-height: calc(var(--viewport-height) - 24px);
      transform: translate(-50%, -50%);
    }
    @media (pointer: coarse) {
      html, body { overflow: hidden; overscroll-behavior: none; }
      #view-app {
        position: fixed;
        top: var(--viewport-offset-top, 0px);
        left: var(--viewport-offset-left, 0px);
        bottom: auto;
        width: var(--viewport-width, 100%);
        height: var(--viewport-height, 100dvh);
      }
      input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]),
      textarea, select, [contenteditable=true] { font-size: 16px !important; }
      #msg-input, #thread-input { font-size: max(16px, var(--chat-font-size, 16px)) !important; }
      .settings-mobile-selector select { min-height: 44px; }
      #input-container :is(#btn-attach, #composer-more, #btn-record, #btn-send) {
        width: 44px;
        height: 44px;
        min-width: 44px;
      }
      #input-container .action-btn-container { width: 44px; height: 44px; flex-basis: 44px; }
      #input-container { padding-block: 4px; }
      .message-menu-button { width: 40px; min-width: 40px; height: 44px; }
      .reaction-chip { min-height: 40px; }
    }
    @media (max-width: 799px), (max-width: 1024px) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
      /* The screen belongs to the app viewport; a second fixed origin clips taps. */
      .chat-area { position: absolute; inset: 0; height: 100%; }
      #modal-thread.discussion-panel { position: absolute; inset: 0; width: 100%; height: 100%; }
      /* Reserve the send slot; text and optional tools cannot stretch it offscreen. */
      #input-container.input-area {
        width: calc(100% - max(10px, env(safe-area-inset-left, 0px)) - max(10px, env(safe-area-inset-right, 0px)));
        max-width: 880px;
        left: max(10px, env(safe-area-inset-left, 0px));
        transform: none;
        padding: 4px;
        overflow: visible;
      }
      #input-container .composer-toolbar {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
        gap: 2px;
        align-items: end;
        min-width: 0;
        max-width: 100%;
      }
      #input-container #btn-attach { grid-column: 1; grid-row: 1; }
      #input-container .input-wrapper { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; }
      #input-container #composer-more { display: flex; grid-column: 3; grid-row: 1; width: 44px; min-width: 44px; height: 44px; }
      #input-container .action-btn-container { grid-column: 4; grid-row: 1; width: 44px; min-width: 44px; height: 44px; margin: 0; }
      #input-container #msg-input {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        max-height: min(120px, calc(var(--viewport-height, 100dvh) * .24));
        padding: 10px 4px;
        font-size: max(16px, var(--chat-font-size, 16px)) !important;
        overflow-x: hidden;
        overflow-y: auto;
        overflow-wrap: anywhere;
        -webkit-text-size-adjust: 100%;
      }
      #input-container .composer-extra-tools {
        display: none;
        position: absolute;
        bottom: calc(100% + 8px);
        right: 0;
        width: min(300px, 100%);
        max-height: calc(var(--viewport-height, 100dvh) - var(--composer-height, 54px) - 96px);
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      #input-container .composer-extra-tools[data-open=true] { display: flex; flex-direction: column; align-items: stretch; }
      #input-container .composer-extra-tools > .btn { width: 100%; height: auto; min-height: 44px; justify-content: flex-start; gap: 12px; }
      #input-container .composer-tool-label { display: inline; }
      #input-container #btn-record-mode { width: 100%; min-width: 44px; min-height: 44px; height: auto; padding: 8px 12px; font-size: 13px; }
      #thread-input { min-height: 44px; max-height: min(120px, calc(var(--viewport-height, 100dvh) * .24)); overflow-y: auto; }
      #thread-send { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 10px; }
      #modal-menu.modal-overlay { padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
      #modal-menu .modal { max-height: 100%; min-height: 0; }
      .modal-overlay :is(.dialog-content, .window-body, .settings-content-ios, .menu-sections) { overscroll-behavior: contain; }
    }
    

/* Initial values restored by ZnakoraMarkup to preserve inline priority and DOM APIs. */
[data-zn-style="s0001"] { margin-top:25px;text-align:center;font-size:13px;color:var(--text-sec);opacity:0.8; }
[data-zn-style="s0002"] { color:inherit;text-decoration:none;margin:0 5px; }
[data-zn-style="s0003"] { color:inherit;text-decoration:none;margin:0 5px; }
[data-zn-style="s0004"] { color:inherit;text-decoration:none;margin:0 5px; }
[data-zn-style="s0005"] { margin-top:8px;font-size:11px;line-height:1.35; }
[data-zn-style="s0006"] { display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.45);backdrop-filter:none;-webkit-backdrop-filter:none;align-items:center;justify-content:center; }
[data-zn-style="s0007"] { padding:24px 24px 20px;text-align:center;border-bottom:1px solid var(--border, var(--border)); }
[data-zn-style="s0008"] { font-size:13px;color:var(--text-sec, var(--text-sec));line-height:1.4; }
[data-zn-style="s0009"] { padding:28px 24px; }
[data-zn-style="s0010"] { width:220px;height:220px;margin:0 auto;background:var(--surface-raised);border-radius:16px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:none; }
[data-zn-style="s0011"] { display:flex;flex-direction:column;align-items:center;gap:8px; }
[data-zn-style="s0012"] { font-size:12px;color:var(--text-sec); }
[data-zn-style="s0013"] { display:none; border-radius:8px; }
[data-zn-style="s0014"] { display:none; position:absolute; inset:0; background:rgba(255,255,255,0.95); flex-direction:column; align-items:center; justify-content:center; gap:8px; }
[data-zn-style="s0015"] { width:32px;height:32px; }
[data-zn-style="s0016"] { font-size:13px;color:var(--danger);font-weight:600; }
[data-zn-style="s0017"] { font-size:12px;color:var(--primary);background:none;border:none;cursor:pointer;font-weight:600; }
[data-zn-style="s0018"] { width:220px;margin:16px auto 0;height:3px;background:var(--surface-raised);border-radius:2px;overflow:hidden; }
[data-zn-style="s0019"] { height:100%;background:var(--surface-raised);border-radius:2px;width:100%;transition:width 1s linear; }
[data-zn-style="s0020"] { text-align:center;font-size:13px;color:var(--text-sec, var(--text-sec));margin-top:12px; }
[data-zn-style="s0021"] { padding:0 24px 24px;text-align:center; }
[data-zn-style="s0022"] { font-size:12px;color:var(--text-sec, var(--text-sec));line-height:1.5; }
[data-zn-style="s0023"] { height:40px; }
[data-zn-style="s0024"] { display:none; }
[data-zn-style="s0025"] { width:22px;height:22px; }
[data-zn-style="s0026"] { width:20px;height:20px; }
[data-zn-style="s0027"] { width:28px;height:28px; }
[data-zn-style="s0028"] { flex-shrink:0; }
[data-zn-style="s0029"] { width:20px;height:20px; }
[data-zn-style="s0030"] { display:flex;align-items:center;gap:8px; }
[data-zn-style="s0031"] { flex:1; }
[data-zn-style="s0032"] { margin:0 15px 10px 15px;background:var(--surface-raised);border:1px solid var(--border);border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease; }
[data-zn-style="s0033"] { width:36px;height:36px;flex-shrink:0;position:relative; }
[data-zn-style="s0034"] { width:100%;height:100%;border-radius:50%;object-fit:cover; }
[data-zn-style="s0035"] { position:absolute;bottom:-2px;right:-2px;border:2px solid var(--bg-body); }
[data-zn-style="s0036"] { flex:1;min-width:0; }
[data-zn-style="s0037"] { font-size:11px;color:var(--primary);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px; }
[data-zn-style="s0038"] { font-size:14px;font-weight:600;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
[data-zn-style="s0039"] { width:28px;height:28px;background:var(--primary);border-radius:50%;color:var(--text-main);flex-shrink:0; }
[data-zn-style="s0040"] { width:14px;height:14px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round; }
[data-zn-style="s0041"] { width:18px;height:18px; }
[data-zn-style="s0042"] { flex:1; }
[data-zn-style="s0043"] { width:18px;height:18px; }
[data-zn-style="s0044"] { width:18px;height:18px; }
[data-zn-style="s0045"] { width:18px;height:18px; }
[data-zn-style="s0046"] { width:16px;height:16px; }
[data-zn-style="s0047"] { width:26px;height:26px; }
[data-zn-style="s0048"] { width:18px;height:18px; }
[data-zn-style="s0049"] { width:16px;height:16px; }
[data-zn-style="s0050"] { height:100%;overflow:hidden;position:relative; }
[data-zn-style="s0051"] { flex:1;min-width:0; }
[data-zn-style="s0052"] { flex:1;min-width:0; }
[data-zn-style="s0053"] { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
[data-zn-style="s0054"] { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
[data-zn-style="s0055"] { width:20px;height:20px; }
[data-zn-style="s0056"] { flex:1; }
[data-zn-style="s0057"] { width:20px;height:20px; }
[data-zn-style="s0058"] { width:20px;height:20px; }
[data-zn-style="s0059"] { display:none;position:absolute;bottom:80px;right:18px;z-index:200;background:var(--primary);color:var(--text-main);border:none;border-radius:16px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:none;transition:opacity 0.2s;white-space:nowrap; }
[data-zn-style="s0060"] { width:15px;height:15px;flex-shrink:0; }
[data-zn-style="s0061"] { width:14px;height:14px; }
[data-zn-style="s0062"] { width:22px;height:22px;color:var(--text-sec); }
[data-zn-style="s0063"] { width:20px;height:20px; }
[data-zn-style="s0064"] { position:fixed;bottom:90px;right:20px;z-index:2000;display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--bg-body);padding:15px;border-radius:20px;box-shadow:none;border:1px solid var(--border); }
[data-zn-style="s0065"] { width:200px;height:200px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;background:var(--surface-raised);position:relative; }
[data-zn-style="s0066"] { width:20px; }
[data-zn-style="s0067"] { width:20px; }
[data-zn-style="s0068"] { background:transparent; }
[data-zn-style="s0069"] { background:transparent; }
[data-zn-style="s0070"] { border:0;border-radius:16px;padding:4px 8px;background:var(--surface-raised);color:var(--success);font-weight:600;cursor:pointer; }
[data-zn-style="s0071"] { max-width:250px; }
[data-zn-style="s0072"] { background:var(--surface-raised); }
[data-zn-style="s0073"] { margin-left:auto;margin-right:8px; }
[data-zn-style="s0074"] { background:var(--surface-raised); }
[data-zn-style="s0075"] { background:var(--surface-raised); }
[data-zn-style="s0076"] { background:var(--surface-raised); }
[data-zn-style="s0077"] { background:var(--surface-raised); }
[data-zn-style="s0078"] { background:var(--surface-raised); }
[data-zn-style="s0079"] { background:var(--surface-raised); }
[data-zn-style="s0080"] { background:var(--surface-raised); }
[data-zn-style="s0081"] { background:var(--surface-raised); }
[data-zn-style="s0082"] { background:var(--surface-raised); }
[data-zn-style="s0083"] { background:var(--surface-raised); }
[data-zn-style="s0084"] { margin-left:auto;color:var(--text-sec);font-size:14px;margin-right:8px; }
[data-zn-style="s0085"] { background:var(--surface-raised); }
[data-zn-style="s0086"] { background:var(--surface-raised); }
[data-zn-style="s0087"] { background:var(--surface-raised); }
[data-zn-style="s0088"] { background:var(--surface-raised); }
[data-zn-style="s0089"] { background:var(--surface-raised); }
[data-zn-style="s0090"] { color:var(--danger);text-align:center; }
[data-zn-style="s0091"] { text-align:center;padding:10px;color:var(--text-sec);font-size:12px; }
[data-zn-style="s0092"] { font-family:monospace;opacity:0.6;margin-top:4px; }
[data-zn-style="s0093"] { color:var(--primary); }
[data-zn-style="s0094"] { margin-right:5px; }
[data-zn-style="s0095"] { width:100%;height:100%;object-fit:cover; }
[data-zn-style="s0096"] { display:flex;flex-direction:column;gap:3px;min-width:0; }
[data-zn-style="s0097"] { color:var(--primary);font-weight:600; }
[data-zn-style="s0098"] { font-size:12px;color:var(--text-sec);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
[data-zn-style="s0099"] { color:var(--primary); }
[data-zn-style="s0100"] { height:auto;padding:12px 16px;align-items:center; }
[data-zn-style="s0101"] { flex:1;padding-right:15px; }
[data-zn-style="s0102"] { font-size:16px;color:var(--primary);margin-bottom:4px; }
[data-zn-style="s0103"] { font-size:12px;color:var(--text-sec);line-height:1.4; }
[data-zn-style="s0104"] { height:auto;padding:12px 16px;align-items:center; }
[data-zn-style="s0105"] { flex:1;padding-right:15px; }
[data-zn-style="s0106"] { font-size:16px;margin-bottom:4px; }
[data-zn-style="s0107"] { font-size:12px;color:var(--text-sec);line-height:1.4; }
[data-zn-style="s0108"] { flex:1; }
[data-zn-style="s0109"] { height:auto;padding:12px 16px;align-items:center; }
[data-zn-style="s0110"] { flex:1;padding-right:15px; }
[data-zn-style="s0111"] { font-size:16px;margin-bottom:4px; }
[data-zn-style="s0112"] { font-size:12px;color:var(--text-sec);line-height:1.4; }
[data-zn-style="s0113"] { height:auto;padding:12px 16px;align-items:center; }
[data-zn-style="s0114"] { flex:1;padding-right:15px; }
[data-zn-style="s0115"] { font-size:16px;margin-bottom:4px; }
[data-zn-style="s0116"] { font-size:12px;color:var(--text-sec);line-height:1.4; }
[data-zn-style="s0117"] { height:auto;padding:15px 16px;flex-direction:column;align-items:flex-start;gap:8px; }
[data-zn-style="s0118"] { display:flex;justify-content:space-between;width:100%;align-items:center; }
[data-zn-style="s0119"] { font-size:16px;color:var(--danger); }
[data-zn-style="s0120"] { display:flex;align-items:center;gap:8px; }
[data-zn-style="s0121"] { background:var(--surface-raised);color:var(--danger);font-size:12px;font-weight:600;padding:2px 8px;border-radius:10px;min-width:20px;text-align:center;display:none; }
[data-zn-style="s0122"] { font-size:12px;color:var(--text-sec);line-height:1.4; }
[data-zn-style="s0123"] { padding:20px 16px; }
[data-zn-style="s0124"] { z-index:100005; }
[data-zn-style="s0125"] { text-align:center; }
[data-zn-style="s0126"] { margin-bottom:14px; }
[data-zn-style="s0127"] { margin-bottom:20px; }
[data-zn-style="s0128"] { color:var(--danger);text-align:center; }
[data-zn-style="s0129"] { display:flex;gap:10px; }
[data-zn-style="s0130"] { overflow-wrap:anywhere; }
[data-zn-style="s0131"] { text-align:center; }
[data-zn-style="s0132"] { background:var(--surface-raised);border:1px dashed var(--primary);border-radius:12px;padding:18px;text-align:center;margin-bottom:14px;user-select:all; }
[data-zn-style="s0133"] { font-size:30px;font-weight:600;letter-spacing:8px;font-family:monospace;color:var(--primary); }
[data-zn-style="s0134"] { text-align:center; }
[data-zn-style="s0135"] { display:flex;flex-direction:column;gap:10px; }
[data-zn-style="s0136"] { color:var(--primary); }
[data-zn-style="s0137"] { margin-right:5px; }
[data-zn-style="s0138"] { display:none;text-align:center;padding:50px 24px 40px;color:var(--text-sec); }
[data-zn-style="s0139"] { width:64px;height:64px;margin:0 auto 20px;border-radius:50%;background:var(--surface-raised);display:flex;align-items:center;justify-content:center; }
[data-zn-style="s0140"] { width:32px;height:32px; }
[data-zn-style="s0141"] { font-size:17px;font-weight:600;margin-bottom:8px;color:var(--text); }
[data-zn-style="s0142"] { font-size:14px;line-height:1.6;max-width:260px;margin:0 auto; }
[data-zn-style="s0143"] { text-align:center;padding:50px 20px;color:var(--text-sec); }
[data-zn-style="s0144"] { margin:0 auto 12px; }
[data-zn-style="s0145"] { font-size:14px; }
[data-zn-style="s0146"] { padding:8px 12px 20px;display:flex;flex-direction:column;gap:4px; }
[data-zn-style="s0147"] { color:var(--primary); }
[data-zn-style="s0148"] { margin-right:5px; }
[data-zn-style="s0149"] { justify-content:space-between; }
[data-zn-style="s0150"] { position:relative;width:50px;height:30px;background:var(--bg-body);border-radius:15px;border:1px solid var(--text-sec);display:flex;align-items:center;padding:2px;transition:background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease; }
[data-zn-style="s0151"] { width:24px;height:24px;background:var(--primary);border-radius:50%;transition:background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease;transform:translateX(0); }
[data-zn-style="s0152"] { margin-top:16px; }
[data-zn-style="s0153"] { padding:16px; }
[data-zn-style="s0154"] { --preview-bg:#f5f6f5;--preview-sidebar:#e6e9e7;--preview-primary:#486986;--preview-border:#d8dfe4 }
[data-zn-style="s0155"] { --preview-bg:#232425;--preview-sidebar:#282929;--preview-primary:#a4bdd1;--preview-border:#464c51 }
[data-zn-style="s0156"] { --preview-bg:#1b1e21;--preview-sidebar:#22262a;--preview-primary:#a6c3d9;--preview-border:#404a53 }
[data-zn-style="s0157"] { --preview-bg:#29282a;--preview-sidebar:#302f32;--preview-primary:#b5c3d7;--preview-border:#53555c }
[data-zn-style="s0158"] { --preview-bg:#242a2b;--preview-sidebar:#2b3233;--preview-primary:#a9c4ce;--preview-border:#4d5a5d }
[data-zn-style="s0159"] { --preview-bg:#2c2b2c;--preview-sidebar:#343234;--preview-primary:#bbc7d7;--preview-border:#59585f }
[data-zn-style="s0160"] { padding:20px; }
[data-zn-style="s0161"] { display:flex;align-items:center;gap:15px; }
[data-zn-style="s0162"] { font-size:12px;color:var(--text-sec); }
[data-zn-style="s0163"] { flex:1; }
[data-zn-style="s0164"] { font-size:20px;color:var(--text-main); }
[data-zn-style="s0165"] { margin-top:16px; }
[data-zn-style="s0166"] { padding:6px;display:flex;gap:6px; }
[data-zn-style="s0167"] { margin-top:16px; }
[data-zn-style="s0168"] { padding:16px; }
[data-zn-style="s0169"] { display:flex;align-items:center;gap:15px; }
[data-zn-style="s0170"] { font-size:12px;color:var(--text-sec); }
[data-zn-style="s0171"] { flex:1; }
[data-zn-style="s0172"] { font-size:20px;color:var(--text-main); }
[data-zn-style="s0173"] { text-align:center;font-weight:600;margin-top:6px;color:var(--text-sec);font-size:13px; }
[data-zn-style="s0174"] { margin-top:10px;background:var(--msg-in);color:var(--text-main);display:block; }
[data-zn-style="s0175"] { margin-top:16px; }
[data-zn-style="s0176"] { padding:14px; }
[data-zn-style="s0177"] { font-size:13px;font-weight:600;color:var(--text-sec);margin-bottom:6px; }
[data-zn-style="s0178"] { font-size:13px;font-weight:600;color:var(--text-sec);margin:14px 0 6px; }
[data-zn-style="s0179"] { margin-top:16px; }
[data-zn-style="s0180"] { color:var(--primary); }
[data-zn-style="s0181"] { margin-right:5px; }
[data-zn-style="s0182"] { padding:16px; }
[data-zn-style="s0183"] { display:flex;justify-content:space-between;margin-bottom:8px; }
[data-zn-style="s0184"] { font-size:14px; }
[data-zn-style="s0185"] { font-size:15px; }
[data-zn-style="s0186"] { display:flex;justify-content:space-between; }
[data-zn-style="s0187"] { font-size:14px; }
[data-zn-style="s0188"] { font-size:15px; }
[data-zn-style="s0189"] { padding:6px; }
[data-zn-style="s0190"] { padding:8px 20px;color:var(--text-sec);font-size:12px;line-height:1.4; }
[data-zn-style="s0191"] { color:var(--primary); }
[data-zn-style="s0192"] { margin-right:5px; }
[data-zn-style="s0193"] { margin-bottom:15px; }
[data-zn-style="s0194"] { width:100px;height:100px; }
[data-zn-style="s0195"] { position:absolute;inset:0;background:rgba(0,0,0,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-main); }
[data-zn-style="s0196"] { min-height:80px;resize:none; }
[data-zn-style="s0197"] { z-index:5000; }
[data-zn-style="s0198"] { margin:0 20px 20px 20px;width:calc(100% - 40px); }
[data-zn-style="s0199"] { width:20px;height:20px;color:var(--text-sec);flex-shrink:0; }
[data-zn-style="s0200"] { flex:1;font-size:15px;color:var(--text-main); }
[data-zn-style="s0201"] { width:16px;height:16px;color:var(--text-sec);flex-shrink:0; }
[data-zn-style="s0202"] { z-index:5001; }
[data-zn-style="s0203"] { text-align:center;padding:20px;color:var(--text-sec); }
[data-zn-style="s0204"] { z-index:100005; }
[data-zn-style="s0205"] { z-index:100005; }
[data-zn-style="s0206"] { z-index:2000; }
[data-zn-style="s0207"] { margin-top:10px; }
[data-zn-style="s0208"] { z-index:100005; }
[data-zn-style="s0209"] { width:60px;height:60px;background:var(--surface-raised);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px; }
[data-zn-style="s0210"] { width:30px;height:30px;stroke:var(--danger); }
[data-zn-style="s0211"] { font-size:0.95rem;margin-bottom:24px;line-height:1.4; }
[data-zn-style="s0212"] { z-index:100005; }
[data-zn-style="s0213"] { width:60px;height:60px;background:var(--surface-raised);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px; }
[data-zn-style="s0214"] { width:30px;height:30px;stroke:var(--danger);fill:none; }
[data-zn-style="s0215"] { font-size:0.95rem;margin-bottom:24px;line-height:1.4; }
[data-zn-style="s0216"] { z-index:100005; }
[data-zn-style="s0217"] { width:60px;height:60px;background:var(--surface-raised);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px; }
[data-zn-style="s0218"] { width:30px;height:30px;stroke:var(--danger);fill:none; }
[data-zn-style="s0219"] { font-size:0.95rem;margin-bottom:24px;line-height:1.4; }
[data-zn-style="s0220"] { z-index:100005; }
[data-zn-style="s0221"] { width:16px;height:16px; }
[data-zn-style="s0222"] { width:16px;height:16px; }
[data-zn-style="s0223"] { width:16px;height:16px; }
[data-zn-style="s0224"] { z-index:110000;background:rgba(0,0,0,0.8); }
[data-zn-style="s0225"] { width:50px;height:50px;background:var(--surface-raised);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:15px; }
[data-zn-style="s0226"] { width:26px;height:26px;stroke:var(--danger); }
[data-zn-style="s0227"] { font-size:13px;margin-bottom:15px;line-height:1.4; }
[data-zn-style="s0228"] { margin-bottom:15px;border:1px solid var(--border);border-radius:8px;overflow:hidden;display:flex; }
[data-zn-style="s0229"] { font-size:18px;letter-spacing:2px;font-weight:bold;text-transform:uppercase; }
[data-zn-style="s0230"] { color:var(--danger);height:16px;margin-top:5px; }
[data-zn-style="s0231"] { margin-top:15px; }
[data-zn-style="s0232"] { z-index:6000; }
[data-zn-style="s0233"] { width:60px;height:60px;background:var(--surface-raised);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px; }
[data-zn-style="s0234"] { width:30px;height:30px;stroke:var(--primary);fill:none; }
[data-zn-style="s0235"] { font-size:0.95rem;margin-bottom:24px;line-height:1.5; }
[data-zn-style="s0236"] { z-index:100005; }
[data-zn-style="s0237"] { width:60px;height:60px;background:var(--surface-raised);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px; }
[data-zn-style="s0238"] { width:30px;height:30px;stroke:var(--danger);fill:none; }
[data-zn-style="s0239"] { font-size:0.95rem;margin-bottom:24px;line-height:1.4; }
[data-zn-style="s0240"] { z-index:100005; }
[data-zn-style="s0241"] { width:60px;height:60px;background:var(--surface-raised);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px; }
[data-zn-style="s0242"] { width:30px;height:30px;stroke:var(--danger);fill:none; }
[data-zn-style="s0243"] { font-size:0.95rem;margin-bottom:24px;line-height:1.4; }
[data-zn-style="s0244"] { --wallpaper-color:var(--bg-body) }
[data-zn-style="s0245"] { --wallpaper-color:#E6E9E7 }
[data-zn-style="s0246"] { --wallpaper-color:#EEF6FF }
[data-zn-style="s0247"] { --wallpaper-color:#DCE9F6 }
[data-zn-style="s0248"] { --wallpaper-color:#C1D3E5 }
[data-zn-style="s0249"] { --wallpaper-color:#363A3E }
[data-zn-style="s0250"] { --wallpaper-color:#2B2D2E }
[data-zn-style="s0251"] { --wallpaper-color:#F5F6F5 }
[data-zn-style="s0252"] { --wallpaper-color:#232425 }
[data-zn-style="s0253"] { width:24px;height:24px; }
[data-zn-style="s0254"] { width:24px;height:24px; }
[data-zn-style="s0255"] { display:none; }
[data-zn-style="s0256"] { width:24px;height:24px; }
[data-zn-style="s0257"] { width:22px;height:22px; }
[data-zn-style="s0258"] { width:24px;height:24px; }
[data-zn-style="s0259"] { width:24px;height:24px; }
[data-zn-style="s0260"] { width:100%;margin-bottom:8px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:7px;font-weight:600; }
[data-zn-style="s0261"] { visibility:hidden; }
[data-zn-style="s0262"] { color:var(--primary); }
[data-zn-style="s0263"] { z-index:200004; }
[data-zn-style="s0264"] { position:relative;padding:26px 24px 24px;text-align:center; }
[data-zn-style="s0265"] { width:58px;height:58px;margin:0 auto 14px;border-radius:17px;background:var(--surface-raised);color:var(--text-main);display:flex;align-items:center;justify-content:center; }
[data-zn-style="s0266"] { width:30px;height:30px; }
[data-zn-style="s0267"] { font-size:14px;line-height:1.45;color:var(--text-sec);margin:0 0 18px; }
[data-zn-style="s0268"] { position:relative;width:220px;height:220px;margin:0 auto 14px;border-radius:16px;background:var(--surface-raised);display:flex;align-items:center;justify-content:center;overflow:hidden; }
[data-zn-style="s0269"] { display:none; }
[data-zn-style="s0270"] { height:4px;border-radius:4px;background:rgba(128,128,128,.14);overflow:hidden;margin-bottom:12px; }
[data-zn-style="s0271"] { height:100%;width:100%;background:var(--surface-raised);transition:width 1s linear; }
[data-zn-style="s0272"] { min-height:40px;font-size:13px;line-height:1.4;color:var(--text-sec);margin:0 0 12px; }
[data-zn-style="s0273"] { padding:12px 14px;border-radius:14px;background:var(--surface-raised);font-size:13px;text-align:left;color:var(--text-sec);margin-bottom:12px; }
[data-zn-style="s0274"] { display:none;gap:8px; }
[data-zn-style="s0275"] { height:44px;border-radius:16px;background:var(--surface-raised);color:var(--text-main); }
[data-zn-style="s0276"] { height:44px;border-radius:16px; }
[data-zn-style="s0277"] { height:44px;border-radius:16px; }
[data-zn-style="s0278"] { z-index:200001; }
[data-zn-style="s0279"] { padding:28px 24px 24px;text-align:center; }
[data-zn-style="s0280"] { width:72px;height:72px;background:var(--surface-raised);border-radius:20px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center; }
[data-zn-style="s0281"] { width:36px;height:36px; }
[data-zn-style="s0282"] { font-size:14px;color:var(--text-sec);line-height:1.6;margin-bottom:28px; }
[data-zn-style="s0283"] { border-radius:14px;height:48px;font-size:15px;font-weight:600; }
[data-zn-style="s0284"] { width:18px;height:18px;margin-right:8px; }
[data-zn-style="s0285"] { z-index:200002; }
[data-zn-style="s0286"] { z-index:200003; }
[data-zn-style="s0287"] { padding:28px 24px 24px;text-align:center; }
[data-zn-style="s0288"] { width:64px;height:64px;background:var(--surface-raised);border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center; }
[data-zn-style="s0289"] { width:32px;height:32px; }
[data-zn-style="s0290"] { font-size:14px;color:var(--text-sec);margin-bottom:20px;line-height:1.5; }
[data-zn-style="s0291"] { background:var(--surface-raised);border-radius:14px;padding:14px 16px;text-align:left;margin-bottom:20px; }
[data-zn-style="s0292"] { display:flex;gap:8px;margin-bottom:8px;font-size:13px;color:var(--text-sec); }
[data-zn-style="s0293"] { width:16px;height:16px;flex-shrink:0;margin-top:1px; }
[data-zn-style="s0294"] { color:var(--text-main); }
[data-zn-style="s0295"] { display:flex;gap:8px;margin-bottom:8px;font-size:13px;color:var(--text-sec); }
[data-zn-style="s0296"] { width:16px;height:16px;flex-shrink:0;margin-top:1px; }
[data-zn-style="s0297"] { color:var(--text-main); }
[data-zn-style="s0298"] { display:flex;gap:8px;font-size:13px;color:var(--text-sec); }
[data-zn-style="s0299"] { width:16px;height:16px;flex-shrink:0;margin-top:1px; }
[data-zn-style="s0300"] { color:var(--text-main); }
[data-zn-style="s0301"] { display:flex;gap:10px; }
[data-zn-style="s0302"] { border:1px solid var(--border);border-radius:12px;height:44px;font-weight:600;color:var(--text-sec);background:transparent; }
[data-zn-style="s0303"] { border-radius:12px;height:44px;font-weight:600; }
[data-zn-style="s0304"] { display:none;position:absolute;bottom:60px;left:0;right:0;background:var(--surface-raised);border-top:1px solid var(--border);padding:6px 16px;font-size:13px;color:var(--text-sec);text-align:center;z-index:100; }
[data-zn-style="s0305"] { display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.6);backdrop-filter:none;-webkit-backdrop-filter:none;align-items:center;justify-content:center; }
[data-zn-style="s0306"] { max-width:420px;width:calc(100% - 40px);background:var(--surface, var(--surface-raised));border-radius:16px;overflow:hidden;box-shadow:none;position:relative;animation:none; }
[data-zn-style="s0307"] { padding:28px 24px 20px;text-align:center;background:var(--surface-raised); }
[data-zn-style="s0308"] { font-size:48px;margin-bottom:12px; }
[data-zn-style="s0309"] { font-size:1.3rem;font-weight:600;margin-bottom:8px;color:var(--text-main); }
[data-zn-style="s0310"] { font-size:14px;color:var(--text-sec);line-height:1.5; }
[data-zn-style="s0311"] { padding:24px; }
[data-zn-style="s0312"] { font-size:15px;color:var(--text-main, var(--text-main));line-height:1.6;margin-bottom:20px;text-align:center; }
[data-zn-style="s0313"] { display:block;text-decoration:none; }
[data-zn-style="s0314"] { width:100%;padding:14px 20px;background:var(--surface-raised);color:var(--text-main);border:none;border-radius:14px;font-size:16px;font-weight:600;cursor:pointer;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform 0.2s, box-shadow 0.2s; }
[data-zn-style="s0315"] { width:100%;padding:12px 20px;background:transparent;color:var(--text-sec, var(--text-sec));border:1px solid var(--border, var(--border));border-radius:14px;font-size:15px;font-weight:500;cursor:pointer; }

/* Broadcast components: formerly injected at runtime. */
@layer features {
                            .channel-live-header{display:flex;align-items:center;gap:7px;max-width:220px;min-width:0;margin-left:8px;padding:7px 10px;border:0;border-radius:16px;color:var(--text-main);background:var(--surface-raised);cursor:pointer;box-shadow:none;font-family:inherit;font-size:11px;line-height:1.1;font-weight:600;flex:0 1 auto;overflow:hidden}
                            .channel-live-header.hidden{display:none}.channel-live-header-copy{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel-live-header-title{font-weight:600;opacity:.88;margin-left:3px}.channel-live-dot{width:7px;height:7px;min-width:7px;border-radius:50%;background:var(--surface-raised);box-shadow:none;animation:channelLivePulse 1.3s infinite}
                            @keyframes channelLivePulse{50%{opacity:.5;transform:scale(.82)}}
                            #channel-broadcast-modal{position:fixed;inset:0;z-index:10050;background:var(--surface-raised);color:var(--text-main);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:none;-webkit-backdrop-filter:none}
                            #channel-broadcast-modal.hidden{display:none}.channel-live-top{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--surface-raised);border-bottom:1px solid var(--border)}
                            .channel-broadcast-mobile-card{width:min(430px,100%);box-sizing:border-box;padding:30px 24px 22px;border-radius:16px;text-align:center;background:var(--surface-raised);border:1px solid var(--border);box-shadow:none}
                            .channel-broadcast-mobile-icon{width:72px;height:72px;margin:0 auto 18px;border-radius:16px;display:grid;place-items:center;font-size:34px;background:var(--surface-raised);box-shadow:none}
                            .channel-broadcast-mobile-card h2{margin:0 0 10px;font-size:24px}.channel-broadcast-mobile-card p{margin:0 auto 22px;max-width:330px;color:var(--text-sec);line-height:1.5}
                            .channel-broadcast-mobile-actions{display:grid;gap:9px}.channel-broadcast-mobile-actions a,.channel-broadcast-mobile-actions button{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:0;border-radius:16px;font:700 14px/1 inherit;text-decoration:none;cursor:pointer}
                            .channel-broadcast-mobile-primary{color:var(--text-main);background:var(--surface-raised)}.channel-broadcast-mobile-secondary{color:var(--text-sec);background:var(--hover)}.channel-broadcast-mobile-close{color:var(--text-sec);background:transparent}
                            .channel-live-badge{font:800 11px/1 sans-serif;background:var(--surface-raised);border-radius:8px;padding:6px 8px}.channel-live-stage{flex:1;min-height:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:8px;padding:8px;overflow:auto}
                            .channel-live-video{width:100%;height:100%;min-height:220px;object-fit:cover;background:var(--surface-raised);border-radius:16px}.channel-live-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;gap:12px;color:var(--text-sec);text-align:center}
                            .channel-live-controls{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface-raised);flex-wrap:wrap}.channel-live-control{border:0;border-radius:16px;background:var(--surface-raised);color:var(--text-main);padding:11px 15px;font-weight:600;cursor:pointer}.channel-live-control.danger{background:var(--surface-raised)}.channel-live-control.primary{background:var(--surface-raised)}
                            .channel-live-drawer{position:absolute;right:12px;top:70px;bottom:86px;width:min(360px,calc(100vw - 24px));background:var(--surface-raised);border:1px solid var(--border);border-radius:16px;padding:12px;overflow:auto;backdrop-filter:none}.channel-live-drawer.hidden{display:none}
                            .channel-live-person{display:flex;align-items:center;gap:10px;padding:9px;border-radius:14px}.channel-live-person img{width:38px;height:38px;border-radius:50%;object-fit:cover}.channel-live-person button{margin-left:auto}
                            .channel-live-media-menu{position:fixed;inset:0;z-index:10060;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;padding:18px}.channel-live-media-menu.hidden{display:none}.channel-live-media-card{width:min(480px,100%);background:var(--surface-raised);border-radius:16px;padding:14px}.channel-live-media-card button{display:flex;width:100%;margin:7px 0;justify-content:flex-start}
                            .channel-live-setup{margin:auto;width:min(520px,calc(100% - 28px));background:var(--surface-raised);border-radius:16px;padding:24px}.channel-live-setup input,.channel-live-setup select{width:100%;box-sizing:border-box;margin-top:12px;padding:13px;border-radius:13px;border:1px solid var(--border);background:var(--surface-raised);color:var(--text-main)}
                            @media(max-width:700px){.channel-live-header{max-width:64px;margin-left:3px;padding:7px 8px}.channel-live-header-title{display:none}#channel-broadcast-modal{top:0}.channel-live-top{padding:10px}.channel-live-stage{grid-template-columns:1fr}.channel-live-video{min-height:190px}.channel-live-controls{gap:7px}.channel-live-control{padding:10px 12px;font-size:13px}.channel-live-drawer{top:62px;bottom:78px}}
                        }
@keyframes adminBannerIn{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}

/* Web regression fixes, 13 October 2026. */
.dot { width: 13px; height: 13px; border: 2px solid var(--bg-body); }
.dot.online { background: #22a565; }
.dot.offline { background: #788590; }
#head-dot { width: 14px; height: 14px; }
.chat-header-status-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-header-status-row #head-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#float-date-indicator.chat-header-date { position: static; flex: 0 0 auto; transform: none; background: transparent; color: var(--text-sec); border: 0; padding: 0; margin: 0; font-size: 11px; line-height: 1.3; z-index: auto; border-radius: 0; }
.chat-header-date::before { content: '·'; margin-right: 6px; }
.sticker-catalog-status { display: flex; align-items: center; gap: 8px; padding: 4px 12px; color: var(--text-sec); font-size: 12px; }
.sticker-catalog-status[hidden] { display: none; }
.sticker-catalog-status .btn { min-height: 32px; padding: 4px 8px; flex: 0 0 auto; }

/* Shared navigation and identity indicators. */
:is(.rail-icon-wrap,.nav-icon)>.zn-icon{display:inline-grid!important;place-items:center;font-size:22px;line-height:1;width:22px;height:22px;flex:0 0 22px}.nav-icon{position:relative;display:grid;place-items:center;min-width:24px;min-height:24px}.workspace-navigation .rail-item{min-width:0;gap:6px;justify-content:center}.workspace-navigation .rail-item>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-navigation .rail-icon-wrap{width:22px;height:22px}.account-badges{display:inline-flex;align-items:center;flex:0 0 auto;padding-inline:3px;vertical-align:middle;line-height:1}.account-badges .account-status-badge{width:17px;height:17px;flex:0 0 17px;margin:0;border-radius:4px;background:var(--sidebar-bg,var(--bg-body));color:var(--primary);position:relative}.account-badges .account-status-badge+.account-status-badge{margin-left:-3px;box-shadow:-1px 0 0 var(--bg-body)}#head-name .account-badges{margin-left:5px}.chat-item-name .account-badges{margin-right:3px}.account-badges .account-status-badge:focus-visible{outline:2px solid var(--primary)}

/* Keep expanded desktop tabs and the collapsed vertical rail in the same cascade. */
@media (min-width:800px) and (pointer:fine), (min-width:800px) and (min-height:501px), (min-width:800px) and (min-width:1025px) {
  .workspace-navigation { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .workspace-navigation .rail-item { flex-direction:column; height:60px; min-height:60px; padding:6px 2px; gap:4px; }
  .workspace-navigation .rail-item>span { font-size:11px; }
  .workspace-navigation .rail-icon-wrap { display:grid; place-items:center; }
  :root[data-rail-collapsed] .workspace-navigation { display:flex; flex-direction:column; align-items:stretch; gap:6px; }
  :root[data-rail-collapsed] .workspace-navigation .rail-item { flex:0 0 48px; width:100%; height:48px; min-height:48px; padding:8px 0; gap:0; }
  :root[data-rail-collapsed] .workspace-navigation .rail-item>span { display:none; }
  :root[data-rail-collapsed] .workspace-navigation .rail-icon-wrap { width:24px; height:24px; }
}
@media (max-width:799px), (max-width:1024px) and (max-height:500px) and (hover:none) and (pointer:coarse) {
  .workspace-navigation { display:none; }
}

/* Web layout corrections, 2026-11-06. Local fonts also work without Google Fonts. */
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/public/fonts/NunitoSans-Regular.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/public/fonts/NunitoSans-Medium.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/public/fonts/NunitoSans-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/public/fonts/NunitoSans-Bold.woff2') format('woff2')}

#modal-menu{padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
#modal-menu .menu-dialog{display:flex;flex-direction:column;width:min(560px,100%);height:auto;max-height:min(800px,calc(var(--viewport-height,100dvh) - max(12px,env(safe-area-inset-top,0px)) - max(12px,env(safe-area-inset-bottom,0px))));padding:0;overflow:hidden;gap:0}
.menu-dialog-header{display:flex;align-items:center;gap:14px;flex:none;min-height:64px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg-body)}
.menu-dialog-header h2{font:700 20px/1.3 var(--font);margin:0;min-width:0}
.menu-back-button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:8px;color:var(--primary);flex:none}
.menu-back-button .icon{width:22px;height:22px;margin:0;flex:none}
#modal-menu .menu-dialog-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:12px}
#modal-menu .menu-header-card{position:relative;flex:none;margin:0;padding:22px 20px 18px}
#modal-menu .menu-user-info{min-width:0;max-width:100%}
#modal-menu .menu-identity-line{flex-wrap:wrap;justify-content:center}
#modal-menu :is(.menu-name-text,#menu-bio){overflow-wrap:anywhere}
#modal-menu .menu-sections{overflow:visible;padding:12px 16px 8px}
#modal-menu .menu-profile-entry{margin-bottom:20px}

.workspace-sidebar .search-container::before,.workspace-sidebar .search-container::after{content:none}
.sidebar-search-shell{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:44px;padding:0 8px 0 12px;border:1px solid var(--border-subtle,var(--border));border-radius:12px;background:var(--bg-body)}
.sidebar-search-shell:focus-within{border-color:var(--primary)}
.sidebar-search-shell:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.workspace-sidebar .sidebar-search-shell>#desktop-search-input:focus-visible{outline:none}
.sidebar-search-shell>.sidebar-search-icon{display:block;flex:none;width:20px;height:20px;color:var(--text-sec)}
.workspace-sidebar .sidebar-search-shell>#desktop-search-input{flex:1;min-width:0;width:0;height:44px;min-height:44px;margin:0;padding:10px 0;border:0;border-radius:0;background:transparent;box-shadow:none;font:400 16px/24px var(--font)}
.workspace-sidebar .sidebar-search-shell>.search-clear{position:static;inset:auto;display:flex;flex:none;align-items:center;justify-content:center;width:32px;height:40px;margin:0;padding:0}
.sidebar-search-shell:has(input:placeholder-shown)>.search-clear{visibility:hidden;pointer-events:none}
.directory-search>svg,.directory-search>.icon{top:50%;transform:translateY(-50%);margin:0}
.workspace-sidebar>.workspace-footer{position:relative;flex:none;z-index:2;background:var(--sidebar-bg);isolation:isolate}
.workspace-sidebar .sidebar{min-height:0}
.workspace-sidebar .list-container{min-height:0;overscroll-behavior-y:contain}
.workspace-footer .rail-profile{overflow:hidden}
.workspace-footer .rail-profile-copy{min-width:0;overflow:hidden}
.workspace-footer .rail-profile-name,.workspace-footer .rail-profile-handle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chat-header .avatar:has(#head-avatar){width:40px;height:40px;min-width:40px;aspect-ratio:1;flex:0 0 40px;border-radius:50%}
.chat-header #head-avatar{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:50%}
#rail-profile-avatar{aspect-ratio:1;object-fit:cover;border-radius:50%;flex:none}

#input-container[data-composer-mode=edit] .composer-toolbar{align-items:end}
#input-container[data-composer-mode=edit] #btn-record-mode{display:none}
#input-container[data-composer-mode=edit] #msg-input{max-height:min(180px,calc(var(--viewport-height,100dvh) * .28));overflow-y:auto;overscroll-behavior:contain;scroll-padding:8px;resize:none}
#input-container>#edit-indicator{position:relative;inset:auto;bottom:auto;left:auto;transform:none;flex:none;width:100%;min-height:44px;margin:0;padding:4px 8px;box-sizing:border-box;border:0;border-bottom:1px solid var(--border-subtle,var(--border));border-radius:0;background:transparent}
#input-container>#edit-indicator .edit-indicator-label{display:flex;align-items:center;gap:8px;min-width:0;flex:1;font-size:14px;line-height:20px}
#input-container>#edit-indicator .edit-indicator-close{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;margin:0;border:0;background:transparent;color:var(--text-sec)}
#input-container>#edit-indicator.hidden{display:none!important}

.settings-theme-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;appearance:none;-webkit-appearance:none;text-align:left;color:var(--text-main);font:inherit;cursor:pointer}
.settings-theme-track{display:block;flex:none;box-sizing:border-box;width:48px;height:28px;padding:3px;border:0;border-radius:999px;background:var(--border);transition:background-color var(--motion-fast) var(--ease-standard)}
.settings-theme-thumb{display:block;width:22px;height:22px;border-radius:50%;background:var(--bg-body);box-shadow:0 1px 3px rgb(0 0 0 / .18);transition:transform var(--motion-fast) var(--ease-standard)}
.settings-theme-toggle[aria-checked=true] .settings-theme-track{background:var(--primary)}
.settings-pane-header{flex:none}
.settings-pane-header>.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:8px 12px;border-radius:12px;font:600 14px/20px var(--font)}
.settings-pane-header>.btn .icon{display:block;flex:none;width:20px;height:20px;margin:0!important}
.settings-page-body{min-height:0;overscroll-behavior:contain}
@media(prefers-reduced-motion:reduce){.settings-theme-track,.settings-theme-thumb{transition:none}}