/* ============================================================
   PRIVYN UNIFIED PRODUCT THEME
   Letters design language
   ============================================================ */


:root {

    color-scheme:
        dark;

    --privyn-bg:
        #080c12;

    --privyn-panel:
        #101720;

    --privyn-inner:
        #0b1118;

    --privyn-hover:
        #131c26;

    --privyn-border:
        #273342;

    --privyn-border-strong:
        #334253;

    --privyn-text:
        #f4f7fb;

    --privyn-soft:
        #dce6f1;

    --privyn-muted:
        #8e9baa;

    --privyn-muted-2:
        #8391a0;

    --privyn-success:
        #9ef0bd;

    --privyn-success-border:
        #2c8f57;

    --privyn-warning:
        #f0c987;

    --privyn-warning-border:
        #8c6d28;

    --privyn-danger:
        #ffb1b1;

    --privyn-danger-border:
        #623943;

    --privyn-radius:
        14px;

    --privyn-radius-large:
        20px;

}


/* ============================================================
   RESET / BASE
   ============================================================ */


*,
*::before,
*::after {

    box-sizing:
        border-box;

}


html {

    margin:
        0;

    padding:
        0;

    background:
        var(--privyn-bg);

    color:
        var(--privyn-text);

}


body {

    margin:
        0;

    min-width:
        0;

    min-height:
        100dvh;

    background:
        var(--privyn-bg);

    color:
        var(--privyn-text);

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

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


button,
input,
textarea,
select {

    font:
        inherit;

}


button {

    cursor:
        pointer;

}


a {

    color:
        inherit;

}


img,
svg {

    max-width:
        100%;

}


[hidden] {

    display:
        none !important;

}


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


:focus-visible {

    outline:
        2px solid #dce6f1;

    outline-offset:
        3px;

}


::selection {

    background:
        #334253;

    color:
        #ffffff;

}



/* ============================================================
   PRIVYN WORDMARK
   ============================================================ */


.brand,
.portal-brand,
.letters-brand {

    display:
        inline-block;

    color:
        var(--privyn-text);

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .24em;

}


.brand:hover,
.portal-brand:hover {

    color:
        #ffffff;

}


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

    /* Old decorative branding should not compete
       with the unified PRIVYN wordmark. */

}


.brand-mark {

    display:
        none !important;

}


.brand-name {

    font-size:
        inherit !important;

    font-weight:
        inherit !important;

    letter-spacing:
        inherit !important;

}



/* ============================================================
   AUTH PAGES
   /login /register
   ============================================================ */


.page {

    width:
        100%;

    min-height:
        100dvh;

    padding:
        34px 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--privyn-bg);

}


.card {

    width:
        min(100%, 460px);

    padding:
        32px;

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

    border-radius:
        var(--privyn-radius-large);

    background:
        var(--privyn-panel);

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

}


.card > .brand:first-child {

    margin-bottom:
        26px;

}


.card h1 {

    margin:
        0;

    color:
        var(--privyn-text);

    font-size:
        clamp(
            25px,
            4vw,
            31px
        );

    font-weight:
        720;

    line-height:
        1.15;

    letter-spacing:
        -.025em;

}


.card h2 {

    color:
        var(--privyn-text);

}


.intro {

    margin:
        10px 0 25px;

    color:
        var(--privyn-muted);

    font-size:
        13px;

    line-height:
        1.65;

}


label {

    display:
        block;

    margin:
        17px 0 7px;

    color:
        var(--privyn-soft);

    font-size:
        11px;

    font-weight:
        650;

}


input,
textarea,
select {

    width:
        100%;

    min-width:
        0;

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

    border-radius:
        11px;

    outline:
        0;

    background:
        var(--privyn-inner);

    color:
        var(--privyn-text);

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

}


input {

    min-height:
        45px;

    padding:
        0 13px;

}


textarea {

    padding:
        13px;

}


input::placeholder,
textarea::placeholder {

    color:
        #657382;

}


