/* 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: calc(var(--control-height) + 2 * var(--gap-between-tiles));
}

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

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

  overflow: hidden;
  display: flex;
}

#chat-page #main {
  width: calc(100% - var(--ribbon-size));
  display: flex;
  flex-direction: column;
}

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

  display: flex;
  flex-direction: column;
}

#chat-page #main .content {
  overflow: auto;

  padding: var(--content-padding);
}

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

/* ribbon, toolbar */
#chat-page #ribbon {
  width: var(--ribbon-size);
  border-right: 1px solid var(--border);

  justify-content: space-between;

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

#chat-page #ribbon > span {
  height: 100%;
  
  flex: 1;
  overflow: auto;

  justify-content: flex-end;
}

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

  overflow-x: auto;

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

#chat-page #ribbon,
#chat-page .toolbar {
  align-items: center;
}

#chat-page #ribbon > span,
#chat-page .toolbar > span {
  display: flex;
  flex-direction: column;

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

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

#chat-page #ribbon button,
#chat-page .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 #ribbon > button {
  margin-top: var(--gap-between-tiles);
}