@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#080808;
  --glass:rgba(255,255,255,0.04);
  --glass2:rgba(255,255,255,0.07);
  --glass3:rgba(255,255,255,0.10);
  --border:rgba(255,255,255,0.08);
  --border2:rgba(255,255,255,0.12);
  --text:#f0f0f0;
  --text2:#999;
  --text3:#555;
  --red:#e01f1f;
  --red2:#c01818;
  --red3:#ff3333;
  --red-glow:rgba(224,31,31,0.3);
  --green:#22c55e;
  --blur:blur(20px);
  --blur2:blur(40px);
  --radius:16px;
  --radius-sm:10px;
  --radius-xs:6px;
  --font:'Inter',sans-serif;
  --transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
}

html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased}

/* Scrollbar */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}


/* AUTH */

#auth{
    position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    z-index:100;
  }
  #auth.h{display:none}
  
  /* КАРТОЧКА - выпуклое стекло */
  .auth-card{
    width:400px;
    background:rgba(255,255,255,0.01); /* Было 0.03, стало почти прозрачным */
    backdrop-filter:blur(8px); /* Было 20px, уменьшили для чёткости фона */
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:24px;
    padding:40px;
    position:relative;
    overflow:hidden;
    box-shadow:
      0 20px 60px rgba(0,0,0,0.5),
      0 0 0 1px rgba(255,255,255,0.02);
  }
  
  .auth-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);
  }
  
  .auth-glow{
    position:absolute;top:-60px;right:-60px;width:200px;height:200px;
    background:radial-gradient(circle,rgba(255,255,255,0.02) 0%,transparent 70%);
    pointer-events:none;
  }
  
  .auth-logo{
    font-size:40px;font-weight:700;
    background:linear-gradient(135deg,#fff 0%,var(--red) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    letter-spacing:-0.02em;margin-bottom:4px;
  }
  
  .auth-tagline{
    font-size:12px;color:var(--text3);letter-spacing:0.1em;
    text-transform:uppercase;margin-bottom:32px;
  }
  
  /* ПЕРЕКЛЮЧАТЕЛЬ - выпуклый */
  .auth-tabs{
    display:flex;
    background:rgba(0,0,0,0.2);
    border-radius:999px;
    padding:4px;margin-bottom:24px;
    border:1px solid rgba(255,255,255,0.05);
    box-shadow:
      0 2px 8px rgba(0,0,0,0.3),
      inset 0 1px 0 rgba(0,0,0,0.2);
  }
  .auth-tab{
    flex:1;padding:10px;background:none;border:none;
    border-radius:999px;
    color:var(--text2);font-size:13px;font-weight:500;
    cursor:pointer;transition:var(--transition);
  }
  .auth-tab.on{
    background:rgba(255,255,255,0.08);
    color:var(--text);
    box-shadow:
      0 2px 8px rgba(0,0,0,0.3),
      0 0 0 1px rgba(255,255,255,0.08);
  }
  
  /* ПОЛЯ ВВОДА - выпуклые */
  .field{margin-bottom:14px}
  .field label{
    display:block;font-size:11px;font-weight:600;
    letter-spacing:0.08em;text-transform:uppercase;
    color:var(--text3);margin-bottom:6px;
  }
  .field input{
    width:100%;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:999px;
    padding:12px 20px;font-size:14px;
    color:var(--text);outline:none;
    transition:var(--transition);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:
      0 2px 6px rgba(0,0,0,0.2),
      0 0 0 1px rgba(255,255,255,0.02);
  }
  .field input:focus{
    border-color:rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.05);
    box-shadow:
      0 4px 12px rgba(0,0,0,0.3),
      0 0 0 1px rgba(255,255,255,0.05);
  }
  .field input::placeholder{color:var(--text3)}
  
  /* КНОПКА - выпуклая */
  .auth-btn{
    width:100%;padding:14px;margin-top:8px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:999px;
    color:var(--text);font-size:14px;font-weight:600;
    cursor:pointer;transition:var(--transition);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    position:relative;overflow:hidden;
    box-shadow:
      0 4px 12px rgba(0,0,0,0.3),
      0 0 0 1px rgba(255,255,255,0.03);
  }
  .auth-btn:hover{
    background:rgba(255,255,255,0.08);
    border-color:var(--red);
    box-shadow:
      0 6px 16px rgba(0,0,0,0.4),
      0 0 0 1px var(--red),
      0 0 20px var(--red-glow);
    transform:translateY(-1px);
  }
  .auth-btn:active{
    transform:translateY(1px);
    box-shadow:
      0 2px 6px rgba(0,0,0,0.3),
      0 0 0 1px var(--red);
  }
  .auth-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
  
  .auth-err{
    font-size:12px;color:var(--red3);margin-top:12px;
    padding:10px 12px;border-left:2px solid var(--red);
    background:rgba(224,31,31,0.08);border-radius:0 var(--radius-xs) var(--radius-xs) 0;
    display:none;animation:slideIn 0.2s ease;
  }
  @keyframes slideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* APP */