input:focus,
textarea:focus,
select:focus {

    border-color:
        #52657a;

    box-shadow:
        0 0 0 3px
        rgba(82, 101, 122, .12);

}


button {

    min-height:
        42px;

    border:
        0;

    border-radius:
        11px;

    background:
        var(--privyn-text);

    color:
        var(--privyn-bg);

    font-weight:
        730;

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

}


button:hover:not(:disabled) {

    background:
        #ffffff;

}


button:active:not(:disabled) {

    transform:
        translateY(1px);

}


button:disabled {

    opacity:
        .48;

    cursor:
        not-allowed;

}


form > button,
.card > button {

    width:
        100%;

    margin-top:
        16px;

}


.status {

    margin-top:
        13px;

    color:
        var(--privyn-muted);

    font-size:
        11px;

    line-height:
        1.55;

    overflow-wrap:
        anywhere;

}


.auth-switch {

    margin-top:
        25px;

    padding-top:
        21px;

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

    color:
        var(--privyn-muted);

    font-size:
        12px;

    line-height:
        1.6;

    text-align:
        center;

}


.auth-switch a {

    margin-left:
        4px;

    color:
        var(--privyn-soft);

    text-decoration:
        none;

    font-weight:
        700;

}


.auth-switch a:hover {

    color:
        #ffffff;

    text-decoration:
        underline;

    text-underline-offset:
        3px;

}



/* ============================================================
   ACCOUNT + CONTACTS PAGE SHELL
   ============================================================ */


.portal-page {

    min-height:
        100dvh;

    padding:
        34px 20px;

    align-items:
        flex-start;

}


.portal-card,
.account-card,
.contacts-card {

    width:
        min(100%, 1040px);

    max-width:
        1040px;

    padding:
        34px;

}


.portal-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        20px;

}


.portal-eyebrow {

    margin-bottom:
        8px;

    color:
        var(--privyn-muted-2);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .16em;

}


.portal-intro {

    max-width:
        650px;

}


.portal-navigation {

    display:
        grid;

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

    gap:
        8px;

    margin:
        28px 0 30px;

}


.portal-navigation a {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    padding:
        0 12px;

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

    border-radius:
        11px;

    background:
        var(--privyn-inner);

    color:
        var(--privyn-muted);

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        680;

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

}


.portal-navigation a:hover {

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

    background:
        var(--privyn-hover);

    color:
        var(--privyn-text);

}


.portal-navigation a[aria-current="page"] {

    border-color:
        var(--privyn-text);

    background:
        var(--privyn-text);

    color:
        var(--privyn-bg);

}


.portal-nav-icon {

    display:
        none;

}



/* ============================================================
   ACCOUNT + CONTACTS SECTIONS
   ============================================================ */


.portal-section,
.contacts-section {

    margin-top:
        17px;

    padding:
        24px;

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

    border-radius:
        16px;

    background:
        var(--privyn-inner);

}


.portal-section-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        18px;

}


.portal-section-heading h2,
.portal-section h2,
.contacts-section h2 {

    margin:
        0;

    color:
        var(--privyn-text);

    font-size:
        19px;

    line-height:
        1.25;

}


.portal-section-description,
.device-meta {

    margin:
        8px 0 20px;

    color:
        var(--privyn-muted);

    font-size:
        11px;

    line-height:
        1.6;

}


.portal-security-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        7px 10px;

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

    border-radius:
        999px;

    color:
        var(--privyn-success);

    font-size:
        9px;

    font-weight:
        700;

}


.portal-security-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--privyn-success);

}



/* ============================================================
   ACCOUNT DEVICE SECURITY
   ============================================================ */


.device-panel,
.current-device-card {

    padding:
        19px;

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

    border-radius:
        13px;

    background:
        var(--privyn-panel);

}


.current-device-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        17px;

}


.current-device-heading strong {

    display:
        block;

    color:
        var(--privyn-text);

    font-size:
        13px;

}


.current-device-heading span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--privyn-muted);

    font-size:
        10px;

}


.device-icon {

    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

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

    border-radius:
        11px;

    background:
        var(--privyn-inner);

    color:
        var(--privyn-success);

}


