@layer app {
  /* ============================================================
     Rooms and chat styles
     ============================================================ */

  .room-card {
    display: flex;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-dark) 8%, transparent);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.68);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--color-dark) 5%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

    &:hover {
      border-color: color-mix(in srgb, var(--color-primary) 24%, transparent);
      color: inherit;
      text-decoration: none;
      transform: translateY(-1px);
      box-shadow: 0 16px 34px color-mix(in srgb, var(--color-dark) 8%, transparent);
    }
  }

  .room-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
  }

  .room-card__body {
    min-width: 0;
    flex: 1 1 auto;
  }

  .room-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--color-dark) 94%, transparent);
  }

  .room-card__meta,
  .room-card__latest {
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--color-dark) 58%, transparent);
  }

  .room-card__latest {
    margin-top: 0.65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-card__latest--empty,
  .room-card__chevron {
    color: color-mix(in srgb, var(--color-dark) 40%, transparent);
  }

  .room-shell {
    display: flex;
    flex-direction: column;
    /* svh, not dvh: the shell keeps its intended proportion while the browser
       toolbars are showing, without resizing as they animate. Nothing re-pins
       the message list to the bottom on resize, so a height that tracks the
       toolbars would drift an at-the-bottom reader off the end. */
    height: min(72vh, 720px);
    height: min(72svh, 720px);
    padding: 0;
    overflow: hidden;
  }

  /* Name over its location on the left, share badge over the roommate count on
     the right. */
  .room-shell__header {
    align-items: start;
    background: rgba(255, 255, 255, 0.54);
    border-bottom: 1px solid color-mix(in srgb, var(--color-dark) 8%, transparent);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.15rem 1.25rem;
  }

  .room-shell__header-aside {
    align-items: end;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.35rem;
    text-align: right;
  }

  .room-members__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.6rem;
    border: 0;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.25;
  }

  .room-members__trigger:hover,
  .room-members__trigger:focus-visible,
  .room-members__trigger[aria-expanded="true"] {
    filter: brightness(0.96);
  }

  .room-members__menu {
    width: max-content;
    max-width: min(22rem, calc(100vw - 2rem));
    max-height: min(20rem, calc(100vh - 12rem));
    max-height: min(20rem, calc(100dvh - 12rem));
    padding: 0.65rem;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--color-dark) 8%, transparent);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--color-dark) 12%, transparent);
  }

  .room-members__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .room-members__badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 0.35rem;
    padding: 0.16rem 0.55rem 0.16rem 0.16rem;
    border: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: color-mix(in srgb, var(--color-dark) 90%, transparent);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
  }

  .room-members__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-messages-area {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }

  .room-messages {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    gap: 0.85rem;
    padding: 1.25rem;
    overflow-y: auto;
  }

  .room-messages__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--color-dark) 48%, transparent);
    text-align: center;
    pointer-events: none;
  }

  #message-area:has(.room-message) .room-messages__empty {
    display: none;
  }

  .room-messages__jump {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-dark) 18%, transparent);
  }

  .room-message {
    display: flex;
    align-items: flex-end;
    gap: 0.55rem;
    max-width: min(92%, 44rem);
  }

  .room-message--mine {
    align-self: flex-end;
    flex-direction: row-reverse;
  }

  .room-message__avatar {
    flex: 0 0 auto;
  }

  .room-message__bubble {
    min-width: 0;
    padding: 0.72rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--color-dark) 8%, transparent);
    border-radius: 1.1rem 1.1rem 1.1rem 0.35rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-dark) 5%, transparent);
  }

  .room-message--mine .room-message__bubble {
    border-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border-radius: 1.1rem 1.1rem 0.35rem 1.1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, transparent), color-mix(in srgb, var(--color-secondary) 10%, transparent));
  }

  .room-message__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
  }

  .room-message__author {
    font-size: 0.88rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--color-dark) 88%, transparent);
  }

  .room-message__time {
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--color-dark) 46%, transparent);
  }

  .room-message__body {
    color: color-mix(in srgb, var(--color-dark) 84%, transparent);
    font-size: 0.96rem;
    line-height: 1.48;

    p {
      margin-bottom: 0.35rem;
    }

    p:last-child {
      margin-bottom: 0;
    }
  }

  .room-composer {
    padding: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--color-dark) 8%, transparent);
    background: rgba(255, 255, 255, 0.62);
  }

  .room-composer__form {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
  }

  .room-composer__form > .field_with_errors {
    flex: 1 1 auto;
  }

  .room-composer__input {
    min-height: 2.75rem !important;
    max-height: 9rem;
    resize: vertical;
  }

  .room-composer__submit {
    flex: 0 0 auto;
    min-height: 2.75rem;
  }

  .room-new__header {
    display: flex;
    /* The card is a flex column, so the header would otherwise shrink under
       pressure on short viewports. Only the roommate list may flex. */
    flex: 0 0 auto;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
  }

  .room-new__back {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    place-items: center;
  }

  .room-form__name {
    font-size: 1.1rem;
  }

  /* Bound the card to what is left under the sticky navbar so the roommate list
     can take every spare pixel instead of a fixed cap. With few neighbours the
     card stays its natural height; with many, the list grows to fill the
     viewport and scrolls the remainder. */
  .room-new__card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 6.5rem);
    max-height: calc(100dvh - 6.5rem);
  }

  .room-new__card .room-form,
  .room-new__card .room-form__roommates {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  /* The list is the only thing that flexes; the name field, hint, search box and
     action row all keep their natural height. */
  .room-new__card .room-form > :not(.room-form__roommates),
  .room-new__card .room-form__roommates > :not(.roommate-filter__list) {
    flex: 0 0 auto;
  }

  .room-new__card .roommate-filter__list {
    flex: 1 1 auto;
    max-height: none;
    min-height: 4.5rem;
  }

  .roommate-filter__list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 18rem;
    margin: 0.65rem 0 0;
    padding: 0;
    overflow-y: auto;
    /* overflow-y alone does not stop the rows below the fold from propagating as
       layout overflow through the card and out to the document, which on mobile
       becomes dead scrollable space under the form that grows with the number of
       neighbours. contain keeps the overflow local to this box. */
    contain: paint;
  }

  .roommate-filter__item {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--color-dark) 8%, transparent);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.72);
  }

  .roommate-filter__list--active .roommate-filter__item {
    display: none;
  }

  .roommate-filter__list--active .roommate-filter__item--selected {
    display: flex;
  }

  .roommate-filter__identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.55rem;
  }

  .roommate-filter__name {
    overflow: hidden;
    color: color-mix(in srgb, var(--color-dark) 88%, transparent);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .roommate-filter__switch,
  .roommate-filter__check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.5rem;
    width: 2.5rem;
  }

  .roommate-filter__switch {
    margin-bottom: 0;
    padding-left: 0;
  }

  .roommate-filter__switch .form-check-input {
    float: none;
    margin: 0;
  }

  .roommate-filter__check {
    color: var(--color-success);
    font-size: 1.1rem;
  }

  @media (max-width: 640px) {
    .room-shell {
      /* vh first as a fallback; dvh shrinks for the on-screen keyboard on mobile
         so the composer stays visible. Browsers that don't support dvh ignore the
         second declaration and keep the vh value. */
      height: calc(100vh - 8rem);
      height: calc(100dvh - 8rem);
    }

    .room-messages,
    .room-shell__header {
      padding-inline: 0.85rem;
    }

    .room-message {
      max-width: 100%;
    }

    .room-message__avatar {
      display: none;
    }

    .roommate-filter__list {
      max-height: 14rem;
      max-height: min(14rem, 28dvh);
    }
  }
}