/* Desktop-only polish. Keep the existing phone/tablet rules untouched.
   The link media attribute repeats this guard intentionally. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  body {
    --lounge-max-width: 800px;
    --desktop-half-width: 400px;
  }

  body:has(:is(#chat, #agentChat, #gallerySpace, #backend, #cooperationDetail, #subscription).active) {
    --lounge-max-width: min(1000px, calc(100vw - 64px));
    --desktop-half-width: min(500px, calc(50vw - 32px));
  }

  body .lounge-switcher {
    left: calc(50% + var(--desktop-half-width) - 60px);
    top: 24px;
  }

  #home .home-ai-entry {
    left: calc(50% + 400px - 60px);
    top: 80px;
  }

  /* Retain the original portrait-video crop while widening the page around it. */
  #home .profile-hero .hero-img {
    width: 800px;
    max-width: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  :is(#chat, #agentChat) .chat-shell {
    width: 100%;
    max-width: 1000px;
    margin-inline: auto;
    padding: 24px 24px 20px;
  }

  .phone.is-subpage-view :is(#chat, #agentChat) .chat-shell {
    padding-bottom: 20px;
  }

  :is(#chat, #agentChat) .chat-head { min-height: 72px; }
  :is(#chat, #agentChat) .chat-head h1 { font-size: 18px; }
  :is(#chat, #agentChat) .chat-head p { font-size: 12px; }
  :is(#chat, #agentChat) .prompt-row { gap: 10px; margin-block: 14px; }
  :is(#chat, #agentChat) .prompt-row button { min-height: 38px; padding: 7px 12px; font-size: 13px; line-height: 1.5; }

  :is(#messages, #agentMessages) { padding: 8px 4px 24px; scrollbar-width: thin; scrollbar-color: #514d73 transparent; }
  :is(#messages, #agentMessages) .msg:not(.agent-thinking) {
    width: fit-content;
    max-width: min(84%, 700px);
    margin-block: 14px;
    padding: 14px 18px;
    font-size: 15px;
    line-height: 1.8;
  }
  :is(#messages, #agentMessages) .msg.user { max-width: min(76%, 620px); }

  #backend .backend-content { padding-inline: 32px; }
  #backend .backend-hero-nav { left: 32px; }

  #gallerySpace .gallery-space-content { padding: 24px 28px 28px; }
  #gallerySpace .gallery-space-head { padding: 16px 20px 20px; }
  #gallerySpace .gallery-series-tabs { gap: 10px; margin-block: 12px; }
  #gallerySpace .gallery-masonry { column-count: 3; column-gap: 16px; }
  #gallerySpace .gallery-card { margin-bottom: 16px; }
}