:root {
    --bg-page:       #0d0e10;
    --bg-card:       rgba(42, 45, 54, .16);
    --bg-card-deep:  rgba(22, 24, 30, .22);
    --bg-input:      rgba(14, 16, 21, .30);
    --bg-hover:      rgba(72, 78, 94, .18);
    --bg-modal:      rgba(31, 34, 43, .78);

    --border-soft:   rgba(133, 145, 171, .12);
    --border-accent: #8c96d0;
    --border-input:  #454955;

    --text-primary:  #ffffff;
    --text-muted:    #afc2d4;
    --text-subtle:   #8a93a9;


    --accent-notes:  #c85a1e;
    --accent-files:  #d67924;
    --accent-files-2:#e68a35;
    --accent-rooms:  #217ce5;
    --accent-rooms-2:#2b86ee;
    --accent-call:   #d8b34a;
    --accent-passwords:#17a594;
    --accent-passwords-2:#22b9a7;
    --accent-vault:  #7c5cff;
    --accent-vault-2:#9277ff;
    --accent-danger: #e05252;
    --accent-success:#3ab15a;

    --toggle-on:     #217ce5;
    --toggle-thumb:  #e1e7f0;
    --toggle-off:    #3f424a;

    --shadow-modal:  0 8px 40px rgba(0,0,0,.6);
    --shadow-card:   0 18px 52px rgba(0,0,0,.12);
    --shadow-btn:    1px 2px 0 #1e2023;

    --surface-card:  linear-gradient(180deg, rgba(58, 63, 76, .11), rgba(24, 27, 34, .15));
    --surface-card-soft: linear-gradient(180deg, rgba(48, 53, 65, .09), rgba(22, 25, 32, .13));
    --surface-modal: linear-gradient(180deg, rgba(78, 84, 102, .16), rgba(25, 28, 36, .08));
    --surface-border: rgba(169, 184, 214, .11);

    --r-card:   16px;
    --r-input:  8px;
    --r-btn:    12px;
    --r-pill:   100px;

    --pwa-compact-width: 440px;
    --pwa-chat-width: 980px;

    --gap-xs: 6px;
    --gap-sm: 8px;
    --gap-md: 16px;
    --gap-lg: 24px;
    --gap-xl: 40px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

html.i18n-pending [data-i18n],
html.i18n-pending [data-i18n-html] {
    visibility: hidden;
}

html.i18n-pending [data-i18n-placeholder]::placeholder {
    color: transparent;
}

[hidden] { display: none !important; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    background: var(--bg-page);
    color: var(--text-primary);
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; }
code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--bg-card-deep);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-primary);
}


.bg-gradient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('../img/bg-ambient-gradient-mobile.webp');
    background-size: cover;
    background-position: center top;
    opacity: .50;
}
.pwa-titlebar-drag {
    display: none;
}
@media (min-width: 768px) {
    .bg-gradient { background-image: url('../img/bg-ambient-gradient-desktop.webp'); }
}


.page-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    align-items: start;
    align-content: start;
    gap: 22px;
    min-height: 100dvh;
    width: min(100%, 1280px);
    max-width: 1280px;
    padding: 22px 16px 40px;
    margin: 0 auto;
}
.app-sidebar {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: calc(100dvh - 44px);
    padding: 18px;
    border: 1px solid rgba(169, 184, 214, .12);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(26, 28, 36, .22), rgba(13, 15, 20, .16)),
        rgba(12, 14, 19, .14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--shadow-card);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
