/* /Pages/HoSoGiay/HSB12/HSB12Display.razor.rz.scp.css */
/* Cố định cột checkbox */
[b-g1oddqgr18] .mud-table-root .mud-table-cell:first-child,
[b-g1oddqgr18] .mud-table-root .mud-table-head-cell:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    background-color: white !important;
}

/* Cột STT */
[b-g1oddqgr18] .mud-table-cell-sticky-left:nth-child(2),
[b-g1oddqgr18] .mud-table-head-cell-sticky-left:nth-child(2) {
    left: 50px !important;
    z-index: 4 !important;
}

/* Cột Họ và tên */
[b-g1oddqgr18] .mud-table-cell-sticky-left:nth-child(3),
[b-g1oddqgr18] .mud-table-head-cell-sticky-left:nth-child(3) {
    left: 130px !important;
    z-index: 3 !important;
}
/* /Shared/ChatBotAIAssistant.razor.rz.scp.css */
/* ── Container ── */
.va-container[b-8rk2o7uni8] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* ── Panel ── */
.va-panel[b-8rk2o7uni8] {
    width: 340px;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
}

/* ── Header ── */
.va-header[b-8rk2o7uni8] {
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-darken));
    padding: 12px 16px;
}

/* ── Status Dot ── */
.va-status-dot[b-8rk2o7uni8] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.va-online[b-8rk2o7uni8] {
    background: #4caf50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.8);
}

.va-listening[b-8rk2o7uni8] {
    background: #f44336;
    animation: vaBlink-b-8rk2o7uni8 1s ease-in-out infinite;
}

/* ── Chat History ── */
.va-chat-history[b-8rk2o7uni8] {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fafafa;
    scroll-behavior: smooth;
}

/* ── Chat Bubbles ── */
.va-bubble-ai[b-8rk2o7uni8] {
    max-width: 85%;
    background: var(--mud-palette-primary-lighten) !important;
    border-radius: 0 12px 12px 12px !important;
}

.va-bubble-user[b-8rk2o7uni8] {
    max-width: 85%;
    background: #e8e8e8 !important;
    border-radius: 12px 0 12px 12px !important;
}

/* ── Typing Indicator ── */
.va-typing[b-8rk2o7uni8] {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 2px 0;
    min-width: 32px;
}

.va-typing span[b-8rk2o7uni8] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    animation: vaTyping-b-8rk2o7uni8 0.9s ease-in-out infinite;
}

.va-typing span:nth-child(2)[b-8rk2o7uni8] {
    animation-delay: 0.2s;
}

.va-typing span:nth-child(3)[b-8rk2o7uni8] {
    animation-delay: 0.4s;
}

/* ── Waveform ── */
.va-waveform[b-8rk2o7uni8] {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 28px;
}

.va-wave-bar[b-8rk2o7uni8] {
    width: 4px;
    height: 6px;
    background: var(--mud-palette-error);
    border-radius: 3px;
    animation: vaWave-b-8rk2o7uni8 0.6s ease-in-out infinite;
}

.va-wave-bar:nth-child(1)[b-8rk2o7uni8] { animation-delay: 0s;    }
.va-wave-bar:nth-child(2)[b-8rk2o7uni8] { animation-delay: 0.1s;  }
.va-wave-bar:nth-child(3)[b-8rk2o7uni8] { animation-delay: 0.2s;  }
.va-wave-bar:nth-child(4)[b-8rk2o7uni8] { animation-delay: 0.1s;  }
.va-wave-bar:nth-child(5)[b-8rk2o7uni8] { animation-delay: 0s;    }

/* ── FAB Button ── */
.va-fab[b-8rk2o7uni8] {
    border-radius: 50% !important;
    transition: all 0.2s ease;
}

.va-fab-active[b-8rk2o7uni8] {
    animation: vaFabPulse-b-8rk2o7uni8 1.2s ease-out infinite !important;
}

.va-fab-spin .mud-button-icon-start[b-8rk2o7uni8] {
    animation: vaSpin-b-8rk2o7uni8 1s linear infinite;
    display: inline-flex;
}

/* ── Keyframes ── */
@keyframes vaWave-b-8rk2o7uni8 {
    0%, 100% { height: 6px; }
    50%       { height: 22px; }
}

@keyframes vaTyping-b-8rk2o7uni8 {
    0%, 100% { transform: translateY(0);    }
    50%      { transform: translateY(-6px); }
}

@keyframes vaFabPulse-b-8rk2o7uni8 {
    0%   { box-shadow: 0 0 0 0   rgba(244, 67, 54, 0.7); }
    70%  { box-shadow: 0 0 0 12px rgba(244, 67, 54, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(244, 67, 54, 0);    }
}

@keyframes vaBlink-b-8rk2o7uni8 {
    0%, 100% { opacity: 1;   }
    50%      { opacity: 0.3; }
}

@keyframes vaSpin-b-8rk2o7uni8 {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}