/* ============================================================
   ChatBase — ✍️ typing indicator (typingnow.js)
   The bar sits between the messages and the message box. It takes up NO
   space until somebody is actually typing (.on), and in the Discord-style
   #general it floats in the gap under the composer so it can never push the
   message box below the fold (the Oct 7 2026 Chromebook bug).
   ============================================================ */
.tn-bar {
    display: none;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    line-height: 1.2;
    color: var(--text-secondary);
    padding: 2px 10px 5px;
    min-height: 0;
    pointer-events: none;
    animation: tnFade .18s ease;
}
.tn-bar.on { display: flex; }
.tn-bar strong { color: var(--text-primary, #fff); font-weight: 600; }

@keyframes tnFade { from { opacity: 0; } to { opacity: 1; } }

/* three bouncing dots */
.tn-dots { display: inline-flex; gap: 3px; align-items: flex-end; height: 10px; }
.tn-dots i {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent-cyan, #7cc6ff);
    animation: tnBounce 1.1s infinite ease-in-out;
}
.tn-dots i:nth-child(2) { animation-delay: .18s; }
.tn-dots i:nth-child(3) { animation-delay: .36s; }

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

@media (prefers-reduced-motion: reduce) {
    .tn-dots i { animation: none; opacity: .8; }
    .tn-bar { animation: none; }
}
html.cb-calm .tn-dots i { animation: none; opacity: .8; }

/* Discord-style General: float in the gap under the composer */
#general.dc-on .chat-container { position: relative; }
#general.dc-on .tn-bar {
    position: absolute; bottom: 1px; left: 22px; right: 22px;
    padding: 0; font-size: 12px; color: #b5bac1;
}
#general.dc-on .tn-bar strong { color: #f2f3f5; }

/* DMs + group chats */
#dmConvo .tn-bar, #gdConvo .tn-bar { padding: 0 14px 6px; }

@media (max-width: 900px) {
    .tn-bar { font-size: 12px; padding: 2px 8px 4px; }
    #general.dc-on .tn-bar { left: 18px; right: 18px; }
}