.app-sidebar-brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 12px;
    padding: 2px 4px 18px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-primary);
}
.app-sidebar-logo-link {
    display: block;
    line-height: 0;
    text-decoration: none;
}
.app-sidebar-language {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}
.app-sidebar-logo {
    display: block;
    width: 124px;
    height: auto;
}
.app-sidebar-by {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin-left: 49px;
    color: var(--text-subtle);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
}
.app-sidebar-by:hover { color: var(--text-muted); }
.app-menu-toggle {
    display: none;
    appearance: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(169, 184, 214, .12);
    border-radius: 12px;
    background: rgba(22, 24, 30, .24);
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.app-menu-toggle span,
.app-menu-toggle span::before,
.app-menu-toggle span::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .18s, opacity .18s;
}
.app-menu-toggle span {
    position: relative;
}
.app-menu-toggle span::before,
.app-menu-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
}
.app-menu-toggle span::before { top: -6px; }
.app-menu-toggle span::after { top: 6px; }
body.app-menu-open .app-menu-toggle span { background: transparent; }
body.app-menu-open .app-menu-toggle span::before { transform: translateY(6px) rotate(45deg); }
body.app-menu-open .app-menu-toggle span::after { transform: translateY(-6px) rotate(-45deg); }
.app-menu-toggle:focus-visible {
    outline: 2px solid var(--accent-rooms);
    outline-offset: 2px;
}
.app-sidebar-nav {
    flex: 0 0 auto;
}
.top-tab-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}
.top-tab-btn {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px 18px;
    border-radius: var(--r-pill);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.app-sidebar-tab {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 13px;
    text-align: left;
}
.top-tab-btn.active,
.top-tab-btn[aria-selected="true"] {
    background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
    color: var(--text-primary);
}
.app-sidebar-tab.active,
.app-sidebar-tab[aria-selected="true"] {
    border-color: rgba(169, 184, 214, .12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.top-tab-btn:not(.active):hover { color: var(--text-primary); }
.top-tab-btn:focus-visible { outline: 2px solid var(--accent-rooms); outline-offset: 2px; }
.app-sidebar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: var(--text-muted);
    background: rgba(72, 78, 94, .14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.app-sidebar-icon::before {
    content: "";
    width: 19px;
    height: 19px;
    background: currentColor;
    -webkit-mask: var(--nav-icon) center / contain no-repeat;
    mask: var(--nav-icon) center / contain no-repeat;
}
.app-sidebar-icon[data-icon="notes"] { --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 3h9l4 4v14H6V3Zm8 1.8V8h3.2L14 4.8ZM8 10v1.8h8V10H8Zm0 4v1.8h8V14H8Zm0 4v1.8h6V18H8Z'/%3E%3C/svg%3E"); }
.app-sidebar-icon[data-icon="files"] { --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 6.5A2.5 2.5 0 0 1 6.5 4h4l2 2h5A2.5 2.5 0 0 1 20 8.5v8A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-10Zm2.5-.7a.7.7 0 0 0-.7.7v1h12.4a.7.7 0 0 0-.7-.7h-5.7l-2-2H6.5Zm-.7 3.5v7.2c0 .39.31.7.7.7h11c.39 0 .7-.31.7-.7V9.3H5.8Z'/%3E%3C/svg%3E"); }
.app-sidebar-icon[data-icon="chat"] { --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 5.5A3.5 3.5 0 0 1 8.5 2h7A3.5 3.5 0 0 1 19 5.5v5A3.5 3.5 0 0 1 15.5 14h-4.7l-4.2 4.2A1 1 0 0 1 5 17.5v-12Zm3.5-1.7a1.7 1.7 0 0 0-1.7 1.7v9.6l3.2-3h5.5a1.7 1.7 0 0 0 1.7-1.7v-5a1.7 1.7 0 0 0-1.7-1.7h-7Z'/%3E%3C/svg%3E"); }
.app-sidebar-icon[data-icon="call"] { --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7.3 3.2c.6-.35 1.36-.22 1.8.31l2.1 2.55c.38.46.43 1.1.12 1.62L10.1 9.8a10.8 10.8 0 0 0 4.1 4.1l2.12-1.22c.52-.31 1.16-.26 1.62.12l2.55 2.1c.53.44.66 1.2.31 1.8l-1.13 1.94A3.2 3.2 0 0 1 16.54 20C9.6 19.26 4.74 14.4 4 7.46a3.2 3.2 0 0 1 1.36-3.13L7.3 3.2Zm.55 1.75L6.3 5.86a1.4 1.4 0 0 0-.54 1.4c.64 6.05 4.94 10.35 10.99 11a1.4 1.4 0 0 0 1.4-.55l.9-1.56-2-1.66-2.06 1.2a1.7 1.7 0 0 1-1.66.03 12.6 12.6 0 0 1-5.05-5.05 1.7 1.7 0 0 1 .03-1.66l1.2-2.06-1.66-2Z'/%3E%3C/svg%3E"); }
.app-sidebar-icon[data-icon="passwords"] { --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M14.7 7.3a5 5 0 1 1-1.42 5.42L3 23v-4h4v-4h4l2.3-2.3A5 5 0 0 1 14.7 7.3Zm1.3 1.3a3.2 3.2 0 1 0 4.53 4.53A3.2 3.2 0 0 0 16 8.6Zm2.1.8a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6Z'/%3E%3C/svg%3E"); }
.app-sidebar-icon[data-icon="vault"] { --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 3h10a2 2 0 0 1 2 2v16H7a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3Zm0 14h10V5H7a1 1 0 0 0-1 1v11.17c.31-.11.65-.17 1-.17Zm0 2a1 1 0 1 0 0 2h10v-2H7Zm3-8.5V10a2 2 0 1 1 4 0v.5h.5V15h-5v-4.5h.5Zm1.4 0h1.2V10a.6.6 0 0 0-1.2 0v.5Z'/%3E%3C/svg%3E"); }
.app-sidebar-tab.active .app-sidebar-icon,
.app-sidebar-tab[aria-selected="true"] .app-sidebar-icon {
    color: var(--text-primary);
    background: var(--accent-notes);
}
body[data-active-top-tab="files"] .app-sidebar-tab.active .app-sidebar-icon,
body[data-active-top-tab="files"] .app-sidebar-tab[aria-selected="true"] .app-sidebar-icon { background: var(--accent-files); }
body[data-active-top-tab="chat"] .app-sidebar-tab.active .app-sidebar-icon,
body[data-active-top-tab="chat"] .app-sidebar-tab[aria-selected="true"] .app-sidebar-icon { background: var(--accent-rooms); }
body[data-active-top-tab="call"] .app-sidebar-tab.active .app-sidebar-icon,
body[data-active-top-tab="call"] .app-sidebar-tab[aria-selected="true"] .app-sidebar-icon { background: var(--accent-call); }
body[data-active-top-tab="passwords"] .app-sidebar-tab.active .app-sidebar-icon,
body[data-active-top-tab="passwords"] .app-sidebar-tab[aria-selected="true"] .app-sidebar-icon { background: var(--accent-passwords); }
body[data-active-top-tab="vault"] .app-sidebar-tab.active .app-sidebar-icon,
body[data-active-top-tab="vault"] .app-sidebar-tab[aria-selected="true"] .app-sidebar-icon { background: var(--accent-vault); }
.app-sidebar-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-sidebar-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding: 10px;
    border: 1px solid rgba(169, 184, 214, .10);
    border-radius: 14px;
    background: rgba(10, 12, 17, .12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.sync-presence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(83, 91, 112, .32);
    border-radius: var(--r-pill);
    color: var(--text-muted);
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(18, 20, 26, .18));
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 8px 18px rgba(0,0,0,.10);
    transition: border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
button.sync-presence {
    font: inherit;
    appearance: none;
}
.sync-presence:hover {
    border-color: rgba(216, 179, 74, .42);
    color: var(--text-primary);
    background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(18, 20, 26, .24));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.16);
    transform: translateY(-1px);
}
.sync-presence:active {
    transform: translateY(0);
}
.sync-presence:focus-visible {
    outline: 2px solid var(--accent-files);
    outline-offset: 2px;
}
.sync-presence::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--text-subtle);
    box-shadow: 0 0 0 3px rgba(175, 194, 212, .08);
}
.sync-presence::after {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: .72;
    transform: rotate(-45deg);
    transition: opacity .16s ease, transform .16s ease;
}
.sync-presence:hover::after,
.sync-presence:focus-visible::after {
    opacity: 1;
    transform: translateX(1px) rotate(-45deg);
}
.sync-presence-on {
    color: #b9f6dc;
    border-color: rgba(61, 220, 151, .34);
    background: linear-gradient(180deg, rgba(61, 220, 151, .14), rgba(61, 220, 151, .08));
}
.sync-presence-on::before {
    background: #3ddc97;
    box-shadow: 0 0 0 3px rgba(61, 220, 151, .13);
}
.sync-presence-local {
    color: #f0d77a;
    border-color: rgba(216, 179, 74, .36);
    background: linear-gradient(180deg, rgba(216, 179, 74, .15), rgba(216, 179, 74, .09));
}
.sync-presence-local::before {
    background: #d8b34a;
    box-shadow: 0 0 0 3px rgba(216, 179, 74, .13);
}
.sync-presence-off {
    color: #ffb4b4;
    border-color: rgba(229, 72, 77, .42);
    background: linear-gradient(180deg, rgba(229, 72, 77, .16), rgba(229, 72, 77, .10));
}
.sync-presence-off::before {
    background: #e5484d;
    box-shadow: 0 0 0 3px rgba(229, 72, 77, .16);
}
.extension-install-cta {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid rgba(72, 138, 255, .28);
    border-radius: 14px;
    color: #dceaff;
    text-decoration: none;
    background:
        linear-gradient(135deg, rgba(43, 134, 238, .24), rgba(61, 220, 151, .10)),
        rgba(17, 22, 32, .24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 28px rgba(0,0,0,.16);
    transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.extension-install-cta[hidden] {
    display: none !important;
}
.extension-install-cta:hover,
.extension-install-cta:focus-visible {
    border-color: rgba(100, 164, 255, .46);
    background:
        linear-gradient(135deg, rgba(43, 134, 238, .34), rgba(61, 220, 151, .14)),
        rgba(17, 22, 32, .32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 16px 34px rgba(0,0,0,.20);
    transform: translateY(-1px);
}
.extension-install-cta:focus-visible {
    outline: 2px solid var(--accent-rooms);
    outline-offset: 2px;
}
.extension-install-cta-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background:
        radial-gradient(circle at 34% 30%, #fff 0 13%, transparent 14%),
        conic-gradient(from 40deg, #3ddc97 0 32%, #2b86ee 0 66%, #f0d77a 0 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 8px 18px rgba(43, 134, 238, .18);
}
.extension-install-cta-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}
.extension-install-cta-title,
.extension-install-cta-subtitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.extension-install-cta-title {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
}
.extension-install-cta-subtitle {
    color: rgba(175, 194, 212, .82);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
}
.app-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    width: 100%;
    max-width: 820px;
    justify-self: center;
}
.read-page .read-content {
    min-height: calc(100dvh - 44px);
}
.read-page .site-main {
    padding-top: clamp(24px, 7vh, 76px);
}
.read-page .netwall-banner {
    display: none !important;
}
.read-page-file .app-sidebar-tab.active .app-sidebar-icon {
    background: var(--accent-files);
}
.pwa-window-hide-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    color: var(--text-muted);
    background: var(--surface-card), var(--bg-card);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-card);
}
.pwa-window-hide-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.pwa-window-hide-btn:focus-visible { outline: 2px solid var(--accent-passwords); outline-offset: 2px; }
.language-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    color: var(--text-subtle);
    font-size: 13px;
}
.language-picker > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.language-picker-button,
.language-picker-select {
    appearance: none;
    width: 58px;
    height: 38px;
    padding: 0 22px 0 10px;
    border: 1px solid rgba(83, 91, 112, .32);
    border-radius: var(--r-pill);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    background:
        linear-gradient(45deg, transparent 50%, var(--text-subtle) 50%) calc(100% - 14px) 16px / 5px 5px no-repeat,
        linear-gradient(135deg, var(--text-subtle) 50%, transparent 50%) calc(100% - 9px) 16px / 5px 5px no-repeat,
        rgba(18, 20, 26, .16);
    cursor: pointer;
}
.language-picker-button:hover,
.language-picker-button[aria-expanded="true"] {
    color: var(--text-primary);
    border-color: rgba(169, 184, 214, .24);
    background:
        linear-gradient(45deg, transparent 50%, var(--text-primary) 50%) calc(100% - 14px) 16px / 5px 5px no-repeat,
        linear-gradient(135deg, var(--text-primary) 50%, transparent 50%) calc(100% - 9px) 16px / 5px 5px no-repeat,
        rgba(22, 24, 30, .42);
}
.language-picker-button:focus-visible,
.language-picker-select:focus-visible {
    outline: 2px solid var(--accent-passwords);
    outline-offset: 2px;
}
.language-picker-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 90;
    display: none;
    width: 196px;
    max-height: min(360px, calc(100vh - 110px));
    overflow: auto;
    padding: 7px;
    border: 1px solid rgba(169, 184, 214, .16);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(54, 59, 72, .18), rgba(16, 18, 24, .10)),
        rgba(18, 20, 26, .92);
    box-shadow: var(--shadow-modal);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
.language-picker.is-open .language-picker-menu {
    display: grid;
    gap: 3px;
}
.language-picker-option {
    appearance: none;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
}
.language-picker-option:hover,
.language-picker-option:focus-visible {
    color: var(--text-primary);
    background: rgba(72, 78, 94, .18);
    outline: none;
}
.language-picker-option[aria-selected="true"] {
    color: var(--text-primary);
    background: rgba(34, 185, 167, .18);
}
.language-picker-code {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.language-picker-name {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.site-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
}
.top-view {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    width: 100%;
}
body:not([data-active-top-tab]) .top-view {
    display: none;
}
.global-status {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    padding: 10px 18px;
    border-radius: var(--r-pill);
    font-size: 14px;
    color: var(--text-primary);
    box-shadow: var(--shadow-modal);
    max-width: 90vw;
    text-align: center;
}
.pwa-update-banner {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(520px, calc(100vw - 24px));
    padding: 10px 12px 10px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    color: var(--text-primary);
    background: var(--surface-modal), rgba(18, 20, 26, .74);
    box-shadow: var(--shadow-modal);
    backdrop-filter: blur(16px) saturate(1.06);
    -webkit-backdrop-filter: blur(16px) saturate(1.06);
    transform: translateX(-50%);
}
.pwa-update-banner span {
    min-width: 0;
    font-size: 13px;
    line-height: 1.35;
}
.pwa-update-action,
.pwa-update-close {
    appearance: none;
    border: 1px solid var(--border-soft);
    border-radius: 7px;
    color: var(--text-primary);
    background: transparent;
    cursor: pointer;
}
.pwa-update-action {
    flex: 0 0 auto;
    padding: 7px 10px;
    font-size: 13px;
}
.pwa-update-close {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}
.pwa-update-action:hover,
.pwa-update-close:hover {
    background: var(--bg-hover);
}


.view-hero {
    text-align: center;
    margin-bottom: var(--gap-md);
}
.view-title {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.view-subtitle {
    margin-top: 6px;
    font-size: 14px;
    color: var(--text-muted);
}
.accent-vault { color: var(--accent-vault); }
.accent-rooms { color: var(--accent-rooms); }
.accent-notes { color: var(--accent-notes); }
.accent-files { color: var(--accent-files); }
.accent-passwords { color: var(--accent-passwords); }
.accent-call { color: var(--accent-call); }

.view-title-card {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 8px;
}
.view-subtitle-card {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: var(--gap-md);
}


.card {
    background: var(--surface-card), var(--bg-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
    padding: clamp(22px, 3vw, 34px);
    width: 100%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), var(--shadow-card);
    backdrop-filter: blur(18px) saturate(1.05);
    -webkit-backdrop-filter: blur(18px) saturate(1.05);
}
.card + .card { margin-top: var(--gap-md); }
.card-title {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: var(--gap-md);
}

.view {
    width: 100%;
}
.view-msg {
    text-align: center;
    color: var(--text-muted);
    padding: var(--gap-lg);
}


.form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.field-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: var(--gap-md);
}
.field-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 650;
    line-height: 1.25;
}
.field-input {
    width: 100%;
    min-height: 54px;
    background: rgba(8, 10, 15, .34);
    border: 1px solid rgba(105, 115, 136, .36);
    border-radius: var(--r-input);
    color: var(--text-primary);
    padding: 14px 16px;

    font-size: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.field-input::placeholder { color: var(--text-subtle); }
.field-input:focus {
    outline: none;
    border-color: var(--accent-rooms);
    background: rgba(8, 10, 15, .48);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 3px rgba(33, 124, 229, .13);
}
.field-textarea {
    width: 100%;
    background: rgba(8, 10, 15, .34);
    border: 1px solid rgba(105, 115, 136, .36);
    border-radius: var(--r-input);
    color: var(--text-primary);
    padding: 14px 16px;
    font-size: 16px;
    resize: vertical;
    min-height: 110px;
    font-family: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.field-textarea::placeholder { color: var(--text-subtle); }
.field-textarea:focus {
    outline: none;
    border-color: var(--accent-rooms);
    background: rgba(8, 10, 15, .48);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 3px rgba(33, 124, 229, .13);
}
.field-error {
    color: var(--accent-danger);
    font-size: 13px;
}
.field-counter {
    margin: 6px 0 0;
    color: var(--text-subtle);
    font-size: 12px;
    text-align: right;
}
.status-text {
    color: var(--text-muted);
    font-size: 13px;
}
.help-block {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}
.field-link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.file-picker-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px 14px;
    border: 1px dashed rgba(169, 184, 214, .18);
    border-radius: var(--r-input);
    background: var(--bg-input);
}
.file-picker-button {
    appearance: none;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid rgba(216, 179, 74, .34);
    border-radius: 10px;
    background: rgba(216, 179, 74, .14);
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
}
.file-picker-button:hover {
    background: rgba(216, 179, 74, .22);
}
.file-picker-button:focus-visible {
    outline: 2px solid rgba(216, 179, 74, .58);
    outline-offset: 2px;
}
.file-picker-name {
    min-width: 0;
    color: var(--text-muted);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.card > form,
.card .form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.card .field-group {
    margin-bottom: 0;
}
.card > .field-group + .field-group {
    margin-top: 18px;
}
#notes1-text {
    min-height: 150px;
}
.card .toggle-row {
    margin: 0;
    padding: 15px 16px;
    border: 1px solid rgba(92, 98, 116, .32);
    border-radius: var(--r-input);
    background: rgba(10, 12, 17, .14);
}
.card > form > .btn,
.card .form > .btn,
.card .field-group + .btn,
.card .toggle-row + .btn {
    align-self: flex-end;
    margin-top: 4px;
    min-height: 54px;
    width: auto;
    min-width: min(260px, 100%);
    max-width: 100%;
    padding-left: 28px;
    padding-right: 28px;
}
.card > .field-group + .btn {
    margin-top: 18px;
}


.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--gap-md);
}
.toggle-label { font-size: 14px; }
.switch { position: relative; display: inline-block; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-track {
    display: inline-block;
    width: 42px;
    height: 22px;
    background: var(--toggle-off);
    border-radius: 22px;
    position: relative;
    cursor: pointer;
    transition: background .2s;
}
.switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--toggle-thumb);
    border-radius: 50%;
    transition: transform .2s;
}
.switch input:checked + .switch-track { background: var(--toggle-on); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track {
    outline: 2px solid var(--accent-rooms);
    outline-offset: 2px;
}


.btn {
    appearance: none;
    border: none;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 18px;
    border-radius: var(--r-btn);
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, opacity .15s;
    box-shadow: var(--shadow-btn);
    width: 100%;
    text-align: center;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-vault     { background: var(--accent-vault); }
.btn-vault:hover:not(:disabled) { background: var(--accent-vault-2); }
.btn-passwords { background: var(--accent-passwords); }
.btn-passwords:hover:not(:disabled) { background: var(--accent-passwords-2); }
.btn-rooms     { background: var(--accent-rooms); }
.btn-rooms:hover:not(:disabled) { background: var(--accent-rooms-2); }
.btn-notes     { background: var(--accent-notes); }
.btn-notes:hover:not(:disabled) { background: #db6e2c; }
.btn-files     { background: var(--accent-files); }
.btn-files:hover:not(:disabled) { background: var(--accent-files-2); }
.btn-primary   { background: var(--accent-vault); }
.btn-primary:hover:not(:disabled) { background: var(--accent-vault-2); }
.btn-secondary {
    background: transparent;
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    box-shadow: none;
    width: auto;
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-hover); }
.btn-danger    { background: var(--accent-danger); }
.btn-danger:hover:not(:disabled)    { background: #cc4646; }
.btn-danger-ghost {
    background: transparent;
    border: 1px solid var(--accent-danger);
    color: var(--accent-danger);
    box-shadow: none;
    padding: 8px 14px;
    border-radius: var(--r-btn);
    font-size: 14px;
    cursor: pointer;
    margin-top: var(--gap-sm);
}
.btn-danger-ghost:hover:not(:disabled) { background: rgba(224,82,82,.12); }
.btn-mini {
    background: transparent;
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}
.btn-mini:hover,
.btn-mini:focus-visible {
    background: var(--bg-hover);
    color: var(--text-primary);
    outline: none;
}
.btn-lock {
    background: transparent;
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: var(--r-btn);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s;
}
.btn-lock:hover { background: var(--bg-hover); color: var(--text-primary); }
.biometric-unlock-btn {
    width: 100%;
    margin-top: 12px;
}
.btn-icon-copy {
    appearance: none;
    background: var(--bg-hover);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-input);
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-icon-copy:hover { filter: brightness(1.15); }
.btn-icon-copy[data-copy-off="1"] {
    opacity: .72;
    border-style: dashed;
}


.created-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.created-card .field-group {
    margin-bottom: 0;
}
.created-card .help-block {
    margin: 0;
}
.created-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}
.created-actions .btn {
    width: auto;
    min-height: 46px;
}
.created-actions .btn:first-child {
    width: 100%;
}
.link-copy-row {
    display: flex;
    gap: var(--gap-sm);
    align-items: stretch;
}
.link-copy-row .field-input { flex: 1; min-width: 0; }
.created-label { font-size: 14px; color: var(--text-muted); }


.netwall-banner {
    display: block;
    align-self: center;
    width: 100%;
    max-width: 760px;
    margin-top: 2px;
    border-radius: var(--r-card);
    overflow: hidden;
    line-height: 0;
    transition: box-shadow .2s;
    text-decoration: none;
}
.netwall-banner:hover { box-shadow: 0 4px 20px rgba(0,0,0,.4); }
.netwall-banner img {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
}


.notes1-ready-card {
    text-align: center;
    padding: var(--gap-xl) var(--gap-lg);
}
.notes1-ready-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: var(--gap-lg);
}
.notes1-ready-btn {
    font-size: 16px;
    padding: 14px 36px;
    margin-bottom: var(--gap-lg);
}
.notes1-ready-hint {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
}
.notes1-ready-hint strong { color: var(--text-primary); }


.recovery-words {
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-input);
    padding: 16px 20px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 18px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.03em;
    color: var(--accent-vault);
    word-spacing: 12px;
    text-align: center;
    user-select: all;
}


.mnemonic-input-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.mnemonic-word {
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: var(--r-input);
    color: var(--text-primary);
    padding: 10px 8px;
    font-size: 16px;
    text-align: center;
    font-family: inherit;
    width: 100%;
}
.mnemonic-word:focus { outline: none; border-color: var(--accent-vault); }
.mnemonic-word::placeholder { color: var(--text-subtle); font-size: 13px; }
@media (max-width: 480px) {
    .mnemonic-input-grid { grid-template-columns: repeat(2, 1fr); }
    .created-actions {
        grid-template-columns: 1fr;
    }
    .created-actions .btn {
        width: 100%;
    }
}


.pwa-onboarding {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pwa-onboarding-card {
    text-align: center;
    max-width: 400px;
    width: 100%;
}
.pwa-onboarding-logo {
    height: 56px;
    margin: 0 auto 24px;
}
.pwa-onboarding-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
}
.pwa-onboarding-subtitle {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 32px;
    line-height: 1.5;
}
.pwa-onboarding-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pwa-onboarding-btn {
    padding: 16px 24px;
    font-size: 16px;
}
.pwa-onboarding-skip {
    position: absolute;
    top: 16px;
    right: 16px;
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 28px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pwa-onboarding-skip:hover { color: var(--text-primary); }
.pwa-back-btn {
    width: auto;
    margin-bottom: var(--gap-md);
}


.sync-signin-divider {
    text-align: center;
    color: var(--text-subtle);
    font-size: 13px;
    margin: var(--gap-md) 0;
    position: relative;
}
.sync-signin-divider span {
    background: var(--bg-page);
    padding: 0 12px;
    position: relative;
    z-index: 1;
}
.sync-signin-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--border-soft);
}


@media (display-mode: standalone), (display-mode: window-controls-overlay) {
    .page-wrap { padding-top: 20px; }
}
body.is-standalone-pwa .page-wrap { padding-top: 20px; }
@media (display-mode: window-controls-overlay) {
    .page-wrap {
        padding-top: max(20px, calc(env(titlebar-area-y, 0px) + env(titlebar-area-height, 0px)));
    }
}
body.is-window-controls-overlay .page-wrap {
    padding-top: max(20px, calc(env(titlebar-area-y, 0px) + env(titlebar-area-height, 0px)));
}
@media (display-mode: standalone) and (min-width: 900px),
       (display-mode: window-controls-overlay) and (min-width: 900px) {
    body:not(.in-room) .page-wrap {
        min-height: 100dvh;
        padding: 18px 22px 26px;
    }
}
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
    body:not(.in-room) {
        overflow-x: hidden;
    }
    body:not(.in-room) .bg-gradient {
        opacity: .10;
    }
    body:not(.in-room) .page-wrap {
        width: min(100vw, var(--pwa-compact-width));
        max-width: var(--pwa-compact-width);
        min-height: 100dvh;
        margin-left: auto;
        margin-right: 0;
        padding: 14px 12px 18px;
        background: rgba(13, 14, 16, .96);
        border-left: 1px solid rgba(69, 73, 85, .55);
        box-shadow: -18px 0 44px rgba(0, 0, 0, .28);
    }
    body:not(.in-room) .site-main,
    body:not(.in-room) .top-view {
        gap: 12px;
    }
    body:not(.in-room) .view-hero,
    body:not(.in-room) .features-list,
    body:not(.in-room) .netwall-banner,
    body:not(.in-room) .site-footer {
        display: none !important;
    }
    body:not(.in-room) .top-tab-nav {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow: hidden;
        scrollbar-width: none;
        border-radius: 12px;
        gap: 6px;
    }
    body:not(.in-room) .top-tab-btn {
        flex: 0 0 auto;
        min-width: 0;
        padding: 8px 12px;
        border-radius: 9px;
        font-size: 13px;
        white-space: nowrap;
    }
    body:not(.in-room) .language-picker-button,
    body:not(.in-room) .language-picker-select {
        width: 54px;
        min-width: 0;
        height: 34px;
        font-size: 12px;
    }
    body:not(.in-room) .card {
        border-radius: 10px;
        padding: 20px;
    }
    body:not(.in-room) #view-setup {
        gap: 10px;
    }
    body:not(.in-room) #view-setup .view-title-card {
        font-size: 21px;
        line-height: 1.15;
    }
    body:not(.in-room) #view-setup .view-subtitle-card {
        font-size: 13px;
        margin-bottom: 6px;
    }
    body:not(.in-room) #view-setup #signinCard {
        padding: 0;
        border: none;
        background: transparent;
    }
    body:not(.in-room) #view-setup .sync-signin-divider {
        margin: 4px 0;
    }
    body:not(.in-room) #view-setup .sync-signin-divider span {
        background: var(--bg-card);
        border: 1px solid var(--border-soft);
        border-radius: 999px;
        padding: 1px 10px;
    }
    body:not(.in-room) #view-setup .form {
        gap: 10px;
    }
    body:not(.in-room) #view-setup .field {
        gap: 4px;
    }
    body:not(.in-room) #view-setup .field-input,
    body:not(.in-room) #view-setup .mnemonic-word {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    body:not(.in-room) #view-setup .mnemonic-input-grid {
        gap: 6px;
    }
    body:not(.in-room) #view-setup .card-title {
        margin-bottom: 8px;
    }
    body:not(.in-room) #view-setup .btn {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    body.in-room .page-wrap {
        max-width: var(--pwa-chat-width);
        width: min(100vw, var(--pwa-chat-width));
        margin-left: auto;
        margin-right: auto;
    }
    body.in-room .chat-sidebar {
        width: 270px;
    }
}
@media (min-width: 900px) {
    body.is-standalone-pwa:not(.in-room) .page-wrap {
        min-height: 100dvh;
        padding: 18px 22px 26px;
    }
}
@media (display-mode: window-controls-overlay) and (min-width: 900px) {
    body:not(.in-room) .page-wrap {
        padding-top: max(18px, calc(env(titlebar-area-y, 0px) + env(titlebar-area-height, 0px)));
    }
}
@media (min-width: 900px) {
    body.is-window-controls-overlay:not(.in-room) .page-wrap {
        padding-top: max(18px, calc(env(titlebar-area-y, 0px) + env(titlebar-area-height, 0px)));
    }
}
body.is-standalone-pwa:not(.in-room) {
    overflow-x: hidden;
}
body.is-standalone-pwa:not(.in-room) .bg-gradient {
    opacity: .10;
}
body.is-standalone-pwa:not(.in-room) .page-wrap {
    width: min(100vw, var(--pwa-compact-width));
    max-width: var(--pwa-compact-width);
    min-height: 100dvh;
    margin-left: auto;
    margin-right: 0;
    padding: 14px 12px 18px;
    background: rgba(13, 14, 16, .96);
    border-left: 1px solid rgba(69, 73, 85, .55);
    box-shadow: -18px 0 44px rgba(0, 0, 0, .28);
}
body.is-standalone-pwa:not(.in-room) .site-main {
    gap: 12px;
}
body.is-standalone-pwa:not(.in-room) .top-view {
    gap: 12px;
}
body.is-standalone-pwa:not(.in-room) .view-hero,
body.is-standalone-pwa:not(.in-room) .features-list,
body.is-standalone-pwa:not(.in-room) .netwall-banner,
body.is-standalone-pwa:not(.in-room) .site-footer {
    display: none !important;
}
body.is-standalone-pwa:not(.in-room) .top-tab-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: hidden;
    scrollbar-width: none;
    border-radius: 15px;
    gap: 6px;
    padding: 5px;
    border: 1px solid rgba(69, 73, 85, .56);
    background: rgba(13, 14, 16, .62);
}
body.is-standalone-pwa:not(.in-room) .top-tab-btn {
    width: 100%;
    min-width: 0;
    padding: 8px 11px;
    border-radius: 11px;
    font-size: 13px;
    white-space: nowrap;
}
body.is-standalone-pwa:not(.in-room) .language-picker-button,
body.is-standalone-pwa:not(.in-room) .language-picker-select {
    width: 54px;
    min-width: 0;
    height: 34px;
    font-size: 12px;
}
@media (max-width: 820px), (display-mode: standalone), (display-mode: window-controls-overlay) {
    body:not(.in-room) .page-wrap {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    body:not(.in-room) .app-sidebar {
        position: sticky;
        top: 10px;
        z-index: 120;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px 12px;
        min-height: 0;
        width: 100%;
        padding: 12px;
        border-radius: 14px;
        overflow: visible;
        scrollbar-width: none;
    }
    body:not(.in-room) .app-sidebar::-webkit-scrollbar {
        display: none;
    }
    body:not(.in-room) .app-sidebar-brand {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        border-right: 0;
        border-bottom: 0;
    }
    body:not(.in-room) .app-sidebar-logo {
        width: 92px;
    }
    body:not(.in-room) .app-sidebar-by {
        margin-left: 37px;
        font-size: 12px;
    }
    body:not(.in-room) .app-menu-toggle {
        display: inline-flex;
        justify-self: end;
    }
    body:not(.in-room) .app-sidebar-nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 125;
        grid-column: 1 / -1;
        min-width: 0;
        width: 100%;
        min-height: 0;
        max-height: 0;
        opacity: 0;
        transform: translateY(-8px);
        overflow: hidden;
        pointer-events: none;
        box-shadow: 0 18px 42px rgba(0,0,0,.34);
        transition:
            max-height .24s ease,
            opacity .18s ease,
            transform .24s ease,
            padding-top .24s ease,
            padding-bottom .24s ease,
            border-top-width .24s ease,
            border-bottom-width .24s ease,
            border-color .18s ease,
            background .18s ease,
            gap .24s ease;
    }
    body.app-menu-open:not(.in-room) .app-sidebar-nav {
        max-height: min(70dvh, 520px);
        opacity: 1;
        transform: translateY(0);
        overflow-y: auto;
        pointer-events: auto;
        border-color: rgba(169, 184, 214, .18);
        background:
            linear-gradient(180deg, rgba(42, 46, 58, .42), rgba(12, 14, 20, .26)),
            rgba(10, 12, 17, .88);
        backdrop-filter: blur(16px) saturate(1.08);
        -webkit-backdrop-filter: blur(16px) saturate(1.08);
    }
    body:not(.in-room) .top-tab-nav {
        flex-direction: column;
        width: 100%;
        overflow: hidden;
        gap: 7px;
        padding: 10px;
        border: 1px solid rgba(69, 73, 85, .56);
        border-radius: 15px;
        background: rgba(10, 12, 17, .52);
    }
    body:not(.in-room) .top-tab-nav::-webkit-scrollbar {
        display: none;
    }
    body:not(.in-room) .app-sidebar-tab {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        justify-content: initial;
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 7px 10px;
        border-radius: 12px;
        font-size: 14px;
    }
    body:not(.in-room) .app-sidebar-icon {
        display: inline-flex;
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
    body:not(.in-room) .app-sidebar-icon::before {
        width: 20px;
        height: 20px;
    }
    body:not(.in-room) .app-sidebar-footer {
        grid-column: 1 / -1;
        grid-row: 2;
        flex: 0 0 auto;
        margin-top: 0;
        padding: 0;
        border-top: 0;
        border-left: 0;
        justify-content: space-between;
    }
    body:not(.in-room) .app-content {
        max-width: 100%;
    }
}
@media (max-width: 600px) {
    body:not(.in-room) .app-sidebar {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    body:not(.in-room) .app-sidebar-tab {
        width: 100%;
        padding: 6px 8px;
    }
    body:not(.in-room) .app-sidebar-tab .app-sidebar-label {
        position: static;
        width: auto;
        height: auto;
        overflow: hidden;
        clip: auto;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body:not(.in-room) .app-sidebar-tab.active,
    body:not(.in-room) .app-sidebar-tab[aria-selected="true"] {
        width: 100%;
        padding: 6px 8px;
    }
    body:not(.in-room) .app-sidebar-tab.active .app-sidebar-label,
    body:not(.in-room) .app-sidebar-tab[aria-selected="true"] .app-sidebar-label {
        position: static;
        width: auto;
        height: auto;
        overflow: hidden;
        clip: auto;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
body.is-standalone-pwa:not(.in-room) .page-wrap {
    grid-template-columns: 1fr;
}
body.is-standalone-pwa:not(.in-room) .app-content {
    max-width: 100%;
}
body.is-standalone-pwa:not(.in-room) .card {
    border-radius: 10px;
    padding: 14px;
}
body.is-standalone-pwa:not(.in-room) #view-setup {
    gap: 10px;
}
body.is-standalone-pwa:not(.in-room) #view-setup .view-title-card {
    font-size: 21px;
    line-height: 1.15;
}
body.is-standalone-pwa:not(.in-room) #view-setup .view-subtitle-card {
    font-size: 13px;
    margin-bottom: 6px;
}
body.is-standalone-pwa:not(.in-room) #view-setup #signinCard {
    padding: 0;
    border: none;
    background: transparent;
}
body.is-standalone-pwa:not(.in-room) #view-setup .sync-signin-divider {
    margin: 4px 0;
}
body.is-standalone-pwa:not(.in-room) #view-setup .sync-signin-divider span {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 1px 10px;
}
body.is-standalone-pwa:not(.in-room) #view-setup .form {
    gap: 10px;
}
body.is-standalone-pwa:not(.in-room) #view-setup .field {
    gap: 4px;
}
body.is-standalone-pwa:not(.in-room) #view-setup .field-input,
body.is-standalone-pwa:not(.in-room) #view-setup .mnemonic-word {
    padding-top: 8px;
    padding-bottom: 8px;
}
body.is-standalone-pwa:not(.in-room) #view-setup .mnemonic-input-grid {
    gap: 6px;
}
body.is-standalone-pwa:not(.in-room) #view-setup .card-title {
    margin-bottom: 8px;
}
body.is-standalone-pwa:not(.in-room) #view-setup .btn {
    padding-top: 10px;
    padding-bottom: 10px;
}
body.is-standalone-pwa.in-room .page-wrap {
    max-width: var(--pwa-chat-width);
    width: min(100vw, var(--pwa-chat-width));
    margin-left: auto;
    margin-right: auto;
}
body.is-standalone-pwa.in-room .chat-sidebar {
    width: 270px;
}

