/* AAA UI Overhaul layer for Xivy desktop shell */

:root {
  --aaa-radius-2xs: 8px;
  --aaa-radius-xs: 10px;
  --aaa-radius-sm: 12px;
  --aaa-radius-md: 14px;
  --aaa-radius-lg: 16px;
  --aaa-radius-xl: 20px;
  --aaa-border-soft: rgba(255, 255, 255, 0.08);
  --aaa-border-strong: rgba(255, 255, 255, 0.16);
  --aaa-glass-dark: rgba(12, 18, 30, 0.56);
  --aaa-glass-light: rgba(255, 255, 255, 0.04);
  --aaa-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.32);
  --aaa-shadow-pop: 0 14px 34px rgba(0, 0, 0, 0.4);
  --aaa-shadow-focus: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);

  /* Interface-scale aware sizing for server channels panel and icons. */
  --left-list-channel-icon-size: 22px;
  --left-list-channel-icon-font-size: 13px;
  --server-panel-header-height: 58px;
  --server-panel-header-padding-x: 12px;
  --server-panel-title-font-size: 16px;
  --server-panel-title-padding-right: 76px;
  --server-panel-header-actions-gap: 6px;
  --server-panel-header-btn-size: 30px;
  --server-panel-header-btn-icon-size: 16px;
  --server-panel-scroll-padding-top: 10px;
  --server-panel-scroll-padding-x: 10px;
  --server-panel-scroll-padding-bottom: 88px;
  --server-panel-scroll-gap: 14px;
  --server-panel-section-gap: 3px;
  --server-panel-section-title-margin-top: 10px;
  --server-panel-section-title-min-height: 22px;
  --server-panel-section-title-font-size: 12px;
  --server-panel-add-btn-size: 10px;
  --server-panel-add-icon-size: 6px;
  --server-panel-channel-height: 36px;
  --server-panel-channel-padding-x: 10px;
  --server-panel-channel-label-size: 16px;
  --server-panel-channel-settings-btn-size: 20px;
  --server-panel-channel-settings-icon-size: 14px;
  --server-panel-participants-padding-left: 34px;
  --server-panel-participant-row-height: 30px;
  --server-panel-participant-avatar-size: 22px;
  --server-panel-participant-avatar-font-size: 10px;
  --server-panel-channel-gap: 6px;
  --server-panel-channel-label-shift-x: -2px;
  --server-panel-channel-icon-size: 25px;
  --server-panel-channel-icon-image-size: 22px;
  --server-panel-bg: color-mix(in srgb, var(--bg-secondary) 92%, #0a0f18);
  --server-panel-header-bg: color-mix(in srgb, var(--bg-elevated) 84%, #101625);
  --server-panel-border-color: color-mix(in srgb, var(--text) 11%, transparent);
  --server-panel-title-color: color-mix(in srgb, var(--text) 96%, white 4%);
  --server-panel-text-muted: color-mix(in srgb, var(--muted) 88%, #b7bcc6);
  --server-panel-text-main: color-mix(in srgb, var(--text) 90%, #e8eaee);
  --server-panel-text-strong: color-mix(in srgb, var(--text) 98%, #ffffff);
  --server-panel-row-hover-bg: color-mix(in srgb, var(--bg-elevated-2) 78%, transparent);
  --server-panel-row-active-bg: color-mix(in srgb, var(--accent-soft) 58%, var(--bg-elevated-2));
  --server-panel-btn-hover-bg: color-mix(in srgb, var(--bg-elevated-2) 84%, transparent);
  --server-panel-avatar-bg: color-mix(in srgb, var(--bg-main) 84%, #1c212d);
}

:root[data-chat-font="small"] {
  --left-list-channel-icon-size: 22px;
  --left-list-channel-icon-font-size: 13px;
  --server-panel-header-height: 58px;
  --server-panel-header-padding-x: 12px;
  --server-panel-title-font-size: 16px;
  --server-panel-title-padding-right: 76px;
  --server-panel-header-actions-gap: 6px;
  --server-panel-header-btn-size: 30px;
  --server-panel-header-btn-icon-size: 16px;
  --server-panel-scroll-padding-top: 10px;
  --server-panel-scroll-padding-x: 10px;
  --server-panel-scroll-padding-bottom: 88px;
  --server-panel-scroll-gap: 14px;
  --server-panel-section-gap: 3px;
  --server-panel-section-title-margin-top: 10px;
  --server-panel-section-title-min-height: 22px;
  --server-panel-section-title-font-size: 12px;
  --server-panel-add-btn-size: 10px;
  --server-panel-add-icon-size: 6px;
  --server-panel-channel-height: 36px;
  --server-panel-channel-padding-x: 8px;
  --server-panel-channel-label-size: 16px;
  --server-panel-channel-settings-btn-size: 20px;
  --server-panel-channel-settings-icon-size: 14px;
  --server-panel-participants-padding-left: 34px;
  --server-panel-participant-row-height: 30px;
  --server-panel-participant-avatar-size: 22px;
  --server-panel-participant-avatar-font-size: 10px;
  --server-panel-channel-gap: 6px;
  --server-panel-channel-label-shift-x: -2px;
  --server-panel-channel-icon-size: 25px;
  --server-panel-channel-icon-image-size: 22px;
}

:root[data-chat-font="medium"] {
  --left-list-channel-icon-size: 24px;
  --left-list-channel-icon-font-size: 14px;
  --server-panel-header-height: 62px;
  --server-panel-header-padding-x: 14px;
  --server-panel-title-font-size: 17px;
  --server-panel-title-padding-right: 82px;
  --server-panel-header-actions-gap: 6px;
  --server-panel-header-btn-size: 32px;
  --server-panel-header-btn-icon-size: 17px;
  --server-panel-scroll-padding-top: 12px;
  --server-panel-scroll-padding-x: 11px;
  --server-panel-scroll-padding-bottom: 92px;
  --server-panel-scroll-gap: 16px;
  --server-panel-section-gap: 4px;
  --server-panel-section-title-margin-top: 12px;
  --server-panel-section-title-min-height: 24px;
  --server-panel-section-title-font-size: 13px;
  --server-panel-add-btn-size: 11px;
  --server-panel-add-icon-size: 7px;
  --server-panel-channel-height: 39px;
  --server-panel-channel-padding-x: 9px;
  --server-panel-channel-label-size: 17px;
  --server-panel-channel-settings-btn-size: 22px;
  --server-panel-channel-settings-icon-size: 15px;
  --server-panel-participants-padding-left: 36px;
  --server-panel-participant-row-height: 32px;
  --server-panel-participant-avatar-size: 24px;
  --server-panel-participant-avatar-font-size: 11px;
  --server-panel-channel-gap: 7px;
  --server-panel-channel-label-shift-x: -2px;
  --server-panel-channel-icon-size: 27px;
  --server-panel-channel-icon-image-size: 24px;
}

:root[data-chat-font="large"] {
  --left-list-channel-icon-size: 26px;
  --left-list-channel-icon-font-size: 15px;
  --server-panel-header-height: 66px;
  --server-panel-header-padding-x: 15px;
  --server-panel-title-font-size: 18px;
  --server-panel-title-padding-right: 88px;
  --server-panel-header-actions-gap: 7px;
  --server-panel-header-btn-size: 34px;
  --server-panel-header-btn-icon-size: 18px;
  --server-panel-scroll-padding-top: 13px;
  --server-panel-scroll-padding-x: 12px;
  --server-panel-scroll-padding-bottom: 98px;
  --server-panel-scroll-gap: 17px;
  --server-panel-section-gap: 4px;
  --server-panel-section-title-margin-top: 13px;
  --server-panel-section-title-min-height: 25px;
  --server-panel-section-title-font-size: 14px;
  --server-panel-add-btn-size: 12px;
  --server-panel-add-icon-size: 7px;
  --server-panel-channel-height: 42px;
  --server-panel-channel-padding-x: 10px;
  --server-panel-channel-label-size: 18px;
  --server-panel-channel-settings-btn-size: 24px;
  --server-panel-channel-settings-icon-size: 16px;
  --server-panel-participants-padding-left: 38px;
  --server-panel-participant-row-height: 34px;
  --server-panel-participant-avatar-size: 26px;
  --server-panel-participant-avatar-font-size: 11px;
  --server-panel-channel-gap: 8px;
  --server-panel-channel-label-shift-x: -3px;
  --server-panel-channel-icon-size: 29px;
  --server-panel-channel-icon-image-size: 26px;
}

body {
  background:
    radial-gradient(1200px 540px at 14% -20%, color-mix(in srgb, var(--accent) 21%, transparent), transparent 64%),
    radial-gradient(920px 520px at 104% 12%, color-mix(in srgb, var(--accent-hover) 16%, transparent), transparent 66%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-main) 76%, #04070f), color-mix(in srgb, var(--bg-main) 94%, #010307));
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: 72px var(--left-rail-width) minmax(0, 1fr);
}

.app-shell > .mobile-drawer {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.app-shell > .main-surface {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  justify-self: stretch;
  align-self: stretch;
}

.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.03) 40%, transparent 100%);
  opacity: 0.36;
}

.window-topbar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-main) 80%, transparent), color-mix(in srgb, var(--bg-secondary) 92%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(14px) saturate(130%);
}

.window-topbar-title {
  color: color-mix(in srgb, var(--text) 80%, var(--muted));
  font-weight: 700;
  letter-spacing: 0.04em;
}

.window-topbar-center {
  color: color-mix(in srgb, var(--text) 90%, var(--accent) 10%);
}

.window-controls {
  gap: 4px;
}

.window-control-btn,
.frame-mail-btn,
.frame-update-btn {
  border: 1px solid transparent;
  border-radius: var(--aaa-radius-2xs);
  transition:
    border-color var(--t-base) var(--ease-standard),
    background var(--t-base) var(--ease-standard),
    color var(--t-base) var(--ease-standard),
    transform var(--t-fast) var(--ease-out);
}

.window-control-btn:hover,
.frame-mail-btn:hover,
.frame-update-btn:hover {
  background: color-mix(in srgb, var(--bg-elevated-2) 60%, transparent);
  border-color: color-mix(in srgb, var(--text) 15%, transparent);
  transform: translateY(-1px);
}

.window-control-btn.close:hover {
  border-color: rgba(232, 17, 35, 0.55);
}

.server-rail {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 90%, #070b14), color-mix(in srgb, var(--bg-secondary) 78%, #060a12));
  border-right: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03), 8px 0 28px rgba(0, 0, 0, 0.24);
}

