#message-box {
   --pattern: 2fr 7fr 1.5fr 2.5fr;

   display: grid;
   place-items: center;
   padding: 0;

   padding-top: 3em;

   overflow: hidden;
}

#message-box::after {
   content: '';
   position: absolute;
   bottom: 0;
   width: 100%;
   border-radius: 0 0 2em 2em;

   height: .6em;
   background: linear-gradient(transparent, var(--bl));
   z-index: 15;
   pointer-events: none;
}

#message-box button:hover>* {
   filter: drop-shadow(0 0 .25em var(--ms));
}

#inbox-header {
   position: absolute;
   top: 0;
   width: 100%;

   display: grid;
   grid-template-columns: var(--pattern);

   border-bottom: var(--brd);

   padding: .75em;
   text-transform: uppercase;

   box-shadow: 0 0 .5em .5em var(--bl);
   z-index: 5;
}

#inbox-header span {
   margin-left: 1em;
}


#inbox-body {
   min-height: fit-content;
   max-height: calc(80vh - 3.5em);

   align-self: baseline;

   width: 100%;

   display: flex;
   flex-direction: column-reverse;

   gap: .5em;
   padding: .55em 1em;

   overflow-y: auto;
   scrollbar-width: none;
}

#inbox-bod button {
   border: 0;
   border-radius: 0;
}

#message-reader {
   position: absolute;
   scale: 0;
   opacity: 0;

   width: 100%;
   height: 100%;
   border-radius: inherit;
   padding: 1em;

   background-color: var(--bl);
   z-index: 10;

   transition: .4s;
}

#message-box.open #message-reader {
   scale: 1;
   opacity: 1;
}

/* inbox view */

.message {
   display: grid;
   grid-template-columns: var(--pattern);

   cursor: pointer;
   text-decoration: none;
   border: 1px solid var(--w);
   border-radius: 1em;
}

.message span:not([data-unit]) {
   padding: 1rem;
   align-self: center;
}

.message:hover {
   box-shadow: 0 0 .25em .1em var(--ms);
}

.message:hover button>* {
   filter: drop-shadow(0 0 .25em var(--ms));
}




.message>span:first-child {
   border-right: .2rem dashed;
}

.message:not(.unread) {
   opacity: .6;
}

.msg-inter {
   display: inline-flex;
   justify-content: end;
   text-align: center;
   padding: 0 !important;
   height: 100%;
}

.msg-inter button {
   border-left: var(--brd) !important;
   padding-block: 0;
   border-radius: 0;
}

.msg-inter button:not(.msg-delete),
.msg-inter span {
   flex-grow: 1;
}

.new-msg {
   overflow: clip;
   animation: new-msg .7s forwards;
   pointer-events: none;
}

@keyframes new-msg {
   0% {
      max-height: 0;
   }

   100% {
      max-height: 4rem;
   }
}

/* messages from the board */

.dir-message>span:first-child {
   font-weight: bold;

}

/* in-message dialog */

#message-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border: var(--brd);
   height: 2.5rem;
   border-radius: 1rem;

   box-shadow: 0 0 .5em .5em var(--bl);
   z-index: 2;

   button {
      height: 100%;
      border: 0;
      border-radius: 0;
   }

   h4 {
      opacity: .8;
   }
}

.msg-close {
   border: 0;
   border-right: 1px solid !important;
   padding: .25rem .5rem;
}

.msg-delete {
   border: 0;
   border-left: 1px solid;
   width: fit-content;
   padding: .25rem .5rem;
}

.message-body {
   height: calc(80vh - 3.5em);
   overflow: auto;
   transition: all .3s ease-in-out;
   font-size: 1.1rem;
}

/* discussion */
.twee-context[data-type="message"] {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: auto;
   max-width: unset;
   width: 100%;

   .twee-main {
      text-align: left;
      border: var(--brd);
      border-radius: 1rem;
      padding: 1rem;
      box-shadow: 0 0 2rem 2rem var(--vdg) inset;
      margin-block: 1em;
      width: 100%;
      overflow: clip;

      &::after {
         content: '';
         position: absolute;
         left: 15%;
         bottom: -.8em;
         width: 70%;

         border-top: 2px solid rgba(128, 128, 128, 0.623);
         border-radius: 1em;
      }

      p {
         margin-block: 1rem;
      }

   }

   .twee-passage {
      align-items: end;
      width: 100%;
      border-top: 0 !important;

      &::before {
         display: none;
      }
   }

}

/* message styling */

.twee-context[data-type="message"] .twee-passage>*,
.twee-context[data-type="message"] .dead-link {

   --underMarker: 1em;
   --brdWidth: .12em;

   max-width: 75%;
   width: fit-content;
   padding: .5rem 1rem;

   margin-top: .5rem;
   margin-bottom: var(--underMarker) !important;

   border: var(--brdWidth) solid;
   border-radius: .5rem;
   border-bottom-right-radius: 0;

   align-self: flex-end;

   &::before {
      content: '';
      position: absolute;
      top: 100%;
      right: calc(var(--brdWidth) * -1);
      border: calc(var(--underMarker) / 2) solid;
      width: 50%;
      height: 0;
      max-width: 8em;
      border-color: var(--w) var(--w) transparent transparent;
   }

}

/* left side messages */
.twee-context[data-type="message"] {

   .dead-link,
   a[data-link],
   [data-say] {
      align-self: baseline;
      text-align: left !important;
      border-radius: .5rem;
      border-bottom-left-radius: 0;

      &::before {
         transform: rotateY(180deg);
         left: calc(var(--brdWidth) * -1);
      }
   }
}

.twee-passage {
   display: flex;
   flex-direction: column;

}

.twee-passage:first-child {
   border-top: 0;
}



a[data-link] {
   cursor: pointer;
}

@keyframes fade-in {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}



.main-msg:not(:only-child) {
   border-bottom: 1px solid;
}


.fade-in {
   opacity: 0;
   animation: fade-in .8s forwards;
}

@keyframes fade-in {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

.msg-bg {
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
   right: 0;
   font-size: 10rem;
   display: grid;
   place-items: center;
   z-index: -1;
   opacity: .1;
   pointer-events: none;

   i {
      font-size: 8rem;
   }
}

div.deco-msg:not(#fake, #f) {
   max-width: unset;
   width: 100%;
   border: none;
   font-style: italic;
   text-align: center;
   margin-bottom: unset;

   &::before {
      display: none;
   }
}