html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: 0;
}

h3 {
  padding: 20px;
  margin: 0;
  color: whitesmoke;
}

p {
  padding: 15px;
  margin: 0;
  white-space: pre-wrap;
}

#loading {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  font-size: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#chat {
  position: absolute;
  display: flex;
  flex-direction: column;
}

#fatal-error {
  font-size: 32px;
  color: red;
  text-align: center;
  vertical-align: center;
  display: none;
}

#chats {
  padding: 6px;
  font-size: 20px;
  display: none; /* will be changed to flex dynamically */
  flex-direction: column;
  height: 100%;
}

#previous-chats {
  flex: 1;
  margin: 0 33px;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.previous-chat-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.previous-chat-info p {
  padding: 12px 7px;
  font-size: 19px;
  color: white;
}
.previous-chat-info small {
  font-size: 15px;
  font-style: italic;
  color: lightgray;
}
.previous-chat-info button {
  margin: 7px;
  padding: 7px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
}
.previous-chat-info button:hover {
  background-color: #0056b3;
}

#start-new-chat {
  flex: none;
  display: flex;
  flex-direction: column;
  background-color: #5f5f5f;
  border-radius: 6px;
  margin: 15px 42px;
  padding: 15px;
}
.switcher-holder {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
}
.switcher-holder p {
  width: 250px;
  padding: 0px;
}
.switcher {
  display: flex;
  margin: 7px 0;
  align-items: center;
  gap: 15px;
  flex-flow: row wrap;
  row-gap: 6px;
}
.switcher label {
  cursor: pointer;
  padding: 4px 7px;
  border: 1px solid #ddd;
  border-radius: 15px;
  background-color: #f4f4f4;
  color: gray;
}
.switcher input[type="radio"] {
  display: none;
}
.switcher input[type="radio"]:checked + label {
  background-color: #007bff;
  color: #ffffff;
  border-color: #007bff;
}
#start-new-chat-btn {
  margin: 10px 0;
  padding: 12px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
#start-new-chat-btn:hover {
  background-color: #0056b3;
}

#history {
  flex: 1;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 26px;
  display: none; /* will be changed to flex dynamically */
  flex-direction: column-reverse; /* for automatic scroll to the bottom, but elements are in reversed order */
}

#footer {
  flex: none;
  display: none; /* will be changed to flex dynamically */
  flex-direction: row;
  align-items: center;
}

#message {
  flex: 1;
  padding: 6px;
  margin: 15px;
  background-color: #222;
  color: antiquewhite;
  font-size: 28px;
  border: 2px solid antiquewhite;
  border-radius: 5px;
  outline: none;
  min-width: 50px;
}

@media (orientation: landscape) {
  canvas {
    width: 60%;
    height: 100%;
  }
  #loading {
    width: 60%;
    height: 100%;
  }
  #chat {
    left: 60%;
    top: 0;
    width: 40%;
    height: 100%;
  }
}

@media (orientation: portrait) {
  canvas {
    width: 100%;
    height: 60%;
  }
  #loading {
    width: 100%;
    height: 60%;
  }
  #chat {
    left: 0;
    top: 60%;
    width: 100%;
    height: 40%;
  }
}

.debug-button {
  position: absolute;
  border: 0;
  left: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-sizing: border-box;
  transition: transform .3s;
  font-size: 0;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
}
.debug-button:hover {
  transform: scale(1.125);
}

/* Fullscreen Button
------------------------------*/
#fullscreen-button {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0,0,0,0.05);
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-sizing: border-box;
  transition: transform .3s;
  font-size: 0;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
}
#fullscreen-button:hover {
  transform: scale(1.125);
}
#fullscreen-button span {
  width: 4px;
  height: 4px;
  border-top: 2.5px solid #111; /* color */
  border-left: 2.5px solid #111; /* color */
  position: absolute;
  outline: 1px solid transparent;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
  -webkit-perspective: 1000;
  transition: .3s;
  transition-delay: .15s;
}
#fullscreen-button span:nth-child(1) {
  top: 11px;
  left: 11px;
}
#fullscreen-button span:nth-child(2) {
  top: 11px;
  left: 22px;
  transform: rotate(90deg);
}
#fullscreen-button span:nth-child(3) {
  top: 22px;
  left: 11px;
  transform: rotate(-90deg);
}
#fullscreen-button span:nth-child(4) {
  top: 22px;
  left: 22px;
  transform: rotate(-180deg);
}

