html {
    color-scheme: dark;
    --app-height: 100svh;
    --app-offset-top: 0px;
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --settings-safe-top: var(--app-safe-top);
}

@supports (height: 100dvh) {
    html { --app-height: 100dvh; }
}

html,
body {
    background: #060a0b;
    width: 100%;
    height: var(--app-height);
    min-height: 0;
    overflow: hidden;
}

html {
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-ui);
    font-weight: 500;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background-image:
        radial-gradient(circle at 12% 6%, rgba(53, 101, 86, 0.13), transparent 30%),
        radial-gradient(circle at 88% 92%, rgba(49, 95, 137, 0.16), transparent 34%),
        linear-gradient(145deg, #050809 0%, #08100f 52%, #05090a 100%);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 42%, rgba(95, 230, 174, 0.025) 42% 43%, transparent 43% 100%),
        radial-gradient(circle at 50% 35%, transparent 0 24%, rgba(255,255,255,0.015) 24.5% 25%, transparent 25.5%);
    z-index: 0;
}

body::after {
    background-image:
        linear-gradient(rgba(196, 241, 224, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(196, 241, 224, 0.06) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 78%);
    opacity: .18;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(94, 230, 174, .3) transparent;
}

*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-thumb { background: rgba(94, 230, 174, .25); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

button,
input,
textarea {
    font: inherit;
}

.sm-switch {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(196, 241, 224, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.sm-switch span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #9cafaa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    transition: transform .18s ease, background .18s ease;
}

.sm-switch.active {
    background: rgba(79, 133, 116, .45);
    border-color: rgba(139, 181, 166, .5);
}

.sm-switch.active span {
    transform: translateX(18px);
    background: #d7eee6;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent2);
    outline-offset: 2px;
}

#app-ui {
    gap: 10px;
    padding: 12px;
    max-width: 1560px;
    margin: 0 auto;
    height: var(--app-height);
    min-height: 0;
}

.sidebar,
.chat-main {
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.sidebar {
    width: 356px;
    background: linear-gradient(180deg, rgba(15, 26, 25, .96), rgba(9, 16, 17, .96));
    border-radius: 22px;
}

.chat-main {
    background: linear-gradient(180deg, rgba(8, 15, 15, .94), rgba(5, 10, 11, .98));
    border-radius: 22px;
}

.header {
    min-height: 76px;
    padding: 16px 20px;
    background: rgba(13, 22, 21, .82);
    border-color: var(--border);
    backdrop-filter: blur(20px) saturate(125%);
}

.sidebar > .header {
    position: relative;
    padding-bottom: 18px;
}

.sidebar > .header::after {
    content: 'PRIVATE MESSENGER';
    position: absolute;
    top: 19px;
    right: 18px;
    color: rgba(94, 230, 174, .62);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.sidebar-logo {
    font-size: 24px;
    letter-spacing: -1px;
    text-shadow: 0 0 26px rgba(94, 230, 174, .18);
}

.sidebar-logo span { color: var(--accent2); }

.id-badge {
    min-height: 34px;
    padding: 8px 12px;
    color: #84e8bd;
    background: rgba(33, 161, 121, .1);
    border-color: rgba(94, 230, 174, .25);
    border-radius: 999px;
}

#settings-gear-btn {
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.035) !important;
    border-color: var(--border) !important;
    color: var(--dim) !important;
}

#settings-gear-btn:hover {
    color: var(--accent2) !important;
    border-color: rgba(94, 230, 174, .35) !important;
    background: rgba(33, 161, 121, .1) !important;
}

.search-area {
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255,255,255,.012);
    border-color: var(--border);
}

.search-area input,
.inner-search input,
#msg-input,
.custom-modal-input,
#master-password-input {
    color: var(--text);
    background: rgba(2, 7, 8, .72);
    border-color: var(--border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.search-area input { height: 42px; border-radius: 13px; }
.search-area .btn { width: 42px; height: 42px; padding: 0; border-radius: 13px; font-size: 20px; }

.contact-list { padding: 8px; }

.contacts-empty-state {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 24px;
    color: var(--dim);
    text-align: center;
}

.contacts-empty-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 17px;
    color: var(--accent2);
    background: rgba(94, 230, 174, .07);
    border: 1px dashed rgba(94, 230, 174, .28);
    border-radius: 16px;
    font-family: 'Syne', sans-serif;
    font-size: 25px;
}

.contacts-empty-state b {
    margin-bottom: 8px;
    color: #cfe0da;
    font-family: 'Syne', sans-serif;
    font-size: 13px;
}

.contacts-empty-state > span { max-width: 245px; font-size: 10px; line-height: 1.7; }
.contacts-empty-state small {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 22px;
    color: #5c756f;
    font-size: 8px;
    letter-spacing: .12em;
}
.contacts-empty-state small i {
    width: 6px;
    height: 6px;
    background: var(--accent2);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(94, 230, 174, .7);
}

.contact-item {
    min-height: 68px;
    margin: 2px 0;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
}

.contact-item:hover {
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.04);
}

.contact-item.active {
    background: linear-gradient(105deg, rgba(33, 161, 121, .19), rgba(33, 161, 121, .07));
    border: 1px solid rgba(94, 230, 174, .2);
    box-shadow: inset 3px 0 0 var(--accent2), 0 8px 22px rgba(0,0,0,.16);
}

.contact-item.pinned-bg { background: rgba(94, 230, 174, .035) !important; }
.ci-name { color: #e4f2ed; font-size: 13px; }
.ci-preview { color: #78918b; }
.ci-time { color: #6f8882; }
.unread-badge { min-width: 18px; text-align: center; background: var(--accent2); color: #06100d; font-weight: 800; }

.chat-main > .header {
    background: rgba(11, 20, 20, .78);
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
    z-index: 2;
}

#active-title {
    color: #ecf8f3;
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
}

.active-title-rename {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: 5px;
    color: var(--dim);
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: .18s ease;
}

.active-title-rename:hover { color: var(--accent2); background: rgba(94,230,174,.08); }

.messages {
    gap: 10px;
    min-height: 0;
    padding: 26px clamp(16px, 3.5vw, 54px);
    overscroll-behavior-y: contain;
    scroll-padding-bottom: 14px;
    -webkit-overflow-scrolling: touch;
    background-image:
        radial-gradient(ellipse 75% 55% at 50% 110%, rgba(33,161,121,.09), transparent 72%),
        linear-gradient(120deg, rgba(255,255,255,.012), transparent 40%);
}

.messages:empty::before {
    content: 'D';
    display: grid;
    place-items: center;
    align-self: center;
    width: 76px;
    height: 76px;
    margin: auto auto 10px;
    color: var(--accent2);
    background: radial-gradient(circle at 35% 25%, rgba(94,230,174,.2), rgba(33,161,121,.06));
    border: 1px solid rgba(94,230,174,.22);
    border-radius: 24px;
    box-shadow: 0 22px 55px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
    font-family: 'Syne', sans-serif;
    font-size: 31px;
    font-weight: 800;
    transform: rotate(-4deg);
}

.messages:empty::after {
    content: 'Private by design';
    align-self: center;
    margin: 0 auto auto;
    color: #6f8882;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.bubble {
    max-width: min(78%, 680px);
    padding: 10px 14px;
    border-radius: 18px;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.5;
}

.bubble.sent {
    color: #f6fffb;
    background: linear-gradient(140deg, #187b5f, #116449);
    border-color: rgba(123, 242, 193, .17);
    box-shadow: 0 10px 26px rgba(7, 66, 48, .27), inset 0 1px 0 rgba(255,255,255,.08);
}

.bubble.received {
    background: linear-gradient(145deg, rgba(25, 39, 38, .98), rgba(17, 29, 29, .98));
    border-color: rgba(196, 241, 224, .11);
    box-shadow: 0 10px 26px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.025);
}

.bubble:hover { transform: translateY(-1px); }
.reply-quote { border-left-color: var(--accent2); background: rgba(1,8,6,.24); border-radius: 6px; }
.msg-footer { opacity: .64; }
.date-divider { color: #657d77; letter-spacing: .5px; }
.date-divider-line { background: linear-gradient(90deg, transparent, var(--border), transparent); }

.input-bar {
    gap: 9px;
    padding: 12px 18px 14px;
    background: rgba(10, 18, 18, .86);
    border-color: var(--border);
    backdrop-filter: blur(22px) saturate(130%);
    flex: 0 0 auto;
}

#msg-input {
    min-height: 46px;
    padding: 12px 15px;
    border-radius: 16px;
}

#msg-input:focus,
.search-area input:focus,
.inner-search input:focus,
.custom-modal-input:focus,
#master-password-input:focus {
    border-color: rgba(94, 230, 174, .55);
    box-shadow: 0 0 0 3px rgba(33, 161, 121, .11), inset 0 1px 0 rgba(255,255,255,.04);
}

.input-bar > .btn {
    width: 43px;
    height: 43px;
    padding: 0 !important;
    border-radius: 14px;
}

#attach-btn,
#voice-rec-btn {
    width: 34px;
    height: 39px;
    justify-content: center;
    border-radius: 10px !important;
}

#attach-btn:hover,
#voice-rec-btn:hover { color: var(--accent2) !important; background: rgba(94,230,174,.07) !important; }

.btn {
    color: #dce8e3;
    background: linear-gradient(145deg, #273631, #1c2925);
    border: 1px solid rgba(151, 190, 175, .17);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.055);
}

.btn:hover {
    color: #edf5f2;
    background: linear-gradient(145deg, #30433c, #22332e);
    border-color: rgba(151, 190, 175, .28);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255,255,255,.07);
}

.auth-card,
.master-modal-card,
.custom-modal-box,
#settings-modal,
.ap-container {
    background: linear-gradient(155deg, rgba(18, 31, 29, .98), rgba(8, 15, 16, .98));
    border-color: rgba(196, 241, 224, .14);
    box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter: blur(24px);
}

#auth-screen {
    background:
        radial-gradient(circle at 50% 35%, rgba(33,161,121,.15), transparent 35%),
        rgba(5, 9, 10, .88);
    backdrop-filter: blur(16px);
}

