/* Define the overlay shell and its fixed or scrollable positioning mode */
.utyap-shell{--utyap-width:220px;--utyap-button-size:34px;--utyap-icon-size:18px;position:absolute;top:20px;right:10px;left:auto;z-index:9998;display:flex;flex-direction:column;width:var(--utyap-width);max-width:calc(100vw - 20px);color:#dddddd;font-family:inherit;visibility:hidden;opacity:0;transition:opacity .2s ease}
.utyap-shell.is-fixed{position:fixed}
.utyap-shell.is-ready{visibility:visible;opacity:1}
.utyap-shell.is-preload{pointer-events:none}

/* Animate the player panel between collapsed and expanded states */
.utyap-media-shell{overflow:hidden;max-height:0;opacity:0;transform:translateY(-12px);transition:max-height .34s cubic-bezier(.22,1,.36,1),opacity .22s ease,transform .34s cubic-bezier(.22,1,.36,1)}
.utyap-shell.is-expanded .utyap-media-shell{max-height:240px;opacity:1;transform:translateY(0)}

/* Keep the YouTube viewport visible only when the panel is expanded */
.utyap-embed-panel{width:100%;min-width:200px;min-height:200px;height:220px;overflow:hidden;border-radius:14px 14px 0 0;background:#000000;box-shadow:0 16px 30px rgba(0,0,0,.32)}
.utyap-player-frame,.utyap-player-frame iframe{width:100%;height:100%;border:0;display:block}
.utyap-access-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;height:100%;padding:20px;background:#111111;text-align:center}
.utyap-access-gate__text{margin:0;color:rgba(221,221,221,.76);font-size:11px;font-weight:400;font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;letter-spacing:0;line-height:1.6}
.utyap-access-gate__button.button,.utyap-access-gate__button.wp-element-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:1rem;text-decoration:none}
.utyap-access-gate__button svg{display:block;width:var(--utyap-access-cta-icon-size,18px);height:var(--utyap-access-cta-icon-size,18px)}

/* Style the compact command bar with the requested palette */
.utyap-control-bar{display:flex;flex-direction:column;gap:12px;padding:12px;background:#121212;box-shadow:0 18px 30px rgba(0,0,0,.3);transition:border-radius .2s ease}
.utyap-shell.is-collapsed .utyap-control-bar{border-radius:14px}
.utyap-shell.is-expanded .utyap-control-bar{border-radius:0 0 14px 14px}
.utyap-status-group{display:flex;flex-direction:column;gap:4px;min-width:0}
.utyap-track-label,.utyap-chapter-label{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.utyap-track-label{font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.utyap-track-marquee{display:inline-flex;align-items:center;min-width:max-content;transform:translateX(0);will-change:transform;font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;letter-spacing:0}
.utyap-track-segment{display:inline-flex;align-items:center;min-width:max-content}
.utyap-track-label__text{display:inline-block;min-width:max-content}
.utyap-track-gap{display:inline-block;white-space:pre;min-width:max-content}
.utyap-track-marquee.is-static .utyap-track-gap,.utyap-track-marquee.is-static .utyap-track-label__text.is-clone{display:none}
.utyap-meta-row{display:grid;grid-template-columns:minmax(0,var(--utyap-chapter-column-width,65%)) minmax(0,var(--utyap-referral-column-width,35%));align-items:center;gap:10px}
.utyap-meta-row.is-no-referral{grid-template-columns:minmax(0,1fr)}
.utyap-chapter-label{font-size:11px;color:rgba(221,221,221,.76);min-width:0;-webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%)}
.utyap-chapter-marquee{display:inline-flex;align-items:center;min-width:max-content;transform:translateX(0);will-change:transform;font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;letter-spacing:0}
.utyap-chapter-segment{display:inline-flex;align-items:center;min-width:max-content}
.utyap-chapter-label__text{display:inline-block;min-width:max-content}
.utyap-chapter-gap{display:inline-block;white-space:pre;min-width:max-content}
.utyap-chapter-marquee.is-static .utyap-chapter-gap,.utyap-chapter-marquee.is-static .utyap-chapter-label__text.is-clone{display:none}
.utyap-track-marquee.is-continuous,.utyap-chapter-marquee.is-continuous{animation-name:utyap-marquee-scroll;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:var(--utyap-marquee-duration, 18s)}
.utyap-referral-link{justify-self:end;display:inline;align-self:center;color:rgba(221,221,221,.76);font-size:11px;font-weight:400;font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;letter-spacing:0;text-decoration:none;text-transform:none;white-space:nowrap;transition:text-shadow .14s ease,color .14s ease}
.utyap-referral-link:hover,.utyap-referral-link:focus-visible{color:#dddddd;text-shadow:0 0 12px rgba(221,221,221,.3);outline:none}
.utyap-referral-link[hidden]{display:none !important}
.utyap-control-group{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}

@keyframes utyap-marquee-scroll{
	from{transform:translateX(0)}
	to{transform:translateX(calc(-1 * var(--utyap-marquee-distance, 20ch)))}
}

/* Make the icon buttons compact, consistent, and accessible */
.utyap-control-button{display:inline-flex;align-items:center;justify-content:center;width:100%;height:var(--utyap-button-size);padding:0;border:1px solid rgba(221,221,221,.18);border-radius:10px;background:transparent;color:#dddddd;text-decoration:none;cursor:pointer;transition:transform .14s ease,background-color .14s ease,border-color .14s ease,color .14s ease}
.utyap-control-button:hover,.utyap-control-button:focus-visible{background:rgba(221,221,221,.1);border-color:rgba(221,221,221,.34);outline:none;transform:translateY(-1px)}
.utyap-control-button:active{transform:translateY(1px) scale(.98)}
.utyap-control-button[disabled]{opacity:.42;cursor:not-allowed;transform:none}
.utyap-control-button.is-primary{background:#1f1f1f}
.utyap-control-button svg{display:block;width:var(--utyap-icon-size,18px);height:var(--utyap-icon-size,18px)}

/* Respect the mobile-disable option if the runtime leaves the shell mounted */
@media (max-width:767px){.utyap-shell[data-utyap-mobile-disabled="1"]{display:none !important}}
