/* Global message (broadcast-toast.jsx): the sender's picture on the left, their
   name, role badge and title, then the message, in the colour picked (--bt). */
.bt{--bt:#f59e0b;z-index:2000;color:#f4f4f5;font-family:var(--font-ui,system-ui,-apple-system,sans-serif);letter-spacing:normal}
.bt,.bt *:not(.title-tag):not(.title-tag *){text-transform:none!important}
.bt-panel{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--bt) 40%,#2a2b31);background:radial-gradient(130% 150% at 0 0,color-mix(in srgb,var(--bt) 17%,transparent),transparent 55%),linear-gradient(180deg,#17181d,#0f1014);box-shadow:0 24px 70px rgb(0 0 0/.55),inset 0 1px 0 rgb(255 255 255/.05),0 0 50px color-mix(in srgb,var(--bt) 15%,transparent)}
.bt-timer{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--bt),color-mix(in srgb,var(--bt) 55%,#fff));transform-origin:left;animation:bt-timer linear forwards;pointer-events:none}
.bt-close{position:absolute;top:10px;right:10px;z-index:1;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:9px;background:transparent;color:#a1a1aa;cursor:pointer}
.bt-close:hover{background:#ffffff14;color:#fff}
.bt-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.bt-icon{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bt-kicker{display:flex;align-items:center;gap:7px;margin:0 0 12px;padding-right:30px;color:var(--bt);font-size:11.5px;font-weight:800;line-height:1.2;letter-spacing:.12em}
.bt-row{display:flex;align-items:flex-start;gap:14px}
.bt-avatar{flex:none;display:block;width:52px;height:52px;padding:2px;border-radius:50%;background:conic-gradient(from 210deg,var(--bt),color-mix(in srgb,var(--bt) 35%,#fff),var(--bt));box-shadow:0 0 22px color-mix(in srgb,var(--bt) 40%,transparent)}
.bt-avatar img{display:block;width:100%;height:100%;border:2px solid #101116;border-radius:50%;background:#1c1d22;object-fit:cover}
.bt-main{display:grid;flex:1;gap:5px;min-width:0}
.bt-who{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;line-height:1.2}
.bt-name{overflow:hidden;color:#fff;font-size:15px;font-weight:700;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.bt-name:hover{text-decoration:underline}
.bt-who .role-badge{margin-left:0}
.bt-who .title-tag{font-size:9.5px}
.bt-body{max-height:40vh;overflow:auto;color:#ececf1;font-size:16px;font-weight:500;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.bt-body .broadcast-poll{white-space:normal}
.bt-extra .notice-reactions{margin-top:6px}

/* Card */
.bt-card{position:fixed;top:16px;left:50%;width:min(540px,calc(100vw - 20px));transform:translateX(-50%);animation:bt-drop .45s cubic-bezier(.18,.89,.32,1.15) both}
.bt-card .bt-panel{padding:14px 16px 18px;border-radius:18px}

/* Banner */
.bt-banner{position:fixed;top:0;left:0;right:0;animation:bt-slide .4s cubic-bezier(.2,.9,.3,1.1) both}
.bt-banner .bt-panel{padding:12px 16px 15px;border-width:0 0 2px;border-color:var(--bt);border-radius:0;background:linear-gradient(90deg,color-mix(in srgb,var(--bt) 26%,#0d0e12),color-mix(in srgb,var(--bt) 9%,#0d0e12) 55%,#0d0e12)}
.bt-banner .bt-kicker,.bt-banner .bt-row{max-width:1000px;margin-left:auto;margin-right:auto}
.bt-banner .bt-kicker{margin-bottom:8px}
.bt-banner .bt-avatar{width:44px;height:44px}
.bt-banner .bt-body{font-size:17px;font-weight:600}

/* Full screen (the Roblox-style admin message) */
.bt-takeover{position:fixed;inset:0;z-index:2147482000;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--bt) 16%,rgb(4 4 8/.7)),rgb(4 4 8/.84));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:bt-fade .3s ease-out both}
.bt-takeover .bt-panel{width:min(780px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:24px 30px 28px;border-radius:24px;animation:bt-pop .5s cubic-bezier(.18,.89,.32,1.2) both}
.bt-takeover .bt-kicker{margin-bottom:18px;font-size:13px}
.bt-takeover .bt-kicker .bt-icon{width:18px;height:18px}
.bt-takeover .bt-row{align-items:center;gap:22px}
.bt-takeover .bt-avatar{width:100px;height:100px;padding:3px;box-shadow:0 0 40px color-mix(in srgb,var(--bt) 50%,transparent)}
.bt-takeover .bt-avatar img{border-width:3px}
.bt-takeover .bt-main{gap:8px}
.bt-takeover .bt-name{font-size:20px}
.bt-takeover .bt-who .title-tag{font-size:10.5px}
.bt-takeover .bt-body{max-height:55dvh;color:#fff;font-size:clamp(22px,3.6vw,34px);font-weight:700;line-height:1.25;text-shadow:0 2px 24px color-mix(in srgb,var(--bt) 35%,transparent)}
.bt-takeover .bt-body .broadcast-poll{max-width:420px;margin-top:14px;font-size:15px;font-weight:500;text-shadow:none}

@keyframes bt-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes bt-drop{from{opacity:0;transform:translate(-50%,-24px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes bt-slide{from{transform:translateY(-100%)}to{transform:none}}
@keyframes bt-fade{from{opacity:0}}
@keyframes bt-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .bt-card{top:10px}
  .bt-card .bt-panel{padding:12px 12px 16px}
  .bt-avatar{width:44px;height:44px}
  .bt-banner .bt-avatar{width:38px;height:38px}
  .bt-banner .bt-body{font-size:15.5px}
  .bt-takeover .bt-panel{padding:20px 16px 22px}
  .bt-takeover .bt-row{gap:14px}
  .bt-takeover .bt-avatar{width:64px;height:64px}
  .bt-takeover .bt-name{font-size:17px}
  .bt-takeover .bt-body{font-size:clamp(19px,5.6vw,26px)}
}
@media (prefers-reduced-motion:reduce){.bt-card,.bt-banner,.bt-takeover,.bt-takeover .bt-panel{animation:none}}

/* Preview inside the admin page: drawn in its box, not over the site. */
.bt.is-preview{position:absolute;z-index:1}
.bt-card.is-preview{top:14px;width:calc(100% - 28px)}
.bt-takeover.is-preview{padding:14px;-webkit-backdrop-filter:none;backdrop-filter:none}
.bt-takeover.is-preview .bt-panel{max-height:100%}
.bt.is-preview .bt-timer{animation-iteration-count:infinite}