/*
 * Yunliao PC Web - WeChat-style three-column layout v1.0.0
 * Standalone runtime stylesheet. The compiled application bundle is untouched.
 */

@media (min-width: 601px) {
  :root {
    --yunliao-pc-rail-width: 60px;
    --yunliao-pc-conversation-width: 300px;
    --yunliao-pc-search-height: 40px;
  }

  /*
   * The original blue search bar occupies a full-width row. Move it over the
   * conversation column and remove it from normal document flow.
   */
  #root .ant-layout.h-full > div.no-mobile.app-drag[class*="top-search-bar"] {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--yunliao-pc-rail-width) !important;
    z-index: 30 !important;
    box-sizing: border-box !important;
    width: var(--yunliao-pc-conversation-width) !important;
    min-width: var(--yunliao-pc-conversation-width) !important;
    max-width: var(--yunliao-pc-conversation-width) !important;
    height: var(--yunliao-pc-search-height) !important;
    min-height: var(--yunliao-pc-search-height) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) !important;
  }

  /* Search field and plus button share the 300px conversation toolbar. */
  #root
    .ant-layout.h-full
    > div.no-mobile.app-drag[class*="top-search-bar"]
    > div.flex {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 8px !important;
    justify-content: flex-start !important;
  }

  #root
    .ant-layout.h-full
    > div.no-mobile.app-drag[class*="top-search-bar"]
    > div.flex
    > div.app-no-drag {
    box-sizing: border-box !important;
    flex: 0 0 calc(100% - 48px) !important;
    width: calc(100% - 48px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 5px !important;
  }

  #root
    .ant-layout.h-full
    > div.no-mobile.app-drag[class*="top-search-bar"]
    > div.flex
    > img.app-no-drag {
    box-sizing: border-box !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: 12px !important;
  }

  /* With the search bar absolutely positioned, the application body fills the
   * complete window and all three main columns begin at the top edge. */
  #root .ant-layout.h-full > .ant-layout.ant-layout-has-sider {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  /* Left navigation rail: x=0..60, y=0..window height. */
  #root
    .ant-layout.h-full
    > .ant-layout.ant-layout-has-sider
    > .ant-layout-sider.no-mobile {
    top: 0 !important;
    flex: 0 0 var(--yunliao-pc-rail-width) !important;
    width: var(--yunliao-pc-rail-width) !important;
    min-width: var(--yunliao-pc-rail-width) !important;
    max-width: var(--yunliao-pc-rail-width) !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  #root
    .ant-layout.h-full
    > .ant-layout.ant-layout-has-sider
    > .ant-layout-sider.no-mobile
    > .ant-layout-sider-children {
    height: 100% !important;
  }

  /* Main area after the 60px navigation rail. */
  #root
    .ant-layout.h-full
    > .ant-layout.ant-layout-has-sider
    > .ant-layout.flex-row {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Conversation column retains its original 300px width. */
  #root
    .ant-layout.h-full
    > .ant-layout.ant-layout-has-sider
    > .ant-layout.flex-row
    > div:first-child {
    flex: 0 0 var(--yunliao-pc-conversation-width) !important;
    width: var(--yunliao-pc-conversation-width) !important;
    min-width: var(--yunliao-pc-conversation-width) !important;
    max-width: var(--yunliao-pc-conversation-width) !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  #root
    .ant-layout.h-full
    > .ant-layout.ant-layout-has-sider
    > .ant-layout.flex-row
    > div:first-child
    > aside {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Reserve the first 40px of the conversation column for search. The original
   * 6px inner margin is kept below the toolbar, matching the existing spacing. */
  #root
    .ant-layout.h-full
    > .ant-layout.ant-layout-has-sider
    > .ant-layout.flex-row
    > div:first-child
    > aside
    > div.absolute.flex.flex-col {
    top: 46px !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Right chat area now starts at y=0. Its own header remains fully native. */
  #root
    .ant-layout.h-full
    > .ant-layout.ant-layout-has-sider
    > .ant-layout.flex-row
    > .ant-layout.no-mobile {
    height: 100% !important;
    min-height: 0 !important;
  }
}