.device-unlock-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px 0 12px;
    padding: 13px 16px;
    text-align: left;
}

.device-unlock-button > span:first-child {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(8, 35, 29, .45);
    font-size: 18px;
}

.device-unlock-button span:last-child {
    display: grid;
    gap: 2px;
}

.device-unlock-button small {
    color: rgba(240, 251, 247, .68);
    font-size: 10px;
    font-weight: 500;
}

.vault-separator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 14px;
    color: var(--dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.vault-separator::before,
.vault-separator::after {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--border);
}

.vault-master-only {
    background: rgba(255, 255, 255, .025) !important;
    border-color: var(--border) !important;
    color: var(--dim) !important;
    box-shadow: none !important;
}

.auth-card { max-width: 420px; padding: 46px; border-radius: 28px; }
.auth-card h1 { font-size: 34px; color: #f0fbf7; }
.auth-card h1::after { content: '.'; color: var(--accent2); }
.auth-card #status { margin-top: 10px; color: var(--dim); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }

.master-modal-card {
    width: min(92vw, 460px);
    max-width: 460px;
    padding: 34px;
    border-radius: 28px;
    text-align: left;
}

#master-modal-overlay {
    padding:
        max(12px, env(safe-area-inset-top))
        12px
        max(12px, env(safe-area-inset-bottom));
}

.master-modal-card::before {
    content: '';
    display: block;
    width: 74px;
    height: 3px;
    margin: -20px auto 26px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, var(--accent2), transparent);
    box-shadow: 0 0 24px rgba(94, 230, 174, .55);
}

.master-modal-card > div:first-child:not(.vault-brand) { text-align: center; }
.master-modal-card h2 {
    margin: 0 0 9px;
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: clamp(21px, 4vw, 27px);
    letter-spacing: -.7px;
}
.master-modal-card > p { margin-bottom: 20px; color: #91aaa4; }

.vault-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: 16px;
}

