/* =============================================================================
 * AI ASSISTANT — READING POLISH  (CU 869edjhc0 round 3)
 *
 * Enqueued only on the three surfaces that render [mwai_chatbot id="osat_AI_assist"]
 * — the dashboard, /app/contact/ and the help index. It styles AI Engine's own DOM,
 * which we do not own, so every selector here is deliberately narrow and every rule
 * is a correction of one specific reported symptom rather than a restyle.
 *
 * [GOTCHA] AI Engine ships its own stylesheet and its themes are user-selectable in
 * the admin. Anything set here has to beat a theme rule that may be more specific
 * than it looks, which is why `!important` appears on the width — the alternative is
 * guessing at the active theme's selector and being wrong on the next AI Engine
 * update. Keep the rule count low and the reasons written down.
 * ========================================================================== */

/* --- 1. THE BUBBLE STOPS BREATHING ---------------------------------------
   Dan: "when the chatbot is printing responses, the grey background adjusts to the
   width of the text being typed, which means the grey background is constantly
   adjusting shape."

   AI Engine sizes a reply bubble to its content. While a reply streams, its widest
   line changes with almost every chunk, so the block behind the text pulses sideways
   for the whole answer — and these answers are long. Pinning the assistant bubble to
   the conversation width makes the text grow downwards only.

   The USER's bubble is deliberately left alone: it is short, it is written before it
   is displayed, so it never resizes, and a right-aligned bubble hugging its own text
   is what makes it read as the other side of a conversation. */
.mwai-chatbot-container .mwai-reply.mwai-ai {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* --- 2. NO HALF-WRITTEN LINK SYNTAX ---------------------------------------
   The mask itself is applied by assets/js/ai-chat-polish.js; this is only what it
   looks like. `display: none` rather than `visibility: hidden`: a hidden-but-present
   fragment reserves the width of a whole UUID, so the line would sit with a long gap
   in it and then fill — which is the same flicker in a quieter costume. */
.osat-ai-linkmask { display: none; }

/* --- 3. "THINKING…" — WHAT REPLACED THE EVENTS PANEL ----------------------
   [CU 869eqj885] AI Engine's `.mwai-chunks` panel used to sit directly under the
   input, narrating the turn ("Request sent…", "Calling search_inventory…") and
   letting anyone expand the raw tool JSON. Dan: "I don't want this info to be
   available to the user, they should only see the question and response boxes."
   It is now switched off server-side in osat_render_ai_assistant()
   (includes/core/ai-bridge.php) — but it was also the ONLY signal that anything
   was happening during the long dead air of a tool call, so something honest has
   to stand in its place. This is that: the brand mark, spinning, in the same spot
   the panel occupied, so the feedback lands where the eye already looks.

   The element is injected by assets/js/ai-chat-polish.js as the LAST CHILD of
   `.mwai-chatbot-container` — deliberately outside AI Engine's React tree rather
   than inside `.mwai-conversation`, so React never reconciles it away. */
.osat-ai-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 2px 2px;
    font-size: 13px;
    line-height: 1;
    color: #5a6678;
}

/* The mark only — no wordmark, which is what Dan asked for ("just the graphic, not
   the text"). Loaded as a background-image on a relative path so no domain is ever
   baked into a stylesheet, matching 23-homepage.css.

   [GOTCHA] logo-mark.svg, NOT logo-icon.svg. Same artwork, but logo-icon.svg is a
   1280x1024 canvas whose square mark is centred at (515.5, 512.3) — off the centre
   of its own viewBox. Rotating that makes the mark ORBIT the box centre rather than
   turn on the spot, which at 20px reads as a wobble, not a spin. logo-mark.svg is
   the same paths re-framed square and centred; see its own header comment. */
.osat-ai-thinking__mark {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background: url("../img/logo-mark.svg") no-repeat center / contain;
    animation: osat-ai-thinking-spin 1.1s linear infinite;
}

.osat-ai-thinking__label { letter-spacing: 0.2px; }

@keyframes osat-ai-thinking-spin { to { transform: rotate(360deg); } }

/* A spinning logo is decoration; someone who has asked the OS for less motion still
   needs to know the assistant is working, so the signal is kept and only the
   rotation is dropped. */
@media (prefers-reduced-motion: reduce) {
    .osat-ai-thinking__mark {
        animation: osat-ai-thinking-pulse 1.6s ease-in-out infinite;
    }
    @keyframes osat-ai-thinking-pulse {
        0%, 100% { opacity: 1; }
        50%      { opacity: 0.35; }
    }
}