/* ==========================================================
   NEXORA CONNECT
   Shared stylesheet for:
   - connect/index.html
   - connect/dating-register.html
   - connect/discover.html
   - connect/interests.html
   - connect/matches.html
   - connect/chat.html
   - connect/background-check.html
   - connect/background-check-consent.html
========================================================== */

*{
    box-sizing:border-box;
}

:root{
    --nx-bg:#08070c;
    --nx-bg-soft:#100d15;
    --nx-panel:#141119;
    --nx-panel-2:#1a1620;
    --nx-panel-3:#211b28;

    --nx-white:#ffffff;
    --nx-text:#f7f4f8;
    --nx-muted:#aaa2b1;
    --nx-muted-2:#7f7786;

    --nx-line:rgba(255,255,255,.10);
    --nx-line-strong:rgba(255,255,255,.18);

    --nx-gold:#d4af37;
    --nx-champagne:#eadfcf;
    --nx-blue:#4f8cff;
    --nx-green:#70dfa2;
    --nx-red:#ff7e90;

    --nx-radius-sm:10px;
    --nx-radius-md:16px;
    --nx-radius-lg:24px;

    --nx-shadow:0 20px 60px rgba(0,0,0,.30);
}

html{
    scroll-behavior:smooth;
}

html,
body{
    width:100%;
    min-height:100%;
    margin:0;
}

body{
    font-family:"Outfit",sans-serif;
    color:var(--nx-text);

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(98,70,255,.11),
            transparent 26%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(212,175,55,.07),
            transparent 30%
        ),
        linear-gradient(
            160deg,
            #08070c 0%,
            #0e0a12 48%,
            #151018 100%
        );

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;

    overflow-x:hidden;
}

button,
input,
textarea,
select{
    font:inherit;
}

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

a{
    color:inherit;
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
}


/* ==========================================================
   SHARED TOP BAR
========================================================== */

.connect-topbar{
    position:sticky;
    top:0;
    z-index:1000;

    width:100%;
    min-height:72px;

    display:grid;
    grid-template-columns:48px minmax(0,1fr) 48px;
    align-items:center;
    gap:10px;

    padding:10px 14px;

    background:rgba(8,7,12,.92);

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.topbar-btn{
    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    border:1px solid var(--nx-line);
    border-radius:0;

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

    color:var(--nx-white);

    font-size:18px;
    font-weight:700;

    cursor:pointer;
}

.topbar-btn:hover{
    background:rgba(255,255,255,.07);
}

.topbar-spacer{
    display:block;
    width:44px;
    height:44px;
}

.connect-brand{
    min-width:0;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    text-align:center;
}

.brand-name{
    font-size:15px;
    font-weight:900;
    letter-spacing:3px;
}

.brand-section{
    color:var(--nx-gold);

    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.back-arrow,
.connection-symbol{
    line-height:1;
}


/* ==========================================================
   COMMON LABELS / BUTTONS / HELPERS
========================================================== */

.section-label{
    display:inline-block;

    color:var(--nx-gold);

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;
    text-transform:uppercase;
}

.connect-primary-btn,
.connect-secondary-btn,
.background-check-btn,
.connect-send-btn{
    min-height:50px;

    border-radius:0;

    font-weight:800;

    cursor:pointer;
}

.connect-primary-btn{
    width:100%;

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

    background:var(--nx-white);

    color:#101014;
}

.connect-primary-btn:hover{
    background:#f0ece7;
}

.connect-primary-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
}

.connect-secondary-btn{
    width:100%;

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

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

    color:var(--nx-white);
}

.connect-secondary-btn:hover{
    background:rgba(255,255,255,.07);
}

.connect-loading{
    padding:34px 18px;

    text-align:center;

    color:var(--nx-muted);

    font-size:11px;
}

.connect-toast{
    position:fixed;

    left:50%;
    bottom:88px;

    z-index:99999;

    width:min(calc(100% - 28px),430px);

    padding:12px 14px;

    transform:translate(-50%,18px);

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

    background:#1a171e;

    color:var(--nx-white);

    opacity:0;

    pointer-events:none;

    transition:.22s ease;

    font-size:11px;
}

.connect-toast.show{
    opacity:1;

    transform:translate(-50%,0);
}


/* ==========================================================
   CONNECT HOME
========================================================== */

.connect-home{
    width:min(calc(100% - 28px),1180px);

    margin:20px auto 50px;
}

.connect-intro{
    padding:32px 24px;

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

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(212,175,55,.10),
            transparent 32%
        ),
        rgba(255,255,255,.03);
}

.connect-intro h1{
    max-width:780px;

    margin:10px 0 12px;

    font-size:clamp(34px,7vw,76px);

    font-weight:900;

    line-height:.98;

    letter-spacing:-1.5px;
}

.connect-intro p{
    max-width:650px;

    margin:0;

    color:var(--nx-muted);

    font-size:13px;

    line-height:1.7;
}

.connection-purpose{
    margin-top:18px;
}

.purpose-heading{
    margin-bottom:12px;
}

.purpose-heading h2{
    margin:7px 0 0;

    font-size:22px;

    font-weight:800;
}

.connect-mode-grid{
    display:grid;

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

    gap:12px;
}

.connect-mode-card{
    position:relative;

    min-height:190px;

    display:grid;

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

    align-items:end;

    gap:12px;

    padding:20px;

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

    border-radius:0;

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

    color:var(--nx-white);

    text-align:left;

    cursor:pointer;

    transition:.2s ease;
}

.connect-mode-card::before{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            135deg,
            transparent,
            rgba(255,255,255,.025)
        );
}

