/* ===== Hacker Terminal Style ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Courier New','Consolas','Monaco',monospace;
  background:#0a0a0a;color:#e0e0e0;
  -webkit-font-smoothing:none;
}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:#0a0a0a}
::-webkit-scrollbar-thumb{background:#2a2a2a}
.app{display:flex;flex-direction:column;height:100vh}

/* Topbar */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 14px;background:#0d0d0d;
  border-bottom:1px solid #2a2a2a;
  flex-shrink:0;
}
.topbar-left{display:flex;align-items:center;gap:10px}
.topbar-brand{display:flex;align-items:center;gap:6px}
.logo{color:#fff;font-size:16px}
.brand-text{color:#fff;font-size:13px;font-weight:bold;text-transform:uppercase;letter-spacing:1px}
.topbar-actions{display:flex;align-items:center;gap:12px}
.conn-status{font-size:11px;color:#666}
.conn-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#333;margin-right:4px}
.conn-dot.on{background:#fff;box-shadow:0 0 4px #fff}
.topbar-btn{background:none;border:1px solid #2a2a2a;color:#ccc;padding:5px 8px;cursor:pointer;font-size:12px}
.topbar-btn:hover{background:#1a1a1a;color:#fff}
.menu-toggle{background:none;border:none;color:#ccc;font-size:15px;cursor:pointer;display:none}

/* Main */
.main{flex:1;display:flex;overflow:hidden;position:relative}
.sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:50}
.sidebar-overlay.show{display:block}

/* Sidebar */
.sidebar{
  width:240px;background:#0d0d0d;border-right:1px solid #2a2a2a;
  display:flex;flex-direction:column;flex-shrink:0;
}
.sidebar-search{padding:8px;border-bottom:1px solid #2a2a2a}
.search-wrap{display:flex;align-items:center;gap:6px}
.search-wrap .icon{color:#555;font-size:12px}
.search-wrap input{
  flex:1;background:#0a0a0a;border:1px solid #2a2a2a;color:#e0e0e0;
  padding:4px 8px;font-size:12px;font-family:inherit;
}
.search-wrap input:focus{outline:none;border-color:#fff}
.sidebar-tabs{display:flex;border-bottom:1px solid #2a2a2a}
.sidebar-tab{
  flex:1;text-align:center;padding:6px;font-size:12px;color:#666;
  cursor:pointer;border-bottom:2px solid transparent;
}
.sidebar-tab.active{color:#fff;border-bottom-color:#fff}
.badge{background:#fff;color:#000;padding:1px 5px;font-size:10px;margin-left:2px}
.badge.gray{background:#333;color:#999}

/* Conv List */
.conv-list{flex:1;overflow-y:auto}
.conv-empty{text-align:center;padding:30px 10px;color:#444}
.conv-empty i{font-size:24px;margin-bottom:8px}
.conv-empty p{font-size:12px;margin-top:4px}
.conv-item{
  display:flex;gap:8px;padding:10px 12px;cursor:pointer;
  border-bottom:1px solid #111;
}
.conv-item:hover{background:#141414}
.conv-item.active{background:#1a1a1a;border-left:2px solid #fff}
.conv-item.blocked{opacity:.4}
.conv-item.blocked .conv-name{text-decoration:line-through}
.conv-avatar{
  width:32px;height:32px;border-radius:4px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:bold;color:#000;overflow:hidden;
}
.conv-avatar img{width:100%;height:100%;object-fit:cover}
.conv-body{flex:1;min-width:0}
.conv-row1{display:flex;justify-content:space-between;align-items:center}
.conv-name{font-size:12px;color:#e0e0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-time{font-size:10px;color:#444;flex-shrink:0;margin-left:6px}
.conv-row2{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
.conv-preview{font-size:11px;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-unread{background:#fff;color:#000;font-size:10px;padding:1px 5px;flex-shrink:0;margin-left:6px}
.conv-tags{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap}
.user-tag{font-size:9px;padding:1px 5px;border:1px solid #5a1a1a;color:#ff4444}
.user-tag:hover{border-color:#ff4444;color:#ff6666}
.blocked-icon{color:#ff4444;font-size:10px;margin-left:3px}

/* Chat */
.chat{flex:1;display:flex;flex-direction:column;background:#0a0a0a}
.chat-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 14px;border-bottom:1px solid #2a2a2a;flex-shrink:0;
}
.chat-user{display:flex;align-items:center;gap:8px}
.back-btn{display:none;background:none;border:none;color:#ccc;font-size:14px;cursor:pointer}
.chat-avatar{
  width:30px;height:30px;border-radius:4px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:bold;color:#000;overflow:hidden;
}
.chat-avatar img{width:100%;height:100%;object-fit:cover}
.chat-user-info h3{font-size:13px;color:#fff}
.chat-user-info p{font-size:10px;color:#444}
.chat-tools{display:flex;gap:4px}
.chat-tools button{
  background:none;border:1px solid #2a2a2a;color:#ccc;
  padding:4px 7px;cursor:pointer;font-size:12px;
}
.chat-tools button:hover{background:#1a1a1a;color:#fff}
.chat-tags-row{display:flex;gap:4px;padding:4px 14px;border-bottom:1px solid #111;flex-wrap:wrap}
.block-btn:hover{border-color:#ff4444;color:#ff4444}
.unblock-btn{border-color:#ff4444!important;color:#ff4444!important}
.tag-btn:hover{border-color:#ff4444;color:#ff4444}

/* Messages */
.msg-area{flex:1;overflow-y:auto;padding:14px}
.msg-empty{text-align:center;padding:40px 10px;color:#444}
.msg-empty i{font-size:28px;margin-bottom:10px}
.msg-empty h3{font-size:14px;color:#555}
.msg-empty p{font-size:11px;color:#333;margin-top:4px}
.msg-date-sep{text-align:center;padding:10px 0}
.msg-date-sep span{font-size:10px;color:#444;background:#0a0a0a;padding:0 8px}
.msg-row{display:flex;margin-bottom:8px}
.msg-row.received{justify-content:flex-start}
.msg-row.sent{justify-content:flex-end}
.msg-bubble{
  max-width:70%;padding:8px 12px;font-size:13px;line-height:1.4;
  word-wrap:break-word;
}
.msg-row.received .msg-bubble{
  background:#141414;border:1px solid #2a2a2a;color:#ccc;
  border-radius:0 4px 4px 4px;
}
.msg-row.sent .msg-bubble{
  background:#1a1a1a;border:1px solid #3a3a3a;color:#fff;
  border-radius:4px 0 4px 4px;
}
.msg-time{font-size:9px;margin-top:3px;opacity:.5}

/* Input */
.msg-input-area{
  display:flex;align-items:center;gap:4px;padding:8px 14px;
  border-top:1px solid #2a2a2a;flex-shrink:0;
}
.input-btn{
  background:none;border:1px solid #2a2a2a;color:#999;
  padding:6px 8px;cursor:pointer;font-size:14px;flex-shrink:0;
}
.input-btn:hover{background:#1a1a1a;color:#fff}
.msg-input-area textarea{
  flex:1;background:#0d0d0d;border:1px solid #2a2a2a;color:#e0e0e0;
  padding:8px 10px;font-size:13px;font-family:inherit;
  resize:none;border-radius:0;
}
.msg-input-area textarea:focus{outline:none;border-color:#fff}
.send-btn{
  background:#fff;color:#000;border:none;padding:0 14px;
  cursor:pointer;font-size:14px;flex-shrink:0;
}
.send-btn:hover{background:#ddd}

/* Sticker Panel */
.sticker-panel{
  display:none;position:absolute;bottom:52px;left:0;right:0;
  max-height:200px;overflow-y:auto;background:#0d0d0d;
  border-top:1px solid #2a2a2a;padding:8px;z-index:30;
}
.sticker-panel.show{display:block}
.sticker-panel-header{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:#666;margin-bottom:8px;
}
.sticker-list{display:flex;flex-wrap:wrap;gap:6px}
.sticker-item{width:64px;height:64px;cursor:pointer;object-fit:contain}
.sticker-item:hover{opacity:.7}

/* Message Media */
.msg-sticker{width:120px;height:120px;object-fit:contain;display:block}
.msg-photo{max-width:200px;max-height:240px;cursor:pointer;display:block;border:1px solid #2a2a2a}

/* Settings Panel */
.settings-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);z-index:100}
.settings-overlay.show{display:block}
.settings-panel{
  position:fixed;top:0;right:-320px;width:300px;height:100%;
  background:#0d0d0d;border-left:1px solid #2a2a2a;
  z-index:101;overflow-y:auto;transition:right .3s;
}
.settings-panel.show{right:0}
.settings-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid #2a2a2a;
}
.settings-header h2{font-size:14px;color:#fff;text-transform:uppercase;letter-spacing:1px}
.settings-close{background:none;border:1px solid #2a2a2a;color:#ccc;padding:4px 8px;cursor:pointer;font-size:12px}
.settings-close:hover{background:#1a1a1a;color:#fff}
.settings-body{padding:14px}
.settings-status-card{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px;border:1px solid #2a2a2a;margin-bottom:14px;
}
.settings-status-card .left{display:flex;align-items:center;gap:8px}
.status-icon{width:28px;height:28px;border:1px solid #333;display:flex;align-items:center;justify-content:center;font-size:14px;color:#666}
.status-icon.on{color:#fff;border-color:#fff}
.settings-status-card .info .name{font-size:12px;color:#ccc}
.settings-status-card .info .sub{font-size:11px;color:#666}
.status-badge{font-size:10px;padding:2px 6px;border:1px solid #333;color:#999}
.status-badge.on{color:#fff;border-color:#fff}
.settings-form-card h3{font-size:13px;color:#fff;margin-bottom:8px;text-transform:uppercase}
.settings-field{margin-bottom:10px}
.settings-field label{display:block;font-size:11px;color:#666;margin-bottom:4px}
.settings-field input{
  width:100%;background:#0a0a0a;border:1px solid #2a2a2a;color:#e0e0e0;
  padding:8px;font-size:12px;font-family:inherit;
}
.settings-field input:focus{outline:none;border-color:#fff}
.settings-save-btn{
  width:100%;background:#fff;color:#000;border:none;padding:10px;
  font-size:13px;cursor:pointer;font-family:inherit;font-weight:bold;
  text-transform:uppercase;letter-spacing:1px;
}
.settings-save-btn:hover{background:#ddd}
.settings-save-btn:disabled{opacity:.5}
.settings-tip{margin-top:14px;padding:10px;border:1px dashed #2a2a2a}
.tip-title{font-size:12px;color:#666;margin-bottom:6px}
.settings-tip ol{padding-left:16px}
.settings-tip li{font-size:11px;color:#555;margin-bottom:3px}
.settings-tip code{background:#0a0a0a;padding:1px 4px;color:#ccc;border:1px solid #2a2a2a}

/* Toast */
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  padding:8px 16px;font-size:12px;color:#ccc;
  background:#0d0d0d;border:1px solid #2a2a2a;z-index:200;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.toast.show{opacity:1}
.toast.success{color:#fff;border-color:#fff}
.toast.error{color:#ff4444;border-color:#ff4444}

/* Mobile */
@media(max-width:768px){
  .menu-toggle{display:block}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:60;
    transform:translateX(-100%);transition:transform .3s;width:260px;
  }
  .sidebar.show{transform:translateX(0)}
  .back-btn{display:block}
  .chat-header{padding:8px 10px}
  .msg-area{padding:10px}
  .msg-bubble{max-width:85%;font-size:12px}
  .topbar-brand .brand-text{font-size:12px}
  .topbar-actions{gap:8px}
  .msg-input-area{padding:8px}
  .msg-input-area textarea{font-size:12px}
}