/* ============================================================
   JUDGEMENT PROTOCOL — sidebar.css
   Purpose : Slide-in sidebar with Chats, Clan Chats,
             Favorites, and System Messages sections.
   ============================================================ */

/* ── Sidebar container ───────────────────────────────────────── */
#sidebar {
  position:         fixed;
  top:              var(--nav-height);
  left:             0;
  bottom:           0;
  width:            var(--sidebar-width);
  background:       var(--bg-raised);
  border-right:     1px solid var(--border-subtle);
  z-index:          var(--z-sidebar);
  transform:        translateX(-100%);
  transition:       transform var(--transition-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display:          flex;
  flex-direction:   column;
  overflow:         hidden;
  /* GPU compositing — smooth on Android */
  will-change:      transform;
}

/* Sidebar backdrop (dim the chat when sidebar opens on mobile) */
#sidebar-backdrop {
  position:   fixed;
  inset:      0;
  top:        var(--nav-height);
  background: rgba(6,6,7,0.6);
  z-index:    calc(var(--z-sidebar) - 1);
  opacity:    0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

/* ── Open state (class toggled by sidebar.js) ────────────────── */
.sidebar-open #sidebar {
  transform: translateX(0);
}
.sidebar-open #sidebar-backdrop {
  opacity:        1;
  pointer-events: auto;
}

/* ── Sidebar inner scroll ────────────────────────────────────── */
#sidebar-inner {
  flex:         1;
  overflow-y:   auto;
  padding:      var(--space-3) 0 var(--space-4);
}

/* ── Section headers ─────────────────────────────────────────── */
.sidebar-section-header {
  padding:        var(--space-2) var(--space-4) var(--space-1);
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-top:     var(--space-3);
}
.sidebar-section-header:first-child { margin-top: 0; }

/* ── Chat items ──────────────────────────────────────────────── */
.sidebar-item {
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  padding:         10px var(--space-4);
  cursor:          pointer;
  transition:      background var(--transition-fast);
  position:        relative;
  min-height:      52px;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-item:active,
.sidebar-item.active {
  background: var(--bg-hover);
}
.sidebar-item.active::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        50%;
  transform:  translateY(-50%);
  width:      3px;
  height:     60%;
  background: var(--brass);
  border-radius: 0 2px 2px 0;
}

/* Avatar / icon in sidebar item */
.sidebar-avatar {
  width:         38px;
  height:        38px;
  border-radius: 50%;
  background:    var(--bg-active);
  flex-shrink:   0;
  overflow:      hidden;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-family:   var(--font-display);
  font-size:     15px;
  color:         var(--text-secondary);
  font-weight:   600;
}
.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Clan icon */
.sidebar-clan-icon {
  width:         38px;
  height:        38px;
  border-radius: var(--radius-md);
  background:    rgba(184,115,51,0.1);
  border:        1px solid var(--brass-dim);
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     16px;
}

/* Item text */
.sidebar-item-text {
  flex:       1;
  min-width:  0;
}
.sidebar-item-name {
  font-size:   13px;
  font-weight: 500;
  color:       var(--text-primary);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.sidebar-item-preview {
  font-size:   11px;
  color:       var(--text-muted);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  margin-top:  1px;
}

/* Unread badge */
.sidebar-unread {
  min-width:    18px;
  height:       18px;
  background:   var(--brass);
  color:        #000;
  font-size:    10px;
  font-weight:  700;
  border-radius: var(--radius-pill);
  display:      flex;
  align-items:  center;
  justify-content: center;
  padding:      0 5px;
  flex-shrink:  0;
}

/* ── System messages in sidebar (max 3) ──────────────────────── */
.sidebar-system-msg {
  margin:        var(--space-2) var(--space-3);
  padding:       10px 12px;
  background:    rgba(184,115,51,0.06);
  border:        1px solid var(--brass-dim);
  border-radius: var(--radius-md);
  cursor:        pointer;
  transition:    background var(--transition-fast);
}
.sidebar-system-msg:active { background: var(--brass-glow); }
.sidebar-system-msg-subject {
  font-size:   11px;
  font-weight: 600;
  color:       var(--brass);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.sidebar-system-msg-preview {
  font-size:  10px;
  color:      var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

/* ── Empty states ────────────────────────────────────────────── */
.sidebar-empty {
  padding:    var(--space-3) var(--space-4);
  font-size:  11px;
  color:      var(--text-muted);
  font-style: italic;
  font-family: var(--font-mono);
}