/* ========================================================= chatbot.css Styles for the chatbot widget. Link this in your page's : ========================================================= */ #cb-widget{ height:520px; margin:20px auto; display:flex; border:1px solid #dcd6c8; border-radius:10px; overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; color:#1b2430; background:#fff; } /* ---- Sidebar ---- */ #cb-sidebar{ width:200px; flex-shrink:0; background:#1b2430; color:#e8e6df; display:flex; flex-direction:column; padding:12px; } #cb-new-chat{ background:#000; color:#fff; border:none; border-radius:8px; padding:9px 10px; font-size:13px; cursor:pointer; margin-bottom:12px; text-align:left; } #cb-new-chat:hover{ background:#000; } #cb-history-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:4px; } .cb-history-item{ padding:8px 9px; border-radius:7px; font-size:12.5px; line-height:1.35; cursor:pointer; color:#c9c6ba; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cb-history-item:hover{ background:#000; color:#fff; } .cb-history-item.active{ background:#000; color:#fff; } /* ---- Main chat area ---- */ #cb-main{ flex:1; display:flex; flex-direction:column; padding:16px; min-width:0; } #cb-answer{ border:1px solid #dcd6c8; border-radius:10px; padding:16px; flex:1; overflow-y:auto; margin-bottom:10px; font-size:15px; line-height:1.5; } #cb-answer p{ margin:0 0 10px 0; } #cb-answer p:last-child{ margin-bottom:0; } #cb-placeholder{ color:#8a8577; font-style:italic; } .cb-q{ color:#000; font-weight:bold; } .cb-a{ color:#1b2430; } .cb-a h1, .cb-a h2, .cb-a h3{ margin:10px 0 6px 0; line-height:1.3; color:#1b2430; } .cb-a h1{ font-size:18px; } .cb-a h2{ font-size:16px; } .cb-a h3{ font-size:15px; } .cb-a p{ margin:0 0 8px 0; } .cb-a ul, .cb-a ol{ margin:0 0 8px 0; padding-left:20px; } .cb-a li{ margin-bottom:4px; } .cb-a strong{ color:#1b2430; } .cb-a p:last-child, .cb-a ul:last-child, .cb-a ol:last-child{ margin-bottom:0; } .cb-dots{ display:inline-flex; align-items:center; gap:4px; height:14px; } .cb-dots span{ width:6px; height:6px; border-radius:50%; background:#8a8577; animation:cb-bounce 1.1s infinite ease-in-out both; } .cb-dots span:nth-child(1){ animation-delay:-0.28s; } .cb-dots span:nth-child(2){ animation-delay:-0.14s; } .cb-dots span:nth-child(3){ animation-delay:0s; } @keyframes cb-bounce{ 0%, 80%, 100% { transform:scale(0.6); opacity:.5; } 40% { transform:scale(1); opacity:1; } } #cb-input{ width:100%; border:1px solid #dcd6c8; border-radius:10px; padding:10px 12px; font-size:14px; font-family:inherit; resize:vertical; color:#000; outline:none; box-sizing:border-box; } #cb-input:focus{ border-color:#2f6f5e; } #cb-send{ margin-top:8px; background:#000; color:#fff; border:none; border-radius:8px; padding:10px 20px; font-size:14px; cursor:pointer; align-self:flex-start; } #cb-send:hover{ background:#265c4e; } #cb-send:disabled{ opacity:.6; cursor:not-allowed; } @media (max-width:600px){ #cb-widget{ flex-direction:column; height:auto; max-width:94vw; } #cb-sidebar{ width:100%; flex-direction:row; overflow-x:auto; align-items:center; } #cb-new-chat{ margin-bottom:0; margin-right:8px; flex-shrink:0; } #cb-history-list{ flex-direction:row; } .cb-history-item{ white-space:nowrap; flex-shrink:0; } #cb-answer{ max-height:300px; } }