#app{display:none;height:100vh;position:relative;z-index:1}
#app.on{display:flex}

/* SIDEBAR */

.sidebar {
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    border-radius: 24px;
    margin: 12px;
    height: calc(100vh - 24px);
    
    border: 1px solid rgba(255, 255, 255, 0.06);
    
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0);
    
    position: relative;
    overflow: hidden;
}
.sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    padding: 1px; /* Толщина рамки */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.151) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.2) 100%
    );
    -webkit-mask: 
        linear-gradient(#ffffff 0 0) content-box, 
        linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.055) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    border-radius: 24px 24px 0 0;
}

.btn-menu {
    background: var(--glass);
    border: 1px solid var(--border);
    color: var(--text);
    width: 36px;
    height: 36px;
    border-radius: 50%; /* Делает круг */
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-menu:hover {
    background: var(--glass2);
    transform: scale(1.05);
}

.btn-menu:active {
    transform: scale(0.95);
}

.btn-menu svg {
    color: var(--text);
}

.sidebar-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 8px 16px; /* Уменьшил нижний отступ */
    border-bottom: none; /* УБРАЛИ ПОЛОСКУ */
    position: relative;
    z-index: 2;
}

.search-wrap{
  flex:1;position:relative;
}
.search-wrap svg{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  fill:var(--text3);pointer-events:none;
}
.sidebar-search{
  width:100%;background:var(--glass);
  border:1px solid var(--border);border-radius:20px;
  padding:8px 12px 8px 32px;
  font-size:13px;color:var(--text);outline:none;
  transition:var(--transition);
}
.sidebar-search:focus{border-color:var(--border2);background:var(--glass2)}
.sidebar-search::placeholder{color:var(--text3)}

.btn-me{
  width:32px;height:32px;border-radius:50%;
  background:var(--glass2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:var(--transition);overflow:hidden;flex-shrink:0;
}
.btn-me:hover{background:var(--glass3);border-color:var(--border2)}
.btn-me img{width:100%;height:100%;object-fit:cover}
.btn-me svg{fill:var(--text2)}

.chat-list{flex:1;overflow-y:auto;padding:80px}

.chat-item{
  display:flex;align-items:center;gap:10px;
  padding:10px;border-radius:var(--radius-sm);
  cursor:pointer;transition:var(--transition);
  position:relative;margin-bottom:2px;
}
.chat-item:hover{background:var(--glass)}
.chat-item.active{background:var(--glass2)}
.chat-item.active::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:2px;background:var(--red);border-radius:1px;
}