/* Fullscreen True
------------------------------*/
[fullscreen] #fullscreen-button span:nth-child(1) {
  top: 22px;
  left: 22px;
}
[fullscreen] #fullscreen-button span:nth-child(2) {
  top: 22px;
  left: 11px;
}
[fullscreen] #fullscreen-button span:nth-child(3) {
  top: 11px;
  left: 22px;
}
[fullscreen] #fullscreen-button span:nth-child(4) {
  top: 11px;
  left: 11px;
}

/* Dark Style
------------------------------*/
[light-mode=dark] {
  background: #111;
  color: #fff;
}
[light-mode=dark] #fullscreen-button {
  background: rgba(255,255,255,.2);
}

[light-mode=dark] #fullscreen-button span {
  border-top: 2.5px solid #fff;
  border-left: 2.5px solid #fff;
}

/* Audio recording elements
------------------------------*/
.audio-recording-container {
  flex: none;
  /*targeting Chrome & Safari*/
  display: -webkit-flex;
  /*targeting IE10*/
  display: -ms-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*horizontal centering*/
  align-items: center;
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 20px;
}
.start-recording-button {
  font-size: 70px;
  color: #435f7a;
  cursor: pointer;
  opacity: .5;
}
.start-recording-button:hover {
  opacity: 1;
}
.recording-control-buttons-container {
  /*targeting Chrome & Safari*/
  display: -webkit-flex;
  /*targeting IE10*/
  display: -ms-flex;
  display: flex;
  justify-content: space-evenly;
  /*horizontal centering*/
  align-items: center;
  width: 334px;
}
.cancel-recording-button,
.stop-recording-button {
  font-size: 70px;
  cursor: pointer;
}
.cancel-recording-button {
  color: red;
  opacity: 0.7;
}
.cancel-recording-button:hover {
  color: rgb(206, 4, 4);
}
.stop-recording-button {
  color: #33cc33;
  opacity: 0.7;
}
.stop-recording-button:hover {
  color: #27a527;
}
.recording-elapsed-time {
  /*targeting Chrome & Safari*/
  display: -webkit-flex;
  /*targeting IE10*/
  display: -ms-flex;
  display: flex;
  justify-content: center;
  /*horizontal centering*/
  align-items: center;
}
.red-recording-dot {
  font-size: 25px;
  color: red;
  margin-left: 9px;
  margin-right: 9px;
  /*transitions with Firefox, IE and Opera Support browser support*/
  animation-name: flashing-recording-dot;
  -webkit-animation-name: flashing-recording-dot;
  -moz-animation-name: flashing-recording-dot;
  -o-animation-name: flashing-recording-dot;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}
/* The animation code */
@keyframes flashing-recording-dot {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes flashing-recording-dot {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes flashing-recording-dot {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes flashing-recording-dot {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.elapsed-time {
  font-size: 32px;
  padding-left: 0;
}
.recording-control-buttons-container.hide {
  display: none;
}

@media only screen and (orientation: portrait)  and (max-width: 900px) {
  canvas {
    width: 100%;
    height: 44%;
  }
  #loading {
    width: 100%;
    height: 44%;
  }
  #chat {
    left: 0;
    top: 44%;
    width: 100%;
    height: 56%;
  }
}

@media only screen and (orientation: landscape) and (max-width: 1600px) {
  canvas {
    width: 48%;
    height: 100%;
  }
  #loading {
    width: 48%;
    height: 100%;
  }
  #chat {
    left: 48%;
    top: 0;
    width: 52%;
    height: 100%;
  }
}

@media only screen and (orientation: portrait)  and (max-width: 900px),
       only screen and (orientation: landscape) and (max-width: 1600px) {
  #loading {
    font-size: 35px;
  }
  #history {
    font-size: 17px;
    padding-bottom: 4px;
  }
  #message {
    font-size: 19px;
    padding: 4px;
    margin: 10px;
  }
  p {
    padding: 10px;
  }
  .audio-recording-container {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 13px;
  }
  .recording-control-buttons-container {
    width: 223px;
  }
  .start-recording-button,
  .cancel-recording-button,
  .stop-recording-button {
    font-size: 47px;
  }
  .red-recording-dot {
    font-size: 17px;
    margin-left: 6px;
    margin-right: 6px;
  }
  .elapsed-time {
    font-size: 21px;
  }
}