/* ============================================================================
   Blackhawk SKIN for the portal live chat.
   Structure lives in /css/comm-chat.base.css — here we only re-map --tcc-*
   tokens to Blackhawk's dark/tech palette + Rajdhani type.
   ============================================================================ */
.tc-chat {
    --tcc-accent:         var(--bh-accent, var(--brand-button, #00c2ff));
    --tcc-accent-text:    #04121f;
    --tcc-bg:             #0d1b2a;
    --tcc-surface:        #0a1622;
    --tcc-text:           #e8f1f8;
    --tcc-muted:          #8aa0b2;
    --tcc-border:         rgba(255,255,255,.08);
    --tcc-bubble-in:      #13283c;
    --tcc-bubble-in-text: #e8f1f8;
    --tcc-radius:         14px;
    --tcc-font:           'Rajdhani', sans-serif;

    /* --- FAB tokens --- */
    --tcc-launch-radius:       28px;                        /* full pill */
    --tcc-launch-tracking:     2px;
    --tcc-launch-shadow:       0 4px 20px rgba(0, 194, 255, .25);
    --tcc-launch-shadow-hover: 0 8px 36px rgba(0, 194, 255, .50);
    --tcc-launch-hover-filter: brightness(1.15);
    --tcc-launch-focus-ring:   var(--bh-accent, #00c2ff);   /* cyan ring on dark page — contrast OK */
    --tcc-teaser-bg:           #04121f;                     /* near-black bubble */
    --tcc-teaser-text:         var(--bh-accent, #00c2ff);   /* cyan label */
    --tcc-teaser-radius:       6px;
}

/* Panel / drawer type treatment */
.tc-chat .tc-chat-title { text-transform: uppercase; letter-spacing: 1px; }
.tc-chat .tc-chat-start { text-transform: uppercase; letter-spacing: .5px; }

/* ---- FAB skin ---- */
.tc-chat-launch {
    /* Lift above the hero slider nav arrows + "Learn More" control band,
       which occupy the bottom-right corner on the homepage hero. */
    bottom: 120px;
    background: var(--bh-accent, var(--brand-button, #00c2ff));
    color: #04121f;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    will-change: transform;                  /* promote to GPU layer for ring animation */
}

/* Mobile: hero controls stack tighter — modest lift is enough */
@media (max-width: 767.98px) {
    .tc-chat-launch { bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); }
}
.tc-chat-launch:hover {
    filter: brightness(1.15);
    color: #04121f;
}

/* Idle attention ring — expands outward on ::before, never fights hover box-shadow */
.tc-chat-launch::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: bh-chat-ring 3s ease-out 1.5s infinite;
    pointer-events: none;
}
/* Pause ring while hovering — clean handoff to hover shadow */
.tc-chat-launch:hover::before {
    animation-play-state: paused;
    opacity: 0;
    transition: opacity .2s ease;
}

/* Ring keyframe — rgba values must match --bh-accent: #00c2ff = rgb(0,194,255) */
@keyframes bh-chat-ring {
    0%   { box-shadow: 0 0 0 0  rgba(0, 194, 255, .55); }
    65%  { box-shadow: 0 0 0 16px rgba(0, 194, 255, 0);  }
    100% { box-shadow: 0 0 0 16px rgba(0, 194, 255, 0);  }
}

/* ---- Embedded Cetan chat skin (confirmation-face panels) ----
   Same on-accent ink logic as the drawer/launcher above: patient bubbles and the
   send button are painted with the bright accent, so they need the dark ink. */
.tc-cetan-chat {
    --tccc-accent:      var(--bh-accent, var(--brand-button, #00c2ff));
    --tccc-accent-text: #04121f;
    --tccc-font:        'Rajdhani', sans-serif;
}