I'm starting to think this isn't possible but i have seen multiple examples of it working without a scrollable element. I would like to have the tool tip element show beyond the bounds of a scrollable element.
This is my current layout for a chat application i am working on. If you hover over the emote img the tooltip will appear and you can see that when the emote is near the end of line that meets the right side border of its parents it will be hidden. It would be great to find a solution using only CSS.
If not I'm thinking i have to put the tool-tip outside of the element that holds messages and somehow make the tool-tip reusable for each emote. Does anyone have a good idea how to handle this better?
On a side note I'm also trying to fix the way i display imgs inside the tooltip. Currently it scales emotes to a minimum height of 128px. If a wide emote is inserted it will center the image horizontally and clip the left and right side. This doesn't look terrible but I'm having trouble figuring out how to get the tooltip to have a dynamic width based on the img.
Any help is appreciated thanks!
:root {
--font-size: 14px;
--background-color: #18181b;
--background-transparent: #171717c4;
--accent-color: #0e0e10;
--accent-color-transparent: #0e0e1033;
--accent-color-alt: #18181b;
--border-color: #2a2a2e;
--text-color: #efeff1;
--text-color-alt: #adadb8;
--text-color-dark: #000000;
--primary-color: #9147ff;
--primary-color-hover: #772ce8;
--primary-color-transparent: #9147ff6b;
--first-msg-background: #c832c81A;
--first-msg-stroke: #2e0b2e;
--first-msg-border: #c832c8;
--success-color: #00f593;
--error-color: #eb0400;
--warning-color: #ffd37a;
--info-color: #1f69ff;
--px1: 0.0625rem;
--px2: 0.125rem;
--px3: 0.1875rem;
--px4: 0.25rem;
--px5: 0.3125rem;
--px6: 0.375rem;
--px7: 0.4375rem;
--px8: 0.5rem;
--px9: 0.5625rem;
--px12: 0.75rem;
--px14: 0.875rem;
--px16: 1rem;
--px20: 1.25rem;
--px24: 1.5rem;
--px28: 1.75rem;
--px32: 2rem;
--px36: 2.25rem;
--px40: 2.5rem;
--px48: 3rem;
--px56: 3.5rem;
--px64: 4rem;
--px72: 4.5rem;
--px80: 5rem;
--px96: 6rem;
--px100: 6.25rem;
--px112: 7rem;
--px128: 8rem;
--px144: 9rem;
--px160: 10rem;
--px192: 12rem;
--px256: 16rem;
--px290: 18.125rem;
--px304: 19rem;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-size: var(--font-size);
line-height: var(--px16);
color: var(--text-color);
}
body {
display: flex;
flex-direction: column;
font-family: "Inter", "Roobert", Helvetica, Arial, sans-serif;
background-color: var(--background-color);
color: var(--text-color);
overflow-x: hidden;
}
textarea,
input {
font-family: inherit;
border: var(--px3) solid var(--border-color);
background-color: var(--accent-color);
border-radius: var(--px6);
margin-bottom: var(--px12);
padding: var(--px6);
color: var(--text-color);
resize: none;
line-height: var(--px24);
}
textarea:focus,
input:focus {
outline: var(--primary-color) solid var(--px3);
border: var(--primary-color) solid var(--px3);
}
button {
font-family: inherit;
font-weight: 700;
border-radius: var(--px6);
padding: var(--px6) var(--px12);
background-color: var(--primary-color);
border: none;
color: var(--text-color);
margin-top: var(--px6);
cursor: pointer;
transition: all 0.2s ease-in-out;
}
button:hover {
background-color: var(--primary-color-hover);
}
#layout {
display: flex;
flex-direction: column;
height: 100%;
}
.panels {
display: grid;
grid-template-columns: auto 40dvw;
height: 100%;
}
.panel {
background-color: var(--accent-color);
padding: var(--px16);
}
.left-panel {
display: flex;
flex-direction: column;
background: var(--accent-color);
height: 100%;
overflow: hidden;
}
.right-panel {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
#chat::before {
content: "";
flex-grow: 1;
}
#chat {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
position: relative;
}
#send-chat {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
background: var(--accent-color);
padding: var(--px9);
flex: 0 0 var(--px96);
}
#chat-input {
height: var(--px40);
width: calc(100% - var(--px100));
padding: 0 var(--px48);
margin: 0;
}
#chat-button {
margin: 0;
}
#chat-button {
margin: 0;
}
#pause-chat {
display: none;
margin: 0;
font-size: var(--px14);
font-weight: normal;
color: var(--text-color);
position: absolute;
bottom: var(--px112);
left: 50%;
transform: translateX(-50%);
cursor: pointer;
background: var(--accent-color-transparent);
backdrop-filter: blur(var(--px6));
border: var(--px3) solid var(--border-color);
border-radius: var(--px6);
padding: var(--px6);
}
#messages {
width: 100%;
line-height: var(--px20);
scrollbar-width: none;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
padding-top: var(--px192);
}
.message {
display: block;
position: relative;
overflow-wrap: anywhere;
}
.message::selection,
.message *::selection {
background-color: var(--primary-color-transparent) !important;
}
.message-background {
display: block;
position: relative;
padding: var(--px4) var(--px9);
}
.twitch-user {
font-weight: 700;
}
.twitch-message {
-webkit-text-stroke: var(--px3) var(--accent-color);
paint-order: stroke fill;
}
.message-tooltip {
display: flex;
flex-direction: column;
visibility: hidden;
opacity: 0;
position: absolute;
bottom: 112%;
width: var(--px128);
min-height: var(--px128);
line-height: var(--px12);
padding: var(--px12);
text-align: center;
font-size: var(--px12);
background-color: var(--accent-color-transparent);
border-radius: var(--px6);
box-shadow: 0 0 var(--px12) 0 rgba(255, 255, 255, 0.3);
backdrop-filter: blur(var(--px6));
transition: opacity 0.3s ease-in-out;
overflow: hidden;
word-wrap: break-word;
}
.message-tooltip-shift {
left: 50%;
transform: translateX(-50%);
}
.message-tooltip img {
display: block;
width: auto;
height: var(--px128);
max-width: none;
object-fit: cover;
}
.emote {
display: inline-grid;
margin: calc(var(--px4) * -1);
margin-left: 0 !important;
margin-right: 0 !important;
vertical-align: middle;
cursor: pointer;
/* position: relative; */
}
.emote:hover .message-tooltip {
visibility: visible;
opacity: 1;
}
.emote:hover {
transform: translateY(-6%);
}
.emote img {
border: none;
vertical-align: top;
max-width: 100%;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="layout">
<div class="panels">
<div class="left-panel">
<div id="chat">
<div id="messages">
<div id="e3483a7d-42f5-44d8-a1c3-30d0d97d7870" class="message">
<span class="message-background">
<span class="twitch-message">
<span class="twitch-user" style="color: #FF8C69;">NiceShyGuy</span><span class="message-text">: </span>
Lorem ipsum dolor sit amet, consect
<span class="emote">
<img src="https://cdn.betterttv.net/emote/567b00c61ddbe1786688a633/1x" class="bttv-emote">
<div class="message-tooltip message-tooltip-shift"><img src="https://cdn.betterttv.net/emote/567b00c61ddbe1786688a633/3x" alt="LuL">LuL</div>
</span>
</span>
</span>
</div>
<div id="e3483a7d-42f5-44d8-a1c3-30d0d97d7870" class="message">
<span class="message-background">
<span class="twitch-message">
<span class="twitch-user" style="color: #FF8C69;">NiceShyGuy</span><span class="message-text">: </span>
Lorem ipsum dolor sit amet, consect
<span class="emote">
<img src="https://cdn.7tv.app/emote/636c96c3cb5f97f7fb2f1ffa/1x.avif" class="seventv-emote">
<div class="message-tooltip message-tooltip-shift"><img src="https://cdn.7tv.app/emote/636c96c3cb5f97f7fb2f1ffa/4x.avif" alt="BocchiPossessed">BocchiPossessed</div>
</span>
</span>
</span>
</div>
</div>
<div id="send-chat">
<input id="chat-input" type="text" placeholder="Send a message">
<button id="chat-button">Chat</button>
</div>
<button id="pause-chat">⏸️ <span id="pause-text">Chat Paused</span></button>
</div>
</div>
<div class="right-panel"></div>
</div>
</div>
</body>
</html>I ended up giving in and going with a js solution. I placed a tool tip element outside of the scrollable element and use js to rip/fix emote URLs and add names to the tooltip and reposition it above the emote on event mouseover.
// add event listener to emote elements on hover
const emoteElements = document.querySelectorAll('.emote');
const chatTooltip = document.querySelector('.chat-tooltip');
emoteElements.forEach((emoteElement) => {
emoteElement.addEventListener('mouseover', (e) => {
chatTooltip.innerHTML = '';
let service;
let chatTooltipHtml = '';
let emoteNamesHtml = '';
const imgExists = emoteElement.querySelector('img')
chatTooltipHtml += '<div class="emote">';
if (imgExists) {
let imgs = emoteElement.querySelectorAll('img');
let url = '';
imgs.forEach((img) => {
url = img.getAttribute('src');
let emoteName = img.getAttribute('alt');
if (url.includes('static-cdn.jtvnw.net')) {
url = url.replace('/1.0', '/4.0');
service = '<svg style="width: var(--px12); height: var(--px12);" viewBox="0 0 80 80"><path d="M38.7818 25.362H43.6208V39.914H38.7818M52.0805 25.362H56.9195V39.914H52.0805M23.0805 12L11 24.138V67.862H25.4831V80L37.5974 67.862H47.2415L69 46V12M64.161 43.586L54.5169 53.276H44.839L36.3792 61.776V53.276H25.4831V16.862H64.161V43.586Z"></path></svg>';
}
if (url.includes('cdn.betterttv.net')) {
url = url.replace('/1x', '/3x');
service = '<svg style="width: var(--px12); height: var(--px12);" viewBox="-25 -25 350 350"><path d="M150 1.74C68.409 1.74 1.74 68.41 1.74 150S68.41 298.26 150 298.26h148.26V150.17h-.004c0-.057.004-.113.004-.17C298.26 68.409 231.59 1.74 150 1.74zm0 49c55.11 0 99.26 44.15 99.26 99.26 0 55.11-44.15 99.26-99.26 99.26-55.11 0-99.26-44.15-99.26-99.26 0-55.11 44.15-99.26 99.26-99.26z"></path><path d="M161.388 70.076c-10.662 0-19.42 7.866-19.42 17.67 0 9.803 8.758 17.67 19.42 17.67 10.662 0 19.42-7.867 19.42-17.67 0-9.804-8.758-17.67-19.42-17.67zm45.346 24.554-.02.022-.004.002c-5.402 2.771-11.53 6.895-18.224 11.978l-.002.002-.004.002c-25.943 19.766-60.027 54.218-80.344 80.33h-.072l-1.352 1.768c-5.114 6.69-9.267 12.762-12.098 18.006l-.082.082.022.021v.002l.004.002.174.176.052-.053.102.053-.07.072c30.826 30.537 81.213 30.431 111.918-.273 30.783-30.784 30.8-81.352.04-112.152l-.005-.004zM87.837 142.216c-9.803 0-17.67 8.758-17.67 19.42 0 10.662 7.867 19.42 17.67 19.42 9.804 0 17.67-8.758 17.67-19.42 0-10.662-7.866-19.42-17.67-19.42z"></path></svg>';
}
if (url.includes('cdn.frankerfacez.com')) {
url = url.replace('/1', '/4');
service = '<svg style="width: var(--px12); height: var(--px12);" viewBox="0 0 80 80"><path d="M40.0716 67.9018C33.7085 68.5686 28.834 65.7635 24.3565 61.822C23.9566 61.4691 23.1627 61.4811 22.5614 61.514C22.1644 61.5349 21.7996 61.9266 21.3968 62.1001C19.6805 62.8388 18.8194 62.5038 17.5526 61.2209C16.2917 59.9439 14.8177 58.8853 13.4283 57.7399C10.4423 55.2816 7.3629 52.946 5.381 49.4381C4.42069 47.7395 3.76103 46.0379 4.08211 44.0671C4.50826 41.4354 4.49075 38.5854 5.54445 36.2408C6.84043 33.355 8.86903 30.7442 10.8947 28.289C13.1101 25.6035 15.5503 26.1537 17.2432 29.2101C18.8078 32.0361 18.9012 34.916 18.2357 37.9843C17.9321 39.3779 17.8474 40.8463 17.8679 42.2788C17.8737 42.7722 18.4225 43.5497 18.8603 43.6664C19.2923 43.78 20.1592 43.3673 20.3781 42.9397C22.074 39.6501 23.8866 36.3934 25.1855 32.9363C25.9064 31.0164 25.74 28.7376 25.921 26.6143C26.0611 24.9844 25.9123 23.3037 26.2538 21.7277C27.1878 17.4094 30.0454 14.8554 34.0179 13.4648C34.9841 13.1269 35.9269 12.7142 36.9076 12.4361C40.1446 11.518 43.2882 12.0473 45.8977 14.045C48.3787 15.944 49.771 18.7641 50.7167 21.8533C51.4202 24.1441 52.4213 26.387 53.6239 28.4505C54.4821 29.9248 55.1008 31.3752 55.0921 33.041C55.0775 35.8012 55.7284 38.3611 57.0448 40.7386C57.2842 41.1723 57.8008 41.4474 58.189 41.7973C58.3992 41.2829 58.8195 40.7536 58.7844 40.2601C58.6152 37.8827 58.2532 35.5201 58.0927 33.1456C57.9234 30.6665 61.2626 26.5365 63.6122 25.9534C65.8335 25.4031 66.572 27.2812 67.6986 28.4236C71.5165 32.2963 73.2328 37.3773 74.9141 42.4044C75.6117 44.4918 75.9006 46.7825 75.997 48.9985C76.0758 50.8198 74.6076 52.01 73.332 53.0806C70.095 55.793 66.8084 58.4217 62.9964 60.2938C61.7062 60.9278 60.6496 62.0433 59.4091 62.8118C58.8282 63.1707 57.8854 63.5954 57.4243 63.3561C55.0541 62.115 53.2561 63.5714 51.4669 64.5972C47.8504 66.6756 44.1872 68.3982 40.0775 67.9018H40.0716Z"></path></svg>';
}
if (url.includes('cdn.7tv.app')) {
url = url.replace('/1x', '/4x');
service = '<svg style="width: var(--px12); height: var(--px12);" viewBox="0 0 33 23.551"><path d="M2.383,0,0,4.127,1.473,6.676H11.7L3.426,21,4.9,23.551H9.66Q14.532,15.113,19.4,6.676L15.549,0ZM18.492,0l3.856,6.676h2.945l2.381-4.125L26.2,0Zm2.383,9.225L17.021,15.9l4.417,7.649H26.2L33,11.775l-1.473-2.55H26.764l-2.944,5.1Z"></path></svg>';
}
chatTooltipHtml += `<img src="${url}" alt="${emoteName}">`;
emoteNamesHtml += `${service+" " || ""}${emoteName}<br>`;
})
} else {
// get scalled emoji from element data-emoji-name
const emoji = emoteElement.querySelector('.scaled-emoji').getAttribute('data-emoji-name');
chatTooltipHtml += `<span class="scaled-emoji" style="font-size: var(--px96);">${emoji}</span>`;
emoteNamesHtml += `${emojiDictionary[emoji] || "Unknown"}<br>`;
}
chatTooltipHtml += `</div>`;
chatTooltipHtml += `<span class="chat-tooltip-emote-names">${emoteNamesHtml}</span>`;
chatTooltip.innerHTML = chatTooltipHtml;
// Position chatTooltip over the top center of the emoteElement
const bodyRect = document.body.getBoundingClientRect();
// Wait for chatTooltip imgs to load before getting chatTooltipRect
const chatTooltipImgs = chatTooltip.querySelectorAll('img');
const imagePromises = Array.from(chatTooltipImgs).map(img => new Promise(resolve => {
if (img.complete) {
resolve(); // Image already loaded
} else {
img.addEventListener('load', resolve);
img.addEventListener('error', resolve); // Resolve on error to avoid hanging
}
}));
Promise.all(imagePromises).then(() => {
const chatTooltipRect = chatTooltip.getBoundingClientRect();
const emoteRect = imgExists
? imgExists.getBoundingClientRect()
: emoteElement.querySelector('.scaled-emoji').getBoundingClientRect();
const leftPosition = emoteRect.left + (emoteRect.width / 2) - (chatTooltipRect.width / 2);
const topPosition = emoteRect.top - chatTooltipRect.height - 9;
chatTooltip.style.left = `${Math.max(leftPosition - bodyRect.left, 0)}px`;
chatTooltip.style.top = `${Math.max(topPosition - bodyRect.top, 0)}px`;
chatTooltip.classList.add('chat-tooltip-hover');
togglePauseChat(true);
});
});
emoteElement.addEventListener('mouseout', () => {
chatTooltip.classList.remove('chat-tooltip-hover');
});
});:root {
--font-size: 14px;
--background-color: #18181b;
--background-transparent: #171717c4;
--accent-color: #0e0e10;
--accent-color-transparent: #0e0e1033;
--accent-color-alt: #18181b;
--border-color: #2a2a2e;
--text-color: #efeff1;
--text-color-alt: #adadb8;
--text-color-dark: #000000;
--primary-color: #9147ff;
--primary-color-hover: #772ce8;
--primary-color-transparent: #9147ff6b;
--first-msg-background: #c832c81A;
--first-msg-stroke: #2e0b2e;
--first-msg-border: #c832c8;
--success-color: #00f593;
--error-color: #eb0400;
--warning-color: #ffd37a;
--info-color: #1f69ff;
--px1: 0.0625rem;
--px2: 0.125rem;
--px3: 0.1875rem;
--px4: 0.25rem;
--px5: 0.3125rem;
--px6: 0.375rem;
--px7: 0.4375rem;
--px8: 0.5rem;
--px9: 0.5625rem;
--px12: 0.75rem;
--px14: 0.875rem;
--px16: 1rem;
--px20: 1.25rem;
--px24: 1.5rem;
--px28: 1.75rem;
--px32: 2rem;
--px36: 2.25rem;
--px40: 2.5rem;
--px48: 3rem;
--px56: 3.5rem;
--px64: 4rem;
--px72: 4.5rem;
--px80: 5rem;
--px96: 6rem;
--px100: 6.25rem;
--px112: 7rem;
--px128: 8rem;
--px144: 9rem;
--px160: 10rem;
--px192: 12rem;
--px256: 16rem;
--px290: 18.125rem;
--px304: 19rem;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-size: var(--font-size);
line-height: var(--px16);
color: var(--text-color);
}
body {
display: flex;
flex-direction: column;
font-family: "Inter", "Roobert", Helvetica, Arial, sans-serif;
background-color: var(--background-color);
color: var(--text-color);
overflow-x: hidden;
}
textarea,
input {
font-family: inherit;
border: var(--px3) solid var(--border-color);
background-color: var(--accent-color);
border-radius: var(--px6);
margin-bottom: var(--px12);
padding: var(--px6);
color: var(--text-color);
resize: none;
line-height: var(--px24);
}
textarea:focus,
input:focus {
outline: var(--primary-color) solid var(--px3);
border: var(--primary-color) solid var(--px3);
}
button {
font-family: inherit;
font-weight: 700;
border-radius: var(--px6);
padding: var(--px6) var(--px12);
background-color: var(--primary-color);
border: none;
color: var(--text-color);
margin-top: var(--px6);
cursor: pointer;
transition: all 0.2s ease-in-out;
}
button:hover {
background-color: var(--primary-color-hover);
}
#layout {
display: flex;
flex-direction: column;
height: 100%;
}
.panels {
display: grid;
grid-template-columns: auto 40dvw;
height: 100%;
}
.panel {
background-color: var(--accent-color);
padding: var(--px16);
}
.left-panel {
display: flex;
flex-direction: column;
background: var(--accent-color);
height: 100%;
overflow: hidden;
}
.right-panel {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
#chat::before {
content: "";
flex-grow: 1;
}
#chat {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
position: relative;
}
#send-chat {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
background: var(--accent-color);
padding: var(--px9);
flex: 0 0 var(--px96);
}
#chat-input {
height: var(--px40);
width: calc(100% - var(--px100));
padding: 0 var(--px48);
margin: 0;
}
#chat-button {
margin: 0;
}
#chat-button {
margin: 0;
}
#pause-chat {
display: none;
margin: 0;
font-size: var(--px14);
font-weight: normal;
color: var(--text-color);
position: absolute;
bottom: var(--px112);
left: 50%;
transform: translateX(-50%);
cursor: pointer;
background: var(--accent-color-transparent);
backdrop-filter: blur(var(--px6));
border: var(--px3) solid var(--border-color);
border-radius: var(--px6);
padding: var(--px6);
}
#messages {
width: 100%;
line-height: var(--px20);
scrollbar-width: none;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
padding-top: var(--px192);
}
.message {
display: block;
position: relative;
overflow-wrap: anywhere;
}
.message::selection,
.message *::selection {
background-color: var(--primary-color-transparent) !important;
}
.message-background {
display: block;
position: relative;
padding: var(--px4) var(--px9);
}
.twitch-user {
font-weight: 700;
}
.twitch-message {
-webkit-text-stroke: var(--px3) var(--accent-color);
paint-order: stroke fill;
}
.chat-tooltip {
display: grid;
align-items: end;
justify-items: center;
visibility: hidden;
position: absolute;
min-height: var(--px128);
min-width: var(--px128);
opacity: 0;
line-height: var(--px12);
padding: var(--px12);
text-align: center;
font-size: var(--px12);
background-color: var(--accent-color-transparent);
border-radius: var(--px6);
box-shadow: 0 0 var(--px12) 0 rgba(255, 255, 255, 0.3);
backdrop-filter: blur(var(--px6));
transition: opacity 0.3s ease-in-out;
word-wrap: break-word;
z-index: 1;
}
.chat-tooltip-hover {
visibility: visible;
opacity: 1;
}
.chat-tooltip .emote, .chat-tooltip-emotes, .chat-tooltip-service {
grid-column: 1;
grid-row: 1;
}
.chat-tooltip .emote img {
grid-column: 1;
grid-row: 1;
}
.chat-tooltip-emote-names {
-webkit-text-stroke: var(--px3) var(--accent-color);
paint-order: stroke fill;
max-width: var(--px128);
}
.chat-tooltip-emote-names svg {
vertical-align: text-top;
}
.chat-tooltip-emote-names svg path {
vector-effect: non-scaling-stroke;
fill: var(--text-color);
stroke: var(--accent-color);
stroke-width: var(--px3);
}
.emote {
display: inline-grid;
margin: calc(var(--px4) * -1);
margin-left: 0 !important;
margin-right: 0 !important;
vertical-align: middle;
cursor: pointer;
}
.emote img {
border: none;
vertical-align: top;
max-width: 100%;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="layout">
<div class="chat-tooltip"></div>
<div class="panels">
<div class="left-panel">
<div id="chat">
<div id="messages">
<div id="e3483a7d-42f5-44d8-a1c3-30d0d97d7870" class="message">
<span class="message-background">
<span class="twitch-message">
<span class="twitch-user" style="color: #FF8C69;">NiceShyGuy</span><span class="message-text">: </span>
Lorem ipsum dolor sit amet, consect
<span class="emote">
<img src="https://cdn.betterttv.net/emote/567b00c61ddbe1786688a633/1x" class="bttv-emote" alt="LuL">
</span>
</span>
</span>
</div>
<div id="e3483a7d-42f5-44d8-a1c3-30d0d97d7870" class="message">
<span class="message-background">
<span class="twitch-message">
<span class="twitch-user" style="color: #FF8C69;">NiceShyGuy</span><span class="message-text">: </span>
Lorem ipsum dolor sit amet, consect
<span class="emote">
<img src="https://cdn.7tv.app/emote/636c96c3cb5f97f7fb2f1ffa/1x.avif" class="seventv-emote" alt="BochiPossess">
</span>
</span>
</span>
</div>
</div>
<div id="send-chat">
<input id="chat-input" type="text" placeholder="Send a message">
<button id="chat-button">Chat</button>
</div>
<button id="pause-chat">⏸️ <span id="pause-text">Chat Paused</span></button>
</div>
</div>
<div class="right-panel"></div>
</div>
</div>
</body>
</html>