/* Header chat bubble — templates/includes/general_qa_nav.html (the entry
   point to the general_qa origin domain). Loaded sitewide from base.html.
   Deliberately matched to `.asset-search-toggle` in asset_search.css: the two
   sit side by side in the navbar and must read as one row of chrome.

   EVERY selector here is scoped `.navbar a.chat-nav-bubble`, and that is not
   decoration. base.html's inline <style> carries `.navbar a { color: #fff }`
   and `.navbar a:hover { color: #228B22; background-color: … }` — one class
   PLUS an element, which outranks a bare `.chat-nav-bubble`. A plain class
   selector loses, and loses SILENTLY: the debug variant rendered in the
   navbar's ordinary white/green and the amber never appeared (caught in
   browser test, 2026-07-30). The search glass never hit this because it is a
   <button>; the bubble is an <a> and inherits the navbar's anchor treatment.
   Keep the element in the selector, or re-introduce the bug. */

.navbar a.chat-nav-bubble {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    text-decoration: none;
    padding: 0.4rem 0.5rem;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

/* No background pill on hover — `.navbar a:hover` adds one, and the search
   glass beside it has none. Colour change only, exactly like the glass. */
.navbar a.chat-nav-bubble:hover,
.navbar a.chat-nav-bubble:focus {
    color: #228B22;
    background-color: transparent;
    text-decoration: none;
    outline: none;
    box-shadow: none;
}

/* DEBUG builds open /chat/debug/ (the dialogue-state overlay). An icon-only
   control has no label to hang the usual `[debug]` marker on, so the amber
   IS the marker — same #ffc107 Bootstrap's .text-warning gives the in-page
   chat buttons. Without it a dev cannot tell which surface they are about to
   open, which is the whole failure this affordance exists to prevent. */
.navbar a.chat-nav-bubble--debug {
    color: #ffc107;
}

.navbar a.chat-nav-bubble--debug:hover,
.navbar a.chat-nav-bubble--debug:focus {
    color: #ffda6a;
    background-color: transparent;
}

@media (max-width: 576px) {
    .navbar a.chat-nav-bubble {
        font-size: 1.05rem;
        padding: 0.25rem 0.4rem;
    }
}