:root{
--app-bg:#08080a;
--app-card:#121216;
--app-card-2:#18181c;
--app-border:#22222a;
--app-text:#fff;
--app-sub:rgba(255,255,255,.45);
--app-accent:#a855f7;
--app-accent-dark:#7c3aed;
--app-input:#09090c;
--app-danger:#ef4444;
--app-glass:rgba(255,255,255,.04);
}

html[data-theme="white"]{
--app-bg:#f5f5f7;
--app-card:#fff;
--app-card-2:#f0f0f3;
--app-border:#dcdce2;
--app-text:#111114;
--app-sub:rgba(0,0,0,.5);
--app-accent:#9333ea;
--app-accent-dark:#7e22ce;
--app-input:#f7f7f8;
--app-danger:#dc2626;
--app-glass:rgba(0,0,0,.035);
}

html[data-theme="pink"]{
--app-bg:#160a12;
--app-card:#21101b;
--app-card-2:#2a1422;
--app-border:#4a2338;
--app-text:#fff;
--app-sub:rgba(255,220,235,.58);
--app-accent:#ec4899;
--app-accent-dark:#db2777;
--app-input:#180b13;
--app-danger:#ef4444;
--app-glass:rgba(255,220,235,.04);
}

*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
-webkit-tap-highlight-color:transparent;
}

html{
background:var(--app-bg);
color:var(--app-text);
transition:background .25s ease,color .25s ease;
}

body{
background:var(--app-bg);
color:var(--app-text);
width:100%;
overflow-x:hidden;
transition:background .25s ease,color .25s ease;
}

/* AUTH */

body.auth-body{
min-height:100vh;
min-height:100dvh;
padding:1rem;
display:flex;
justify-content:center;
align-items:center;
overflow-y:auto;
}

.auth-card{
width:100%;
max-width:400px;
background:var(--app-card);
border:1px solid var(--app-border);
border-radius:16px;
padding:2rem;
display:flex;
flex-direction:column;
gap:1.25rem;
box-shadow:0 12px 32px rgba(0,0,0,.35);
text-align:center;
}

.auth-card .logo{
font-size:2.2rem;
font-weight:900;
letter-spacing:3px;
color:var(--app-accent);
text-shadow:0 0 16px color-mix(in srgb,var(--app-accent) 35%,transparent);
user-select:none;
}

.auth-subtitle{
font-size:.85rem;
color:var(--app-sub);
}

.auth-card .form-group{
position:relative;
display:flex;
flex-direction:column;
gap:.4rem;
width:100%;
}

.input-field{
width:100%;
background:var(--app-input);
border:1px solid var(--app-border);
color:var(--app-text);
padding:.8rem 1rem;
padding-right:3.5rem;
border-radius:8px;
font-size:.9rem;
outline:none;
transition:border-color .2s,background .25s,color .25s,box-shadow .2s;
}

.input-field:focus{
border-color:var(--app-accent);
box-shadow:0 0 10px color-mix(in srgb,var(--app-accent) 20%,transparent);
}

.toggle-password{
position:absolute;
right:.85rem;
top:50%;
transform:translateY(-50%);
font-size:.75rem;
font-weight:700;
color:var(--app-sub);
cursor:pointer;
user-select:none;
letter-spacing:.5px;
transition:color .2s;
}

.toggle-password:hover{
color:var(--app-accent);
}

.auth-btn{
width:100%;
background:var(--app-accent);
border:none;
color:#fff;
padding:.85rem;
border-radius:8px;
font-weight:800;
font-size:.95rem;
cursor:pointer;
margin-top:.5rem;
transition:background .2s,box-shadow .2s;
}

.auth-btn:hover{
background:var(--app-accent-dark);
box-shadow:0 0 14px color-mix(in srgb,var(--app-accent) 25%,transparent);
}

.auth-btn:disabled{
opacity:.6;
cursor:not-allowed;
}

.error-msg{
font-size:.8rem;
text-align:center;
display:none;
word-break:break-word;
}

.switch-mode{
font-size:.85rem;
color:var(--app-sub);
display:flex;
justify-content:center;
gap:.4rem;
margin-top:.5rem;
user-select:none;
}

.switch-link{
color:var(--app-accent);
font-weight:700;
cursor:pointer;
transition:color .2s;
}

.switch-link:hover{
color:var(--app-accent-dark);
text-decoration:underline;
}