.connect-mode-card:hover{
    transform:translateY(-3px);

    border-color:rgba(234,223,207,.30);

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

.mode-mark{
    align-self:start;

    color:var(--nx-gold);

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;
}

.mode-content{
    min-width:0;
}

.mode-title{
    display:block;

    margin-bottom:7px;

    font-size:19px;

    font-weight:800;
}

.mode-description{
    display:block;

    color:var(--nx-muted);

    font-size:10px;

    line-height:1.55;
}

.mode-arrow{
    align-self:center;

    font-size:18px;

    color:var(--nx-champagne);
}

.connect-principle{
    margin-top:22px;

    display:flex;

    align-items:center;

    gap:14px;
}

.connect-principle p{
    margin:0;

    flex:0 1 auto;

    color:var(--nx-muted);

    font-size:9px;

    letter-spacing:1px;

    text-transform:uppercase;
}

.principle-line{
    height:1px;

    flex:1;

    background:var(--nx-line);
}


/* ==========================================================
   REGISTRATION / FORMS
========================================================== */

.connect-form-shell{
    width:min(calc(100% - 28px),980px);

    margin:20px auto 50px;
}

.registration-intro{
    padding:26px 0 20px;
}

.registration-intro h1{
    margin:8px 0 8px;

    font-size:clamp(31px,6vw,54px);

    font-weight:900;

    line-height:1.05;

    letter-spacing:-.8px;
}

.registration-intro p{
    max-width:650px;

    margin:0;

    color:var(--nx-muted);

    font-size:12px;

    line-height:1.7;
}

.adult-notice{
    margin-top:14px;

    display:inline-block;

    padding:9px 11px;

    border:1px solid rgba(212,175,55,.20);

    background:rgba(212,175,55,.05);

    color:var(--nx-champagne);

    font-size:9px;

    font-weight:700;
}

.connect-form{
    display:grid;

    gap:14px;
}

.form-section{
    padding:20px;

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

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

.form-section-heading{
    display:grid;

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

    gap:12px;

    align-items:start;

    margin-bottom:18px;
}

.form-step{
    display:grid;

    place-items:center;

    width:42px;
    height:42px;

    border:1px solid rgba(212,175,55,.22);

    color:var(--nx-gold);

    font-size:10px;

    font-weight:800;
}

.form-section-heading h2{
    margin:0 0 4px;

    font-size:18px;
}

.form-section-heading p{
    margin:0;

    color:var(--nx-muted);

    font-size:10px;
}

.form-grid{
    display:grid;

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

    gap:14px;
}

.form-field{
    min-width:0;

    display:flex;

    flex-direction:column;

    gap:7px;
}

.form-field-full{
    grid-column:1/-1;
}

.form-field label{
    color:#ddd7e1;

    font-size:10px;

    font-weight:700;
}

.form-field input,
.form-field textarea,
.form-field select{
    width:100%;

    min-height:48px;

    padding:12px 13px;

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

    border-radius:0;

    outline:none;

    background:#17141b;

    color:var(--nx-white);
}

.form-field textarea{
    min-height:120px;

    resize:vertical;

    line-height:1.5;
}

.form-field input::placeholder,
.form-field textarea::placeholder{
    color:#706a76;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
    border-color:rgba(234,223,207,.40);
}

.field-helper{
    color:var(--nx-muted-2);

    font-size:8px;
}

.interest-selector{
    display:flex;

    flex-wrap:wrap;

    gap:8px;
}

.interest-choice{
    position:relative;
}

.interest-choice input{
    position:absolute;

    opacity:0;

    pointer-events:none;
}

.interest-choice span{
    display:block;

    padding:9px 11px;

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

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

    color:#c7c0cc;

    font-size:10px;

    cursor:pointer;
}

.interest-choice input:checked + span{
    border-color:var(--nx-champagne);

    background:var(--nx-champagne);

    color:#111;
}

.photo-upload-area{
    min-height:150px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:7px;

    padding:18px;

    border:1px dashed rgba(234,223,207,.32);

    text-align:center;

    cursor:pointer;
}

.photo-upload-symbol{
    width:40px;
    height:40px;

    display:grid;

    place-items:center;

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

    font-size:20px;

    color:var(--nx-champagne);
}

.photo-upload-area strong{
    font-size:12px;
}

.photo-upload-area span:last-child{
    color:var(--nx-muted);

    font-size:9px;
}

.photo-preview-grid{
    margin-top:12px;

    display:grid;

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

    gap:8px;
}

.photo-preview{
    position:relative;

    aspect-ratio:3/4;

    overflow:hidden;

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

    background:#151219;
}

.photo-preview img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.photo-preview button{
    position:absolute;

    right:5px;
    top:5px;

    width:28px;
    height:28px;

    border:0;

    background:rgba(0,0,0,.75);

    color:#fff;
}

.declaration-row{
    position:relative;

    display:grid;

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

    gap:10px;

    align-items:start;

    cursor:pointer;
}

.declaration-row input{
    margin-top:2px;
}

.declaration-row span{
    color:#c2bbc6;

    font-size:10px;

    line-height:1.6;
}


/* ==========================================================
   TABS
========================================================== */

.connect-tabs{
    position:sticky;

    top:72px;

    z-index:900;

    display:grid;

    grid-template-columns:repeat(3,1fr);

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

    background:rgba(8,7,12,.94);

    backdrop-filter:blur(16px);
}

.connect-tabs a{
    min-height:46px;

    display:grid;

    place-items:center;

    color:#918a97;

    font-size:10px;

    font-weight:800;

    letter-spacing:.6px;
}

.connect-tabs a.active{
    color:var(--nx-white);

    border-bottom:2px solid var(--nx-champagne);
}


/* ==========================================================
   DISCOVER
========================================================== */

.discover-shell{
    width:min(calc(100% - 28px),1180px);

    margin:18px auto 50px;

    display:grid;

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

    gap:18px;

    align-items:start;
}

.discover-main{
    min-width:0;
}

.profile-area{
    min-width:0;
}

.profile-card{
    overflow:hidden;

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

    background:rgba(255,255,255,.03);
}

.profile-media{
    position:relative;

    overflow:hidden;

    background:#111;
}

.photo-track{
    display:flex;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;
}

.photo-track::-webkit-scrollbar{
    display:none;
}

.photo-slide{
    width:100%;

    flex:0 0 100%;

    aspect-ratio:4/5;

    object-fit:cover;

    scroll-snap-align:start;
}

.photo-dots{
    position:absolute;

    top:10px;
    left:10px;
    right:10px;

    display:flex;

    gap:4px;
}

.photo-dots span{
    height:3px;

    flex:1;

    background:rgba(255,255,255,.35);
}

.photo-dots span.active{
    background:#fff;
}

.profile-copy{
    padding:18px;
}

.profile-copy h2{
    margin:0;

    font-size:28px;

    font-weight:900;

    letter-spacing:-.4px;
}

.profile-location{
    margin-top:5px;

    color:#aaa3af;

    font-size:10px;
}

.intent-pill{
    display:inline-block;

    margin-top:12px;

    padding:7px 9px;

    border:1px solid rgba(234,223,207,.18);

    background:rgba(234,223,207,.06);

    color:var(--nx-champagne);

    font-size:9px;

    font-weight:700;
}

.interest-tags{
    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin:12px 0;
}

.interest-tags span{
    padding:7px 9px;

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

    color:#c7c1cb;

    font-size:9px;
}

.profile-bio{
    margin:12px 0 0;

    color:#cbc5cf;

    font-size:12px;

    line-height:1.65;
}

.profile-actions{
    margin-top:16px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;
}

.profile-actions button{
    min-height:52px;

    border-radius:0;

    font-weight:800;
}

.profile-actions .secondary-btn{
    border:1px solid var(--nx-line);

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

    color:#fff;
}

.profile-actions .primary-btn{
    border:1px solid #fff;

    background:#fff;

    color:#111;
}

.discover-sidebar{
    position:sticky;

    top:138px;

    padding:18px;

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

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

.discover-sidebar h2{
    margin:8px 0 8px;

    font-size:20px;
}

.discover-sidebar > p{
    margin:0;

    color:var(--nx-muted);

    font-size:10px;

    line-height:1.65;
}

.discovery-note{
    margin-top:16px;

    padding:12px;

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

    background:rgba(255,255,255,.02);
}

.discovery-note strong{
    display:block;

    margin-bottom:5px;

    font-size:10px;
}

.discovery-note span{
    display:block;

    color:var(--nx-muted);

    font-size:9px;

    line-height:1.5;
}


/* ==========================================================
   INTERESTS / MATCHES LIST
========================================================== */

.connect-list-shell{
    width:min(calc(100% - 28px),980px);

    margin:18px auto 50px;
}

.list-intro{
    padding:24px 0 18px;
}

.list-intro h1{
    margin:7px 0 6px;

    font-size:clamp(30px,5vw,48px);

    font-weight:900;

    letter-spacing:-.6px;
}

.list-intro p{
    max-width:650px;

    margin:0;

    color:var(--nx-muted);

    font-size:11px;

    line-height:1.65;
}

.people-list{
    display:grid;

    gap:10px;
}

.person-row{
    display:grid;

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

    gap:12px;

    align-items:center;

    padding:12px;

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

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

.person-row img,
.person-avatar{
    width:62px;
    height:62px;

    object-fit:cover;

    background:#18151d;
}

.person-avatar{
    display:grid;

    place-items:center;

    color:var(--nx-champagne);

    font-weight:800;
}

.person-row strong{
    display:block;

    font-size:12px;
}

.person-row small{
    display:block;

    margin-top:4px;

    color:#928b98;

    font-size:8.5px;

    line-height:1.45;
}

.row-actions{
    display:flex;

    gap:7px;
}

.row-actions button,
.row-actions a,
.row-actions span{
    min-height:38px;

    display:inline-grid;

    place-items:center;

    padding:0 11px;

    border-radius:0;

    font-size:9px;

    font-weight:800;

    white-space:nowrap;
}

.row-actions .danger-btn{
    border:1px solid rgba(255,126,144,.34);

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

    color:#ffb6c0;
}

.row-actions .primary-btn{
    border:1px solid #fff;

    background:#fff;

    color:#111;
}


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

.connect-chat-page{
    padding-bottom:0;
}

.connect-chat-shell{
    width:min(100%,860px);

    margin:0 auto;

    min-height:calc(100vh - 72px);

    border-left:1px solid var(--nx-line);

    border-right:1px solid var(--nx-line);
}

.conversation-header{
    position:sticky;

    top:72px;

    z-index:850;

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 14px;

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

    background:rgba(8,7,12,.94);

    backdrop-filter:blur(16px);
}

.conversation-avatar{
    width:44px;
    height:44px;

    flex:0 0 auto;

    overflow:hidden;

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

    background:#18151d;
}

.conversation-avatar img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.avatar-placeholder{
    width:100%;
    height:100%;

    display:grid;

    place-items:center;

    color:var(--nx-champagne);

    font-weight:900;
}

.conversation-person{
    min-width:0;
}

.conversation-person strong{
    display:block;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:12px;
}

.conversation-person span{
    display:block;

    margin-top:3px;

    color:#918a97;

    font-size:8.5px;
}

.connect-safety-notice{
    margin:12px;

    padding:16px;

    border:1px solid rgba(212,175,55,.22);

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.05),
            rgba(255,255,255,.02)
        );
}

.safety-label{
    color:var(--nx-gold);

    font-size:8px;

    font-weight:900;

    letter-spacing:1.8px;
}

.connect-safety-notice h2{
    margin:8px 0 8px;

    font-size:17px;
}

.connect-safety-notice p{
    margin:0 0 8px;

    color:#c2bbc5;

    font-size:9.5px;

    line-height:1.65;
}

.background-check-btn{
    width:100%;

    margin-top:8px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    padding:0 14px;

    border:1px solid rgba(234,223,207,.28);

    background:rgba(234,223,207,.06);

    color:var(--nx-white);
}

.background-check-btn span{
    font-size:9px;

    letter-spacing:.8px;
}

.background-check-btn strong{
    color:var(--nx-champagne);

    font-size:11px;
}

.connect-messages{
    min-height:48vh;

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:12px 12px 90px;
}

.message-row{
    display:flex;
}

.message-row.mine{
    justify-content:flex-end;
}

.message-bubble{
    max-width:80%;

    padding:10px 12px 7px;

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

    background:#17141b;

    color:#fff;
}

.message-row.mine .message-bubble{
    border-color:#f0ece5;

    background:#f0ece5;

    color:#111;
}

.message-text{
    white-space:pre-wrap;

    overflow-wrap:anywhere;

    font-size:11.5px;

    line-height:1.5;
}

.message-time{
    margin-top:5px;

    text-align:right;

    color:#85808a;

    font-size:7.5px;
}

.message-row.mine .message-time{
    color:#6b6670;
}

.connect-composer{
    position:fixed;

    left:50%;
    bottom:0;

    z-index:900;

    width:min(100%,860px);

    transform:translateX(-50%);

    padding:9px 10px calc(9px + env(safe-area-inset-bottom));

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

    background:rgba(8,7,12,.96);

    backdrop-filter:blur(16px);
}

.connect-message-form{
    display:grid;

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

    gap:8px;

    align-items:end;
}

.connect-message-form textarea{
    width:100%;

    min-height:48px;

    max-height:125px;

    resize:none;

    padding:13px;

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

    border-radius:0;

    outline:none;

    background:#17141b;

    color:#fff;
}

.connect-send-btn{
    height:48px;

    border:1px solid #fff;

    background:#fff;

    color:#111;
}


/* ==========================================================
   BACKGROUND CHECK REQUEST
========================================================== */

.background-check-shell{
    width:min(calc(100% - 28px),760px);

    margin:20px auto 50px;
}

.background-check-card,
.background-check-status{
    padding:22px;

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

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

.background-check-card h1{
    margin:8px 0 8px;

    font-size:clamp(29px,5vw,46px);

    font-weight:900;

    letter-spacing:-.6px;
}

.background-check-intro{
    margin:0;

    color:var(--nx-muted);

    font-size:10.5px;

    line-height:1.7;
}

.background-check-price{
    margin:18px 0;

    display:flex;

    align-items:end;

    justify-content:space-between;

    gap:16px;

    padding:15px;

    border:1px solid rgba(212,175,55,.18);

    background:rgba(212,175,55,.045);
}

.background-check-price span{
    color:#bdb6c0;

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:1px;
}

.background-check-price strong{
    color:var(--nx-champagne);

    font-size:28px;

    font-weight:900;
}

.background-check-person{
    padding:14px;

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

    background:#151219;

    color:#fff;
}

.consent-information{
    margin-top:14px;

    padding:14px;

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

    background:rgba(255,255,255,.02);
}

.consent-information h2{
    margin:0 0 7px;

    font-size:14px;
}

.consent-information p{
    margin:0 0 7px;

    color:#aaa3af;

    font-size:9.5px;

    line-height:1.6;
}

.background-check-agreement{
    display:grid;

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

    gap:10px;

    margin:14px 0;

    align-items:start;
}

.background-check-agreement span{
    color:#c2bbc6;

    font-size:9.5px;

    line-height:1.6;
}

.background-check-status{
    margin-top:12px;
}


/* ==========================================================
   JS-GENERATED SAFETY / STATUS ELEMENTS
========================================================== */

.warning-box{
    padding:12px;

    border:1px solid rgba(255,126,144,.22);

    background:rgba(255,126,144,.045);

    color:#ffc1ca;

    font-size:9.5px;

    line-height:1.6;
}

.status-pill{
    display:inline-block;

    padding:7px 9px;

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

    color:#d0c8d3;

    font-size:8px;

    letter-spacing:1px;

    text-transform:uppercase;
}

.nx-card{
    padding:14px;

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

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

.safety-card{
    margin:10px 0;

    padding:13px;

    border:1px solid rgba(212,175,55,.20);

    background:rgba(212,175,55,.04);
}

.safety-card strong{
    display:block;

    margin-bottom:6px;

    color:var(--nx-champagne);

    font-size:9px;

    letter-spacing:1px;
}

.safety-card p{
    margin:0;

    color:#bdb6c0;

    font-size:9px;

    line-height:1.6;
}


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

@media (min-width:768px) and (max-width:1199px){

    .connect-home{
        width:min(calc(100% - 40px),980px);
    }

    .connect-mode-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .connect-mode-card{
        min-height:170px;
    }

    .discover-shell{
        width:min(calc(100% - 40px),980px);

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

    .photo-preview-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

}


/* ==========================================================
   DESKTOP / LARGE SCREENS
========================================================== */

@media (min-width:1200px){

    .connect-topbar{
        padding-left:28px;
        padding-right:28px;
    }

    .connect-home{
        width:min(calc(100% - 56px),1480px);
    }

    .connect-intro{
        padding:44px 38px;
    }

    .connect-intro h1{
        max-width:920px;
    }

    .connect-mode-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:16px;
    }

    .connect-mode-card{
        min-height:210px;
        padding:24px;
    }

    .connect-form-shell{
        width:min(calc(100% - 56px),1180px);
    }

    .form-section{
        padding:24px;
    }

    .discover-shell{
        width:min(calc(100% - 56px),1400px);

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

        gap:22px;
    }

    .profile-card{
        display:grid;

        grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
    }

    .profile-media{
        min-height:680px;
    }

    .photo-track,
    .photo-slide{
        height:100%;
    }

    .photo-slide{
        aspect-ratio:auto;
    }

    .profile-copy{
        padding:28px;

        display:flex;

        flex-direction:column;

        justify-content:center;
    }

    .profile-copy h2{
        font-size:38px;
    }

    .profile-bio{
        font-size:13px;
    }

    .discover-sidebar{
        top:140px;
    }

    .connect-list-shell{
        width:min(calc(100% - 56px),1180px);
    }

    .people-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .person-row{
        min-height:94px;
    }

    .background-check-shell{
        width:min(calc(100% - 56px),900px);
    }

    .background-check-card{
        padding:30px;
    }
}


/* ==========================================================
   VERY LARGE / ULTRAWIDE
========================================================== */

@media (min-width:1700px){

    .connect-home{
        max-width:1600px;
    }

    .connect-mode-card{
        min-height:230px;
    }

    .discover-shell{
        max-width:1540px;

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

    .people-list{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}


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

@media (max-width:767px){

    .connect-topbar{
        min-height:66px;

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

        padding:8px 10px;
    }

    .topbar-btn,
    .topbar-spacer{
        width:40px;
        height:40px;
    }

    .brand-name{
        font-size:13px;
        letter-spacing:2px;
    }

    .brand-section{
        font-size:8px;
        letter-spacing:1.4px;
    }

    .connect-home{
        width:100%;

        margin:0 0 40px;
    }

    .connect-intro{
        border-left:0;
        border-right:0;

        padding:24px 14px;
    }

    .connect-intro h1{
        font-size:42px;
    }

    .connection-purpose{
        padding:0;
    }

    .purpose-heading{
        padding:14px;
    }

    .purpose-heading h2{
        font-size:18px;
    }

    .connect-mode-grid{
        grid-template-columns:1fr 1fr;

        gap:1px;
    }

    .connect-mode-card{
        min-height:165px;

        grid-template-columns:1fr;

        align-items:start;

        padding:15px;

        border-left:0;
        border-right:0;
    }

    .mode-mark{
        align-self:start;
    }

    .mode-arrow{
        display:none;
    }

    .connect-principle{
        padding:0 14px;
    }

    .connect-form-shell{
        width:100%;

        margin:0 0 40px;
    }

    .registration-intro{
        padding:22px 14px 16px;
    }

    .registration-intro h1{
        font-size:35px;
    }

    .connect-form{
        gap:8px;
    }

    .form-section{
        border-left:0;
        border-right:0;

        padding:17px 14px;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .form-field-full{
        grid-column:auto;
    }

    .photo-preview-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .connect-primary-btn{
        width:calc(100% - 28px);

        margin:0 14px;
    }

    .connect-tabs{
        top:66px;
    }

    .discover-shell{
        width:100%;

        display:block;

        margin:0 0 40px;
    }

    .profile-card{
        border-left:0;
        border-right:0;
    }

    .discover-sidebar{
        position:static;

        margin:10px 0 0;

        border-left:0;
        border-right:0;
    }

    .connect-list-shell{
        width:100%;

        margin:0 0 40px;
    }

    .list-intro{
        padding:20px 14px 14px;
    }

    .people-list{
        gap:1px;
    }

    .person-row{
        grid-template-columns:54px minmax(0,1fr);

        padding:11px 14px;

        border-left:0;
        border-right:0;
    }

    .person-row img,
    .person-avatar{
        width:54px;
        height:54px;
    }

    .row-actions{
        grid-column:1/-1;

        width:100%;
    }

    .row-actions button,
    .row-actions a,
    .row-actions span{
        flex:1;
    }

    .connect-chat-shell{
        border:0;
    }

    .conversation-header{
        top:66px;
    }

    .connect-safety-notice{
        margin:8px 0;

        border-left:0;
        border-right:0;
    }

    .connect-messages{
        padding-left:10px;
        padding-right:10px;
    }

    .message-bubble{
        max-width:86%;
    }

    .connect-composer{
        width:100%;
    }

    .background-check-shell{
        width:100%;

        margin:0 0 40px;
    }

    .background-check-card,
    .background-check-status{
        border-left:0;
        border-right:0;
    }
}


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

@media (max-width:390px){

    .connect-intro h1{
        font-size:37px;
    }

    .connect-mode-card{
        min-height:155px;

        padding:13px;
    }

    .mode-title{
        font-size:16px;
    }

    .mode-description{
        font-size:9px;
    }

    .photo-preview-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .connect-message-form{
        grid-template-columns:minmax(0,1fr) 64px;
    }

}
/* ==========================================
   MOBILE READABILITY OVERRIDE
   Larger labels, explanations & inputs
========================================== */

/* Normal explanatory paragraphs */
.hero p,
.card p,
.notice{
    font-size:14px !important;
    line-height:1.7 !important;
}

/* Small section labels */
.label,
.eyebrow{
    font-size:11px !important;
    line-height:1.4 !important;
    letter-spacing:1.2px !important;
}

/* Person/profile secondary information */
.person span,
.person-info span,
#targetMeta,
#meta{
    font-size:13px !important;
    line-height:1.5 !important;
}

/* Status badge */
.status,
#requestStatus{
    font-size:10px !important;
    line-height:1.3 !important;
}

/* Check/review cards */
.item strong,
.check-item strong{
    font-size:14px !important;
    line-height:1.4 !important;
}

.item span,
.check-item span{
    font-size:13px !important;
    line-height:1.65 !important;
}

/* Timeline headings */
.step strong{
    font-size:14px !important;
    line-height:1.4 !important;
}

/* Timeline explanations */
.step span{
    font-size:12.5px !important;
    line-height:1.6 !important;
}

/* Price labels */
.price span,
.price-row span{
    font-size:11px !important;
}

/* Buttons */
button,
.primary,
.secondary{
    font-size:13px !important;
}

/* ==========================================
   INPUTS / SELECTS / TEXTAREAS
========================================== */

input,
select,
textarea{
    font-family:"Outfit",sans-serif !important;

    font-size:16px !important;
    line-height:1.5 !important;

    color:#ffffff !important;

    min-height:52px;

    padding:13px 14px !important;
}

/* Textarea specifically */
textarea{
    min-height:120px;
}

/* Placeholder text */
input::placeholder,
textarea::placeholder{
    font-size:15px !important;
    color:#8f8994 !important;
    opacity:1 !important;
}

/* Input labels */
label{
    font-size:13px !important;
    line-height:1.4 !important;
}

/* Helper / description text below inputs */
.field-helper,
.form-helper,
.input-helper,
small{
    font-size:12px !important;
    line-height:1.6 !important;
}

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

@media(max-width:600px){

    .hero p,
    .card p,
    .notice{
        font-size:14px !important;
    }

    .item span,
    .check-item span{
        font-size:13px !important;
    }

    .step span{
        font-size:13px !important;
    }

    input,
    select,
    textarea{
        font-size:16px !important;
    }

}

/* ==========================================================
   INTERESTS — SPACIOUS CARDS + FULL PROFILE VIEWER
========================================================== */

#interestList{
    gap:18px !important;
    padding:0 14px 28px;
}

.interest-profile-card{
    display:block;
    width:100%;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.11);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.015)
        );
    cursor:pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.interest-profile-card:active{
    transform:scale(.992);
}

.interest-card-main{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    gap:16px;
    align-items:stretch;
    padding:16px;
}

.interest-card-photo{
    width:112px;
    height:138px;
    object-fit:cover;
    background:#17141b;
    border:1px solid rgba(255,255,255,.10);
}

.interest-card-placeholder{
    display:grid;
    place-items:center;
    color:var(--nx-champagne);
    font-size:26px;
    font-weight:900;
}

.interest-card-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.interest-card-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.interest-card-name{
    display:block;
    color:#fff;
    font-size:20px !important;
    line-height:1.2;
    font-weight:900;
}

.interest-card-name span{
    color:#d8d1dc;
    font-weight:500;
}

.interest-card-location{
    margin-top:6px;
    color:#aaa2b1;
    font-size:13px;
    line-height:1.45;
}

.interest-view-profile{
    flex:0 0 auto;
    color:var(--nx-champagne);
    font-size:10px;
    font-weight:900;
    letter-spacing:.8px;
}

.interest-intent-pill{
    align-self:flex-start;
    margin-top:12px;
    padding:7px 9px;
    border:1px solid rgba(234,223,207,.18);
    background:rgba(234,223,207,.055);
    color:var(--nx-champagne);
    font-size:12px;
    font-weight:700;
}

.interest-card-bio{
    margin:12px 0 0;
    color:#d1cad4;
    font-size:14px;
    line-height:1.6;
}

.interest-card-event{
    margin-top:auto;
    padding-top:12px;
    color:#8f8895;
    font-size:12px;
    line-height:1.5;
}

.interest-card-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:0 16px 16px;
}

.interest-card-actions button,
.interest-profile-decision button{
    min-height:52px;
    border-radius:0;
    font-size:13px !important;
    font-weight:900;
    cursor:pointer;
}

.interest-card-actions .danger-btn,
.interest-profile-decision .danger-btn{
    border:1px solid rgba(255,126,144,.40);
    background:rgba(255,126,144,.055);
    color:#ffb4bf;
}

.interest-card-actions .primary-btn,
.interest-profile-decision .primary-btn{
    border:1px solid #fff;
    background:#fff;
    color:#111;
}


/* Full-screen profile viewer */

.profile-viewer-open{
    overflow:hidden !important;
}

.interest-profile-viewer{
    position:fixed;
    inset:0;
    z-index:50000;
    display:none;
    overflow:auto;
    background:#08070c;
}

.interest-profile-viewer.is-open{
    display:block;
}

.interest-profile-loading{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:30px;
    color:#aaa2b1;
    font-size:15px;
}

.interest-profile-panel{
    width:min(100%,900px);
    min-height:100vh;
    margin:0 auto;
    background:#0b090e;
}

.interest-profile-topbar{
    position:sticky;
    top:0;
    z-index:30;
    min-height:66px;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 46px;
    align-items:center;
    padding:8px 10px;
    border-bottom:1px solid rgba(255,255,255,.10);
    background:rgba(8,7,12,.95);
    backdrop-filter:blur(16px);
}

.interest-profile-topbar > div{
    min-width:0;
    text-align:center;
}

.interest-profile-topbar strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
    font-weight:900;
}