.device-security-grid {

    display:
        grid;

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

    gap:
        10px;

}


.device-security-item {

    min-width:
        0;

    padding:
        14px;

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

    border-radius:
        11px;

    background:
        var(--privyn-inner);

}


.device-label {

    margin:
        0 0 7px;

    color:
        var(--privyn-muted-2);

    font-size:
        9px;

    font-weight:
        750;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.safety-code,
.fingerprint {

    max-width:
        100%;

    overflow-wrap:
        anywhere;

    color:
        var(--privyn-soft);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:
        10px;

    line-height:
        1.65;

}


.portal-action-panel {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(180px, 230px);

    align-items:
        center;

    gap:
        18px;

    margin-top:
        14px;

    padding:
        16px;

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

    border-radius:
        12px;

    background:
        var(--privyn-panel);

}


.portal-action-panel p {

    margin:
        5px 0 0;

    color:
        var(--privyn-muted);

    font-size:
        10px;

    line-height:
        1.55;

}


.portal-action-panel button {

    width:
        100%;

    margin:
        0;

}


.registered-devices-heading {

    margin:
        27px 0 12px;

}


.registered-devices-heading h3 {

    margin:
        0;

    color:
        var(--privyn-soft);

    font-size:
        13px;

}


.registered-devices-heading span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--privyn-muted);

    font-size:
        9px;

}


.device-list {

    color:
        var(--privyn-muted);

    font-size:
        11px;

}


.device-list .device-panel,
.device-list > div,
.device-list > p {

    margin-top:
        8px;

}


.portal-info-grid {

    display:
        grid;

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

    gap:
        10px;

    margin-top:
        17px;

}


.portal-info-card {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        11px;

    padding:
        15px;

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

    border-radius:
        12px;

    background:
        var(--privyn-inner);

}


.portal-info-card strong {

    color:
        var(--privyn-soft);

    font-size:
        11px;

}


.portal-info-card p {

    margin:
        4px 0 0;

    color:
        var(--privyn-muted);

    font-size:
        9px;

    line-height:
        1.55;

}


.portal-info-icon {

    color:
        var(--privyn-success);

}


.account-footer {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(120px, 170px);

    align-items:
        center;

    gap:
        18px;

    margin-top:
        27px;

    padding-top:
        22px;

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

}


.account-footer strong {

    color:
        var(--privyn-soft);

    font-size:
        11px;

}


.account-footer p {

    margin:
        4px 0 0;

    color:
        var(--privyn-muted);

    font-size:
        9px;

    line-height:
        1.5;

}


.secondary-account-button {

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

    background:
        var(--privyn-inner);

    color:
        var(--privyn-soft);

}



/* ============================================================
   CONTACTS
   ============================================================ */


.contact-privacy-notice,
.portal-security-footer {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        16px;

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

    border-radius:
        12px;

    background:
        var(--privyn-inner);

}


.contact-privacy-notice strong,
.portal-security-footer strong {

    color:
        var(--privyn-soft);

    font-size:
        11px;

}


.contact-privacy-notice p,
.portal-security-footer p {

    margin:
        4px 0 0;

    color:
        var(--privyn-muted);

    font-size:
        9px;

    line-height:
        1.55;

}


.contact-privacy-icon,
.portal-security-footer > span {

    color:
        var(--privyn-success);

}


.contact-username-box,
.username-box {

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

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

    border-radius:
        11px;

    background:
        var(--privyn-inner);

}


.contact-username-box > span,
.username-box > span {

    padding-left:
        13px;

    color:
        var(--privyn-muted-2);

}


.contact-username-box input,
.username-box input {

    border:
        0;

    border-radius:
        0;

    box-shadow:
        none;

}


.lookup-result-container,
.contacts-list-container {

    color:
        var(--privyn-muted);

}


.contact-panel,
.contact-device {

    margin-top:
        9px;

    padding:
        15px;

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

    border-radius:
        12px;

    background:
        var(--privyn-panel);

}


