/**
 * hi-chat-shared.css
 *
 * Rules that are identical on both the admin panel and the public widget.
 * Loaded by both admin and public contexts.
 */

/* ── Message bubble layout ──────────────────────────────────────────── */
.hi-chat-msg-bubble {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hi-chat-msg-footer {
    display: flex;
    align-items: center;
    margin-top: 4px;
    gap: 4px;
    justify-content: flex-end;
}

.hi-chat-msg-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hi-chat-msg-time {
    display: flex;
    font-size: 10px;
    color: #9ca3af;
}

/* ── Seen eye ────────────────────────────────────────────────────────── */
.hi-chat-seen-eye {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: #9ca3af;
    vertical-align: middle;
}

/* ── Typing indicator dots ───────────────────────────────────────────── */
/* .hi-chat-typing-dots container padding differs per context — see admin/public CSS */
.hi-chat-typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ca3af;
    animation: hi-chat-bounce 1.2s infinite ease-in-out;
}

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

@keyframes hi-chat-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%           { transform: translateY(-6px); }
}

/* ── Markdown sub-rules (structure is identical; colours differ per context) ── */
.hi-chat-msg-markdown p            { margin: 0 0 6px; }
.hi-chat-msg-markdown p:last-child { margin-bottom: 0; }
.hi-chat-msg-markdown strong       { font-weight: 600; }
.hi-chat-msg-markdown em           { font-style: italic; }
.hi-chat-msg-markdown pre code     { background: none; padding: 0; color: inherit; }
.hi-chat-msg-markdown li           { margin-bottom: 2px; }