/* How widgets look, in the editor and in OBS. */
.zs-w { position: absolute; overflow: hidden; }
.zs-w-alert { overflow: visible; }
.zs-hint { display: grid; place-items: center; width: 100%; height: 100%; color: rgba(255, 255, 255, .55); font: 600 26px Inter, sans-serif; }

/* alerts */
.zs-alertbox { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.zs-alert { --accent: #22d3ee; --accent2: #a855f7; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: 100%; text-align: center; line-height: 1.2; }
.zs-alert-img { max-width: 100%; max-height: 220px; object-fit: contain; }
.zs-alert-title { font-weight: 800; overflow-wrap: anywhere; }
.zs-alert-msg { font-size: .62em; font-weight: 400; opacity: .92; overflow-wrap: anywhere; }
.zs-a-neon { padding: 28px 44px; border-radius: 26px; background: rgba(7, 8, 20, .88); border: 3px solid var(--accent); box-shadow: 0 0 34px var(--accent), inset 0 0 26px color-mix(in srgb, var(--accent2) 45%, transparent); }
.zs-a-solid { padding: 28px 44px; border-radius: 22px; background: linear-gradient(120deg, var(--accent), var(--accent2)); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.zs-a-minimal { padding: 10px 20px; text-shadow: 0 3px 16px rgba(0, 0, 0, .9), 0 0 3px rgba(0, 0, 0, .9); }
.zs-a-comic { padding: 26px 42px; background: var(--accent); border: 6px solid #000; box-shadow: 12px 12px 0 #000; transform: rotate(-2deg); }
.zs-in-pop { animation: zs-pop .55s cubic-bezier(.2, 1.5, .4, 1) both; }
.zs-in-slide { animation: zs-slide .5s cubic-bezier(.2, .9, .3, 1) both; }
.zs-in-drop { animation: zs-drop .6s cubic-bezier(.3, 1.4, .5, 1) both; }
.zs-in-fade { animation: zs-fade .45s ease both; }
.zs-alert.zs-out { animation: zs-leave .42s ease both; }
@keyframes zs-pop { from { opacity: 0; scale: .4; } }
@keyframes zs-slide { from { opacity: 0; translate: -140px 0; } }
@keyframes zs-drop { from { opacity: 0; translate: 0 -160px; } }
@keyframes zs-fade { from { opacity: 0; } }
@keyframes zs-leave { to { opacity: 0; scale: .9; } }

/* chat */
.zs-chat { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; overflow: hidden; line-height: 1.35; }
.zs-msg { flex: none; overflow-wrap: anywhere; animation: zs-msg .3s ease both; transition: opacity .45s; }
.zs-msg.zs-gone { opacity: 0; }
.zs-chip { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 6px; color: #fff; font-size: .68em; font-weight: 800; vertical-align: .1em; }
.zs-name { margin-right: 8px; font-weight: 800; }
.zs-c-glass .zs-msg { padding: 10px 14px; border-radius: 14px; background: rgba(8, 10, 24, .72); border: 1px solid rgba(255, 255, 255, .12); }
.zs-c-panel { padding: 14px; border-radius: 18px; background: rgba(8, 10, 24, .82); border: 2px solid var(--accent); }
.zs-c-plain .zs-msg { text-shadow: 0 2px 8px rgba(0, 0, 0, .95), 0 0 2px #000; }
@keyframes zs-msg { from { opacity: 0; translate: 0 12px; } }

/* text, image, goal */
.zs-label { width: 100%; height: 100%; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.2; }
.zs-image { display: block; width: 100%; height: 100%; }
.zs-goal { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.zs-goal-title { font-size: 28px; font-weight: 800; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-goal-track { position: relative; flex: 1; min-height: 30px; max-height: 60px; border-radius: 999px; overflow: hidden; background: rgba(8, 10, 24, .78); border: 2px solid rgba(255, 255, 255, .22); }
.zs-goal-bar { height: 100%; transition: width .7s cubic-bezier(.2, .9, .3, 1); }
.zs-goal-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; font-weight: 800; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }

/* more widgets */
.zs-emote { height: 1.35em; vertical-align: -.3em; margin: 0 1px; }
.zs-bg-move { background-size: 300% 300% !important; animation: zs-bgmove 18s ease infinite; }
@keyframes zs-bgmove { 50% { background-position: 100% 50%; } }
.zs-fill { width: 100%; height: 100%; }
.zs-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; line-height: 1.15; }
.zs-panel { padding: 10px 18px; border-radius: 16px; background: rgba(8, 10, 24, .78); border: 2px solid var(--accent, rgba(255, 255, 255, .2)); }
.zs-small { font-size: .5em; font-weight: 600; opacity: .85; }
.zs-big { font-weight: 800; font-variant-numeric: tabular-nums; }
.zs-ticker { display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.zs-ticker span { display: inline-block; padding-left: 100%; animation: zs-tick linear infinite; }
@keyframes zs-tick { to { transform: translateX(-100%); } }
.zs-rotate { transition: opacity .4s; }
.zs-rotate.zs-gone { opacity: 0; }
.zs-events { display: flex; flex-direction: column; gap: 6px; justify-content: flex-start; overflow: hidden; }
.zs-event { padding: 6px 12px; border-radius: 10px; background: rgba(8, 10, 24, .72); border-left: 4px solid var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: zs-msg .3s ease both; }
.zs-poll { display: flex; flex-direction: column; gap: 8px; }
.zs-poll-q { font-weight: 800; }
.zs-poll-row { position: relative; padding: 6px 12px; border-radius: 10px; overflow: hidden; background: rgba(8, 10, 24, .75); }
.zs-poll-bar { position: absolute; inset: 0 auto 0 0; background: var(--accent); opacity: .55; transition: width .5s; }
.zs-poll-row span { position: relative; display: flex; justify-content: space-between; gap: 12px; }
.zs-credits { overflow: hidden; position: relative; }
.zs-credits-roll { position: absolute; left: 0; right: 0; top: 100%; text-align: center; animation: zs-roll linear infinite; }
.zs-credits-roll h3 { margin: 30px 0 8px; font-size: 1.1em; color: var(--accent); }
.zs-credits-roll h2 { margin: 0 0 20px; font-size: 1.6em; }
.zs-credits-roll div { margin-bottom: 4px; }
@keyframes zs-roll { to { top: 0; transform: translateY(-100%); } }
.zs-music { display: flex; align-items: center; gap: 14px; transition: opacity .4s; }
.zs-music.zs-gone { opacity: 0; }
.zs-music b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-music i { font-style: normal; font-size: 1.7em; }
.zs-music div { min-width: 0; }
.zs-music small { display: block; font-size: .7em; opacity: .8; }
.zs-shape { width: 100%; height: 100%; }
.zs-frame { position: relative; width: 100%; height: 100%; box-sizing: border-box; }
.zs-frame-label { position: absolute; left: 50%; bottom: 0; translate: -50% 50%; padding: 4px 18px; border-radius: 999px; font-weight: 800; white-space: nowrap; }
.zs-w-frame { overflow: visible; }
.zs-corner { position: absolute; width: 22%; height: 22%; border-style: solid; border-width: 0; }
.zs-float { position: absolute; bottom: -60px; height: 56px; font-size: 44px; line-height: 56px; animation: zs-float linear forwards; }
@keyframes zs-float { to { transform: translateY(var(--rise)); opacity: 0; } }
.zs-canvas { display: block; width: 100%; height: 100%; }