@import url('./gta-online-session-cleanup-v1.css?v=20261103nooutline1');
@property --online-activity-edge{syntax:"<angle>";inherits:false;initial-value:0deg}

/* Session activity v2: compact left-docked badge. */
body[data-page="gta-online"] .online-activity-stack{display:none!important}

.online-activity-badge-stack{
 position:fixed;
 left:0;
 top:calc(env(safe-area-inset-top,0px) + 92px);
 bottom:auto;
 right:auto;
 z-index:2147482500;
 width:min(250px,calc(100vw - 28px));
 pointer-events:none;
 display:grid;
 justify-items:start;
 gap:6px;
}
.online-activity-badge{
 --activity-state:#4fbd7d;
 position:relative;
 width:100%;
 min-height:58px;
 display:grid;
 grid-template-columns:72px minmax(0,1fr);
 align-items:stretch;
 box-sizing:border-box;
 overflow:hidden;
 color:#fff;
 background:#000;
 border:0;
 border-radius:0;
 box-shadow:none;
 font-family:'DM Sans',Arial,sans-serif;
 will-change:transform,opacity;
}
.online-activity-badge::before{
 content:"";
 position:absolute;
 inset:0;
 padding:1px;
 pointer-events:none;
 z-index:6;
 background:conic-gradient(from var(--online-activity-edge),transparent 0 275deg,#ffffff40 290deg,#fff 315deg,#ffffff80 330deg,transparent 348deg 360deg);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;
 mask-composite:exclude;
 animation:onlineActivityEdge 3.8s linear infinite;
}
.online-activity-badge.is-open{--activity-state:#4fbd7d}
.online-activity-badge.is-closed{--activity-state:#d9343f}
.online-activity-state{
 position:relative;
 z-index:2;
 min-height:58px;
 display:grid;
 place-items:center;
 align-content:center;
 gap:2px;
 padding:7px 16px 7px 6px;
 box-sizing:border-box;
 background:var(--activity-state);
 color:#fff;
 clip-path:polygon(0 0,100% 0,79% 100%,0 100%);
}
.online-activity-door{
 width:21px;
 height:21px;
 display:grid;
 place-items:center;
 color:#fff;
}
.online-activity-door svg{
 width:20px;
 height:20px;
 display:block;
 stroke:currentColor;
 stroke-width:1.75;
 stroke-linecap:round;
 stroke-linejoin:round;
 fill:none;
}
.online-activity-state strong{
 margin:0;
 font:800 8px/1 'DM Sans',Arial,sans-serif;
 letter-spacing:.10em;
 text-transform:uppercase;
 color:#fff;
}
.online-activity-session{
 position:relative;
 z-index:1;
 min-width:0;
 display:grid;
 align-content:center;
 gap:1px;
 padding:8px 14px 8px 3px;
 background:#000;
 color:#fff;
}
.online-activity-session::after{
 content:"";
 position:absolute;
 inset:0 0 0 auto;
 width:3px;
 background:var(--activity-state);
 opacity:.92;
}
.online-activity-session small{
 display:block;
 margin:0;
 font:800 9px/1.05 'DM Sans',Arial,sans-serif;
 letter-spacing:.055em;
 text-transform:uppercase;
 color:#d6d6d6;
}
.online-activity-session strong{
 display:block;
 min-width:0;
 max-width:154px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 margin:0;
 font:800 15px/1.06 'DM Sans',Arial,sans-serif;
 letter-spacing:-.018em;
 color:#fff;
}
@keyframes onlineActivityEdge{to{--online-activity-edge:360deg}}

@media(max-width:600px){
 .online-activity-badge-stack{
  left:0;
  top:calc(env(safe-area-inset-top,0px) + 84px);
  bottom:auto;
  right:auto;
  width:min(228px,calc(100vw - 28px));
  gap:5px;
 }
 .online-activity-badge{
  min-height:54px;
  grid-template-columns:66px minmax(0,1fr);
 }
 .online-activity-state{min-height:54px;padding:6px 14px 6px 5px;gap:2px}
 .online-activity-door{width:19px;height:19px}
 .online-activity-door svg{width:18px;height:18px}
 .online-activity-state strong{font-size:7.5px;letter-spacing:.095em}
 .online-activity-session{padding:7px 11px 7px 2px;gap:1px}
 .online-activity-session small{font-size:8px}
 .online-activity-session strong{font-size:14px;max-width:138px}
 .online-activity-session::after{width:3px}
}
@media(prefers-reduced-motion:reduce){
 .online-activity-badge{transform:none!important}
 .online-activity-badge::before{animation:none;--online-activity-edge:315deg}
}