.shoutbox{--shoutbox-highlight-color: var(--key-color, var(--key-color-1, currentColor));--shoutbox-border-radius: var(--border-radius-s, var(--border-radius, var(--theme-border-radius, .25rem)));--shoutbox-transition: .2s ease;position:relative;height:100%;min-height:var(--min-height, 50vh)}.shoutbox__wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;height:100%}.shoutbox__messages-wrapper{flex:1;display:flex;flex-direction:column-reverse;overflow:auto;scrollbar-color:var(--shoutbox-highlight-color) transparent;scrollbar-width:thin;-webkit-mask-image:linear-gradient(to bottom,transparent,black 4rem);mask-image:linear-gradient(to bottom,transparent,black 4rem);padding-top:4rem;margin-bottom:.5rem}.shoutbox__messages{display:flex;flex-direction:column;font-size:var(--font-size-xs, .875rem);line-height:var(--font-line-height, calc(1em + .5rem))}@media (hover){.shoutbox__messages{margin-right:.25rem}}.shoutbox__message{--message-color: hsl(var(--message-color-hue) 50% 50%);position:relative;display:grid;grid-template-areas:"avatar header" "avatar content";grid-template-columns:auto minmax(0,1fr);align-items:start;gap:0 .5em;padding:.25em .5em;z-index:0}.shoutbox__message.--sticky{order:1}.shoutbox__message.--color-highlight{--message-color: var(--shoutbox-highlight-color);padding:.5em}.shoutbox__message.--color-highlight:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:var(--shoutbox-highlight-color);border-radius:var(--shoutbox-border-radius);opacity:.1;z-index:-1}.shoutbox__message.--color-highlight .shoutbox__message__author,.shoutbox__message.--color-highlight .shoutbox__message__timestamp,.shoutbox__message.--color-highlight .shoutbox__message__content{color:var(--shoutbox-highlight-color)}.shoutbox__message.--color-self .shoutbox__message__author{color:var(--message-color)}.shoutbox__message__header{grid-area:header;display:flex;gap:.5em}.shoutbox__message__avatar{position:relative;grid-area:avatar;display:flex;align-items:center;justify-content:center;width:2em;height:2em;font-size:.75em;font-weight:700;color:var(--message-color, currentColor);user-select:none;z-index:0}.shoutbox__message__avatar:before,.shoutbox__message__avatar:after{content:"";position:absolute;width:100%;height:100%;border-radius:50%;z-index:-1}.shoutbox__message__avatar:before{background:var(--message-color, currentColor);opacity:.2}.shoutbox__message__avatar:after{border:2px solid var(--message-color, currentColor);opacity:.8}.shoutbox__message__author{font-weight:700}.shoutbox__message__timestamp{opacity:.4}.shoutbox__message__content{grid-area:content;opacity:.8}.shoutbox__footer{flex:0 0 auto;position:relative;text-align:center}.shoutbox__footer input{padding-right:4em!important}@media (width > 960px){.shoutbox__footer input{padding-right:8em!important}}.shoutbox__footer input[maxlength="320"]{padding-right:5em!important}input:focus-visible~.shoutbox__footer__tools .shoutbox__footer__tools__button.--submit{opacity:1}.shoutbox__footer__tools{position:absolute;right:0;top:0;bottom:0;display:flex;width:auto!important;padding:0 .25em;margin:0!important}.shoutbox__footer__tools__button{display:flex;align-items:center;justify-content:center;gap:.25em;padding:.25em;color:currentColor;opacity:.6;transition:var(--shoutbox-transition)}.shoutbox__footer__tools__button:focus-visible,.shoutbox__footer__tools__button:hover{opacity:1}.shoutbox__footer__tools__button__icon.iconSet{font-size:1.25em}.shoutbox__footer__tools__button__text{font-size:.875rem}@media (width < 960px){.shoutbox__footer__tools__button__text{display:none}}