.channel-rail {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 89%, #070b13), color-mix(in srgb, var(--bg-secondary) 78%, #05080f));
  border-right: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
}

.main-surface {
  position: relative;
  background:
    radial-gradient(900px 460px at 70% -15%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-main) 86%, #05080f), color-mix(in srgb, var(--bg-main) 96%, #04060c));
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.main-surface > .main-view,
.main-surface > .main-view.active,
.main-view.friends-main,
#public-servers-main,
#server-main,
#server-main .server-main-body,
#server-main .server-main-left,
#server-top-channel-bar,
#server-top-channel-bar > .content-area {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.main-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 16%);
  opacity: 0.45;
}

.members-panel {
  width: var(--members-panel-width);
  min-width: var(--members-panel-width);
  max-width: var(--members-panel-width);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 92%, #050a12), color-mix(in srgb, var(--bg-secondary) 78%, #04070e));
  border-left: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.02);
}

.server-home,
.server-btn {
  border-color: color-mix(in srgb, var(--text) 14%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 95%, #0a101d), color-mix(in srgb, var(--bg-elevated) 85%, #090f1b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.server-home:hover,
.server-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
    0 8px 20px color-mix(in srgb, var(--accent) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  transform: translateY(-2px);
}

.server-home.active,
.server-btn.active {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 44%, transparent),
    0 10px 26px color-mix(in srgb, var(--accent) 22%, transparent);
}

.server-btn-add {
  border-radius: var(--aaa-radius-lg);
}

.server-btn-discovery img {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.32));
  transition: transform var(--t-base) var(--ease-standard), filter var(--t-base) var(--ease-standard);
}

.server-btn-discovery:hover img {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 10px 20px color-mix(in srgb, var(--accent) 35%, transparent));
}

.channel-header,
.server-header {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 72%, transparent), color-mix(in srgb, var(--bg-secondary) 92%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  backdrop-filter: blur(10px) saturate(115%);
}

.channel-title {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.plan-tier-icon-image {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.26));
}

.plan-tier-icon-image--pro {
  filter:
    brightness(0) saturate(100%)
    invert(68%) sepia(56%) saturate(1093%)
    hue-rotate(339deg) brightness(102%) contrast(98%)
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.26));
}

.channel-icon-image {
  width: calc(var(--left-list-channel-icon-size) - 2px);
  height: calc(var(--left-list-channel-icon-size) - 2px);
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.24));
}

.channel-item .channel-icon.voice-icon .channel-icon-image {
  width: calc(var(--left-list-channel-icon-size) - 1px);
  height: calc(var(--left-list-channel-icon-size) - 1px);
}

.section-add-btn .custom-icon,
.text-channel-settings-btn .custom-icon,
.voice-channel-settings-btn .custom-icon,
.server-header-btn .custom-icon,
.icon-btn .custom-icon,
.icon-plus-image {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.26));
}

.server-header-btn-invite .icon-plus-image {
  width: 16px;
  height: 16px;
}

.integration-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 12px;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.24));
}

.public-store-topbar-balance .xstore-coins-logo,
.xivy-store-v1 .xstore-coins-logo {
  width: 38px;
  height: 38px;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
}

/* PNG-backed symbols inside the shared SVG sprite. */
svg use[href="#icon-phone"],
svg use[href="#icon-mic"],
svg use[href="#icon-mic-off"],
svg use[href="#icon-headset"],
svg use[href="#icon-headset-off"],
svg use[href="#icon-gear"],
svg use[href="#icon-video-off"],
svg use[href="#icon-group"],
svg use[href="#icon-search"],
svg use[href="#icon-pin"] {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.08);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.24));
}

.voice-participant-status .voice-status-icon.camera-on {
  color: var(--success);
}

.friends-search input,
.chat-search-wrap input {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 90%, #09101b), color-mix(in srgb, var(--bg-elevated-2) 82%, #080d17));
  border-color: color-mix(in srgb, var(--text) 14%, transparent);
}

.friends-search input:focus,
.chat-search-wrap input:focus {
  border-color: color-mix(in srgb, var(--accent) 68%, transparent);
  box-shadow: var(--aaa-shadow-focus);
}

.friends-action-btn,
.top-action-btn,
.server-header-btn,
.icon-btn,
.call-shutter-btn,
.server-voice-hover-btn {
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 88%, #0a111d), color-mix(in srgb, var(--bg-elevated-2) 84%, #090f1a));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition:
    background var(--t-base) var(--ease-standard),
    border-color var(--t-base) var(--ease-standard),
    color var(--t-base) var(--ease-standard),
    box-shadow var(--t-base) var(--ease-standard),
    transform var(--t-fast) var(--ease-out);
}

.friends-action-btn:hover,
.top-action-btn:hover,
.server-header-btn:hover,
.icon-btn:hover,
.call-shutter-btn:hover,
.server-voice-hover-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent),
    0 8px 20px color-mix(in srgb, var(--accent) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--text);
  transform: translateY(-1px);
}

.channel-item,
.friend-item,
.member-row {
  border: 1px solid transparent;
  border-radius: var(--aaa-radius-sm);
  transition:
    background var(--t-base) var(--ease-standard),
    border-color var(--t-base) var(--ease-standard),
    box-shadow var(--t-base) var(--ease-standard),
    transform var(--t-fast) var(--ease-out),
    color var(--t-base) var(--ease-standard);
}

.channel-item:hover,
.friend-item:hover,
.member-row:hover {
  background: color-mix(in srgb, var(--bg-elevated-2) 68%, transparent);
  border-color: color-mix(in srgb, var(--text) 14%, transparent);
  transform: translateY(-1px);
}

.channel-item.active {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: none;
}

.friend-item.active {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 20%, transparent);
}

.user-bar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 88%, #0a101b), color-mix(in srgb, var(--bg-elevated-2) 80%, #090f18));
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-bottom: 0;
  border-radius: 0 !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px) saturate(112%);
}

