/* ============================================================
   PRIVYN CHAT UI
   ============================================================ */


:root {

    color-scheme: dark;

    --bg:
        #080a0d;

    --surface:
        #0e1116;

    --surface-2:
        #13171d;

    --surface-3:
        #191e26;

    --surface-hover:
        #1d232c;

    --border:
        rgba(255,255,255,.075);

    --border-strong:
        rgba(255,255,255,.13);

    --text:
        #f5f7fa;

    --text-soft:
        #b1b9c5;

    --text-muted:
        #777f8b;

    --accent:
        #f4f7fb;

    --accent-text:
        #101318;

    --success:
        #7bd8a3;

    --shadow:
        0 24px 80px rgba(0,0,0,.34);

    --sidebar-width:
        340px;

    --radius-xl:
        22px;

    --radius-lg:
        16px;

    --radius-md:
        12px;

}


* {

    box-sizing:
        border-box;

}


html,
body {

    margin:
        0;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

}


body {

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


button,
textarea,
input {

    font:
        inherit;

}


button,
a {

    -webkit-tap-highlight-color:
        transparent;

}


a {

    color:
        inherit;

}


/* ============================================================
   APP
   ============================================================ */


.app-shell {

    display:
        grid;

    grid-template-columns:
        var(--sidebar-width) minmax(0, 1fr);

    width:
        100%;

    height:
        100dvh;

    background:
        var(--bg);

}



/* ============================================================
   SIDEBAR
   ============================================================ */


.sidebar {

    position:
        relative;

    display:
        grid;

    grid-template-rows:
        auto auto auto minmax(0,1fr) auto;

    min-width:
        0;

    height:
        100dvh;

    background:
        linear-gradient(
            180deg,
            #101319 0%,
            #0c0f14 100%
        );

    border-right:
        1px solid var(--border);

    overflow:
        hidden;

}


.sidebar::before {

    content:
        "";

    position:
        absolute;

    inset:
        0 auto auto 0;

    width:
        100%;

    height:
        180px;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(255,255,255,.055),
            transparent 62%
        );

}



/* ============================================================
   BRAND
   ============================================================ */


.sidebar-header {

    position:
        relative;

    z-index:
        2;

    padding:
        22px 20px 18px;

}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    text-decoration:
        none;

    margin-bottom:
        22px;

}


.brand-mark {

    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    border:
        1px solid var(--border-strong);

    border-radius:
        13px;

    background:
        linear-gradient(
            145deg,
            #f7f9fc,
            #bdc5d0
        );

    color:
        #101217;

    font-weight:
        850;

    font-size:
        19px;

    box-shadow:
        0 8px 30px rgba(0,0,0,.23);

}


.brand-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.brand-name {

    font-size:
        18px;

    font-weight:
        750;

    letter-spacing:
        -.3px;

}


.brand-tagline {

    color:
        var(--text-muted);

    font-size:
        11px;

}



/* ============================================================
   NEW CHAT
   ============================================================ */


.new-chat {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    height:
        44px;

    width:
        100%;

    border:
        1px solid rgba(255,255,255,.9);

    border-radius:
        12px;

    background:
        var(--accent);

    color:
        var(--accent-text);

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        750;

    transition:
        transform .16s ease,
        opacity .16s ease;

}


.new-chat:hover {

    transform:
        translateY(-1px);

    opacity:
        .94;

}


.new-chat-icon {

    display:
        grid;

    place-items:
        center;

    width:
        20px;

    height:
        20px;

    font-size:
        18px;

    line-height:
        1;

}



/* ============================================================
   PRIVACY PANEL
   ============================================================ */


.privacy-panel {

    margin:
        0 14px 12px;

    padding:
        13px;

    border:
        1px solid var(--border);

    border-radius:
        15px;

    background:
        rgba(255,255,255,.025);

}


