/* Customer Support AI Chat Widget Styles */















#cs-ai-chat-widget {







    position: fixed;







    z-index: 999999;







    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;







}















#cs-ai-chat-widget.cs-ai-position-bottom-right {







    bottom: 20px;







    right: 20px;







}















#cs-ai-chat-widget.cs-ai-position-bottom-left {







    bottom: 20px;







    left: 20px;







}















#cs-ai-toggle {







    background: var(--cs-ai-primary-color);







    color: white;







    border: none;







    padding: 14px 24px;







    border-radius: 50px;







    cursor: pointer;







    font-size: 16px;







    font-weight: 500;







    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);







    transition: all 0.3s ease;







    display: flex;







    align-items: center;







    gap: 8px;







}















#cs-ai-toggle:hover {







    transform: translateY(-2px);







    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);







}















#cs-ai-toggle:active {







    transform: translateY(0);







}















#cs-ai-window {







    position: fixed;







    width: 380px;







    height: 600px;







    max-height: calc(100vh - 100px);







    background: white;







    border-radius: 12px;







    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);







    display: flex;







    flex-direction: column;







    overflow: hidden;







}















.cs-ai-position-bottom-right #cs-ai-window {







    bottom: 90px;







    right: 20px;







}















.cs-ai-position-bottom-left #cs-ai-window {







    bottom: 90px;







    left: 20px;







}















#cs-ai-header {







    background: var(--cs-ai-primary-color);







    color: white;







    padding: 3px 8px;







    display: flex;







    justify-content: space-between;







    align-items: center;







    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);







}















.cs-ai-header-content {







    display: flex;







    align-items: center;







    gap: 5px;







}















.cs-ai-bot-icon {







    font-size: 14px;







    line-height: 1;







}















#cs-ai-header h4 {







    margin: 0;







    font-size: 12px;







    font-weight: 600;







    line-height: 1.2;







    color: var(--cs-ai-title-color, white);







}















.cs-ai-subtitle {







    margin: 0;







    font-size: 7px;







    opacity: 0.95;







    line-height: 1;







    color: var(--cs-ai-subtitle-color, rgba(255, 255, 255, 0.9));







}















#cs-ai-close {







    background: none;







    border: none;







    color: white;







    font-size: 14px;







    cursor: pointer;







    padding: 0;







    width: 18px;







    height: 18px;







    display: flex;







    align-items: center;







    justify-content: center;







    border-radius: 4px;







    transition: background 0.2s;







    line-height: 1;







}















#cs-ai-close:hover {







    background: rgba(255, 255, 255, 0.1);







}















#cs-ai-messages {







    flex: 1;







    overflow-y: auto;







    padding: 10px;







    background: #f8f9fa;







}















.cs-ai-message {







    margin-bottom: 10px;







    padding: 10px 14px;







    border-radius: 12px;







    max-width: 85%;







    word-wrap: break-word;







    animation: messageSlideIn 0.3s ease;







    line-height: 1.5;







}















.cs-ai-message strong {







    font-weight: 600;







    color: inherit;







}















.cs-ai-message em {







    font-style: italic;







}















.cs-ai-message br {







    display: block;







    content: "";







    margin: 8px 0;







}















@keyframes messageSlideIn {







    from {







        opacity: 0;







        transform: translateY(10px);







    }







    to {







        opacity: 1;







        transform: translateY(0);







    }







}















.cs-ai-message-user {







    background: var(--cs-ai-primary-color);







    color: white;







    margin-left: auto;







    border-bottom-right-radius: 4px;







}















.cs-ai-message-assistant {







    background: white;







    color: #333;







    border: 1px solid #e1e4e8;







    border-bottom-left-radius: 4px;







}















.cs-ai-message-error {







    background: #fee;







    color: #c00;







    border: 1px solid #fcc;







    font-size: 14px;







}















.cs-ai-typing {







    display: flex;







    align-items: center;







    gap: 4px;







    padding: 12px 16px;







}















.cs-ai-typing span {







    width: 8px;







    height: 8px;







    background: #999;







    border-radius: 50%;







    animation: typingBounce 1.4s infinite ease-in-out both;







}















.cs-ai-typing span:nth-child(1) {







    animation-delay: -0.32s;







}















.cs-ai-typing span:nth-child(2) {







    animation-delay: -0.16s;







}















@keyframes typingBounce {







    0%, 80%, 100% {







        transform: scale(0);







    }







    40% {







        transform: scale(1);







    }







}