.interest-profile-topbar span{
    display:block;
    margin-top:2px;
    color:var(--nx-gold);
    font-size:9px;
    font-weight:900;
    letter-spacing:1.7px;
}

.interest-profile-close{
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,.11);
    background:rgba(255,255,255,.025);
    color:#fff;
    font-size:21px;
    cursor:pointer;
}

.interest-profile-gallery{
    position:relative;
    overflow:hidden;
    background:#111;
}

.interest-profile-track{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}

.interest-profile-track::-webkit-scrollbar{
    display:none;
}

.interest-profile-slide{
    width:100%;
    flex:0 0 100%;
    padding:0;
    border:0;
    background:#111;
    scroll-snap-align:start;
    cursor:zoom-in;
}

.interest-profile-slide img{
    width:100%;
    height:min(72vh,760px);
    object-fit:cover;
}

.interest-profile-no-photo{
    height:65vh;
    display:grid;
    place-items:center;
    color:var(--nx-champagne);
    font-size:72px;
    font-weight:900;
}

.interest-profile-dots{
    position:absolute;
    top:12px;
    left:12px;
    right:12px;
    display:flex;
    gap:4px;
    pointer-events:none;
}

.interest-profile-dots span{
    height:3px;
    flex:1;
    background:rgba(255,255,255,.35);
}

