:root {
  font-family: sans-serif;
  word-break: break-word;
  /* adapted from https://github.com/holoviz/colorcet/blob/main/assets/CET/rainbow_bgyrm_35-85_c69_n256.csv */
  --rainbow: rgb(0,47,246), rgb(20,74,218), rgb(25,94,190), rgb(24,110,164), rgb(38,122,139), rgb(54,133,115), rgb(62,143,90), rgb(65,154,63), rgb(71,163,36), rgb(90,171,19), rgb(114,177,16), rgb(138,183,20), rgb(161,189,23), rgb(183,194,27), rgb(205,199,31), rgb(225,203,34), rgb(242,203,36), rgb(249,195,35), rgb(250,184,33), rgb(249,171,30), rgb(248,158,28), rgb(247,145,25), rgb(245,132,23), rgb(243,118,21), rgb(241,103,21), rgb(240,90,28), rgb(243,86,50), rgb(248,92,81), rgb(253,103,115), rgb(256,113,149), rgb(256,125,183), rgb(256,136,219);

  /* Chosen hue */
  --hue: 310;

  /* Interactive elements */
  --ui-focus: rgb(227, 12, 48);
  --ui-defocus: rgb(122, 31, 179);
  --ui-stark: black;
  --ui-semi: 0.4;
  --ui-half: rgba(0,0,0,var(--ui-semi));

  --bubble: lch(90 40 var(--hue));
  --bubble-half: lch(90 40 var(--hue) / 50%);
  @media (prefers-color-scheme: dark) {
    --link: rgb(137, 137, 255);
    --link-visited: rgb(212, 124, 209);
    --ui-focus: rgb(198, 68, 89);
    --ui-defocus: rgb(135, 91, 163);
    --ui-stark: white;
    --ui-semi: 0.6;
    --ui-half: rgba(255,255,255,var(--ui-semi));

    --bubble: lch(50 30 var(--hue) / 25%);
    --bubble-half: lch(50 30 var(--hue) / 15%);

    & a[href] {
      color: var(--link);
      &:visited {
        color: var(--link-visited);
      }
    }
  }
}
@media (prefers-color-scheme: dark) {
  :root, body {
    background: lch(4 13 var(--hue));
    color: #eee;
  }
}

body {
  margin: 0;
  padding: 0;
}

details > summary { cursor: pointer }
pre, code { text-align: left; font-size: 0.9em }
code > pre, pre > code { font-size: 1em }

body > #main {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  border: none;
  box-sizing: border-box;
  > h1 {
    margin-top: 0;
    margin-bottom: 0;
    > #favicon {
      height: 1em;
      vertical-align: bottom;
    }
  }
  > #chat_content {
    flex-grow: 1;
  }
}

#title, hr {
  border: none;
  border-image: linear-gradient(to right, var(--rainbow)) 1;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
#qrcode:has(> *), svg.qrcode {
  display: block;
  padding: 20px;
  background: white;
  width:  min(100%, 100vw, 100vh);
  height: min(100%, 100vw, 100vh);
  width:  min(100svw, 100cqw, 100svh, 100cqh, 100%, 100vw);
  height: min(100svw, 100cqw, 100svh, 100cqh, 100%, 100vw);
  margin: auto;
  box-sizing: border-box;
  @media (prefers-color-scheme: dark) {
    transition: opacity 0.5s;
    &:not(:hover) {
      opacity: 0.6;
    }
  }
  &#qrcode>* {
    height: 100%;
    width:  100%;
  }
}

pre {
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
}

#controls {
  box-sizing: border-box;
  border: 1px solid var(--ui-defocus);
  height: 1.8rem;
  border-radius: 0.9rem;
  padding: 0 0.8rem;
  font-size: 1.2rem;
  display: flex;
  flex-direction: row;
  column-gap: 0.25em;
  &:has(> input#compose:focus) {
    border-color: var(--ui-focus);
  }
  & input {
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    background: none;
    flex-grow: 1;
    align-self: center;
    height: inherit;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: 100%;
    text-align: start;
    margin: 0; padding: 0;
    &:focus {
      outline: none;
    }
  }
  &:has(> label[for=file_upload]:first-child) {
    padding-left: 0;
  }
  & label[for=file_upload] {
    flex-grow: 0;
    font-weight: bolder;
    font-size: 1.4rem;
    align-self: center;
    height: 100%;
    border-radius: inherit;
    opacity: var(--ui-semi);
    > svg {
      height: 100%;
      border-radius: inherit;
    }
    &:has(+ #file_upload:not(:disabled)) {
      &:hover, &:focus, &:has(+ #file_upload:focus), &:active {
        opacity: 1;
      }
      &:active, &:has(+ #file_upload:active) {
        color: var(--ui-focus);
      }
      &:focus, &:has(+ #file_upload:focus) {
        color: var(--ui-defocus);
      }
    }
  }
  #file_upload {
    width: 0px;
    height: 0px;
    position: absolute;
    bottom: -20px;
    opacity: 0;
    flex: 0;
    margin-right: -0.25em; /* column-gap */
  }
}

