/* ============================================================================
   CHAT URL BADGES — links inside chat bubbles, as pills instead of raw URLs

   Markup is produced by public/js/chat-url-badge.js:

     <a class="cub-badge" href="…" target="_blank" title="Create a scene · host">
       <i class="bi bi-camera-reels cub-badge__icon"></i>
       <span class="cub-badge__label">Create a scene</span>
       <i class="bi bi-arrow-up-right cub-badge__go"></i>
     </a>

   Design contract
   ---------------
   The badge must sit correctly in EVERY chat surface without a per-theme rule:
   the purple outgoing bubble, the dark incoming bubble, the agent page's
   light / mono / mono-dark themes and the owner-side transcript modal. So it
   paints itself from `currentColor` (the bubble's own text colour) via
   color-mix, with a neutral grey fallback for engines without it. No hard-coded
   palette, nothing to keep in sync with chat-bubbles.css or chat-themes.css.
   ============================================================================ */

.cub-badge,
a.cub-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    max-width: 100%;
    vertical-align: middle;
    margin: 0.15em 0.1em;
    padding: 0.3em 0.75em 0.3em 0.6em;
    border-radius: 999px;

    font-size: 0.88em;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: inherit;

    /* Fallback for engines without color-mix — a neutral wash that reads on
       both light and dark bubbles. The color-mix rules below override it. */
    background: var(--scrim-soft);
    border: 1px solid rgba(128, 128, 128, 0.34);

    background: color-mix(in srgb, currentColor 13%, transparent);
    border-color: color-mix(in srgb, currentColor 30%, transparent);

    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                transform 0.15s ease, box-shadow 0.15s ease;
}

.cub-badge:hover,
a.cub-badge:hover {
    color: inherit;
    text-decoration: none;
    background: var(--scrim-soft);
    background: color-mix(in srgb, currentColor 22%, transparent);
    border-color: color-mix(in srgb, currentColor 48%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.cub-badge:active { transform: translateY(0); }

.cub-badge:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.cub-badge__icon {
    flex: 0 0 auto;
    font-size: 1em;
    opacity: 0.95;
    line-height: 1;
}

.cub-badge__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 24ch;
}

/* The "opens in a new tab" cue — quiet, it's a hint and not a second icon. */
.cub-badge__go {
    flex: 0 0 auto;
    font-size: 0.8em;
    opacity: 0.55;
    line-height: 1;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.cub-badge:hover .cub-badge__go {
    opacity: 0.9;
    transform: translate(1px, -1px);
}

/* A badge on its own line (the whole bubble is just a link) gets a little more
   presence — it's the message's call to action, not an inline aside. */
.cub-badge:only-child {
    padding: 0.42em 0.9em 0.42em 0.75em;
    font-size: 0.92em;
}

/* Off-platform destinations are labelled by host; keep them visually calmer so
   an in-app action still reads as the primary one. */
.cub-badge--external .cub-badge__label {
    font-weight: 500;
    max-width: 28ch;
}

@media (prefers-reduced-motion: reduce) {
    .cub-badge,
    .cub-badge__go {
        transition: none;
    }
    .cub-badge:hover { transform: none; }
    .cub-badge:hover .cub-badge__go { transform: none; }
}

/* Narrow phones: keep a long external host from pushing the bubble wide. */
@media (max-width: 420px) {
    .cub-badge__label { max-width: 18ch; }
}