/* ═══════════════════════════════════════════════════════════
   Malvryx Secure Channel v2 — Full Stylesheet
   Dark, minimal, enterprise — by Dev Malvryx
═══════════════════════════════════════════════════════════ */

:root {
  --bg-base:       #0a0c10;
  --bg-elevated:   #10141a;
  --bg-surface:    #161b23;
  --bg-hover:      #1c222d;
  --bg-input:      #171c25;
  --border:        #1e2530;
  --border-light:  #252e3d;

  --accent:        #00aaff;
  --accent-glow:   rgba(0,170,255,0.14);
  --accent-dim:    #005c99;
  --success:       #00d97e;
  --danger:        #ff4554;
  --warn:          #ffaa00;
  --gold:          #ffd700;
  --owner-gold:    linear-gradient(135deg, #ffd700, #ff9900, #ffd700);

  --bubble-out:    #0c2540;
  --bubble-out-bd: #0d3260;
  --bubble-in:     #161b23;
  --bubble-in-bd:  #1e2530;

  --txt-primary:   #e4eaf4;
  --txt-secondary: #6e7f99;
  --txt-muted:     #3d4f69;
  --txt-accent:    #00aaff;

  --font-ui:    'Syne', sans-serif;
  --font-mono:  'JetBrains Mono', monospace;

  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-full: 9999px;

  --sidebar-w: 280px;
  --header-h:  60px;
  --footer-h:  72px;

  --sh-sm: 0 2px 8px rgba(0,0,0,.4);
  --sh-md: 0 4px 20px rgba(0,0,0,.5);
  --sh-lg: 0 8px 40px rgba(0,0,0,.6);
  --sh-accent: 0 0 20px rgba(0,170,255,.18);
}

/* ── Reset ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-ui);background:var(--bg-base);color:var(--txt-primary);min-height:100dvh;overflow:hidden}
button{cursor:pointer;font-family:inherit}
input,textarea{font-family:inherit}
a{color:var(--accent);text-decoration:none}
img{max-width:100%}

/* ── Scrollbars ─────────────────────────────────────────────────── */
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--txt-muted)}

/* ═══════════════════════════════════════════════════════════
   LOGIN / REGISTER PAGE
═══════════════════════════════════════════════════════════ */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100dvh;overflow:auto;background:var(--bg-base)}

.auth-bg{position:fixed;inset:0;pointer-events:none;z-index:0}
.auth-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:44px 44px;opacity:.3}
.auth-glow{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(0,170,255,.07) 0%,transparent 68%)}
.auth-glow2{position:absolute;bottom:10%;right:10%;width:300px;height:300px;background:radial-gradient(circle,rgba(0,217,126,.04) 0%,transparent 70%)}

.auth-container{position:relative;z-index:1;width:100%;max-width:440px;padding:1.5rem}
.auth-card{background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--r-xl);padding:2.5rem;box-shadow:var(--sh-lg),0 0 80px rgba(0,170,255,.04)}

.auth-logo{display:flex;align-items:center;gap:.8rem;margin-bottom:.4rem}
.logo-shield{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:rgba(0,170,255,.07);border:1px solid rgba(0,170,255,.18);border-radius:var(--r-md);flex-shrink:0}
.logo-shield.sm{width:36px;height:36px;border-radius:var(--r-sm)}
.logo-text{display:flex;flex-direction:column;gap:1px}
.logo-title{font-weight:800;font-size:1.35rem;letter-spacing:-.03em;line-height:1}
.logo-sub{font-family:var(--font-mono);font-size:.62rem;color:var(--accent);letter-spacing:.12em;text-transform:uppercase}

.auth-tagline{color:var(--txt-muted);font-family:var(--font-mono);font-size:.75rem;margin-bottom:1.8rem}

