/* Trợ lý AI đặt lịch – nút nổi đặt phía trên nút chat nhân viên để không chồng nhau. */
.ai-widget { position: fixed; right: 30px; bottom: 104px; z-index: 1001; font-family: inherit; }

.ai-fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    border: none;
    border-radius: 999px;
    background: var(--customer-primary, linear-gradient(135deg, #C9A961, #a8843d));
    color: #fff;
    font: inherit;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(168, 132, 61, 0.35);
    cursor: pointer;
}

.ai-fab:focus-visible, .ai-icon-btn:focus-visible, .ai-btn:focus-visible { outline: 3px solid #3D5A45; outline-offset: 2px; }
.ai-widget.is-open .ai-fab { display: none; }

.ai-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: min(600px, calc(100vh - 140px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.ai-panel[hidden] { display: none; }

.ai-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 14px 14px 18px;
    background: linear-gradient(135deg, #3D5A45, #25392B);
    color: #fff;
}

.ai-head div { flex: 1; display: flex; flex-direction: column; }
.ai-head small { opacity: 0.8; font-size: 12px; }

.ai-icon-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
}

.ai-log { flex: 1; overflow-y: auto; padding: 14px; background: #faf8f4; display: flex; flex-direction: column; gap: 10px; }

.ai-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.ai-model { align-self: flex-start; background: #fff; border: 1px solid #ece5d8; border-bottom-left-radius: 4px; }
.ai-user { align-self: flex-end; background: var(--customer-primary, #C9A961); color: #fff; border-bottom-right-radius: 4px; }
.ai-bullet { display: block; padding-left: 4px; }
.ai-error { color: #b42318; }
.ai-progress { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: #566253; }

.ai-typing { display: inline-flex; gap: 4px; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: #C9A961; animation: ai-dot 1s infinite ease-in-out; }
.ai-typing i:nth-child(2) { animation-delay: 0.15s; }
.ai-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.ai-draft { min-width: 240px; }
.ai-draft-title { margin: 0 0 6px; font-weight: 700; color: #3D5A45; }
.ai-draft ul { list-style: none; margin: 0 0 6px; padding: 0; }
.ai-draft li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed #ece5d8; }
.ai-draft p { margin: 4px 0; }
.ai-draft-total { font-size: 15px; }
.ai-draft-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ai-draft-status { font-size: 13px; color: #3D5A45; }

.ai-btn {
    min-height: 44px;
    padding: 0 16px;
    border: 1.5px solid #d8c9a3;
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ai-btn-primary { border-color: #3D5A45; background: #3D5A45; color: #fff; flex: 1; }
.ai-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ai-quick { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 0; background: #fff; scrollbar-width: none; }
.ai-quick button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #e2d9c8;
    border-radius: 999px;
    background: #fbf7ee;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.ai-input { display: flex; gap: 8px; padding: 10px 12px; background: #fff; }
.ai-input input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1.5px solid #e2d9c8; border-radius: 999px; font: inherit; }
.ai-input input:focus { outline: none; border-color: var(--customer-primary, #C9A961); }
.ai-input button { width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--customer-primary, #C9A961); color: #fff; cursor: pointer; }
.ai-note { margin: 0; padding: 0 14px 10px; background: #fff; font-size: 11px; color: var(--customer-muted, #9a9182); }

@media (max-width: 768px) {
    .ai-widget { right: 16px; bottom: 88px; }
    .ai-fab span { display: none; }
    .ai-fab { width: 52px; height: 52px; padding: 0; justify-content: center; font-size: 20px; }
    .ai-widget.is-open { right: 0; bottom: 0; left: 0; top: 0; }
    .ai-panel { position: fixed; inset: 0; width: auto; max-width: none; height: 100%; border-radius: 0; }
}

body.dark-theme .ai-panel, body.dark-theme .ai-quick, body.dark-theme .ai-input, body.dark-theme .ai-note { background: #1f1d1a; color: #f1ece2; }
body.dark-theme .ai-log { background: #171512; }
body.dark-theme .ai-model { background: #2a2723; border-color: #4a4337; color: #f1ece2; }