#top-channel-bar .top-channel-bar-row,
#server-top-channel-bar .server-top-channel-bar-row {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 68%, transparent), color-mix(in srgb, var(--bg-main) 92%, transparent)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.friends-main .top-channel-bar-row .channel-title#view-title,
.server-main .top-channel-bar-row .channel-title#server-main-panel-title {
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 88%, #09111d), color-mix(in srgb, var(--bg-elevated-2) 86%, #081019));
  border-radius: var(--aaa-radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.content-panel {
  border-radius: var(--aaa-radius-xl);
}

.chat-box {
  border: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
  border-radius: var(--aaa-radius-xl);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--chat-bg) 93%, #060c16), color-mix(in srgb, var(--chat-bg) 84%, #050b14));
  box-shadow: var(--aaa-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.message-item,
.chat-row {
  margin: 0 3px;
  border: 1px solid transparent;
  border-radius: var(--aaa-radius-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 52%, transparent), color-mix(in srgb, var(--bg-elevated) 18%, transparent));
}

.message-item:hover,
.chat-row:hover {
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated-2) 66%, transparent), color-mix(in srgb, var(--bg-elevated) 28%, transparent));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.message-avatar {
  border-radius: var(--aaa-radius-sm);
  border-color: color-mix(in srgb, var(--text) 16%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.message-author {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.message-time {
  color: color-mix(in srgb, var(--muted) 85%, var(--text) 15%);
}

.message-body {
  color: color-mix(in srgb, var(--text) 93%, white 7%);
}

.reaction-chip {
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated-2) 90%, #0a1019), color-mix(in srgb, var(--bg-elevated) 90%, #09101a));
}

.reaction-chip.reaction-chip--clickable:hover {
  border-color: color-mix(in srgb, var(--accent) 64%, transparent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 22%, transparent);
}

#friends-chat-panel .chat-input-row,
.server-main .chat-input-row.server-chat-row {
  border-color: color-mix(in srgb, var(--text) 14%, transparent) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 92%, #0b111d), color-mix(in srgb, var(--bg-elevated-2) 88%, #09101a)) !important;
  border-radius: var(--aaa-radius-lg) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
}

#friends-chat-panel .chat-input-row:focus-within,
.server-main .chat-input-row.server-chat-row:focus-within {
  border-color: color-mix(in srgb, var(--accent) 75%, transparent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 44%, transparent),
    0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
    0 12px 30px color-mix(in srgb, var(--accent) 24%, transparent) !important;
}

.chat-input-row .chat-text-input::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, var(--text) 30%);
}

.chat-action-btn {
  border-radius: var(--aaa-radius-xs);
}

.chat-action-btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 90%, #7b8cff), color-mix(in srgb, var(--accent-fill-hover) 88%, #4b5be8));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}

.chat-action-btn.primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 10px 22px color-mix(in srgb, var(--accent) 38%, transparent);
  transform: translateY(-1px);
}

.requests-tab {
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--text) 13%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 90%, #0b121d), color-mix(in srgb, var(--bg-elevated-2) 84%, #08101a));
}

.requests-tab.active {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--accent) 75%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, #8c95ff), color-mix(in srgb, var(--accent-fill) 88%, #5566ef));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 32%, transparent);
}

.public-server-card,
.public-box-card,
.store-plan-card,
.xivy-store-v1 .xstore-card {
  border-color: color-mix(in srgb, var(--text) 11%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 92%, #0a111b), color-mix(in srgb, var(--bg-elevated-2) 86%, #090f19));
  box-shadow: var(--aaa-shadow-soft);
}

.public-server-card:hover,
.public-box-card:hover,
.store-plan-card:hover,
.xivy-store-v1 .xstore-card:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent),
    0 14px 30px rgba(0, 0, 0, 0.36);
  transform: translateY(-3px);
}

/* XivyStore subscriptions: larger tier icons + stronger hover accent */
.xivy-store-v1 .xstore-sub-grid .xstore-card .xstore-card-center-badge {
  overflow: visible;
}

.xivy-store-v1 .xstore-sub-grid .xstore-card .xstore-card-center-badge::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--t-fast) var(--ease-standard), transform var(--t-fast) var(--ease-standard);
}

.xivy-store-v1 .xstore-sub-grid .xstore-card.xstore-card-pro .xstore-card-center-badge::before {
  background: radial-gradient(circle, rgba(244, 184, 104, 0.42) 0%, rgba(244, 184, 104, 0.08) 58%, rgba(244, 184, 104, 0) 100%);
}

.xivy-store-v1 .xstore-sub-grid .xstore-card.xstore-card-premium .xstore-card-center-badge::before {
  background: radial-gradient(circle, rgba(196, 163, 255, 0.44) 0%, rgba(196, 163, 255, 0.1) 58%, rgba(196, 163, 255, 0) 100%);
}

.xivy-store-v1 .xstore-sub-grid .xstore-card .xstore-card-center-badge .xstore-card-badge-icon {
  transform: scale(2);
  transform-origin: center;
  transition: transform var(--t-fast) var(--ease-standard), filter var(--t-fast) var(--ease-standard);
  will-change: transform, filter;
}

.xivy-store-v1 .xstore-sub-grid .xstore-card:hover .xstore-card-center-badge::before {
  opacity: 1;
  transform: scale(1);
}

.xivy-store-v1 .xstore-sub-grid .xstore-card.xstore-card-pro:hover .xstore-card-center-badge .xstore-card-badge-icon {
  transform: scale(2.12);
  filter: drop-shadow(0 0 12px rgba(244, 184, 104, 0.78));
}

.xivy-store-v1 .xstore-sub-grid .xstore-card.xstore-card-premium:hover .xstore-card-center-badge .xstore-card-badge-icon {
  transform: scale(2.12);
  filter: drop-shadow(0 0 12px rgba(196, 163, 255, 0.82));
}

.incoming-call-toast,
.message-toast {
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 82%, transparent), color-mix(in srgb, var(--bg-elevated-2) 88%, transparent));
  box-shadow: var(--aaa-shadow-pop);
  backdrop-filter: blur(14px) saturate(124%);
}

.incoming-call-toast-avatar,
.message-toast-avatar {
  border-color: color-mix(in srgb, var(--text) 16%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 36%, var(--border)), color-mix(in srgb, var(--accent) 16%, var(--border)));
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .server-home:hover,
  .server-btn:hover,
  .friends-action-btn:hover,
  .top-action-btn:hover,
  .server-header-btn:hover,
  .icon-btn:hover,
  .call-shutter-btn:hover,
  .server-voice-hover-btn:hover,
  .channel-item:hover,
  .friend-item:hover,
  .member-row:hover,
  .public-server-card:hover,
  .public-box-card:hover,
  .store-plan-card:hover,
  .xivy-store-v1 .xstore-card:hover,
  .chat-action-btn.primary:hover {
    transform: none !important;
  }
}

/* Phase 2 AAA polish */
:root {
  --aaa-orb-speed: 26s;
  --aaa-shimmer-speed: 7.8s;
}

.main-surface {
  isolation: isolate;
}

.main-surface::before {
  content: "";
  position: absolute;
  inset: -22%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.38;
  filter: blur(64px);
  background:
    radial-gradient(44% 44% at 24% 28%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%),
    radial-gradient(40% 40% at 78% 68%, color-mix(in srgb, var(--accent-hover) 24%, transparent), transparent 74%),
    radial-gradient(36% 36% at 52% 18%, rgba(255, 255, 255, 0.12), transparent 82%);
  animation: aaa-orb-drift var(--aaa-orb-speed) ease-in-out infinite alternate;
}

@keyframes aaa-orb-drift {
  0% {
    transform: translate3d(-2.5%, -2%, 0) scale(1);
  }
  50% {
    transform: translate3d(2.2%, 1.6%, 0) scale(1.05);
  }
  100% {
    transform: translate3d(0.8%, -1.5%, 0) scale(0.98);
  }
}

.top-channel-bar > .content-area,
.chat-box,
.members-panel,
.public-servers-panel {
  position: relative;
  z-index: 1;
}

