/* Presentation for the Yar chat widget that the SDK does not offer as config.
 *
 * The widget renders without a Shadow DOM, so its internals are reachable from
 * the host page. Every rule here is !important because the SDK injects its own
 * <style> at init -- later in the document than this file -- and its rules
 * carry no !important of their own, so this is what settles the order.
 *
 * If a future SDK release renames a class, the matching rule stops applying
 * and the widget falls back to its stock look. Nothing breaks; the polish just
 * goes away. Colours come from --yar-primary / --yar-primary-rgb, which
 * landing/views.py fills from each clinic's theme colour.
 */

/* --- Typing indicator ---------------------------------------------------
 * The SDK marks a streaming reply with a blinking vertical bar. Three
 * bouncing dots is what a reader expects instead.
 */
#yar-chat-root .yar-cursor {
    position: relative !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    margin: 0 12px !important;
    border-radius: 50% !important;
    background: var(--yar-primary, #4f46e5) !important;
    vertical-align: middle !important;
    animation: yar-typing-bounce 1.3s ease-in-out infinite !important;
}
#yar-chat-root .yar-cursor::before,
#yar-chat-root .yar-cursor::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--yar-primary, #4f46e5) !important;
    animation: yar-typing-bounce 1.3s ease-in-out infinite !important;
}
#yar-chat-root .yar-cursor::before { right: 10px !important;  animation-delay: 0.15s !important; }
#yar-chat-root .yar-cursor::after  { right: -10px !important; animation-delay: 0.3s !important; }

@keyframes yar-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* A sparkle beside the reply that is still arriving. :has(.yar-cursor) scopes
 * it to exactly that message -- and because the SDK removes the cursor when
 * the stream ends, the icon disappears on its own with no JS to manage it.
 * Drawn as a mask rather than a background image so it takes the clinic's
 * colour instead of a fixed one.
 */
#yar-chat-root .yar-msg.assistant:has(.yar-cursor)::before {
    content: "" !important;
    display: inline-block !important;
    width: 15px !important;
    height: 15px !important;
    margin-inline-end: 6px !important;
    vertical-align: middle !important;
    background-color: var(--yar-primary, #4f46e5) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.937A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.937A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    animation: yar-sparkle-pulse 1.3s ease-in-out infinite !important;
}

@keyframes yar-sparkle-pulse {
    0%, 100% { transform: scale(0.85) rotate(0deg); opacity: 0.6; }
    50%      { transform: scale(1.05) rotate(15deg); opacity: 1; }
}

/* --- Send button --------------------------------------------------------- */
#yar-chat-root .yar-send-btn {
    transition: filter 0.15s, transform 0.1s !important;
}
#yar-chat-root .yar-send-btn:not(:disabled):active {
    transform: scale(0.96) !important;
}

/* --- The closed bubble ---------------------------------------------------
 * A slow, faint ring that opens and fades, to catch the eye without
 * demanding attention. It stops once the panel is open: past that point the
 * visitor is already talking to the assistant and the pulse is only noise.
 */
#yar-chat-root .yar-bubble {
    transition: transform 0.2s ease !important;
    animation: yar-bubble-breathe 2.8s ease-in-out infinite !important;
}
#yar-chat-root .yar-bubble:hover {
    transform: scale(1.08) !important;
}
#yar-chat-root:has(.yar-panel.yar-open) .yar-bubble {
    animation: none !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.22) !important;
}

@keyframes yar-bubble-breathe {
    0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.22), 0 0 0 0 rgba(var(--yar-primary-rgb, 16,185,129), 0.35); }
    50%      { box-shadow: 0 6px 20px rgba(0,0,0,0.22), 0 0 0 9px rgba(var(--yar-primary-rgb, 16,185,129), 0); }
}

/* --- New messages -------------------------------------------------------
 * A plain animation on the class itself, so it runs for every message the
 * SDK appends without anything having to hook the SDK.
 */
#yar-chat-root .yar-msg {
    animation: yar-msg-in 0.35s ease-out !important;
}

@keyframes yar-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Position -----------------------------------------------------------
 * The landing page is a 420px card centred in the viewport, but the widget
 * attaches to document.body, so left to itself it sits in the corner of the
 * monitor rather than beside the card. This pulls it to 24px inside the
 * card's edge -- the mirror image of the card's own inset.
 *
 * Only above the SDK's own 440px breakpoint. Below it the SDK deliberately
 * makes the panel full-screen (width:100vw; right:0), and forcing right:24px
 * onto that would push a 100vw panel a quarter-inch off the left edge of the
 * screen and open a gap on the right.
 */
@media (min-width: 441px) {
    #yar-chat-root .yar-bubble,
    #yar-chat-root .yar-panel {
        right: max(24px, calc((100vw - 420px) / 2 + 24px)) !important;
    }
}