/* INBOX */

body.inbox-page{
height:100vh;
height:100dvh;
overflow:hidden;
}

.inbox-app-wrapper{
width:100%;
max-width:100%;
height:100%;
display:flex;
flex-direction:column;
gap:1rem;
padding:1rem;
padding-bottom:84px;
}

.inbox-header{
display:flex;
justify-content:space-between;
align-items:center;
padding-top:4px;
padding-bottom:12px;
margin-bottom:2px;
border-bottom:1px solid var(--app-border);
position:sticky;
top:0;
background:var(--app-bg);
z-index:100;
flex-shrink:0;
user-select:none;
transition:background .25s,border-color .25s;
}

.inbox-brand{
font-size:1.5rem;
font-weight:900;
letter-spacing:2px;
color:var(--app-text);
}

.inbox-header-icons{
display:flex;
align-items:center;
gap:8px;
}

.header-icon-btn{
width:38px;
height:38px;
border:0;
background:transparent;
color:var(--app-text);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
border-radius:10px;
transition:background .2s,color .2s,transform .2s;
}

.header-icon-btn:active{
background:var(--app-glass);
transform:scale(.92);
}

.header-icon-btn svg{
width:21px;
height:21px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}

/* OLD HEADER COMPATIBILITY */

.inbox-header-actions{
display:flex;
gap:.5rem;
}

.inbox-user-pill,
.inbox-logout-btn{
background:var(--app-card);
border:1px solid var(--app-border);
color:var(--app-text);
padding:.45rem .85rem;
border-radius:8px;
font-weight:600;
font-size:.85rem;
cursor:pointer;
transition:all .2s;
}

.inbox-user-pill:hover,
.inbox-logout-btn:hover{
border-color:var(--app-accent);
background:color-mix(in srgb,var(--app-accent) 10%,var(--app-card));
}

/* INBOX SECTION */

.inbox-section{
flex:1;
display:flex;
flex-direction:column;
gap:.5rem;
min-height:0;
}

.inbox-section-title{
display:flex;
justify-content:space-between;
align-items:center;
font-size:.75rem;
font-weight:700;
letter-spacing:1px;
color:var(--app-text);
flex-shrink:0;
user-select:none;
padding:0 .2rem;
}

.chat-list{
flex:1;
display:flex;
flex-direction:column;
gap:.6rem;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding-bottom:1.25rem;
padding-right:4px;
padding-left:2px;
}

.chat-list::-webkit-scrollbar{
width:4px;
}

.chat-list::-webkit-scrollbar-thumb{
background:var(--app-border);
border-radius:10px;
}

.chat-list::-webkit-scrollbar-track{
background:transparent;
}

/* CHAT CARDS */

.chat-card{
background:var(--app-card);
border:1px solid var(--app-border);
padding:.75rem .85rem;
border-radius:12px;
display:flex;
align-items:center;
gap:.8rem;
cursor:pointer;
transition:background .2s,border-color .2s,transform .2s;
flex-shrink:0;
user-select:none;
touch-action:manipulation;
}

.chat-card:hover{
border-color:color-mix(in srgb,var(--app-accent) 50%,var(--app-border));
background:var(--app-card-2);
}

.chat-card:active{
transform:scale(.985);
}

.inbox-card-avatar{
width:44px;
height:44px;
border-radius:50%;
background:color-mix(in srgb,var(--app-accent) 15%,var(--app-card-2));
border:1px solid color-mix(in srgb,var(--app-accent) 30%,var(--app-border));
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
color:var(--app-accent);
flex-shrink:0;
overflow:hidden;
}

.inbox-avatar-img{
width:100%;
height:100%;
object-fit:cover;
}

.inbox-card-content{
flex:1;
overflow:hidden;
}

.inbox-card-header{
display:flex;
justify-content:space-between;
align-items:center;
}

.inbox-card-username{
font-weight:700;
font-size:.95rem;
color:var(--app-text);
}

.inbox-card-preview{
font-size:.82rem;
color:var(--app-sub);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
margin-top:2px;
}

.empty-state{
font-size:.82rem;
color:var(--app-sub);
font-style:italic;
padding:1rem;
background:var(--app-glass);
border:1px dashed var(--app-border);
border-radius:10px;
text-align:center;
user-select:none;
}

/* CODE SEARCH */

