/* Chat destinations -------------------------------------------------------
   Keeps Chat, DMs, and Alerts recognizable as one compact workspace switcher
   while borrowing the AI tab's spacing and selected-state language.
*/

.chat-sidebar {
  width: 240px;
  padding: 18px 12px 12px;
  border-right-color: var(--border);
  background: var(--sidebar);
}

.chat-sidebar .sidebar-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  background: transparent;
}

.chat-sidebar .sidebar-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  min-width: 0;
  gap: 5px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: transparent;
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0;
  transition: background var(--speed) var(--ease-standard), color var(--speed) var(--ease-standard), border-color var(--speed) var(--ease-standard);
}

.chat-sidebar .sidebar-tab:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.chat-sidebar .sidebar-tab.active {
  color: var(--text-primary);
  background: var(--surface-selected);
  border-color: var(--border-subtle);
  box-shadow: none;
}

.chat-sidebar .sidebar-tab.active::before,
.chat-sidebar .sidebar-tab.active::after { content: none; }

.chat-sidebar .sidebar-tab-icon {
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1;
}

.chat-sidebar .sidebar-tab.active .sidebar-tab-icon { color: var(--accent); }

.chat-sidebar .sidebar-tab-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-sidebar .friends-badge,
.chat-sidebar .mentions-badge {
  min-width: 15px;
  height: 15px;
  margin-left: 0;
  padding: 0 3px;
  border-radius: 3px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font: 500 9px/13px var(--font-mono);
}

.chat-sidebar .dm-unread-dot {
  width: 5px;
  height: 5px;
  margin-left: 0;
  background: var(--accent);
}

.chat-sidebar .chat-sidebar-header {
  margin: 13px 3px 5px;
  padding: 0 6px;
  color: var(--text-tertiary);
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .14em;
}