.interest-profile-dots span.active{
    background:#fff;
}

.interest-profile-swipe-hint{
    position:absolute;
    right:12px;
    bottom:12px;
    padding:7px 9px;
    background:rgba(0,0,0,.62);
    color:#fff;
    font-size:9px;
    font-weight:900;
    letter-spacing:1px;
}

.interest-profile-details{
    padding:24px 18px 38px;
}

.interest-profile-details h1{
    margin:8px 0 5px;
    color:#fff;
    font-size:36px;
    line-height:1.05;
    font-weight:900;
    letter-spacing:-.7px;
}

.interest-profile-details h1 span{
    color:#bdb6c2;
    font-weight:500;
}

.interest-profile-location{
    color:#aaa2b1;
    font-size:15px;
    line-height:1.5;
}

.interest-profile-intent{
    display:inline-block;
    margin-top:14px;
    padding:9px 11px;
    border:1px solid rgba(234,223,207,.20);
    background:rgba(234,223,207,.06);
    color:var(--nx-champagne);
    font-size:13px;
    font-weight:800;
}

.interest-profile-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}

.interest-profile-tags span{
    padding:8px 10px;
    border:1px solid rgba(255,255,255,.11);
    color:#d3ccd6;
    font-size:13px;
}

.interest-profile-about{
    margin-top:22px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.10);
}

