61 lines
3.5 KiB
CSS
61 lines
3.5 KiB
CSS
.ai-chatbot-launcher {
|
|
position: fixed;
|
|
right: 15px;
|
|
bottom: 126px;
|
|
width: 52px;
|
|
height: 52px;
|
|
z-index: 100000;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--site-primary, #1977cc), #0dcaf0);
|
|
color: #fff;
|
|
box-shadow: 0 12px 30px rgba(25, 119, 204, .35);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform .2s ease, box-shadow .2s ease;
|
|
}
|
|
.ai-chatbot-launcher:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(25,119,204,.45); }
|
|
.ai-chatbot-launcher i { font-size: 1.45rem; }
|
|
.ai-chatbot-panel {
|
|
position: fixed;
|
|
right: 18px;
|
|
bottom: 190px;
|
|
width: min(390px, calc(100vw - 32px));
|
|
max-height: min(680px, calc(100vh - 120px));
|
|
z-index: 100001;
|
|
background: #fff;
|
|
border-radius: 22px;
|
|
overflow: hidden;
|
|
box-shadow: 0 24px 80px rgba(16,24,40,.28);
|
|
border: 1px solid rgba(15, 23, 42, .08);
|
|
display: none;
|
|
}
|
|
.ai-chatbot-panel.open { display: flex; flex-direction: column; }
|
|
.ai-chatbot-header { padding: 14px 16px; color:#fff; background: linear-gradient(135deg, var(--site-primary, #1977cc), #0d6efd); display:flex; align-items:center; justify-content:space-between; gap:12px; }
|
|
.ai-chatbot-title { font-weight: 700; line-height: 1.1; }
|
|
.ai-chatbot-subtitle { font-size: .78rem; opacity: .88; }
|
|
.ai-chatbot-close { border:0; background: rgba(255,255,255,.16); color:#fff; border-radius: 12px; width:34px; height:34px; }
|
|
.ai-chatbot-body { padding: 14px; overflow-y:auto; background: #f6f9fd; min-height: 300px; }
|
|
.ai-chatbot-message { display:flex; margin-bottom: 10px; }
|
|
.ai-chatbot-message.user { justify-content:flex-end; }
|
|
.ai-chatbot-bubble { max-width: 86%; border-radius: 18px; padding: 10px 12px; white-space: pre-wrap; line-height:1.35; font-size:.93rem; }
|
|
.ai-chatbot-message.bot .ai-chatbot-bubble { background: #fff; color:#1f2937; box-shadow: 0 4px 14px rgba(15,23,42,.06); border-bottom-left-radius: 6px; }
|
|
.ai-chatbot-message.user .ai-chatbot-bubble { background: var(--site-primary, #1977cc); color:#fff; border-bottom-right-radius: 6px; }
|
|
.ai-chatbot-actions { display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 12px; }
|
|
.ai-chatbot-action { border:1px solid rgba(25,119,204,.2); background:#fff; color: var(--site-primary, #1977cc); border-radius:999px; padding:7px 10px; font-size:.85rem; }
|
|
.ai-chatbot-footer { padding: 10px; background:#fff; border-top:1px solid rgba(15,23,42,.08); }
|
|
.ai-chatbot-form { display:flex; gap:8px; }
|
|
.ai-chatbot-input { flex:1; border:1px solid #dbe4f0; border-radius: 16px; padding: 10px 12px; outline: none; }
|
|
.ai-chatbot-send { border:0; background: var(--site-primary, #1977cc); color:#fff; border-radius: 16px; padding:0 14px; }
|
|
.ai-booking-card { background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:18px; padding:12px; margin: 8px 0 12px; box-shadow: 0 4px 14px rgba(15,23,42,.05); }
|
|
.ai-booking-card label { font-size:.78rem; font-weight:700; color:#475569; margin-bottom:4px; }
|
|
.ai-booking-card .form-control, .ai-booking-card .form-select { border-radius:12px; font-size:.9rem; }
|
|
.ai-slot-list { display:flex; flex-wrap:wrap; gap:6px; }
|
|
.ai-slot-btn { border:1px solid #dbe4f0; background:#fff; border-radius:999px; padding:6px 10px; font-size:.84rem; }
|
|
.ai-slot-btn.active { background: var(--site-primary,#1977cc); color:#fff; border-color: var(--site-primary,#1977cc); }
|
|
@media (max-width: 575px) {
|
|
.ai-chatbot-launcher { right: 15px; bottom: 118px; width:48px; height:48px; }
|
|
.ai-chatbot-panel { right: 10px; bottom: 178px; width: calc(100vw - 20px); }
|
|
}
|