/*!
 * AI chat mock-up, shared by /ai-assistants and the camera wizard's final
 * step. Plain HTML bubbles so they translate and stay crisp, plus the
 * pieces aichat.js adds while replaying a conversation (caret, thinking
 * dots, tool-call rows). Palette-aware; /ai-assistants overrides colours
 * for the hero variant in aiassistants.css.
 */

.ai-chat {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem;
    border-radius: 14px;
    box-sizing: border-box; /* aichat.js sets min-height from offsetHeight */
    background-color: var(--bs-secondary-bg);
    border: 1px solid rgba(var(--site-border-rgb), 0.14);
}

.ai-msg {
    max-width: 92%;
    padding: .55rem .8rem;
    border-radius: 14px;
    font-size: .9rem;
    line-height: 1.4;
}

/* Dark ink on the cyan primary: white on it fails contrast (the site's own
   primary buttons use dark text for the same reason). */
.ai-user {
    align-self: flex-end;
    background-color: var(--bs-primary);
    color: #04202a;
    font-weight: 500;
    border-bottom-right-radius: 4px;
}

.ai-bot {
    align-self: flex-start;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-bottom-left-radius: 4px;
}

.ai-bot ul {
    padding-left: 1.1rem;
    margin: .35rem 0;
}

.ai-bot p:last-child {
    margin-bottom: 0;
}

/* ── Replay (aichat.js) ──────────────────────────────────────────── */

.ai-msg.ai-in,
.ai-tool,
.ai-tools-hdr {
    animation: ai-in .25s ease;
}

/* Blinking caret while a bubble is being typed / streamed */
.ai-typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: -.15em;
    background: currentColor;
    animation: ai-blink .9s steps(2) infinite;
}

/* "Thinking" dots before the reply arrives */
.ai-dots {
    display: inline-flex;
    gap: 4px;
    padding: .25rem 0;
}

.ai-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: ai-bounce 1.2s ease-in-out infinite;
}

.ai-dots span:nth-child(2) { animation-delay: .2s; }
.ai-dots span:nth-child(3) { animation-delay: .4s; }

/* Tool calls the assistant makes against Agent DVR, listed between question and reply */
.ai-tools {
    align-self: flex-start;
    max-width: 92%;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 0 .3rem;
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

.ai-tools:empty {
    display: none;
}

.ai-tools-hdr {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .75;
}

.ai-tools-hdr i {
    margin-right: .4rem;
}

.ai-tool {
    display: flex;
    flex-wrap: wrap; /* narrow (phone / modal): the label drops to its own line */
    align-items: center;
    gap: .25rem .5rem;
}

.ai-tool i {
    width: 1em;
    text-align: center;
    color: var(--bs-primary);
}

.ai-tool span {
    flex: 1 1 auto;
}

.ai-tool.done i {
    color: var(--bs-success);
}

.ai-tool code {
    padding: .05rem .4rem;
    border-radius: 4px;
    font-size: .74rem;
    white-space: nowrap;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
}

@keyframes ai-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@keyframes ai-blink {
    to { visibility: hidden; }
}

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