.public-servers-panel {
  border-color: color-mix(in srgb, var(--text) 11%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 90%, #080d17), color-mix(in srgb, var(--bg-secondary) 82%, #060b13));
  box-shadow: var(--aaa-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.xstore-inner-header {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 94%, #080d15), color-mix(in srgb, var(--bg-secondary) 88%, #060b13));
  border-bottom-color: color-mix(in srgb, var(--text) 12%, transparent);
  backdrop-filter: blur(10px) saturate(116%);
}

.xstore-inner-tab.active {
  border-bottom-color: color-mix(in srgb, var(--accent) 78%, transparent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 34%, transparent);
}

.channel-item {
  position: relative;
  overflow: hidden;
}

.channel-item > * {
  position: relative;
  z-index: 1;
}

.friend-item.active::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.36;
  background: linear-gradient(112deg, transparent 0%, rgba(255, 255, 255, 0.1) 36%, transparent 68%);
  transform: translateX(-130%);
  animation: aaa-shimmer var(--aaa-shimmer-speed) linear infinite;
}

@keyframes aaa-shimmer {
  0% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(130%);
  }
}

.dm-home-unread-badge,
.friend-unread-badge,
.server-unread-badge {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.36),
    0 0 0 0 rgba(237, 66, 69, 0.38);
  animation: aaa-badge-pulse 2.8s ease-out infinite;
}

@keyframes aaa-badge-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.36),
      0 0 0 0 rgba(237, 66, 69, 0.4);
  }
  64% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.36),
      0 0 0 8px rgba(237, 66, 69, 0);
  }
}

/* GPU tuning baseline (active window too): */
.main-surface::before {
  animation: none !important;
  opacity: 0.08 !important;
  filter: none !important;
  transform: none !important;
}

.friend-item.active::after,
.dm-home-unread-badge,
.friend-unread-badge,
.server-unread-badge {
  animation: none !important;
}

.window-topbar,
.channel-header,
.server-header,
.xstore-inner-header,
.incoming-call-toast,
.message-toast,
.message-actions {
  backdrop-filter: none !important;
}

/* Hard guarantee that media attachments stay visible. */
.message-attachment-img,
.message-attachment-video,
body .msg-attachment__image img,
body .msg-attachment__video video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.message-actions {
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: var(--aaa-radius-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated-2) 90%, #0a1019), color-mix(in srgb, var(--bg-elevated) 88%, #080f18));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(8px) saturate(116%);
  transform: translateY(-3px);
  transition:
    opacity var(--t-fast) var(--ease-standard),
    transform var(--t-fast) var(--ease-standard);
}

.message-item:hover .message-actions,
.message-item.message-item--editing .message-actions {
  transform: translateY(0);
}

.message-action-btn {
  border-color: color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: var(--aaa-radius-2xs);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 90%, #0a101a), color-mix(in srgb, var(--bg-elevated-2) 84%, #090f17));
  transition:
    border-color var(--t-fast) var(--ease-standard),
    background var(--t-fast) var(--ease-standard),
    color var(--t-fast) var(--ease-standard),
    transform var(--t-fast) var(--ease-standard);
}

.message-action-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  color: var(--text);
  transform: translateY(-1px);
}

.message-attachment-media,
.message-attachment-file {
  border: 1px solid color-mix(in srgb, var(--text) 13%, transparent);
  border-radius: var(--aaa-radius-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 86%, #09111b), color-mix(in srgb, var(--bg-elevated-2) 82%, #081019));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    border-color var(--t-base) var(--ease-standard),
    box-shadow var(--t-base) var(--ease-standard),
    transform var(--t-fast) var(--ease-out);
}

.message-attachment-media:hover,
.message-attachment-file:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.message-attachment-img,
.message-attachment-video {
  border-radius: inherit;
}

.md-code-block {
  border-color: color-mix(in srgb, var(--text) 13%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated-2) 90%, #080f18), color-mix(in srgb, var(--bg-elevated) 84%, #070e16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 18px rgba(0, 0, 0, 0.24);
}

.md-inline-code {
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--bg-elevated-2) 90%, #070d15);
}

.xchat-reply-ref {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  border-radius: var(--aaa-radius-xs);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 82%, #0a1019), color-mix(in srgb, var(--bg-elevated-2) 78%, #090f18));
  padding: 5px 8px;
  cursor: pointer;
  transition:
    border-color var(--t-fast) var(--ease-standard),
    background var(--t-fast) var(--ease-standard);
}

.xchat-reply-ref:hover {
  border-color: color-mix(in srgb, var(--accent) 56%, transparent);
  background: color-mix(in srgb, var(--accent-soft) 62%, var(--bg-elevated-2));
}

.xchat-reply-ref__bar {
  width: 3px;
  align-self: stretch;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, white 20%), color-mix(in srgb, var(--accent-fill) 90%, #5d67f2));
}

.xchat-reply-ref__author {
  font-size: 11px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 88%, var(--accent) 12%);
}

.xchat-reply-ref__text {
  min-width: 0;
  flex: 1;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xchat-action-btn {
  min-width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: var(--aaa-radius-2xs);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated-2) 90%, #0a1019), color-mix(in srgb, var(--bg-elevated) 88%, #090f18));
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    border-color var(--t-fast) var(--ease-standard),
    color var(--t-fast) var(--ease-standard),
    transform var(--t-fast) var(--ease-standard);
}

.xchat-action-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  color: var(--text);
  transform: translateY(-1px);
}

.call-shutter {
  border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 75%, transparent), color-mix(in srgb, var(--bg-main) 94%, transparent));
  backdrop-filter: blur(10px) saturate(118%);
}

.call-shutter.call-shutter--open::after {
  opacity: 0.78;
}

.call-shutter-title {
  font-weight: 800;
  letter-spacing: 0.02em;
}

.call-shutter-controls {
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated-2) 82%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px) saturate(118%);
}

.screen-share-overlay,
.gift-modal-overlay {
  background: rgba(4, 8, 14, 0.72);
  backdrop-filter: blur(10px) saturate(118%);
}

.screen-share-dialog,
.server-settings-dialog,
.server-settings-v2-dialog,
.gift-modal,
.create-group-dialog {
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 91%, #0b121e), color-mix(in srgb, var(--bg-elevated-2) 84%, #0a111c));
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.context-menu,
.context-submenu-panel {
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 90%, #0b121d), color-mix(in srgb, var(--bg-elevated-2) 86%, #090f19));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(9px) saturate(116%);
}

.context-menu-item,
.context-submenu-trigger {
  border-radius: var(--aaa-radius-xs);
}

.context-menu-item:hover,
.context-submenu-trigger:hover {
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--bg-elevated-2));
}

.public-servers-refresh-btn,
.xivy-store-v1 .xstore-topup-btn,
.xivy-store-v1 .xstore-buy-btn,
.xstore-buy-actions .xstore-buy-btn,
.public-server-join-btn {
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 8px 16px color-mix(in srgb, var(--accent) 24%, transparent);
}

.incoming-call-toast:not(.hidden),
.message-toast:not(.hidden) {
  animation: aaa-toast-in 240ms var(--ease-out);
}

@keyframes aaa-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-surface::before,
  .friend-item.active::after,
  .dm-home-unread-badge,
  .friend-unread-badge,
  .server-unread-badge,
  .incoming-call-toast:not(.hidden),
  .message-toast:not(.hidden) {
    animation: none !important;
  }

  .message-action-btn:hover,
  .xchat-action-btn:hover,
  .message-attachment-media:hover,
  .message-attachment-file:hover {
    transform: none !important;
  }
}

/* Phase 3 Ultra fidelity */
:root {
  --aaa-ultra-card: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 92%, #0b1320), color-mix(in srgb, var(--bg-elevated-2) 88%, #09111d));
  --aaa-ultra-card-soft: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 78%, #0a111b), color-mix(in srgb, var(--bg-elevated-2) 74%, #08101a));
  --aaa-ultra-border: color-mix(in srgb, var(--text) 14%, transparent);
  --aaa-ultra-accent-border: color-mix(in srgb, var(--accent) 62%, transparent);
}

.window-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 20%, transparent), transparent);
  opacity: 0.7;
}

.server-rail::before,
.channel-rail::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--accent) 30%, transparent) 45%, transparent 100%);
  opacity: 0.55;
}

.channel-scroll,
.members-panel-list,
.chat-messages {
  scrollbar-gutter: stable;
}

.chat-messages {
  position: relative;
}

.chat-messages::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 18px;
  margin: -2px 0 4px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(180deg, color-mix(in srgb, var(--chat-bg) 95%, transparent), transparent);
}

.chat-messages::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: 18px;
  margin-top: -18px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(0deg, color-mix(in srgb, var(--chat-bg) 95%, transparent), transparent);
}

