/* ══════════════════════════════════════════════════════════════════════════
   AI Agent chat graphic
   ══════════════════════════════════════════════════════════════════════════

   The chat card used by the homepage's "An AI Agent With Secure Access to
   Everything Your Team Needs" section, and by the answer side of the knowledge
   base page's dark band.

   Moved here out of static-pages/home/body.css so both pages draw the same
   card. Loaded only by the pages that ask for it, through the `styles` array
   in their deps.json — see anim-knowledge-base.css for why that is not
   shared.css.

   One thing to know before reusing it: this file describes an ANIMATED card,
   and the animation is driven by home/body.js. Rows are opacity:0 until the
   script adds .is-visible, and tool chips are opacity:0 until it adds
   .is-running and then .is-done. A copy of the markup without the script
   therefore renders an empty card.

   A page that wants the card standing still does not need to override any of
   that. It writes the markup in the state the script would have left it —
   .is-visible on each row, .is-done on each tool — and gets the finished card
   with no script and no CSS of its own. That is how the knowledge base page
   uses it. The only thing it overrides is the header dot's pulse, which is the
   one animation that runs without JavaScript.

   Selectors are unscoped, exactly as they were in home/body.css — a verbatim
   move, so the homepage's rendering is unchanged by construction.
   ══════════════════════════════════════════════════════════════════════════ */

        /* AI Agent chat animation */
        .agent-chat { font-family: var(--bodyfontfamily, system-ui, sans-serif); }
        .agent-chat__dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: #20796F;
            box-shadow: 0 0 0 0 rgba(32,121,111,.6);
            animation: agentPulse 2s ease-out infinite;
        }
        @keyframes agentPulse {
            0%   { box-shadow: 0 0 0 0 rgba(32,121,111,.6); }
            70%  { box-shadow: 0 0 0 8px rgba(32,121,111,0); }
            100% { box-shadow: 0 0 0 0 rgba(32,121,111,0); }
        }
        .agent-chat__body {
            display: flex; flex-direction: column; gap: 8px;
            font-size: 11px; line-height: 1.4;
        }
        .agent-chat__row {
            display: flex; align-items: flex-start; gap: 6px;
            opacity: 0; transform: translateY(4px);
            transition: opacity .3s ease, transform .3s ease;
        }
        .agent-chat__row.is-visible { opacity: 1; transform: translateY(0); }
        .agent-chat__row--user { justify-content: flex-end; }
        .agent-chat__avatar {
            width: 20px; height: 20px; border-radius: 50%;
            background: #E8F5F3; color: #20796F;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; flex-shrink: 0;
        }
        .agent-chat__bubble {
            padding: 6px 10px; border-radius: 12px;
            max-width: 85%; word-wrap: break-word;
        }
        .agent-chat__bubble--user {
            background: #20796F; color: #fff;
            border-bottom-right-radius: 4px;
        }
        .agent-chat__bubble--agent {
            background: #F1F5F9; color: #0F172A;
            border-bottom-left-radius: 4px;
        }
        .agent-chat__caret {
            display: inline-block; width: 1px; height: 10px;
            background: currentColor; margin-left: 1px;
            vertical-align: -1px; opacity: 0;
        }
        .agent-chat__caret.is-blinking { animation: agentCaret 0.9s steps(2) infinite; opacity: 1; }
        @keyframes agentCaret { 50% { opacity: 0; } }
        .agent-chat__typing {
            display: inline-flex; gap: 3px; padding: 8px 10px;
            background: #F1F5F9; border-radius: 12px;
            border-bottom-left-radius: 4px;
        }
        .agent-chat__typing span {
            width: 5px; height: 5px; border-radius: 50%;
            background: #94A3B8;
            animation: agentTyping 1.2s ease-in-out infinite;
        }
        .agent-chat__typing span:nth-child(2) { animation-delay: .15s; }
        .agent-chat__typing span:nth-child(3) { animation-delay: .30s; }
        @keyframes agentTyping {
            0%, 60%, 100% { transform: translateY(0); opacity: .4; }
            30% { transform: translateY(-3px); opacity: 1; }
        }
        .agent-chat__tools {
            display: flex; flex-direction: column; gap: 4px;
            flex: 1; min-width: 0;
        }
        .agent-chat__tool {
            display: flex; align-items: center; gap: 6px;
            padding: 5px 8px; border-radius: 8px;
            background: #F8FAFC; border: 1px solid #E2E8F0;
            font-size: 10px; color: #475569;
            opacity: 0; transform: translateX(-4px);
            transition: opacity .25s ease, transform .25s ease, border-color .25s ease, background .25s ease;
        }
        .agent-chat__tool i:first-child { color: #20796F; flex-shrink: 0; }
        .agent-chat__tool span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .agent-chat__tool.is-running {
            opacity: 1; transform: translateX(0);
            border-color: #20796F; background: #E8F5F3;
        }
        .agent-chat__tool.is-running span::after {
            content: ''; display: inline-block;
            width: 6px; height: 6px; margin-left: 4px;
            border: 1px solid #20796F; border-top-color: transparent;
            border-radius: 50%; vertical-align: middle;
            animation: agentSpin .7s linear infinite;
        }
        .agent-chat__tool.is-done { opacity: 1; transform: translateX(0); }
        .agent-chat__tool-check { color: #20796F; opacity: 0; font-size: 11px; flex-shrink: 0; }
        .agent-chat__tool.is-done .agent-chat__tool-check { opacity: 1; }
        @keyframes agentSpin { to { transform: rotate(360deg); } }
        .agent-chat__send {
            width: 22px; height: 22px; border-radius: 50%;
            background: #20796F;
            display: inline-flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            transition: transform .15s ease, background .15s ease;
        }
        .agent-chat__send.is-pressed { transform: scale(.85); background: #175E56; }
        .agent-chat__input-text {
            font-size: 11px; color: #0F172A; min-width: 0;
        }
        .agent-chat__input-text.is-placeholder { color: #94A3B8; }
        .agent-chat__caret--input {
            height: 11px; background: #20796F; margin-left: 0;
            opacity: 0; vertical-align: -1px;
        }