#threads {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 12;
  --s-x: 0;
  --s-y: 0;
  overflow: hidden;
}

.feedback {
  --pad: 0.5em;

  color: var(--text-on-dark);

  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 3em;
  aspect-ratio: 1;
  border-radius: 5%;
  border-bottom-left-radius: 0;

  /* This was good an hour+ ago
  and i'm still toying, productivy died here
  - Ben */
  background:
    linear-gradient(110deg, rgba(255, 157, 0, 0.025), rgba(0, 170, 255, 0.012)),
    #2a2a2a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0.1em 0.2em 0.33em rgba(0, 0, 0, 1),
    0.05em 0.1em 0.16em rgba(0, 0, 0, 0.75),
    inset 0 0 1em rgba(0, 0, 0, 0.543);
  transform: translate(0%, -100%) translate(var(--s-x), var(--s-y));

  pointer-events: all;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: none;
}

.thread {
  z-index: 110;
  cursor: default;
  width: 64ch;
  aspect-ratio: initial;
  border-radius: 1em;
  max-width: 90%;
  height: fit-content;
  max-height: calc(100% - 5em);
  left: 50%;
  top: 50%;
  box-shadow:
    0.1em 0.2em 0.33em rgba(0, 0, 0, 0.11),
    inset 1em 1em 4em rgba(255, 255, 255, 0.05),
    inset -1em -1em 2em rgba(0, 0, 0, 0.2);
  /*
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  justify-content: start;
*/
  transition:
    width var(--spd-insp) ease calc(var(--spd-insp) * 0.2),
    background-color var(--spd-insp) ease;
}

.feedback-ghost {
  --bstyle: 'solid';
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  max-width: 2.8em;
  overflow: hidden;
  /* aspect-ratio: 1; */
  background-color: var(--c-dark-bg);
  border: 1.5px solid var(--c-dark-dim);
  border-radius: 1.4em;
  border-bottom-left-radius: 0;
  transform: translate(0%, -100%) translate(var(--s-x), var(--s-y));
  transition: max-width var(--spd-insp) ease;
}

.feedback-ghost.selected {
  border: 2px dashed var(--power-secondary-color);
  width: 2em;
  aspect-ratio: 1;
  background-color: color-mix(in srgb, var(--c-dark-bg) 50%, transparent);
}

.feedback-ghost.selected button.open {
  display: none;
}

.feedback-ghost.closed {
  font-size: 0.75em;
  opacity: 0.33;
}

.thread-ghost-subject {
  padding: 0.5em 1em 0.5em 0.5em;
  font-size: 0;
  color: var(--text-on-dark);
  max-height: 2.8em;
  overflow: hidden;
  text-overflow: clip;
  text-overflow: ellipsis ellipsis;
  transition-behavior: allow-discrete;
  opacity: 0;
  transition: all var(--spd-insp) ease;
}

.feedback-ghost:hover {
  max-width: 14em;
  z-index: 11;
}

.feedback-ghost:hover .thread-ghost-subject {
  max-height: 6em;
  opacity: 1;
  font-size: 0.8em;
}

.feedback.opened {
  z-index: 100;
  cursor: default;
  aspect-ratio: initial;
  border-radius: 1em;
  max-width: 90%;
  height: fit-content;
  max-height: calc(100% - 5em);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  box-shadow:
    0.1em 0.2em 0.33em rgba(0, 0, 0, 0.11),
    inset 1em 1em 4em rgba(255, 255, 255, 0.05),
    inset -1em -1em 2em rgba(0, 0, 0, 0.2);

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  justify-content: start;

  transition:
    width var(--spd-insp) ease calc(var(--spd-insp) * 0.2),
    background-color 120ms ease;
}

.feedback-message,
.thread-comment {
  position: relative;
  overflow: visible;
  scroll-snap-align: start;
  margin: 0 0 1.5em 0;
}

.fmessage-replies .feedback-message.lvl_1:nth-child(odd)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 2em);
  height: calc(100% + 1.5em);
  transform: translate(-50%, -50%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.01)
  );
  z-index: -1;
}