.av{
  width:42px;height:42px;border-radius:50%;
  background:var(--glass2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;color:var(--text2);
  overflow:hidden;position:relative;
  border:1px solid var(--border);
}
.av img{width:100%;height:100%;object-fit:cover}
.av .presence{
  position:absolute;bottom:1px;right:1px;
  width:9px;height:9px;border-radius:50%;
  background:var(--green);border:2px solid var(--bg);
}
.av .presence.off{background:var(--text3)}

.ci-info{flex:1;min-width:0}
.ci-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-preview{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.ci-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.ci-time{font-size:10px;color:var(--text3)}
.ci-badge{
  background:var(--red);color:#fff;
  font-size:10px;font-weight:700;
  border-radius:10px;padding:1px 6px;min-width:16px;text-align:center;
}

.no-chats{
  padding:32px 16px;text-align:center;color:var(--text3);font-size:13px;
}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}

.empty{
  flex:1;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:16px;
}
.empty-logo{
  font-size:80px;font-weight:700;
  background:linear-gradient(135deg,rgba(255,255,255,0.1),rgba(224,31,31,0.2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;letter-spacing:-0.04em;
}
.empty-text{font-size:14px;color:var(--text3)}

/* CHAT HEADER */
.chat-hdr{
  display:flex;align-items:center;gap:12px;
  padding:14px 20px;
  background:rgba(255,255,255,0.02);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.chat-hdr-info{flex:1;min-width:0}
.chat-hdr-name{font-size:15px;font-weight:600}
.chat-hdr-status{font-size:12px;color:var(--text3);margin-top:1px}
.chat-hdr-status.on{color:var(--green)}

/* MESSAGES */
#msgs{
  flex:1;overflow-y:auto;
  padding:20px;
  display:flex;flex-direction:column;gap:1px;
}

.day-div{
  text-align:center;margin:16px 0;position:relative;
}
.day-div::before{
  content:'';position:absolute;left:0;right:0;top:50%;
  height:1px;background:var(--border);
}
.day-div span{
  background:var(--bg);padding:0 12px;
  font-size:11px;color:var(--text3);position:relative;letter-spacing:0.05em;
}

.msg-wrap{
  display:flex;align-items:flex-end;gap:8px;
  margin-bottom:1px;
  animation:msgPop 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes msgPop{
  from{opacity:0;transform:translateY(8px) scale(0.97)}
  to{opacity:1;transform:none}
}
.msg-wrap.mine{flex-direction:row-reverse}

.msg-av{
  width:26px;height:26px;border-radius:50%;
  background:var(--glass2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;color:var(--text2);
  overflow:hidden;align-self:flex-end;border:1px solid var(--border);
}
.msg-av img{width:100%;height:100%;object-fit:cover}
.msg-av.ghost{visibility:hidden}

.msg-bubble{
  max-width:460px;padding:9px 13px;
  word-break:break-word;font-size:14px;line-height:1.6;
  position:relative;
}
.msg-wrap.their .msg-bubble{
  background:var(--glass2);
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:16px 16px 16px 4px;
}
.msg-wrap.mine .msg-bubble{
  background:rgba(224,31,31,0.15);
  backdrop-filter:blur(20px);
  border:1px solid rgba(224,31,31,0.2);
  border-radius:16px 16px 4px 16px;
}
.msg-name{font-size:11px;font-weight:600;color:var(--red);margin-bottom:3px}
.msg-wrap.mine .msg-name{display:none}

.msg-footer{
  display:flex;align-items:center;gap:4px;
  justify-content:flex-end;margin-top:4px;
}
.msg-time{font-size:10px;color:rgba(255,255,255,0.3)}
.ticks{font-size:11px;color:rgba(255,255,255,0.3)}
.ticks.read{color:var(--red)}

.msg-img{
  max-width:260px;max-height:260px;
  border-radius:10px;cursor:pointer;display:block;
  margin-top:4px;transition:var(--transition);
}
.msg-img:hover{opacity:0.9;transform:scale(0.99)}

.msg-file{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;background:var(--glass);
  border:1px solid var(--border);border-radius:10px;
  margin-top:4px;text-decoration:none;color:var(--text);
  transition:var(--transition);
}
.msg-file:hover{background:var(--glass2)}
.msg-file svg{fill:var(--text2);flex-shrink:0}
.msg-file-name{font-size:12px;font-weight:500;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.reply-preview{
  background:rgba(255,255,255,0.05);
  border-left:2px solid var(--red);
  padding:4px 8px;border-radius:4px;margin-bottom:6px;
}
.rp-name{font-size:11px;color:var(--red);font-weight:500;margin-bottom:1px}
.rp-text{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}

.fwd-badge{font-size:11px;color:var(--text3);font-style:italic;margin-bottom:3px}
.msg-deleted{font-style:italic;color:var(--text3);font-size:13px}
.msg-sys{text-align:center;font-size:11px;color:var(--text3);padding:6px;letter-spacing:0.03em}

/* REPLY BAR */
#reply-bar{
  display:none;align-items:center;gap:10px;
  padding:10px 16px;
  background:var(--glass);border-top:1px solid var(--border);
}
#reply-bar.on{display:flex}
.rb-info{flex:1;min-width:0}
.rb-name{font-size:11px;color:var(--red);font-weight:600}
.rb-text{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-cancel{
  background:none;border:none;color:var(--text3);
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;transition:var(--transition);
}
.rb-cancel:hover{background:var(--glass2);color:var(--text)}

/* TYPING */
#typing{
  height:20px;padding:0 20px;
  font-size:11px;color:var(--text3);
  display:flex;align-items:center;gap:6px;font-style:italic;
}
.typing-dots{display:flex;gap:3px}
.typing-dots span{
  width:4px;height:4px;border-radius:50%;background:var(--text3);
  animation:dotBounce 1.2s infinite;
}
.typing-dots span:nth-child(2){animation-delay:0.2s}
.typing-dots span:nth-child(3){animation-delay:0.4s}
@keyframes dotBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

/* INPUT */
.inp-area{
  padding:12px 16px;
  background:rgba(255,255,255,0.02);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  display:flex;align-items:flex-end;gap:10px;
}
.inp-tools{display:flex;gap:4px}
.tool-btn{
  width:36px;height:36px;background:none;border:none;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:var(--transition);flex-shrink:0;
}
.tool-btn:hover{background:var(--glass2)}
.tool-btn svg{fill:var(--text3);transition:var(--transition)}
.tool-btn:hover svg{fill:var(--text2)}

#msg-inp{
  flex:1;background:var(--glass);
  border:1px solid var(--border);border-radius:20px;
  padding:9px 16px;font-size:14px;color:var(--text);
  outline:none;resize:none;max-height:140px;line-height:1.5;
  transition:var(--transition);font-family:var(--font);
}
#msg-inp:focus{border-color:var(--border2);background:var(--glass2)}
#msg-inp::placeholder{color:var(--text3)}

.send-btn{
  width:38px;height:38px;
  background:linear-gradient(135deg,var(--red),var(--red2));
  border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:var(--transition);flex-shrink:0;
  box-shadow:0 4px 12px var(--red-glow);
}
.send-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px var(--red-glow)}
.send-btn:disabled{opacity:0.3;cursor:not-allowed;transform:none;box-shadow:none}
.send-btn svg{fill:#fff}

/* PROFILE PANEL */
#profile-panel{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);
  backdrop-filter:blur(8px);z-index:200;
  display:flex;align-items:center;justify-content:center;
}
#profile-panel.h{display:none}
.profile-card{
  width:380px;max-height:90vh;overflow-y:auto;
  background:rgba(20,20,20,0.9);
  backdrop-filter:var(--blur);
  border:1px solid var(--border2);border-radius:24px;
  position:relative;
  box-shadow:0 32px 64px rgba(0,0,0,0.6);
}
.profile-top{
  padding:28px;text-align:center;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(224,31,31,0.05) 0%,transparent 100%);
}
.profile-av{
  width:80px;height:80px;border-radius:50%;
  background:var(--glass2);margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:600;color:var(--text2);
  overflow:hidden;cursor:pointer;position:relative;
  border:2px solid var(--border2);
  box-shadow:0 0 0 4px rgba(224,31,31,0.1);
  transition:var(--transition);
}
.profile-av:hover{box-shadow:0 0 0 4px var(--red-glow)}
.profile-av img{width:100%;height:100%;object-fit:cover}
.profile-av-ov{
  position:absolute;inset:0;background:rgba(0,0,0,0.5);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:var(--transition);border-radius:50%;
}
.profile-av:hover .profile-av-ov{opacity:1}
.profile-av-ov svg{fill:#fff}
.profile-name{font-size:20px;font-weight:600;margin-bottom:2px}
.profile-username{font-size:13px;color:var(--text3)}
.profile-body{padding:20px 24px}
.p-label{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);margin-bottom:6px;display:block}
.p-input{
  width:100%;background:var(--glass);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 12px;
  font-size:14px;color:var(--text);outline:none;
  transition:var(--transition);font-family:var(--font);
  margin-bottom:14px;
}
.p-input:focus{border-color:var(--red);background:var(--glass2)}
.p-btn{
  width:100%;padding:11px;border:none;border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;cursor:pointer;transition:var(--transition);margin-bottom:8px;
}
.p-btn.primary{background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;box-shadow:0 4px 12px var(--red-glow)}
.p-btn.primary:hover{transform:translateY(-1px)}
.p-btn.secondary{background:var(--glass2);color:var(--text);border:1px solid var(--border)}
.p-btn.secondary:hover{background:var(--glass3)}
.p-btn.danger{background:rgba(224,31,31,0.1);color:var(--red3);border:1px solid rgba(224,31,31,0.2)}
.p-btn.danger:hover{background:rgba(224,31,31,0.2)}
.p-section{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);margin:20px 0 14px;padding-top:16px;border-top:1px solid var(--border)}
.close-x{
  position:absolute;top:14px;right:14px;
  width:28px;height:28px;background:var(--glass2);
  border:1px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:var(--transition);
}
.close-x:hover{background:var(--glass3)}
.close-x svg{fill:var(--text2)}

/* SEARCH PANEL */
#search-panel{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);
  backdrop-filter:blur(8px);z-index:200;
  display:flex;align-items:flex-start;justify-content:center;padding-top:80px;
}
#search-panel.h{display:none}
.search-card{
  width:460px;max-height:70vh;
  background:rgba(20,20,20,0.95);
  backdrop-filter:var(--blur);
  border:1px solid var(--border2);border-radius:20px;
  overflow:hidden;
  box-shadow:0 32px 64px rgba(0,0,0,0.6);
  display:flex;flex-direction:column;
}
.search-top{
  padding:16px;border-bottom:1px solid var(--border);
  display:flex;gap:10px;align-items:center;
}
.search-inp{
  flex:1;background:var(--glass);border:1px solid var(--border);
  border-radius:20px;padding:9px 16px;
  font-size:14px;color:var(--text);outline:none;
  transition:var(--transition);
}
.search-inp:focus{border-color:var(--border2)}
.search-inp::placeholder{color:var(--text3)}
.search-results{overflow-y:auto;padding:8px}
.sr-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:var(--radius-sm);
  cursor:pointer;transition:var(--transition);
}
.sr-item:hover{background:var(--glass2)}
.sr-nick{font-size:14px;font-weight:500}
.sr-user{font-size:12px;color:var(--text3)}
.no-results{padding:32px;text-align:center;color:var(--text3);font-size:13px}