.recovery-hint { margin-bottom: var(--gap-lg); }
.recovery-pid-line { margin-top: var(--gap-sm); font-size: 12px; }
.recovery-ok-btn { margin-top: var(--gap-md); }
.recovery-two-items {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    margin-bottom: var(--gap-md);
    text-align: left;
}
.recovery-item {
    display: flex;
    gap: var(--gap-md);
    align-items: flex-start;
}
.recovery-item-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-vault);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.recovery-item-body { flex: 1; min-width: 0; }
.recovery-item-label {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: var(--gap-sm);
    display: block;
}
.recovery-item-desc {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}
.recovery-item .recovery-words { text-align: center; }


.notes1-read-copy-btn { margin-top: var(--gap-sm); }
.notes1-read-create-link {
    margin-top: var(--gap-md);
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.notes1-read-plain {
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-input);
    padding: 16px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    margin: var(--gap-md) 0;
    max-height: 60vh;
    overflow-y: auto;
}


.vault-header-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: var(--gap-md);
    flex-wrap: wrap;
}
.header-profile {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--bg-card-deep);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-muted);
    max-width: 280px;
    overflow: hidden;
}
.header-profile-label {
    color: var(--text-subtle);
    font-size: 12px;
}
.header-profile code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-primary);
    font-size: 13px;
    letter-spacing: 0.02em;
    user-select: all;
}
.vault-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}
@media (max-width: 480px) {
    .header-profile { font-size: 11px; max-width: 200px; }
    .header-profile code { font-size: 11px; }
}


.storage-view-main {
    display: block;
}
.storage-view-main[hidden] { display: none; }
.tab-nav {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-card-deep);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-btn);
    margin-bottom: var(--gap-md);
}
.tab-btn {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    flex: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.tab-btn.active { background: var(--accent-vault); color: var(--text-primary); }
.tab-btn:not(.active):hover { color: var(--text-primary); background: var(--bg-hover); }
.tab-btn:focus-visible { outline: 2px solid var(--accent-vault); outline-offset: 2px; }

.tab-panel { width: 100%; }
.storage-settings-dialog {
    max-width: 760px;
    max-height: min(820px, 88vh);
    overflow: hidden;
    padding: 0;
}
.storage-settings-dialog::backdrop {
    background: rgba(0, 0, 0, 0.62);
}
.storage-settings-shell {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: var(--gap-md);
    max-height: min(820px, 88vh);
    overflow: hidden;
    padding: var(--gap-lg);
}
.storage-settings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-md);
}
.storage-settings-head h3 {
    margin-bottom: 6px;
}
.storage-settings-nav {
    margin-bottom: 0;
}
.storage-settings-dialog .tab-panel {
    min-height: 0;
    max-height: calc(min(820px, 88vh) - 152px);
    overflow: auto;
    padding-right: 4px;
}
.dialog-icon-btn {
    appearance: none;
    border: 1px solid var(--border-soft);
    background: var(--bg-card-deep);
    color: var(--text-muted);
    border-radius: 10px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 20px;
    cursor: pointer;
}
.dialog-icon-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}


.notes-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: var(--gap-md);
}
.notes-toolbar .view-title-card {
    margin-bottom: 4px;
}
.notes-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.notes-toolbar-actions .status-text {
    flex: 1 1 100%;
    text-align: right;
}