.vault-brand span {
    display: grid;
    place-items: center;
    color: #06110d;
    background: linear-gradient(145deg, #a0c5b7, #5e8f7e);
    box-shadow: 0 8px 24px rgba(40, 78, 66, .22);
    font-family: 'Syne', sans-serif;
    font-weight: 900;
}

.vault-brand span { width: 34px; height: 34px; border-radius: 11px; }
.vault-eyebrow {
    margin-bottom: 8px;
    color: var(--accent2);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.vault-field-label {
    display: block;
    margin-bottom: 8px;
    color: #b8cbc5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

.vault-secret-field {
    display: flex;
    align-items: center;
    overflow: hidden;
    background: rgba(2, 7, 8, .72);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: border-color .18s, box-shadow .18s;
}

.vault-secret-field:focus-within {
    border-color: rgba(94, 230, 174, .55);
    box-shadow: 0 0 0 4px rgba(94, 230, 174, .08);
}

.vault-secret-field input {
    min-width: 0;
    flex: 1;
    padding: 14px 15px;
    color: var(--text);
    background: transparent;
    border: 0;
    outline: 0;
}

.vault-secret-field button {
    padding: 10px 13px;
    color: var(--dim);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--border);
    cursor: pointer;
    font-size: 10px;
}

.vault-form-error {
    min-height: 28px;
    padding-top: 8px;
    color: var(--red);
    font-size: 11px;
}

.vault-primary-action { width: 100%; min-height: 48px; font-size: 13px; }
.vault-back-button {
    width: 100%;
    margin-top: 10px;
    padding: 11px;
    color: var(--dim);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 11px;
}

.vault-back-button:hover { color: var(--text); }
.vault-privacy-note {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: #637b75;
    font-size: 9px;
    letter-spacing: .08em;
}
.vault-privacy-note span { color: var(--accent2); font-size: 7px; }

.vault-hidden-trigger { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#custom-modal-overlay {
    --cm-overlay-top: max(12px, var(--app-safe-top));
    --cm-overlay-bottom: max(12px, var(--app-safe-bottom));
    inset: var(--app-offset-top, 0px) 0 auto;
    height: var(--app-height, 100dvh);
    padding: var(--cm-overlay-top) 12px var(--cm-overlay-bottom);
    overflow: hidden;
}

.custom-modal-box {
    display: flex;
    width: min(100%, 360px);
    max-height: calc(var(--app-height, 100dvh) - var(--cm-overlay-top) - var(--cm-overlay-bottom));
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
}

.custom-modal-icon,
.custom-modal-title,
.custom-modal-input,
.custom-modal-actions {
    flex-shrink: 0;
}

.custom-modal-body {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

#custom-modal-overlay.safety-verification .custom-modal-body {
    scroll-padding-block: 12px;
}

.safety-scan-region {
    display: grid;
    gap: 9px;
    padding-top: 12px;
}

.safety-scan-region video {
    width: 100% !important;
    max-height: 320px;
    max-height: min(42dvh, 320px);
    margin-top: 0 !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.safety-scan-region .safety-scan-status,
.safety-scan-region .safety-gallery-picker {
    margin-top: 0 !important;
}

.safety-gallery-picker {
    box-sizing: border-box;
    width: 100%;
}

.sm-row { background: rgba(255,255,255,.025); border-color: var(--border); }
.sm-row:hover { background: rgba(94,230,174,.05); border-color: rgba(94,230,174,.18); }

.msg-menu,
.reaction-picker {
    background: rgba(12, 22, 21, .96);
    border-color: var(--border);
    box-shadow: 0 20px 55px rgba(0,0,0,.48);
    backdrop-filter: blur(20px);
}

.scroll-down-btn {
    color: var(--accent2);
    background: rgba(13, 27, 24, .92);
    border-color: rgba(94,230,174,.25);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

@media (max-width: 980px) and (min-width: 769px) {
    .sidebar { width: 310px; }
    .messages { padding-inline: 22px; }
}

@media (max-width: 768px) {
    body {
        height: var(--app-height);
    }
    #app-ui {
        position: fixed;
        top: var(--app-offset-top);
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: var(--app-height);
        min-height: 0;
        padding: env(safe-area-inset-top) 0 0;
        gap: 0;
        background: #07100e;
    }
    .sidebar,
    .chat-main {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: 0;
    }
    .sidebar {
        width: 100%;
        height: auto;
        top: env(safe-area-inset-top);
        right: 0;
        bottom: 0;
        left: 0;
    }
    .header { min-height: 72px; padding: 18px 16px; }
    .sidebar > .header::after { right: 15px; }
    .contact-list { padding: 7px; }
    .contact-item { min-height: 66px; }
    .messages { padding: 18px 11px; }
    .bubble { max-width: 88%; font-size: 13px; }
    .input-bar {
        position: relative;
        z-index: 8;
        flex-shrink: 0;
        padding: 9px 10px max(10px, env(safe-area-inset-bottom));
    }
    #attach-btn, #voice-rec-btn { width: 29px; }
    .auth-card { width: calc(100% - 28px); padding: 38px 24px; }
    .master-modal-card { width: calc(100% - 24px); padding: 30px 20px; max-height: calc(100svh - 24px); overflow-y: auto; }
    #settings-modal { border-radius: 26px 26px 0 0; }
}

/* Stage 5: signed device registry and QR linking. */
#devices-modal-overlay {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: none;
    align-items: stretch;
    justify-content: center;
    background: rgba(2, 7, 6, .96);
    backdrop-filter: blur(20px);
}

#devices-modal-overlay.open {
    display: flex;
}

.devices-modal {
    display: flex;
    width: min(100%, 760px);
    height: var(--app-height, 100dvh);
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border-inline: 1px solid rgba(210, 255, 222, .08);
    background:
        radial-gradient(circle at 82% 4%, rgba(35, 134, 54, .07), transparent 30%),
        #050b0a;
}

.devices-modal-header {
    z-index: 2;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    min-height: calc(68px + var(--app-safe-top));
    padding: calc(8px + var(--app-safe-top)) 14px 8px;
    gap: 10px;
    border-bottom: 1px solid rgba(210, 255, 222, .08);
    background: rgba(5, 11, 10, .88);
    backdrop-filter: blur(20px);
}

.devices-modal-header > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.devices-modal-header strong {
    overflow: hidden;
    color: #f3faf6;
    font-family: Inter, ui-sans-serif, sans-serif;
    font-size: 18px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.devices-modal-header span {
    overflow: hidden;
    color: #71877d;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.devices-icon-button {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #9eb4aa;
    border: 1px solid rgba(210, 255, 222, .1);
    border-radius: 50%;
    background: rgba(255, 255, 255, .025);
    font-size: 22px;
}

.devices-icon-button[hidden] { visibility: hidden; }

.devices-modal-body {
    min-height: 0;
    flex: 1 1 auto;
    padding: 16px 15px max(18px, env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.devices-state {
    padding: 48px 20px;
    color: #81978d;
    text-align: center;
    font: 12px/1.6 'JetBrains Mono', monospace;
}

.devices-state-error,
.device-scanner-status.error,
.candidate-link-status.error { color: var(--red); }

.devices-security-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 13px;
    padding: 12px;
    color: #9db1a8;
    border: 1px solid rgba(35, 134, 54, .18);
    border-radius: 14px;
    background: rgba(35, 134, 54, .045);
    font-size: 11px;
    line-height: 1.5;
}

.devices-security-note svg,
.devices-primary-button svg,
.device-card-icon svg,
.device-revoke-button svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.devices-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.device-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    min-height: 72px;
    padding: 11px;
    border: 1px solid rgba(210, 255, 222, .095);
    border-radius: 16px;
    background: rgba(13, 23, 21, .88);
}

.device-card-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: #48b86f;
    border: 1px solid rgba(35, 134, 54, .2);
    border-radius: 13px;
    background: rgba(35, 134, 54, .06);
}

.device-card-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.device-card-copy strong {
    overflow: hidden;
    color: #edf7f1;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-card-copy strong em {
    color: #48b86f;
    font-size: 9px;
    font-style: normal;
    font-weight: 650;
    text-transform: uppercase;
}

.device-card-copy span,
.device-card-copy code {
    overflow: hidden;
    color: #758a80;
    font: 10px/1.35 'JetBrains Mono', monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-current-check {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    color: #48b86f;
    border: 1px solid rgba(35, 134, 54, .2);
    border-radius: 50%;
}

.device-revoke-button {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #ef7771;
    border: 1px solid rgba(248, 81, 73, .18);
    border-radius: 12px;
    background: rgba(248, 81, 73, .045);
}

.devices-primary-button,
.devices-secondary-button {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 13px;
    padding: 11px 14px;
    color: #effaf3;
    border: 1px solid rgba(48, 164, 87, .5);
    border-radius: 14px;
    background: linear-gradient(135deg, #21863a, #187632);
    font-size: 12px;
    font-weight: 700;
}

.devices-secondary-button {
    color: #b7cbc1;
    border-color: rgba(210, 255, 222, .12);
    background: rgba(13, 23, 21, .9);
}

.devices-footnote {
    margin: 12px 4px 0;
    color: #667b71;
    font: 9px/1.5 'JetBrains Mono', monospace;
    text-align: center;
}

.candidate-link {
    display: flex;
    max-width: 460px;
    margin: 0 auto;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.candidate-link-qr {
    width: min(78vw, 310px);
    margin: 4px auto 18px;
    padding: 15px;
    line-height: 0;
    border-radius: 22px;
    background: #fff;
}

.candidate-link-qr svg { width: 100%; height: auto; }

.candidate-link > strong { color: #edf7f1; font-size: 15px; }
.candidate-link > p { color: #82978d; font-size: 11px; line-height: 1.6; }
.candidate-link > code {
    max-height: 72px;
    padding: 11px;
    overflow: auto;
    color: #9eb4aa;
    border: 1px solid rgba(210, 255, 222, .1);
    border-radius: 12px;
    background: rgba(3, 8, 7, .7);
    font: 9px/1.45 'JetBrains Mono', monospace;
    overflow-wrap: anywhere;
}

.candidate-link-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    color: #86a095;
    font: 10px/1.45 'JetBrains Mono', monospace;
}

.candidate-link-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ea043;
    box-shadow: 0 0 10px rgba(46, 160, 67, .65);
    animation: device-link-pulse 1.25s ease-in-out infinite;
}

.candidate-link small {
    margin-top: 14px;
    color: #62766d;
    font-size: 9px;
    line-height: 1.55;
}

.device-scanner {
    display: flex;
    max-width: 520px;
    margin: 0 auto;
    flex-direction: column;
}

.device-scanner video {
    width: 100%;
    min-height: 240px;
    max-height: min(52dvh, 430px);
    object-fit: cover;
    border: 1px solid rgba(210, 255, 222, .1);
    border-radius: 18px;
    background: #000;
}

.device-scanner-status {
    margin-top: 10px;
    color: #82978d;
    font: 10px/1.5 'JetBrains Mono', monospace;
    text-align: center;
}

.device-code-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    margin-top: 10px;
}

.device-code-entry input,
.device-code-entry button {
    min-width: 0;
    padding: 11px;
    color: #dbe9e1;
    border: 1px solid rgba(210, 255, 222, .1);
    border-radius: 12px;
    outline: 0;
    background: rgba(8, 16, 14, .92);
    font: 10px 'JetBrains Mono', monospace;
}

.device-code-entry button { color: #48b86f; }

@keyframes device-link-pulse {
    0%, 100% { opacity: .45; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1); }
}

@media (min-width: 769px) {
    .devices-modal {
        height: min(92dvh, 900px);
        margin: auto;
        border: 1px solid rgba(210, 255, 222, .1);
        border-radius: 24px;
    }

    .devices-modal-header {
        min-height: 68px;
        padding: 8px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ── 2026 privacy-first green interface ───────────────────────────── */

body {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-image:
        radial-gradient(circle at 8% 4%, rgba(53, 201, 111, .12), transparent 28%),
        radial-gradient(circle at 92% 94%, rgba(31, 113, 82, .16), transparent 32%),
        linear-gradient(150deg, #030605 0%, #07100d 54%, #030706 100%);
}

.sidebar {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(9, 17, 15, .985), rgba(5, 10, 9, .985));
}

.sidebar > .header::after { display: none; }

.sidebar-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 13px;
    min-height: 0;
    padding: 22px 20px 17px;
    background:
        radial-gradient(circle at 88% 0%, rgba(53, 201, 111, .09), transparent 34%),
        rgba(7, 14, 12, .82);
}

.sidebar-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
}

.sidebar-logo {
    margin: 0;
    color: #f7fbf8;
    font-family: Inter, ui-sans-serif, sans-serif;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -1.35px;
    line-height: 1;
}

.sidebar-logo span {
    color: var(--accent2);
    text-shadow: 0 0 24px rgba(53, 201, 111, .22);
}

.privacy-status {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    color: rgba(130, 229, 164, .72);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.own-avatar-button {
    position: relative;
    width: 47px;
    height: 47px;
    padding: 0;
    border: 1px solid rgba(189, 240, 210, .15);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
}

.own-avatar-button:hover { border-color: rgba(130, 229, 164, .42); }

.presence-dot {
    position: absolute;
    right: -1px;
    bottom: 2px;
    z-index: 3;
    width: 11px;
    height: 11px;
    border: 2px solid #07100d;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(53, 201, 111, .45);
}

.id-badge {
    max-width: 100%;
    margin: 0;
    padding: 6px 10px;
    color: #9bb0a8;
    border-color: rgba(189, 240, 210, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);
    font-size: 10px;
    letter-spacing: .3px;
}

.sidebar-search {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 15px 16px 10px;
    padding: 0 13px;
    min-height: 43px;
    color: #71877f;
    border: 1px solid rgba(189, 240, 210, .11);
    border-radius: 15px;
    background: rgba(255, 255, 255, .025);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.sidebar-search:focus-within {
    color: var(--accent2);
    border-color: rgba(53, 201, 111, .38);
    background: rgba(53, 201, 111, .035);
    box-shadow: 0 0 0 3px rgba(53, 201, 111, .06);
}

.sidebar-search input {
    width: 100%;
    min-width: 0;
    height: 41px;
    padding: 0;
    color: var(--text);
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13px;
}

.sidebar-search input::-webkit-search-cancel-button { opacity: .55; filter: invert(1); }

.sidebar-search input[aria-invalid="true"] {
    color: var(--red);
}

.sidebar-search:has(input[aria-invalid="true"]) {
    border-color: rgba(255, 107, 114, .42);
}

.chat-filter-pills {
    display: flex;
    gap: 5px;
    margin: 0 16px 12px;
    padding: 3px;
    border: 1px solid rgba(189, 240, 210, .08);
    border-radius: 13px;
    background: rgba(255, 255, 255, .018);
}

.chat-filter-pills[hidden] { display: none; }

.chat-filter-pill {
    min-width: 0;
    flex: 1;
    padding: 7px 8px;
    color: #7f948d;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-filter-pill:hover { color: #c7d8d1; background: rgba(255,255,255,.025); }
.chat-filter-pill.active {
    color: #07130d;
    background: linear-gradient(135deg, #82e5a4, #42c978);
    box-shadow: 0 7px 20px rgba(53, 201, 111, .16);
}

.sidebar-view-heading {
    padding: 0 20px 7px;
    color: #668078;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.search-area {
    padding: 0 16px 12px;
    gap: 7px;
    border: 0;
}

.search-area input {
    height: 42px;
    padding: 0 13px;
    color: #dbe9e3;
    border-color: rgba(189, 240, 210, .1);
    border-radius: 14px;
    background: rgba(2, 7, 6, .72);
    font-size: 11px;
}

.search-area .add-chat-btn {
    width: 42px;
    height: 42px;
    color: #d9f4e3;
    border: 1px solid rgba(130, 229, 164, .2);
    background: linear-gradient(150deg, rgba(53, 201, 111, .27), rgba(26, 93, 66, .24));
    box-shadow: none;
}

.search-area .add-chat-btn:hover {
    border-color: rgba(130, 229, 164, .42);
    background: rgba(53, 201, 111, .22);
    transform: translateY(-1px);
}

.chat-list-refresh-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    --chat-refresh-offset: 0px;
}

.network-runtime-status,
.client-update-prompt {
    position: fixed;
    z-index: 13000;
    left: 50%;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    max-width: calc(100vw - 28px);
    padding: 9px 13px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-chip);
    background: var(--elev);
    color: var(--text);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .32);
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    transform: translate3d(-50%, -8px, 0);
    transition: opacity 160ms ease-out, transform 160ms ease-out;
    pointer-events: none;
}

.network-runtime-status.is-visible,
.client-update-prompt.is-visible {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
}

.network-runtime-status i {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--amber);
}

.network-runtime-status[data-state="offline"] i { background: var(--danger); }

.client-update-prompt {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    pointer-events: auto;
}

.client-update-prompt button {
    min-width: 44px;
    min-height: 44px;
    padding: 9px 13px;
    border: 0;
    border-radius: 11px;
    background: var(--accent);
    color: #061009;
    font: inherit;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .network-runtime-status,
    .client-update-prompt {
        transform: translate3d(-50%, 0, 0);
        transition: opacity 120ms linear;
    }
}

.chat-refresh-indicator {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    left: 0;
    height: 54px;
    overflow: hidden;
    color: var(--dim);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, calc(-54px + var(--chat-refresh-offset)), 0);
    transition: transform .16s ease-out, opacity .14s ease-out;
}

.chat-refresh-indicator.is-visible {
    opacity: 1;
}

.chat-refresh-indicator.is-dragging {
    transition: none;
}

.chat-list-refresh-shell > .contact-list {
    flex: 1;
    transform: translate3d(0, var(--chat-refresh-offset), 0);
    transition: transform .16s ease-out;
}

.chat-list-refresh-shell > .chat-refresh-indicator.is-dragging + .contact-list {
    transition: none;
}

.chat-refresh-content {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #9ab5aa;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
}

.chat-refresh-icon {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    color: var(--accent2);
    background: rgba(53, 201, 111, .08);
    border: 1px solid rgba(130, 229, 164, .18);
    border-radius: 50%;
}

.chat-refresh-icon svg {
    grid-area: 1 / 1;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-refresh-spinner,
.chat-refresh-check {
    display: none;
}

.chat-refresh-indicator[data-state="release"] .chat-refresh-arrow {
    transform: rotate(180deg);
}

.chat-refresh-indicator[data-state="refreshing"] .chat-refresh-arrow,
.chat-refresh-indicator[data-state="done"] .chat-refresh-arrow {
    display: none;
}

.chat-refresh-indicator[data-state="refreshing"] .chat-refresh-spinner {
    display: block;
    stroke-dasharray: 36 18;
    animation: chat-refresh-spin .8s linear infinite;
}

.chat-refresh-indicator[data-state="done"] .chat-refresh-check {
    display: block;
}

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

.contact-list {
    min-height: 0;
    padding: 2px 9px 8px;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

/* Preserve native scrolling deeper into the list at the top edge, while
   keeping a downward finger movement available to pull-to-refresh. */
.contact-list.is-at-scroll-start {
    touch-action: pan-down pinch-zoom;
}

.messages { touch-action: pan-y; }

.contact-item {
    gap: 12px;
    min-height: 72px;
    margin: 2px 0;
    padding: 10px 11px;
    border: 1px solid transparent;
    border-radius: 16px;
}

.contact-item:hover {
    border-color: rgba(189, 240, 210, .08);
    background: rgba(255, 255, 255, .026);
}

.contact-item.active {
    border-color: rgba(53, 201, 111, .18);
    background:
        linear-gradient(110deg, rgba(53, 201, 111, .095), rgba(53, 201, 111, .02));
    box-shadow: inset 3px 0 0 rgba(130, 229, 164, .65);
}

.new-chat-result {
    width: calc(100% - 2px);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
}

.new-chat-result .ci-name,
.new-chat-result .ci-preview b,
.new-chat-arrow {
    color: var(--accent2);
}

.new-chat-result .ci-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.new-chat-arrow {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
}

.ci-name {
    color: #eef6f1;
    font-family: Inter, ui-sans-serif, sans-serif;
    font-size: 13px;
    font-weight: 680;
}

.ci-preview { color: #71877f; font-family: Inter, ui-sans-serif, sans-serif; font-size: 11px; }
.ci-time { color: #60756e; font-size: 9px; }
.ci-verified-copy { color: var(--accent2); }

.unread-badge {
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    color: #07120c;
    background: var(--accent);
    box-shadow: 0 0 18px rgba(53, 201, 111, .22);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.sidebar-nav {
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 0 0 auto;
    gap: 2px;
    margin: 0 10px 10px;
    padding: 7px 5px;
    border: 1px solid rgba(189, 240, 210, .1);
    border-radius: 17px;
    background: rgba(10, 18, 16, .94);
    box-shadow: 0 12px 35px rgba(0, 0, 0, .28);
}

.sidebar-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 6px 2px 5px;
    color: #6f837c;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-size: 8px;
    cursor: pointer;
}

.sidebar-nav-item svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-nav-item:hover { color: #b7cac2; background: rgba(255, 255, 255, .025); }
.sidebar-nav-item.active { color: var(--accent2); background: rgba(53, 201, 111, .06); }
.sidebar-nav-item.gear-open #gear-icon { transform: rotate(45deg); }
.sidebar[data-view="calls"] .search-area { display: none; }

.safe-avatar {
    --avatar-a: #42d77d;
    --avatar-b: #0a271b;
    --avatar-c: #d1ffe0;
    --avatar-mid: #173d2c;
    --avatar-deep: #07140f;
    --avatar-ink: #030807;
    --avatar-line: rgba(215, 255, 229, .28);
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 1px solid rgba(189, 240, 210, .2);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--avatar-a) 31%, transparent), transparent 46%),
        linear-gradient(155deg, color-mix(in srgb, var(--avatar-b) 72%, #10251c), #020605 78%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .025),
        inset 0 -10px 18px rgba(0, 0, 0, .28),
        0 7px 18px rgba(0, 0, 0, .24);
    isolation: isolate;
}

.safe-avatar::before,
.safe-avatar::after {
    content: '';
    position: absolute;
    display: block;
    pointer-events: none;
}

.safe-avatar::before {
    z-index: 0;
    inset: 7%;
    border: 1px solid color-mix(in srgb, var(--avatar-a) 24%, transparent);
    border-radius: 50%;
    box-shadow: inset 0 0 15px color-mix(in srgb, var(--avatar-a) 10%, transparent);
}

.safe-avatar::after {
    z-index: 3;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .11), transparent 28%),
        radial-gradient(circle at 50% 115%, rgba(0, 0, 0, .55), transparent 48%);
    mix-blend-mode: screen;
    opacity: .55;
}

.safe-avatar .mascot-svg {
    position: absolute;
    z-index: 2;
    inset: 2%;
    width: 96%;
    height: 96%;
    overflow: visible;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4));
}

.mascot-aura { fill: color-mix(in srgb, var(--avatar-a) 18%, transparent); }
.mascot-body { fill: var(--avatar-deep); stroke: var(--avatar-line); stroke-width: 1.1; }
.mascot-trim { fill: none; stroke: color-mix(in srgb, var(--avatar-a) 55%, transparent); stroke-width: 1.4; stroke-linecap: round; }
.mascot-head { fill: var(--avatar-mid); stroke: var(--avatar-line); stroke-width: 1.2; stroke-linejoin: round; }
.mascot-mask { fill: var(--avatar-ink); stroke: color-mix(in srgb, var(--avatar-a) 34%, transparent); stroke-width: 1; stroke-linejoin: round; }
.mascot-accent { fill: var(--avatar-a); stroke: color-mix(in srgb, var(--avatar-c) 35%, transparent); stroke-width: .7; stroke-linejoin: round; }
.mascot-light {
    fill: var(--avatar-c);
    filter: drop-shadow(0 0 3px var(--avatar-a));
}
.mascot-stroke {
    fill: none;
    stroke: var(--avatar-a);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--avatar-a) 60%, transparent));
}