.feedback-ghost button.open {
  padding: 0;
  font-size: 1em;
  border: 0;
  background: none;
  display: block;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.feedback-ghost button.open .userIcon {
  flex-shrink: 0;
  align-self: flex-start;
}

.feedback-message.lvl_0 > header img.fromthumb,
.feedback-message.lvl_0 > header .noThumb,
.thread-comment.lvl_0 > header img.fromthumb,
.thread-comment.lvl_0 > header .noThumb {
  box-shadow:
    0 0 0px 1.25px rgb(225, 255, 0),
    inset 0 0 3px 0px rgba(255, 255, 255, 0.407),
    -2px -2px 3px rgba(255, 255, 255, 0.07),
    2px 2px 3px rgba(0, 0, 0, 0.5) !important;
}

.feedback > header,
.thread-comment > header {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  gap: 1em;
  row-gap: 0.125em;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad) 1em;
  border-bottom: 1px solid rgb(56, 56, 56);
}
.feedback > header::after,
.thread-comment > header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.125));
}

.thread-comment > header {
  padding: 0.5em 0 1em 0;
}

.thread-subject {
  grid-column: span 2;
  padding: 0 0 2em 0;
  font-size: 1.125em;
  text-align: center;
  font-weight: 700;
  font-style: italic;
  font-family: var(--display-font);
}

.feedback > header .ftitle,
.thread > header .ftitle {
  font-size: 0.9em;
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.feedback-buttons {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.25em;
  margin-right: -0.33em;
}
.feedback-buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 0;
  width: 1.5em;
  aspect-ratio: 1;
  border-radius: 0.5em;
}
.feedback-buttons button:hover {
  background-color: #3a3a3a;
}
.feedback-buttons button .icon {
  color: var(--text-on-dark);
  font-size: 1.25em;
}
.feedback-buttons button.resolve .icon {
  font-size: 1em;

  color: #636363;
}
.feedback-buttons button.resolve.closed .icon {
  color: var(--power-secondary-color);
}

.feedback-content,
.thread-content {
  font-size: 0.95em;
  padding: 1em calc(1em - 6px) 1em 1em;

  width: calc(100% - 1px);
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding-block: 0.75em;
  scroll-snap-align: end;
  /*  opacity: 0; */
  transition: none;
}

.feedback.opened .feedback-content,
.feedback.opened header,
.feedback.opened .feedback-input {
  opacity: 0;
  transition: opacity 80ms ease 120ms;
  animation: reveal forwards 250ms ease;
  animation-delay: 100ms;
}

@keyframes reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.feedback-content::-webkit-scrollbar {
  width: 6px;
}

.feedback-content::-webkit-scrollbar-track {
  background: transparent;
  overflow: visible;
}

.feedback-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 0px 2px rgb(0, 0, 0);
  border-radius: 7px;
  border: 1px solid transparent;
  z-index: 999;
  opacity: 0;
}

.feedback:hover .feedback-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.1);
}

.feedback-content::-webkit-scrollbar-thumb:hover {
  background: rgba(3, 3, 3, 0.484);
}

.fmessage-replies,
.thread-comments {
  margin-top: 1.5em;
  padding-left: 0em;
  /*padding-left: 2.5em;
  border-left: 1px solid #3a3a3a;*/
  position: relative;
}

.feedback-message:last-child > .fmessage-replies.empty {
  margin: 0;
}
.feedback-message.lvl_1:last-child {
  margin-bottom: -3px;
}
.feedback-message > header {
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: space-between;
}
.fmessage-from {
  display: flex;
  gap: 0.75em;
  align-items: center;
  justify-content: start;
  font-weight: 600;
  text-shadow: 0px 0px 1px black;
}

.fmessage-from .fromthumb,
.feedback-input .noThumb,
.feedback-message .noThumb {
  width: 2em !important;
}

.fmessage-username {
}

.fmessage-date {
  color: #898989;
  font-size: 0.8em;
  text-align: right;
  align-self: flex-start;
  margin-top: 0.5ch;
  position: relative;
}
.fmessage-date::before {
  content: '';
  position: absolute;
  bottom: -0.9ch;
  right: 0;
  width: 1.75em;
  height: 1px;
  background-color: rgba(245, 222, 179, 0.13);
}
.fmessage-content {
  padding: 0.5em 0.5em 0.5em calc(2.66em + 0.75em);
  font-size: 1em;
  color: #e9e6df;
  font-family:
    Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
}

.fmessage-content p,
.thread-comment p {
  margin: 0 0 0.5em 0;
}