/* IMAGE VIEWER */
#iv{
  position:fixed;inset:0;background:rgba(0,0,0,0.92);
  backdrop-filter:blur(20px);z-index:300;
  display:flex;align-items:center;justify-content:center;
}
#iv.h{display:none}
#iv img{max-width:90vw;max-height:90vh;border-radius:12px;box-shadow:0 32px 80px rgba(0,0,0,0.8)}
#iv-close{
  position:absolute;top:20px;right:20px;
  width:40px;height:40px;background:rgba(255,255,255,0.1);
  border:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--transition);
}
#iv-close:hover{background:rgba(255,255,255,0.2)}
#iv-close svg{fill:#fff}

/* CTX MENU */
.ctx-menu{
  position:fixed;background:rgba(25,25,25,0.95);
  backdrop-filter:var(--blur);border:1px solid var(--border2);
  border-radius:12px;padding:4px;z-index:400;min-width:160px;
  box-shadow:0 16px 40px rgba(0,0,0,0.6);
  animation:ctxIn 0.1s ease;
}
@keyframes ctxIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:none}}
.ctx-item{
  padding:9px 14px;border-radius:8px;cursor:pointer;
  font-size:13px;color:var(--text);transition:var(--transition);
  display:flex;align-items:center;gap:8px;
}
.ctx-item:hover{background:var(--glass2)}
.ctx-item.red{color:var(--red3)}
.ctx-item svg{fill:currentColor;flex-shrink:0}

body {
    background-color: #1a1a1a;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 20c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 14c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5z' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3Ccircle cx='30' cy='29' r='2' fill='%23333'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 60px 60px;
    margin: 0;
    height: 100vh;
}
/* КОНТЕЙНЕР для поиска и сайдбара */
.sidebar-container {
    position: fixed;
    left: 12px;
    top: 12px;
    bottom: 12px;
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 6px; /* Было 12px, стало 6px — меньше отступ */
    z-index: 10;
}

.floating-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
    width: 100%;
}

.sidebar {
    flex: 1;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.chat-list {
    padding: 16px;
    height: 100%;
    overflow-y: auto;
}