/*
 * PULSELINE desktop layout:
 *
 * Conversations | Main conversation | Groups
 *
 * The message history scrolls while the composer remains visible.
 */

@media (min-width: 1200px) {
  .pulseline-shell-grid {
    display: grid !important;

    grid-template-columns:
      minmax(270px, 0.72fr)
      minmax(620px, 2.15fr)
      minmax(240px, 0.58fr) !important;

    grid-template-rows: minmax(0, 1fr) !important;

    height: calc(100dvh - 5.75rem) !important;
    min-height: 620px !important;

    align-items: stretch !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  /*
   * First column: direct conversations.
   */
  .pulseline-contacts-pane {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /*
   * Second and largest column: active conversation.
   */
  .pulseline-shell-grid > section:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: flex !important;

    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    overflow: hidden !important;
  }

  .pulseline-shell-grid > section:nth-child(2) > * {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  /*
   * Third column: groups and communities.
   */
  .pulseline-groups-pane {
    grid-column: 3 !important;
    grid-row: 1 !important;

    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /*
   * Conversation structure:
   *
   * Header
   * Active call area, when present
   * Scrollable messages
   * Permanently visible composer
   */
  .pulseline-conversation-pane {
    display: grid !important;
    grid-template-rows:
      auto
      auto
      minmax(0, 1fr)
      auto !important;

    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    padding: 0 !important;
    overflow: hidden !important;
  }

  .pulseline-message-canvas {
    min-width: 0 !important;
    min-height: 0 !important;

    max-height: none !important;
    height: auto !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain;
  }

  /*
   * The form occupies its own grid row and never scrolls away.
   */
  .pulseline-conversation-pane > form {
    position: relative !important;
    z-index: 5 !important;

    align-self: end !important;

    width: 100% !important;
    margin: 0 !important;

    flex-shrink: 0 !important;
  }

  .pulseline-thread-list,
  .pulseline-group-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  /*
   * Group-room conversations use the same fixed-composer behaviour.
   */
  .pulseline-room-conversation {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    overflow: hidden !important;
  }

  .pulseline-room-chat {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    overflow: hidden !important;
  }

  .pulseline-room-chat > form {
    position: relative !important;
    z-index: 5 !important;

    align-self: end !important;
    flex-shrink: 0 !important;
  }
}

@media (min-width: 1600px) {
  .pulseline-shell-grid {
    grid-template-columns:
      minmax(300px, 0.68fr)
      minmax(760px, 2.45fr)
      minmax(260px, 0.55fr) !important;
  }
}