/* Padhane Wala — support agent styles.
 *
 * Almost nothing is here. The bubble, the panel, the header, the messages and
 * the input bar are all already defined in styles.css and are reused unchanged —
 * that is deliberate, so the agent looks like part of the site rather than a
 * widget dropped on top of it.
 *
 * Only the three things that did not exist before are added: the typing dots,
 * the "talk to a person" button, and the suggestion chips.
 */

.agent-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.9rem 1rem;
    min-height: 1px;
}

/* Three dots that fade up in turn. A spinner would say "working"; these say
   "thinking", which is what it is. */
.agent-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dark-brown);
    opacity: 0.35;
    animation: agentTyping 1.2s ease-in-out infinite;
}

.agent-typing span:nth-child(2) { animation-delay: 0.2s; }
.agent-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes agentTyping {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
    30%           { opacity: 0.9;  transform: translateY(-3px); }
}

/* Sits outside .chat-messages' flex column, so it stretches full width and its
   button can centre itself. */
.agent-handoff {
    padding: 0.25rem 1rem 1rem;
    background: var(--light-cream);
}

.agent-handoff-btn {
    width: 100%;
    padding: 0.7rem 1rem;
    background: var(--primary-orange);
    color: white;
    border: none;
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.agent-handoff-btn:hover {
    background: var(--dark-brown);
}

/* Shown when the agent could not answer: the nearest things it does know about,
   so a near miss still gets the user somewhere. Wraps to more than one line on a
   narrow bubble rather than overflowing. */
.agent-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 1rem 1rem;
    background: var(--light-cream);
}

.agent-chip {
    padding: 0.4rem 0.7rem;
    background: white;
    color: var(--dark-brown);
    border: 1px solid var(--primary-orange);
    border-radius: 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.agent-chip:hover {
    background: var(--primary-orange);
    color: white;
}

/* The "More in Help: ..." line under an answer. */
.agent-cite {
    padding: 0.5rem 1rem;
    background: transparent;
}

.agent-cite a {
    font-size: 0.72rem;
    color: var(--primary-orange);
    text-decoration: underline;
}

/* The header status line is a sentence, not a state. At 0.75rem a short phrase
   fits on one line; these do not, and wrapping mid-sentence looks broken. */
.chat-header .online-status {
    display: block;
    line-height: 1.25;
}

/* Narrow phones: the panel is fixed at 350px, which leaves the bubble outside
   the viewport once the gutter is added. */
@media (max-width: 420px) {
    .chat-window {
        width: calc(100vw - 24px);
        right: 12px;
        height: min(500px, 70vh);
    }
}

/* Someone who has asked the window to be quiet gets no animation. The three-dot
   loop never stops while the panel is open, which is exactly what this is for. */
@media (prefers-reduced-motion: reduce) {
    .agent-typing span { animation: none; opacity: 0.5; }
    .chat-window { animation: none; }
    .message { animation: none; }
}