.contact-panel button,
.contact-device button {

    width:
        auto;

    padding:
        0 13px;

}


.identity-good {

    color:
        var(--privyn-success);

}


.identity-warning,
.identity-change-warning {

    color:
        var(--privyn-warning);

}


.section-text-link {

    color:
        var(--privyn-soft);

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        700;

}



/* ============================================================
   CHATS
   ============================================================ */


.app-shell {

    width:
        100%;

    height:
        100dvh;

    min-height:
        0;

    display:
        grid;

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

    overflow:
        hidden;

    background:
        var(--privyn-bg);

}


.sidebar {

    min-width:
        0;

    height:
        100dvh;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    padding:
        27px 14px 15px;

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

    background:
        var(--privyn-panel);

}


.sidebar .brand {

    margin:
        0 8px 23px;

}


.sidebar-header {

    flex:
        0 0 auto;

}


.new-chat-button,
.new-chat {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        42px;

    margin:
        0 0 16px;

    border:
        0;

    border-radius:
        11px;

    background:
        var(--privyn-text);

    color:
        var(--privyn-bg);

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        750;

}


.privacy-panel {

    margin-bottom:
        12px;

    padding:
        12px;

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

    border-radius:
        12px;

    background:
        var(--privyn-inner);

}


.privacy-panel strong {

    color:
        var(--privyn-soft);

    font-size:
        10px;

}


.privacy-panel p,
.privacy-panel span {

    color:
        var(--privyn-muted);

    font-size:
        8px;

    line-height:
        1.5;

}


#connection-status,
.connection-status {

    color:
        var(--privyn-muted);

}


#sound-button,
.sound-button {

    min-height:
        31px;

    margin-top:
        8px;

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

    background:
        var(--privyn-panel);

    color:
        var(--privyn-soft);

    font-size:
        9px;

}


.conversation-list {

    min-height:
        0;

    flex:
        1 1 auto;

    overflow-y:
        auto;

    padding:
        4px;

}


.conversation-item,
.conversation-row {

    width:
        100%;

    margin-bottom:
        4px;

    padding:
        12px;

    border:
        1px solid transparent;

    border-radius:
        11px;

    background:
        transparent;

    color:
        var(--privyn-text);

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

}


.conversation-item:hover,
.conversation-row:hover {

    background:
        var(--privyn-inner);

}


.conversation-item.active,
.conversation-row.active,
.conversation-item[aria-current="true"] {

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

    background:
        var(--privyn-inner);

}


.conversation-name,
.conversation-username {

    color:
        var(--privyn-soft);

    font-size:
        11px;

    font-weight:
        680;

}


.conversation-preview {

    color:
        var(--privyn-muted);

    font-size:
        9px;

}


.unread-badge,
.unread-dot {

    background:
        var(--privyn-success);

    color:
        var(--privyn-bg);

}


.chat-main {

    min-width:
        0;

    height:
        100dvh;

    overflow:
        hidden;

    background:
        var(--privyn-bg);

}


.empty-state {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    color:
        var(--privyn-muted);

    text-align:
        center;

}


.empty-state h2 {

    margin:
        8px 0;

    color:
        var(--privyn-text);

    font-size:
        25px;

}


.empty-state p {

    max-width:
        440px;

    margin:
        0;

    font-size:
        11px;

    line-height:
        1.6;

}


.chat-panel {

    width:
        100%;

    height:
        100%;

    min-height:
        0;

    display:
        grid;

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

}


.chat-panel[hidden] {

    display:
        none !important;

}


.chat-header {

    min-width:
        0;

    min-height:
        74px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        14px 20px;

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

    background:
        var(--privyn-bg);

}