.privacy-panel-top {

    display:
        flex;

    gap:
        10px;

    align-items:
        center;

    margin-bottom:
        10px;

}


.privacy-panel-top > div {

    display:
        flex;

    flex-direction:
        column;

}


.privacy-panel-top strong {

    font-size:
        12px;

    font-weight:
        650;

}


.privacy-panel-top span:not(.privacy-icon) {

    color:
        var(--text-muted);

    font-size:
        10px;

    margin-top:
        2px;

}


.privacy-icon {

    display:
        grid;

    place-items:
        center;

    width:
        31px;

    height:
        31px;

    border-radius:
        9px;

    background:
        rgba(123,216,163,.08);

    color:
        var(--success);

    font-size:
        15px;

}


.connection-status {

    margin:
        9px 0;

    min-height:
        17px;

    color:
        var(--text-muted);

    font-size:
        10px;

    line-height:
        1.5;

}


.sound-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    width:
        100%;

    height:
        35px;

    border:
        1px solid var(--border);

    border-radius:
        9px;

    background:
        #151a21;

    color:
        var(--text-soft);

    cursor:
        pointer;

    font-size:
        11px;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;

}


.sound-button:hover {

    background:
        #1b2028;

    border-color:
        var(--border-strong);

    color:
        var(--text);

}


.sound-button.enabled {

    color:
        var(--success);

    border-color:
        rgba(123,216,163,.25);

    background:
        rgba(123,216,163,.06);

}



/* ============================================================
   CONVERSATION LIST
   ============================================================ */


.conversation-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        10px 20px 8px;

    color:
        var(--text-muted);

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;

}


.conversation-list {

    min-height:
        0;

    overflow-y:
        auto;

    padding:
        3px 9px 14px;

    scrollbar-width:
        thin;

    scrollbar-color:
        #2b313a transparent;

}


.conversation-item {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    width:
        100%;

    min-height:
        67px;

    padding:
        13px 14px 12px 58px;

    margin:
        2px 0;

    border:
        1px solid transparent;

    border-radius:
        13px;

    background:
        transparent;

    color:
        var(--text);

    text-align:
        left;

    cursor:
        pointer;

    transition:
        background .14s ease,
        border-color .14s ease,
        transform .14s ease;

}


.conversation-item::before {

    content:
        "@";

    position:
        absolute;

    left:
        13px;

    top:
        12px;

    display:
        grid;

    place-items:
        center;

    width:
        34px;

    height:
        34px;

    border:
        1px solid var(--border);

    border-radius:
        11px;

    background:
        #181d24;

    color:
        #c7ced8;

    font-size:
        13px;

    font-weight:
        750;

}


.conversation-item:hover {

    background:
        rgba(255,255,255,.035);

}


.conversation-item.active {

    border-color:
        rgba(255,255,255,.08);

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.035)
        );

}


.conversation-item strong {

    display:
        block;

    max-width:
        calc(100% - 28px);

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    font-size:
        13px;

    font-weight:
        650;

}


.conversation-item > span:not(.unread-badge) {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--text-muted);

    font-size:
        10px;

}


.unread-badge {

    position:
        absolute;

    top:
        15px;

    right:
        12px;

    display:
        grid;

    place-items:
        center;

    min-width:
        19px;

    height:
        19px;

    padding:
        0 5px;

    margin:
        0 !important;

    border-radius:
        20px;

    background:
        #f5f7fa;

    color:
        #101318 !important;

    font-size:
        9px !important;

    font-weight:
        800;

}


.conversation-empty {

    margin:
        12px 5px;

    padding:
        24px 15px;

    border:
        1px dashed var(--border-strong);

    border-radius:
        13px;

    color:
        var(--text-muted);

    font-size:
        11px;

    line-height:
        1.7;

    text-align:
        center;

}



/* ============================================================
   SIDEBAR FOOTER
   ============================================================ */


