.he-sh-rule,
.he-typing-quote {
    --he-widget-blue: var(--color-light-blue, #37a9fd);
    --he-widget-red: var(--accent, #ac182c);
    --he-widget-dark: var(--color-dark-blue, #0c52ab);
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    min-width: 0;
    margin: 10px auto;
    padding: 14px 10px 10px;
    border-radius: 14px;
    font-family: var(--font-main, "Inter", sans-serif);
    overflow-wrap: anywhere;
}

.he-widget-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 12px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
}

.he-widget-brand__mill {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px;
    animation: he-widget-mill-spin 24s linear infinite;
}

.he-sh-rule {
    max-width: 300px;
    background: #1c162b;
    border: 1px solid var(--he-widget-red);
    color: #fff;
    box-shadow: 0 4px 14px rgb(218 172 255 / 15%);
}

.dialog-right-user__message:has(.he-sh-rule) {
    flex: 1 1 0;
    min-width: 0;
    max-width: 332px;
    padding-left: 16px;
    padding-right: 16px;
}

.he-sh-rule .he-widget-brand {
    color: var(--he-widget-blue);
    font-size: 11px;
}

.he-sh-rule__scene {
    height: 158px;
    position: relative;
    overflow: hidden;
}

.he-sh-rule__hiss {
    position: absolute;
    top: 6px;
    left: 0;
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: center;
    color: var(--he-widget-red);
    font-weight: 900;
    line-height: 1;
    animation: he-sh-approach 8s linear infinite;
}

.he-sh-rule__s,
.he-sh-rule__h {
    display: inline-block;
    font-family: Georgia, serif;
    font-size: 38px;
    animation: he-sh-wiggle 0.6s ease-in-out infinite alternate;
}

.he-sh-rule__h { animation-delay: -0.3s; }
.he-sh-rule__tail { font-size: 12px; margin-left: 4px; }

.he-sh-rule__character {
    position: absolute;
    left: calc(50% - 44px);
    bottom: 0;
    width: 88px;
    height: 90px;
    animation: he-sh-tremble 8s linear infinite;
}

.he-sh-rule__sleep {
    position: absolute;
    left: 58px;
    top: -10px;
    font-size: 18px;
    line-height: 1;
    color: var(--he-widget-blue);
    display: block;
    width: 32px;
    height: 28px;
    animation: he-sh-sleep 8s ease-in-out infinite;
}
.he-sh-rule__sleep > svg { display: block; width: 32px !important; height: 28px !important; margin: 0 !important; }

.he-sh-rule__face {
    position: absolute;
    left: 31px;
    top: 12px;
    width: 26px;
    height: 26px;
    display: block;
    border-radius: 50%;
    background: #ffdbac;
    border: 1px solid #e0b080;
    animation: he-sh-face-color 8s linear infinite;
}

.he-sh-rule__face-sleep,
.he-sh-rule__face-scared { position: absolute; inset: 0; }
.he-sh-rule__face-sleep { animation: he-sh-face-sleep 8s linear infinite; }
.he-sh-rule__face-scared { opacity: 0; animation: he-sh-face-scared 8s linear infinite; }

.he-sh-rule__eye { position: absolute; top: 7px; width: 6px; height: 6px; box-sizing: border-box; }
.he-sh-rule__eye--left { left: 4px; }
.he-sh-rule__eye--right { right: 4px; }
.he-sh-rule__face-sleep .he-sh-rule__eye { height: 4px; border-bottom: 1.5px solid #111; border-radius: 0 0 5px 5px; }
.he-sh-rule__face-scared .he-sh-rule__eye { border: 1.5px solid #111; border-radius: 50%; background: #fff; }
.he-sh-rule__mouth { position: absolute; top: 16px; left: 10px; width: 4px; height: 2px; border-bottom: 1px solid #111; }
.he-sh-rule__face-scared .he-sh-rule__mouth { height: 5px; border: 1px solid #111; border-radius: 50%; background: #111; }

.he-sh-rule__blanket {
    position: absolute;
    left: 13px;
    bottom: 5px;
    width: 62px;
    height: 44px;
    background-color: var(--he-widget-blue);
    background-image: radial-gradient(#fff 15%, transparent 16%), radial-gradient(#fff 15%, transparent 16%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    border: 1px solid var(--he-widget-dark);
    border-top: 3px solid #fff;
    border-radius: 4px;
    animation: he-sh-blanket 8s linear infinite;
}

.he-sh-rule__bed {
    position: absolute;
    bottom: 4px;
    width: 7px;
    height: 72px;
    background: #b58259;
    border: 1px solid #7a4f32;
    border-radius: 3px;
    box-sizing: border-box;
}
.he-sh-rule__bed--left { left: 6px; }
.he-sh-rule__bed--right { right: 6px; }

.he-sh-rule__copy {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 8px;
    border-radius: 10px;
    background: #0d0f12;
    border: 1px solid var(--he-widget-red);
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}
.he-sh-rule__copy strong { color: var(--he-widget-red); }
.he-sh-rule__example { font-size: 15px; font-style: italic; }

.dialog-right-user__message:has(.he-typing-quote) {
    flex: 0 1 auto;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
}

.description--colorContainer .he-typing-quote {
    background: var(--he-widget-blue);
    color: #fff;
    box-shadow: -4px 0 0 var(--color-light-white, #c2d7ff);
    text-align: left;
}

.description--colorContainer .he-typing-quote__text {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: 14px !important;
    font-style: italic;
}

.description--colorContainer .he-typing-quote__line {
    position: relative;
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: inherit !important;
}
.he-typing-quote__full { display: block; }
.he-typing-quote__typed { display: none; }
.he-typing-quote.is-typing .he-typing-quote__full { opacity: 0; }
.he-typing-quote.is-typing .he-typing-quote__typed { display: block; position: absolute; inset: 0; }
.description--colorContainer .he-typing-quote__author { font-size: 11px !important; font-style: normal; }

@keyframes he-widget-mill-spin { to { transform: rotate(360deg); } }
@keyframes he-sh-approach {
    0%, 28% { transform: translateX(110%); opacity: 0; }
    32% { opacity: 1; }
    52%, 88% { transform: translateX(0); opacity: 1; }
    98%, 100% { transform: translateX(-110%); opacity: 0; }
}
@keyframes he-sh-wiggle { from { transform: translateY(1px) rotate(-3deg); } to { transform: translateY(-3px) rotate(3deg); } }
@keyframes he-sh-face-color { 0%, 51%, 95%, 100% { background: #ffdbac; } 52%, 94% { background: #ff4a6b; } }
@keyframes he-sh-face-sleep { 0%, 51%, 95%, 100% { opacity: 1; } 52%, 94% { opacity: 0; } }
@keyframes he-sh-face-scared { 0%, 51%, 95%, 100% { opacity: 0; } 52%, 94% { opacity: 1; } }
@keyframes he-sh-sleep { 0%, 12%, 26%, 95%, 100% { transform: translateY(0); opacity: 0.8; } 20%, 40% { transform: translateY(-5px); opacity: 1; } 52%, 94% { transform: translateY(-12px); opacity: 0; } }
@keyframes he-sh-tremble { 0%, 51%, 95%, 100% { transform: translate(0); } 52%, 64%, 76%, 88% { transform: translate(1px, -1px); } 58%, 70%, 82%, 94% { transform: translate(-1px, 1px); } }
@keyframes he-sh-blanket { 0%, 51%, 95%, 100% { height: 44px; } 58%, 94% { height: 54px; } }

@media screen and (max-width: 544px) {
    .dialog-right-user:has(.he-sh-rule) { flex-direction: column; align-items: flex-end; }
    .dialog-right-user__message:has(.he-sh-rule) { flex: 0 0 auto; width: 100% !important; }
    .dialog-right-user:has(.he-sh-rule) > .cornerRight { display: none; }
    .dialog-right-user:has(.he-sh-rule) > .chat-person-image { width: 40px !important; height: 40px !important; flex: 0 0 40px; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .he-sh-rule *, .he-widget-brand__mill { animation: none !important; }
    .he-sh-rule__hiss { transform: none; opacity: 1; }
    .he-sh-rule__sleep, .he-sh-rule__face-sleep { opacity: 0; }
    .he-sh-rule__face-scared { opacity: 1; }
    .he-typing-quote.is-typing .he-typing-quote__full { opacity: 1; }
    .he-typing-quote.is-typing .he-typing-quote__typed { display: none; }
}