/**




 * Customer Support AI - Search Shortcode Styles




 * Version: 1.4.0




 * 




 * This file contains all the styles for the AI-powered search shortcode.




 * Use this file to customize the appearance of your search interface.




 */









/* ============================================




   CONTAINER & LAYOUT




   ============================================ */









.cs-ai-search-container {




    width: 100%;




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




}









/* Theme: Dark */




.cs-ai-search-container.cs-ai-theme-dark {




    background: #000000 !important;




    color: #ffffff !important;




}









/* Theme: Light */




.cs-ai-search-container.cs-ai-theme-light {




    background: #ffffff !important;




    color: #333333 !important;




}









/* Transparent Background Modifier - works with both themes */




.cs-ai-search-container.cs-ai-transparent-bg {




    background: transparent !important;




}









/* ============================================




   HEADER SECTION




   ============================================ */









.cs-ai-search-header {




    text-align: left;




    padding: 0 20px;




}









/* Main Title */




.cs-ai-search-title {




    font-size: 32px;




    font-weight: 600;




    margin: 0 0 10px 0;




    line-height: 1.3;




    text-align: left;




}









.cs-ai-search-container.cs-ai-theme-dark .cs-ai-search-title {




    color: #ffffff !important;




}









.cs-ai-search-container.cs-ai-theme-light .cs-ai-search-title {




    color: #000000 !important;




}









/* Subtitle - smaller and subtle */




.cs-ai-search-subtitle {




    font-size: 10px;




    margin: 0 0 20px 0;




    opacity: 0.8;




    line-height: 1.5;




    text-align: left;




}









.cs-ai-search-container.cs-ai-theme-dark .cs-ai-search-subtitle {




    color: #ffffff !important;




}









.cs-ai-search-container.cs-ai-theme-light .cs-ai-search-subtitle {




    color: #000000 !important;




}









/* ============================================




   SEARCH INPUT AREA




   ============================================ */









.cs-ai-search-box {




    padding: 0;




    max-width: 900px;




    margin: 0 0 10px 0;




}









/* Input Wrapper - with border */




.cs-ai-search-input-wrapper {




    position: relative;




    display: flex;




    align-items: center;




    border-radius: 50px;




    padding: 12px 20px;




    transition: all 0.3s ease;




}









.cs-ai-search-container.cs-ai-theme-dark .cs-ai-search-input-wrapper {




    background: #000000 !important;




    border: 1px solid #7E7E7E !important;




}









.cs-ai-search-container.cs-ai-theme-light .cs-ai-search-input-wrapper {




    background: #ffffff !important;




    border: 1px solid #d1d5da !important;




}









/* Remove focus effect on wrapper */




.cs-ai-search-input-wrapper:focus-within {




    box-shadow: none !important;




}









/* Input Field - NO border, NO outline, NO focus effects */




.cs-ai-search-input {




    flex: 1;




    border: none !important;




    outline: none !important;




    font-size: 16px;




    padding: 4px 20px;




    background: transparent;




    box-shadow: none !important;




    margin-bottom: 0 !important;




    border-radius: 50px !important;




    min-width: 0;




}









/* Remove ALL focus effects from the input field */




.cs-ai-search-input:focus {




    border: none !important;




    outline: none !important;




    box-shadow: none !important;




}









/* Remove focus-visible outline for all themes */




.cs-ai-search-input:focus-visible {




    outline: none !important;




    box-shadow: none !important;




}









/* Dark theme - black outline if browser forces one */




.cs-ai-search-container.cs-ai-theme-dark .cs-ai-search-input:focus-visible {




    outline: 1px solid #000000 !important;




}









/* Light theme - white outline to blend with background */




.cs-ai-search-container.cs-ai-theme-light .cs-ai-search-input:focus-visible {




    outline: white !important;




}









.cs-ai-search-container.cs-ai-theme-dark .cs-ai-search-input {




    color: #ffffff !important;




    background: #000000 !important;




}









.cs-ai-search-container.cs-ai-theme-light .cs-ai-search-input {




    color: #000000 !important;




    background: #ffffff !important;




}









.cs-ai-search-input::placeholder {




    opacity: 0.5;




}









.cs-ai-search-container.cs-ai-theme-dark .cs-ai-search-input::placeholder {




    color: #999999;




}









.cs-ai-search-container.cs-ai-theme-light .cs-ai-search-input::placeholder {




    color: #666666;




}









#cs-ai-search-1-input {




  padding-left: 20px;




}









/* ============================================




   SEARCH BUTTON (Icon)




   ============================================ */









.cs-ai-search-submit {




    background: #7E7E7E !important;




    color: white !important;




    border: none !important;




    width: 44px !important;




    height: 44px !important;




    min-width: 44px !important;




    min-height: 44px !important;




    border-radius: 50% !important;




    cursor: pointer !important;




    display: flex !important;




    align-items: center !important;




    justify-content: center !important;




    transition: all 0.2s !important;




    flex-shrink: 0 !important;




    padding: 0 !important;




    margin: 0 !important;




}









.cs-ai-search-submit:hover {




    transform: scale(1.05);




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




    opacity: 0.9;




}









.cs-ai-search-submit:active {




    transform: scale(0.95);




}









.cs-ai-search-submit svg {




    width: 20px !important;




    height: 20px !important;




}









/* ============================================




   RESULTS AREA




   ============================================ */









