/* ── Auto-hosting banner: flowing border light ── */
.autohost-banner{
  display:flex;align-items:center;gap:10px;padding:8px 16px;
  cursor:pointer;font-size:12px;position:relative;
  background:var(--md-surface,#fff);
  border:none;
  transition:background .2s;
}
.autohost-banner:hover{background:rgba(var(--md-primary-rgb,0,82,217),.04)}

/* ── Flowing border: a light streak travels along the top & bottom edges ── */
.autohost-banner::before,
.autohost-banner::after{
  content:'';position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    transparent 25%,
    rgba(30,64,175,.5) 45%,
    rgba(59,130,246,.7) 50%,
    rgba(30,64,175,.5) 55%,
    transparent 75%,
    transparent 100%);
  background-size:200% 100%;
  animation:autohostFlow 3s linear infinite;
}
.autohost-banner::before{top:0}
.autohost-banner::after{bottom:0;animation-direction:reverse}

/* ── Content elements ── */
.autohost-banner-label{font-weight:600;color:var(--md-on-surface);position:relative;z-index:1}
.autohost-banner-stats{color:var(--md-on-surface-variant);opacity:.7;position:relative;z-index:1}
.autohost-banner-jump{margin-left:auto;color:var(--md-primary);font-weight:500;opacity:.8;position:relative;z-index:1}
.autohost-banner-pulse{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;position:relative;z-index:1}

/* ── Pulse dot ── */
.acl-pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--md-primary);position:relative}
.acl-pulse-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--md-primary);opacity:.5;animation:autohostPulse 2s ease-in-out infinite}

/* ── Hosting topic tab ── */
.acl-topic-tab--hosting{color:var(--md-primary)!important}
.acl-topic-tab--hosting.active{border-bottom-color:var(--md-primary)!important}
.acl-hosting-pulse{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px}

/* ── Quick action danger style ── */
.acl-quick-danger{background:rgba(234,67,53,.08)!important;color:#ea4335!important;border-color:rgba(234,67,53,.2)!important;font-weight:600!important}
.acl-quick-danger:hover{background:rgba(234,67,53,.15)!important}

/* ── Keyframes ── */
@keyframes autohostFlow{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}
@keyframes autohostPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.8);opacity:0}}

/* ── Dark mode ── */
[data-theme="dark"] .autohost-banner,
body.dark-mode .autohost-banner,
.dark-theme .autohost-banner{
  background:var(--md-surface,#1e1e1e);
}
[data-theme="dark"] .autohost-banner:hover,
body.dark-mode .autohost-banner:hover,
.dark-theme .autohost-banner:hover{
  background:rgba(var(--md-primary-rgb,100,160,255),.06);
}
[data-theme="dark"] .autohost-banner::before,
[data-theme="dark"] .autohost-banner::after,
body.dark-mode .autohost-banner::before,
body.dark-mode .autohost-banner::after,
.dark-theme .autohost-banner::before,
.dark-theme .autohost-banner::after{
  background:linear-gradient(90deg,
    transparent 0%,
    transparent 25%,
    rgba(255,255,255,.4) 45%,
    rgba(147,197,253,.6) 50%,
    rgba(255,255,255,.4) 55%,
    transparent 75%,
    transparent 100%);
  background-size:200% 100%;
}