.thread-container {
    width: 100%;
    display: flex;
    justify-content: center;
  /* display: grid; */
  /* gap: 1.5rem; */
}

.thread-container main {
    padding: 1rem;
    max-width: calc(600px + 6rem);
}

.thread-container .top-menu {
    margin-bottom: 1rem;
}

@media screen and (min-width: 640px) {
    .thread-container main {
        padding: 3rem;
    }
}

.thread-container .myth-row {
    margin-bottom: 0.5em;
}

.thread-container .myth-field-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.thread-container .myth-field-actions a {
    color: var(--text-dark);
}

.myth-field textarea {
    width: 100%;
  height: 100%;
  min-height: 80px;
}

.myth-field {
    display: flex;
    flex-direction: column;
}

.myth-field .myth-field-replace-wrapper {
    flex-grow:1;
}

.thread-container main form {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    margin-top: 1em;
}
.thread-container main form textarea {
    margin: 1em 0;
    width: 100%;
}

.thread-container .htmx-indicator {
    display: none;
}

.thread-container .htmx-request .htmx-indicator,
.thread-container .htmx-request.htmx-indicator {
    display: flex;
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 30px;
    height: 30px;
    display: flex;
}

.thread-container button .loader {
    margin-left: 0.5rem;
}

.loader::before,
.loader::after {
    content: "";
    flex: 1;
    animation: l14 1.5s -.25s infinite linear alternate both;
}

.loader::after {
    --s: -1, -1;
    animation-delay: .5s;
}

@keyframes l14 {
    0%,
    30%  {transform: scale(var(--s, 1)) translate(0px) perspective(150px) rotateY(0deg);
          clip-path: polygon(50% 0,100% 0,100% 100%,50% 100%,0 75%,0 25%);
          background: #fff;}
    37.5%{transform: scale(var(--s, 1)) translate(-10px) perspective(150px) rotateX(0deg);
          clip-path: polygon(50% 0,100% 0,100% 100%,50% 100%,0 75%,0 25%);
          background: #fff;}
    50%  {transform: scale(var(--s, 1)) translate(-10px) perspective(150px) rotateX(-90deg);
          clip-path: polygon(50% 0,100% 0,100% 100%,50% 100%,0 75%,0 25%);
          background: #fff;
          border-radius: 0}
    50.01%{transform: scale(var(--s, 1)) translate(-10px) perspective(150px) rotateX(-90.1deg);
           clip-path: polygon(0 0,100% 0,100% 100%,50% 100%,0 100%,0 25%);
           background: #fff;
           border-radius: 100px 0 0 100px}
    62.5%{transform: scale(var(--s, 1)) translate(-10px) perspective(150px) rotateX(-180deg);
          clip-path: polygon(0 0,100% 0,100% 100%,50% 100%,0 100%,0 25%);
          background: #fff;
          border-radius: 100px 0 0 100px}
    70%,
    100%{transform: scale(var(--s, 1)) translate(0px) perspective(150px) rotateX(-180deg);
          clip-path: polygon(0 0,100% 0,100% 100%,50% 100%,0 100%,0 25%);
          background: #fff;
          border-radius: 100px 0 0 100px;}
}

.thread-container .powered-by {
    width: 100%;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 700;
}

.thread-list-item {
    cursor: pointer;
}

.thread-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.thread-list-item {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem 1.1rem;
    border-radius: 0;
    border: 1px solid #000;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    /* width: max-content; */
    min-width: 15em;
}

.thread-list-image {
    /* height: 3.5em; */
    max-height: 10em;
    width: auto;
    object-fit: cover;
    border-radius: 10px;
    position: relative;
    /* top: -0.9em; */
    /* left: -0.9em; */
}

.thread-list-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 15em;
}

@media (min-width: 640px) {
    .thread-list-item {
        flex-direction: row;
        align-items: flex-start;
    }
}

.thread-list-title {
    font-weight: 700;
    color: var(--text-dark);
}

.thread-list-behaviours {
    font-size: 0.95rem;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}