.chat-peer {

    min-width:
        0;

    color:
        var(--privyn-text);

    font-size:
        13px;

    font-weight:
        700;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


#refresh-button,
.refresh-button {

    width:
        34px;

    min-width:
        34px;

    min-height:
        34px;

    height:
        34px;

    padding:
        0;

    margin:
        0;

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

    border-radius:
        9px;

    background:
        var(--privyn-panel);

    color:
        var(--privyn-soft);

}


.message-list {

    min-height:
        0;

    overflow-y:
        auto;

    overscroll-behavior:
        contain;

    padding:
        22px clamp(14px, 3vw, 34px);

    scroll-behavior:
        smooth;

}


.message-row {

    display:
        flex;

    width:
        100%;

    margin:
        6px 0;

}


.message-row.outgoing,
.message-row.sent,
.message-row.mine {

    justify-content:
        flex-end;

}


.message-bubble,
.message {

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

    padding:
        10px 13px;

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

    border-radius:
        14px;

    background:
        var(--privyn-panel);

    color:
        var(--privyn-text);

    font-size:
        12px;

    line-height:
        1.55;

    overflow-wrap:
        anywhere;

}


.outgoing .message-bubble,
.sent .message-bubble,
.mine .message-bubble {

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

    background:
        #16202b;

}


.message-meta,
.message-time,
.message-status {

    color:
        var(--privyn-muted-2);

    font-size:
        8px;

}


.composer {

    display:
        grid;

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

    align-items:
        end;

    gap:
        9px;

    padding:
        12px 18px 15px;

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

    background:
        var(--privyn-bg);

}


#message-input,
.message-input {

    width:
        100%;

    min-height:
        42px;

    max-height:
        150px;

    padding:
        11px 13px;

    resize:
        none;

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

    border-radius:
        12px;

    background:
        var(--privyn-inner);

    color:
        var(--privyn-text);

    line-height:
        1.45;

}


#send-button,
.send-button {

    width:
        auto;

    min-width:
        72px;

    min-height:
        42px;

    margin:
        0;

    padding:
        0 15px;

}



/* ============================================================
   CHAT PRODUCT NAVIGATION
   ============================================================ */


.privyn-chat-nav {

    flex:
        0 0 auto;

    display:
        grid;

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

    gap:
        5px;

    margin-top:
        10px;

    padding-top:
        10px;

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

}


.privyn-chat-nav a {

    min-width:
        0;

    padding:
        7px 4px;

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

    border-radius:
        8px;

    background:
        var(--privyn-inner);

    color:
        var(--privyn-muted);

    text-align:
        center;

    text-decoration:
        none;

    font-size:
        8px;

    font-weight:
        680;

}


.privyn-chat-nav a:hover {

    color:
        var(--privyn-text);

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

}


.privyn-chat-nav a[aria-current="page"] {

    color:
        var(--privyn-bg);

    border-color:
        var(--privyn-text);

    background:
        var(--privyn-text);

}



/* ============================================================
   MOBILE CHAT BACK BUTTON
   ============================================================ */


.privyn-mobile-back {

    display:
        none;

    width:
        35px;

    min-width:
        35px;

    min-height:
        35px;

    height:
        35px;

    padding:
        0;

    margin:
        0 4px 0 0;

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

    border-radius:
        9px;

    background:
        var(--privyn-panel);

    color:
        var(--privyn-soft);

    font-size:
        17px;

}



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


* {

    scrollbar-width:
        thin;

    scrollbar-color:
        #334253 transparent;

}


*::-webkit-scrollbar {

    width:
        8px;

    height:
        8px;

}


*::-webkit-scrollbar-thumb {

    border-radius:
        999px;

    background:
        #334253;

}


*::-webkit-scrollbar-track {

    background:
        transparent;

}



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


@media (
    max-width: 900px
) {

    .portal-card,
    .account-card,
    .contacts-card {

        padding:
            27px;

    }


    .portal-navigation {

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

    }


    .app-shell {

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

    }

}



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


@media (
    max-width: 700px
) {

    body {

        min-height:
            100dvh;

    }


    /* AUTH */

    .page {

        min-height:
            100dvh;

        padding:
            12px;

        align-items:
            center;

    }


    .card {

        width:
            100%;

        padding:
            24px 19px;

        border-radius:
            17px;

    }


    .card h1 {

        font-size:
            25px;

    }


    /* ACCOUNT + CONTACTS */

    .portal-page {

        min-height:
            100dvh;

        padding:
            12px;

        align-items:
            flex-start;

    }


    .portal-card,
    .account-card,
    .contacts-card {

        width:
            100%;

        max-width:
            none;

        padding:
            23px 17px;

        border-radius:
            17px;

    }


    .portal-header {

        display:
            block;

    }


    .portal-navigation {

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

        gap:
            6px;

        margin:
            22px 0;

    }


    .portal-navigation a {

        min-height:
            40px;

        font-size:
            10px;

    }


    .portal-section,
    .contacts-section {

        padding:
            17px 14px;

        border-radius:
            13px;

    }


    .portal-section-heading {

        gap:
            10px;

    }


    .portal-section-heading h2 {

        font-size:
            17px;

    }


    .portal-security-badge {

        padding:
            5px 7px;

        font-size:
            8px;

    }


    .device-security-grid,
    .portal-info-grid {

        grid-template-columns:
            1fr;

    }


    .portal-action-panel {

        grid-template-columns:
            1fr;

    }


    .account-footer {

        grid-template-columns:
            1fr;

    }


    .account-footer button {

        width:
            100%;

    }


    .contact-panel,
    .contact-device {

        padding:
            13px;

    }


    /* CHATS — PHONE APP MODE */

    .app-shell {

        display:
            block;

        width:
            100%;

        height:
            100dvh;

        overflow:
            hidden;

    }


    .sidebar {

        width:
            100%;

        height:
            100dvh;

        padding:
            22px 12px 12px;

        border-right:
            0;

        overflow-y:
            auto;

    }


    .chat-main {

        display:
            none;

        width:
            100%;

        height:
            100dvh;

    }


    body.mobile-chat-open
    .sidebar {

        display:
            none;

    }


    body.mobile-chat-open
    .chat-main {

        display:
            block;

    }


    .privyn-mobile-back {

        display:
            grid;

        place-items:
            center;

        flex:
            0 0 35px;

    }


    .chat-header {

        min-height:
            64px;

        padding:
            10px 11px;

    }


    .message-list {

        padding:
            16px 11px;

    }


    .message-bubble,
    .message {

        max-width:
            86%;

        font-size:
            12px;

    }


    .composer {

        gap:
            7px;

        padding:
            9px
            max(
                9px,
                env(safe-area-inset-right)
            )
            calc(
                9px
                +
                env(safe-area-inset-bottom)
            )
            max(
                9px,
                env(safe-area-inset-left)
            );

    }


    #message-input,
    .message-input {

        min-height:
            42px;

        font-size:
            16px;

        /*
         * 16px prevents iOS Safari from zooming
         * when the input receives focus.
         */

    }


    #send-button,
    .send-button {

        min-width:
            62px;

        padding:
            0 11px;

    }


    .privyn-chat-nav {

        margin-bottom:
            env(safe-area-inset-bottom);

    }

}



/* ============================================================
   VERY SMALL PHONES
   ============================================================ */


@media (
    max-width: 390px
) {

    .card,
    .portal-card,
    .account-card,
    .contacts-card {

        padding-left:
            15px;

        padding-right:
            15px;

    }


    .portal-navigation {

        grid-template-columns:
            1fr 1fr;

    }


    .message-bubble,
    .message {

        max-width:
            90%;

    }

}



/* ============================================================
   REDUCED MOTION
   ============================================================ */


@media (
    prefers-reduced-motion: reduce
) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

    }

}