.auth-tabs{display:flex;gap:.25rem;background:var(--bg-surface);border-radius:var(--r-md);padding:.25rem;margin-bottom:1.5rem}
.tab-btn{flex:1;padding:.5rem;border:none;background:none;color:var(--txt-muted);border-radius:var(--r-sm);font-family:var(--font-ui);font-weight:600;font-size:.82rem;transition:all .2s}
.tab-btn.active{background:var(--accent);color:#000}

.auth-form{display:flex;flex-direction:column;gap:1rem}
.field-group{display:flex;flex-direction:column;gap:.38rem}
.field-group label{font-family:var(--font-mono);font-size:.68rem;color:var(--txt-secondary);letter-spacing:.08em;text-transform:uppercase}
.input-wrap{position:relative;display:flex;align-items:center}
.input-icon{position:absolute;left:13px;color:var(--txt-muted);pointer-events:none;flex-shrink:0}
.input-wrap input{width:100%;background:var(--bg-input);border:1px solid var(--border-light);border-radius:var(--r-md);color:var(--txt-primary);font-size:.88rem;padding:.72rem 2.8rem .72rem 2.6rem;outline:none;transition:border-color .2s,box-shadow .2s}
.input-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.input-wrap input::placeholder{color:var(--txt-muted)}
.toggle-pass{position:absolute;right:11px;background:none;border:none;color:var(--txt-muted);padding:4px;display:flex;transition:color .2s}
.toggle-pass:hover{color:var(--txt-secondary)}

.error-msg{color:var(--danger);font-size:.78rem;font-family:var(--font-mono);min-height:1.1em;text-align:center}
.success-msg{color:var(--success);font-size:.78rem;font-family:var(--font-mono);text-align:center}

.btn-primary{position:relative;background:linear-gradient(135deg,#0050cc,#00aaff);color:#fff;border:none;border-radius:var(--r-md);padding:.82rem;font-weight:700;font-size:.92rem;letter-spacing:.01em;overflow:hidden;transition:opacity .2s,transform .1s;width:100%}
.btn-primary:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}
.btn-primary:active:not(:disabled){transform:translateY(0)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-spinner{display:none;position:absolute;right:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn-primary.loading .btn-spinner{display:block}
.btn-primary.loading .btn-text{opacity:.6}
.btn-primary.success{background:linear-gradient(135deg,#008a50,#00d97e)}

.auth-footer{display:flex;justify-content:space-between;margin-top:1.8rem;padding-top:1rem;border-top:1px solid var(--border)}
.mono{font-family:var(--font-mono);font-size:.68rem;color:var(--txt-muted)}

/* Credit badge */
.dev-credit{display:flex;align-items:center;gap:.5rem;margin-top:1.5rem;padding:.7rem 1rem;background:linear-gradient(135deg,rgba(255,215,0,.04),rgba(255,153,0,.04));border:1px solid rgba(255,215,0,.15);border-radius:var(--r-md)}
.dev-credit-text{font-family:var(--font-mono);font-size:.7rem;color:var(--txt-muted)}
.dev-credit-name{background:var(--owner-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}

/* ═══════════════════════════════════════════════════════════
   CHAT APP LAYOUT
═══════════════════════════════════════════════════════════ */
.chat-body{overflow:hidden}
.chat-app{display:flex;height:100dvh;width:100vw}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg-elevated);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100dvh;overflow:hidden}

.sidebar-logo{display:flex;align-items:center;gap:.65rem;padding:1.1rem 1.2rem;border-bottom:1px solid var(--border);flex-shrink:0}
.sidebar-brand{font-weight:800;font-size:.95rem;letter-spacing:-.02em}
.brand-accent{background:var(--owner-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.sidebar-me{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.2rem;background:var(--bg-hover);flex-shrink:0}
.me-info{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.me-name{font-weight:700;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-role{font-family:var(--font-mono);font-size:.62rem;color:var(--txt-muted)}

.sidebar-nav{padding:.5rem .6rem;border-bottom:1px solid var(--border);display:flex;gap:.3rem;flex-shrink:0}
.nav-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.5rem .4rem;background:none;border:none;color:var(--txt-muted);border-radius:var(--r-sm);font-family:var(--font-mono);font-size:.68rem;transition:all .2s;position:relative}
.nav-btn:hover{background:var(--bg-hover);color:var(--txt-primary)}
.nav-btn.active{background:rgba(0,170,255,.1);color:var(--accent)}
.badge{position:absolute;top:3px;right:3px;background:var(--danger);color:#fff;border-radius:99px;font-size:.55rem;min-width:14px;height:14px;display:flex;align-items:center;justify-content:center;padding:0 3px;font-weight:700}

.sidebar-scroll{flex:1;overflow-y:auto}

/* ── Conversation list ────────────────────────────────────── */
.conv-list{display:flex;flex-direction:column}
.conv-item{display:flex;align-items:center;gap:.7rem;padding:.75rem 1.2rem;cursor:pointer;border-bottom:1px solid var(--border);transition:background .15s;position:relative}
.conv-item:hover{background:var(--bg-hover)}
.conv-item.active{background:rgba(0,170,255,.06);border-right:2px solid var(--accent)}
.conv-info{flex:1;min-width:0}
.conv-name{font-weight:600;font-size:.88rem;display:flex;align-items:center;gap:.4rem}
.conv-preview{font-size:.76rem;color:var(--txt-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.12rem}
.conv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;flex-shrink:0}
.conv-time{font-family:var(--font-mono);font-size:.62rem;color:var(--txt-muted)}
.unread-dot{background:var(--accent);color:#000;border-radius:99px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;padding:0 4px}

/* ── Friend panel ─────────────────────────────────────────── */
.friends-panel{display:flex;flex-direction:column}
.panel-title{padding:.7rem 1.2rem;font-family:var(--font-mono);font-size:.68rem;color:var(--txt-muted);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--border)}
.search-box{padding:.5rem .8rem;border-bottom:1px solid var(--border)}
.search-box input{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-full);padding:.45rem .9rem;font-size:.82rem;color:var(--txt-primary);outline:none}
.search-box input:focus{border-color:var(--accent)}
.search-box input::placeholder{color:var(--txt-muted)}
.search-results{display:flex;flex-direction:column}
.friend-item{display:flex;align-items:center;gap:.7rem;padding:.6rem 1.2rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.friend-item:hover{background:var(--bg-hover)}
.friend-info{flex:1;min-width:0}
.friend-name{font-weight:600;font-size:.85rem;display:flex;align-items:center;gap:.35rem}
.friend-status{font-size:.72rem;font-family:var(--font-mono);color:var(--txt-muted)}
.friend-status.online{color:var(--success)}
.friend-btn{padding:.3rem .7rem;border-radius:var(--r-sm);font-size:.72rem;font-weight:600;border:none;background:rgba(0,170,255,.1);color:var(--accent);transition:all .2s}
.friend-btn:hover{background:var(--accent);color:#000}
.friend-btn.pending{background:rgba(255,170,0,.1);color:var(--warn)}
.friend-btn.accept{background:rgba(0,217,126,.1);color:var(--success)}

.empty-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2.5rem 1rem;color:var(--txt-muted);text-align:center}
.empty-panel svg{opacity:.2}
.empty-panel p{font-size:.8rem;font-family:var(--font-mono)}

/* ── Sidebar bottom ───────────────────────────────────────── */
.sidebar-bottom{display:flex;gap:.4rem;padding:.7rem .8rem;border-top:1px solid var(--border);flex-shrink:0}
.sidebar-icon-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:.55rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--txt-secondary);transition:all .2s}
.sidebar-icon-btn:hover{background:var(--bg-hover);color:var(--txt-primary)}
.sidebar-icon-btn.muted{color:var(--txt-muted)}

/* ── Avatars ──────────────────────────────────────────────── */
.avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;color:#fff;flex-shrink:0;letter-spacing:-.02em;position:relative;background:linear-gradient(135deg,#003ea8,#0066ff)}
.avatar.sm{width:34px;height:34px;font-size:.7rem}
.avatar.xs{width:26px;height:26px;font-size:.6rem}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}

/* Verified badge */
.verified-badge{width:16px;height:16px;flex-shrink:0}
.verified-badge.owner{filter:drop-shadow(0 0 4px rgba(255,215,0,.6))}

/* Online dot on avatar */
.avatar-wrap{position:relative;flex-shrink:0}
.online-ring{position:absolute;bottom:1px;right:1px;width:10px;height:10px;border-radius:50%;background:var(--success);border:2px solid var(--bg-elevated);transition:background .3s}
.online-ring.offline{background:var(--txt-muted)}
.avatar-wrap.sm .online-ring{width:8px;height:8px}

/* Owner golden frame */
.avatar-wrap.owner-frame .avatar{box-shadow:0 0 0 2px #ffd700,0 0 10px rgba(255,215,0,.3)}

/* ═══════════════════════════════════════════════════════════
   CHAT MAIN
═══════════════════════════════════════════════════════════ */
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg-base);position:relative}

/* Wallpaper overlay */
.wallpaper-overlay{position:absolute;inset:var(--header-h) 0 var(--footer-h) 0;background-size:cover;background-position:center;opacity:.12;pointer-events:none;z-index:0}

/* ── Header ───────────────────────────────────────────────── */
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;height:var(--header-h);background:var(--bg-elevated);border-bottom:1px solid var(--border);flex-shrink:0;z-index:10;position:relative}
.chat-header-left{display:flex;align-items:center;gap:.8rem}
.header-info{display:flex;flex-direction:column;gap:.1rem}
.header-name{font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:.4rem}
.header-sub{display:flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.7rem;color:var(--txt-muted)}
.header-actions{display:flex;align-items:center;gap:.5rem}
.icon-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--txt-secondary);border-radius:var(--r-sm);transition:all .2s}
.icon-btn:hover{background:var(--bg-hover);color:var(--txt-primary)}

/* Typing dots */
.typing-dots{display:none;align-items:center;gap:2px}
.typing-dots.show{display:flex}
.typing-dots span{width:4px;height:4px;background:var(--accent);border-radius:50%;animation:tdot 1.2s ease infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes tdot{0%,80%,100%{transform:scale(.7);opacity:.4}40%{transform:scale(1.1);opacity:1}}

/* Conn pill */
.conn-pill{display:flex;align-items:center;gap:.4rem;padding:.28rem .7rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-full);font-family:var(--font-mono);font-size:.68rem;color:var(--txt-muted)}
.conn-dot{width:7px;height:7px;border-radius:50%;background:var(--txt-muted);transition:background .3s}
.conn-dot.connected{background:var(--success);box-shadow:0 0 5px var(--success)}
.conn-dot.connecting{background:var(--warn);animation:pulse 1.2s ease infinite}
.conn-dot.disconnected{background:var(--danger)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Status dot inline */
.sdot{width:7px;height:7px;border-radius:50%;background:var(--txt-muted);flex-shrink:0;transition:background .3s}
.sdot.online{background:var(--success);box-shadow:0 0 5px var(--success)}

/* ── Messages area ────────────────────────────────────────── */
.messages-wrap{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;padding:1rem 1.25rem .5rem;position:relative;z-index:1}
.messages-inner{display:flex;flex-direction:column;gap:1px}

.load-more-wrap{display:flex;justify-content:center;padding:.5rem 0 1rem}
.load-more-btn{background:var(--bg-surface);border:1px solid var(--border-light);color:var(--txt-secondary);border-radius:var(--r-full);padding:.4rem 1.1rem;font-family:var(--font-mono);font-size:.72rem;cursor:pointer;transition:all .2s}
.load-more-btn:hover{background:var(--bg-hover);color:var(--txt-primary)}
.load-more-btn:disabled{opacity:.4;cursor:default}
.load-more-btn.hidden{display:none}

/* Date separator */
.date-sep{display:flex;align-items:center;gap:.7rem;margin:1.1rem 0 .7rem;color:var(--txt-muted);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em}
.date-sep::before,.date-sep::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── Message rows ─────────────────────────────────────────── */
.msg-row{display:flex;margin:1px 0;gap:.5rem;align-items:flex-end;position:relative}
.msg-row.out{flex-direction:row-reverse}

/* Bubble */
.msg-bubble{max-width:min(70%,500px);border-radius:var(--r-lg);position:relative;animation:popIn .18s ease;word-break:break-word}
@keyframes popIn{from{opacity:0;transform:translateY(5px) scale(.97)}to{opacity:1;transform:none}}

.msg-row.out  .msg-bubble{background:var(--bubble-out);border:1px solid var(--bubble-out-bd);border-bottom-right-radius:5px}
.msg-row.in   .msg-bubble{background:var(--bubble-in);border:1px solid var(--bubble-in-bd);border-bottom-left-radius:5px}

/* Group consecutive */
.msg-row.out+.msg-row.out .msg-bubble{border-top-right-radius:5px;border-bottom-right-radius:var(--r-lg)}
.msg-row.in+.msg-row.in   .msg-bubble{border-top-left-radius:5px;border-bottom-left-radius:var(--r-lg)}

.msg-inner{padding:.65rem .9rem}

/* Deleted */
.msg-row.deleted .msg-bubble{opacity:.5}
.msg-deleted{font-style:italic;color:var(--txt-muted);font-size:.82rem;padding:.5rem .8rem}

/* Reply preview inside bubble */
.reply-preview{background:rgba(0,170,255,.07);border-left:2px solid var(--accent);border-radius:var(--r-sm);padding:.4rem .6rem;margin-bottom:.5rem;cursor:pointer}
.reply-preview .rp-sender{font-size:.7rem;color:var(--accent);font-weight:600;font-family:var(--font-mono)}
.reply-preview .rp-text{font-size:.78rem;color:var(--txt-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Edited badge */
.edited-badge{font-family:var(--font-mono);font-size:.6rem;color:var(--txt-muted);margin-left:.4rem}

/* Message text */
.msg-text{font-size:.88rem;line-height:1.55;color:var(--txt-primary)}

/* Meta (time + status) */
.msg-meta{display:flex;align-items:center;justify-content:flex-end;gap:.3rem;margin-top:.3rem}
.msg-time{font-family:var(--font-mono);font-size:.6rem;color:var(--txt-muted)}
.msg-status{display:flex;align-items:center;color:var(--txt-muted);transition:color .3s}
.msg-status.delivered{color:var(--txt-secondary)}
.msg-status.seen{color:var(--accent)}

/* ── Sticker ──────────────────────────────────────────────── */
.msg-sticker{font-size:3.5rem;line-height:1;padding:.3rem;display:block;cursor:default;user-select:none}
.msg-row.out .msg-sticker+.msg-meta,.msg-row.in .msg-sticker+.msg-meta{padding:0 .5rem .4rem}

/* ── Media bubbles ────────────────────────────────────────── */
.msg-image{display:block;max-width:280px;max-height:300px;border-radius:var(--r-md);cursor:pointer;object-fit:cover;transition:opacity .2s}
.msg-image:hover{opacity:.9}
.msg-video{display:block;max-width:300px;max-height:300px;border-radius:var(--r-md);outline:none}
.msg-audio{width:220px;height:36px;border-radius:var(--r-full)}

.msg-file{display:flex;align-items:center;gap:.65rem;padding:.65rem .9rem;min-width:180px}
.file-icon{width:36px;height:36px;border-radius:var(--r-sm);background:rgba(0,170,255,.1);border:1px solid rgba(0,170,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent)}
.file-info{flex:1;min-width:0}
.file-name{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-size{font-family:var(--font-mono);font-size:.66rem;color:var(--txt-muted)}
.file-dl{padding:.28rem .6rem;border-radius:var(--r-sm);background:rgba(0,170,255,.1);color:var(--accent);font-size:.7rem;border:none;transition:all .2s}
.file-dl:hover{background:var(--accent);color:#000}

/* Msg context menu */
.msg-ctx-btn{position:absolute;top:4px;opacity:0;transition:opacity .15s;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px 5px;color:var(--txt-secondary);font-size:.75rem}
.msg-row.out .msg-ctx-btn{left:-32px}
.msg-row.in  .msg-ctx-btn{right:-32px}
.msg-row:hover .msg-ctx-btn{opacity:1}

/* Context dropdown */
.ctx-menu{position:absolute;background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--r-md);box-shadow:var(--sh-lg);z-index:100;min-width:150px;overflow:hidden;animation:fadeIn .12s ease}
@keyframes fadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.ctx-item{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;font-size:.83rem;color:var(--txt-secondary);cursor:pointer;transition:background .15s}
.ctx-item:hover{background:var(--bg-hover);color:var(--txt-primary)}
.ctx-item.danger{color:var(--danger)}
.ctx-item.danger:hover{background:rgba(255,69,84,.08)}

/* Empty chat state */
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:var(--txt-muted);text-align:center;padding:2rem}
.chat-empty svg{opacity:.2}
.chat-empty h3{font-size:1rem;font-weight:600;color:var(--txt-secondary)}
.chat-empty p{font-size:.8rem;font-family:var(--font-mono)}

/* No conversation selected */
.no-conv{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--txt-muted)}
.no-conv svg{opacity:.12}
.no-conv p{font-size:.85rem;font-family:var(--font-mono)}

/* ── Reply bar ────────────────────────────────────────────── */
.reply-bar{display:none;align-items:center;gap:.7rem;padding:.6rem 1.25rem;background:var(--bg-elevated);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.reply-bar.show{display:flex}
.reply-bar-content{flex:1;min-width:0}
.reply-bar-sender{font-size:.72rem;color:var(--accent);font-weight:600;font-family:var(--font-mono)}
.reply-bar-text{font-size:.8rem;color:var(--txt-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-cancel{background:none;border:none;color:var(--txt-muted);padding:4px;transition:color .15s}
.reply-cancel:hover{color:var(--txt-primary)}

/* ── Footer / Input ───────────────────────────────────────── */
.chat-footer{background:var(--bg-elevated);border-top:1px solid var(--border);flex-shrink:0;z-index:10;position:relative}
.input-row{display:flex;align-items:flex-end;gap:.6rem;padding:.7rem 1.25rem}
.input-actions{display:flex;gap:.3rem;align-items:center}
.attach-btn,.sticker-btn,.emoji-area-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--txt-secondary);border-radius:var(--r-sm);transition:all .2s}
.attach-btn:hover,.sticker-btn:hover{background:var(--bg-hover);color:var(--accent)}

.input-box{flex:1;display:flex;align-items:flex-end;background:var(--bg-input);border:1px solid var(--border-light);border-radius:var(--r-lg);padding:.55rem .55rem .55rem .9rem;transition:border-color .2s,box-shadow .2s;gap:.4rem}
.input-box:focus-within{border-color:rgba(0,170,255,.35);box-shadow:0 0 0 3px rgba(0,170,255,.07)}
.msg-input{flex:1;background:none;border:none;color:var(--txt-primary);font-size:.88rem;outline:none;resize:none;max-height:120px;line-height:1.5}
.msg-input::placeholder{color:var(--txt-muted)}
.send-btn{width:36px;height:36px;border-radius:var(--r-md);background:linear-gradient(135deg,#0044bb,#00aaff);border:none;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;transition:all .2s;transform:scale(.95)}
.send-btn:not(:disabled):hover{transform:scale(1.02);box-shadow:var(--sh-accent)}
.send-btn:disabled{opacity:.3;cursor:not-allowed;transform:none}
.char-bar{padding:0 1.25rem .4rem;display:flex;justify-content:flex-end}
.char-count{font-family:var(--font-mono);font-size:.62rem;color:var(--txt-muted)}
.char-count.warn{color:var(--warn)}
.char-count.limit{color:var(--danger)}

/* Media preview before send */
.media-preview-bar{display:none;align-items:center;gap:.75rem;padding:.6rem 1.25rem;background:var(--bg-surface);border-top:1px solid var(--border)}
.media-preview-bar.show{display:flex}
.preview-thumb{width:52px;height:52px;border-radius:var(--r-sm);object-fit:cover;background:var(--bg-hover)}
.preview-thumb.file-icon-preview{display:flex;align-items:center;justify-content:center;background:rgba(0,170,255,.07);border:1px solid var(--border);font-size:1.4rem}
.preview-info{flex:1;min-width:0}
.preview-name{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-size{font-family:var(--font-mono);font-size:.68rem;color:var(--txt-muted)}
.preview-cancel{background:none;border:none;color:var(--txt-muted);padding:4px}
.preview-cancel:hover{color:var(--txt-primary)}
.preview-send{padding:.4rem 1rem;background:var(--accent);color:#000;border:none;border-radius:var(--r-sm);font-weight:700;font-size:.8rem}

/* ── Sticker panel ────────────────────────────────────────── */
.sticker-panel{display:none;position:absolute;bottom:calc(100% + 8px);right:1.25rem;width:340px;background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--r-xl);box-shadow:var(--sh-lg);z-index:50;overflow:hidden;animation:slideUp .2s ease}
.sticker-panel.show{display:block}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sticker-tabs{display:flex;border-bottom:1px solid var(--border);padding:.4rem .5rem .3rem;gap:.3rem;overflow-x:auto}
.sticker-tab{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--r-sm);font-size:1.2rem;cursor:pointer;transition:background .15s;flex-shrink:0}
.sticker-tab:hover,.sticker-tab.active{background:var(--bg-hover)}
.sticker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:.6rem;max-height:240px;overflow-y:auto}
.sticker-item{display:flex;align-items:center;justify-content:center;font-size:2.2rem;border-radius:var(--r-sm);cursor:pointer;padding:.3rem;transition:all .15s;user-select:none;line-height:1}
.sticker-item:hover{background:var(--bg-hover);transform:scale(1.2)}

/* ── Lightbox ─────────────────────────────────────────────── */
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9000;align-items:center;justify-content:center}
.lightbox.show{display:flex}
.lightbox-img{max-width:90vw;max-height:90dvh;border-radius:var(--r-md);object-fit:contain}
.lightbox-close{position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,.1);border:none;color:#fff;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer}
.lightbox-close:hover{background:rgba(255,255,255,.2)}

/* ── Toast ────────────────────────────────────────────────── */
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(10px);background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--r-md);padding:.6rem 1.2rem;font-size:.82rem;color:var(--txt-secondary);box-shadow:var(--sh-md);z-index:9999;opacity:0;transition:all .25s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{border-color:rgba(0,217,126,.3);color:var(--success)}
.toast.error{border-color:rgba(255,69,84,.3);color:var(--danger)}

/* ── Notification banner ──────────────────────────────────── */
.notif-bar{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--r-md);padding:.85rem 1rem;display:flex;align-items:center;gap:.75rem;box-shadow:var(--sh-lg);font-size:.82rem;color:var(--txt-secondary);z-index:999;animation:slideUp .3s ease;max-width:340px}
.notif-bar.hidden{display:none}
.notif-allow{background:var(--accent);color:#000;border:none;border-radius:var(--r-sm);padding:.3rem .8rem;font-weight:700;font-size:.75rem;white-space:nowrap}
.notif-allow:hover{opacity:.85}
.notif-dismiss{background:none;border:none;color:var(--txt-muted);font-size:.9rem;padding:2px}

/* ═══════════════════════════════════════════════════════════
   PROFILE PAGE
═══════════════════════════════════════════════════════════ */
.profile-body{display:flex;flex-direction:column;align-items:center;min-height:100dvh;padding:2rem 1rem;background:var(--bg-base);overflow:auto}
.profile-nav{width:100%;max-width:680px;display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
.back-btn{display:flex;align-items:center;gap:.5rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:.4rem .8rem;color:var(--txt-secondary);font-size:.82rem;transition:all .2s}
.back-btn:hover{background:var(--bg-hover);color:var(--txt-primary)}
.profile-title{font-weight:700;font-size:1.1rem}

.profile-card{width:100%;max-width:680px;display:flex;flex-direction:column;gap:1.5rem}
.profile-section{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.75rem;display:flex;flex-direction:column;gap:1.2rem}
.section-title{font-family:var(--font-mono);font-size:.72rem;color:var(--txt-muted);letter-spacing:.1em;text-transform:uppercase;padding-bottom:.6rem;border-bottom:1px solid var(--border)}

.avatar-upload-area{display:flex;align-items:center;gap:1.5rem}
.avatar-big{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.8rem;color:#fff;position:relative;cursor:pointer;overflow:hidden}
.avatar-big img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;opacity:0;transition:opacity .2s;border-radius:50%;color:#fff;font-size:.65rem;font-weight:600}
.avatar-big:hover .avatar-overlay{opacity:1}
.avatar-actions{display:flex;flex-direction:column;gap:.5rem}
.btn-sm{padding:.4rem .9rem;border:1px solid var(--border-light);background:var(--bg-surface);color:var(--txt-secondary);border-radius:var(--r-sm);font-size:.78rem;transition:all .2s}
.btn-sm:hover{background:var(--bg-hover);color:var(--txt-primary)}
.btn-sm.danger{color:var(--danger);border-color:rgba(255,69,84,.2)}
.btn-sm.danger:hover{background:rgba(255,69,84,.08)}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:500px){.form-row{grid-template-columns:1fr}}
.form-field{display:flex;flex-direction:column;gap:.38rem}
.form-field label{font-family:var(--font-mono);font-size:.68rem;color:var(--txt-secondary);letter-spacing:.06em;text-transform:uppercase}
.form-field input,.form-field textarea{background:var(--bg-input);border:1px solid var(--border-light);border-radius:var(--r-md);color:var(--txt-primary);font-size:.88rem;padding:.65rem .9rem;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit}
.form-field textarea{resize:vertical;min-height:70px}
.form-field input:focus,.form-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--txt-muted)}

.wallpaper-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.6rem}
.wall-preset{width:100%;aspect-ratio:16/9;border-radius:var(--r-sm);cursor:pointer;border:2px solid transparent;transition:all .2s;overflow:hidden}
.wall-preset:hover{transform:scale(1.03)}
.wall-preset.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}
.wall-none{background:var(--bg-surface);display:flex;align-items:center;justify-content:center;color:var(--txt-muted);font-size:.7rem;font-family:var(--font-mono)}
.wall-upload-btn{border:1px dashed var(--border-light);background:none;border-radius:var(--r-sm);padding:.8rem 1rem;color:var(--txt-muted);font-size:.78rem;display:flex;align-items:center;gap:.5rem;justify-content:center;width:100%;transition:all .2s}
.wall-upload-btn:hover{background:var(--bg-hover);color:var(--txt-secondary)}

/* ── Admin panel section ──────────────────────────────────── */
.admin-section{background:linear-gradient(135deg,rgba(255,170,0,.04),rgba(255,69,84,.04));border-color:rgba(255,170,0,.2)}
.admin-title{color:var(--warn)}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem .8rem;background:var(--bg-surface);border-radius:var(--r-sm)}
.toggle-label{font-size:.82rem;color:var(--txt-secondary)}
.toggle-switch{width:38px;height:20px;border-radius:10px;background:var(--border-light);border:none;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.toggle-switch.on{background:var(--accent)}
.toggle-switch::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left .2s}
.toggle-switch.on::after{left:20px}