.sidebar-footer {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-height:
        62px;

    padding:
        12px 18px;

    border-top:
        1px solid var(--border);

    color:
        var(--text-muted);

}


.sidebar-footer-lock {

    display:
        grid;

    place-items:
        center;

    width:
        28px;

    height:
        28px;

    flex:
        0 0 28px;

    border:
        1px solid var(--border);

    border-radius:
        8px;

    color:
        var(--success);

}


.sidebar-footer > div:last-child {

    display:
        flex;

    flex-direction:
        column;

}


.sidebar-footer strong {

    color:
        var(--text-soft);

    font-size:
        10px;

    font-weight:
        650;

}


.sidebar-footer span {

    margin-top:
        2px;

    font-size:
        9px;

}



/* ============================================================
   CHAT AREA
   ============================================================ */


.chat-area {

    position:
        relative;

    min-width:
        0;

    height:
        100dvh;

    background:
        var(--bg);

    overflow:
        hidden;

}



/* ============================================================
   EMPTY STATE
   ============================================================ */


.empty-state {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        62px;

    width:
        100%;

    height:
        100%;

    padding:
        60px;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 55% 40%,
            #121720,
            #080a0d 58%
        );

}


.empty-visual {

    position:
        relative;

    display:
        grid;

    place-items:
        center;

    width:
        260px;

    height:
        260px;

    flex:
        0 0 260px;

}


.empty-ring {

    position:
        absolute;

    border:
        1px solid rgba(255,255,255,.065);

    border-radius:
        50%;

}


.ring-one {

    width:
        260px;

    height:
        260px;

}


.ring-two {

    width:
        172px;

    height:
        172px;

}


.empty-lock {

    position:
        relative;

    z-index:
        3;

    display:
        grid;

    place-items:
        center;

    width:
        92px;

    height:
        92px;

    border:
        1px solid rgba(255,255,255,.16);

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            #edf1f7,
            #aab3c0
        );

    color:
        #111419;

    box-shadow:
        var(--shadow);

    font-size:
        32px;

    font-weight:
        850;

}


.empty-copy {

    max-width:
        490px;

}


.eyebrow {

    color:
        #87909d;

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        1.8px;

}


.empty-copy h1 {

    margin:
        15px 0 17px;

    font-size:
        clamp(35px, 4.6vw, 61px);

    line-height:
        1.02;

    letter-spacing:
        -2.4px;

    font-weight:
        720;

}


.empty-copy p {

    max-width:
        420px;

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        14px;

    line-height:
        1.75;

}


.empty-new-chat {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    height:
        43px;

    margin-top:
        25px;

    padding:
        0 17px;

    border:
        1px solid var(--border-strong);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.055);

    color:
        var(--text);

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        650;

}



/* ============================================================
   CHAT PANEL
   ============================================================ */


.chat-panel {

    display:
        grid;

    grid-template-rows:
        74px minmax(0,1fr) auto;

    width:
        100%;

    height:
        100dvh;

}



/* ============================================================
   CHAT HEADER
   ============================================================ */


.chat-header {

    position:
        relative;

    z-index:
        10;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-width:
        0;

    padding:
        0 22px;

    border-bottom:
        1px solid var(--border);

    background:
        rgba(12,15,20,.92);

    backdrop-filter:
        blur(18px);

}


.chat-identity {

    display:
        flex;

    align-items:
        center;

    min-width:
        0;

    gap:
        12px;

}


.chat-avatar {

    position:
        relative;

    display:
        grid;

    place-items:
        center;

    width:
        41px;

    height:
        41px;

    flex:
        0 0 41px;

    border:
        1px solid var(--border);

    border-radius:
        13px;

    background:
        #181d24;

    color:
        #d7dce4;

    font-weight:
        750;

}


.presence-dot {

    position:
        absolute;

    right:
        -1px;

    bottom:
        -1px;

    width:
        10px;

    height:
        10px;

    border:
        2px solid #0c0f14;

    border-radius:
        50%;

    background:
        var(--success);

}


