/* agent-inbox.css
 *
 * Styles of the Posteingang product subpage (agent.feedbax.* /posteingang and its localized
 * slugs). Loaded on top of agent-landing.css, which carries the shared la-* primitives
 * (la-anim-rise, la-anim-soft, la-orbit-blob, la-typing-dot). Everything here is
 * page-specific: the pulsing "new message" dot in the inbox list and the 18s takeover loop
 * of the conversation mock, where the whole panel switches from the AI state to the human
 * state and back. The page has no JavaScript at all — the loop is pure CSS.
 * Deliberately outside the Tailwind pipeline, same as agent-landing.css.
 *
 * Colour convention on this page: every mock is our own inbox, not the visitor's widget,
 * so all of it uses the semantic tokens and follows light/dark. The one colour-bearing
 * keyframe goes through var() so the dark theme needs no duplicate.
 */

/* ---------- hero: staggered entrance ----------
   The delays have to live here, not as Tailwind utilities on the elements: agent-landing.css
   sets the entrance with the `animation` shorthand, which resets animation-delay, and it is
   linked before this file. Both reuse its keyframes. */

.la-ib-row-1 { animation: la-soft .5s ease-out .5s both; }
.la-ib-row-2 { animation: la-soft .5s ease-out .65s both; }
.la-ib-row-3 { animation: la-soft .5s ease-out .8s both; }
.la-ib-notify { animation: la-rise .7s ease-out .9s both; }

/* ---------- inbox list: the unread conversation keeps pulsing ---------- */

.la-ib-dot {
    --la-ib-dot-ring: rgba(0, 0, 255, .35);
    animation: la-ib-dot 2s ease-out infinite;
}

.dark .la-ib-dot {
    --la-ib-dot-ring: rgba(99, 102, 241, .5);
}

@keyframes la-ib-dot {
    0%, 100% { box-shadow: 0 0 0 0 var(--la-ib-dot-ring); }
    50% { box-shadow: 0 0 0 6px rgba(0, 0, 255, 0); }
}

/* ---------- takeover mock: one 18s loop across the whole panel ----------
   Timeline: the visitor asks (0%), the agent types (8% … 20%) and answers (19%),
   the cursor travels to the takeover button and clicks it (32% … 56%), the panel flips
   to the human state at 49%, the toast confirms it (53%) and the composer appears. */

/* The two halves of every state pair: A is shown while the AI answers, B afterwards. */
@keyframes la-ib-state-a {
    0%, 49% { opacity: 1; }
    52%, 100% { opacity: 0; }
}

@keyframes la-ib-state-b {
    0%, 49% { opacity: 0; }
    52%, 97% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes la-ib-msg-visitor {
    0%, 2% { opacity: 0; transform: translateY(12px); }
    6%, 97% { opacity: 1; transform: none; }
    100% { opacity: 0; }
}

@keyframes la-ib-typing {
    0%, 8% { opacity: 0; }
    11%, 17% { opacity: 1; }
    20%, 100% { opacity: 0; }
}

@keyframes la-ib-msg-agent {
    0%, 19% { opacity: 0; transform: translateY(14px); }
    23%, 97% { opacity: 1; transform: none; }
    100% { opacity: 0; }
}

@keyframes la-ib-cursor {
    0%, 32% { opacity: 0; transform: translate(170px, 150px); }
    36% { opacity: 1; transform: translate(170px, 150px); }
    46%, 48% { opacity: 1; transform: translate(0, 0); }
    50% { opacity: 1; transform: translate(0, 0) scale(.82); }
    52% { opacity: 1; transform: translate(0, 0) scale(1); }
    56%, 100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes la-ib-toast {
    0%, 53% { opacity: 0; transform: translateY(6px); }
    57%, 94% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; }
}

@keyframes la-ib-composer {
    0%, 49% { opacity: 0; transform: translateY(8px); }
    53%, 97% { opacity: 1; transform: none; }
    100% { opacity: 0; }
}

.la-ib-state-a { animation: la-ib-state-a 18s linear infinite; }
.la-ib-state-b { animation: la-ib-state-b 18s linear infinite; }
.la-ib-msg-visitor { animation: la-ib-msg-visitor 18s linear infinite; }
.la-ib-typing { animation: la-ib-typing 18s linear infinite; }
.la-ib-msg-agent { animation: la-ib-msg-agent 18s linear infinite; }
.la-ib-cursor { animation: la-ib-cursor 18s linear infinite; }
.la-ib-toast { animation: la-ib-toast 18s linear infinite; }
.la-ib-composer { animation: la-ib-composer 18s linear infinite; }

/* ---------- reduced motion: freeze the loop in its readable end state ---------- */

@media (prefers-reduced-motion: reduce) {
    .la-ib-row-1,
    .la-ib-row-2,
    .la-ib-row-3,
    .la-ib-notify,
    .la-ib-dot,
    .la-ib-state-a,
    .la-ib-state-b,
    .la-ib-msg-visitor,
    .la-ib-typing,
    .la-ib-msg-agent,
    .la-ib-cursor,
    .la-ib-toast,
    .la-ib-composer {
        animation: none;
        opacity: 1;
        transform: none;
    }

    /* The AI half of each pair and the travelling cursor only make sense in motion; the
       panel then reads as the finished takeover, which is what the section is about. */
    .la-ib-state-a,
    .la-ib-typing,
    .la-ib-cursor {
        opacity: 0;
    }
}