.chat-date-separator span,
.chat-unread-separator span {
  backdrop-filter: blur(6px) saturate(110%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.message-item.search-highlight .message-body,
.chat-row.search-highlight .message-body,
.xchat-msg.search-highlight .xchat-body,
.xchat-msg.search-highlight .xchat-content,
.xchat-row.search-highlight .xchat-body,
.xchat-row.search-highlight .xchat-content {
  background: color-mix(in srgb, var(--accent-soft) 88%, transparent);
  border-radius: var(--aaa-radius-xs);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 44%, transparent);
}

.message-item.search-highlight-current .message-body,
.chat-row.search-highlight-current .message-body,
.xchat-msg.search-highlight-current .xchat-body,
.xchat-msg.search-highlight-current .xchat-content,
.xchat-row.search-highlight-current .xchat-body,
.xchat-row.search-highlight-current .xchat-content {
  background: color-mix(in srgb, var(--accent-soft) 94%, transparent);
  border-radius: var(--aaa-radius-xs);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 66%, transparent),
    0 8px 20px color-mix(in srgb, var(--accent) 24%, transparent);
}

.message-item.message-item--reply-jump-highlight {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent),
    0 10px 22px color-mix(in srgb, var(--accent) 24%, transparent);
}

.server-voice-room-view {
  background:
    radial-gradient(900px 380px at 45% -22%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-main) 90%, #070c15), color-mix(in srgb, var(--bg-main) 96%, #050a12));
}

.server-voice-tile {
  border-color: var(--aaa-ultra-border);
  background: var(--aaa-ultra-card);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.server-voice-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.09), transparent 32%, transparent 70%, rgba(255, 255, 255, 0.04));
  opacity: 0.5;
}

.server-voice-tile-media {
  border-color: color-mix(in srgb, var(--text) 13%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.server-voice-tile.is-streaming .server-voice-tile-media {
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent),
    0 12px 26px rgba(0, 0, 0, 0.3);
}

.server-voice-tile-fullscreen-btn {
  border-color: color-mix(in srgb, var(--text) 18%, transparent);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34);
}

.server-voice-tile-actions {
  border-color: color-mix(in srgb, var(--text) 16%, transparent);
  background: color-mix(in srgb, var(--bg-elevated-2) 88%, #0a1018);
}

.server-voice-tile-action-btn {
  border-color: color-mix(in srgb, var(--text) 18%, transparent);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34);
}

.call-screen-share-view,
.call-shutter.call-screen-layout-c .call-participant-card {
  border-color: color-mix(in srgb, var(--text) 15%, transparent);
  background: var(--aaa-ultra-card-soft);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.call-shutter.call-screen-layout-c .call-participant-card.is-speaking,
.call-shutter.call-screen-layout-b .call-screen-share-view.is-speaking {
  border-color: var(--aaa-ultra-accent-border);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 46%, transparent),
    0 0 28px color-mix(in srgb, var(--accent) 34%, transparent);
}

.call-participant-body {
  backdrop-filter: blur(4px) saturate(112%);
}

.update-notice-panel,
.mail-inbox-panel {
  border-color: var(--aaa-ultra-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 90%, #0b121c), color-mix(in srgb, var(--bg-elevated-2) 86%, #090f18));
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px) saturate(116%);
}

.mail-inbox-item,
.update-notice-btn,
.mail-inbox-clear-btn {
  border-color: color-mix(in srgb, var(--text) 14%, transparent);
}

.mail-inbox-item:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent-soft) 56%, var(--bg-elevated-2));
}

#xivy-drop-overlay {
  background: rgba(5, 9, 14, 0.7);
  backdrop-filter: blur(8px) saturate(112%);
}