.notes-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--gap-md);
}
.note-item {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    padding: 14px 16px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.note-item:hover { background: var(--bg-hover); border-color: var(--accent-vault); }
.note-title {
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 24px;
}
.note-preview {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
    max-height: 56px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.note-meta {
    color: var(--text-subtle);
    font-size: 12px;
    margin-top: auto;
}
.note-delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-subtle);
    font-size: 18px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    opacity: 0;
    transition: opacity .15s, background .15s;
}
.note-item:hover .note-delete-btn { opacity: 1; }
.note-delete-btn:hover { background: var(--bg-hover); color: var(--accent-danger); }

@media (max-width: 600px) {
    .notes-list { grid-template-columns: 1fr; }
}


body[data-active-top-tab="call"] .app-content {
    max-width: 820px;
}
.top-view-call {
    align-items: stretch;
}
.voice-shell {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    gap: var(--gap-md);
}
.voice-card,
.voice-room-card {
    display: grid;
    gap: var(--gap-md);
}
.voice-room-card {
    align-content: start;
}
.voice-overlay[hidden] {
    display: none !important;
}
.voice-overlay {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 120;
    width: min(340px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 32px));
    overflow: auto;
    padding: 12px;
    border: 1px solid rgba(69, 73, 85, .92);
    border-radius: 8px;
    background: rgba(20, 22, 27, .96);
    box-shadow: var(--shadow-modal);
}
.voice-overlay-close,
.voice-overlay-size,
.voice-overlay-dock {
    position: absolute;
    top: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: rgba(35, 38, 45, .92);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.voice-overlay-close {
    right: 8px;
}
.voice-overlay-size {
    right: 42px;
    font-size: 15px;
}
.voice-overlay-dock {
    display: none;
    right: 76px;
    font-size: 14px;
}
.voice-overlay-close:hover,
.voice-overlay-close:focus-visible,
.voice-overlay-size:hover,
.voice-overlay-size:focus-visible,
.voice-overlay-size[aria-pressed="true"],
.voice-overlay-dock:hover,
.voice-overlay-dock:focus-visible {
    color: var(--text-primary);
    background: var(--bg-hover);
}
.voice-overlay-fullheight {
    top: max(16px, env(safe-area-inset-top));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: min(460px, calc(100vw - 24px));
    max-height: none;
}
.voice-overlay-fullheight.voice-room-card {
    display: flex;
    flex-direction: column;
}
.voice-overlay-resize-grip {
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 54px;
    height: 14px;
    transform: translateX(-50%);
    cursor: ns-resize;
    touch-action: none;
    opacity: .82;
}
.voice-overlay-resize-grip::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 6px;
    height: 3px;
    border-radius: 999px;
    background: rgba(175, 194, 212, .58);
}
.voice-overlay-fullheight .voice-overlay-resize-grip {
    display: none;
}
.voice-room-card .voice-call-surface {
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.voice-room-card.voice-overlay-drag-active .voice-call-surface {
    cursor: grabbing;
}
body:has(.voice-overlay-drag-active),
body:has(.voice-overlay-resize-active) {
    user-select: none;
}
body.voice-call-active .site-main {
    padding-bottom: 170px;
}
.voice-kicker {
    color: var(--accent-call);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.voice-title {
    font-size: 28px;
    line-height: 1.15;
    margin-bottom: 6px;
}
.voice-copy {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.45;
}
.voice-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--gap-sm);
}
.voice-form .field-label {
    grid-column: 1 / -1;
}
.voice-form .btn {
    width: auto;
    min-width: 130px;
}
.voice-network-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 6px;
}
.voice-form .voice-network-choice,
.voice-join-network {
    grid-column: 1 / -1;
}
.voice-network-choice legend {
    min-width: 0;
    padding: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
}
.voice-network-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 3px;
    border: 1px solid rgba(69, 73, 85, .86);
    border-radius: 10px;
    background: rgba(15, 17, 21, .72);
}
.voice-network-option {
    min-width: 0;
    position: relative;
    display: block;
}
.voice-network-option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.voice-network-option-body {
    display: grid;
    align-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 66px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-muted);
    text-align: left;
}
.voice-network-option-title {
    min-width: 0;
    font-size: 12px;
    font-weight: 720;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.voice-network-option-desc {
    min-width: 0;
    color: rgba(206, 212, 224, .82);
    font-size: 11px;
    font-weight: 520;
    line-height: 1.24;
}
.voice-network-option input:checked + .voice-network-option-body {
    color: #15171c;
    background: var(--accent-call);
}
.voice-network-option input:checked + .voice-network-option-body .voice-network-option-desc {
    color: rgba(21, 23, 28, .74);
}
.voice-network-option input:focus-visible + .voice-network-option-body {
    outline: 2px solid rgba(216, 179, 74, .5);
    outline-offset: 2px;
}
.voice-actions,
.voice-room-actions {
    gap: var(--gap-sm);
}
.voice-actions {
    display: flex;
    flex-wrap: wrap;
}
.voice-room-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: start;
    margin-top: 2px;
    position: relative;
    z-index: 3;
}
.voice-actions .btn {
    width: auto;
}
.voice-room-actions .btn {
    width: 100%;
}
.voice-control-btn {
    height: 38px;
    min-height: 38px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    line-height: 1;
}
.voice-control-btn::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    font-size: 15px;
    line-height: 1;
}
.voice-mute-btn::before {
    content: "◉";
}
.voice-mute-btn[aria-pressed="true"]::before {
    content: "◌";
}
.voice-invite-btn::before {
    content: "+";
    font-size: 18px;
    font-weight: 700;
}
.voice-leave-btn::before {
    content: "×";
    font-size: 18px;
    font-weight: 700;
}
.voice-leave-btn {
    justify-self: end;
    width: auto !important;
    min-width: 84px;
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    color: #fff;
    background: #e5484d;
    border-color: #e5484d;
}
.voice-leave-btn:hover,
.voice-leave-btn:focus-visible {
    background: #f2555a;
    border-color: #f2555a;
}
.voice-back-chat-btn {
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    justify-content: center;
    font-size: 13px;
}
.voice-mute-cluster {
    display: grid;
    grid-template-columns: minmax(92px, 1fr) 30px;
    grid-template-rows: 36px 4px;
    gap: 4px;
    align-items: center;
    width: 126px;
}
.voice-device-toggle {
    appearance: none;
    width: 30px;
    height: 36px;
    min-width: 30px;
    border: 1px solid rgba(69, 73, 85, .86);
    border-radius: 8px;
    background: rgba(35, 38, 45, .88);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.voice-device-toggle::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .16s ease;
}
.voice-device-toggle[aria-expanded="true"]::before {
    transform: rotate(225deg) translate(-1px, -1px);
}
.voice-device-toggle:hover,
.voice-device-toggle:focus-visible {
    color: var(--text-primary);
    background: var(--bg-hover);
}
.voice-device-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: end;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 8;
    padding: 10px;
    border: 1px solid rgba(69, 73, 85, .86);
    border-radius: 8px;
    background: rgba(20, 22, 27, .98);
    box-shadow: var(--shadow-modal);
}
.voice-device-row[hidden] {
    display: none;
}
.voice-device-field {
    display: grid;
    gap: 5px;
    color: var(--text-muted);
    font-size: 11px;
}
.voice-network-call {
    grid-column: 1 / -1;
    width: 100%;
}
.voice-room-card > .voice-network-call {
    margin-top: -6px;
}
.voice-network-call legend {
    font-size: 11px;
}
.voice-network-call .voice-network-options {
    gap: 3px;
    padding: 2px;
    border-radius: 9px;
}
.voice-network-call .voice-network-option-body {
    min-height: 32px;
    padding: 0 8px;
    text-align: center;
}
.voice-network-call .voice-network-option-title {
    font-size: 12px;
    line-height: 1;
}
.voice-network-call .voice-network-option-desc {
    display: none;
}
.voice-device-field > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.voice-device-select {
    width: 100%;
    height: 34px;
    min-width: 0;
    border: 1px solid rgba(69, 73, 85, .86);
    border-radius: 8px;
    background: rgba(15, 17, 21, .92);
    color: var(--text-primary);
    font-size: 12px;
    padding: 0 9px;
}
.voice-level-meter {
    display: block;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(69, 73, 85, .72);
}
.voice-level-meter > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3ddc97, #f7c948);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .12s ease;
}
.voice-level-meter.voice-level-active > span {
    background: linear-gradient(90deg, #3ddc97, #ff6b6b);
}
.voice-control-meter {
    grid-column: 1 / -1;
}
.voice-overlay .voice-room-actions {
    grid-template-columns: 126px minmax(0, 1fr) 58px 44px;
}
.voice-overlay .voice-mute-btn {
    width: 92px !important;
    min-width: 92px;
    padding: 0 8px;
    font-size: 12px;
    gap: 6px;
}
.voice-overlay .voice-mute-btn[aria-pressed="false"] {
    color: #baf7d6;
    border-color: rgba(61, 220, 151, .34);
    background: rgba(61, 220, 151, .10);
}
.voice-overlay .voice-mute-btn[aria-pressed="true"] {
    color: #ffb4b4;
    border-color: rgba(255, 107, 107, .36);
    background: rgba(255, 107, 107, .10);
}
.voice-overlay .voice-leave-btn {
    width: 44px !important;
    min-width: 44px;
    padding: 0;
    font-size: 0;
    gap: 0;
}
.voice-overlay .voice-leave-btn::before {
    width: auto;
    font-size: 18px;
}
.voice-call-duration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    min-width: 58px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(200,208,222,.18);
    background: rgba(255,255,255,.07);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.voice-room-notice {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 9;
    min-height: 0;
    padding: 8px 10px;
    border: 1px solid rgba(69, 73, 85, .86);
    border-radius: 8px;
    background: rgba(20, 22, 27, .98);
    box-shadow: var(--shadow-modal);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
    pointer-events: none;
}
.voice-room-notice:empty {
    display: none;
}
.voice-enable-sound-btn {
    width: 100%;
    min-height: 38px;
}
.voice-room-head,
.voice-call-surface {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-md);
}
.voice-call-surface {
    align-items: center;
    justify-content: flex-start;
    padding: 0 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.voice-room-card .voice-call-surface {
    padding-right: 68px;
}
.voice-room-card:has(.voice-participant-speaking) .voice-call-orb {
    box-shadow: 0 0 0 4px rgba(61, 220, 151, .14), 0 0 24px rgba(61, 220, 151, .24);
}
.voice-call-orb {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
    background: var(--accent-call);
    font-size: 17px;
}
.voice-call-main {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.voice-room-title {
    font-size: 17px;
    line-height: 1.2;
}
.voice-status-pill {
    width: fit-content;
    color: var(--text-muted);
    background: rgba(216,179,74,.18);
    border: 1px solid rgba(216,179,74,.32);
    border-radius: var(--r-pill);
    padding: 3px 8px;
    font-size: 11px;
}
.voice-call-health {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.voice-quality-meter {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 20px;
    min-width: 28px;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.075);
}
.voice-quality-meter > span {
    display: block;
    width: 4px;
    border-radius: 999px;
    background: rgba(200,208,222,.42);
}
.voice-quality-meter > span:nth-child(1) {
    height: 6px;
}
.voice-quality-meter > span:nth-child(2) {
    height: 9px;
}
.voice-quality-meter > span:nth-child(3) {
    height: 12px;
}
.voice-quality-good > span {
    background: #3ddc97;
}
.voice-quality-fair > span {
    background: #f7c948;
}
.voice-quality-fair > span:nth-child(3) {
    opacity: .34;
}
.voice-quality-poor > span {
    background: rgba(255,255,255,.18);
}
.voice-quality-poor > span:nth-child(1) {
    background: #ff6b6b;
}
.voice-quality-unknown > span {
    background: rgba(200,208,222,.34);
}
.voice-latency-indicator {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(200,208,222,.18);
    background: rgba(255,255,255,.07);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}
.voice-latency-good {
    color: #baf7d6;
    border-color: rgba(61,220,151,.28);
    background: rgba(61,220,151,.1);
}
.voice-latency-fair {
    color: #f7df86;
    border-color: rgba(247,201,72,.3);
    background: rgba(247,201,72,.1);
}
.voice-latency-poor {
    color: #ffb4b4;
    border-color: rgba(255,107,107,.34);
    background: rgba(255,107,107,.1);
}
.voice-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
}
.voice-section-head h3 {
    font-size: 14px;
    font-weight: 700;
}
.voice-count {
    color: var(--text-muted);
    font-size: 12px;
}
.voice-participants-card {
    display: grid;
    gap: 10px;
}
.voice-overlay-fullheight .voice-participants-card {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
}
.voice-participants-panel {
    padding: 6px;
    min-height: 0;
    max-height: 180px;
    overflow: auto;
    align-content: start;
    align-items: start;
    grid-auto-rows: max-content;
    border: 1px solid rgba(69, 73, 85, .7);
    border-radius: var(--r-input);
    background: rgba(14, 16, 20, .72);
}
.voice-overlay-fullheight .voice-participants-panel {
    max-height: none;
}
.voice-resume-overlay {
    gap: 12px;
}
.voice-resume-overlay .voice-call-surface {
    padding-right: 32px;
}
.voice-resume-btn {
    width: 100%;
    justify-content: center;
}
.voice-remote-audio {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
@media (max-width: 640px) {
    .voice-form {
        grid-template-columns: 1fr;
    }
    .voice-form .btn,
    .voice-actions .btn,
    .voice-room-actions .btn {
        width: 100%;
    }
    .voice-room-head,
    .voice-call-surface {
        flex-direction: column;
    }
}
@media (min-width: 760px) {
    body.voice-call-active .site-main {
        padding-bottom: 0;
    }
}
@media (max-width: 520px) {
    .voice-overlay {
        inset: 0;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 100vw;
        height: 100dvh;
        max-height: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: hidden;
        padding: calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 12px);
        border: 0;
        border-radius: 0;
        background:
            radial-gradient(circle at 16% 0, rgba(216, 179, 74, .22), transparent 38%),
            linear-gradient(145deg, #171a20, #080a0f);
    }
    body.voice-call-active {
        overflow: hidden;
    }
    .voice-overlay-size,
    .voice-overlay-dock,
    .voice-overlay-resize-grip {
        display: none !important;
    }
    .voice-room-card > .voice-overlay-close {
        display: none;
    }
    .voice-overlay-close {
        top: calc(env(safe-area-inset-top) + 12px);
        right: 12px;
        width: 34px;
        height: 34px;
        border-color: rgba(229, 72, 77, .88);
        color: #fff;
        background: #e5484d;
    }
    .voice-overlay .voice-call-surface {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        min-height: 68px;
        padding: 10px;
        border: 1px solid rgba(96, 104, 122, .42);
        border-radius: 14px;
        background: rgba(24, 27, 34, .72);
    }
    .voice-overlay .voice-call-orb {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        font-size: 18px;
    }
    .voice-overlay .voice-kicker {
        margin-bottom: 2px;
        font-size: 11px;
    }
    .voice-overlay .voice-room-title {
        font-size: 19px;
        line-height: 1.12;
        white-space: normal;
    }
    .voice-overlay .voice-status-pill {
        margin-top: 4px;
        padding: 3px 8px;
        font-size: 11px;
    }
    .voice-overlay .voice-call-health {
        margin-top: 4px;
    }
    .voice-overlay .voice-room-actions {
        grid-template-columns: minmax(118px, 1fr) 58px 44px;
        gap: 8px;
        flex: 0 0 auto;
    }
    .voice-overlay .voice-mute-cluster {
        width: auto;
        grid-template-columns: minmax(0, 1fr) 34px;
        grid-template-rows: 40px 4px;
    }
    .voice-overlay .voice-mute-btn {
        width: 100% !important;
        min-width: 0;
        height: 40px;
        padding: 0 8px;
        gap: 6px;
        font-size: 12px;
    }
    .voice-overlay .voice-mute-btn::before {
        width: 14px;
        font-size: 16px;
    }
    .voice-overlay .voice-invite-btn {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .voice-overlay .voice-call-duration {
        grid-column: 2;
        grid-row: 1;
    }
    .voice-overlay .voice-leave-btn {
        grid-column: 3;
        grid-row: 1;
    }
    .voice-overlay .voice-device-toggle {
        width: 34px;
        height: 40px;
    }
    .voice-overlay .voice-room-actions .btn {
        min-width: 0;
        padding-left: 6px;
        padding-right: 6px;
    }
    .voice-network-options {
        grid-template-columns: 1fr;
    }
    .voice-device-row {
        grid-template-columns: 1fr;
        top: calc(100% + 10px);
        max-height: min(52dvh, 330px);
        overflow: auto;
    }
    .voice-enable-sound-btn {
        flex: 0 0 auto;
    }
    .voice-participants-card {
        flex: 1 1 auto;
        min-height: 0;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 8px;
    }
    .voice-participants-panel {
        max-height: none;
    }
    .voice-room-card .voice-call-surface,
    .voice-room-card.voice-overlay-drag-active .voice-call-surface {
        cursor: default;
    }
}


body[data-active-top-tab="passwords"] .app-content {
    max-width: 820px;
}
body[data-active-top-tab="passwords"] .site-main {
    gap: var(--gap-lg);
}
body[data-active-top-tab="passwords"] .site-footer {
    margin-top: 28px;
}
.top-view-passwords {
    gap: var(--gap-lg);
}
.passwords-page-head {
    margin: 2px 0 4px;
}
.passwords-kicker {
    color: var(--accent-passwords);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}
.passwords-title {
    margin-top: 3px;
    font-size: 28px;
    font-weight: 650;
    line-height: 1.1;
}
.passwords-locked-card {
    max-width: 760px;
    margin: 4px auto 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    border-radius: var(--r-card);
    background: var(--surface-card-soft), var(--bg-card);
}
.profile-locked-card {
    max-width: 760px;
    margin: 4px auto 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    border-radius: var(--r-card);
    background: var(--surface-card-soft), var(--bg-card);
}
.passwords-lock-mark {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid rgba(34, 185, 167, .45);
    background:
        linear-gradient(180deg, rgba(34, 185, 167, .22), rgba(34, 185, 167, .05)),
        var(--bg-card-deep);
    position: relative;
}
.profile-lock-mark {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid rgba(33, 124, 229, .45);
    background:
        linear-gradient(180deg, rgba(33, 124, 229, .22), rgba(33, 124, 229, .05)),
        var(--bg-card-deep);
    position: relative;
}
.passwords-lock-mark::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 11px;
    width: 14px;
    height: 11px;
    border: 2px solid var(--accent-passwords);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}
.profile-lock-mark::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 11px;
    width: 14px;
    height: 11px;
    border: 2px solid var(--accent-rooms);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}
.passwords-lock-mark::after {
    content: '';
    position: absolute;
    left: 12px;
    top: 21px;
    width: 20px;
    height: 14px;
    border-radius: 4px;
    background: var(--accent-passwords);
}
.profile-lock-mark::after {
    content: '';
    position: absolute;
    left: 12px;
    top: 21px;
    width: 20px;
    height: 14px;
    border-radius: 4px;
    background: var(--accent-rooms);
}
.storage-empty-card {
    margin-top: 4px;
}
.storage-locked-card {
    margin-top: 4px;
}
.storage-empty-mark {
    border-color: rgba(124, 92, 255, .46);
    background:
        linear-gradient(180deg, rgba(124, 92, 255, .24), rgba(124, 92, 255, .06)),
        var(--bg-card-deep);
}
.storage-empty-mark::before {
    border-color: var(--accent-vault);
}
.storage-empty-mark::after {
    background: var(--accent-vault);
}
.storage-locked-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.passwords-locked-copy .view-title-card,
.passwords-locked-copy .view-subtitle-card,
.profile-locked-copy .view-title-card,
.profile-locked-copy .view-subtitle-card {
    margin: 0;
}
.passwords-locked-copy .view-title-card,
.profile-locked-copy .view-title-card {
    font-size: 18px;
}
.passwords-locked-copy .view-subtitle-card,
.profile-locked-copy .view-subtitle-card {
    margin-top: 3px;
}
.passwords-locked-card .btn,
.profile-locked-card .btn {
    width: auto;
    min-width: 136px;
    border-radius: 8px;
    box-shadow: none;
}
.storage-locked-actions .btn {
    min-width: 0;
}
.passwords-app {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.passwords-commandbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: var(--gap-lg);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
    background: var(--surface-card), var(--bg-card);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), var(--shadow-card);
}
.passwords-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 150px 86px;
    gap: 10px;
    align-items: end;
}
.passwords-search-field,
.passwords-sort-field { margin: 0; }
.passwords-new-btn {
    width: 86px;
    height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    box-shadow: none;
}
.passwords-io-row,
.passwords-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.passwords-io-row {
    justify-content: flex-start;
    margin: 0;
}
.passwords-io-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: end;
    justify-content: space-between;
}
.passwords-clipboard-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    justify-content: flex-end;
}
.passwords-ttl-field {
    width: 112px;
    margin: 0;
}
.passwords-copy-toggle {
    min-height: 42px;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0 10px;
    color: var(--text-muted);
    font-size: 13px;
    border: 1px solid rgba(69, 73, 85, .72);
    border-radius: 8px;
    background: rgba(13, 14, 16, .38);
}
.passwords-export-format {
    width: 104px;
    flex: 0 0 auto;
}
.passwords-status {
    grid-column: 1 / -1;
    margin-top: -2px;
    color: var(--text-muted);
    font-size: 13px;
}
.passwords-status[data-kind="error"] { color: #ffb5b5; }
.passwords-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.passwords-layout.passwords-layout-detail-open {
    grid-template-columns: 340px minmax(0, 1fr);
}
.passwords-layout > .card + .card {
    margin-top: 0;
}
.passwords-list-card,
.passwords-detail-card {
    border-radius: var(--r-card);
    padding: var(--gap-lg);
    background: var(--surface-card), var(--bg-card);
}
.passwords-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.password-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 4px 8px;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.password-item:hover,
.password-item.active {
    background: rgba(34, 185, 167, .11);
    border-color: var(--accent-passwords);
}
.password-item-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 15px;
}
.password-item-meta {
    grid-column: 1 / 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 13px;
}
.password-item-badge {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    color: var(--accent-passwords);
}
.passwords-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(69, 73, 85, .75);
}
.passwords-detail-head .view-title-card {
    margin: 0;
    font-size: 20px;
    font-weight: 650;
}
.passwords-favorite {
    display: flex;
    gap: 6px;
    align-items: center;
    color: var(--text-muted);
    font-size: 13px;
}
.passwords-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.top-view-passwords .field-label {
    font-size: 12px;
    letter-spacing: 0;
}
.passwords-copy-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}
.passwords-copy-field .field-input:disabled,
.passwords-copy-field .field-input[readonly],
.top-view-passwords .field-input:disabled,
.top-view-passwords .field-input[readonly],
.top-view-passwords .field-textarea:disabled,
.top-view-passwords .field-textarea[readonly] {
    opacity: 1;
    color: var(--text-primary);
    background: rgba(13, 14, 16, .62);
    border-color: rgba(69, 73, 85, .55);
}
.top-view-passwords .field-input:focus,
.top-view-passwords .field-textarea:focus {
    border-color: var(--accent-passwords);
}
.passwords-inline-btn {
    width: auto;
    padding: 10px 12px;
    border-radius: 8px;
}
.passwords-generator {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 12px;
    background: var(--bg-card-deep);
}
.passwords-generator legend {
    padding: 0 6px;
    color: var(--text-muted);
    font-size: 13px;
}
.passwords-gen-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}
.passwords-gen-length input { width: 100%; }
.passwords-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 10px;
}
.passwords-check-row label {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}
.passwords-entropy {
    margin-left: auto;
    color: var(--accent-passwords);
}
.passwords-actions {
    justify-content: flex-end;
    margin-top: 4px;
}
.passwords-actions .btn,
.passwords-io-row .btn,
.passwords-share-row .btn {
    width: auto;
    border-radius: 8px;
}
.passwords-share-options {
    display: grid;
    gap: 8px;
    margin: 12px 0;
}
.passwords-share-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}
.passwords-import-preview {
    display: grid;
    gap: 6px;
    max-height: 220px;
    overflow: auto;
    margin: 10px 0;
    padding: 0;
    list-style: none;
}
.passwords-import-preview li {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: var(--bg-card-deep);
}
.passwords-import-preview strong,
.passwords-import-preview span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.passwords-import-preview span {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 13px;
}
.passwords-import-warning {
    margin-top: 8px;
}
.passwords-unlock-dialog {
    max-width: 420px;
}

