:root {
  color-scheme: light dark;
}

body,
html {
  height: 100dvh;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  background-color: light-dark(#fafafa, #18181b);
  color: light-dark(#18181b, #fafafa);
  font-family: monospace;
  position: relative;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

/* body::before {
  content: "";
  position: absolute;
  top: -50vh;
  left: -50vw;
  height: 200vh;
  width: 200vw;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="3" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
  opacity: 0.2;
  animation: grain 3s steps(1) infinite;
}

@keyframes grain {
  0% { transform: translate(-1vw, 45vh); }
  1% { transform: translate(4vw, -13vh); }
  2% { transform: translate(49vw, 9vh); }
  3% { transform: translate(-6vw, 41vh); }
  4% { transform: translate(7vw, 5vh); }
  5% { transform: translate(37vw, -1vh); }
  6% { transform: translate(31vw, -19vh); }
  7% { transform: translate(7vw, -2vh); }
  8% { transform: translate(9vw, -32vh); }
  9% { transform: translate(40vw, 32vh); }
  10% { transform: translate(-48vw, 45vh); }
  11% { transform: translate(-30vw, -9vh); }
  12% { transform: translate(32vw, 4vh); }
  13% { transform: translate(-42vw, 38vh); }
  14% { transform: translate(16vw, -20vh); }
  15% { transform: translate(22vw, -17vh); }
  16% { transform: translate(-30vw, 2vh); }
  17% { transform: translate(-24vw, 39vh); }
  18% { transform: translate(-4vw, 29vh); }
  19% { transform: translate(29vw, -45vh); }
  20% { transform: translate(-41vw, -19vh); }
  21% { transform: translate(22vw, -18vh); }
  22% { transform: translate(-14vw, -32vh); }
  23% { transform: translate(17vw, 20vh); }
  24% { transform: translate(25vw, 10vh); }
  25% { transform: translate(-3vw, 20vh); }
  26% { transform: translate(20vw, -45vh); }
  27% { transform: translate(-40vw, 35vh); }
  28% { transform: translate(-44vw, 20vh); }
  29% { transform: translate(-31vw, 43vh); }
  30% { transform: translate(-31vw, -12vh); }
  31% { transform: translate(0vw, 43vh); }
  32% { transform: translate(48vw, 45vh); }
  33% { transform: translate(41vw, 40vh); }
  34% { transform: translate(-6vw, -48vh); }
  35% { transform: translate(50vw, 2vh); }
  36% { transform: translate(19vw, -32vh); }
  37% { transform: translate(7vw, 37vh); }
  38% { transform: translate(37vw, 4vh); }
  39% { transform: translate(-48vw, 21vh); }
  40% { transform: translate(-10vw, -36vh); }
  41% { transform: translate(-30vw, 42vh); }
  42% { transform: translate(37vw, -18vh); }
  43% { transform: translate(-22vw, -8vh); }
  44% { transform: translate(-29vw, -44vh); }
  45% { transform: translate(47vw, 36vh); }
  46% { transform: translate(-33vw, 35vh); }
  47% { transform: translate(27vw, 38vh); }
  48% { transform: translate(23vw, -5vh); }
  49% { transform: translate(-28vw, -24vh); }
  50% { transform: translate(5vw, -42vh); }
  51% { transform: translate(-31vw, -1vh); }
  52% { transform: translate(-24vw, 36vh); }
  53% { transform: translate(-20vw, 6vh); }
  54% { transform: translate(38vw, 5vh); }
  55% { transform: translate(32vw, 27vh); }
  56% { transform: translate(-39vw, -3vh); }
  57% { transform: translate(-14vw, -47vh); }
  58% { transform: translate(-43vw, -50vh); }
  59% { transform: translate(-24vw, -6vh); }
  60% { transform: translate(-23vw, 15vh); }
  61% { transform: translate(-10vw, -2vh); }
  62% { transform: translate(46vw, 1vh); }
  63% { transform: translate(3vw, 18vh); }
  64% { transform: translate(-48vw, -45vh); }
  65% { transform: translate(31vw, 26vh); }
  66% { transform: translate(25vw, -19vh); }
  67% { transform: translate(-6vw, 22vh); }
  68% { transform: translate(-33vw, 14vh); }
  69% { transform: translate(35vw, 24vh); }
  70% { transform: translate(24vw, -30vh); }
  71% { transform: translate(21vw, -18vh); }
  72% { transform: translate(-11vw, -13vh); }
  73% { transform: translate(-6vw, -43vh); }
  74% { transform: translate(40vw, 48vh); }
  75% { transform: translate(44vw, -44vh); }
  76% { transform: translate(33vw, -10vh); }
  77% { transform: translate(45vw, 12vh); }
  78% { transform: translate(28vw, 7vh); }
  79% { transform: translate(39vw, 3vh); }
  80% { transform: translate(19vw, -10vh); }
  81% { transform: translate(-23vw, 18vh); }
  82% { transform: translate(13vw, 50vh); }
  83% { transform: translate(-23vw, -24vh); }
  84% { transform: translate(-46vw, 1vh); }
  85% { transform: translate(-10vw, -47vh); }
  86% { transform: translate(-33vw, 50vh); }
  87% { transform: translate(-1vw, -7vh); }
  88% { transform: translate(-20vw, 21vh); }
  89% { transform: translate(7vw, 38vh); }
  90% { transform: translate(-5vw, 27vh); }
  91% { transform: translate(-12vw, -35vh); }
  92% { transform: translate(-3vw, -36vh); }
  93% { transform: translate(-50vw, 15vh); }
  94% { transform: translate(2vw, -44vh); }
  95% { transform: translate(24vw, 23vh); }
  96% { transform: translate(-4vw, 30vh); }
  97% { transform: translate(-30vw, 3vh); }
  98% { transform: translate(29vw, 43vh); }
  99% { transform: translate(27vw, 47vh); }
  100% { transform: translate(-1vw, 45vh); }
} */

.backToToolbox {
  position: absolute;
  top: 1em;
  left: 1em;
  text-decoration: none;
  color: light-dark(#313136, #e4e4e4);
  background-color: light-dark(#e9e9e9, #505058);
  border-radius: 2em;
  padding: .5em .75em;
  font-size: .9em;
  box-shadow: .1em .1em .5em 0 rgba(0, 0, 0, .3);
  z-index: 1;
}

.chatWrap {
  width: 100%;
  max-width: 60em;
  height: min(50em, calc(100% - 2em));
  display: flex;
  flex-direction: column;
  border-radius: 2em;
  overflow: hidden;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.chatWrap .chatLogCont {
  background-color: light-dark(#dbdbdb, #35353b);
  padding: 2em;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-align: end;
  white-space: pre-wrap;
  box-shadow: inset 0 -0.5em 0.5em -0.5em rgba(0, 0, 0, .4);
}

.chatWrap .chatLogCont > div {
  padding: .5em .5em 1.5em .5em;
}

.chatWrap .chatLogCont > div:first-of-type {
  opacity: .7;
}

.chatWrap .chatLogCont > div:not(:last-of-type) {
  border-bottom: .1em solid light-dark(#c4c4c4, #54545e);
}

.chatWrap .chatMsgCont {
  background-color: light-dark(#e9e9e9, #505058);
  display: flex;
  align-items: center;
}

.chatWrap .chatMsgCont .chatInput {
  background-color: transparent;
  border: none;
  height: 3em;
  font-size: 1.1em;
  width: 100%;
  padding: 1.5em;
  outline: none;
  resize: none;
}

.chatWrap .chatMsgCont .chatSendBtn {
  background-color: transparent;
  border: none;
  width: 4em;
  height: 4em;
  font-size: 1.2em;
}

@media (max-width: 60em) {
  .chatWrap {
    height: 100%;
    max-width: unset;
    border-radius: unset;
    box-shadow: unset;
  }
  
  .chatWrap .chatLogCont {
    padding-top: 4em;
  }
}