.pa-drop-overlay-inner {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 92%, #0b121c), color-mix(in srgb, var(--bg-elevated-2) 86%, #090f18));
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.screen-share-overlay:not(.hidden) .screen-share-dialog,
.screen-share-overlay:not(.hidden) .server-settings-dialog,
.screen-share-overlay:not(.hidden) .server-settings-v2-dialog,
.screen-share-overlay:not(.hidden) .create-group-dialog,
.gift-modal-overlay:not(.hidden) .gift-modal {
  animation: aaa-modal-up 260ms var(--ease-out);
}

@keyframes aaa-modal-up {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.screen-share-dialog input[type="text"],
.screen-share-dialog input[type="number"],
.screen-share-dialog input[type="password"],
.screen-share-dialog input[type="email"],
.screen-share-dialog textarea,
.screen-share-dialog select {
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: var(--aaa-radius-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 90%, #09111b), color-mix(in srgb, var(--bg-elevated-2) 84%, #080f18));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.screen-share-dialog input[type="text"]:focus,
.screen-share-dialog input[type="number"]:focus,
.screen-share-dialog input[type="password"]:focus,
.screen-share-dialog input[type="email"]:focus,
.screen-share-dialog textarea:focus,
.screen-share-dialog select:focus {
  border-color: color-mix(in srgb, var(--accent) 66%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
    0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  outline: none;
}

.screen-share-start-btn,
.screen-share-dialog .primary,
.screen-share-dialog .secondary,
.coins-insufficient-actions .primary,
.coins-insufficient-actions .secondary {
  border-radius: var(--aaa-radius-sm);
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-base) var(--ease-standard),
    border-color var(--t-base) var(--ease-standard);
}

.screen-share-start-btn:hover,
.screen-share-dialog .primary:hover,
.screen-share-dialog .secondary:hover,
.coins-insufficient-actions .primary:hover,
.coins-insufficient-actions .secondary:hover {
  transform: translateY(-1px);
}

.screen-share-start-btn:active,
.screen-share-dialog .primary:active,
.screen-share-dialog .secondary:active,
.coins-insufficient-actions .primary:active,
.coins-insufficient-actions .secondary:active {
  transform: translateY(0);
}

/* XivyChat (new renderer) — high specificity to override injected base styles */
body .xchat-item-wrapper {
  position: relative;
  padding: 1px 0;
}

body .xchat-msg {
  margin: 0 4px;
  padding: 4px 12px;
  border-radius: var(--aaa-radius-md);
  border: 1px solid transparent;
  transition:
    border-color var(--t-fast) var(--ease-standard),
    background var(--t-fast) var(--ease-standard),
    box-shadow var(--t-fast) var(--ease-standard),
    transform var(--t-fast) var(--ease-out);
}

body .xchat-msg:hover {
  border-color: color-mix(in srgb, var(--text) 14%, transparent);
  background: color-mix(in srgb, var(--bg-elevated-2) 60%, transparent);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

body .xchat-msg .xchat-body {
  padding: 8px 10px 7px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: var(--aaa-radius-sm);
  background: var(--aaa-ultra-card-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
}

body .xchat-msg--other .xchat-body {
  border-top-left-radius: var(--aaa-radius-xs);
}

body .xchat-msg--own .xchat-body {
  border-color: color-mix(in srgb, var(--accent) 44%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 54%, var(--bg-elevated)), color-mix(in srgb, var(--accent-soft) 28%, var(--bg-elevated-2)));
}

body .xchat-msg--pending .xchat-body {
  opacity: 0.86;
}

body .xchat-msg--failed .xchat-body {
  border-color: color-mix(in srgb, var(--danger) 52%, transparent);
}

body .xchat-msg--standalone,
body .xchat-msg--start {
  margin-top: 3px;
}

body .xchat-msg .xchat-header {
  margin-bottom: 5px;
}

body .xchat-msg .xchat-author {
  font-weight: 700;
  letter-spacing: 0.01em;
}

body .xchat-msg .xchat-time,
body .xchat-msg .xchat-edited {
  color: color-mix(in srgb, var(--muted) 82%, var(--text) 18%);
}

body .xchat-avatar {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated-2) 88%, #0a111c), color-mix(in srgb, var(--bg-elevated) 90%, #09101a));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body .xchat-avatar__initials {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #96a0ff), color-mix(in srgb, var(--accent-fill) 88%, #5b6bf0));
}

body .xchat-content {
  color: color-mix(in srgb, var(--text) 94%, white 6%);
}

body .xchat-content strong {
  color: color-mix(in srgb, var(--text) 98%, white 2%);
  font-weight: 800;
}

body .xchat-content em {
  color: color-mix(in srgb, var(--text) 82%, var(--muted) 18%);
}

body .xchat-link {
  text-underline-offset: 2px;
}

body .xchat-code {
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 6px;
  padding: 1px 6px;
  background: color-mix(in srgb, var(--bg-elevated-2) 90%, #08101a);
}

body .xchat-codeblock {
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: var(--aaa-radius-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated-2) 92%, #070f18), color-mix(in srgb, var(--bg-elevated) 88%, #070e16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 16px rgba(0, 0, 0, 0.2);
}

body .msg-attachment {
  margin-top: 7px;
}

body .msg-attachment__image,
body .msg-attachment__video,
body .msg-attachment__audio,
body .msg-attachment__file {
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated-2) 88%, #09101a), color-mix(in srgb, var(--bg-elevated) 86%, #081018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body .msg-attachment__file {
  border-radius: var(--aaa-radius-sm);
  padding: 10px 12px;
}

body .msg-attachment__file-name {
  font-weight: 600;
}

body .xchat-reactions {
  gap: 6px;
  margin-top: 7px;
}

body .xchat-reaction {
  border-color: color-mix(in srgb, var(--text) 13%, transparent);
  border-radius: 999px;
  padding: 3px 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 88%, #0a101b), color-mix(in srgb, var(--bg-elevated-2) 84%, #09101a));
  transition:
    border-color var(--t-fast) var(--ease-standard),
    transform var(--t-fast) var(--ease-standard);
}

body .xchat-reaction:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  transform: translateY(-1px);
}

body .xchat-reaction--active {
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--accent) 26%, transparent);
}

body .xchat-actions {
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: var(--aaa-radius-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 90%, #0b121d), color-mix(in srgb, var(--bg-elevated-2) 86%, #090f18));
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
  padding: 4px;
  gap: 4px;
}

body .xchat-msg:hover .xchat-actions {
  opacity: 1;
}

body .xchat-action-btn {
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: var(--aaa-radius-xs);
  padding: 4px 7px;
  background: color-mix(in srgb, var(--bg-elevated-2) 70%, transparent);
}

body .xchat-action-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  background: color-mix(in srgb, var(--accent-soft) 66%, var(--bg-elevated-2));
}

body .xchat-unread-divider {
  padding-top: 12px;
  padding-bottom: 10px;
}

body .xchat-unread-divider__label {
  border: 1px solid color-mix(in srgb, var(--danger) 48%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

body .xchat-send-status {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body .xchat-send-status--failed {
  border: 1px solid color-mix(in srgb, var(--danger) 52%, transparent);
  border-radius: 999px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

body .xc-jump-btn {
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 32%, transparent);
  backdrop-filter: blur(6px) saturate(114%);
}

body .xchat-loading,
body .xchat-error {
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: var(--aaa-radius-sm);
  background: var(--aaa-ultra-card-soft);
}

/* Correct scrollbar selector (safety override) */
::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 38%, var(--border)), color-mix(in srgb, var(--accent) 18%, var(--border)));
  border-radius: 999px;
}

/* Keep media always visible in both legacy and XivyChat renderers. */
.message-attachment-img,
.message-attachment-video,
.msg-attachment__image,
.msg-attachment__video,
.msg-attachment__image img,
.msg-attachment__video video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 1180px) {
  body .xchat-msg .xchat-body {
    padding: 7px 9px 6px;
  }

  body .xchat-actions {
    top: -12px;
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-share-overlay:not(.hidden) .screen-share-dialog,
  .screen-share-overlay:not(.hidden) .server-settings-dialog,
  .screen-share-overlay:not(.hidden) .server-settings-v2-dialog,
  .screen-share-overlay:not(.hidden) .create-group-dialog,
  .gift-modal-overlay:not(.hidden) .gift-modal,
  .xchat-msg:hover,
  .xchat-reaction:hover,
  .screen-share-start-btn:hover,
  .screen-share-dialog .primary:hover,
  .screen-share-dialog .secondary:hover {
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Discord-like chat pass + remove left orange strip
   ========================================================================== */

/* Remove left rail orange strip and active marker bars */
.server-rail::before,
.channel-rail::before,
.server-home.active::before,
.server-btn.active::before {
  content: none !important;
  display: none !important;
}

/* Faster, cleaner list highlight response */
.channel-scroll .channel-item,
#friends-list .friend-item,
#members-panel-list .member-row {
  transition:
    background-color 42ms linear,
    color 42ms linear,
    border-color 42ms linear !important;
}

.channel-scroll .channel-item:hover,
#friends-list .friend-item:hover,
#members-panel-list .member-row:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Top bars close to Discord feel */
#top-channel-bar .top-channel-bar-row,
#server-top-channel-bar .server-top-channel-bar-row {
  background: color-mix(in srgb, var(--bg-secondary) 92%, #0b1019) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  box-sizing: border-box;
}

/* Keep chat header baseline aligned with left rail while call shutter is collapsed. */
.call-shutter:not(.call-shutter--open) {
  margin: 0 !important;
}

.friends-view .channel-header {
  min-height: var(--server-panel-header-height) !important;
  max-height: var(--server-panel-header-height) !important;
  padding: 0 16px !important;
  box-sizing: border-box;
}

#top-channel-bar .top-channel-bar-row {
  height: var(--server-panel-header-height) !important;
  min-height: var(--server-panel-header-height) !important;
  padding: 0 16px !important;
}

#server-top-channel-bar .server-top-channel-bar-row {
  height: var(--server-panel-header-height) !important;
  min-height: var(--server-panel-header-height) !important;
  padding: 0 var(--server-panel-header-padding-x) !important;
}

#top-channel-bar .top-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

#server-top-channel-bar .top-action-btn {
  width: var(--server-panel-header-btn-size);
  height: var(--server-panel-header-btn-size);
  border-radius: 4px;
}

#server-top-channel-bar .top-action-btn .lucide-icon {
  width: var(--server-panel-header-btn-icon-size);
  height: var(--server-panel-header-btn-icon-size);
}

#profile-overlay.profile-overlay-popout .profile-popout-compose:not([hidden]) {
  flex-wrap: nowrap !important;
  min-height: 56px;
  border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 92%, #0b1018), color-mix(in srgb, var(--bg-elevated-2) 86%, #090f17)) !important;
  padding: 10px 12px 12px !important;
}

#profile-overlay.profile-overlay-popout .profile-popout-message-input {
  min-height: 38px;
  max-height: 110px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-main) 76%, var(--bg-elevated));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  line-height: 1.35;
  outline: none;
}

#profile-overlay.profile-overlay-popout .profile-popout-message-input::placeholder {
  color: var(--muted-2);
}

#profile-overlay.profile-overlay-popout .profile-popout-message-input:focus {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent);
}

#profile-overlay.profile-overlay-popout .profile-popout-send-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px !important;
  align-self: flex-end;
}

#profile-overlay.profile-overlay-popout .profile-popout-send-btn .lucide-icon {
  width: 15px;
  height: 15px;
}

.friends-main .top-channel-bar-row .channel-title#view-title,
.server-main .top-channel-bar-row .channel-title#server-main-panel-title {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
  min-height: 100% !important;
  line-height: 1 !important;
}

#top-channel-bar .top-channel-left .dm-header-add-friend-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-standard), opacity var(--t-fast) var(--ease-standard);
}

#top-channel-bar .top-channel-left .dm-header-add-friend-btn:hover {
  color: var(--accent);
}

#top-channel-bar .top-channel-left .dm-header-add-friend-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 62%, transparent);
  outline-offset: 4px;
  border-radius: 6px;
}

#top-channel-bar .top-channel-left .dm-header-add-friend-btn.is-pending,
#top-channel-bar .top-channel-left .dm-header-add-friend-btn:disabled {
  color: color-mix(in srgb, var(--muted) 78%, var(--text) 22%);
  opacity: 0.95;
  cursor: default;
}

