/* ══ Reset & Vars ══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:     #0a0a0a;
  --s1:     #111;
  --s2:     #161616;
  --s3:     #1c1c1c;
  --s4:     #222;
  --bd:     #2a2a2a;
  --bd2:    #333;

  --r:  #e63012; --o:  #f05a16; --a:  #f5a623; --g:  #ffd700; --dr: #8b1a0a;
  --fire:  linear-gradient(135deg,var(--dr) 0%,var(--r) 30%,var(--o) 65%,var(--a) 100%);
  --fire2: linear-gradient(135deg,var(--r),var(--a));

  --tx:  #f0e8d8; --tx2: #9a8878; --tx3: #5a4a38;
  --gl1: 0 0 8px rgba(240,90,22,.4);
  --gl2: 0 0 20px rgba(240,90,22,.6);

  --r8:8px; --r12:12px; --r18:18px;
  --sidebar:300px; --panel:300px; --hdr:58px;
  --t:.2s ease;
}

html,body { height:100%; font-family:'Inter',sans-serif; background:var(--bg); color:var(--tx); overflow:hidden; line-height:1.5; -webkit-font-smoothing:antialiased; }

::-webkit-scrollbar{width:4px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--dr);border-radius:99px}

/* ══ Pages ══════════════════════════════════════════════════════════ */
.page { position:fixed; inset:0; display:none; }
.page.active { display:flex; }

/* ══════════════════════════════════════════════════════════════════
   AUTH
══════════════════════════════════════════════════════════════════ */
#auth-page { align-items:center; justify-content:center; background:var(--bg); }

