article.reply {
    display: grid;
    grid-template-columns: var(--reply-aside-width) 1fr;
    gap: var(--gutter);
    padding-inline-end: var(--gaps);
    overflow: hidden;
    --footer-height: 2rem;
}
    article.reply header {
        display: flex;
        justify-content: space-between;
        margin-block-end: var(--smol-gutter);
        min-height: 1.15rem;
        font-size: var(--smol-font-size);
        align-items: end;
    }
        article.reply header a {
            line-height: var(--line-height-tight);
            color: var(--color-text-secondary);
        }
        article.reply header a:hover {
            color: var(--color-secondary) !important;
        }

    article.reply footer {
        display: flex;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: var(--footer-height);
        justify-content: end;
        gap: var(--gutter);
        align-items: center;
        color: var(--color-text-secondary);
        /*--gutter: var(--smol-gutter);*/
    }
        article.reply footer .reactions {
            display: flex;
            gap: var(--gutter);
            padding: 0;
            list-style: none;
        }
        article.reply footer .reactions li b {
            font-size: 1rem;
            font-weight: normal;
            user-select: none;
        }

        button.react,
        .available_reactions button {
            display: flex;
            width: var(--footer-height);
            height: var(--footer-height);
            aspect-ratio: 1;
            padding: 0;
            border-radius: 999vh;
            background: none;
            border: none;
            color: var(--color-text-secondary);
            align-items: center;
            gap: .333rem;
            justify-content: center;
            font-size: 1.333rem !important;
            box-shadow: none;
        }
        button.react .ph {
            font-size: 1.333rem;
        }
        button.react:hover + .available_reactions,
        .available_reactions:hover {
            display: flex;
            gap: var(--smol-gutter);
            position: absolute;
            flex-direction: row-reverse;
        }
        .available_reactions button.active {
            background-color: var(--color-secondary);
        }
        .available_reactions button.active:hover {
            background-color: var(--color-secondary-75) !important;
            font-size: 1.333rem !important;
        }
        .available_reactions {
            display: none;
            background: var(--color-bg-text);
            padding: 0 0 0 var(--smol-gutter);
            border-radius: 999rem;
            user-select: none;
        }
        .available_reactions button:hover {
            background: none !important;
            /*transform: scale(1.2);*/
            font-size: 2em !important;
            box-shadow: none !important;
        }
        article.reply footer * {
            font-size: var(--smol-font-size);
            max-height: 100%;
        }


    article.reply aside {
        line-height: var(--line-height-tight);
    }
        article.reply > aside > * {
            width: 100%;
            display: block;
            margin-inline: auto;
            margin-block-end: var(--smol-gutter);
            text-align: center;
        }
        article.reply > aside a {
            color: inherit;
        }
        article.reply > aside a:hover {
            color: var(--color-secondary) !important;
        }
        article.reply > aside > img {
            width: 5rem;
            height: 5rem;
            border-radius: calc(var(--border-radius) * 2);
        }


    article.reply > div {
        position: relative;
        padding-bottom: calc(var(--footer-height) + var(--gutter));
        overflow: hidden;
    }
        article.reply > div > * + * {
            margin-top: .666em;
            margin-block-start: .666em;
        }
        article.reply > div p a {
            text-decoration: underline;
            text-decoration-thickness: .06em;
        }
        article.reply > div img {
            max-width: 100%;
            height: auto;
            max-height: 50vh;
        }
        article.reply > div ul {
            list-style: disc;
            padding-left: 2.5em;
        }
        article.reply > div ol {
            list-style: revert;
            padding-left: 2.5em;
        }


    article.reply .attachments {
        border-radius: .666em;
        border: 1px solid var(--color-shadows);
        padding: calc(var(--gutter) / 2) var(--gutter);
        margin-block-start: var(--gaps);
    }
        article.reply .attachments ul {
            display: flex;
            flex-wrap: wrap;
            gap: var(--gutter);
            align-items: baseline;
            list-style: none;
            padding: 0;
            position: relative;
            padding-inline-start: var(--gaps);
        }
            article.reply .attachments ul li img {
                margin: 0;
            }
            article.reply .attachments ul li:first-child {
                position: absolute;
                top: 49%;
                left: 0;
            }
            article.reply .attachments ul li {
                display: flex;
                flex-direction: column;
                font-size: var(--smol-font-size);
                align-items: center;
                text-align: center;
                max-width: 14em;
            }
            article.reply .attachments ul li a {
                color: inherit;
            }

    article.reply header img,
    article.reply header h3 {
        display: none;
    }

article.reply.searchresult footer,
article.reply.searchresult footer * {
    font-size: .666rem !important;
}

article.reply.searchresult > div > h2 {
  font-weight: 600;
  font-size: 1rem;
}



form.poll > h3 {
    margin-inline-start: var(--smol-gutter);
}
@media only screen and (min-width: 800px)
{
    form.poll > h3 {
        font-size: 1.666rem;
        line-height: var(--line-height-tight);
        font-weight: 350;
    }
}
form.poll > small {
    display: block;
    margin: 0 0 var(--smol-gutter) var(--smol-gutter);
}
form.poll ul {
    display: flex;
    flex-flow: column;
    gap: .333em;
}
form.poll li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: var(--smol-gutter);
}
form.poll li > * {
    z-index: 1;
}
form.poll li > x-poll-bar {
    position: absolute;
    background: var(--color-secondary-25);
    border-radius: var(--border-radius);
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    transition: all 1s;
}
form.poll li > x-poll-bar.winner {
    background: var(--color-secondary-50);
}
form.poll li > label {
    display: flex;
    align-items: center;
    gap: var(--smol-gutter);
    font-size: inherit;
    cursor: pointer;
    margin: 0;
    padding: 0;
}
form.poll li > label > input {
    appearance: none;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 0;
    vertical-align: 0;
    height: auto;
    width: auto;
    display: inline-block;
}
form.poll li > span {
    text-wrap: nowrap;
    margin-inline-start: var(--gutter);
}


@media only screen and (max-width: 800px)
{
    article.reply {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: var(--gutter);
    }
    article.reply header {
        column-gap: var(--gutter);
        display: grid;
        grid-template-areas: "pic name edit"
                             "pic time edit";
        grid-template-columns: var(--reply-aside-width) 1fr auto;
        align-items: end;
        margin-block-end: var(--gutter);
    }
    article.reply header img {
        grid-area: pic;
        margin: 0;
        border-radius: var(--border-radius);
        width: 100%;
        align-self: center;
        display: block;
    }
    article.reply header h3 {
        grid-area: name;
        /*font-size: var(--main-font-size);*/
        display: block;
    }
    article.reply header time {
        grid-area: time;
        align-self: start;
    }

    article.reply .attachments {
        margin-block-start: var(--gutter);
    }

      
    form.poll li {
        padding-block: .333em;
    }
}