/* The rooms list as a page of its own: the mobile app's Rooms tab, and the same
   list at phone width in a browser. It reuses the drawer's sections and rows on
   the page surface, so the side tokens they read fall back to the page's, and
   the rows grow into full-width touch rows. */
.rooms-page {
  #main-content {
    --color-bg-side: var(--color-bg);
    --color-bg-side-hover: var(--color-bg-hover);
    --color-border-side: var(--color-border);

    padding-block-end: env(safe-area-inset-bottom);
  }

  .rooms {
    border-block-start: none;
    gap: 0;
    padding: 2px 0 var(--block-space-half);

    > * {
      gap: 0;
    }
  }

  /* Section headers: the label over its rows, the Rooms actions at the end */
  .sidebar__section-toggle {
    box-sizing: border-box;
    padding-block: 18px 6px;
    padding-inline: 20px;
  }

  #rooms_section > :first-child,
  #direct_messages_section > :first-child {
    padding-inline-end: 12px;

    .sidebar__section-toggle {
      padding-inline-end: 0;
    }
  }

  .sidebar__label {
    color: var(--color-text-subtle);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }

  .sidebar__label-count {
    display: none;
  }

  .btn--small,
  .options-btn {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --hover-color: transparent;
    --hover-filter: none;

    color: var(--color-text-muted);
  }

  /* Rows: 48px tall, flush to the page edges */
  .room-row {
    border-radius: 0;
    min-block-size: 48px;
    padding-inline-end: 12px;
  }

  .room {
    --btn-border-radius: 0;
    --btn-padding: 0 12px 0 20px;

    align-self: stretch;
    font-size: var(--font-size-medium);

    &.unread {
      font-weight: 600;

      .room__glyph {
        color: var(--color-text);
      }
    }

    .notification-badge {
      border-radius: 10px;
      font-size: 0.75rem;
      font-weight: 600;
      padding: 2px 7px;
    }
  }

  .room__glyph {
    margin-inline-end: 12px;
  }

  .directs {
    gap: 0;
  }

  .direct {
    border-radius: 0;
    min-block-size: 48px;
    padding: 0 20px;

    .notification-badge {
      border-radius: 10px;
      font-size: 0.75rem;
      font-weight: 600;
      padding: 2px 7px;
    }
  }

  .direct__author {
    font-size: var(--font-size-medium);

    .unread & {
      font-weight: 600;
    }
  }
}