.safe-avatar[data-style="0"]  { --avatar-a:#42d77d; --avatar-b:#0a271b; --avatar-c:#d1ffe0; --avatar-mid:#173d2c; }
.safe-avatar[data-style="1"]  { --avatar-a:#2fc995; --avatar-b:#092520; --avatar-c:#bfffea; --avatar-mid:#153c35; }
.safe-avatar[data-style="2"]  { --avatar-a:#74d95c; --avatar-b:#162713; --avatar-c:#e1ffcf; --avatar-mid:#314528; }
.safe-avatar[data-style="3"]  { --avatar-a:#55d6a5; --avatar-b:#0b2922; --avatar-c:#d4fff0; --avatar-mid:#1b4438; }
.safe-avatar[data-style="4"]  { --avatar-a:#35bb64; --avatar-b:#101f14; --avatar-c:#c5ffd5; --avatar-mid:#284131; }
.safe-avatar[data-style="5"]  { --avatar-a:#38cbb7; --avatar-b:#072523; --avatar-c:#c9fff8; --avatar-mid:#16413d; }
.safe-avatar[data-style="6"]  { --avatar-a:#68d45e; --avatar-b:#142612; --avatar-c:#e3ffd7; --avatar-mid:#30462c; }
.safe-avatar[data-style="7"]  { --avatar-a:#27ba7e; --avatar-b:#072119; --avatar-c:#c3ffe2; --avatar-mid:#15392b; }
.safe-avatar[data-style="8"]  { --avatar-a:#41d68e; --avatar-b:#09261d; --avatar-c:#ccffe6; --avatar-mid:#183e31; }
.safe-avatar[data-style="9"]  { --avatar-a:#78ca4c; --avatar-b:#172311; --avatar-c:#e8ffd4; --avatar-mid:#354529; }
.safe-avatar[data-style="10"] { --avatar-a:#2fbd70; --avatar-b:#081f16; --avatar-c:#caffdf; --avatar-mid:#17382a; }
.safe-avatar[data-style="11"] { --avatar-a:#82cf58; --avatar-b:#182512; --avatar-c:#eeffda; --avatar-mid:#39482b; }
.safe-avatar[data-style="12"] { --avatar-a:#36c278; --avatar-b:#092219; --avatar-c:#c9ffe0; --avatar-mid:#1b3b2d; }
.safe-avatar[data-style="13"] { --avatar-a:#44d3b1; --avatar-b:#082522; --avatar-c:#d2fff6; --avatar-mid:#19413c; }
.safe-avatar[data-style="14"] { --avatar-a:#6bcf48; --avatar-b:#16230f; --avatar-c:#e5ffd2; --avatar-mid:#35462a; }
.safe-avatar[data-style="15"] { --avatar-a:#35c998; --avatar-b:#07231d; --avatar-c:#c6ffea; --avatar-mid:#153c32; }
.safe-avatar[data-style="16"] { --avatar-a:#55d486; --avatar-b:#0a251b; --avatar-c:#d9ffe7; --avatar-mid:#1c4030; }
.safe-avatar[data-style="17"] { --avatar-a:#77c94d; --avatar-b:#172410; --avatar-c:#eaffd7; --avatar-mid:#37482b; }
.safe-avatar[data-style="18"] { --avatar-a:#2dc684; --avatar-b:#08231a; --avatar-c:#c8ffe3; --avatar-mid:#163c2f; }
.safe-avatar[data-style="19"] { --avatar-a:#39e071; --avatar-b:#072415; --avatar-c:#dcffe6; --avatar-mid:#17442a; }

.ui-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    overflow: visible;
    vertical-align: -.14em;
}

.ui-icon-button-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ci-name > .ui-icon { margin-right: 5px; }
.ap-tab,
.ap-btn,
.ap-card-title,
.ap-perm-item {
    align-items: center;
}
.ap-tab,
.ap-btn,
.ap-card-title {
    gap: 7px;
}
.ap-tab,
.ap-btn {
    display: inline-flex;
}
.ap-card-title,
.ap-perm-item {
    display: flex;
}
.ap-tab .ui-icon,
.ap-btn .ui-icon,
.ap-card-title .ui-icon,
.ap-perm-item .ui-icon { width: 15px; height: 15px; }

.sm-lang-code {
    display: inline-flex;
    width: 25px;
    height: 18px;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    border: 1px solid rgba(130, 229, 164, .18);
    border-radius: 5px;
    color: var(--accent2);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 8px;
    letter-spacing: .5px;
}

.sm-section-note {
    margin: 8px 7px 4px;
    color: #71857c;
    font-size: 10px;
    line-height: 1.55;
}

.safe-avatar-own { width: 100%; height: 100%; }
.contact-avatar { width: 43px; height: 43px; }
.active-avatar-slot { display: none; margin-right: 10px; }
.active-avatar-slot:not(:empty) { display: block; }
.active-avatar-slot.safe-avatar,
.active-avatar-slot { width: 38px; height: 38px; flex: 0 0 38px; }

.chat-main > .header {
    min-height: 76px;
    padding: 15px 20px;
    background: rgba(7, 14, 12, .89);
}

#active-title {
    color: #eff8f3;
    font-family: Inter, ui-sans-serif, sans-serif;
    font-size: 14px;
    font-weight: 680;
}

.messages {
    background-image:
        radial-gradient(ellipse 55% 38% at 50% 84%, rgba(53, 201, 111, .055), transparent 72%),
        linear-gradient(rgba(189, 240, 210, .016) 1px, transparent 1px);
    background-size: auto, 100% 64px;
}

.bubble {
    border-color: rgba(189, 240, 210, .105);
    background: linear-gradient(145deg, rgba(21, 31, 29, .98), rgba(13, 22, 20, .98));
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
    font-family: Inter, ui-sans-serif, sans-serif;
}

.bubble.mine {
    border-color: rgba(89, 220, 137, .2);
    background: linear-gradient(145deg, rgba(31, 95, 65, .96), rgba(20, 62, 45, .98));
}

.input-bar {
    background: rgba(7, 14, 12, .94);
    backdrop-filter: blur(18px);
}

#msg-input {
    border-color: rgba(189, 240, 210, .12);
    border-radius: 18px;
    background: rgba(2, 7, 6, .78);
    font-family: Inter, ui-sans-serif, sans-serif;
}

.input-bar > .btn {
    border-color: rgba(130, 229, 164, .18);
    background: linear-gradient(145deg, rgba(53, 201, 111, .22), rgba(44, 105, 75, .18));
    box-shadow: none;
}

.settings-profile-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
    padding: 15px;
    border: 1px solid rgba(130, 229, 164, .16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 10% 10%, rgba(53, 201, 111, .09), transparent 38%),
        rgba(255, 255, 255, .025);
}

.settings-profile-avatar { width: 52px; height: 52px; }
.settings-profile-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.settings-profile-copy strong {
    overflow: hidden;
    color: #eff8f3;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.settings-profile-copy span { color: #7b9088; font-size: 10px; line-height: 1.4; }

.settings-avatar-cycle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    color: var(--accent2);
    border: 1px solid rgba(130, 229, 164, .18);
    border-radius: 11px;
    background: rgba(53, 201, 111, .055);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}

.settings-avatar-cycle:hover { background: rgba(53, 201, 111, .1); border-color: rgba(130, 229, 164, .35); }

.avatar-picker-panel {
    margin: -14px 0 24px;
    padding: 14px;
    border: 1px solid rgba(130, 229, 164, .15);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(53, 201, 111, .08), transparent 42%),
        rgba(5, 13, 10, .94);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .24);
}

.avatar-picker-panel[hidden] { display: none !important; }

.avatar-picker-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.avatar-picker-heading > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.avatar-picker-heading strong {
    color: #eff8f3;
    font-size: 12px;
}

.avatar-picker-heading span {
    color: #748a81;
    font-size: 9px;
    line-height: 1.45;
}

.avatar-picker-close {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    padding: 0;
    color: #71857c;
    border: 1px solid rgba(130, 229, 164, .12);
    border-radius: 9px;
    background: rgba(255, 255, 255, .025);
    font: 18px/1 Inter, sans-serif;
    cursor: pointer;
    place-items: center;
}

.avatar-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.avatar-option {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 6px 3px 5px;
    color: #71857c;
    border: 1px solid rgba(130, 229, 164, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .018);
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.avatar-option:hover,
.avatar-option:focus-visible {
    z-index: 1;
    border-color: rgba(130, 229, 164, .35);
    outline: none;
    background: rgba(53, 201, 111, .07);
    transform: translateY(-2px);
}

.avatar-option.selected {
    color: #bce9cc;
    border-color: rgba(53, 201, 111, .7);
    background: rgba(53, 201, 111, .105);
    box-shadow: inset 0 0 0 1px rgba(53, 201, 111, .12), 0 7px 18px rgba(0, 0, 0, .18);
}

.avatar-option-preview {
    width: clamp(43px, 8vw, 58px);
    height: clamp(43px, 8vw, 58px);
}

.avatar-option-name {
    max-width: 100%;
    overflow: hidden;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 8px;
    letter-spacing: .2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar-option-check {
    position: absolute;
    z-index: 5;
    top: 3px;
    right: 3px;
    display: none;
    width: 17px;
    height: 17px;
    color: #061009;
    border: 2px solid #0b1811;
    border-radius: 50%;
    background: var(--accent2);
    place-items: center;
}

.avatar-option-check .ui-icon { width: 10px; height: 10px; stroke-width: 3; }
.avatar-option.selected .avatar-option-check { display: grid; }

.master-modal-card,
.auth-card {
    border-color: rgba(130, 229, 164, .16);
    background:
        radial-gradient(circle at 50% 0%, rgba(53, 201, 111, .105), transparent 38%),
        linear-gradient(155deg, rgba(13, 24, 21, .99), rgba(5, 10, 9, .99));
}

.master-modal-card::before {
    background: linear-gradient(90deg, transparent, rgba(130, 229, 164, .82), transparent);
    box-shadow: 0 0 24px rgba(53, 201, 111, .2);
}

.master-modal-card .btn,
.auth-card .btn {
    color: #06110b;
    background: linear-gradient(135deg, #8ee9aa, #40c777);
    box-shadow: 0 10px 30px rgba(53, 201, 111, .18);
}

@media (max-width: 768px) {
    #app-ui { background: #040807; }
    .sidebar-header { padding: 19px 17px 15px; }
    .sidebar-logo { font-size: 24px; }
    .sidebar-search { margin: 13px 13px 9px; }
    .chat-filter-pills { margin: 0 13px 10px; }
    .sidebar-view-heading { padding-inline: 17px; }
    .search-area { padding-inline: 13px; }
    .contact-list { padding: 2px 6px 8px; }
    .contact-item { min-height: 70px; }
    .sidebar-nav {
        margin: 0 8px max(8px, env(safe-area-inset-bottom));
        border-radius: 18px;
    }
    .chat-main > .header {
        min-height: 72px;
        padding: 13px 14px;
    }
    .active-avatar-slot.safe-avatar,
    .active-avatar-slot { width: 36px; height: 36px; flex-basis: 36px; }
    .messages { padding: 18px 12px; }
    .bubble { max-width: 87%; font-size: 14px; }
    .input-bar { padding-bottom: max(11px, env(safe-area-inset-bottom)); }
    .settings-profile-card {
        grid-template-columns: auto minmax(0, 1fr);
        margin-bottom: 20px;
    }
    .settings-avatar-cycle { grid-column: 1 / -1; width: 100%; }
}

/* =====================================================================
   Reference-aligned UI: About-page green, full settings, stable viewport
   ===================================================================== */
.sidebar-logo span,
.sidebar-private-label,
.ci-verified-copy,
.sidebar-nav-item.active,
.settings-avatar-cycle,
.sm-row-icon,
.sm-row-arrow,
.sm-lang-btn.active,
.vault-login-brand strong span {
    color: #2ea043;
}

.sidebar-logo span {
    text-shadow: 0 0 18px rgba(35, 134, 54, .18);
}

.sidebar-header {
    background:
        radial-gradient(circle at 78% 0%, rgba(35, 134, 54, .065), transparent 36%),
        linear-gradient(180deg, rgba(5, 13, 11, .98), rgba(5, 11, 10, .94));
}

.id-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    max-width: min(100%, 240px);
    min-height: 39px;
    padding: 8px 14px !important;
    overflow: hidden;
    line-height: 1 !important;
}

.id-badge .id-crown {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0;
    line-height: 18px;
}

.id-badge .id-value {
    display: block;
    min-width: 0;
    overflow: hidden;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-search:focus-within,
.search-area input:focus,
#msg-input:focus {
    border-color: rgba(35, 134, 54, .48);
    box-shadow: 0 0 0 3px rgba(35, 134, 54, .055);
}

.chat-filter-pill.active {
    color: #fff;
    border-color: #238636;
    background: #238636;
    box-shadow: none;
}

.search-area .add-chat-btn,
.input-bar > .btn {
    color: #bfffc4;
    border-color: rgba(35, 134, 54, .22);
    background: rgba(35, 134, 54, .075);
    box-shadow: none;
}

.search-area .add-chat-btn:hover,
.input-bar > .btn:hover {
    color: #2ea043;
    border-color: rgba(35, 134, 54, .42);
    background: rgba(35, 134, 54, .11);
}

.contact-item.active {
    border-color: rgba(35, 134, 54, .16);
    background: linear-gradient(110deg, rgba(35, 134, 54, .075), rgba(35, 134, 54, .012));
    box-shadow: inset 3px 0 0 #2ea043;
}

.unread-badge {
    color: #fff;
    background: #238636;
    box-shadow: none;
}

.sidebar-nav {
    align-items: stretch;
    background: rgba(8, 16, 14, .97);
}

.sidebar-nav-item {
    justify-content: center;
    min-height: 50px;
    overflow: visible;
    line-height: 1.15;
}

.sidebar-nav-item span {
    display: block;
    width: 100%;
    max-width: none;
    overflow: visible;
    font-size: 9px;
    text-overflow: clip;
}

.sidebar-nav-item.active {
    background: rgba(35, 134, 54, .065);
}

#settings-gear-btn,
#settings-gear-btn #gear-icon,
#settings-gear-btn.gear-open #gear-icon {
    transform: none !important;
}

.sidebar-nav #settings-gear-btn {
    width: 100%;
    height: auto;
    min-height: 50px;
    padding: 6px 0 5px !important;
    color: #6f837c !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
}

.sidebar-nav #settings-gear-btn:hover {
    color: #b7cac2 !important;
    background: rgba(255, 255, 255, .025) !important;
}

.sidebar-nav #settings-gear-btn.active,
.sidebar-nav #settings-gear-btn.gear-open {
    color: #2ea043 !important;
    background: rgba(35, 134, 54, .065) !important;
}

#settings-gear-btn svg {
    display: block;
    margin: 0 auto;
}

.chat-main > .header {
    border-bottom-color: rgba(35, 134, 54, .1);
}

.messages {
    background-image:
        radial-gradient(ellipse 58% 42% at 50% 86%, rgba(35, 134, 54, .035), transparent 72%),
        linear-gradient(rgba(210, 255, 222, .014) 1px, transparent 1px);
}

.bubble.mine {
    border-color: rgba(35, 134, 54, .17);
    background: linear-gradient(145deg, rgba(20, 72, 45, .97), rgba(13, 48, 33, .99));
}

.bubble.mine .delivery-status,
.bubble.mine .read-status {
    color: #2ea043;
}

.input-bar {
    border-top-color: rgba(35, 134, 54, .09);
}

/* Settings are a real app page instead of a system-looking bottom sheet. */
#settings-modal-overlay {
    align-items: stretch;
    justify-content: center;
    padding: 0;
    background: rgba(2, 7, 6, .96);
    backdrop-filter: blur(20px);
}

#settings-modal {
    display: flex;
    width: 100%;
    max-width: 760px;
    height: var(--app-height, 100dvh);
    max-height: none;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-inline: 1px solid rgba(210, 255, 222, .08);
    border-radius: 0;
    background:
        radial-gradient(circle at 85% 4%, rgba(35, 134, 54, .055), transparent 30%),
        #050b0a;
    box-shadow: 0 0 70px rgba(0, 0, 0, .5);
    transform: translateX(24px);
}

#settings-modal-overlay.open #settings-modal {
    transform: translateX(0);
}

.sm-handle {
    display: none;
}

.sm-header {
    z-index: 3;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    min-height: 74px;
    padding: 10px 17px;
    border-bottom: 1px solid rgba(210, 255, 222, .08);
    background: rgba(5, 11, 10, .86);
    backdrop-filter: blur(20px);
}

.sm-title {
    padding: 0 5px;
    color: #f3faf6;
    font-family: Inter, ui-sans-serif, sans-serif;
    font-size: 22px;
    font-weight: 760;
}

.sm-close-btn {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #bdcec6;
    border: 1px solid rgba(210, 255, 222, .11);
    border-radius: 50%;
    background: rgba(255, 255, 255, .025);
}

.sm-back-btn {
    color: #9eb4aa;
    border-color: transparent;
    background: transparent;
    font-size: 25px;
}

.sm-close-btn:hover {
    color: #2ea043;
    border-color: rgba(35, 134, 54, .28);
    background: rgba(35, 134, 54, .06);
}

.sm-settings-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    max-height: 0;
    margin: 0 17px;
    padding: 0 14px;
    overflow: hidden;
    color: #6f877d;
    border: 0 solid rgba(210, 255, 222, .11);
    border-radius: 15px;
    background: rgba(9, 18, 16, .95);
    opacity: 0;
    transition: max-height .2s ease, margin .2s ease, padding .2s ease, opacity .2s ease;
}

.sm-settings-search.open {
    max-height: 52px;
    margin-block: 11px 3px;
    padding-block: 11px;
    border-width: 1px;
    opacity: 1;
}

.sm-settings-search input {
    min-width: 0;
    color: #e8f3ed;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
}

.sm-settings-search button {
    color: #71877d;
    border: 0;
    background: transparent;
}

.sm-body {
    min-height: 0;
    flex: 1 1 auto;
    gap: 0;
    padding: 14px 17px max(14px, env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
}

#settings-modal .sm-body [hidden] {
    display: none !important;
}

.settings-profile-card {
    margin-bottom: 12px;
    padding: 13px;
    border-color: rgba(35, 134, 54, .13);
    background:
        radial-gradient(circle at 12% 20%, rgba(35, 134, 54, .07), transparent 38%),
        rgba(13, 23, 21, .88);
}

.settings-profile-copy strong {
    font-size: 15px;
}

.settings-profile-copy span {
    color: #7d9088;
    font-size: 12px;
    line-height: 1.3;
}

.settings-avatar-cycle {
    border-color: rgba(35, 134, 54, .2);
    background: rgba(35, 134, 54, .055);
    font-size: 10px;
}

.sm-section-label {
    margin: 14px 7px 6px;
    color: #71857c;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.sm-row,
.sm-push-row,
.sm-lang-grid {
    border-color: rgba(210, 255, 222, .095) !important;
}

.sm-row {
    min-height: 56px;
    margin-bottom: 5px;
    padding: 9px 11px;
    gap: 10px;
    flex-shrink: 0;
    border: 1px solid rgba(210, 255, 222, .095);
    border-radius: 15px;
    background: rgba(13, 23, 21, .86) !important;
}

.sm-row:hover {
    border-color: rgba(35, 134, 54, .2) !important;
    background: rgba(35, 134, 54, .045) !important;
}

.sm-row-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    border: 1px solid rgba(35, 134, 54, .11);
    border-radius: 10px;
    background: rgba(35, 134, 54, .045);
}

.sm-row-text {
    min-width: 0;
}

.sm-row-label {
    color: #eef7f2;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.sm-row-desc {
    color: #788c83;
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.avatar-picker-heading strong {
    font-size: 13px;
}

.avatar-picker-heading span {
    font-size: 10px;
    line-height: 1.35;
}

.avatar-option-name {
    font-size: 9px;
}

.sm-divider {
    height: 0;
    margin: 2px 0;
    border: 0;
    background: transparent;
}

.sm-request-policy-card,
.sm-expandable-row {
    flex-direction: column;
    align-items: stretch;
    cursor: default;
}

.sm-request-policy-card {
    gap: 6px;
}

#sm-message-requests:empty,
#sm-blocked-list:empty {
    display: none !important;
}

.sm-request-policy-main {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 9px;
    width: 100%;
}

.sm-request-policy-desc {
    margin-top: -2px;
    padding-left: 41px;
    padding-right: 2px;
}

.sm-expandable-row {
    cursor: pointer;
}

.sm-expandable-row-main {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.sm-push-row {
    gap: 7px;
    border: 0 !important;
    background: transparent;
}

.sm-language-select {
    position: relative;
    margin-bottom: 5px;
}

.sm-language-trigger {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 0;
    text-align: left;
}

.sm-language-current {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    color: #9aafa5;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.sm-language-chevron {
    display: inline-flex;
    color: #5f786d;
    font-size: 16px;
    transition: transform .16s ease;
}

.sm-language-trigger[aria-expanded="true"] .sm-language-chevron {
    transform: rotate(180deg);
}

.sm-language-menu {
    display: grid;
    gap: 3px;
    margin-top: 5px;
    padding: 5px;
    border: 1px solid rgba(210, 255, 222, .095);
    border-radius: 15px;
    background: rgba(8, 16, 14, .98);
}

.sm-language-option {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    padding: 9px 11px;
    color: #a6b9b0;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.sm-language-option:hover,
.sm-language-option.active {
    color: #eff8f3;
    border-color: rgba(35, 134, 54, .22);
    background: rgba(35, 134, 54, .07);
}

.sm-language-option.active::after {
    content: '✓';
    order: 2;
    color: #2ea043;
    font-size: 13px;
}

.sm-language-option.active .sm-lang-code {
    display: none;
}

.sm-lang-btn {
    border-color: transparent;
    background: transparent;
}

.sm-lang-btn.active {
    border-color: rgba(35, 134, 54, .26);
    background: rgba(35, 134, 54, .07);
}

.sm-switch[aria-checked="true"] {
    border-color: #238636;
    background: #238636;
}

/* Authentication follows the supplied card reference without phone identity. */
#master-modal-overlay {
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    background:
        radial-gradient(circle at 50% 8%, rgba(35, 134, 54, .07), transparent 32%),
        #030807;
}

.master-modal-card,
.auth-card {
    border-color: rgba(35, 134, 54, .14);
    background:
        radial-gradient(circle at 50% 0%, rgba(35, 134, 54, .075), transparent 40%),
        linear-gradient(155deg, rgba(12, 23, 20, .99), rgba(5, 10, 9, .99));
}

.master-modal-card::before {
    background: linear-gradient(90deg, transparent, #2ea043, transparent);
    box-shadow: 0 0 24px rgba(35, 134, 54, .14);
}

.vault-login-brand {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 13px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 24px;
    text-align: left;
    text-decoration: none !important;
}

.vault-brand-mark {
    display: inline-flex;
    grid-row: 1 / 3;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    color: #2ea043;
    border: 1px solid rgba(35, 134, 54, .24);
    border-radius: 16px;
    background: rgba(35, 134, 54, .065);
    box-shadow: 0 0 28px rgba(35, 134, 54, .09);
}

.vault-login-brand strong {
    color: #f7fbf8;
    font: 760 25px/1 Inter, ui-sans-serif, sans-serif;
}

.vault-login-brand small {
    margin-top: 5px;
    color: #6f877c;
    font: 650 8px/1.2 "JetBrains Mono", monospace;
    letter-spacing: .18em;
}

.master-modal-card input:focus,
.auth-card input:focus {
    border-color: rgba(35, 134, 54, .45) !important;
    box-shadow: 0 0 0 3px rgba(35, 134, 54, .055);
}

.master-modal-card .btn,
.auth-card .btn {
    color: #fff;
    border-color: #238636;
    background: #238636;
    box-shadow: none;
}

.master-modal-card .btn[style*="background:transparent"],
.auth-card .btn[style*="background:transparent"],
.device-unlock-button {
    color: #b8cec2 !important;
    border-color: rgba(35, 134, 54, .16) !important;
    background: rgba(35, 134, 54, .035) !important;
}

/* Admin page no longer replaces the chat DOM. */
body.admin-panel-open {
    overflow: hidden;
}

.admin-panel-overlay {
    position: fixed;
    z-index: 25000;
    inset: var(--app-offset-top, 0) 0 auto;
    display: flex;
    width: 100%;
    height: var(--app-height, 100dvh);
    flex-direction: column;
    overflow: hidden;
    color: #eaf5ef;
    background:
        radial-gradient(circle at 80% 0%, rgba(35, 134, 54, .06), transparent 34%),
        #050b0a;
    animation: admin-panel-enter .18s ease-out;
}

.admin-panel-overlay.closing {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease;
}

.admin-panel-overlay .ap-header,
.admin-panel-overlay .ap-tabs,
.admin-panel-overlay .ap-content {
    width: min(100%, 820px);
    margin-inline: auto;
}

.admin-panel-overlay .ap-content {
    min-height: 0;
    flex: 1 1 auto;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    overflow: auto;
}

.admin-panel-overlay .ap-tab.active,
.admin-panel-overlay .ap-btn-green {
    color: #fff;
    border-color: #238636;
    background: #238636;
}

.admin-panel-overlay .ap-input:focus {
    border-color: rgba(35, 134, 54, .45);
    box-shadow: 0 0 0 3px rgba(35, 134, 54, .055);
}

.admin-panel-overlay .ap-btn:disabled {
    cursor: wait;
    opacity: .55;
}

@keyframes admin-panel-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 769px) {
    #settings-modal {
        height: min(92dvh, 900px);
        margin: auto;
        border: 1px solid rgba(210, 255, 222, .1);
        border-radius: 24px;
    }
}

@media (max-width: 768px) {
    html,
    body,
    #app-ui {
        width: 100%;
        height: var(--app-height, 100dvh) !important;
        min-height: 0;
    }

    #app-ui {
        position: fixed;
        inset: var(--app-offset-top, 0) 0 auto;
        padding: 0 !important;
        overflow: hidden;
    }

    .sidebar {
        position: relative !important;
        inset: auto !important;
        width: 100%;
        height: 100% !important;
        min-height: 0;
        padding: 0;
    }

    .chat-main {
        height: 100% !important;
        min-height: 0;
        touch-action: pan-y;
    }

    .chat-main > .header {
        min-height: calc(72px + var(--app-safe-top));
        padding: calc(13px + var(--app-safe-top)) 14px 13px;
        flex-shrink: 0;
    }

    .sidebar-header {
        padding-top: max(15px, var(--app-safe-top));
    }

    .sidebar-nav {
        margin: 0 8px 4px;
        padding-bottom: max(7px, env(safe-area-inset-bottom));
    }

    .sidebar-nav-item {
        min-height: 48px;
        padding-inline: 0;
    }

    .input-bar {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    html.visual-keyboard-open .input-bar {
        padding-bottom: 8px;
    }

    button,
    .contact-item,
    .back-btn {
        touch-action: manipulation;
    }

    body.swiping .chat-main {
        will-change: transform;
    }

    .input-bar {
        /* Blur requires repainting the message list beneath the composer on every frame. */
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    #settings-modal {
        height: 100dvh;
    }

    html.visual-keyboard-open #settings-modal {
        height: var(--app-height, 100dvh);
    }

    .sm-header {
        min-height: calc(58px + var(--settings-safe-top));
        padding: calc(8px + var(--settings-safe-top)) 12px 8px;
    }

    .sm-title {
        font-size: 20px;
    }

    .sm-body {
        padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    }

    .settings-profile-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 11px;
        margin-bottom: 9px;
        padding: 11px;
    }

    .sm-section-label {
        margin: 11px 6px 5px;
        font-size: 10.5px;
    }

    .sm-row {
        min-height: 52px;
        margin-bottom: 4px;
        padding: 8px 10px;
    }

    .sm-row-label {
        font-size: 12.5px;
    }

    .sm-row-desc {
        font-size: 10px;
    }

    .sm-request-policy-desc {
        padding-left: 41px;
    }

    .settings-profile-copy strong {
        font-size: 14px;
    }

    .settings-profile-copy span {
        font-size: 11px;
    }

    .settings-avatar-cycle {
        grid-column: auto;
        width: auto;
        padding: 8px 9px;
        font-size: 9.5px;
    }

    .settings-avatar-cycle svg {
        width: 13px;
        height: 13px;
    }

    .avatar-picker-panel {
        margin: -2px 0 12px;
        padding: 12px 9px;
    }

    .avatar-picker-grid {
        gap: 6px;
    }

    .avatar-option {
        padding-inline: 2px;
        border-radius: 12px;
    }

    .avatar-option-preview {
        width: 46px;
        height: 46px;
    }

    .avatar-picker-heading strong {
        font-size: 12.5px;
    }

    .avatar-picker-heading span {
        font-size: 9.5px;
    }

    .avatar-option-name {
        font-size: 8.5px;
    }

    .admin-panel-overlay .ap-header {
        padding-top: max(12px, env(safe-area-inset-top));
    }
}

/* Smoothness pass: keep frequent interactions on compositor-friendly
   properties and avoid repainting the transcript underneath glass layers. */
.bubble,
.btn,
.search-nav-btn,
.contact-item,
.sm-row,
.sidebar-nav-item,
.devices-icon-button {
    transition-property: transform, opacity, color, background-color, border-color;
    transition-duration: .16s;
    transition-timing-function: ease-out;
}

.contact-item,
.msg-wrap {
    contain: layout paint style;
}

.bubble-wrap,
#chat-window > [id^="wrap-"] {
    contain: layout paint style;
}

.history-window-spacer {
    width: 1px;
    min-height: 0;
    pointer-events: none;
    contain: strict;
}

#chat-window.history-window-manual-anchor {
    /* History pagination preserves an explicit DOM anchor. Native scroll
       anchoring during that mutation would apply the same correction twice. */
    overflow-anchor: none;
}

@media (max-width: 768px), (hover: none), (pointer: coarse) {
    .header,
    .input-bar,
    #auth-screen,
    .auth-card,
    .master-modal-card,
    .custom-modal-box,
    #settings-modal,
    .ap-container,
    .msg-menu,
    .reaction-picker,
    #devices-modal-overlay,
    .devices-modal-header {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .header,
    .input-bar,
    .devices-modal-header {
        background-color: rgba(8, 17, 15, .98);
    }

    .bubble:hover,
    .btn:hover {
        transform: none;
    }

    .bubble.sent,
    .bubble.received,
    .contact-item,
    .sidebar-logo,
    .presence-dot {
        box-shadow: none;
        text-shadow: none;
    }

    .chat-main.slide-in {
        animation-duration: .22s;
        animation-timing-function: cubic-bezier(.2, .8, .2, 1);
    }
}

@media (max-width: 768px) {
    /* Keep both primary screens laid out. Toggling display on a 200+ row
       sidebar forced a full layout before every warm chat open. */
    #app-ui > .sidebar,
    #app-ui > .chat-main {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        width: 100%;
        height: 100% !important;
        transition: transform .24s ease-out, opacity .18s ease-out, visibility 0s linear .24s;
    }

    #app-ui > .sidebar {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    #app-ui > .chat-main {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    body.in-chat #app-ui > .sidebar {
        transform: translate3d(-12%, 0, 0);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    body.in-chat #app-ui > .chat-main {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    body.in-chat.swiping #app-ui > .sidebar,
    body.in-chat.swipe-back-completing #app-ui > .sidebar {
        transform: translate3d(var(--chat-list-offset, -12%), 0, 0);
        opacity: var(--chat-list-opacity, 0);
        visibility: visible;
        pointer-events: none;
        transition: none;
    }

    body.in-chat.swiping #app-ui > .chat-main {
        transform: translate3d(var(--chat-back-offset, 0), 0, 0);
        opacity: 1;
        visibility: visible;
        pointer-events: none;
        transition: none;
    }

    body.in-chat.swipe-back-completing #app-ui > .sidebar {
        transition: transform .18s ease-out, opacity .14s ease-out;
    }

    body.in-chat.swipe-back-completing #app-ui > .chat-main {
        transform: translate3d(var(--chat-back-offset, 100vw), 0, 0);
        opacity: 1;
        visibility: visible;
        pointer-events: none;
        transition: transform .18s ease-out;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bubble,
    .btn,
    .search-nav-btn,
    .contact-item,
    .sm-row,
    .sidebar-nav-item,
    .devices-icon-button,
    .chat-main.slide-in,
    body.in-chat.swipe-back-completing #app-ui > .sidebar,
    body.in-chat.swipe-back-completing #app-ui > .chat-main {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}