/* ===================================================================
   CHAT — Krende Override
   Loaded AFTER chat.css — swaps purple #6366f1/#8b5cf6 → lime #c6f74e
   Scoped: body.page-chat
   Fonts : Bricolage Grotesque · JetBrains Mono · Outfit
   =================================================================== */

body.page-chat {
  --font-display: "Bricolage Grotesque", "Outfit", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-body:    "Outfit", system-ui, sans-serif;
  --k-lime:       #c6f74e;
  --k-lime-on:    #0a0f04;
  --k-cyan:       #4fe6ff;
  --k-border:     rgba(132, 148, 170, 0.10);

  font-family: var(--font-body);
}

/* ── header ── */
body.page-chat .site-header {
  background: rgba(9, 11, 15, 0.92) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(132, 148, 170, 0.12) !important;
  flex-shrink: 0;
}
body.page-chat .nav-menu a { color: #93a0b2; transition: color 0.2s; }
body.page-chat .nav-menu a:hover { color: var(--k-lime); }
body.page-chat .logo-mark { background: var(--k-lime) !important; color: var(--k-lime-on) !important; }
body.page-chat .logo-title { color: #e9eef4; }
body.page-chat .logo-subtitle { color: #5e6b7d; }

/* ================================================================
   LAYOUT SHELL
   ================================================================ */
.chat-layout {
  background: #090b0f !important;
}

/* ================================================================
   SIDEBAR — dark Krende surface
   ================================================================ */
.chat-sidebar {
  background: #0c0e14 !important;
  border-right: 1px solid var(--k-border) !important;
}

.sidebar-head {
  border-bottom: 1px solid rgba(132, 148, 170, 0.08) !important;
}

.sidebar-title {
  font-family: var(--font-display) !important;
  font-weight: 720 !important;
  letter-spacing: -0.01em !important;
  color: #e9eef4 !important;
}

/* search bar */
.sidebar-search {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(132, 148, 170, 0.14) !important;
  color: #e9eef4 !important;
  font-family: var(--font-body) !important;
  border-radius: 10px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.sidebar-search:focus {
  border-color: var(--k-lime) !important;
  background: rgba(198, 247, 78, 0.04) !important;
  box-shadow: 0 0 0 3px rgba(198, 247, 78, 0.10) !important;
}

.sidebar-search::placeholder { color: rgba(93, 107, 125, 0.7) !important; }

/* conv list scrollbar */
.conv-list::-webkit-scrollbar-thumb { background: rgba(132, 148, 170, 0.15) !important; }

/* conv items */
.conv-item:hover { background: rgba(255, 255, 255, 0.03) !important; }

/* active conv: purple → lime */
.conv-item.active {
  background: rgba(198, 247, 78, 0.08) !important;
  border-right: 3px solid var(--k-lime) !important;
}

.conv-name { font-family: var(--font-body) !important; font-weight: 600 !important; }

/* unread badge: purple → lime */
.conv-badge {
  background: var(--k-lime) !important;
  color: var(--k-lime-on) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.60rem !important;
  letter-spacing: 0.04em !important;
  font-weight: 800 !important;
}

/* ================================================================
   CHAT TOPBAR
   ================================================================ */
.chat-topbar {
  background: #0c0e14 !important;
  border-bottom: 1px solid var(--k-border) !important;
}

.topbar-back { color: #e9eef4 !important; }

.peer-name {
  font-family: var(--font-display) !important;
  font-weight: 650 !important;
  color: #e9eef4 !important;
}

.peer-status { color: rgba(93, 107, 125, 0.80) !important; }

/* status dot stays green (online indicator) */

.topbar-btn { color: rgba(93, 107, 125, 0.85) !important; }
.topbar-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #e9eef4 !important;
}

/* ================================================================
   MESSAGES AREA
   ================================================================ */
.chat-messages::-webkit-scrollbar-thumb { background: rgba(132, 148, 170, 0.15) !important; }

/* Date separator */
.msg-date-sep span {
  background: #090b0f !important;
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.08em !important;
}
.msg-date-sep::before { background: rgba(132, 148, 170, 0.08) !important; }

/* ================================================================
   BUBBLES — purple me → lime
   ================================================================ */
.bubble.them {
  background: #171b24 !important;
  color: #e9eef4 !important;
  border: 1px solid rgba(132, 148, 170, 0.10) !important;
}

/* key override: purple gradient → lime */
.bubble.me {
  background: var(--k-lime) !important;
  background-image: none !important;
  color: var(--k-lime-on) !important;
}

/* ================================================================
   TYPING BUBBLE
   ================================================================ */
.typing-bubble {
  background: #171b24 !important;
  border: 1px solid rgba(132, 148, 170, 0.10) !important;
}
.typing-bubble span { background: rgba(93, 107, 125, 0.60) !important; }

/* ================================================================
   CONTEXT MENU
   ================================================================ */
.msg-ctx-menu {
  background: #12151c !important;
  border: 1px solid rgba(132, 148, 170, 0.14) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.70) !important;
  border-radius: 12px !important;
}
.msg-ctx-item { color: #e9eef4 !important; font-family: var(--font-body) !important; }
.msg-ctx-item:hover { background: rgba(255, 255, 255, 0.04) !important; }
.msg-ctx-item.danger { color: #ff5d72 !important; }

/* ================================================================
   PREVIEW CHIPS
   ================================================================ */
.preview-chip {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(132, 148, 170, 0.14) !important;
  border-radius: 10px !important;
  color: #e9eef4 !important;
}
.preview-chip-rm:hover { color: #ff5d72 !important; }

/* ================================================================
   EMOJI PANEL
   ================================================================ */
.emoji-panel {
  background: #0c0e14 !important;
  border-top: 1px solid rgba(132, 148, 170, 0.08) !important;
}
.emoji-btn-item:hover { background: rgba(255, 255, 255, 0.06) !important; }

/* ================================================================
   ATTACH MENU
   ================================================================ */
.attach-menu {
  background: #12151c !important;
  border: 1px solid rgba(132, 148, 170, 0.14) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.70) !important;
}
.attach-item { color: #e9eef4 !important; font-family: var(--font-body) !important; }
.attach-item:hover { background: rgba(255, 255, 255, 0.04) !important; }

/* ================================================================
   INPUT BAR
   ================================================================ */
.chat-inputbar {
  background: #0c0e14 !important;
  border-top: 1px solid var(--k-border) !important;
}

.inputbar-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(132, 148, 170, 0.12) !important;
  color: rgba(93, 107, 125, 0.90) !important;
  border-radius: 50% !important;
}
.inputbar-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e9eef4 !important;
}

/* emoji toggle active: purple → lime */
.emoji-toggle.active {
  background: rgba(198, 247, 78, 0.14) !important;
  color: var(--k-lime) !important;
  border-color: rgba(198, 247, 78, 0.35) !important;
}

/* input field */
.input-wrap {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(132, 148, 170, 0.14) !important;
  border-radius: 20px !important;
  transition: border-color 0.2s, background 0.2s !important;
}

.input-wrap:focus-within {
  border-color: var(--k-lime) !important;
  background: rgba(198, 247, 78, 0.03) !important;
}

.chat-input { color: #e9eef4 !important; font-family: var(--font-body) !important; }
.chat-input::placeholder { color: rgba(93, 107, 125, 0.55) !important; }

/* SEND BUTTON — purple gradient → lime */
.send-btn {
  background: var(--k-lime) !important;
  background-image: none !important;
  color: var(--k-lime-on) !important;
  box-shadow: 0 4px 14px rgba(198, 247, 78, 0.35) !important;
  transition: filter 0.15s, transform 0.15s, box-shadow 0.15s !important;
}
.send-btn:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(198, 247, 78, 0.48) !important;
}
.send-btn:active { transform: scale(0.94) !important; }

/* ================================================================
   MOBILE
   ================================================================ */
@media (max-width: 768px) {
  .chat-main { background: #090b0f !important; }
}