/* ── User management table ────────────────────────────────── */
.users-table{width:100%;border-collapse:collapse;font-size:.82rem}
.users-table th{text-align:left;padding:.5rem .75rem;font-family:var(--font-mono);font-size:.66rem;color:var(--txt-muted);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border)}
.users-table td{padding:.55rem .75rem;border-bottom:1px solid var(--border);vertical-align:middle}
.users-table tr:last-child td{border-bottom:none}
.users-table tr:hover td{background:var(--bg-hover)}
.role-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:var(--r-full);font-family:var(--font-mono);font-size:.62rem;font-weight:600}
.role-pill.owner{background:rgba(255,215,0,.12);color:var(--gold)}
.role-pill.admin{background:rgba(255,100,0,.12);color:#ff8800}
.role-pill.user{background:rgba(0,170,255,.1);color:var(--accent)}
.role-pill.banned{background:rgba(255,69,84,.12);color:var(--danger)}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:768px){
  :root{--sidebar-w:100%}
  .chat-app{flex-direction:column}
  .sidebar{width:100%;min-width:0;height:auto;max-height:50dvh;border-right:none;border-bottom:1px solid var(--border)}
  .chat-main{height:50dvh}
  .messages-wrap{padding:.5rem .75rem}
  .chat-header{padding:0 .85rem}
  .input-row{padding:.6rem .85rem}
}
@keyframes spin{to{transform:rotate(360deg)}}
.spinning{animation:spin .7s linear infinite}