.vault-education-dialog {
    max-width: 460px;
}

.vault-education-dialog p {
    line-height: 1.5;
}

@media (max-width: 860px) {
    .passwords-commandbar,
    .passwords-toolbar,
    .passwords-layout,
    .passwords-layout.passwords-layout-detail-open {
        grid-template-columns: 1fr;
    }
    .passwords-clipboard-row,
    .passwords-io-row {
        justify-content: flex-start;
    }
    .passwords-new-btn {
        width: 100%;
    }
    .passwords-locked-card,
    .storage-locked-card,
    .storage-empty-card {
        grid-template-columns: 44px minmax(0, 1fr);
    }
    .passwords-locked-card .btn,
    .storage-locked-card .storage-locked-actions,
    .storage-empty-card .btn {
        grid-column: 1 / -1;
    }
    .passwords-locked-card .btn,
    .storage-empty-card .btn {
        width: 100%;
    }
    .storage-locked-actions {
        justify-content: stretch;
    }
    .storage-locked-actions .btn {
        flex: 1 1 auto;
    }
}
@media (max-width: 520px) {
    .passwords-title { font-size: 24px; }
    .passwords-commandbar,
    .passwords-list-card,
    .passwords-detail-card,
    .passwords-locked-card,
    .storage-locked-card,
    .storage-empty-card {
        padding: 16px;
    }
    .passwords-io-row,
    .passwords-clipboard-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .passwords-ttl-field,
    .passwords-export-format,
    .passwords-io-row .btn {
        width: 100%;
    }
    .passwords-copy-toggle {
        justify-content: space-between;
    }
    .passwords-copy-field {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .passwords-copy-field .passwords-inline-btn {
        grid-column: 1 / 2;
        width: 100%;
    }
    .passwords-copy-field #passwordsCopyPasswordBtn {
        grid-column: 2;
        grid-row: 1;
        height: 40px;
    }
    .passwords-actions .btn {
        width: 100%;
    }
}


.sync-signin {
    margin-top: var(--gap-md);
    border-top: 1px solid var(--border-soft);
    padding-top: var(--gap-md);
}
.sync-signin > summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    padding: 4px 0;
}
.sync-signin > .form { margin-top: var(--gap-md); }
.sync-status-card {
    display: grid;
    gap: 18px;
    line-height: 1.5;
}
.sync-state-head {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.sync-state-dot {
    width: 10px;
    height: 10px;
    margin-top: 7px;
    border-radius: 999px;
    background: #2ed47a;
    box-shadow: 0 0 0 5px rgba(46, 212, 122, .12);
}
.sync-state-copy {
    margin-top: 6px;
    max-width: 680px;
}
.sync-detail-list {
    display: grid;
    gap: 12px;
    margin: 0;
}
.sync-detail-item {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 12px 0;
    border-top: 1px solid var(--border-soft);
}
.sync-detail-item:last-child {
    border-bottom: 1px solid var(--border-soft);
}
.sync-detail-item dt {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}
.sync-detail-item dd {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.5;
}
.sync-mnemonic-inline {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 13px;
    line-height: 1.45;
}
.sync-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
}

.sync-actions .btn,
.dialog-actions .btn,
.composer .btn,
.notes-toolbar .btn,
.vault-header-actions .btn,
.link-copy-row .btn,
.btn-danger-ghost,
.btn-lock { width: auto; }
.sync-actions .btn {
    min-height: 40px;
    white-space: normal;
    line-height: 1.25;
}
.sync-repair-btn {
    grid-column: 1 / -1;
}
.history-list {
    margin-top: var(--gap-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.history-row {
    background: var(--bg-card-deep);
    border-radius: var(--r-input);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}


.note-dialog, .confirm-dialog {
    background:
        var(--surface-modal),
        var(--bg-modal);
    border: 1px solid rgba(140, 150, 208, .28);
    border-radius: 12px;
    color: var(--text-primary);
    padding: 22px;
    max-width: 600px;
    width: 92vw;
    position: fixed;
    inset: 0;
    margin: auto;
    box-shadow: 0 18px 70px rgba(0, 0, 0, .62);
}
.note-dialog::backdrop, .confirm-dialog::backdrop {
    background: rgba(0, 0, 0, 0.68);
}
.note-dialog h3, .confirm-dialog h3 {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 0;
}
.note-dialog form, .confirm-dialog form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}
.chat-rename-dialog {
    max-width: 420px;
}
.confirm-dialog p {
    color: var(--text-muted);
    font-size: 14px;
}
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: var(--gap-sm);
}
.dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.dialog-subtitle {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.45;
}
.unlock-dialog {
    max-width: 480px;
}
.unlock-dialog .field {
    margin-bottom: 0;
}
.unlock-dialog .dialog-actions .btn {
    width: auto;
    min-width: 116px;
}


.chat-frame-wrap {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    overflow: hidden;
    min-height: 70vh;
}
.chat-frame {
    width: 100%;
    height: 70vh;
    border: none;
    display: block;
    background: var(--bg-page);
}
@media (max-width: 600px) {
    .chat-frame, .chat-frame-wrap { min-height: 80vh; height: 80vh; }
}