.chat-sidebar .channel-item,
.chat-sidebar .dm-item {
  min-height: 33px;
  height: 33px;
  gap: 8px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.chat-sidebar .channel-item:hover,
.chat-sidebar .dm-item:hover { background: var(--surface-hover); }

.chat-sidebar .channel-item.active,
.chat-sidebar .dm-item.active {
  background: var(--surface-selected);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.chat-sidebar .channel-item.active .channel-hash,
.chat-sidebar .dm-item.active .dm-item-name { color: var(--text-primary); }

.chat-sidebar .channel-item.active .channel-hash { color: var(--accent); }

.chat-sidebar .dm-item-avatar { width: 25px; height: 25px; }

.chat-sidebar .chat-user-bar {
  margin-top: 10px;
  padding: 12px 7px 0;
  border-top-color: var(--border);
}

.chat-topbar {
  height: 62px;
  padding: 0 clamp(20px, 4vw, 48px);
  background: var(--bg);
  border-bottom-color: var(--border);
}

.chat-topbar-name { font-size: 18px; font-weight: 500; }

.chat-app .friends-tabs {
  gap: 4px;
  margin-left: 11px;
  padding-left: 11px;
  border-left-color: var(--border-subtle);
}

.chat-app .friends-tab {
  height: 29px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border-color: var(--border-subtle);
  background: var(--surface);
  font-size: 10.5px;
}

.chat-app .friends-tab:hover,
.chat-app .friends-tab.active {
  color: var(--text-primary);
  border-color: var(--border-emphasis);
  background: var(--surface-hover);
}

@media (max-width: 960px) {
  .chat-sidebar { width: 100%; padding: 12px; }
  .chat-topbar { height: 58px; padding: 0 14px; }
}

/* Shared popup and dialog chrome ---------------------------------------- */
.chat-sidebar .chat-user-bar {
  margin-top: auto !important;
  flex: 0 0 auto;
  min-height: 53px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  background: transparent;
}

.chat-sidebar .chat-user-bar > :where(.user-bar-avatar, .user-bar-name,
  .user-bar-signout) { transition: background var(--speed) var(--ease-standard), color var(--speed) var(--ease-standard), border-color var(--speed) var(--ease-standard); }

.chat-sidebar .user-bar-signout {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
}

.chat-sidebar .user-bar-signout:hover {
  border-color: var(--border-subtle);
  background: var(--surface-hover);
  color: var(--text-primary);
}

body:has(#chat-root) :where(.message-more-popover, .chat-attachment-popover,
  .reaction-popover, .mention-popover, .chat-context-panel,
  .online-popover) {
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-overlay);
}

body:has(#chat-root) :where(.message-more-title, .reaction-popover-head,
  .chat-gif-search-head, .online-popover-head) {
  color: var(--text-primary);
  font-family: var(--font-body);
}

body:has(#chat-root) .message-more-title {
  padding: 6px 9px 8px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

body:has(#chat-root) .message-more-popover button {
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

body:has(#chat-root) .message-more-popover button:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

body:has(#chat-root) .chat-attachment-popover > button {
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
}

body:has(#chat-root) .chat-attachment-popover > button:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
}

body:has(#chat-root) .reaction-popover,
body:has(#chat-root) .reaction-popover-polished { padding: 9px; border-radius: var(--radius-md); }

body:has(#chat-root) .reaction-popover-head {
  padding: 0 2px 7px;
  border-bottom-color: var(--border-subtle);
  font-size: var(--text-label);
}

body:has(#chat-root) .reaction-popover button[data-pick-emoji] {
  border-radius: var(--radius-sm);
  transition: background var(--speed) var(--ease-standard), transform var(--speed) var(--ease-standard);
}

body:has(#chat-root) .reaction-popover button[data-pick-emoji]:hover { background: var(--surface-hover); }

body:has(#chat-root) .mention-popover { padding: 5px; }
body:has(#chat-root) .mention-item { border-radius: var(--radius-sm); }
body:has(#chat-root) .mention-item:hover, body:has(#chat-root) .mention-item.active { background: var(--surface-hover); }

body:has(#chat-root) .chat-context-panel { padding: 14px; }
body:has(#chat-root) .chat-context-head { padding-bottom: 10px; border-bottom-color: var(--border-subtle); }
body:has(#chat-root) .chat-context-head strong { color: var(--text-primary); font-size: 16px; font-weight: 500; }
body:has(#chat-root) .chat-context-action,
body:has(#chat-root) .chat-pin-result,
body:has(#chat-root) .chat-actions-person { border-radius: var(--radius-sm); }

body:has(#chat-root) :where(.modal-backdrop, .chat-media-lightbox) {
  background: var(--overlay-scrim);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:has(#chat-root) :where(.modal-card, .auth-card, .profile-card,
  .group-settings-card, .group-members-card, .chat-media-lightbox-card,
  .acct-modal, .acct-pcard) {
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-overlay);
}

body:has(#chat-root) :where(.modal-close, .chat-context-close,
  .chat-media-lightbox-head button, .acct-modal-close) {
  border-radius: var(--radius-sm);
}

/* Account/profile overlays are created outside #chat-root, so keep their
   backdrop and identity card on the same flat, quiet layer as chat menus. */
body:has(#chat-root) .acct-backdrop {
  background: var(--overlay-scrim);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:has(#chat-root) .acct-pcard {
  overflow: hidden;
}

body:has(#chat-root) .acct-pcard-body {
  padding: 14px 20px 20px;
}

body:has(#chat-root) :where(.chat-confirm-card, .profile-load-error) {
  padding: 22px;
}

body:has(#chat-root) :where(.chat-confirm-actions, .acct-actions) {
  gap: 8px;
}

body:has(#chat-root) :where(.chat-confirm-actions button, .acct-btn) {
  min-height: 34px;
  border-radius: var(--radius-sm);
}

/* One hover language across Chat: the selected surface is also the hover
   surface, so controls feel like one family while their labels stay readable. */
body:has(#chat-root) #chat-root button:hover:not(:disabled),
body:has(#chat-root) :where(.message-more-popover, .chat-attachment-popover,
  .reaction-popover, .mention-popover, .chat-context-panel, .online-popover,
  .chat-media-lightbox, .acct-backdrop) button:hover:not(:disabled) {
  background: var(--surface-selected) !important;
  border-color: var(--border-emphasis) !important;
  color: var(--text-primary) !important;
}

/* Keep destructive affordances visibly destructive while sharing the same
   geometry and transition as every other Chat control. */
body:has(#chat-root) #chat-root button.is-danger:hover:not(:disabled),
body:has(#chat-root) #chat-root button[data-danger]:hover:not(:disabled),
body:has(#chat-root) :where(.message-more-popover, .chat-context-panel,
  .acct-backdrop) button.is-danger:hover:not(:disabled) {
  background: var(--danger-dim) !important;
  border-color: var(--danger-border) !important;
  color: var(--danger) !important;
}

body:has(#chat-root) .chat-composer button[type="submit"]:hover:not(:disabled) svg {
  fill: currentColor;
}