/* ==========================================================================
   AiCyber.Guru — Community tab
   ONE definition, linked by all 20 pages.

   Why its own file: this component previously existed twice — `.comm-float`
   inline in index.html and `.gold-ribbon` in style.css — with different
   markup, different icons (WhatsApp mark vs a generic "users" glyph) and
   different behaviour. They drifted because there were two sources of truth.
   index.html carries its own inline stylesheet and the other 19 use
   style.css, so neither could host a shared component; a third small sheet
   that only defines .comm-float can be linked by all of them without
   colliding with either.

   Tokens are declared locally so the file works against both stylesheets,
   which name the same colours differently (--signal vs --cyan).
   ========================================================================== */

.comm-float{
  --comm-bg:#0E5B54;          /* brand teal — --signal / --cyan            */
  --comm-bg-hover:#0B4A44;
  --comm-ring:rgba(20,131,122,.32);

  position:fixed;left:0;top:50%;z-index:61;
  transform:translateY(-50%) translateX(-100%);
  display:block;
  background:var(--comm-bg);color:#fff;
  border:1px solid var(--comm-bg);border-left:0;
  border-radius:0 2px 2px 0;
  padding:1rem .62rem;
  font-family:inherit;font-size:.82rem;font-weight:500;letter-spacing:.03em;
  text-decoration:none;
  opacity:0;visibility:hidden;
  transition:opacity 320ms cubic-bezier(.22,.61,.36,1),
             transform 320ms cubic-bezier(.22,.61,.36,1),
             background 180ms, visibility 0s linear 320ms;
}

/* Revealed once the reader has committed to the page. A slow pulse, never a
   blink — anything that flashes for more than five seconds needs a pause
   control under WCAG 2.2.2, and the pulse stops on hover and on focus. */
.comm-float.is-live{
  opacity:1;visibility:visible;
  transform:translateY(-50%) translateX(0);
  transition-delay:0s;
  animation:commPulse 2.4s ease-in-out infinite;
}
.comm-float:hover,
.comm-float:focus-visible{background:var(--comm-bg-hover);animation-play-state:paused}
.comm-float:focus-visible{outline:2px solid #9FD8D0;outline-offset:3px}

@keyframes commPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(20,131,122,0)}
  50%    {box-shadow:0 0 0 6px var(--comm-ring)}
}

/* vertical-rl alone rotates the glyphs clockwise, so the text would face away
   from the page. The extra 180deg turns the whole run back: it reads
   bottom-to-top with the letters facing in toward the content. */
.comm-float__in{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  display:inline-flex;align-items:center;gap:.65rem;
}

/* The icon sits first in the DOM, which — inside the rotated run — places it
   at the BOTTOM of the tab, where bottom-to-top reading starts. It is the
   WhatsApp mark rather than a generic people glyph, because the tab opens
   WhatsApp and the mark says so before the text is read.

   The counter-rotation is the point: the parent's 180deg would otherwise
   carry the icon with it and leave a recognisable brand mark upside down,
   which reads as a rendering fault rather than a design choice. Rotating the
   icon back by 180deg lands it upright while the text stays vertical. */
.comm-float__ico{
  transform:rotate(180deg);
  width:18px;height:18px;flex:none;display:block;
}

/* Phone: the vertical tab used to lie over the hero copy, so it docks
   bottom-left as an icon-only pill instead. --ribbon-h is measured from the
   real bottom ribbon in JS; without that offset the pill sits underneath it
   and loses most of its height. */
@media (max-width:760px){
  .comm-float{
    top:auto;bottom:calc(var(--ribbon-h,45px) + 12px);left:12px;
    transform:translateY(0) translateX(-140%);
    border-radius:2px;border-left:1px solid var(--comm-bg);
    padding:.7rem .75rem;
  }
  .comm-float.is-live{transform:translateY(0) translateX(0)}
  .comm-float__in{writing-mode:horizontal-tb;transform:none;gap:0}
  .comm-float__in span{display:none}
  .comm-float__ico{transform:none;width:20px;height:20px}
}

@media (prefers-reduced-motion:reduce){
  .comm-float,.comm-float.is-live{transition:none;animation:none}
}