/* 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;
}

/* Keep the composer visually stable while it is focused or its attachment
   menu is open. The plus control should blend into the same surface rather
   than inheriting the brighter selected-field treatment. */
body:has(#chat-root) .chat-composer{
  padding-left:6px;
}
body:has(#chat-root) .chat-composer:focus-within{
  background:var(--surface)!important;
}
body:has(#chat-root) .chat-composer .chat-composer-plus,
body:has(#chat-root) .chat-composer .chat-composer-plus:hover,
body:has(#chat-root) .chat-composer .chat-composer-plus:focus,
body:has(#chat-root) .chat-composer .chat-composer-plus:active{
  background:var(--surface)!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

/* Attachment lightbox polish */
body:has(#chat-root) .chat-media-lightbox-card{
  width:min(920px,calc(100vw - 32px));
  max-height:min(88vh,820px);
  border-radius:var(--radius-md);
  overflow:hidden;
}

body:has(#chat-root) .chat-media-lightbox-head{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px 11px 16px;
  border-bottom:1px solid var(--border-subtle);
  background:var(--surface-overlay);
}

body:has(#chat-root) .chat-media-lightbox-head-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

body:has(#chat-root) .chat-media-lightbox-kicker{
  color:var(--text-tertiary);
  font:500 9px/1 var(--font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}

body:has(#chat-root) .chat-media-lightbox-name{
  max-width:min(68vw,680px);
  color:var(--text-primary);
  font:500 var(--text-sm)/1.25 var(--font-body);
}

body:has(#chat-root) .chat-media-lightbox-head button{
  width:30px;
  height:30px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text-secondary);
}

body:has(#chat-root) .chat-media-lightbox-head button svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body:has(#chat-root) .chat-media-lightbox-head button:hover{
  background:var(--surface-hover)!important;
  border-color:var(--border-emphasis)!important;
  color:var(--text-primary)!important;
}

body:has(#chat-root) .chat-media-lightbox-stage{
  min-height:clamp(220px,42vh,460px);
  max-height:calc(88vh - 132px);
  padding:22px;
  background:var(--surface);
}

body:has(#chat-root) .chat-media-lightbox-stage img,
body:has(#chat-root) .chat-media-lightbox-stage video{
  max-width:100%;
  max-height:calc(88vh - 220px);
  border-radius:var(--radius-sm);
  box-shadow:0 12px 28px rgba(0,0,0,.2);
}

body:has(#chat-root) .chat-media-lightbox-stage audio{
  width:min(560px,100%);
}

body:has(#chat-root) .chat-media-lightbox-file{
  min-height:220px;
  box-sizing:border-box;
  width:min(420px,100%);
  padding:34px 24px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-raised);
}

body:has(#chat-root) .chat-media-lightbox-file svg{
  width:44px;
  height:44px;
}

body:has(#chat-root) .chat-media-lightbox-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 14px 12px 16px;
  border-top:1px solid var(--border-subtle);
  background:var(--surface-overlay);
}

body:has(#chat-root) .chat-media-lightbox-hint{
  color:var(--text-tertiary);
  font:500 var(--text-xs)/1 var(--font-mono);
}

body:has(#chat-root) .chat-media-lightbox-action-buttons{
  display:flex;
  align-items:center;
  gap:8px;
}

body:has(#chat-root) .chat-media-lightbox-action-buttons .ui-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:32px;
  height:32px;
  padding:0 11px;
  border-radius:var(--radius-sm);
}

body:has(#chat-root) .chat-media-lightbox-action-buttons .ui-button svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:560px){
  body:has(#chat-root) .chat-media-lightbox{padding:12px;}
  body:has(#chat-root) .chat-media-lightbox-card{width:calc(100vw - 24px);max-height:90vh;}
  body:has(#chat-root) .chat-media-lightbox-head{padding-left:12px;}
  body:has(#chat-root) .chat-media-lightbox-name{max-width:calc(100vw - 100px);}
  body:has(#chat-root) .chat-media-lightbox-stage{padding:12px;min-height:180px;}
  body:has(#chat-root) .chat-media-lightbox-actions{align-items:flex-start;flex-direction:column;gap:10px;padding:10px 12px;}
  body:has(#chat-root) .chat-media-lightbox-action-buttons{width:100%;}
  body:has(#chat-root) .chat-media-lightbox-action-buttons .ui-button{flex:1;}
}

@media(prefers-reduced-motion:reduce){
  body:has(#chat-root) .chat-media-lightbox{animation:none;}
}

/* Chat workspace alignment ----------------------------------------------
   Keep the existing channel/sidebar layout, but give the conversation area
   the same measured gutters and flat, compact controls used by Games/Watch.
*/
body:has(#chat-root) .chat-main {
  --chat-gutter: clamp(18px, 2.5vw, 36px);
}

body:has(#chat-root) .chat-sidebar {
  background: var(--sidebar);
  border-right-color: var(--border-subtle);
}

body:has(#chat-root) .chat-sidebar .channel-divider {
  margin: 16px 3px 6px;
  padding: 0 6px 6px;
  color: var(--text-tertiary);
  font: 500 9px/1.2 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

body:has(#chat-root) .chat-sidebar .channel-divider::before {
  display: none;
}

body:has(#chat-root) .chat-sidebar .channel-divider::after {
  height: 1px;
  background: var(--border-subtle);
}

body:has(#chat-root) .chat-sidebar .channel-item,
body:has(#chat-root) .chat-sidebar .dm-item {
  min-height: 34px;
  height: 34px;
}

body:has(#chat-root) .chat-topbar {
  height: 62px;
  min-height: 62px;
  padding-inline: var(--chat-gutter);
  gap: 10px;
  background: var(--bg);
  border-bottom-color: var(--border-subtle);
}

body:has(#chat-root) .chat-topbar-hash {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent);
  font-size: 12px;
}

body:has(#chat-root) .chat-topbar-name {
  min-width: 0;
  max-width: min(32vw, 360px);
  overflow: hidden;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(#chat-root) .chat-topbar-topic {
  max-width: min(38%, 420px);
  padding-left: 10px;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.35;
  border-left-color: var(--border-subtle);
}

body:has(#chat-root) .chat-app .friends-tabs {
  min-width: 0;
  margin-left: auto;
  padding-left: 0;
  border-left: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

body:has(#chat-root) .chat-app .friends-tabs::-webkit-scrollbar {
  display: none;
}

body:has(#chat-root) .chat-app .friends-tab {
  flex: 0 0 auto;
  white-space: nowrap;
}

body:has(#chat-root) .chat-actions-button {
  min-height: 32px;
  margin-left: auto;
  padding-inline: 8px;
  border-color: transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
}

body:has(#chat-root) .chat-topbar .chat-group-leave,
body:has(#chat-root) .chat-topbar .chat-group-delete,
body:has(#chat-root) .chat-topbar .chat-forum-back {
  min-height: 30px;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  font-size: 11px;
}

body:has(#chat-root) .chat-group-members {
  padding-inline: var(--chat-gutter);
  background: var(--bg);
  border-bottom-color: var(--border-subtle);
}

body:has(#chat-root) .chat-messages {
  gap: 6px;
  padding: 22px var(--chat-gutter) 10px;
}

body:has(#chat-root) .message-row {
  gap: 12px;
  padding: 2px 8px;
}

body:has(#chat-root) .message-row.message-grouped {
  padding-block: 0;
}

body:has(#chat-root) .message-row:not(.message-grouped) + .message-row.message-grouped {
  margin-top: -4px;
}

body:has(#chat-root) .message-body {
  max-width: 900px;
}

body:has(#chat-root) .reply-preview {
  margin-inline: var(--chat-gutter);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-color: var(--border-subtle);
  background: var(--surface);
}

body:has(#chat-root) .chat-pending-attachment {
  margin-inline: var(--chat-gutter);
}

body:has(#chat-root) .chat-composer {
  min-height: 46px;
  gap: 6px;
  margin: 0 var(--chat-gutter) 18px;
  padding: 4px;
  border-radius: var(--radius-md);
  background: var(--surface);
}

body:has(#chat-root) .chat-composer:focus-within {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}

body:has(#chat-root) .chat-composer textarea#chat-input {
  min-height: 36px;
  height: 36px;
  padding-block: 8px;
  font-size: 13px;
}

body:has(#chat-root) .chat-composer .chat-composer-plus {
  width: 32px;
  height: 32px;
}

body:has(#chat-root) .chat-composer button[type="submit"] {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}

body:has(#chat-root) .chat-scroll-controls {
  right: var(--chat-gutter);
}

body:has(#chat-root) .chat-send-feedback {
  margin-inline: var(--chat-gutter);
}

@media (max-width: 760px) {
  body:has(#chat-root) .chat-main {
    --chat-gutter: 14px;
  }

  body:has(#chat-root) .chat-topbar {
    gap: 8px;
    padding-inline: var(--chat-gutter);
  }

  body:has(#chat-root) .chat-topbar-name {
    max-width: 42vw;
  }

  body:has(#chat-root) .chat-messages {
    padding-top: 16px;
  }
}

@media (max-width: 560px) {
  body:has(#chat-root) .chat-main {
    --chat-gutter: 12px;
  }

  body:has(#chat-root) .chat-topbar {
    height: 56px;
    min-height: 56px;
  }

  body:has(#chat-root) .chat-topbar-name {
    max-width: 48vw;
    font-size: 15px;
  }

  body:has(#chat-root) .chat-composer {
    margin-bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#chat-root) .chat-sidebar .channel-item,
  body:has(#chat-root) .chat-sidebar .dm-item,
  body:has(#chat-root) .chat-composer {
    transition: none;
  }
}