/* ============================================================================
   Zonar SKIN for the portal live chat.
   Structure lives in /css/comm-chat.base.css — here we only re-map --tcc-*
   tokens to Zonar's light, squared palette. No idle animation by design.
   ============================================================================ */
.tc-chat {
    --tcc-accent:         var(--brand-button, #161616);
    --tcc-accent-text:    #ffffff;
    --tcc-bg:             #ffffff;
    --tcc-surface:        #f4f4f4;
    --tcc-text:           #1a1a1a;
    --tcc-muted:          #777777;
    --tcc-border:         #e7e7e7;
    --tcc-bubble-in:      #ededed;
    --tcc-bubble-in-text: #1a1a1a;
    --tcc-radius:         6px;
    --tcc-font:           inherit;

    /* --- FAB tokens --- */
    --tcc-launch-radius:       8px;                  /* squared — matches Zonar button aesthetic */
    --tcc-launch-tracking:     1.5px;
    --tcc-launch-shadow:       0 4px 14px rgba(0, 0, 0, .15);
    --tcc-launch-shadow-hover: 0 8px 22px rgba(0, 0, 0, .25);
    --tcc-launch-hover-filter: brightness(1.06);
    --tcc-launch-focus-ring:   #0b1b0b;              /* dark ring — see §6 for why this matters */
}

/* ---- FAB skin ---- */
.tc-chat-launch {
    /* Nudge inward: sit above the hero "Learn More" button and left of the
       slider control band that occupy the bottom-right of the homepage hero.
       Base default is right:32px / bottom:32px → +80px left, +100px up. */
    right: 105px;
    bottom: 95px;
    background: var(--brand-button, #8ed500);
    color: #0b1b0b;
}
.tc-chat-launch:hover { color: #0b1b0b; }

/* Zonar is intentionally calm — no idle animation, no teaser */
.tc-chat-launch-teaser { display: none; }

/* Mobile: Zonar stays squared even at small size (override base's border-radius: 50%).
   Also pull back to the screen edge — the desktop right:105px inset is too far in on
   phones and (being non-media) would otherwise win over the base mobile rule. */
@media (max-width: 767.98px) {
    .tc-chat-launch { border-radius: 10px; right: 15px; }
}