.code-search-box{
background:var(--app-card);
border:1px solid var(--app-border);
border-radius:12px;
padding:.75rem .85rem;
display:flex;
flex-direction:column;
gap:.5rem;
flex-shrink:0;
}

.code-input-wrapper{
display:flex;
gap:.5rem;
}

.code-join-field{
flex:1;
background:var(--app-input);
border:1px solid var(--app-border);
color:var(--app-text);
padding:.75rem 1rem;
border-radius:8px;
font-size:.85rem;
letter-spacing:1px;
text-transform:uppercase;
outline:none;
transition:border-color .2s,box-shadow .2s,background .25s,color .25s;
}

.code-join-field::placeholder{
color:var(--app-sub);
}

.code-join-field:focus{
border-color:var(--app-accent);
box-shadow:0 0 10px color-mix(in srgb,var(--app-accent) 20%,transparent);
}

.join-btn{
background:var(--app-accent);
border:none;
color:#fff;
padding:.75rem 1.25rem;
border-radius:8px;
font-weight:700;
cursor:pointer;
transition:background .2s;
white-space:nowrap;
touch-action:manipulation;
user-select:none;
}

.join-btn:hover{
background:var(--app-accent-dark);
}

.join-btn:disabled{
opacity:.6;
cursor:not-allowed;
}

.code-error-msg{
color:var(--app-danger);
font-size:.8rem;
display:none;
}

/* MODALS */

.retro-modal-overlay{
display:none;
position:fixed;
inset:0;
width:100vw;
height:100vh;
height:100dvh;
background:rgba(0,0,0,.72);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
z-index:1000;
justify-content:center;
align-items:center;
padding:1rem;
}

.retro-modal-overlay.active{
display:flex;
}

.retro-modal-content{
background:var(--app-card);
border:1px solid var(--app-border);
border-radius:14px;
width:100%;
max-width:400px;
padding:1.25rem;
display:flex;
flex-direction:column;
gap:1rem;
box-shadow:0 10px 25px rgba(0,0,0,.45);
color:var(--app-text);
}

.retro-modal-content h3{
color:var(--app-text);
}

.modal-submit-btn{
background:var(--app-accent);
border:none;
color:#fff;
padding:.75rem;
border-radius:8px;
font-weight:700;
cursor:pointer;
width:100%;
touch-action:manipulation;
}

.modal-submit-btn:hover{
background:var(--app-accent-dark);
}

.notif-modal-text{
font-size:.85rem;
color:var(--app-sub);
line-height:1.45;
}

.modal-actions-row{
display:flex;
gap:10px;
}

.modal-close-btn{
position:absolute;
right:14px;
top:10px;
background:none;
border:0;
color:var(--app-sub);
font-size:28px;
line-height:1;
cursor:pointer;
}

.search-modal-content{
position:relative;
}

.search-modal-content h3{
font-size:1.05rem;
}

.search-modal-content .code-input-wrapper{
margin-top:4px;
}

.avatar-view-content{
padding:0;
overflow:hidden;
background:var(--app-card);
}

.avatar-view-content img{
width:100%;
height:auto;
max-height:80vh;
object-fit:contain;
display:block;
}

/* BOTTOM NAV */

.bottom-nav{
position:fixed;
left:0;
right:0;
bottom:0;
height:68px;
background:color-mix(in srgb,var(--app-card) 96%,transparent);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border-top:1px solid var(--app-border);
display:flex;
align-items:stretch;
justify-content:space-around;
padding:5px 8px max(5px,env(safe-area-inset-bottom));
z-index:9999;
transition:background .25s,border-color .25s;
}

.bottom-nav-item{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
color:var(--app-sub);
text-decoration:none;
font-size:.68rem;
font-weight:600;
transition:color .2s,transform .2s;
touch-action:manipulation;
}

.bottom-nav-icon{
height:24px;
display:flex;
align-items:center;
justify-content:center;
}

.bottom-nav-icon svg{
width:21px;
height:21px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}

.bottom-nav-item.active{
color:var(--app-accent);
}

.bottom-nav-item:active{
transform:scale(.92);
}

/* RESPONSIVE */

@media(max-width:360px){
.inbox-app-wrapper{
padding-left:12px;
padding-right:12px;
}

.inbox-brand{
font-size:1.35rem;
}

.chat-card{
padding:.7rem .75rem;
}

.inbox-card-avatar{
width:42px;
height:42px;
}
   }