/* show/hide */
#chat-page-wrapper {
  display: none;
}

body[showing-chat] #home-page {
  display: none;
}

body[showing-chat] #chat-page-wrapper {
  display: flex;

  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;

  background-color: var(--background);

  z-index: 2;
}

/* layout */
#chat-page {
  --ribbon-size: var(--control-height);
}

#chat-page > div,
#chat-page > div > #ribbon,
#chat-page > div > #main,
#chat-page > div > #main > div,
#chat-page > div > #main > div > .pane,
#chat-page > div > #main > div > .pane > .toolbar,
#chat-page > div > #main > div > .pane > .content {
  display: flex;
}

#chat-page > div {
  padding: 0px;
  overflow: hidden;
}

#chat-page > div > #main {
  width: calc(100% - var(--ribbon-size));

  overflow-x: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

#chat-page #main > div,
#chat-page > div > #main > div > .pane,
#chat-page > div > #main > div > .pane > .content {
  width: 100%;
  height: 100%;
  flex: 1;
}

#chat-page > div > #main > div > .pane {
  flex-direction: column;
  scroll-snap-align: center;

  min-width: 100%;
}

@media (min-width: 1024px) {
  #chat-page > div > #main > div > .pane {
    min-width: unset;
  }

  #chat-page > div > #main > div > .pane.side {
    max-width: 18rem;
  }
}

#chat-page > div > #main > div > .pane:not(:last-child) {
  border-right: 1px solid var(--border);
}

#chat-page > div > #main > div > .pane > .content {
  flex-direction: column;
  overflow: auto;
  padding: var(--content-padding);
}

#chat-page #ribbon,
#chat-page #main,
#chat-page #main .content {
  flex-direction: column;
}

/* ribbon, toolbar */
#chat-page > div > #ribbon,
#chat-page > div > #main > div > .pane > .toolbar {
  align-items: center;
}

#chat-page #ribbon > span,
#chat-page > div > #main > div > .pane > .toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;

  padding: var(--gap-between-tiles);
  gap: var(--gap-between-tiles);
}

#chat-page > div > #ribbon {
  width: var(--ribbon-size);
  border-right: 1px solid var(--border);

  justify-content: space-between;

  padding-bottom: var(--safe-area-bottom);
}

#chat-page > div > #ribbon > span {
  height: 100%;

  flex: 1;
  overflow-y: auto;

  justify-content: flex-end;
}

#chat-page > div > #ribbon > span {
  flex-direction: column;
}

#chat-page > div > #ribbon button,
#chat-page > div > #main > div > .pane > .toolbar button {
  padding: 0px;

  width: 100%;
  max-width: var(--control-height);
  height: var(--control-height);
  min-height: var(--control-height);

  align-items: center;
  justify-content: center;
}

#chat-page > div > #ribbon button.ribbon-button,
#chat-page > div > #main > div > .pane > .toolbar button.ribbon-button {
  min-height: unset;
  height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
}

#chat-page > div > #ribbon button.ribbon-button > .icon,
#chat-page > div > #main > div > .pane > .toolbar button.ribbon-button > .icon {
  font-size: 1.1rem;
}

#chat-page > div > #ribbon > span {
  width: 100%;
}

#chat-page > div > #main > div > .pane > .toolbar {
  height: var(--ribbon-size);
  border-bottom: 1px solid var(--border);

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

  padding: 0px;
  border-top: 1px solid var(--border);
}

#chat-page > div > #main > div > .pane > .toolbar > span {
  padding-left: var(--content-padding);
}

#chat-page > div > #main > div > .pane > .toolbar :is(input, select, button) {
  height: 100%;
  flex: 1;
}