/* ── Кнопки входящего запроса дружбы (Принять / Отклонить) ── */
#dm-header-incoming-request-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
#dm-header-incoming-request-wrap.hidden {
  display: none !important;
}
.dm-incoming-req-label {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1;
  user-select: none;
}
.dm-incoming-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition:
    background var(--t-fast) var(--ease-standard),
    border-color var(--t-fast) var(--ease-standard),
    color var(--t-fast) var(--ease-standard),
    opacity var(--t-fast) var(--ease-standard);
}
.dm-incoming-accept {
  border: none;
  background: var(--accent-fill);
  color: #fff;
}
.dm-incoming-accept:hover {
  background: var(--accent-fill-hover);
}
.dm-incoming-accept:active {
  transform: scale(0.97);
}
.dm-incoming-decline {
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
}
.dm-incoming-decline:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-color: color-mix(in srgb, var(--border) 80%, var(--text) 20%);
}
.dm-incoming-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* Main chat area: flatter and denser like Discord */
#friends-chat-panel .chat-box,
.server-main .chat-box {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--chat-bg) !important;
  padding: 0 !important;
}

#friends-chat-panel .chat-messages,
.server-main .chat-messages {
  padding-top: 10px !important;
  scrollbar-gutter: stable;
}

.chat-messages::before,
.chat-messages::after {
  display: none !important;
}

/* Legacy message renderer rows */
.message-item,
.chat-row {
  margin: 0 !important;
  padding: 2px 16px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color 56ms linear !important;
}

.message-item:hover,
.chat-row:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent) !important;
}

.message-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background-color: color-mix(in srgb, var(--bg-elevated-2) 82%, #121722) !important;
}

.message-avatar img {
  border-radius: 0 !important;
}

.message-header {
  gap: 6px !important;
  margin-bottom: 1px;
}

.message-author {
  font-size: 15px !important;
  font-weight: 600 !important;
}

.message-time,
.chat-meta {
  font-size: 12px !important;
}

.message-body {
  margin-top: 0 !important;
  font-size: 15px !important;
  line-height: 1.36 !important;
}

.message-actions {
  top: -8px !important;
  right: 12px !important;
  transform: translateY(2px) !important;
  transition: opacity 70ms linear, transform 70ms linear !important;
}

.message-item:hover .message-actions {
  transform: translateY(0) !important;
}

.message-reactions {
  margin-top: 5px !important;
}

/* New XivyChat renderer (xchat-*) */
body .xchat-item-wrapper {
  padding: 0 !important;
}

body .xchat-msg {
  margin: 0 !important;
  padding: 2px 16px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 56ms linear !important;
}

body .xchat-msg:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent) !important;
}

body .xchat-msg .xchat-body {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .xchat-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background-color: color-mix(in srgb, var(--bg-elevated-2) 82%, #121722) !important;
}

body .xchat-avatar__img {
  border-radius: 0 !important;
}

body .xchat-header {
  gap: 6px !important;
  margin-bottom: 1px !important;
}

body .xchat-author {
  font-size: 15px !important;
  font-weight: 600 !important;
}

body .xchat-time,
body .xchat-edited {
  font-size: 12px !important;
}

body .xchat-content {
  font-size: 15px !important;
  line-height: 1.36 !important;
}

body .xchat-reply-ref {
  margin-bottom: 4px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

body .xchat-reactions {
  margin-top: 5px !important;
}

body .xchat-actions {
  top: -8px !important;
  right: 12px !important;
  padding: 2px 4px !important;
  border-radius: 0 !important;
  transform: translateY(2px) !important;
  transition: opacity 70ms linear, transform 70ms linear !important;
}

body .xchat-msg:hover .xchat-actions {
  transform: translateY(0) !important;
}

/* Composer: closer to Discord input stripe */
#friends-chat-panel .chat-input-row,
.server-main .chat-input-row.server-chat-row {
  background: color-mix(in srgb, var(--bg-elevated) 92%, #121722) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  min-height: 48px !important;
}

#friends-chat-panel .chat-input-row:focus-within,
.server-main .chat-input-row.server-chat-row:focus-within {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 58%, transparent) !important;
}

.chat-input-row .chat-text-input {
  line-height: 1.32 !important;
}

.chat-action-btn {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chat-action-btn.primary {
  border-radius: 0 !important;
  background: var(--accent-fill) !important;
}

.chat-action-btn.primary:hover {
  background: var(--accent-fill-hover) !important;
  transform: none !important;
}

/* Chat geometry policy:
   - no rounding in chat content
   - keep compose row rounded always */
#friends-chat-panel .chat-box :is(
  .message-item,
  .chat-row,
  .message-actions,
  .message-action-btn,
  .message-reply-preview,
  .message-reactions,
  .reaction-chip,
  .message-attachment-media,
  .message-attachment-file,
  .message-attachment-download-btn,
  .md-code-block,
  .md-inline-code,
  .reply-banner,
  .upload-progress-banner,
  .pa-panel,
  .pa-media-card,
  .pa-file-item,
  .pa-clear-btn,
  .pa-remove-btn,
  .xchat-msg,
  .xchat-body,
  .xchat-actions,
  .xchat-action-btn,
  .xchat-reaction,
  .xchat-reply-ref,
  .xchat-code,
  .xchat-codeblock,
  .xchat-unread-divider__label,
  .msg-attachment,
  .msg-attachment__file,
  .msg-attachment__image,
  .msg-attachment__video,
  .msg-attachment__audio,
  .message-avatar,
  .xchat-avatar
),
.server-main .chat-box :is(
  .message-item,
  .chat-row,
  .message-actions,
  .message-action-btn,
  .message-reply-preview,
  .message-reactions,
  .reaction-chip,
  .message-attachment-media,
  .message-attachment-file,
  .message-attachment-download-btn,
  .md-code-block,
  .md-inline-code,
  .reply-banner,
  .upload-progress-banner,
  .pa-panel,
  .pa-media-card,
  .pa-file-item,
  .pa-clear-btn,
  .pa-remove-btn,
  .xchat-msg,
  .xchat-body,
  .xchat-actions,
  .xchat-action-btn,
  .xchat-reaction,
  .xchat-reply-ref,
  .xchat-code,
  .xchat-codeblock,
  .xchat-unread-divider__label,
  .msg-attachment,
  .msg-attachment__file,
  .msg-attachment__image,
  .msg-attachment__video,
  .msg-attachment__audio,
  .message-avatar,
  .xchat-avatar
) {
  border-radius: 0 !important;
}

#friends-chat-panel .chat-input-row,
.server-main .chat-input-row.server-chat-row {
  border-radius: 14px !important;
}

/* Keep avatars round while chat geometry stays rectangular */
#friends-chat-panel .chat-box .message-avatar,
.server-main .chat-box .message-avatar,
#friends-chat-panel .chat-box .message-avatar img,
.server-main .chat-box .message-avatar img,
#friends-chat-panel .chat-box .xchat-avatar,
.server-main .chat-box .xchat-avatar,
#friends-chat-panel .chat-box .xchat-avatar__img,
.server-main .chat-box .xchat-avatar__img,
#friends-chat-panel .chat-box .msg-avatar__initials,
.server-main .chat-box .msg-avatar__initials {
  border-radius: 50% !important;
}

/* Hard reset of chat top corners */
#friends-chat-panel.content-panel,
.server-main .content-panel,
#friends-chat-panel .chat-box,
.server-main .chat-box {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Always-on style accent for compose frame */
#friends-chat-panel .chat-input-row,
.server-main .chat-input-row.server-chat-row {
  border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
    0 0 14px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

#friends-chat-panel .chat-input-row:focus-within,
.server-main .chat-input-row.server-chat-row:focus-within {
  border-color: color-mix(in srgb, var(--accent) 78%, transparent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 44%, transparent),
    0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent),
    0 0 18px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

/* Badge hover highlight width fix for nick labels */
#friends-list .friend-item.has-user-badge .friend-name {
  flex: 0 1 auto !important;
  width: fit-content;
  max-width: calc(100% - 34px);
}

#friends-list .friend-item.has-user-badge:hover .friend-name,
#members-panel-list .member-row.has-user-badge:hover .member-name {
  display: inline-flex !important;
  width: fit-content;
  max-width: 100%;
  padding: 2px 5px !important;
  box-sizing: border-box;
}

.user-bar .user-name {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Low-latency hover tuning for chat/channel lists */
:root {
  --aaa-hover-fast: 48ms;
}

.channel-scroll .channel-item,
#friends-list .friend-item,
#members-panel-list .member-row {
  transition:
    background-color var(--aaa-hover-fast) linear,
    border-color var(--aaa-hover-fast) linear,
    color var(--aaa-hover-fast) linear,
    opacity var(--aaa-hover-fast) linear !important;
  will-change: auto;
}

.channel-scroll .channel-item:hover,
#friends-list .friend-item:hover,
#members-panel-list .member-row:hover {
  transform: none !important;
  box-shadow: none !important;
}

#friends-list .friend-item.active::after {
  animation: none !important;
  opacity: 0.12;
}