.interest-profile-about > span{
    color:var(--nx-gold);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.5px;
}

.interest-profile-about p{
    margin:9px 0 0;
    color:#ddd7e0;
    font-size:16px;
    line-height:1.75;
}

.interest-profile-decision{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:26px;
}


/* Photo lightbox */

.interest-photo-modal{
    position:fixed;
    inset:0;
    z-index:60000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:54px 12px 18px;
    background:rgba(0,0,0,.97);
}

.interest-photo-modal.is-open{
    display:flex;
}

.interest-photo-modal img{
    max-width:100%;
    max-height:calc(100vh - 80px);
    object-fit:contain;
}

.interest-photo-modal-close{
    position:absolute;
    top:12px;
    right:14px;
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(15,15,15,.75);
    color:#fff;
    font-size:26px;
    cursor:pointer;
}


@media(max-width:767px){

    .list-intro{
        padding:28px 22px 24px !important;
    }

    #interestList{
        padding:0 18px 34px;
        gap:18px !important;
    }

    .interest-card-main{
        grid-template-columns:96px minmax(0,1fr);
        gap:14px;
        padding:15px;
    }

    .interest-card-photo{
        width:96px;
        height:122px;
    }

    .interest-card-heading{
        display:block;
    }

    .interest-view-profile{
        display:block;
        margin-top:8px;
    }

    .interest-card-bio{
        font-size:14px;
    }

    .interest-card-actions{
        padding:0 15px 15px;
    }

    .interest-profile-slide img{
        height:62vh;
        min-height:430px;
    }

    .interest-profile-details{
        padding:22px 18px 34px;
    }

}


