.desktop-chat-only { display: none; }
.fdml-item[hidden] { display: none !important; }
button.fdml-item { font: inherit; color: inherit; text-align: left; width: 100%; }
@media (min-width: 1280px) {
  body.desktop-chat-open { --chat-right: 0px; --chat-list-width: 280px; }
  body.desktop-chat-open.agc-open:has(#agentChatPanel.agc-desktop-expanded) { --chat-right: var(--agent-reserved); --chat-list-width: 240px; }
  body.desktop-chat-open #desktopAgentLauncher { top: 12px; bottom: auto; right: calc(var(--chat-right) + 16px); width: 44px; height: 44px; }
  body.desktop-chat-open.agc-open #agentChatPanel:not(.agc-desktop-expanded) {
    top: 76px;
    bottom: auto;
    height: min(620px, calc(100dvh - 172px));
  }
  body.desktop-chat-open #desktopNavigation { z-index: 10002; }
  body.desktop-chat-open .desktop-chat-only:not([hidden]) { display: block; }
  body.desktop-chat-open #friendsDmListOverlay {
    position: fixed;
    inset: 0 var(--chat-right) 0 280px;
    width: auto;
    padding: 0;
    background: #17191b;
    backdrop-filter: none;
    align-items: stretch;
    justify-content: flex-start;
    z-index: 10000;
  }
  body.desktop-chat-open #friendsDmListOverlay::after {
    content: 'Select a conversation';
    flex: 1;
    align-self: center;
    text-align: center;
    color: #a7adb5;
    padding: 24px;
  }
  body.desktop-chat-open .fdml-sheet {
    width: var(--chat-list-width);
    max-width: none;
    height: 100dvh;
    max-height: none;
    flex: 0 0 var(--chat-list-width);
    border: 0;
    border-right: 1px solid #303438;
    border-radius: 0;
    background: #17191b;
    box-shadow: none;
    animation: none;
    overflow: hidden;
  }
  body.desktop-chat-open .fdml-handle-bar,
  body.desktop-chat-open .fdml-close,
  body.desktop-chat-open #dmOverlay .dm-back-btn { display: none !important; }
  body.desktop-chat-open .fdml-header { padding: 24px 20px 16px; flex-shrink: 0; }
  .desktop-chat-tools { padding: 0 16px 16px; }
  #desktopChatSearch { width: 100%; box-sizing: border-box; padding: 10px 12px; color: #eef0f2; background: #202327; border: 1px solid #3a3f46; border-radius: 6px; }
  .desktop-chat-tools label { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #bfc4cb; font-size: 13px; }
  body.desktop-chat-open .fdml-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0; }
  body.desktop-chat-open .fdml-item { padding: 16px; border: 0; border-radius: 0; background: transparent; border-left: 3px solid transparent; }
  body.desktop-chat-open .fdml-item:hover { background: #22262a; }
  body.desktop-chat-open .fdml-item[aria-current="true"] { background: #332e1e; border-left-color: #f4c64f; }
  body.desktop-chat-open .fdml-info { min-width: 0; }
  body.desktop-chat-open .fdml-name, body.desktop-chat-open .fdml-handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #desktopChatNoMatches { padding: 20px; color: #a7adb5; }
  body.desktop-chat-open #dmOverlay {
    position: fixed;
    inset: 0 var(--chat-right) 0 calc(280px + var(--chat-list-width));
    width: auto;
    padding: 0;
    background: #17191b;
    backdrop-filter: none;
    z-index: 10001;
  }
  body.desktop-chat-open #dmOverlay .dm-container {
    width: 100%; max-width: none; min-width: 0;
    height: 100dvh; max-height: none;
    margin: 0; border: 0; border-radius: 0;
    background: #17191b; box-shadow: none;
  }
  body.desktop-chat-open #dmOverlay .dm-header { padding: 16px max(24px, calc((100% - 960px) / 2)); }
  body.desktop-chat-open #dmMessages {
    padding: 24px;
    background-color: var(--cx-bg);
    background-image: linear-gradient(to bottom, rgba(20,22,27,.68), var(--cx-bg) 270px), url('/assets/scenes/social.webp');
    background-position: center top;
    background-size: 100% 300px;
    background-repeat: no-repeat;
  }
  body.desktop-chat-open #dmMessages :is(.cx-day, .cx-grp) { max-width: 960px; margin-inline: auto; }
  body.desktop-chat-open #dmOverlay .dm-input-bar { padding: 16px max(24px, calc((100% - 960px) / 2)) !important; }
  body.desktop-chat-open #dmOverlay .cx-bub { max-width: min(520px, 85%); overflow-wrap: anywhere; }
  body.desktop-chat-open #dmOverlay .cx-row.mine .cx-bub { background: #3d3520; }
}
@media (min-width: 1280px) {
  html[data-theme="light"] body.desktop-chat-open #dmMessages {
    background-image: linear-gradient(to bottom, rgba(255,255,255,.78), var(--cx-bg) 270px), url('/assets/scenes/social.webp') !important;
  }
}