/* ============================================================
   PRIVYN CHAT COMPOSER FIX V1
   ============================================================ */


/*
 * Force the message box and Send button into separate
 * grid columns.
 *
 * This overrides any older Chats CSS that positioned
 * the button inside / over the textarea.
 */

.chat-panel .composer,
.chat-main .composer,
form.composer {

    position:
        relative !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        max-content !important;

    grid-template-rows:
        auto !important;

    align-items:
        end !important;

    gap:
        10px !important;

    width:
        100% !important;

    min-width:
        0 !important;

    padding:
        12px 18px 15px !important;

    overflow:
        visible !important;

}


.chat-panel .composer #message-input,
.chat-main .composer #message-input,
.composer .message-input {

    position:
        static !important;

    inset:
        auto !important;

    grid-column:
        1 !important;

    grid-row:
        1 !important;

    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    min-height:
        44px !important;

    margin:
        0 !important;

    padding:
        11px 13px !important;

    padding-right:
        13px !important;

    transform:
        none !important;

}


.chat-panel .composer #send-button,
.chat-main .composer #send-button,
.composer .send-button {

    position:
        static !important;

    inset:
        auto !important;

    grid-column:
        2 !important;

    grid-row:
        1 !important;

    align-self:
        end !important;

    width:
        auto !important;

    min-width:
        76px !important;

    max-width:
        none !important;

    min-height:
        44px !important;

    height:
        44px !important;

    margin:
        0 !important;

    padding:
        0 16px !important;

    transform:
        none !important;

}