@media(max-width:430px){

    .interest-card-main{
        grid-template-columns:82px minmax(0,1fr);
    }

    .interest-card-photo{
        width:82px;
        height:106px;
    }

    .interest-card-name{
        font-size:18px !important;
    }

    .interest-intent-pill{
        font-size:11px;
    }

    .interest-card-event{
        font-size:11px;
    }

    .interest-card-actions{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .interest-card-actions button{
        min-height:50px;
        font-size:12px !important;
    }

    .interest-profile-details h1{
        font-size:32px;
    }

}

/* ==========================================================
   NEXORA CONNECT — LARGE READABLE TEXT OVERRIDE
========================================================== */

/* Main explanatory paragraphs */
.connect-intro p,
.registration-intro p,
.form-section-heading p,
.mode-description,
.connect-principle p,
.discover-sidebar > p,
.discovery-note span,
.list-intro p,
.connect-safety-notice p,
.background-check-intro,
.consent-information p,
.safety-card p,
.warning-box{
    font-size:15px !important;
    line-height:1.7 !important;
}


/* Form field labels */
.form-field label{
    font-size:15px !important;
    line-height:1.4 !important;
}


/* Actual input/select/textarea writing */
.form-field input,
.form-field select,
.form-field textarea,
.connect-message-form textarea{
    font-size:16px !important;
    line-height:1.5 !important;
}


/* Placeholder writing */
.form-field input::placeholder,
.form-field textarea::placeholder,
.connect-message-form textarea::placeholder{
    font-size:16px !important;
}


/* Tiny helper text underneath inputs */
.field-helper{
    font-size:14px !important;
    line-height:1.6 !important;
}


/* Section labels */
.section-label,
.safety-label{
    font-size:12px !important;
    line-height:1.4 !important;
}


/* Registration notice */
.adult-notice{
    font-size:14px !important;
    line-height:1.5 !important;
}


/* Interest selector */
.interest-choice span{
    font-size:14px !important;
}


/* Upload box */
.photo-upload-area strong{
    font-size:16px !important;
}

.photo-upload-area span:last-child{
    font-size:14px !important;
    line-height:1.6 !important;
}


/* Declaration / checkbox explanations */
.declaration-row span,
.background-check-agreement span{
    font-size:14px !important;
    line-height:1.7 !important;
}


/* Discover profile */
.profile-location{
    font-size:14px !important;
}

.intent-pill{
    font-size:13px !important;
}

.interest-tags span{
    font-size:13px !important;
}

.profile-bio{
    font-size:15px !important;
    line-height:1.7 !important;
}


/* Discover sidebar */
.discover-sidebar > p{
    font-size:15px !important;
}

.discovery-note strong{
    font-size:14px !important;
}

.discovery-note span{
    font-size:14px !important;
}


/* Matches / interests people list */
.person-row strong{
    font-size:15px !important;
}

.person-row small{
    font-size:13px !important;
    line-height:1.5 !important;
}

.row-actions button,
.row-actions a,
.row-actions span{
    font-size:13px !important;
}


/* Chat header */
.conversation-person strong{
    font-size:15px !important;
}

.conversation-person span{
    font-size:13px !important;
}


/* Chat safety notice */
.safety-label{
    font-size:12px !important;
}

.connect-safety-notice p{
    font-size:14px !important;
    line-height:1.7 !important;
}

.background-check-btn span{
    font-size:13px !important;
}

.background-check-btn strong{
    font-size:14px !important;
}


/* Chat messages */
.message-text{
    font-size:15px !important;
    line-height:1.55 !important;
}

.message-time{
    font-size:11px !important;
}


/* Background check */
.background-check-intro{
    font-size:15px !important;
    line-height:1.7 !important;
}

.background-check-price span{
    font-size:13px !important;
}

.consent-information h2{
    font-size:18px !important;
}

.consent-information p{
    font-size:14px !important;
    line-height:1.7 !important;
}

.background-check-agreement span{
    font-size:14px !important;
    line-height:1.7 !important;
}


/* Generated status/safety components */
.warning-box{
    font-size:14px !important;
    line-height:1.7 !important;
}

.status-pill{
    font-size:12px !important;
}

.safety-card strong{
    font-size:14px !important;
}

.safety-card p{
    font-size:14px !important;
    line-height:1.7 !important;
}


/* Toasts and loading messages */
.connect-loading,
.connect-toast{
    font-size:14px !important;
}


/* Tabs */
.connect-tabs a{
    font-size:13px !important;
}


/* Buttons generally */
.connect-primary-btn,
.connect-secondary-btn,
.background-check-btn,
.connect-send-btn{
    font-size:14px !important;
}


/* ==========================================================
   SMALL PHONES — DO NOT SHRINK TEXT
========================================================== */

@media(max-width:390px){

    .mode-description{
        font-size:14px !important;
    }

    .form-field label{
        font-size:15px !important;
    }

    .field-helper{
        font-size:14px !important;
    }

    .profile-bio{
        font-size:15px !important;
    }

    .message-text{
        font-size:15px !important;
    }

}
/* ==========================================================
   NEXORA CONNECT CHAT — PREMIUM MESSAGE CARDS
========================================================== */

.connect-messages{
    gap:10px !important;
    padding:
    16px
    12px
    100px !important;
}


/* Each message row */
.message-row{
    width:100%;
    display:flex;
    align-items:flex-end;
}


/* Incoming */
.message-row:not(.mine){
    justify-content:flex-start;
}


/* Outgoing */
.message-row.mine{
    justify-content:flex-end;
}


/* Main bubble */
.message-bubble{
    width:auto !important;

    max-width:78% !important;

    min-width:80px;

    padding:
    12px
    14px
    9px !important;

    border:
    1px solid
    rgba(255,255,255,.11) !important;

    border-radius:
    16px
    16px
    16px
    4px !important;

    background:
    #17141b !important;

    color:
    #ffffff !important;

    box-shadow:
    0 8px 24px
    rgba(0,0,0,.14);

    overflow-wrap:anywhere;
}


/* My message */
.message-row.mine
.message-bubble{

    background:
    #f3eee7 !important;

    color:
    #17131a !important;

    border-color:
    rgba(255,255,255,.18) !important;

    border-radius:
    16px
    16px
    4px
    16px !important;
}


/* Message writing */
.message-text{

    font-size:
    15px !important;

    line-height:
    1.55 !important;

    font-weight:
    400;

    white-space:
    pre-wrap;

    text-align:
    left !important;

    letter-spacing:
    0 !important;
}


/* Time */
.message-time{

    margin-top:
    7px !important;

    font-size:
    10.5px !important;

    line-height:
    1 !important;

    text-align:
    right;

    color:
    #77717c !important;
}


.message-row.mine
.message-time{

    color:
    #817a80 !important;
}


/* ==========================================================
   SHORT MESSAGES
   Prevent "Hello" becoming a giant card
========================================================== */

.message-text:only-child{
    min-width:0;
}


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

.connect-composer{

    padding:
    10px
    12px
    calc(
        10px +
        env(safe-area-inset-bottom)
    ) !important;

    border-top:
    1px solid
    rgba(255,255,255,.10);

    background:
    rgba(8,7,12,.97);
}


.connect-message-form{

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

    gap:
    9px !important;
}


/* Message input */
.connect-message-form
textarea{

    min-height:
    52px !important;

    max-height:
    130px !important;

    padding:
    14px !important;

    border:
    1px solid
    rgba(255,255,255,.13) !important;

    background:
    #151219 !important;

    color:
    #ffffff !important;

    font-size:
    16px !important;

    line-height:
    1.45 !important;

    border-radius:
    12px !important;
}


.connect-message-form
textarea::placeholder{

    color:
    #817b86 !important;

    font-size:
    15px !important;
}


/* Send button */
.connect-send-btn{

    height:
    52px !important;

    min-height:
    52px !important;

    padding:
    0 12px !important;

    border:
    1px solid
    #ffffff !important;

    border-radius:
    12px !important;

    background:
    #ffffff !important;

    color:
    #111111 !important;

    font-size:
    14px !important;

    font-weight:
    900 !important;
}


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

@media(max-width:767px){

    .message-bubble{

        max-width:
        82% !important;

        padding:
        11px
        13px
        8px !important;
    }


    .message-text{

        font-size:
        15px !important;

        line-height:
        1.55 !important;
    }


    .message-time{

        font-size:
        10px !important;
    }

}


/* Extra-small phones */
@media(max-width:390px){

    .message-bubble{

        max-width:
        84% !important;
    }


    .connect-message-form{

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

}