#chat_content, #site_content {
  font-size: 1.2rem;
}
#chat_content {
  display: flex;
  flex-direction: column;
  container: chat_content / size;
  /* bug: https://stackoverflow.com/questions/36130760/use-justify-content-flex-end-and-to-have-vertical-scrollbar#37515194 */
  /* https://bugzilla.mozilla.org/show_bug.cgi?id=1042151 */
  /* https://bugs.chromium.org/p/chromium/issues/detail?id=411624 */
  /* justify-content: flex-end; */
  row-gap: 0.4rem;
  overflow-y: scroll;
  overflow-x: hidden;
  > * {
    flex-grow: 0;
    flex-shrink: 0;
  }
  > :first-child {
    &#chat_spacer {
      flex-grow: 1;
    }
  }
}
#chat_content + #controls {
  margin-top: 0.5rem;
}
.status {
  text-align: center;
  padding: 0.2rem; /* where did this come from */
  font-style: italic;
}
#chat_content > .message {
  position: relative;
  min-height: 1.6rem;
  border-radius: 0.8rem;
  padding: 0.2rem 0.7rem;
  font-size: 1.2rem;
  background: var(--bubble);
  align-content: center;
  box-sizing: border-box;
  display: block;
  &.status {
    justify-content: center;
  }
  &.event {
    opacity: 0.7;
    background: none;
  }
  &.peer, &.echo {
    width: fit-content;
    max-width: calc(100% - 1em);
    max-width: calc(100cqw - 1em);
    &.full-width {
      width: calc(100% - 1em);
      width: calc(100cqw - 1em);
    }
  }
  &.command {
    background: var(--bubble-half);
  }
  &.peer {
    border-top-left-radius: 0;
    align-self: flex-start;
    margin-right: 1em;
  }
  &.echo {
    border-top-right-radius: 0;
    align-self: flex-end;
    margin-left: 1em;
  }
  & img, & video, & canvas, & pre {
    max-width: 100%;
    max-height: 95vh;
    max-height: 95cqh;
  }
  & pre {
    margin: 0;
    overflow: auto;
  }
  &.media, &.color {
    display: flex; /* helps with extraneous line-height padding around <img> */
    padding: 0;
    > img, > video {
      border-radius: inherit;
    }
  }
  > pre {
    margin: 0;
  }
  > :first-child {
    margin-top: 0;
  }
  > :last-child {
    margin-bottom: 0;
  }
  &.shared-message {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    & textarea {
      background: none;
      color: inherit;
      border-radius: inherit;
      border: none;
      outline: none;
      padding: 0.7rem 0.7rem;
    }
    > .shared-item {
      flex: 1;
    }
    > .shared-sep {
      flex: 0 0 0;
      border-left: 1px solid var(--ui-half);
      margin: 0.2em 0.5em;
    }
  }
}

dt {
  font-weight: bold;
}
dd {
  margin-inline-start: 4ch;
}

div.tabgroup {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* height: max-content;
  max-height: calc(min(95vh, 100%));
  max-height: calc(min(95vh, 100%, 100cqh)); */
  border-radius: 0.8rem;

  &.max-height {
    box-sizing: border-box;
    height: calc(min(95vh, 100%));
    height: calc(min(95vh, 100%, 100cqh));
    & > div.tabs {
      container: tabgroup / size;
    }
  }
  &.raised {
    background: var(--bubble-half);
    margin-left: 2em;
    margin-right: 2em;
  }
  & > div.tablist {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    & > button.tab {
      flex: 1;
      background: none;
      border: none;
      font: inherit;
      color: inherit;
      box-sizing: border-box;
      padding-top: 8px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--ui-half);
      &:hover {
        padding-bottom: 6px;
        border-bottom-width: 4px;
      }
      &.selected {
        color: var(--ui-focus);
        border-bottom-color: var(--ui-focus);
      }
    }
  }
  & > div.tabs {
    flex: auto;
    box-sizing: border-box;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    & > div.tab {
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
      box-sizing: border-box;
      padding: 6px;
      max-height: calc(min(100%, 95vh));
      max-height: calc(min(100%, 100cqh));
      overflow: auto;
      &:has(> svg:only-child, > img:only-child, > video:only-child, > canvas:only-child) {
        padding: 0;
      }
    }
  }
}