/* Grok Bot mark — black head, white eyes, wake / blink / bob / look */

.grok-mark{
  --look-x:0px;
  --look-y:0px;
  --turn:0deg;
  --blink:1;
  display:block;
  width:150px;
  height:150px;
  line-height:0;
}
.grok-mark svg{width:100%;height:100%;overflow:visible;display:block}
.grok-head{fill:var(--grok-head,#07070b)}
.grok-eye{fill:var(--grok-eye,#ffffff)}
/* Animated mark: blue on the dark site, black on the light site. No plate. */
.grok-float .grok-mark,
.grok-plate .grok-mark{--grok-head:#4580f3;--grok-eye:#ffffff}
html[data-theme="light"] .grok-float .grok-mark,
html[data-theme="light"] .grok-plate .grok-mark{--grok-head:#07070b;--grok-eye:#ffffff}
/* Sidebar colours sampled from the Grok Bot app. Eyes stay dark on the bright bodies. */
.grok-mark--orange{--grok-head:#e86d2d;--grok-eye:#1a1a1a}
.grok-mark--blue{--grok-head:#4580f3;--grok-eye:#1a1a1a}
.grok-mark--teal{--grok-head:#4fac9b;--grok-eye:#1a1a1a}
.grok-mark--purple{--grok-head:#835def;--grok-eye:#1a1a1a}
.grok-mark--brown{--grok-head:#90663d;--grok-eye:#1a1a1a}
.grok-mark--amber{--grok-head:#e39139;--grok-eye:#1a1a1a}
.grok-mark--red{--grok-head:#e44946;--grok-eye:#1a1a1a}
.grok-turn{
  transform-box:view-box;
  transform-origin:center;
  transform:rotate(var(--turn));
  transition:transform .18s ease-out;
}
.grok-bob{transform-box:view-box;transform-origin:center;animation:grok-bob 3.6s ease-in-out infinite}
.grok-eyes{
  transform:translate(var(--look-x),var(--look-y));
  transition:transform .16s ease-out;
}
.grok-eye{
  transform-box:fill-box;
  transform-origin:center;
  transform:scaleY(var(--blink));
  transition:transform .07s linear;
}
.grok-mark.is-waking{--blink:.08}
.grok-mark.is-blink{--blink:.1}

@keyframes grok-bob{
  0%,100%{transform:translateY(0) scale(1,1)}
  50%{transform:translateY(-5px) scale(1.012,.988)}
}

.grok-float{
  position:fixed;
  right:0;
  bottom:0;
  z-index:80;
  width:360px;
  height:230px;
  pointer-events:none;
  text-decoration:none;
  color:inherit;
}
.grok-float__plate{
  position:absolute;
  right:-62px;
  bottom:-132px;
  width:290px;
  height:290px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  transition:transform .4s ease;
}
.grok-float .grok-mark{filter:drop-shadow(0 16px 24px rgba(0,0,0,.4))}
.grok-float:hover .grok-float__plate,
.grok-float:focus-visible .grok-float__plate{transform:translateY(-36px)}
.grok-mark--float{width:278px;height:278px}
.grok-float .grok-head{transition:fill .35s ease}
html[data-theme="light"] .grok-float.is-over-footer .grok-mark{--grok-head:#4580f3;--grok-eye:#ffffff}
.grok-float__banner{
  position:absolute;
  left:64px;
  bottom:224px;
  z-index:2;
  transform:translateX(calc(-100% - 2px));
  pointer-events:auto;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
  color:#f7f4ea;
  background:rgba(6,6,10,.9);
  border:1px solid rgba(201,168,76,.6);
  padding:9px 16px;
  border-radius:999px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.grok-float__banner::after{
  content:"";
  position:absolute;
  right:14px;
  bottom:-6px;
  width:10px;
  height:10px;
  background:rgba(6,6,10,.9);
  border-right:1px solid rgba(201,168,76,.6);
  border-bottom:1px solid rgba(201,168,76,.6);
  transform:rotate(45deg);
}
.grok-float:focus-visible .grok-float__banner{outline:2px solid #c9a84c;outline-offset:3px}
html[data-theme="light"] .grok-float__banner,
html[data-theme="light"] .grok-float__banner::after{
  color:#16161e;
  background:rgba(255,255,255,.96);
}

.grok-plate{
  width:280px;
  height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.28));
}
.grok-mark--hero{width:232px;height:232px}
.grok-mark--mini{width:36px;height:36px}
.grok-mark--mini .grok-bob{animation:none}
.grok-mark--chat{width:44px;height:44px}

@media(max-width:720px){
  .grok-float{width:230px;height:156px}
  .grok-float__plate{width:190px;height:190px;right:-46px;bottom:-92px}
  .grok-mark--float{width:180px;height:180px}
  .grok-float__banner{left:43px;bottom:144px;right:auto;font-size:.68rem;padding:7px 11px;transform:translateX(calc(-100% - 2px))}
  .grok-plate{width:200px;height:200px}
  .grok-mark--hero{width:164px;height:164px}
}

@media(prefers-reduced-motion:reduce){
  .grok-bob{animation:none}
  .grok-turn,.grok-eyes,.grok-eye{transition:none}
  .grok-mark.is-waking{--blink:1}
  .grok-rise__stage{display:none}
}

/* Home-page promo: coloured bots rise from the bottom left. */
.grok-rise{
  position:fixed;
  left:0;
  bottom:0;
  width:min(440px,72vw);
  height:100%;
  z-index:40;
  pointer-events:none;
}
.grok-rise__stage{position:absolute;inset:0;overflow:hidden}
.grok-rise__bubble{
  position:absolute;
  left:var(--x,18%);
  bottom:86px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  animation:grok-rise var(--dur,9s) ease-out forwards;
}
.grok-mark--rise{width:62px;height:62px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.28))}
.grok-rise__name{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.01em;
  white-space:nowrap;
  color:#f7f4ea;
  background:rgba(6,6,10,.78);
  border:1px solid rgba(201,168,76,.45);
  border-radius:999px;
  padding:3px 9px;
}
.grok-rise__line{
  position:absolute;
  left:22px;
  bottom:24px;
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.2;
  white-space:nowrap;
  color:#16161e;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(201,168,76,.7);
  border-radius:14px;
  padding:10px 14px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  pointer-events:auto;
}
html[data-theme="light"] .grok-rise__name{
  color:#16161e;
  background:rgba(255,255,255,.92);
}
@keyframes grok-rise{
  0%{opacity:0;transform:translate3d(0,36px,0) scale(.72)}
  14%{opacity:1}
  68%{opacity:.88}
  100%{opacity:0;transform:translate3d(var(--drift,0px),-78vh,0) scale(1)}
}
@media(max-width:720px){
  .grok-rise{width:min(280px,78vw)}
  .grok-mark--rise{width:48px;height:48px}
  .grok-rise__name{font-size:.6rem}
  .grok-rise__line{left:12px;bottom:16px;font-size:.72rem;padding:8px 10px}
}