#cs-ai-input-area {







    display: flex;







    padding: 10px;







    background: white;







    border-top: 1px solid #e1e4e8;







    gap: 8px;







}















#cs-ai-input {







    flex: 1;







    padding: 12px 16px;







    border: 1px solid #d1d5da;







    border-radius: 24px;







    font-size: 14px;







    font-family: inherit;







    outline: none;







    transition: border-color 0.2s;







}















#cs-ai-input:focus {







    border-color: var(--cs-ai-primary-color);







}















#cs-ai-send {







    background: var(--cs-ai-primary-color);







    color: white;







    border: none;







    width: 44px;







    height: 44px;







    border-radius: 50%;







    cursor: pointer;







    display: flex;







    align-items: center;







    justify-content: center;







    transition: all 0.2s;







    flex-shrink: 0;







}















#cs-ai-send:hover {







    transform: scale(1.05);







    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);







}















#cs-ai-send:active {







    transform: scale(0.95);







}















#cs-ai-send svg {







    transform: translateX(1px);







}















/* Mobile Responsive */







@media (max-width: 768px) {







    #cs-ai-window {







        width: calc(100vw - 20px);







        height: calc(100vh - 100px);







        left: 10px !important;







        right: 10px !important;







        bottom: 10px !important;







    }







    







    #cs-ai-toggle {







        padding: 12px 20px;







        font-size: 14px;







    }







}















/* Scrollbar Styling */







#cs-ai-messages::-webkit-scrollbar {







    width: 6px;







}















#cs-ai-messages::-webkit-scrollbar-track {







    background: #f1f1f1;







}















#cs-ai-messages::-webkit-scrollbar-thumb {







    background: #ccc;







    border-radius: 3px;







}















#cs-ai-messages::-webkit-scrollbar-thumb:hover {







    background: #999;







}















/* Shortcode Styling */







.cs-ai-shortcode-container {







    width: 100%;







}















.cs-ai-shortcode-window {







    display: flex;







    flex-direction: column;







    background: white;







    border-radius: 12px;







    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);







    overflow: hidden;







}















.cs-ai-shortcode-window #cs-ai-header {







    background: var(--cs-ai-primary-color);







    color: white;







    padding: 3px 8px;







    display: flex;







    justify-content: space-between;







    align-items: center;







    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);







}















.cs-ai-shortcode-window .cs-ai-header-content {







    display: flex;







    align-items: center;







    gap: 5px;







}















.cs-ai-shortcode-window .cs-ai-bot-icon {







    font-size: 14px;







    line-height: 1;







}















.cs-ai-shortcode-window #cs-ai-header h4 {







    margin: 0;







    font-size: 12px;







    font-weight: 600;







    line-height: 1.2;







    color: var(--cs-ai-title-color, white);







}















.cs-ai-shortcode-window .cs-ai-subtitle {







    margin: 0;







    font-size: 7px;







    opacity: 0.95;







    line-height: 1;







    color: var(--cs-ai-subtitle-color, rgba(255, 255, 255, 0.9));







}















.cs-ai-shortcode-window .cs-ai-messages {







    flex: 1;







    overflow-y: auto;







    padding: 10px;







    background: #f8f9fa;







}















.cs-ai-shortcode-window #cs-ai-input-area {







    display: flex;







    padding: 10px;







    background: white;







    border-top: 1px solid #e1e4e8;







    gap: 8px;







}















.cs-ai-shortcode-window .cs-ai-shortcode-input {







    flex: 1;







    padding: 12px 16px;







    border: 1px solid #d1d5da;







    border-radius: 24px;







    font-size: 14px;







    font-family: inherit;







    outline: none;







    transition: border-color 0.2s;







}















.cs-ai-shortcode-window .cs-ai-shortcode-input:focus {







    border-color: var(--cs-ai-primary-color);







}















.cs-ai-shortcode-window .cs-ai-shortcode-send {







    background: var(--cs-ai-primary-color);







    color: white;







    border: none;







    width: 44px;







    height: 44px;







    border-radius: 50%;







    cursor: pointer;







    display: flex;







    align-items: center;







    justify-content: center;







    transition: all 0.2s;







    flex-shrink: 0;







}















.cs-ai-shortcode-window .cs-ai-shortcode-send:hover {







    transform: scale(1.05);







    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);







}















.cs-ai-shortcode-window .cs-ai-shortcode-send:active {







    transform: scale(0.95);







}















.cs-ai-shortcode-window .cs-ai-shortcode-send svg {







    transform: translateX(1px);







}