.feedback-input {
  width: 100%;
  display: flex;
  align-items: start;
  gap: 1em;

  padding: 1em;
  padding-top: 1.1em;
  position: relative;
  overflow: visible;
}
.feedback-input::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1em;
  z-index: 9;
  background: radial-gradient(
    ellipse at top,
    rgba(0, 0, 0, 0.3),
    transparent 90%
  );
  transform-origin: top left;
  transform: skew(45deg, 0deg);
}
.feedback-input::before {
  content: '';
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  z-index: 13;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.04)
  );
}

.feedback-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 100%;
}

.feedback-input .feedback-inputs > input {
  flex-grow: 1;
  background-color: var(--c-dark-bg);
  resize: none;
  border: 0;
  margin: 0;
  padding: 0.5em;
  border-radius: 0.33em;
  font-family: 'Nimbus Mono PS', 'Courier New', monospace;
  color: color-mix(in srgb, var(--text-on-dark) 80%, transparent);
  text-shadow:
    1px 1px 1px rgba(0, 0, 0, 0.082),
    0 0 1px rgba(217, 255, 0, 0.22),
    0 0 1.75em rgba(217, 255, 0, 0.1);
  font-size: 0.9em;
  font-weight: 500;
  box-shadow:
    inset 0 0 2px 0px rgba(255, 255, 255, 0.11),
    -1px -1px 2px rgba(255, 255, 255, 0.04),
    1px 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.6);
  transition: height var(--spd-insp) ease;
}

.feedback-input > textarea,
.feedback-input .feedback-inputs > textarea {
  width: 100%;
  flex-grow: 1;
  background-color: var(--c-dark-bg);
  resize: none;
  border: 0;
  margin: 0;
  padding: 0.5em;
  border-radius: 0.33em;
  font-family: 'Nimbus Mono PS', 'Courier New', monospace;
  color: color-mix(in srgb, var(--text-on-dark) 80%, transparent);
  text-shadow:
    1px 1px 1px rgba(0, 0, 0, 0.082),
    0 0 1px rgba(217, 255, 0, 0.22),
    0 0 1.75em rgba(217, 255, 0, 0.1);
  font-size: 0.9em;
  font-weight: 500;
  box-shadow:
    inset 0 0 2px 0px rgba(255, 255, 255, 0.11),
    -1px -1px 2px rgba(255, 255, 255, 0.04),
    1px 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.6);
  transition: height var(--spd-insp) ease;
}
.feedback-input textarea:focus,
.feedback-input textarea:not(:placeholder-shown) {
  height: 12ch;
}
.feedback-input textarea:placeholder-shown {
  height: 2.25em !important;
}

.feedback-input > button.send .icon {
  font-size: 1em;
  transition:
    transform calc(var(--spd-insp) * 0.5) ease,
    color var(--spd-insp) ease;
}
.feedback-input > button.send {
  color: var(--text-on-dark);

  background-color: rgb(57, 57, 57);
  border-radius: 100%;
  width: 2em;
  aspect-ratio: 1;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 0 1px 1px rgb(0, 0, 0),
    inset 0 0 3px 0px rgba(255, 255, 255, 0.11),
    -2px -2px 3px rgba(255, 255, 255, 0.07),
    2px 2px 3px rgba(0, 0, 0, 0.5);

  transition:
    background-color calc(var(--spd-insp) * 0.5) ease,
    transform calc(var(--spd-insp) * 0.5) ease;
}

.feedback-input > button.send:disabled {
  background-color: #292929;
  cursor: default;
}
.feedback-input > button.send:disabled .icon {
  color: #090909;
}

.feedback-input > button.send:not(:disabled):hover {
  background-color: #535353;
}
.feedback-input > button.send:not(:disabled):hover .icon {
  transform: rotate(-90deg);
}

/* ADD MODE */

/* see-trough feature on hover */
button.see-through .icon {
  color: #636363;
}
button.see-through:hover .icon {
  color: #d5fb00 !important;
}

.feedback.see-through .feedback-content,
.feedback.see-through .feedback-input,
.feedback.see-through .thread-content {
  opacity: 0 !important;
}

.feedback.see-through > header {
  background-color: #292929;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}

.feedback.opened.see-through {
  background-color: transparent;
  border: 1px solid black;
  box-shadow:
    0 0 0px 1px rgba(255, 255, 255, 0.75),
    0 0 16px #292929;
}