/* Remove old avatar/@ box from chat header. */

.chat-header .privyn-chat-avatar-hidden {

    display:
        none !important;

}


.chat-header .chat-peer {

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        0 !important;

    min-width:
        0 !important;

}


.chat-header .chat-peer-copy,
.chat-header .peer-copy {

    min-width:
        0 !important;

    margin:
        0 !important;

}


.chat-header .chat-peer strong,
.chat-header .chat-peer-name {

    display:
        block;

    color:
        var(--privyn-text);

    font-size:
        13px;

    font-weight:
        720;

    line-height:
        1.35;

}


.chat-header .chat-peer span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--privyn-muted);

    font-size:
        9px;

    font-weight:
        500;

    line-height:
        1.3;

}


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

@media (
    max-width: 700px
) {

    .chat-panel .composer,
    .chat-main .composer,
    form.composer {

        grid-template-columns:
            minmax(0, 1fr)
            66px !important;

        gap:
            7px !important;

        padding:
            9px
            max(
                9px,
                env(safe-area-inset-right)
            )
            calc(
                9px
                +
                env(safe-area-inset-bottom)
            )
            max(
                9px,
                env(safe-area-inset-left)
            )
            !important;

    }


    .chat-panel .composer #message-input,
    .chat-main .composer #message-input {

        width:
            100% !important;

        min-width:
            0 !important;

        font-size:
            16px !important;

    }


    .chat-panel .composer #send-button,
    .chat-main .composer #send-button {

        width:
            66px !important;

        min-width:
            66px !important;

        padding:
            0 8px !important;

        font-size:
            11px !important;

    }

}



/* ============================================================
   PRIVYN CHATS EXACT FIX V2
   ============================================================ */


/* ------------------------------------------------------------
   CHAT HEADER

   Actual DOM:
   .chat-identity
       .chat-avatar
       .chat-identity-copy
   ------------------------------------------------------------ */


/*
 * Remove the square @ avatar completely.
 */

.chat-header .chat-avatar {
    display: none !important;
}


/*
 * Remove the space previously reserved for the avatar.
 */

.chat-header .chat-identity {
    gap: 0 !important;
}


/*
 * Leave only:
 *
 * @username
 * End-to-end encrypted · MLS
 */

.chat-header .chat-identity-copy {
    min-width: 0 !important;
}


.chat-header #chat-peer {
    margin: 0 !important;

    color: #f4f7fb !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;
}


/*
 * Remove decorative green dot.
 */

.chat-header .security-label .security-dot {
    display: none !important;
}


.chat-header .security-label {
    display: flex !important;

    align-items: center !important;

    gap: 4px !important;

    margin-top: 4px !important;

    color: #8e9baa !important;

    font-size: 9px !important;

    line-height: 1.3 !important;
}


/* ------------------------------------------------------------
   COMPOSER

   IMPORTANT:
   The actual textarea and Send button live inside
   .composer-box, NOT directly inside .composer.
   ------------------------------------------------------------ */


/*
 * Undo the incorrect previous outer-grid override.
 */