.features-list {
    background: var(--surface-card-soft), var(--bg-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
    padding: var(--gap-lg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), var(--shadow-card);
}
.features-list h3 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: var(--gap-md);
}
.features-list ul {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}
.features-list li {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    padding-left: 18px;
    position: relative;
}
.features-list li::before {
    content: '•';
    position: absolute;
    left: 4px;
    color: var(--text-subtle);
}
.features-list strong { color: var(--text-primary); font-weight: 500; }
.features-list em { color: var(--text-subtle); font-style: italic; }
.features-vault li::before { color: var(--accent-vault); }
.features-chat  li::before { color: var(--accent-rooms); }
.features-notes li::before { color: var(--accent-notes); }
.features-files li::before { color: var(--accent-files); }


.site-footer {
    width: 100%;
    margin-top: var(--gap-xl);
    padding: var(--gap-md) 0;
    border-top: 1px solid var(--border-soft);
    text-align: center;
}
.footer-copy {
    color: var(--text-subtle);
    font-size: 13px;
}
.footer-copy a {
    color: var(--text-muted);
    text-decoration: none;
}
.footer-copy .contact-email {
    color: var(--text-muted);
}
.footer-copy a:hover { color: var(--text-primary); }

.legal-page .page-wrap {
    display: block;
    width: min(100%, 920px);
    max-width: 920px;
}
.legal-page .site-main {
    gap: 18px;
}
.legal-brand {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    margin: 0 0 18px;
}
.legal-logo-link {
    display: block;
    line-height: 0;
}
.legal-logo {
    width: 124px;
    height: auto;
}
.legal-by {
    margin: 0 0 4px;
}
.legal-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.legal-kicker {
    color: var(--text-subtle);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.legal-section {
    display: grid;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
}
.legal-section h2 {
    font-size: 18px;
    font-weight: 600;
}
.legal-section p,
.legal-list li {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.55;
}
.legal-list {
    display: grid;
    gap: 8px;
    list-style: disc;
    padding-left: 20px;
}
.legal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 6px;
}
.legal-actions .btn {
    width: auto;
}
.legal-footer {
    margin-top: 28px;
}


@media (max-width: 600px) {
    .page-wrap {
        gap: 12px;
        padding: 10px 10px 24px;
    }
    .site-main,
    .top-view {
        gap: 14px;
    }
    .view-hero {
        margin-bottom: 2px;
        padding: 0 2px;
    }
    .view-title {
        font-size: 20px;
        line-height: 1.18;
    }
    .view-subtitle {
        margin-top: 5px;
        font-size: 13px;
        line-height: 1.32;
    }
    body:not(.in-room) .app-sidebar {
        gap: 6px 10px;
        padding: 10px;
        border-radius: 14px;
        align-items: start;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    body:not(.in-room) .app-sidebar-brand {
        gap: 5px 10px;
        min-width: 0;
        align-self: start;
    }
    body:not(.in-room) .app-sidebar-logo {
        width: 96px;
    }
    body:not(.in-room) .app-sidebar-by {
        margin-left: 38px;
        font-size: 11px;
        line-height: 1;
    }
    body:not(.in-room) .app-menu-toggle {
        align-self: start;
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }
    body:not(.in-room) .app-menu-toggle span,
    body:not(.in-room) .app-menu-toggle span::before,
    body:not(.in-room) .app-menu-toggle span::after {
        width: 22px;
        height: 2px;
    }
    body:not(.in-room) .app-menu-toggle span::before { top: -7px; }
    body:not(.in-room) .app-menu-toggle span::after { top: 7px; }
    body.app-menu-open:not(.in-room) .app-menu-toggle span::before { transform: translateY(7px) rotate(45deg); }
    body.app-menu-open:not(.in-room) .app-menu-toggle span::after { transform: translateY(-7px) rotate(-45deg); }
    body:not(.in-room) .app-sidebar-language {
        align-self: center;
    }
    body:not(.in-room) .app-sidebar-footer {
        justify-content: flex-start;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .sync-presence {
        flex: 0 1 auto;
        width: auto;
        max-width: min(230px, calc(100vw - 36px));
        height: 22px;
        padding: 0 9px 0 8px;
        font-size: 11px;
        border-radius: 999px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sync-presence::before {
        flex: 0 0 auto;
        width: 6px;
        height: 6px;
    }
    .language-picker-button,
    .language-picker-select {
        width: 58px;
        height: 40px;
        padding-left: 13px;
        font-size: 12px;
    }
    .language-picker-menu {
        position: fixed;
        left: 10px;
        right: 10px;
        top: auto;
        bottom: 14px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
        width: auto;
        max-height: min(54dvh, 360px);
        z-index: 160;
        padding: 8px;
        border-radius: 16px;
        background:
            linear-gradient(180deg, rgba(48, 53, 65, .24), rgba(13, 15, 20, .14)),
            rgba(15, 17, 23, .96);
    }
    .language-picker.is-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 150;
        background: rgba(0, 0, 0, .28);
    }
    .language-picker-option {
        min-height: 40px;
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 8px 10px;
        border-radius: 10px;
    }
    .language-picker-option[aria-selected="true"] {
        background: rgba(255, 255, 255, .08);
        box-shadow: inset 3px 0 0 rgba(216, 179, 74, .78);
    }
    .language-picker-code {
        font-size: 12px;
    }
    .language-picker-name {
        font-size: 14px;
    }
    .card {
        padding: 12px;
        border-radius: 12px;
    }
    .card > form,
    .card .form {
        gap: 13px;
    }
    .field {
        gap: 6px;
    }
    .field-label {
        font-size: 12px;
    }
    .field-input {
        min-height: 44px;
        padding: 10px 12px;
    }
    .field-textarea {
        min-height: 86px;
        padding: 10px 12px;
    }
    #notes1-text {
        min-height: 98px;
        height: 98px;
    }
    .field-counter {
        margin-top: 4px;
        font-size: 11px;
    }
    .card .toggle-row {
        padding: 10px 12px;
    }
    .btn {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
    }
    .card > form > .btn,
    .card .form > .btn,
    .card .field-group + .btn,
    .card .toggle-row + .btn,
    #rooms-hub-card > .btn {
        min-height: 44px;
        padding-left: 14px;
        padding-right: 14px;
    }
    .netwall-banner {
        border-radius: 12px;
        margin-top: 0;
    }
    .netwall-banner img {
        max-height: 86px;
    }
    body:not(.in-room):not(.app-menu-open) .app-sidebar-nav {
        gap: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-top-width: 0;
        border-bottom-width: 0;
        border-color: transparent;
        background: rgba(10, 12, 17, 0);
    }
    .card > form > .btn,
    .card .form > .btn,
    .card .field-group + .btn,
    .card .toggle-row + .btn,
    #rooms-hub-card > .btn {
        align-self: stretch;
        width: 100%;
        min-width: 0;
    }
    .top-tab-nav {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow: hidden;
        scrollbar-width: none;
        gap: 6px;
        border-radius: 15px;
    }
    body.app-menu-open:not(.in-room) .app-sidebar-nav {
        overflow-y: auto;
    }
    .top-tab-btn {
        width: 100%;
        padding: 9px 12px;
        border-radius: 12px;
        font-size: 14px;
        white-space: nowrap;
    }
    body:not(.in-room) .app-sidebar-tab {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 7px 10px;
        border-radius: 12px;
        font-size: 14px;
    }
    body:not(.in-room) .app-sidebar-tab.active,
    body:not(.in-room) .app-sidebar-tab[aria-selected="true"] {
        width: 100%;
        padding: 7px 10px;
    }
    .language-picker-button,
    .language-picker-select { width: 58px; }
    .card { padding: 12px; }
    .storage-settings-shell { padding: 12px; }
    .storage-settings-head { gap: var(--gap-sm); }
    .sync-detail-item {
        grid-template-columns: 1fr;
        gap: 5px;
    }
    .sync-actions { grid-template-columns: 1fr; }
    .sync-actions .btn { width: 100%; }
}