.chat-identity-copy {

    min-width:
        0;

}


.chat-header h1 {

    margin:
        0;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    font-size:
        14px;

    font-weight:
        680;

}


.security-label {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    margin-top:
        5px;

    color:
        var(--text-muted);

    font-size:
        9px;

}


.security-dot {

    display:
        inline-block;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--success);

}


.security-divider {

    opacity:
        .45;

}


.chat-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.encryption-badge {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    height:
        31px;

    padding:
        0 10px;

    border:
        1px solid rgba(123,216,163,.13);

    border-radius:
        9px;

    background:
        rgba(123,216,163,.05);

    color:
        #9fe5ba;

    font-size:
        9px;

    font-weight:
        650;

}


.header-button {

    display:
        grid;

    place-items:
        center;

    width:
        32px;

    height:
        32px;

    border:
        1px solid var(--border);

    border-radius:
        9px;

    background:
        rgba(255,255,255,.025);

    color:
        var(--text-soft);

    cursor:
        pointer;

    font-size:
        17px;

    transition:
        transform .15s ease,
        background .15s ease;

}


.header-button:hover {

    transform:
        rotate(15deg);

    background:
        rgba(255,255,255,.06);

}



/* ============================================================
   MESSAGE AREA
   ============================================================ */


.message-stage {

    position:
        relative;

    min-height:
        0;

    overflow:
        hidden;

    background:
        #090c10;

}


.message-stage-pattern {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .25;

    background-image:
        radial-gradient(
            rgba(255,255,255,.055) .8px,
            transparent .8px
        );

    background-size:
        30px 30px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.65),
            transparent
        );

}


.message-day {

    position:
        absolute;

    z-index:
        3;

    top:
        15px;

    left:
        50%;

    transform:
        translateX(-50%);

    pointer-events:
        none;

}


.message-day span {

    display:
        inline-flex;

    height:
        24px;

    align-items:
        center;

    padding:
        0 10px;

    border:
        1px solid var(--border);

    border-radius:
        20px;

    background:
        rgba(15,18,23,.78);

    color:
        #707985;

    font-size:
        8px;

    letter-spacing:
        .4px;

    backdrop-filter:
        blur(10px);

}


.message-list {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        100%;

    overflow-y:
        auto;

    padding:
        55px clamp(22px, 5vw, 80px) 30px;

    scrollbar-width:
        thin;

    scrollbar-color:
        #282e37 transparent;

}


.history-placeholder {

    width:
        fit-content;

    max-width:
        420px;

    margin:
        50px auto;

    padding:
        12px 17px;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.025);

    color:
        var(--text-muted);

    font-size:
        10px;

    text-align:
        center;

}



/* ============================================================
   MESSAGES
   ============================================================ */


.message-row {

    display:
        flex;

    width:
        100%;

    margin:
        6px 0;

    animation:
        message-enter .18s ease-out;

}