.chat-panel form#composer.composer {
    position: static !important;

    display: block !important;

    width: min(100%, 940px) !important;

    margin: 0 auto !important;

    padding: 0 !important;

    overflow: visible !important;
}


/*
 * THIS is the actual two-column container.
 */

.chat-panel #composer .composer-box {
    position: relative !important;

    display: grid !important;

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

    grid-template-rows:
        auto !important;

    align-items: end !important;

    column-gap: 8px !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 54px !important;

    padding: 6px !important;

    overflow: hidden !important;

    border: 1px solid #334253 !important;

    border-radius: 16px !important;

    background: #0b1118 !important;
}


/*
 * Message field gets its own column.
 */

.chat-panel #composer .composer-box #message-input {
    position: static !important;

    grid-column: 1 !important;

    grid-row: 1 !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    min-height: 40px !important;

    max-height: 160px !important;

    margin: 0 !important;

    padding: 10px 11px !important;

    border: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    color: #ffffff !important;

    resize: none !important;

    transform: none !important;
}


/*
 * Send button gets a completely separate column.
 */

.chat-panel #composer .composer-box #send-button {
    position: static !important;

    grid-column: 2 !important;

    grid-row: 1 !important;

    align-self: end !important;

    width: auto !important;

    min-width: 88px !important;

    max-width: none !important;

    height: 40px !important;

    min-height: 40px !important;

    margin: 0 !important;

    padding: 0 13px !important;

    transform: none !important;

    flex-shrink: 0 !important;
}


/*
 * Keep the hint below the entire composer.
 */

.chat-panel #composer .composer-hint {
    width: 100% !important;
}


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

@media (max-width: 700px) {

    .chat-header .chat-identity {
        min-width: 0 !important;
    }


    .chat-header #chat-peer {
        font-size: 13px !important;
    }


    .chat-panel #composer .composer-box {
        grid-template-columns:
            minmax(0, 1fr)
            44px !important;

        column-gap: 6px !important;

        padding: 5px !important;

        border-radius: 14px !important;
    }


    .chat-panel #composer .composer-box #message-input {
        min-width: 0 !important;

        width: 100% !important;

        font-size: 16px !important;

        padding: 9px 8px !important;
    }


    .chat-panel #composer .composer-box #send-button {
        width: 44px !important;

        min-width: 44px !important;

        max-width: 44px !important;

        height: 40px !important;

        padding: 0 !important;
    }


    /*
     * Mobile already hides the word "Send".
     * Leave only the arrow.
     */

    .chat-panel #composer .send-button > span:first-child {
        display: none !important;
    }

}



/* ============================================================
   PRIVYN CHAT SIDEBAR AVATAR REMOVAL — FINAL
   ============================================================ */

/*
 * Remove any pseudo-element used as the boxed @ avatar.
 */

#conversation-list .conversation-item::before,
#conversation-list .conversation-item::after {
    display: none !important;
    content: none !important;
}


/*
 * Remove actual avatar/icon wrappers if chats.js creates one.
 */

#conversation-list .conversation-item .conversation-avatar,
#conversation-list .conversation-item .conversation-icon,
#conversation-list .conversation-item .conversation-user-icon,
#conversation-list .conversation-item .avatar,
#conversation-list .conversation-item [class*="avatar"],
#conversation-list .conversation-item [class*="user-icon"] {
    display: none !important;
}


/*
 * Remove the old avatar column / indentation.
 */

#conversation-list .conversation-item {
    position: relative !important;

    display: block !important;

    grid-template-columns: none !important;

    padding-left: 18px !important;

    padding-right: 18px !important;
}


/*
 * Make the text content use the full card width.
 */

#conversation-list .conversation-item > div {
    width: 100% !important;

    min-width: 0 !important;

    margin-left: 0 !important;

    padding-left: 0 !important;
}


#conversation-list .conversation-item strong {
    display: block !important;

    margin-left: 0 !important;

    padding-left: 0 !important;

    color: #f4f7fb !important;
}