.lava-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.lava-blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; animation:lp 9s ease-in-out infinite alternate; }
.b1{width:700px;height:700px;background:radial-gradient(circle,#e63012,transparent 70%);bottom:-300px;left:-200px;animation-duration:10s}
.b2{width:600px;height:600px;background:radial-gradient(circle,#f5a623,transparent 70%);bottom:-200px;right:-150px;animation-duration:7s;animation-delay:-3s}
.b3{width:450px;height:450px;background:radial-gradient(circle,#f05a16,transparent 70%);top:-200px;left:35%;animation-duration:13s;animation-delay:-6s}
.b4{width:400px;height:400px;background:radial-gradient(circle,#8b1a0a,transparent 70%);top:15%;right:5%;animation-duration:6s;animation-delay:-2s}
@keyframes lp{from{transform:scale(1) translate(0,0)}to{transform:scale(1.2) translate(25px,-25px)}}

.ember{position:absolute;bottom:-10px;left:var(--l);width:calc(4px * var(--s));height:calc(4px * var(--s));background:var(--a);border-radius:50%;box-shadow:0 0 8px var(--o);animation:er 5s ease-in var(--d) infinite}
@keyframes er{0%{transform:translateY(0) scale(1);opacity:1}70%{opacity:.7}100%{transform:translateY(-105vh) scale(.2) translateX(40px);opacity:0}}

.auth-card {
  position:relative; z-index:1;
  background:rgba(14,14,14,.92); backdrop-filter:blur(24px);
  border:1px solid rgba(240,90,22,.22); border-radius:var(--r18);
  padding:40px 36px; width:100%; max-width:420px;
  box-shadow:0 0 80px rgba(230,48,18,.18),0 0 160px rgba(230,48,18,.07),inset 0 1px 0 rgba(255,255,255,.04);
}

/* Logo */
.auth-logo { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:30px; }
.fire-logo-svg { width:50px; height:60px; filter:drop-shadow(0 0 10px rgba(255,160,0,.65)); animation:lf 3s ease-in-out infinite alternate; }
@keyframes lf{0%{filter:drop-shadow(0 0 8px rgba(255,100,0,.55))}50%{filter:drop-shadow(0 0 22px rgba(255,200,0,.9)) drop-shadow(0 0 40px rgba(255,80,0,.5))}100%{filter:drop-shadow(0 0 12px rgba(255,150,0,.65))}}
.logo-text { font-family:'Rajdhani',sans-serif; font-size:2.2rem; font-weight:700; background:var(--fire); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:2px; }

/* Tabs */
.auth-tabs { display:flex; background:var(--s2); border-radius:var(--r8); padding:4px; margin-bottom:24px; border:1px solid var(--bd); gap:4px; }
.tab-btn { flex:1; padding:9px; border:none; background:transparent; color:var(--tx3); font-family:'Inter',sans-serif; font-size:.88rem; font-weight:600; border-radius:6px; cursor:pointer; transition:all var(--t); }
.tab-btn.active { background:var(--fire); color:#fff; box-shadow:var(--gl1); }

/* Forms */
.auth-form { display:none; }
.auth-form.active { display:block; }

.field { margin-bottom:15px; }
.field label { display:block; font-size:.72rem; font-weight:600; color:var(--tx2); text-transform:uppercase; letter-spacing:.8px; margin-bottom:5px; }
.label-hint { text-transform:none; font-weight:400; color:var(--tx3); }
.field-hint { display:block; font-size:.7rem; color:var(--tx3); margin-top:4px; }

.input-wrap { position:relative; display:flex; align-items:center; }
.input-wrap input {
  width:100%; background:var(--s3); border:1px solid var(--bd); border-radius:var(--r8);
  padding:11px 38px 11px 36px; color:var(--tx); font-family:'Inter',sans-serif; font-size:.88rem;
  outline:none; transition:border-color var(--t), box-shadow var(--t);
}
.input-wrap input:focus { border-color:var(--o); box-shadow:var(--gl1); }
.input-icon { position:absolute; left:11px; width:15px; height:15px; color:var(--tx3); pointer-events:none; flex-shrink:0; }
.input-at-prefix .input-wrap input { padding-left:26px; }
.at-prefix .input-at { position:absolute; left:11px; color:var(--a); font-weight:700; font-size:.9rem; pointer-events:none; z-index:1; line-height:1; }
.at-prefix input { padding-left:24px !important; }

.pwd-toggle { position:absolute; right:10px; background:none; border:none; cursor:pointer; color:var(--tx3); padding:4px; display:flex; transition:color var(--t); }
.pwd-toggle:hover { color:var(--o); }
.pwd-toggle svg { width:15px; height:15px; display:block; }

.form-err { color:#ff5555; font-size:.8rem; min-height:16px; margin-bottom:8px; }
.form-ok  { color:var(--a); font-size:.8rem; min-height:16px; margin-bottom:8px; }

.fire-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px; background:var(--fire); border:none;
  border-radius:var(--r8); color:#fff; font-family:'Inter',sans-serif;
  font-size:.92rem; font-weight:700; cursor:pointer; transition:all var(--t);
  box-shadow:var(--gl1); letter-spacing:.3px;
}
.fire-btn svg { width:16px; height:16px; flex-shrink:0; }
.fire-btn:hover { box-shadow:var(--gl2); transform:translateY(-1px); }
.fire-btn:active { transform:translateY(0); }
.fire-btn:disabled { opacity:.45; cursor:not-allowed; transform:none !important; }
.fire-btn.sm { padding:10px; font-size:.85rem; }

.ghost-btn {
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:10px; background:transparent; border:1px solid var(--bd2);
  border-radius:var(--r8); color:var(--tx2); font-family:'Inter',sans-serif;
  font-size:.85rem; font-weight:500; cursor:pointer; transition:all var(--t);
}
.ghost-btn:hover { border-color:var(--o); color:var(--o); }
.ghost-btn.sm { padding:10px; font-size:.85rem; }

/* ══════════════════════════════════════════════════════════════════
   PROFILE PANEL — Telegram-style
══════════════════════════════════════════════════════════════════ */
.profile-panel {
  position:fixed; top:0; left:0; width:var(--panel); height:100vh; z-index:200;
  background:var(--s1); display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:4px 0 40px rgba(0,0,0,.7);
}
.profile-panel.open { transform:translateX(0); }
.panel-backdrop { position:fixed; inset:0; z-index:199; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); }
.panel-backdrop.hidden { display:none; }

/* Panel header (gradient + avatar) */
.pp-header {
  position:relative; flex-shrink:0;
  background: linear-gradient(160deg, #5a0c04 0%, #a31408 35%, #d4440c 70%, #e86a18 100%);
  padding: 0 0 20px 0;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
/* subtle texture */
.pp-header::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 1px,transparent 0,transparent 50%);
  background-size:6px 6px;
  pointer-events:none;
}

.pp-close-btn {
  position:absolute; top:10px; right:10px; z-index:2;
  width:32px; height:32px; border-radius:50%; border:none;
  background:rgba(0,0,0,.35); cursor:pointer; color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--t);
}
.pp-close-btn:hover { background:rgba(0,0,0,.6); }
.pp-close-btn svg { width:14px; height:14px; }

/* Avatar area in header */
.pp-avatar-area {
  position:relative; z-index:1;
  margin-bottom: 12px;
}
.pp-avatar-ring {
  position:relative; width:72px; height:72px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.3);
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.pp-avatar-img {
  width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
}
/* Camera button — bottom-right of avatar */
.pp-cam-btn {
  position:absolute; bottom:-2px; right:-2px;
  width:26px; height:26px; border-radius:50%;
  background:var(--fire2); border:2px solid var(--s1);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform var(--t), box-shadow var(--t);
  box-shadow:var(--gl1);
}
.pp-cam-btn:hover { transform:scale(1.12); box-shadow:var(--gl2); }
.pp-cam-btn svg { width:12px; height:12px; color:#fff; }

.pp-header-name {
  font-size:1.05rem; font-weight:700; color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
  z-index:1; text-align:center; padding:0 16px;
}
.pp-header-username {
  font-size:.78rem; color:rgba(255,255,255,.65);
  z-index:1; text-align:center;
  margin-top:2px;
}

/* Panel body */
.pp-body { flex:1; overflow-y:auto; padding:12px 0; }

.pp-info-card { margin:0 12px 8px; background:var(--s3); border-radius:var(--r12); overflow:hidden; border:1px solid var(--bd); }
.pp-info-row { display:flex; align-items:center; gap:12px; padding:12px 14px; }
.pp-info-icon { width:32px; height:32px; border-radius:50%; background:rgba(240,90,22,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pp-info-icon svg { width:14px; height:14px; color:var(--o); }
.pp-info-text { flex:1; min-width:0; }
.pp-info-label { display:block; font-size:.68rem; color:var(--tx3); text-transform:uppercase; letter-spacing:.6px; }
.pp-info-value { display:block; font-size:.86rem; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.pp-info-divider { height:1px; background:var(--bd); margin:0 14px; }

.pp-edit-card { margin:0 12px 8px; background:var(--s3); border-radius:var(--r12); border:1px solid var(--bd); padding:14px; }
.pp-edit-title { font-size:.8rem; font-weight:700; color:var(--o); text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.pp-edit-card .field { margin-bottom:12px; }
.pp-edit-card label { font-size:.7rem; color:var(--tx3); text-transform:uppercase; letter-spacing:.6px; margin-bottom:4px; display:block; }
.pp-edit-card .input-wrap input { padding:9px 12px; font-size:.85rem; background:var(--s4); }
.pp-edit-btns { display:flex; flex-direction:column; gap:6px; margin-top:6px; }

.pp-nav { padding:4px 0; }
.pp-nav-item {
  display:flex; align-items:center; gap:14px; padding:13px 16px;
  background:none; border:none; border-left:3px solid transparent;
  color:var(--tx); font-family:'Inter',sans-serif; font-size:.88rem; font-weight:500;
  cursor:pointer; transition:all var(--t); text-align:left; width:100%;
}
.pp-nav-item svg { width:17px; height:17px; flex-shrink:0; color:var(--tx2); }
.pp-nav-item:hover { background:var(--s3); border-left-color:var(--o); color:var(--o); }
.pp-nav-item:hover svg { color:var(--o); }
.pp-nav-item.danger:hover { border-left-color:var(--r); color:var(--r); }
.pp-nav-item.danger:hover svg { color:var(--r); }

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════════ */
.sidebar { width:var(--sidebar); flex-shrink:0; background:var(--s1); border-right:1px solid var(--bd); display:flex; flex-direction:column; height:100vh; }

.sidebar-header {
  height:var(--hdr); padding:0 10px; display:flex; align-items:center; gap:6px;
  border-bottom:1px solid var(--bd); background:var(--s2); flex-shrink:0;
}
.sidebar-logo { display:flex; align-items:center; gap:7px; flex:1; padding:0 2px; }
.sidebar-logo span { font-family:'Rajdhani',sans-serif; font-size:1.25rem; font-weight:700; background:var(--fire2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:1px; }
.sidebar-flame { width:20px; height:24px; filter:drop-shadow(0 0 5px rgba(255,150,0,.55)); animation:lf 3s ease-in-out infinite alternate; }

.icon-btn { width:34px; height:34px; background:none; border:none; border-radius:8px; color:var(--tx2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--t); flex-shrink:0; }
.icon-btn svg { width:19px; height:19px; }
.icon-btn:hover { background:var(--s4); color:var(--o); }

.search-bar { padding:8px 10px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--bd); background:var(--s1); flex-shrink:0; }
.search-bar svg { width:14px; height:14px; color:var(--tx3); flex-shrink:0; }
.search-bar input { flex:1; background:none; border:none; outline:none; color:var(--tx); font-family:'Inter',sans-serif; font-size:.85rem; }
.search-bar input::placeholder { color:var(--tx3); }

.contacts-label { padding:10px 14px 4px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--tx3); flex-shrink:0; }

.users-list { flex:1; overflow-y:auto; list-style:none; padding:2px 6px 8px; }

.user-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r8); cursor:pointer; transition:background var(--t); position:relative; }
.user-item:hover { background:var(--s3); }
.user-item.active { background:rgba(240,90,22,.1); }
.user-item.active .ui-name { color:var(--a); }

.ui-av { position:relative; flex-shrink:0; }
.ui-dot { position:absolute; bottom:1px; right:1px; width:10px; height:10px; background:#22c55e; border-radius:50%; border:2px solid var(--s1); }
.ui-info { flex:1; min-width:0; }
.ui-name { display:block; font-size:.86rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-sub  { display:block; font-size:.73rem; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.unread-badge { background:var(--fire); color:#fff; font-size:.66rem; font-weight:700; padding:2px 6px; border-radius:99px; min-width:18px; text-align:center; box-shadow:var(--gl1); flex-shrink:0; }

.no-contacts { display:flex; flex-direction:column; align-items:center; gap:6px; padding:30px 16px; color:var(--tx3); text-align:center; list-style:none; }
.no-contacts svg { width:40px; height:40px; opacity:.3; }
.no-contacts span { font-size:.9rem; }
.no-contacts small { font-size:.78rem; opacity:.7; }
.no-contacts b { color:var(--o); }

/* Avatar */
.avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; background:var(--s3); border:2px solid var(--bd); display:block; flex-shrink:0; }

/* ══════════════════════════════════════════════════════════════════
   CHAT AREA
══════════════════════════════════════════════════════════════════ */
.chat-area { flex:1; display:flex; flex-direction:column; height:100vh; overflow:hidden; position:relative; background:var(--bg); background-image:radial-gradient(circle at 15% 85%,rgba(139,26,10,.05) 0%,transparent 50%),radial-gradient(circle at 85% 15%,rgba(240,90,22,.03) 0%,transparent 50%); }

.empty-state { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; pointer-events:none; }
.empty-flame { width:72px; height:88px; filter:drop-shadow(0 0 16px rgba(255,150,0,.35)); animation:lf 3s ease-in-out infinite alternate; }
.empty-title { font-family:'Rajdhani',sans-serif; font-size:1.5rem; font-weight:700; background:var(--fire2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.empty-sub { font-size:.84rem; color:var(--tx3); }

.conversation { display:flex; flex-direction:column; height:100%; }
.conversation.hidden { display:none; }

.chat-header { height:var(--hdr); padding:0 14px; display:flex; align-items:center; gap:10px; background:var(--s2); border-bottom:1px solid var(--bd); flex-shrink:0; }
.chat-av-wrap { position:relative; }
.online-ring { position:absolute; bottom:0; right:0; width:11px; height:11px; background:#22c55e; border-radius:50%; border:2px solid var(--s2); }
.chat-user-info { flex:1; }
.chat-user-info > span:first-child { display:block; font-weight:700; font-size:.92rem; }
.chat-substatus { font-size:.73rem; color:var(--tx3); display:block; }
.chat-substatus.online { color:#22c55e; }
.chat-substatus.typing { color:var(--a); font-style:italic; }
.back-btn { display:none; }

/* Messages */
.messages-container { flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; }
#messages-list { display:flex; flex-direction:column; gap:3px; flex:1; }

.msg { display:flex; flex-direction:column; max-width:66%; animation:mi .17s ease; }
@keyframes mi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.msg.sent { align-self:flex-end; align-items:flex-end; }
.msg.recv { align-self:flex-start; align-items:flex-start; }

.msg-bubble { padding:8px 12px; border-radius:16px; font-size:.87rem; line-height:1.55; word-break:break-word; max-width:100%; }
.msg.sent .msg-bubble { background:var(--fire); color:#fff; border-bottom-right-radius:3px; box-shadow:var(--gl1); }
.msg.recv .msg-bubble { background:var(--s3); color:var(--tx); border-bottom-left-radius:3px; border:1px solid var(--bd); }

.msg-time { font-size:.63rem; color:var(--tx3); margin-top:2px; padding:0 3px; display:flex; align-items:center; gap:3px; }
.msg-tick { font-size:.72rem; }
.msg-tick.read { color:var(--a); }

.date-sep { text-align:center; font-size:.68rem; color:var(--tx3); margin:10px 0; display:flex; align-items:center; gap:10px; }
.date-sep::before,.date-sep::after { content:''; flex:1; height:1px; background:var(--bd); }

/* Typing bubble */
.typing-bubble { display:flex; align-items:center; gap:5px; padding:10px 14px; background:var(--s3); border-radius:16px; border-bottom-left-radius:3px; border:1px solid var(--bd); width:fit-content; margin-top:4px; align-self:flex-start; }
.typing-bubble span { width:7px; height:7px; background:var(--o); border-radius:50%; animation:tb 1.2s ease-in-out infinite; }
.typing-bubble span:nth-child(2){animation-delay:.2s}.typing-bubble span:nth-child(3){animation-delay:.4s}
@keyframes tb{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-7px)}}

/* Message attachments */
.msg-image { max-width:240px; max-height:180px; border-radius:10px; display:block; cursor:pointer; margin-bottom:4px; object-fit:cover; width:100%; transition:opacity var(--t); }
.msg-image:hover { opacity:.9; }
.msg-video { max-width:240px; border-radius:10px; display:block; width:100%; margin-bottom:4px; }
.msg-audio { width:200px; accent-color:var(--o); margin-bottom:4px; }
.msg-file { display:flex; align-items:center; gap:10px; padding:10px; background:rgba(0,0,0,.2); border-radius:10px; margin-bottom:4px; text-decoration:none; color:inherit; min-width:170px; }
.msg-file svg { width:26px; height:26px; color:var(--a); flex-shrink:0; }
.msg-file-name { display:block; font-size:.8rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-file-size { display:block; font-size:.68rem; color:rgba(255,255,255,.45); }

/* Attach preview */
.attach-preview { padding:6px 14px; background:var(--s2); border-top:1px solid var(--bd); flex-shrink:0; }
.attach-inner { display:flex; align-items:center; gap:10px; background:var(--s3); border-radius:var(--r8); padding:8px 10px; border:1px solid var(--bd); }
.attach-img-prev { width:38px; height:38px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.attach-file-ico { width:30px; height:30px; color:var(--a); flex-shrink:0; }
.attach-meta { flex:1; min-width:0; }
.attach-fname { display:block; font-size:.78rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.attach-fsize { display:block; font-size:.7rem; color:var(--tx3); }
.attach-cancel-btn { background:none; border:none; cursor:pointer; color:var(--tx3); display:flex; padding:4px; border-radius:50%; transition:all var(--t); flex-shrink:0; }
.attach-cancel-btn:hover { color:var(--r); background:rgba(230,48,18,.1); }
.attach-cancel-btn svg { width:14px; height:14px; }

/* Message input row */
.msg-input-row { padding:8px 12px; display:flex; align-items:flex-end; gap:7px; background:var(--s2); border-top:1px solid var(--bd); flex-shrink:0; }
.attach-trigger { width:36px; height:36px; background:none; border:none; border-radius:50%; color:var(--tx2); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all var(--t); }
.attach-trigger:hover { color:var(--o); background:rgba(240,90,22,.1); }
.attach-trigger svg { width:19px; height:19px; }
#message-input { flex:1; background:var(--s3); border:1px solid var(--bd); border-radius:20px; padding:9px 14px; color:var(--tx); font-family:'Inter',sans-serif; font-size:.88rem; resize:none; outline:none; max-height:120px; line-height:1.45; transition:border-color var(--t),box-shadow var(--t); }
#message-input:focus { border-color:var(--o); box-shadow:var(--gl1); }
.send-btn { width:36px; height:36px; background:var(--fire); border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--t); flex-shrink:0; box-shadow:var(--gl1); }
.send-btn svg { width:15px; height:15px; color:#fff; transform:translateX(1px); }
.send-btn:hover { box-shadow:var(--gl2); transform:scale(1.06); }
.send-btn:active { transform:scale(.96); }

/* ══════════════════════════════════════════════════════════════════
   NEW CHAT MODAL
══════════════════════════════════════════════════════════════════ */
.modal { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; }
.modal.hidden { display:none; }
.modal-bd { position:absolute; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(5px); }
.modal-box { position:relative; z-index:1; background:var(--s2); border:1px solid rgba(240,90,22,.25); border-radius:var(--r18); width:100%; max-width:380px; overflow:hidden; box-shadow:0 0 60px rgba(230,48,18,.18); animation:mopen .22s ease; }
@keyframes mopen{from{opacity:0;transform:scale(.93) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}

.modal-hdr { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; border-bottom:1px solid var(--bd); }
.modal-hdr span { font-family:'Rajdhani',sans-serif; font-size:1.15rem; font-weight:700; background:var(--fire2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.modal-close-btn { background:none; border:none; cursor:pointer; color:var(--tx3); padding:4px; border-radius:6px; display:flex; transition:color var(--t); }
.modal-close-btn:hover { color:var(--r); }
.modal-close-btn svg { width:15px; height:15px; }

.modal-search { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--bd); }
.modal-search svg { width:14px; height:14px; color:var(--tx3); flex-shrink:0; }
.modal-search input { flex:1; background:none; border:none; outline:none; color:var(--tx); font-family:'Inter',sans-serif; font-size:.88rem; }
.modal-search input::placeholder { color:var(--tx3); }

.nc-results { list-style:none; max-height:300px; overflow-y:auto; padding:6px; }
.nc-hint { text-align:center; color:var(--tx3); font-size:.82rem; padding:20px; }
.nc-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r8); cursor:pointer; transition:background var(--t); }
.nc-item:hover { background:var(--s3); }
.nc-item .ui-info { flex:1; min-width:0; }
.nc-item .ui-name { display:block; font-size:.86rem; font-weight:600; }
.nc-item .ui-sub  { display:block; font-size:.73rem; color:var(--tx3); }

/* ══════════════════════════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════════════════════════ */
.lightbox { position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; }
.lb-bd { position:absolute; inset:0; background:rgba(0,0,0,.93); }
.lightbox img { position:relative; z-index:1; max-width:90vw; max-height:90vh; border-radius:var(--r12); box-shadow:0 0 80px rgba(0,0,0,.8); }
.lb-close { position:absolute; top:14px; right:14px; z-index:2; background:rgba(255,255,255,.1); border:none; border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; transition:background var(--t); }
.lb-close:hover { background:rgba(255,255,255,.2); }
.lb-close svg { width:16px; height:16px; }

/* ══ Utils ══════════════════════════════════════════════════════════ */
.hidden { display:none !important; }
.hidden-file { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ══ Responsive ══════════════════════════════════════════════════ */
@media (max-width:640px) {
  :root { --sidebar:100vw; }
  .back-btn { display:flex !important; }
}

/* ===== FireChat Enhancements ===== */
.fc-role-chip{
  display:inline-flex;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  background:rgba(255,115,0,.16);
  color:#ff9c33;
  border:1px solid rgba(255,115,0,.25);
  vertical-align:middle;
}
.chat-action-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.fc-action-btn[disabled]{opacity:.45;cursor:not-allowed;}
.msg-report-btn{
  margin-bottom:8px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#e8e8e8;
  font-size:11px;
  cursor:pointer;
}
.msg-report-btn:hover{background:rgba(255,120,0,.14);border-color:rgba(255,120,0,.3);}
.fc-modal-box{max-width:520px;width:min(92vw,520px);}
.fc-modal-body{padding:18px;display:flex;flex-direction:column;gap:14px;}
.fc-select-wrap,.fc-textarea-wrap{padding:0!important;}
.fc-select, #report-details, #admin-note{
  width:100%;
  background:transparent;
  border:none;
  color:inherit;
  padding:14px 16px;
  outline:none;
  font:inherit;
  resize:vertical;
}
.fc-report-preview{
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#f0f0f0;
}
.fc-report-preview-note{margin-top:8px;color:rgba(255,255,255,.7);font-size:13px;line-height:1.45;}
.fc-toast-wrap{
  position:fixed;
  top:18px;
  right:18px;
  z-index:1200;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fc-toast{
  min-width:220px;
  max-width:360px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(18,18,18,.96);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 48px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(-6px);
  transition:.2s ease;
}
.fc-toast.show{opacity:1;transform:translateY(0);}
.fc-toast.success{border-color:rgba(68,255,145,.25);}
.fc-toast.error{border-color:rgba(255,101,101,.3);}
.fc-admin-shell{
  position:relative;
  z-index:1001;
  width:min(96vw,1280px);
  height:min(90vh,820px);
  margin:5vh auto;
  border-radius:28px;
  overflow:hidden;
  background:#121212;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 36px 90px rgba(0,0,0,.45);
  display:grid;
  grid-template-columns:360px 1fr;
}
.fc-admin-side{
  border-right:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  display:flex;
  flex-direction:column;
  min-height:0;
}
.fc-admin-side-head{
  padding:18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.fc-admin-title{font-size:20px;font-weight:800;line-height:1.2;}
.fc-admin-sub{font-size:13px;color:rgba(255,255,255,.64);margin-top:4px;line-height:1.45;}
.fc-admin-list{list-style:none;margin:0;padding:12px;overflow:auto;display:flex;flex-direction:column;gap:10px;}
.fc-admin-item,.fc-admin-empty-item{
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid transparent;
  cursor:pointer;
}
.fc-admin-item:hover,.fc-admin-item.active{border-color:rgba(255,122,0,.28);background:rgba(255,122,0,.08);}
.fc-admin-item-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:12px;color:rgba(255,255,255,.62);}
.fc-admin-status{padding:3px 8px;border-radius:999px;text-transform:capitalize;background:rgba(255,255,255,.06);}
.fc-admin-status.open{background:rgba(255,137,0,.12);color:#ffaf57;}
.fc-admin-status.reviewing{background:rgba(91,141,255,.14);color:#95bcff;}
.fc-admin-status.resolved{background:rgba(67,255,143,.14);color:#82ffb8;}
.fc-admin-status.rejected{background:rgba(255,103,103,.14);color:#ff8f8f;}
.fc-admin-item-name{font-weight:700;margin-bottom:4px;}
.fc-admin-item-sub{font-size:13px;color:rgba(255,255,255,.72);margin-bottom:6px;}
.fc-admin-item-preview{font-size:13px;color:rgba(255,255,255,.54);line-height:1.4;}
.fc-admin-detail{padding:24px;overflow:auto;background:#101010;}
.fc-admin-empty{height:100%;display:grid;place-items:center;color:rgba(255,255,255,.56);text-align:center;}
.fc-admin-detail-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px;}
.fc-admin-meta{margin-top:6px;color:rgba(255,255,255,.66);font-size:13px;line-height:1.45;}
.fc-admin-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.fc-status-btn.active{border-color:rgba(255,122,0,.38)!important;background:rgba(255,122,0,.12)!important;}
.fc-admin-grid{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:16px;align-items:start;}
.fc-admin-card{
  border-radius:22px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  padding:18px;
}
.fc-admin-card-title{font-size:15px;font-weight:800;margin-bottom:12px;}
.fc-admin-kv{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:rgba(255,255,255,.72);padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.fc-admin-note{margin:14px 0;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);line-height:1.5;color:#f2f2f2;min-height:46px;}
.fc-admin-transcript{display:flex;flex-direction:column;gap:10px;max-height:62vh;overflow:auto;padding-right:4px;}
.fc-chat-line{
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.05);
}
.fc-chat-line.flagged{border-color:rgba(255,122,0,.35);background:rgba(255,122,0,.09);}
.fc-chat-line-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:rgba(255,255,255,.62);margin-bottom:6px;}
.fc-chat-line-body{line-height:1.5;color:#f3f3f3;white-space:pre-wrap;word-break:break-word;}
.fc-call-overlay{
  position:fixed;
  inset:0;
  z-index:1100;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
  display:grid;
  place-items:center;
}
.fc-call-card{
  width:min(92vw,820px);
  border-radius:30px;
  padding:24px;
  background:linear-gradient(180deg,#171717,#0f0f0f);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 90px rgba(0,0,0,.45);
}
.fc-call-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:18px;}
.fc-call-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#ff9c33;font-weight:800;}
.fc-call-status{font-size:14px;color:rgba(255,255,255,.7);}
.fc-call-peer{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.fc-call-peer-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.1);}
.fc-call-peer-name{font-size:24px;font-weight:800;line-height:1.15;}
.fc-call-peer-sub{margin-top:4px;color:rgba(255,255,255,.68);}
.fc-call-videos{display:grid;grid-template-columns:1fr 220px;gap:14px;margin-bottom:18px;}
.fc-call-videos.audio-only{grid-template-columns:1fr;}
.fc-remote-video,.fc-local-video{
  width:100%;
  min-height:240px;
  max-height:420px;
  border-radius:22px;
  background:#070707;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.08);
}
.fc-call-videos.audio-only .fc-remote-video{display:none;}
.fc-call-videos.audio-only .fc-local-video{max-width:260px;justify-self:start;min-height:150px;max-height:180px;}
.fc-call-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;}
.fc-call-btn{
  border:none;
  border-radius:999px;
  padding:12px 18px;
  font-weight:700;
  cursor:pointer;
  background:#1f1f1f;
  color:#fff;
}
.fc-call-btn.accept{background:#1e8f4d;}
.fc-call-btn.decline,.fc-call-btn.danger{background:#b33a3a;}
.fc-call-btn.secondary{background:#2a2a2a;}
@media (max-width: 980px){
  .fc-admin-shell{grid-template-columns:1fr;height:min(94vh,920px);}
  .fc-admin-side{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);max-height:280px;}
  .fc-admin-grid{grid-template-columns:1fr;}
}
@media (max-width: 780px){
  .chat-action-wrap{gap:6px;}
  .fc-call-card{padding:18px;}
  .fc-call-videos{grid-template-columns:1fr;}
  .fc-remote-video,.fc-local-video{min-height:180px;max-height:260px;}
  .fc-toast-wrap{left:12px;right:12px;top:12px;}
  .fc-toast{max-width:none;}
}

/* ══════════════════════════════════════════════════════════════════
   PROFILE VIEW + SECURITY CENTER
══════════════════════════════════════════════════════════════════ */
.fc-clickable-profile { cursor:pointer; }
.fc-clickable-profile:hover { opacity:.94; }

.fc-profile-modal-shell,
.fc-security-shell {
  position:relative;
  z-index:120;
  width:min(680px, calc(100vw - 28px));
  max-height:min(88vh, 900px);
  overflow:hidden;
  border-radius:20px;
  border:1px solid var(--bd);
  background:linear-gradient(180deg, rgba(22,22,22,.98), rgba(14,14,14,.98));
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}

.fc-profile-modal-body,
.fc-security-body {
  padding:18px;
  overflow-y:auto;
  max-height:calc(88vh - 60px);
}

.fc-profile-card,
.fc-security-stack {
  display:flex;
  flex-direction:column;
  gap:14px;
}

.fc-profile-hero {
  display:flex;
  gap:16px;
  align-items:center;
  padding:16px;
  border-radius:18px;
  background:var(--s3);
  border:1px solid var(--bd);
}

.fc-profile-avatar {
  width:88px;
  height:88px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid rgba(255,255,255,.15);
  flex-shrink:0;
}

.fc-profile-name { font-size:1.15rem; font-weight:700; display:flex; align-items:center; gap:8px; }
.fc-profile-username { font-size:.85rem; color:var(--tx3); margin-top:2px; }
.fc-profile-status { font-size:.9rem; color:var(--tx2); margin-top:8px; }

.fc-profile-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.fc-profile-stat,
.fc-security-card {
  background:var(--s3);
  border:1px solid var(--bd);
  border-radius:16px;
  padding:14px;
}

.fc-profile-stat span,
.fc-profile-meta-row span,
.fc-security-meta { color:var(--tx3); font-size:.75rem; display:block; }
.fc-profile-stat b,
.fc-profile-meta-row b { display:block; margin-top:6px; font-size:.92rem; color:var(--tx); }

.fc-profile-meta-list {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border-radius:16px;
  background:var(--s3);
  border:1px solid var(--bd);
}

.fc-profile-meta-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.fc-profile-meta-row b { text-align:right; }
.fc-profile-actions { display:flex; justify-content:flex-end; }

.fc-security-card-title {
  font-size:.95rem;
  font-weight:700;
  color:#fff;
  margin-bottom:10px;
}

.fc-security-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.fc-security-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.74rem;
  font-weight:700;
  border:1px solid var(--bd);
}
.fc-security-badge.enabled { color:#86efac; background:rgba(22,163,74,.12); border-color:rgba(34,197,94,.35); }
.fc-security-badge.disabled { color:#fca5a5; background:rgba(220,38,38,.12); border-color:rgba(239,68,68,.35); }
.fc-security-badge.neutral { color:var(--tx2); background:rgba(255,255,255,.04); }

.fc-security-note {
  color:var(--tx2);
  font-size:.86rem;
  line-height:1.6;
  margin-bottom:12px;
}

.fc-qr-wrap {
  display:flex;
  justify-content:center;
  padding:10px;
  background:#fff;
  border-radius:16px;
  margin-bottom:12px;
}
.fc-qr-img {
  width:min(240px, 100%);
  aspect-ratio:1;
  object-fit:contain;
}
.fc-manual-key {
  font-size:.82rem;
  line-height:1.55;
  color:var(--tx2);
  word-break:break-all;
  margin-bottom:12px;
}
.fc-security-row-actions { display:flex; gap:10px; flex-wrap:wrap; }

@media (max-width: 720px) {
  .fc-profile-grid { grid-template-columns:1fr; }
  .fc-profile-hero { align-items:flex-start; }
  .fc-profile-meta-row { flex-direction:column; }
  .fc-profile-meta-row b { text-align:left; }
}


.attach-audio-prev{width:min(260px,100%);border-radius:12px;display:block;}
.attach-trigger.recording,
#voice-record-btn.recording{background:rgba(230,48,18,.18);border-color:rgba(230,48,18,.45);color:#ff8d7a;box-shadow:0 0 0 1px rgba(230,48,18,.15) inset;}
.recording-pill{display:flex;align-items:center;gap:8px;padding:0 10px;height:42px;border-radius:999px;background:rgba(230,48,18,.12);border:1px solid rgba(230,48,18,.35);color:#ffb4a8;font-size:.82rem;font-weight:700;flex-shrink:0;}
.recording-dot{width:10px;height:10px;border-radius:50%;background:#ff5a4a;box-shadow:0 0 0 0 rgba(255,90,74,.7);animation:recpulse 1.3s infinite;}
@keyframes recpulse{0%{box-shadow:0 0 0 0 rgba(255,90,74,.65);}70%{box-shadow:0 0 0 10px rgba(255,90,74,0);}100%{box-shadow:0 0 0 0 rgba(255,90,74,0);}}
.msg.recv{display:flex;align-items:flex-end;gap:10px;}
.msg.recv .msg-side-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;cursor:pointer;border:1px solid rgba(255,255,255,.08);}
.msg.recv .msg-main{display:flex;flex-direction:column;align-items:flex-start;max-width:min(82%,420px);}
.msg.recv .msg-author{font-size:.72rem;color:var(--tx3);margin:0 0 4px 8px;cursor:pointer;}
.msg.recv .msg-bubble{max-width:100%;}
.msg.sent .msg-main{display:flex;flex-direction:column;align-items:flex-end;max-width:min(82%,420px);}
.msg.sent .msg-bubble{max-width:100%;}
.msg.sent .msg-time,.msg.recv .msg-time{margin-top:4px;}
.fc-login-2fa-note{margin-top:4px;}