.chat-host {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    width: 100%;
}
#rooms-hub-card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}
#rooms-hub-card > .btn {
    align-self: flex-end;
}
.chat-section { padding: var(--gap-lg); }
.chat-section h2 { font-size: 20px; font-weight: 500; margin-bottom: 4px; }
.chat-section h3.hub-section {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    margin: var(--gap-md) 0 var(--gap-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    margin-bottom: var(--gap-md);
}

.rooms-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--gap-md); }
.room-item {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    background: var(--bg-card-deep);
    border: 1px solid var(--border-soft);
    transition: background .15s, border-color .15s;
}
.room-item:hover { background: var(--bg-hover); border-color: var(--accent-rooms); }
.room-item-active { background: var(--bg-hover); border-color: var(--accent-rooms); }
.room-menu-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background .15s;
    color: var(--text-muted);
    font-size: 18px;
}
.room-menu-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.room-action-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.room-inline-action {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.room-inline-action:hover,
.room-inline-action:focus-visible {
    color: var(--text-primary);
    background: var(--bg-hover);
}
.room-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.room-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.room-nick {
    color: var(--text-subtle);
    font-size: 13px;
}
.room-count {
    background: var(--accent-rooms);
    color: #fff;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
.list-hint {
    font-size: 13px;
    color: var(--text-subtle);
    text-align: center;
    margin-bottom: var(--gap-sm);
}
.btn-danger-outline {
    appearance: none;
    background: transparent;
    color: var(--accent-danger);
    border: 1px solid var(--accent-danger);
    padding: 8px 14px;
    border-radius: var(--r-btn);
    font-size: 14px;
    cursor: pointer;
    margin-top: var(--gap-sm);
    width: 100%;
}
.btn-danger-outline:hover { background: rgba(224,82,82,.12); }






body.in-room .site-footer,
body.in-room .top-view-chat > .view-hero,
body.in-room .top-view-chat > .netwall-banner:not(.netwall-banner-sidebar),
body.in-room .top-view-chat > .features-list { display: none !important; }
body.in-room .chat-host {
    flex: 1;
    min-width: 0;
}
body.in-room {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}
body.in-room .page-wrap {
    grid-template-columns: 228px minmax(0, 1fr);
    gap: 0;
    width: 100%;
    padding: 0;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
body.in-room .app-sidebar {
    position: static;
    min-height: 100dvh;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
}
body.in-room .app-content {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
body.in-room .site-main { max-width: none; gap: 0; flex: 1; min-height: 0; overflow: hidden; }
body.in-room .top-view-chat {
    flex-direction: row;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
body.in-room .chat-sidebar { display: flex !important; }
body.in-room .chat-host {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body.in-room .chat-room-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border: none;
    overflow: hidden;
}
body.in-room .message-feed {
    flex: 1;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
}
@media (min-width: 681px) {
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .page-wrap {
        grid-template-columns: 88px minmax(0, 1fr);
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar {
        z-index: 20;
        align-items: stretch;
        width: 88px;
        padding: 12px 8px;
        border-right: 1px solid rgba(169, 184, 214, .12);
        background:
            linear-gradient(180deg, rgba(30, 33, 40, .82), rgba(14, 16, 20, .92)),
            #17191d;
        box-shadow: inset -1px 0 0 rgba(0,0,0,.32);
        overflow: hidden;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        margin: 0 0 12px;
        padding: 0 0 12px;
        border: 0;
        border-bottom: 1px solid rgba(169, 184, 214, .10);
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-logo {
        width: 54px;
        max-width: 54px;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-by {
        display: block;
        margin: 0;
        max-width: 72px;
        color: rgba(175, 194, 212, .72);
        font-size: 9px;
        font-weight: 700;
        line-height: 1.1;
        text-align: center;
        white-space: nowrap;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-language,
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-menu-toggle {
        display: none !important;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-nav {
        position: static;
        display: flex;
        flex: 1 1 auto;
        width: 100%;
        max-height: none;
        min-height: 0;
        opacity: 1;
        transform: none;
        overflow: visible;
        pointer-events: auto;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .top-tab-nav {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        overflow: visible;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 72px;
        min-width: 72px;
        min-height: 66px;
        padding: 7px 4px;
        border: 1px solid transparent;
        border-radius: 14px;
        color: rgba(175, 194, 212, .82);
        background: transparent;
        text-align: center;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-tab:hover {
        color: var(--text-primary);
        background: rgba(72, 78, 94, .18);
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-tab.active,
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-tab[aria-selected="true"] {
        color: var(--text-primary);
        border-color: rgba(169, 184, 214, .16);
        background: rgba(255, 255, 255, .075);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-icon {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-icon::before {
        width: 18px;
        height: 18px;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-label,
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-tab.active .app-sidebar-label,
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-tab[aria-selected="true"] .app-sidebar-label {
        position: static;
        width: 68px;
        height: auto;
        min-width: 0;
        overflow: hidden;
        clip: auto;
        color: inherit;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.05;
        text-align: center;
        text-overflow: clip;
        white-space: normal;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-footer {
        display: flex;
        flex-direction: column;
        gap: 7px;
        width: 72px;
        margin: auto 0 0;
        padding: 9px 0 0;
        border: 0;
        border-top: 1px solid rgba(169, 184, 214, .10);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .extension-install-cta {
        display: flex;
        width: 56px;
        min-width: 56px;
        height: 46px;
        min-height: 46px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 14px;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .extension-install-cta[hidden] {
        display: none !important;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .extension-install-cta-copy {
        display: none;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .extension-install-cta-mark {
        width: 30px;
        height: 30px;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .sync-presence {
        width: 56px;
        min-width: 56px;
        max-width: 56px;
        height: 38px;
        justify-content: center;
        gap: 7px;
        padding: 0 10px;
        border-radius: 13px;
        font-size: 0;
    }
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .sync-presence::before,
    body.in-room:not(.is-standalone-pwa):not(.is-window-controls-overlay):not(.is-electron-desktop) .sync-presence::after {
        margin: 0;
    }
}
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
    body.in-room .page-wrap {
        max-width: var(--pwa-chat-width);
        width: min(100vw, var(--pwa-chat-width));
        margin-left: auto;
        margin-right: auto;
    }
    body.in-room .chat-sidebar {
        width: 270px;
    }
}


.chat-sidebar {
    width: 300px;
    flex-shrink: 0;
    background: var(--bg-card-deep);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    padding: var(--gap-md);


    overflow: hidden;
}
.chat-sidebar-search {
    flex: 0 0 auto;
    gap: 7px;
}
.chat-sidebar-search .field-input {
    min-height: 42px;
    padding: 9px 12px;
    font-size: 14px;
}
#sidebar-rooms-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.btn-sidebar-create { width: 100%; }
.netwall-banner-sidebar { flex-shrink: 0; border-radius: var(--r-input); overflow: hidden; }
.netwall-banner-sidebar img { width: 100%; height: auto; }
.chat-sidebar-hint {
    font-size: 13px;
    color: var(--text-subtle);
    text-align: center;
}
.chat-sidebar-bottom { margin-top: auto; }


.invite-modal {
    background: var(--surface-modal), var(--bg-modal);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-card);
    color: var(--text-primary);
    padding: var(--gap-xl) var(--gap-lg);
    max-width: 520px;
    width: 92vw;
    position: fixed;
    inset: 0;
    margin: auto;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), var(--shadow-modal);
}
.invite-modal::backdrop { background: rgba(0,0,0,0.7); }
.invite-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.invite-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.invite-modal-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: var(--gap-lg);
}
.invite-modal-label {
    font-size: 14px;
    color: var(--text-muted);
    text-align: left;
    margin-bottom: var(--gap-sm);
}
.invite-modal .link-copy-row { margin-bottom: var(--gap-md); }
.invite-modal-copy { margin-bottom: var(--gap-sm); }
.invite-modal-enter { width: 100%; }
@media (max-width: 680px) {
    body.in-room .page-wrap { grid-template-columns: 1fr; }
    body.in-room .app-sidebar { display: none; }
    body.in-room.app-menu-open .app-sidebar {
        position: fixed;
        top: max(10px, env(safe-area-inset-top));
        left: 10px;
        right: 10px;
        z-index: 150;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 10px;
        min-height: 0;
        width: auto;
        padding: 10px;
        border-radius: 14px;
        overflow: visible;
    }
    body.in-room.app-menu-open .app-sidebar-brand {
        margin: 0;
        padding: 0;
        border-bottom: 0;
    }
    body.in-room.app-menu-open .app-sidebar-logo {
        width: 96px;
    }
    body.in-room.app-menu-open .app-sidebar-by {
        margin-left: 38px;
        font-size: 11px;
        line-height: 1;
    }
    body.in-room.app-menu-open .app-sidebar-language {
        justify-self: end;
    }
    body.in-room.app-menu-open .app-menu-toggle {
        display: inline-flex;
        justify-self: end;
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }
    body.in-room.app-menu-open .app-sidebar-nav {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        max-height: 420px;
        opacity: 1;
        pointer-events: auto;
        padding: 10px;
        border: 1px solid rgba(69, 73, 85, .56);
        border-radius: 15px;
        background: rgba(10, 12, 17, .52);
    }
    body.in-room.app-menu-open .app-sidebar-tab {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        width: 100%;
        min-height: 48px;
        padding: 7px 10px;
        border-radius: 12px;
        font-size: 14px;
    }
    body.in-room.app-menu-open .app-sidebar-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
    body.in-room.app-menu-open .app-sidebar-icon::before {
        width: 20px;
        height: 20px;
    }
    body.in-room.app-menu-open .app-sidebar-footer {
        grid-column: 1 / -1;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    body.in-room .top-view-chat { flex-direction: column; }
    body.in-room .chat-sidebar { display: none !important; }
}


body.in-just-created .top-view-chat .view-hero,
body.in-just-created .top-view-chat .netwall-banner,
body.in-just-created .top-view-chat .features-list { display: none !important; }


.push-prompt-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--accent-rooms);
    color: #fff;
    font-size: 13px;
}
.push-prompt-text { flex: 1; }
.push-prompt-btn {
    width: auto;
    padding: 6px 14px;
    font-size: 13px;
    background: #fff;
    color: var(--accent-rooms);
    border: none;
}
.push-prompt-btn:hover { background: #eee; }
.push-prompt-dismiss {
    appearance: none;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 18px;
    cursor: pointer;
}


.chat-room-section { padding: 0; overflow: hidden; }
.chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-card-deep);
    flex-wrap: wrap;
}
#connection-status {
    font-size: 14px;
    width: 12px;
    text-align: center;
}
#connection-status.conn-live { color: var(--accent-success); }
#connection-status.conn-down { color: var(--accent-danger); }
#room-title {
    font-weight: 500;
    font-size: 15px;
    flex: 1 1 auto;
    min-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-rename-btn {
    flex: 0 0 auto;
}
.self-nick {
    font-size: 13px;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    padding: 2px 8px;
    border-radius: var(--r-pill);
}
.participants-chip {
    font-size: 13px;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    padding: 2px 8px;
    border-radius: var(--r-pill);
}
.icon-mini {
    appearance: none;
    background: transparent;
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.icon-mini[aria-pressed="true"] { background: var(--bg-hover); color: var(--text-primary); }
.icon-mini:hover { background: var(--bg-hover); color: var(--text-primary); }
.icon-mini-primary { color: var(--accent-rooms); border-color: var(--accent-rooms); }
.icon-mini-primary:hover { background: var(--accent-rooms); color: #fff; }
.icon-mini-danger { color: var(--accent-danger); border-color: var(--accent-danger); }
.icon-mini-danger:hover { background: var(--accent-danger); color: #fff; }
.chat-room-menu-toggle {
    display: none;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.voice-status {
    color: var(--text-muted);
    font-size: 12px;
}
.voice-participants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
}
.voice-participant {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 180px;
    padding: 3px 8px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-pill);
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 12px;
}
.voice-participant-muted {
    opacity: .72;
}
.voice-participant-speaking {
    color: var(--text-primary);
    border-color: rgba(61, 220, 151, .46);
    background: rgba(61, 220, 151, .08);
}
.voice-participant strong {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.voice-participants-panel {
    display: grid;
    gap: 8px;
}
.voice-participants-panel .voice-participant {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    align-self: start;
    gap: 10px;
    min-width: 0;
    max-width: none;
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    background: var(--bg-card-deep);
}
.voice-participant-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    background: rgba(216,179,74,.18);
    border: 1px solid rgba(216,179,74,.36);
    font-size: 13px;
    font-weight: 700;
}
.voice-participant-speaking .voice-participant-avatar {
    color: #0c1511;
    background: #3ddc97;
    border-color: #3ddc97;
    box-shadow: 0 0 0 4px rgba(61, 220, 151, .12);
}
.voice-participant-body {
    display: grid;
    min-width: 0;
    gap: 2px;
}
.voice-participant-meta,
.voice-participant-state {
    color: var(--text-muted);
    font-size: 12px;
}
.voice-participant-state {
    justify-self: end;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-pill);
    padding: 3px 8px;
    background: var(--bg-input);
}
.voice-participant-muted .voice-participant-state {
    color: var(--accent-danger);
    border-color: rgba(220,84,84,.35);
}
.voice-participant-speaking .voice-participant-state {
    color: #3ddc97;
    border-color: rgba(61, 220, 151, .36);
    background: rgba(61, 220, 151, .1);
}

.message-feed {
    list-style: none;
    padding: var(--gap-md) var(--gap-md) 6px;
    margin: 0;
    min-height: 360px;
    max-height: 58vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg-page);
}
.msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 86%;
}
.msg-other { align-self: flex-start; }
.msg-own   { align-self: flex-end; flex-direction: row-reverse; }
.msg-grouped { margin-top: -3px; }
.msg-grouped .msg-meta { display: none; }
.msg-grouped.msg-other .msg-avatar { visibility: hidden; }
.msg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--avatar-color, var(--bg-hover));
    color: var(--avatar-fg, #fff);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msg-bubble {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 8px 12px;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 2px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.msg-own .msg-bubble {
    background: var(--accent-rooms);
    border-color: var(--accent-rooms);
    color: #fff;
}
.msg-meta {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}
.msg-own .msg-meta { color: rgba(255,255,255,0.85); }
.msg-body {
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
}
.msg-call-invite .msg-bubble {
    border-color: rgba(216,179,74,.55);
}
.msg-call-actions {
    margin-top: 6px;
}
.msg-call-btn {
    width: auto;
    padding: 8px 12px;
    font-size: 13px;
    box-shadow: none;
}
.msg-call-btn-current {
    background: #2f9e73;
    border-color: #2f9e73;
    color: #fff;
}
.msg-time {
    font-size: 11px;
    color: var(--text-subtle);
    text-align: right;
}
.msg-own .msg-time { color: rgba(255,255,255,0.7); }
.msg-reply-quote {
    border-left: 3px solid var(--accent-rooms);
    background: var(--bg-card-deep);
    padding: 4px 8px;
    border-radius: var(--r-input);
    display: flex;
    flex-direction: column;
    font-size: 12px;
    gap: 2px;
    margin: 2px 0;
}
.msg-own .msg-reply-quote {
    border-left-color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.12);
}
.msg-reply-nick { font-weight: 500; }
.msg-reply-text { color: var(--text-muted); }
.msg-own .msg-reply-text { color: rgba(255,255,255,0.85); }
.msg-reply-btn {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-subtle);
    cursor: pointer;
    font-size: 15px;
    padding: 4px 8px;
    opacity: 0;
    transition: opacity .15s, color .15s;
    align-self: flex-end;
}
.msg:hover .msg-reply-btn { opacity: 1; }
.msg-reply-btn:hover { color: var(--accent-rooms); }


.reply-preview {
    background: var(--bg-card-deep);
    border-left: 3px solid var(--accent-rooms);
    border-radius: 0 var(--r-input) var(--r-input) 0;
    padding: 8px 12px;
    margin: 0 var(--gap-md) 8px;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.reply-preview-close {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-subtle);
    cursor: pointer;
    font-size: 16px;
    margin-left: auto;
}
.reply-preview-close:hover { color: var(--text-primary); }


.composer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--gap-md);
    padding-bottom: calc(var(--gap-md) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-soft);
    background: var(--bg-card);
    flex-shrink: 0;
}
.composer textarea {
    resize: vertical;
    min-height: 48px;
    font-size: 16px;
}
@media (max-width: 680px) {
    .composer textarea { resize: none; max-height: 120px; }
}
.composer-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
}
#byte-counter { font-size: 12px; }
.composer .btn { margin-left: auto; }

.muted { color: var(--text-subtle); font-size: 13px; }
#loading-indicator { padding: 0 var(--gap-md); }

.help-block-error {
    color: var(--accent-danger);
    font-size: 13px;
    padding: 0 var(--gap-md) var(--gap-sm);
}
.help-block-error:empty { display: none; }

@media (max-width: 600px) {
    .chat-header {
        gap: 8px;
        padding: 8px 10px;
        flex-wrap: nowrap;
    }
    #room-title {
        min-width: 0;
    }
    .chat-header .icon-mini {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        font-size: 16px;
    }
    .chat-room-menu-toggle {
        display: inline-flex !important;
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }
    .chat-room-menu-toggle span,
    .chat-room-menu-toggle span::before,
    .chat-room-menu-toggle span::after {
        width: 22px;
        height: 2px;
    }
    .chat-room-menu-toggle span::before { top: -7px; }
    .chat-room-menu-toggle span::after { top: 7px; }
    body.app-menu-open .chat-room-menu-toggle span::before { transform: translateY(7px) rotate(45deg); }
    body.app-menu-open .chat-room-menu-toggle span::after { transform: translateY(-7px) rotate(-45deg); }
    .chat-header .self-nick,
    .chat-header .participants-chip { display: none; }
    .message-feed { max-height: 56vh; }
    .msg { max-width: 92%; }
}

@media (hover: hover) and (pointer: fine) {
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) {
        --pwa-titlebar-height: 34px;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        background: #121416;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .pwa-titlebar-drag {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        display: block;
        height: var(--pwa-titlebar-height);
        background: rgba(10, 11, 13, .92);
        border-bottom: 1px solid rgba(169, 184, 214, .10);
        -webkit-app-region: drag;
        app-region: drag;
        user-select: none;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .bg-gradient {
        opacity: .12;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .page-wrap {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 0;
        width: 100vw;
        max-width: none;
        height: calc(100vh - var(--pwa-titlebar-height));
        height: calc(100dvh - var(--pwa-titlebar-height));
        min-height: calc(100vh - var(--pwa-titlebar-height));
        min-height: calc(100dvh - var(--pwa-titlebar-height));
        margin: var(--pwa-titlebar-height) 0 0;
        padding: 0;
        overflow: hidden;
        border: 0;
        background: rgba(13, 14, 16, .92);
        box-shadow: none;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop).has-desktop-chat-rail .page-wrap {
        grid-template-columns: 88px 300px minmax(0, 1fr);
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar {
        position: static;
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 88px;
        min-height: calc(100vh - var(--pwa-titlebar-height));
        min-height: calc(100dvh - var(--pwa-titlebar-height));
        padding: 12px 8px;
        border: 0;
        border-right: 1px solid rgba(169, 184, 214, .12);
        border-radius: 0;
        background:
            linear-gradient(180deg, rgba(30, 33, 40, .82), rgba(14, 16, 20, .92)),
            #17191d;
        box-shadow: inset -1px 0 0 rgba(0,0,0,.32);
        overflow: hidden;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        margin: 0 0 12px;
        padding: 0 0 12px;
        border: 0;
        border-bottom: 1px solid rgba(169, 184, 214, .10);
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-logo {
        width: 54px;
        max-width: 54px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-by {
        display: block;
        margin: 0;
        max-width: 72px;
        color: rgba(175, 194, 212, .72);
        font-size: 9px;
        font-weight: 700;
        line-height: 1.1;
        text-align: center;
        white-space: nowrap;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-language,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-menu-toggle {
        display: none !important;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-nav {
        position: static;
        display: flex;
        flex: 1 1 auto;
        width: 100%;
        max-height: none;
        min-height: 0;
        opacity: 1;
        transform: none;
        overflow: visible;
        pointer-events: auto;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .top-tab-nav {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        overflow: visible;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 72px;
        min-width: 72px;
        min-height: 66px;
        padding: 7px 4px;
        border: 1px solid transparent;
        border-radius: 14px;
        color: rgba(175, 194, 212, .82);
        background: transparent;
        text-align: center;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-tab:hover {
        color: var(--text-primary);
        background: rgba(72, 78, 94, .18);
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-tab.active,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-tab[aria-selected="true"] {
        color: var(--text-primary);
        border-color: rgba(169, 184, 214, .16);
        background: rgba(255, 255, 255, .075);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-icon {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-icon::before {
        width: 18px;
        height: 18px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-label,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-tab.active .app-sidebar-label,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-tab[aria-selected="true"] .app-sidebar-label {
        position: static;
        width: 68px;
        height: auto;
        min-width: 0;
        overflow: hidden;
        clip: auto;
        color: inherit;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.05;
        text-align: center;
        text-overflow: clip;
        white-space: normal;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-sidebar-footer {
        display: flex;
        flex-direction: column;
        gap: 7px;
        width: 72px;
        margin: auto 0 0;
        padding: 9px 0 0;
        border: 0;
        border-top: 1px solid rgba(169, 184, 214, .10);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .sync-presence {
        width: 56px;
        min-width: 56px;
        max-width: 56px;
        height: 38px;
        justify-content: center;
        gap: 7px;
        padding: 0 10px;
        border-radius: 13px;
        font-size: 0;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .sync-presence::before,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .sync-presence::after {
        margin: 0;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .pwa-window-hide-btn {
        width: 56px;
        height: 38px;
        border-radius: 13px;
        font-size: 18px;
        align-self: center;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .app-content {
        justify-self: stretch;
        align-self: stretch;
        align-items: stretch;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .site-main {
        max-width: none;
        height: 100%;
        min-height: 0;
        gap: 0;
        overflow: hidden;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .top-view {
        height: 100%;
        min-height: 0;
        gap: 16px;
        padding: 20px 24px;
        overflow-y: auto;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .top-view:not(.top-view-chat) {
        align-content: start;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .view-hero,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .features-list,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .netwall-banner:not(.netwall-banner-sidebar),
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .site-footer {
        display: none !important;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .card,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .passwords-commandbar,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .passwords-list-card,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .passwords-detail-card,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .voice-shell {
        border-radius: 14px;
        background:
            linear-gradient(180deg, rgba(58, 63, 76, .16), rgba(18, 20, 27, .20)),
            rgba(18, 20, 27, .44);
        border-color: rgba(169, 184, 214, .14);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 52px rgba(0,0,0,.18);
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .card {
        max-width: 880px;
        padding: 18px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .profile-locked-card,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .passwords-locked-card {
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
        gap: 14px 16px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .profile-locked-copy,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .passwords-locked-copy,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .storage-locked-copy {
        min-width: 0;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .profile-locked-card > .btn,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .passwords-locked-card > .btn,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .storage-locked-actions {
        grid-column: 2;
        justify-content: flex-start;
        width: 100%;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .profile-locked-card .btn,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .passwords-locked-card .btn {
        min-width: 0;
        max-width: 100%;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .storage-locked-actions .btn {
        flex: 0 1 auto;
        min-width: 168px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .view-title-card {
        font-size: 18px;
        margin-bottom: 6px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .view-subtitle-card,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .help-block {
        font-size: 13px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .field,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .field-group {
        gap: 7px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .field-input {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 14px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .field-textarea {
        min-height: 90px;
        padding: 10px 12px;
        font-size: 14px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) #notes1-text {
        min-height: 120px;
        height: 120px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .btn {
        min-height: 42px;
        padding: 9px 14px;
        border-radius: 12px;
        font-size: 14px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .card > form,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .card .form {
        gap: 14px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .top-view:not(.top-view-chat) > .card,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .top-view:not(.top-view-chat) > .voice-shell,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .top-view-passwords .passwords-app,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .storage-view-main {
        width: min(100%, 880px);
        max-width: 880px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop).has-desktop-chat-rail .chat-sidebar {
        display: flex !important;
        grid-column: 2;
        grid-row: 1;
        width: 300px;
        min-height: calc(100vh - var(--pwa-titlebar-height));
        min-height: calc(100dvh - var(--pwa-titlebar-height));
        padding: 16px;
        border-right: 1px solid rgba(169, 184, 214, .12);
        border-radius: 0;
        background: rgba(18, 20, 26, .82);
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop).has-desktop-chat-rail .chat-sidebar-bottom {
        display: none;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop) .top-view-chat {
        background:
            linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)),
            rgba(15, 17, 22, .44);
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop).has-desktop-chat-rail:not(.in-room) .top-view-chat {
        display: grid;
        place-items: center;
        padding: 24px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop).has-desktop-chat-rail:not(.in-room) .chat-host {
        min-height: 100%;
        display: grid;
        place-items: center;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop).has-desktop-chat-rail:not(.in-room) #view-hub {
        width: min(100%, 640px);
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop).has-desktop-chat-rail:not(.in-room) #rooms-hub-card {
        width: 100%;
        padding: 28px;
        gap: 18px;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop).has-desktop-chat-rail:not(.in-room) #rooms-list-section,
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop).has-desktop-chat-rail:not(.in-room) #local-chat-empty {
        display: none !important;
    }
    body:is(.is-standalone-pwa, .is-window-controls-overlay):not(.is-electron-desktop).in-room .top-view-chat {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        overflow: hidden;
    }
}

body.is-electron-desktop {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #121416;
}
body.is-electron-desktop .bg-gradient {
    opacity: .12;
}
body.is-electron-desktop .page-wrap,
body.is-electron-desktop.in-room .page-wrap,
body.is-electron-desktop:not(.in-room) .page-wrap {
    display: grid;
    grid-template-columns: 88px 316px minmax(0, 1fr);
    gap: 0;
    width: 100vw;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: rgba(13, 14, 16, .92);
    box-shadow: none;
}
body.is-electron-desktop.has-desktop-chat-rail .chat-sidebar,
body.is-electron-desktop.has-desktop-chat-rail.in-room .chat-sidebar,
body.is-electron-desktop.has-desktop-chat-rail:not(.in-room) .chat-sidebar {
    display: flex !important;
    grid-column: 2;
    grid-row: 1;
    width: 316px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 16px;
    border-right: 1px solid rgba(169, 184, 214, .12);
    border-radius: 0;
    background: rgba(18, 20, 26, .82);
}
body.is-electron-desktop.has-desktop-chat-rail .btn-sidebar-create {
    min-height: 46px;
    border-radius: 14px;
    font-size: 15px;
}
body.is-electron-desktop.has-desktop-chat-rail .chat-sidebar-bottom {
    display: none;
}
body.is-electron-desktop .app-sidebar,
body.is-electron-desktop.in-room .app-sidebar,
body.is-electron-desktop:not(.in-room) .app-sidebar {
    position: static;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 88px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 12px 8px;
    border: 0;
    border-right: 1px solid rgba(169, 184, 214, .12);
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(30, 33, 40, .82), rgba(14, 16, 20, .92)),
        #17191d;
    box-shadow: inset -1px 0 0 rgba(0,0,0,.32);
    overflow: hidden;
}
body.is-electron-desktop .app-sidebar-brand,
body.is-electron-desktop.in-room .app-sidebar-brand,
body.is-electron-desktop:not(.in-room) .app-sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 0 0 12px;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 1px solid rgba(169, 184, 214, .10);
}
body.is-electron-desktop .app-sidebar-logo,
body.is-electron-desktop.in-room .app-sidebar-logo,
body.is-electron-desktop:not(.in-room) .app-sidebar-logo {
    width: 54px;
    max-width: 54px;
}
body.is-electron-desktop .app-sidebar-by,
body.is-electron-desktop.in-room .app-sidebar-by,
body.is-electron-desktop:not(.in-room) .app-sidebar-by {
    display: block;
    margin: 0;
    max-width: 72px;
    color: rgba(175, 194, 212, .72);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}
body.is-electron-desktop .app-sidebar-language,
body.is-electron-desktop.in-room .app-sidebar-language,
body.is-electron-desktop:not(.in-room) .app-sidebar-language {
    display: none;
}
body.is-electron-desktop .app-menu-toggle,
body.is-electron-desktop.in-room .app-menu-toggle,
body.is-electron-desktop:not(.in-room) .app-menu-toggle {
    display: none !important;
}
body.is-electron-desktop .app-sidebar-nav,
body.is-electron-desktop.in-room .app-sidebar-nav,
body.is-electron-desktop:not(.in-room) .app-sidebar-nav {
    position: static;
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    max-height: none;
    min-height: 0;
    opacity: 1;
    transform: none;
    overflow: visible;
    pointer-events: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
}
body.is-electron-desktop .top-tab-nav,
body.is-electron-desktop.in-room .top-tab-nav,
body.is-electron-desktop:not(.in-room) .top-tab-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}
body.is-electron-desktop .app-sidebar-tab,
body.is-electron-desktop.in-room .app-sidebar-tab,
body.is-electron-desktop:not(.in-room) .app-sidebar-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 72px;
    min-width: 72px;
    min-height: 66px;
    padding: 7px 4px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: rgba(175, 194, 212, .82);
    background: transparent;
    text-align: center;
}
body.is-electron-desktop .app-sidebar-tab:hover {
    color: var(--text-primary);
    background: rgba(72, 78, 94, .18);
}
body.is-electron-desktop .app-sidebar-tab.active,
body.is-electron-desktop .app-sidebar-tab[aria-selected="true"],
body.is-electron-desktop.in-room .app-sidebar-tab.active,
body.is-electron-desktop.in-room .app-sidebar-tab[aria-selected="true"],
body.is-electron-desktop:not(.in-room) .app-sidebar-tab.active,
body.is-electron-desktop:not(.in-room) .app-sidebar-tab[aria-selected="true"] {
    color: var(--text-primary);
    border-color: rgba(169, 184, 214, .16);
    background: rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
body.is-electron-desktop .app-sidebar-icon,
body.is-electron-desktop.in-room .app-sidebar-icon,
body.is-electron-desktop:not(.in-room) .app-sidebar-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
}
body.is-electron-desktop .app-sidebar-icon::before,
body.is-electron-desktop.in-room .app-sidebar-icon::before,
body.is-electron-desktop:not(.in-room) .app-sidebar-icon::before {
    width: 18px;
    height: 18px;
}
body.is-electron-desktop .app-sidebar-label,
body.is-electron-desktop.in-room .app-sidebar-label,
body.is-electron-desktop:not(.in-room) .app-sidebar-label,
body.is-electron-desktop .app-sidebar-tab.active .app-sidebar-label,
body.is-electron-desktop .app-sidebar-tab[aria-selected="true"] .app-sidebar-label {
    position: static;
    width: 68px;
    height: auto;
    min-width: 0;
    overflow: hidden;
    clip: auto;
    color: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
}
body.is-electron-desktop .app-sidebar-footer,
body.is-electron-desktop.in-room .app-sidebar-footer,
body.is-electron-desktop:not(.in-room) .app-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 72px;
    margin: auto 0 0;
    padding: 9px 0 0;
    border: 0;
    border-top: 1px solid rgba(169, 184, 214, .10);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body.is-electron-desktop .sync-presence {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    height: 38px;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border-radius: 13px;
    font-size: 0;
}
body.is-electron-desktop .sync-presence::before {
    margin: 0;
}
body.is-electron-desktop .sync-presence::after {
    margin-left: 0;
}
body.is-electron-desktop .pwa-window-hide-btn {
    display: none !important;
}
body.is-electron-desktop .app-content,
body.is-electron-desktop.in-room .app-content,
body.is-electron-desktop:not(.in-room) .app-content {
    justify-self: stretch;
    align-self: stretch;
    align-items: stretch;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
body.is-electron-desktop .site-main,
body.is-electron-desktop.in-room .site-main,
body.is-electron-desktop:not(.in-room) .site-main {
    max-width: none;
    height: 100%;
    min-height: 0;
    gap: 0;
    overflow: hidden;
}
body.is-electron-desktop .top-view,
body.is-electron-desktop:not(.in-room) .top-view {
    height: 100%;
    min-height: 0;
    gap: 16px;
    padding: 20px 24px;
    overflow-y: auto;
}
body.is-electron-desktop .top-view:not(.top-view-chat) {
    align-content: start;
}
body.is-electron-desktop .view-hero,
body.is-electron-desktop .features-list,
body.is-electron-desktop .netwall-banner:not(.netwall-banner-sidebar),
body.is-electron-desktop .site-footer {
    display: none !important;
}
body.is-electron-desktop .card {
    max-width: 880px;
    border-radius: 14px;
    padding: 18px;
}
body.is-electron-desktop .view-title-card {
    font-size: 18px;
    margin-bottom: 6px;
}
body.is-electron-desktop .view-subtitle-card,
body.is-electron-desktop .help-block {
    font-size: 13px;
}
body.is-electron-desktop .field {
    gap: 6px;
}
body.is-electron-desktop .field-group {
    gap: 7px;
}
body.is-electron-desktop .field-input {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
}
body.is-electron-desktop .field-textarea {
    min-height: 90px;
    padding: 10px 12px;
    font-size: 14px;
}
body.is-electron-desktop #notes1-text {
    min-height: 120px;
    height: 120px;
}
body.is-electron-desktop .btn {
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 12px;
    font-size: 14px;
}
body.is-electron-desktop .card > form,
body.is-electron-desktop .card .form {
    gap: 14px;
}
body.is-electron-desktop .card > form > .btn,
body.is-electron-desktop .card .form > .btn,
body.is-electron-desktop .card .field-group + .btn,
body.is-electron-desktop .card .toggle-row + .btn {
    min-height: 42px;
    min-width: min(220px, 100%);
    padding-left: 18px;
    padding-right: 18px;
}
body.is-electron-desktop .top-view:not(.top-view-chat) > .card,
body.is-electron-desktop .top-view:not(.top-view-chat) > .voice-shell,
body.is-electron-desktop .top-view-passwords .passwords-app,
body.is-electron-desktop .storage-view-main {
    width: min(100%, 880px);
    max-width: 880px;
}
body.is-electron-desktop .top-view-chat {
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)),
        rgba(15, 17, 22, .44);
}
body.is-electron-desktop .chat-host {
    min-width: 0;
}
body.is-electron-desktop #view-hub {
    width: min(100%, 640px);
}
body.is-electron-desktop.has-desktop-chat-rail:not(.in-room) .top-view-chat {
    display: grid;
    place-items: center;
    padding: 24px;
}
body.is-electron-desktop.has-desktop-chat-rail:not(.in-room) .chat-host {
    min-height: 100%;
    display: grid;
    place-items: center;
}
body.is-electron-desktop.has-desktop-chat-rail:not(.in-room) #view-hub {
    width: min(100%, 640px);
}
body.is-electron-desktop.has-desktop-chat-rail:not(.in-room) #rooms-hub-card {
    width: 100%;
    padding: 28px;
    gap: 18px;
}
body.is-electron-desktop.has-desktop-chat-rail:not(.in-room) #rooms-hub-card .field-group,
body.is-electron-desktop.has-desktop-chat-rail:not(.in-room) #rooms-hub-card .field {
    gap: 9px;
}
body.is-electron-desktop.has-desktop-chat-rail:not(.in-room) #rooms-hub-card .field-label {
    font-size: 15px;
    line-height: 1.35;
}
body.is-electron-desktop.has-desktop-chat-rail:not(.in-room) #rooms-hub-card .field-input {
    min-height: 52px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 15px;
}
body.is-electron-desktop.has-desktop-chat-rail:not(.in-room) #rooms-hub-card > .btn {
    align-self: stretch;
    width: 100%;
    min-height: 52px;
    margin-top: 4px;
    border-radius: 14px;
}
body.is-electron-desktop.has-desktop-chat-rail:not(.in-room) #rooms-list-section,
body.is-electron-desktop.has-desktop-chat-rail:not(.in-room) #local-chat-empty {
    display: none !important;
}
body.is-electron-desktop.in-room .top-view-chat {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
}
body.is-electron-desktop.in-room .chat-room-section {
    background: rgba(13, 14, 16, .56);
}