.cs-ai-search-results {




    padding: 30px 20px;




    max-width: 900px;




    margin: 0;




    min-height: 200px;




    text-align: left;




}









.cs-ai-search-container.cs-ai-theme-dark .cs-ai-search-results {




    border: 1px dashed #7E7E7E;




    border-radius: 8px;




}









.cs-ai-search-container.cs-ai-theme-light .cs-ai-search-results {




    border: 1px dashed #d1d5da;




    border-radius: 8px;




}









/* Empty state placeholder */




.cs-ai-search-results:empty::before {




    content: '...';




    display: block;




    opacity: 0.5;




    font-size: 14px;




}









/* ============================================




   RESULT ITEMS




   ============================================ */









.cs-ai-result-item {




    padding: 20px;




    margin-bottom: 15px;




    border-radius: 12px;




    animation: resultFadeIn 0.3s ease;




    text-align: left;




}









.cs-ai-search-container.cs-ai-theme-dark .cs-ai-result-item {




    background: #1a1a1a !important;




    border: 1px solid #333333 !important;




    color: #ffffff !important;




}









.cs-ai-search-container.cs-ai-theme-light .cs-ai-result-item {




    background: #f8f9fa !important;




    border: 1px solid #e1e4e8 !important;




    color: #000000 !important;




}









/* Transparent background modifier for result items */




.cs-ai-search-container.cs-ai-transparent-bg .cs-ai-result-item {




    background: rgba(248, 249, 250, 0.95);




}









.cs-ai-search-container.cs-ai-transparent-bg.cs-ai-theme-dark .cs-ai-result-item {




    background: rgba(26, 26, 26, 0.95);




}









@keyframes resultFadeIn {




    from {




        opacity: 0;




        transform: translateY(10px);




    }




    to {




        opacity: 1;




        transform: translateY(0);




    }




}









/* Result Content - LEFT ALIGNED */




.cs-ai-result-content {




    line-height: 1.6;




    margin-bottom: 15px;




    text-align: left;




}









.cs-ai-search-container.cs-ai-theme-dark .cs-ai-result-content {




    color: #ffffff !important;




}









.cs-ai-search-container.cs-ai-theme-light .cs-ai-result-content {




    color: #000000 !important;




}









.cs-ai-result-content strong {




    font-weight: 600;




}









.cs-ai-result-content p {




    text-align: left;




    margin: 0 0 10px 0;




}









/* ============================================




   RESULT LINKS




   ============================================ */









.cs-ai-result-links {




    display: flex;




    flex-wrap: wrap;




    gap: 10px;




    margin-top: 15px;




    padding-top: 15px;




    border-top: 1px solid;




}









.cs-ai-search-container.cs-ai-theme-dark .cs-ai-result-links {




    border-top-color: #333333;




}









.cs-ai-search-container.cs-ai-theme-light .cs-ai-result-links {




    border-top-color: #e1e4e8;




}









.cs-ai-result-link {




    display: inline-flex;




    align-items: center;




    gap: 5px;




    padding: 6px 14px;




    border-radius: 20px;




    font-size: 13px;




    text-decoration: none;




    transition: all 0.2s;




}









.cs-ai-search-container.cs-ai-theme-dark .cs-ai-result-link {




    background: #333333 !important;




    color: #ffffff !important;




}









.cs-ai-search-container.cs-ai-theme-light .cs-ai-result-link {




    background: #e1e4e8 !important;




    color: #333333 !important;




}









.cs-ai-result-link:hover {




    transform: translateX(3px);




    opacity: 0.8;




}









/* ============================================




   TYPING INDICATOR




   ============================================ */









.cs-ai-typing-indicator {




    display: flex;




    align-items: center;




    gap: 8px;




    padding: 20px;




}









.cs-ai-typing-indicator span {




    width: 10px;




    height: 10px;




    border-radius: 50%;




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




}









.cs-ai-search-container.cs-ai-theme-dark .cs-ai-typing-indicator span {




    background: #666666 !important;




}









.cs-ai-search-container.cs-ai-theme-light .cs-ai-typing-indicator span {




    background: #999999 !important;




}









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




    animation-delay: -0.32s;




}









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




    animation-delay: -0.16s;




}









@keyframes typingBounce {




    0%, 80%, 100% {




        transform: scale(0);




    }




    40% {




        transform: scale(1);




    }




}









/* ============================================




   RESPONSIVE DESIGN




   ============================================ */









@media (max-width: 768px) {




    .cs-ai-search-header {




        padding: 0 15px;




    }




    




    .cs-ai-search-title {




        font-size: 24px;




    }




    




    .cs-ai-search-subtitle {




        font-size: 9px;




    }




    




    .cs-ai-search-box {




        padding: 0 15px;




        max-width: 100%;




    }




    




    .cs-ai-search-input-wrapper {




        padding: 8px 15px;




    }




    




    .cs-ai-search-input {




        font-size: 14px;




        padding: 4px 16px;




        min-width: 0;




    }




    




    .cs-ai-search-submit {




        width: 40px !important;




        height: 40px !important;




        min-width: 40px !important;




        min-height: 40px !important;




    }




    




    .cs-ai-search-submit svg {




        width: 18px !important;




        height: 18px !important;




    }




    




    .cs-ai-search-results {




        padding: 20px 15px;




    }




}