/* Dai trang thai cua che do hoi thoai - nam NGAY TREN o nhap, khong phai mot
   lop phu toan man hinh. Tin chot: chay "tren khung chat binh thuong", tuc
   nguoi dung van nhin thay cau tra loi day du trong luc nghe.

   Mau CO DINH, khong muon bien cua LibreChat. Ly do da ghi o dict.css: cac bien
   --surface-* / --text-* doi NGHIA theo che do sang/toi, nen co luc nen va chu
   ra cung mot phia sang va ca dai bien mat. */
.sd-hoi-dai {
    display: none;
    align-items: center;
    gap: 10px;
    margin: 0 auto 8px;
    max-width: 48rem;
    padding: 7px 14px;
    border-radius: 999px;
    font: 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
    background: #1f2023;
    color: #f2f2f2;
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

.sd-hoi-dai.sd-hoi-mo { display: flex; }

/* Sóng âm: 14 cột, cột mới nhất ở bên phải.

   Lúc NGHE, hoi.js đặt chiều cao từng cột theo mức âm thật của micro.
   Lúc ĐỌC, JS không đụng vào nữa và CSS tự chạy một con sóng. Lý do không lấy
   mức âm thật của tiếng phát ra: muốn đọc nó thì phải nối thẻ audio vào một
   AudioContext, mà khi đó âm thanh đi qua đồ thị đó - gặp chặn tự-động-phát là
   CÂM TIẾNG HOÀN TOÀN. Đổi một rủi ro thật lấy một hình vẽ đúng mức âm thì
   không đáng: thứ người dùng cần ở đây là "nó đang nói", không phải biểu đồ. */
.sd-hoi-song {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 20px;
    width: 72px;
}

.sd-hoi-song i {
    flex: 1 1 0;
    min-width: 0;
    height: 14%;
    border-radius: 999px;
    background: currentColor;
    transition: height .07s linear;
}

/* Ba trạng thái, ba màu KHÁC HẲN nhau, kèm cả viền dải đổi theo. Tín test
   02/11/2026: "không biết đang nghe hay đang trả lời". Chỉ đổi mỗi chữ thì mắt
   đang nhìn chỗ khác sẽ không bắt được; phải đổi thứ nhìn thấy từ đuôi mắt. */
.sd-hoi-dai.sd-hoi-tt-nghe .sd-hoi-song { color: #ef4444; }
.sd-hoi-dai.sd-hoi-tt-nghe { border-color: rgba(239, 68, 68, .55); }

.sd-hoi-dai.sd-hoi-tt-cho .sd-hoi-song { color: #facc15; }
.sd-hoi-dai.sd-hoi-tt-cho { border-color: rgba(250, 204, 21, .55); }
.sd-hoi-dai.sd-hoi-tt-cho .sd-hoi-song i { animation: sd-hoi-nhay 1.1s ease-in-out infinite; }

/* Đang ĐỌC trả lời: xanh lá, sóng chạy thành làn - khác hẳn cột đứng yên của
   lúc chờ, và khác hẳn sóng giật theo giọng của lúc nghe. */
.sd-hoi-dai.sd-hoi-tt-doc .sd-hoi-song { color: #22c55e; }
.sd-hoi-dai.sd-hoi-tt-doc { border-color: rgba(34, 197, 94, .55); }
.sd-hoi-dai.sd-hoi-tt-doc .sd-hoi-song i { animation: sd-hoi-song-chay .9s ease-in-out infinite; }

/* Người đang nói: sóng sáng hẳn lên. CHỈ có nghĩa lúc đang nghe. */
.sd-hoi-dai.sd-hoi-nguoi-noi .sd-hoi-song { color: #f87171; }

@keyframes sd-hoi-nhay {
    0%, 100% { opacity: .3; height: 14%; }
    50% { opacity: 1; height: 34%; }
}

@keyframes sd-hoi-song-chay {
    0%, 100% { height: 16%; }
    50% { height: 86%; }
}

/* Người tắt hiệu ứng chuyển động thì KHÔNG chạy sóng, nhưng vẫn phải phân biệt
   được trạng thái - nên giữ màu, chỉ bỏ phần động đậy. */
@media (prefers-reduced-motion: reduce) {
    .sd-hoi-song i { transition: none; animation: none !important; height: 40%; }
}

.sd-hoi-nhan {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-hoi-dung {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    padding: 4px 12px;
    cursor: pointer;
    font: inherit;
    background: #34363b;
    color: inherit;
}

.sd-hoi-dung:hover { filter: brightness(1.2); }

/* Ngắt lời: chỉ hiện lúc đang đọc. Một cú CHẠM chứ không phải nói chen vào -
   tất định, và không có rủi ro micro nghe thấy chính tiếng máy đọc. */
.sd-hoi-ngat {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    padding: 4px 12px;
    cursor: pointer;
    font: inherit;
    background: #22c55e;
    color: #06240f;
    font-weight: 600;
}

.sd-hoi-ngat:hover { filter: brightness(1.1); }

/* Nut trong o nhap: sang len khi dang bat, de nhin mot cai la biet che do con
   chay - dai trang thai co the bi cuon khuat tren man hinh hep. */
.sd-hoi-nut.sd-hoi-dang-bat { color: #ef4444; }