#friends-list .user-badge-hover-layer,
#members-panel-list .user-badge-hover-layer {
  transition: opacity 90ms linear !important;
}

/* Discord-like active marker strips in left rail */
.server-home.active::before,
.server-btn.active::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: -10px !important;
  top: 50% !important;
  width: 4px !important;
  height: 62% !important;
  transform: translateY(-50%) !important;
  border-radius: 0 999px 999px 0 !important;
  background: color-mix(in srgb, #ffffff 86%, var(--accent) 14%) !important;
  box-shadow: 2px 0 10px rgba(255, 255, 255, 0.34) !important;
  animation: none !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.channel-scroll .channel-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 68%;
  transform: translateY(-50%);
  border-radius: 0 999px 999px 0;
  background: color-mix(in srgb, #ffffff 84%, var(--accent) 16%);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.28);
  pointer-events: none;
  z-index: 2;
}

/* Valid scrollbar selector override */
::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 38%, var(--border)), color-mix(in srgb, var(--accent) 18%, var(--border)));
  border-radius: 999px;
}

/* GPU stability pass: keep visuals but avoid expensive always-on compositing. */
body::after {
  opacity: 0.012 !important;
  mix-blend-mode: normal !important;
  background-size: 320px 320px !important;
}

.user-bar,
.dm-call-sidebar-panel,
.call-shutter,
.call-shutter-controls,
.server-voice-hover-controls-inner,
.settings-overlay,
.gift-modal-overlay,
.screen-share-overlay,
#xivy-drop-overlay,
.context-menu,
.context-submenu-panel,
.chat-date-separator span,
.chat-unread-separator span,
.call-participant-body,
.update-notice-panel,
.mail-inbox-panel,
body .xc-jump-btn,
.app-style-locked-badge {
  backdrop-filter: none !important;
}

.server-voice-tile-video.is-locked {
  filter: blur(22px) saturate(0.52) brightness(0.42) !important;
  transform: scale(1.04) !important;
}

/* ==========================================================================
   Server channels panel: closer to Discord
   ========================================================================== */
.server-view {
  background: var(--server-panel-bg);
}

.server-view .server-header {
  min-height: var(--server-panel-header-height);
  max-height: var(--server-panel-header-height);
  padding: 0 var(--server-panel-header-padding-x) !important;
  gap: 0;
  justify-content: center;
  background: var(--server-panel-header-bg) !important;
  border-bottom: 1px solid var(--server-panel-border-color);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.36) !important;
}

.server-view .server-header-top {
  min-height: var(--server-panel-header-height);
  height: var(--server-panel-header-height);
}

.server-view .server-name {
  font-size: var(--server-panel-title-font-size);
  font-weight: 700;
  color: var(--server-panel-title-color);
  letter-spacing: 0;
  text-align: left;
  padding-right: var(--server-panel-title-padding-right);
}

.server-view .server-header-actions {
  gap: var(--server-panel-header-actions-gap);
}

.server-view .server-header-btn {
  width: var(--server-panel-header-btn-size);
  height: var(--server-panel-header-btn-size);
  border: 0;
  border-radius: 4px;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--server-panel-text-muted);
}

.server-view .server-header-btn:hover {
  background: var(--server-panel-btn-hover-bg) !important;
  border-color: transparent !important;
  color: var(--server-panel-text-main);
  transform: none !important;
}

.server-view .server-header-btn .custom-icon,
.server-view .server-header-btn .lucide-icon {
  width: var(--server-panel-header-btn-icon-size);
  height: var(--server-panel-header-btn-icon-size);
}

.server-view .channel-scroll {
  padding: var(--server-panel-scroll-padding-top) var(--server-panel-scroll-padding-x) var(--server-panel-scroll-padding-bottom) !important;
  gap: var(--server-panel-scroll-gap);
}

.server-view .channel-section {
  gap: var(--server-panel-section-gap);
}

.server-view .section-title-row {
  margin: var(--server-panel-section-title-margin-top) 2px 2px;
  min-height: var(--server-panel-section-title-min-height);
}

.server-view .section-title {
  margin-bottom: 0;
  font-size: var(--server-panel-section-title-font-size);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--server-panel-text-muted);
}

.server-view .section-add-btn {
  width: var(--server-panel-add-btn-size);
  height: var(--server-panel-add-btn-size);
  border-radius: 4px;
  color: var(--server-panel-text-muted);
}

.server-view .section-add-btn:hover {
  color: var(--server-panel-text-main);
  background: var(--server-panel-btn-hover-bg);
}

.server-view .section-add-btn .custom-icon {
  width: var(--server-panel-add-icon-size);
  height: var(--server-panel-add-icon-size);
  filter: none;
}

.server-view .section-add-btn .section-add-icon {
  width: var(--server-panel-add-icon-size);
  height: var(--server-panel-add-icon-size);
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.server-view .channel-item {
  min-height: var(--server-panel-channel-height);
  height: var(--server-panel-channel-height);
  padding: 0 var(--server-panel-channel-padding-x);
  gap: var(--server-panel-channel-gap);
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--server-panel-text-muted) !important;
  box-shadow: none !important;
  transform: none !important;
}

.server-view .channel-item .channel-label {
  font-size: var(--server-panel-channel-label-size);
  font-weight: 500;
  margin-left: var(--server-panel-channel-label-shift-x);
}

.server-view .channel-item:hover,
.server-view .channel-item:focus-within {
  background: var(--server-panel-row-hover-bg) !important;
  border-color: transparent !important;
  color: var(--server-panel-text-main) !important;
}

.server-view .channel-item.active {
  background: var(--server-panel-row-active-bg) !important;
  border-color: transparent !important;
  color: var(--server-panel-text-strong) !important;
}

.server-view .channel-item.has-unread {
  color: var(--server-panel-text-main) !important;
}

.server-view .channel-scroll .channel-item.active::before {
  content: none !important;
  display: none !important;
}

.server-view .channel-icon {
  width: var(--server-panel-channel-icon-size);
  height: var(--server-panel-channel-icon-size);
  font-size: calc(var(--server-panel-channel-icon-size) - 11px);
  background: transparent !important;
  border-radius: 0 !important;
  color: currentColor !important;
}

.server-view .channel-icon-image {
  width: var(--server-panel-channel-icon-image-size) !important;
  height: var(--server-panel-channel-icon-image-size) !important;
  filter: none !important;
}

.server-view .channel-item .channel-icon.voice-icon .channel-icon-image {
  width: calc(var(--server-panel-channel-icon-image-size) + 1px) !important;
  height: calc(var(--server-panel-channel-icon-image-size) + 1px) !important;
}

.server-view .text-channel-settings-btn,
.server-view .voice-channel-settings-btn {
  width: var(--server-panel-channel-settings-btn-size);
  height: var(--server-panel-channel-settings-btn-size);
  margin-left: 4px;
  border-radius: 4px;
  color: var(--server-panel-text-muted);
}

.server-view .text-channel-settings-btn .custom-icon,
.server-view .voice-channel-settings-btn .custom-icon {
  width: var(--server-panel-channel-settings-icon-size);
  height: var(--server-panel-channel-settings-icon-size);
  filter: none;
}

.server-view .text-channel-settings-btn:hover,
.server-view .voice-channel-settings-btn:hover {
  background: var(--server-panel-bg);
  color: var(--server-panel-text-main);
}

.server-view .voice-channel-participants {
  padding: 2px 8px 8px var(--server-panel-participants-padding-left) !important;
  gap: 1px;
}

.server-view .voice-participant-row {
  min-height: var(--server-panel-participant-row-height);
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--server-panel-text-muted);
}

.server-view .voice-participant-row:hover {
  background: var(--server-panel-row-hover-bg);
  color: var(--server-panel-text-main);
}

.server-view .voice-participant-avatar {
  width: var(--server-panel-participant-avatar-size);
  height: var(--server-panel-participant-avatar-size);
  border: 0;
  background: var(--server-panel-avatar-bg);
  font-size: var(--server-panel-participant-avatar-font-size);
}