.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) var(--list-width) minmax(0, 1fr) var(--panel-width);
  height: 100vh;
  height: 100dvh;
}

.app[data-panel="closed"] {
  grid-template-columns: var(--sidebar-width) var(--list-width) minmax(0, 1fr);
}

.app[data-panel="closed"] .contact-panel {
  display: none;
}

.app--page,
.app--page[data-panel="closed"] {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.app__scrim {
  display: none;
}

.only-compact {
  display: none;
}

@media (max-width: 1099px) {
  .app,
  .app[data-panel="closed"] {
    grid-template-columns: var(--list-width) minmax(0, 1fr);
  }

  .app--page,
  .app--page[data-panel="closed"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: min(var(--panel-width), 100vw);
    box-shadow: var(--shadow-lg);
  }

  .app[data-panel="open"] .app__scrim {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: block;
    background: rgb(23 19 15 / 30%);
  }

  .app[data-sidebar="open"] .app__scrim {
    position: fixed;
    inset: 0;
    z-index: 34;
    display: block;
    background: rgb(23 19 15 / 45%);
  }

  .only-compact {
    display: inline-grid;
  }
}

@media (max-width: 767px) {
  .app,
  .app[data-panel="closed"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .app[data-view="list"] .chat {
    display: none;
  }

  .app[data-view="chat"] .conversation-list {
    display: none;
  }
}