@keyframes message-enter {

    from {

        opacity:
            0;

        transform:
            translateY(4px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


.message-row.incoming {

    justify-content:
        flex-start;

}


.message-row.outgoing {

    justify-content:
        flex-end;

}


.message-bubble {

    position:
        relative;

    max-width:
        min(68%, 680px);

    padding:
        10px 12px 8px;

    border:
        1px solid rgba(255,255,255,.065);

    border-radius:
        15px 15px 15px 5px;

    background:
        #171c23;

    box-shadow:
        0 6px 23px rgba(0,0,0,.10);

}


.message-row.outgoing .message-bubble {

    border-radius:
        15px 15px 5px 15px;

    background:
        linear-gradient(
            145deg,
            #252b34,
            #20262e
        );

    border-color:
        rgba(255,255,255,.095);

}


.message-body {

    color:
        #edf0f4;

    font-size:
        13px;

    line-height:
        1.47;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;

}


.message-meta {

    margin-top:
        5px;

    color:
        #6f7885;

    font-size:
        8px;

    line-height:
        1;

    text-align:
        right;

}



/* ============================================================
   COMPOSER
   ============================================================ */


.composer-area {

    position:
        relative;

    z-index:
        10;

    padding:
        10px 18px 13px;

    border-top:
        1px solid var(--border);

    background:
        rgba(11,14,18,.97);

    backdrop-filter:
        blur(20px);

}


.composer-security {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        6px;

    min-height:
        16px;

    margin-bottom:
        7px;

    color:
        #626b77;

    font-size:
        8px;

}


.composer-security > span {

    color:
        var(--success);

}


.composer {

    width:
        min(100%, 940px);

    margin:
        0 auto;

}


.composer-box {

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr) auto;

    align-items:
        end;

    min-height:
        52px;

    padding:
        6px;

    border:
        1px solid var(--border-strong);

    border-radius:
        16px;

    background:
        #151920;

    box-shadow:
        0 10px 35px rgba(0,0,0,.16);

    transition:
        border-color .16s ease,
        box-shadow .16s ease;

}


.composer-box:focus-within {

    border-color:
        rgba(255,255,255,.19);

    box-shadow:
        0 12px 40px rgba(0,0,0,.23);

}


.composer textarea {

    width:
        100%;

    min-height:
        40px;

    max-height:
        160px;

    padding:
        10px 11px;

    resize:
        none;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--text);

    font-size:
        13px;

    line-height:
        1.45;

}


.composer textarea::placeholder {

    color:
        #68717e;

}


.send-button {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    height:
        40px;

    min-width:
        88px;

    padding:
        0 13px;

    border:
        0;

    border-radius:
        11px;

    background:
        #f2f4f7;

    color:
        #101318;

    cursor:
        pointer;

    font-size:
        11px;

    font-weight:
        760;

    transition:
        opacity .14s ease,
        transform .14s ease;

}


.send-button:hover {

    transform:
        translateY(-1px);

}


.send-button:disabled {

    opacity:
        .45;

    cursor:
        default;

    transform:
        none;

}


.send-arrow {

    display:
        grid;

    place-items:
        center;

    width:
        19px;

    height:
        19px;

    border-radius:
        6px;

    background:
        #1a1e24;

    color:
        #fff;

    font-size:
        12px;

}


.composer-hint {

    display:
        flex;

    justify-content:
        space-between;

    padding:
        6px 6px 0;

    color:
        #4e5661;

    font-size:
        8px;

}



/* ============================================================
   FOCUS / ACCESSIBILITY
   ============================================================ */


button:focus-visible,
a:focus-visible,
textarea:focus-visible {

    outline:
        2px solid rgba(255,255,255,.7);

    outline-offset:
        2px;

}



/* ============================================================
   TABLET
   ============================================================ */


@media (
    max-width: 950px
) {

    :root {

        --sidebar-width:
            285px;

    }


    .brand-tagline,
    .sidebar-footer span {

        display:
            none;

    }


    .empty-state {

        gap:
            35px;

        padding:
            40px;

    }


    .empty-visual {

        width:
            190px;

        height:
            190px;

        flex-basis:
            190px;

    }


    .ring-one {

        width:
            190px;

        height:
            190px;

    }


    .ring-two {

        width:
            125px;

        height:
            125px;

    }


    .empty-lock {

        width:
            72px;

        height:
            72px;

        border-radius:
            22px;

    }

}



/* ============================================================
   MOBILE
   ============================================================ */


@media (
    max-width: 680px
) {

    :root {

        --sidebar-width:
            104px;

    }


    .sidebar-header {

        padding:
            15px 10px;

    }


    .brand {

        justify-content:
            center;

        margin-bottom:
            14px;

    }


    .brand-content {

        display:
            none;

    }


    .new-chat {

        height:
            38px;

        padding:
            0;

    }


    .new-chat > span:last-child {

        display:
            none;

    }


    .privacy-panel {

        margin:
            0 8px 10px;

        padding:
            9px 7px;

    }


    .privacy-panel-top {

        justify-content:
            center;

    }


    .privacy-panel-top > div {

        display:
            none;

    }


    .connection-status {

        display:
            none;

    }


    .sound-button {

        padding:
            0;

    }


    .sound-button > span:last-child {

        display:
            none;

    }


    .conversation-heading {

        justify-content:
            center;

        padding:
            9px 4px;

        font-size:
            8px;

    }


    .conversation-item {

        min-height:
            67px;

        padding:
            48px 5px 5px;

        text-align:
            center;

        align-items:
            center;

    }


    .conversation-item::before {

        left:
            50%;

        top:
            8px;

        transform:
            translateX(-50%);

    }


    .conversation-item strong {

        max-width:
            90px;

        font-size:
            9px;

    }


    .conversation-item > span:not(.unread-badge) {

        display:
            none;

    }


    .unread-badge {

        top:
            6px;

        right:
            12px;

    }


    .sidebar-footer {

        justify-content:
            center;

        padding:
            8px;

    }


    .sidebar-footer > div:last-child {

        display:
            none;

    }


    .chat-header {

        padding:
            0 12px;

    }


    .encryption-badge {

        display:
            none;

    }


    .message-list {

        padding:
            53px 12px 24px;

    }


    .message-bubble {

        max-width:
            87%;

    }


    .composer-area {

        padding:
            9px;

    }


    .composer-security,
    .composer-hint {

        display:
            none;

    }


    .composer-box {

        border-radius:
            14px;

    }


    .send-button {

        min-width:
            42px;

        width:
            42px;

        padding:
            0;

    }


    .send-button > span:first-child {

        display:
            none;

    }


    .empty-state {

        padding:
            24px;

    }


    .empty-visual {

        display:
            none;

    }


    .empty-copy h1 {

        font-size:
            34px;

        letter-spacing:
            -1.5px;

    }

}



/* ============================================================
   SMALL HEIGHT
   ============================================================ */


@media (
    max-height: 620px
) {

    .privacy-panel {

        display:
            none;

    }


    .sidebar {

        grid-template-rows:
            auto auto minmax(0,1fr) auto;

    }

}




/* ============================================================
   PRIVYN LOGIN-REGISTER BRAND ALIGNMENT
   ============================================================ */


/*
 * Match the visual identity already used by:
 *
 * /login/
 * /register/
 *
 * Core palette:
 *
 * #080c12  page background
 * #101720  primary surface
 * #0b1118  recessed surface
 * #273342  border
 * #334253  stronger border
 * #f4f7fb  primary text
 * #9eabba  muted text
 */


:root {

    --bg:
        #080c12;

    --surface:
        #101720;

    --surface-2:
        #0b1118;

    --surface-3:
        #131c26;

    --surface-hover:
        #16212c;

    --border:
        #273342;

    --border-strong:
        #334253;

    --text:
        #f4f7fb;

    --text-soft:
        #dce6f1;

    --text-muted:
        #8e9baa;

    --accent:
        #f4f7fb;

    --accent-text:
        #080c12;

    --success:
        #9ef0bd;

}


/* ============================================================
   PAGE
   ============================================================ */


html,
body {

    background:
        #080c12;

    color:
        #f4f7fb;

}


.app-shell {

    background:
        #080c12;

}



/* ============================================================
   SIDEBAR
   ============================================================ */


.sidebar {

    background:
        #101720;

    border-right:
        1px solid #273342;

}


.sidebar::before {

    display:
        none;

}


.sidebar-header {

    padding:
        28px 22px 20px;

}



/* ============================================================
   EXACT PRIVYN WORDMARK STYLE FROM REGISTER.CSS
   ============================================================ */


.brand {

    display:
        block;

    margin:
        0 0 24px;

    color:
        #f4f7fb;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        800;

    letter-spacing:
        0.24em;

    line-height:
        1;

}


.brand:hover {

    color:
        #ffffff;

}


/*
 * Old premium-brand elements are no longer used,
 * but keep them hidden in case cached HTML exists.
 */

.brand-mark,
.brand-content,
.brand-name,
.brand-tagline {

    display:
        none;

}



/* ============================================================
   NEW CHAT
   ============================================================ */


.new-chat {

    height:
        46px;

    border:
        0;

    border-radius:
        12px;

    background:
        #f4f7fb;

    color:
        #080c12;

    font-size:
        14px;

    font-weight:
        700;

    box-shadow:
        none;

}


.new-chat:hover {

    background:
        #ffffff;

    opacity:
        1;

}



/* ============================================================
   ENCRYPTION / SOUND CARD
   ============================================================ */


.privacy-panel {

    margin:
        0 14px 14px;

    padding:
        15px;

    border:
        1px solid #273342;

    border-radius:
        14px;

    background:
        #0b1118;

}


.privacy-icon {

    background:
        transparent;

    border:
        1px solid #273342;

    color:
        #9ef0bd;

}


.privacy-panel-top strong {

    color:
        #dce6f1;

}


.privacy-panel-top span:not(.privacy-icon),
.connection-status {

    color:
        #8e9baa;

}


.sound-button {

    border:
        1px solid #273342;

    background:
        #101720;

    color:
        #dce6f1;

}


.sound-button:hover {

    background:
        #16212c;

    border-color:
        #334253;

}


.sound-button.enabled {

    border-color:
        #2c8f57;

    background:
        #101720;

    color:
        #9ef0bd;

}



/* ============================================================
   CONVERSATIONS
   ============================================================ */


.conversation-heading {

    color:
        #8391a0;

}


.conversation-item {

    border:
        1px solid transparent;

}


.conversation-item::before {

    border:
        1px solid #273342;

    background:
        #0b1118;

    color:
        #dce6f1;

}


.conversation-item:hover {

    background:
        #0b1118;

}


.conversation-item.active {

    background:
        #0b1118;

    border-color:
        #273342;

}


.conversation-item strong {

    color:
        #f4f7fb;

}


.conversation-item > span:not(.unread-badge) {

    color:
        #8391a0;

}


.unread-badge {

    background:
        #f4f7fb;

    color:
        #080c12 !important;

}


.sidebar-footer {

    border-top:
        1px solid #273342;

    color:
        #8e9baa;

}


.sidebar-footer-lock {

    border:
        1px solid #273342;

}



/* ============================================================
   MAIN CHAT
   ============================================================ */


.chat-area {

    background:
        #080c12;

}


.chat-panel {

    background:
        #080c12;

}



/* ============================================================
   CHAT HEADER
   ============================================================ */


.chat-header {

    border-bottom:
        1px solid #273342;

    background:
        rgba(16, 23, 32, 0.97);

}


.chat-avatar {

    border:
        1px solid #273342;

    background:
        #0b1118;

    color:
        #dce6f1;

}


.chat-header h1 {

    color:
        #f4f7fb;

    font-size:
        15px;

}


.security-label {

    color:
        #8e9baa;

}


.encryption-badge {

    border:
        1px solid #273342;

    background:
        #0b1118;

    color:
        #9ef0bd;

}


.header-button {

    border:
        1px solid #273342;

    background:
        #0b1118;

    color:
        #dce6f1;

}


.header-button:hover {

    background:
        #16212c;

}



/* ============================================================
   CHAT BACKGROUND
   ============================================================ */


.message-stage {

    background:
        #080c12;

}


.message-stage-pattern {

    opacity:
        .12;

    background-image:
        radial-gradient(
            rgba(131,145,160,.16) .7px,
            transparent .7px
        );

}


.message-day span {

    border:
        1px solid #273342;

    background:
        #101720;

    color:
        #8391a0;

}



/* ============================================================
   MESSAGE BUBBLES
   ============================================================ */


.message-bubble {

    border:
        1px solid #273342;

    background:
        #101720;

    box-shadow:
        none;

}


.message-row.outgoing .message-bubble {

    border:
        1px solid #334253;

    background:
        #16212c;

}


.message-body {

    color:
        #f4f7fb;

}


.message-meta {

    color:
        #8391a0;

}


.history-placeholder {

    border:
        1px solid #273342;

    background:
        #101720;

    color:
        #8e9baa;

}



/* ============================================================
   COMPOSER
   ============================================================ */


.composer-area {

    border-top:
        1px solid #273342;

    background:
        #101720;

}


.composer-security {

    color:
        #8391a0;

}


.composer-box {

    border:
        1px solid #334253;

    background:
        #0b1118;

    box-shadow:
        none;

}


.composer-box:focus-within {

    border-color:
        #52657a;

    box-shadow:
        none;

}


.composer textarea {

    color:
        #ffffff;

}


.composer textarea::placeholder {

    color:
        #8391a0;

}


.send-button {

    border-radius:
        12px;

    background:
        #f4f7fb;

    color:
        #080c12;

    font-size:
        13px;

    font-weight:
        700;

}


.send-button:hover {

    background:
        #ffffff;

}


.send-arrow {

    background:
        #101720;

    color:
        #ffffff;

}


.composer-hint {

    color:
        #687787;

}



/* ============================================================
   EMPTY SCREEN
   ============================================================ */


.empty-state {

    background:
        #080c12;

}


.empty-lock {

    border:
        1px solid #334253;

    border-radius:
        22px;

    background:
        #101720;

    color:
        #f4f7fb;

    box-shadow:
        0 24px 80px rgba(0,0,0,.4);

}


.empty-ring {

    border-color:
        #273342;

}


.eyebrow {

    color:
        #8391a0;

}


.empty-copy h1 {

    color:
        #f4f7fb;

}


.empty-copy p {

    color:
        #9eabba;

}


.empty-new-chat {

    border:
        1px solid #273342;

    background:
        #101720;

    color:
        #f4f7fb;

}


.empty-new-chat:hover {

    border-color:
        #334253;

    background:
        #16212c;

}



/* ============================================================
   SCROLLBARS
   ============================================================ */


.conversation-list,
.message-list {

    scrollbar-color:
        #334253 transparent;

}




/*
 * ============================================================
 * PRIVYN_PHASE2B_NEW_CHAT_UI
 * ============================================================
 */

.privyn-new-chat-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(8px);
}

.privyn-new-chat-dialog {
    width: min(520px, 100%);
    max-height: min(720px, 86vh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: var(--surface, #111);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.privyn-new-chat-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.privyn-new-chat-header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.privyn-new-chat-header p {
    margin: 5px 0 0;
    opacity: 0.68;
}

.privyn-new-chat-close {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.privyn-new-chat-search {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    font: inherit;
}

.privyn-new-chat-status {
    margin: 0;
    font-size: 0.86rem;
    opacity: 0.7;
}

.privyn-new-chat-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.privyn-new-chat-contact {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
}

.privyn-new-chat-contact:hover:not(:disabled) {
    transform: translateY(-1px);
}

.privyn-new-chat-contact:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.privyn-new-chat-contact-identity {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.privyn-new-chat-contact-identity strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

.privyn-new-chat-contact-identity small {
    opacity: 0.62;
}

.privyn-new-chat-ready,
.privyn-new-chat-unavailable {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.privyn-new-chat-empty {
    margin: 0;
    padding: 20px;
    text-align: center;
    opacity: 0.65;
}

@media (max-width: 640px) {
    .privyn-new-chat-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .privyn-new-chat-dialog {
        width: 100%;
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
    }
}