/**
 * Public styles for Smart Chat
 *
 * @link       https://example.com
 * @since      1.0.0
 *
 * @package    Smart_Chat
 * @subpackage Smart_Chat/public/css
 */

/* Chat Container */
.smart-chat-container {
    position: fixed;
    z-index: 999999;
    bottom: 20px;
}

.smart-chat-container.right {
    right: 20px;
}

.smart-chat-container.left {
    left: 20px;
}

/* Chat Button */
.smart-chat-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #4a6cf7;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.smart-chat-button:hover {
    transform: scale(1.05);
}

.smart-chat-button.open {
    transform: scale(0.9);
}

.smart-chat-button-custom-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Floating button animation styles. Paused while the chat window is open
   (.open is added to the button then) so it doesn't keep animating behind
   the widget on mobile, or distract once the customer is already engaged. */
.smart-chat-btn-style-bounce:not(.open) {
    animation: smart-chat-btn-bounce 2.4s ease-in-out infinite;
}

.smart-chat-btn-style-pulse:not(.open) {
    animation: smart-chat-btn-pulse 2s infinite;
}

.smart-chat-btn-style-wiggle:not(.open) {
    animation: smart-chat-btn-wiggle 3.2s ease-in-out infinite;
}

@keyframes smart-chat-btn-bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
}

@keyframes smart-chat-btn-pulse {
    0% { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(74, 108, 247, 0.6); }
    70% { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 0 14px rgba(74, 108, 247, 0); }
    100% { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(74, 108, 247, 0); }
}

@keyframes smart-chat-btn-wiggle {
    0%, 92%, 100% { transform: rotate(0deg); }
    94% { transform: rotate(-10deg); }
    96% { transform: rotate(10deg); }
    98% { transform: rotate(-6deg); }
}

/* Respect users who've asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    .smart-chat-btn-style-bounce,
    .smart-chat-btn-style-pulse,
    .smart-chat-btn-style-wiggle {
        animation: none;
    }
}

/* Chat Window */
.smart-chat-window {
    position: absolute;
    bottom: 80px;
    width: 350px;
    height: 500px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    overflow: hidden;
}

.smart-chat-window.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.smart-chat-container.right .smart-chat-window {
    right: 0;
}

.smart-chat-container.left .smart-chat-window {
    left: 0;
}

/* Chat Header */
.smart-chat-header {
    background-color: #4a6cf7;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.smart-chat-title {
    font-weight: bold;
    font-size: 16px;
}

.smart-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.smart-chat-new,
.smart-chat-close {
    cursor: pointer;
    opacity: 0.8;
    display: flex;
    align-items: center;
}

.smart-chat-new:hover,
.smart-chat-close:hover {
    opacity: 1;
}

/* Chat Messages */
.smart-chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #f9f9f9;
}

.smart-chat-message {
    max-width: 80%;
    padding: 12px 15px;
    border-radius: 20px;
    margin-bottom: 15px;
    word-wrap: break-word;
    position: relative;
    clear: both;
}

.smart-chat-message.user-message {
    background-color: #e6f2ff;
    color: #333;
    float: right;
    border-bottom-right-radius: 5px;
}

.smart-chat-message.bot-message {
    background-color: #f5f8ff;
    color: #333;
    float: left;
    border-bottom-left-radius: 5px;
}

/* Chat Input */
.smart-chat-input-container {
    padding: 15px;
    display: flex;
    border-top: 1px solid #eee;
    background-color: white;
}

.smart-chat-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    outline: none;
    /* 16px minimum stops iOS Safari from auto-zooming the page on focus */
    font-size: 16px;
    transition: border-color 0.3s;
}

.smart-chat-input:focus {
    border-color: #4a6cf7;
}

.smart-chat-input.error {
    border-color: #dc3545;
}

.smart-chat-send {
    background-color: #4a6cf7;
    color: white;
    border: none;
    margin-left: 10px;
    padding: 0 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.smart-chat-send:hover {
    background-color: #3451c6;
}

/* Typing Indicator */
.smart-chat-typing {
    display: none;
    padding: 12px 15px;
    background-color: #f5f8ff;
    color: #333;
    border-radius: 20px;
    float: left;
    max-width: 80px;
    margin-bottom: 15px;
    border-bottom-left-radius: 5px;
    clear: both;
}

.typing-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #999;
    border-radius: 50%;
    margin-right: 4px;
    animation: typing-dot 1.5s infinite ease-in-out;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
    margin-right: 0;
}

@keyframes typing-dot {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
}

/* Options */
.smart-chat-options {
    clear: both;
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chat-option {
    display: inline-block;
    padding: 8px 12px;
    background-color: #f0f4ff;
    border: 1px solid #d8e0fd;
    border-radius: 15px;
    cursor: pointer;
    font-size: 13px;
    color: #4a6cf7;
    transition: all 0.2s;
}

.chat-option:hover {
    background-color: #e0e7ff;
    border-color: #4a6cf7;
}

/* Return to Flow */
.smart-chat-return-btn-wrap {
    clear: both;
    width: 100%;
    margin-bottom: 15px;
}

.smart-chat-return-btn {
    display: inline-block;
    padding: 8px 14px;
    background-color: #fff;
    border: 1px solid #4a6cf7;
    border-radius: 15px;
    cursor: pointer;
    font-size: 13px;
    color: #4a6cf7;
    font-weight: 600;
    transition: all 0.2s;
}

.smart-chat-return-btn:hover {
    background-color: #4a6cf7;
    color: #fff;
}

/* Input error */
.input-error {
    position: absolute;
    bottom: 100%;
    left: 15px;
    right: 15px;
    background-color: #f8d7da;
    color: #721c24;
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 5px;
    font-size: 12px;
    text-align: center;
}

/* Product Displays */
.product-card, .product-item {
    background-color: white;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    clear: both;
    cursor: pointer;
    transition: all 0.2s;
}

.product-card:hover, .product-item:hover {
    border-color: #4a6cf7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-name {
    font-weight: bold;
    margin-bottom: 5px;
}

.product-price {
    color: #4a6cf7;
    margin-bottom: 5px;
}

.product-description {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.product-link {
    display: inline-block;
    color: #4a6cf7;
    font-size: 13px;
    text-decoration: none;
}

.product-link:hover {
    text-decoration: underline;
}

.products-list {
    width: 100%;
    clear: both;
}

.categories-list {
    width: 100%;
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.category-item {
    margin-bottom: 0;
}

.error-message {
    width: 100%;
    clear: both;
    color: #721c24;
    background-color: #f8d7da;
    padding: 10px;
    border-radius: 5px;
    font-size: 13px;
    margin-bottom: 15px;
    text-align: center;
}

.smart-chat-ai-sources {
    clear: both;
    width: 100%;
    font-size: 11px;
    color: #888;
    margin: -8px 0 15px 5px;
}

.smart-chat-ai-sources-label {
    font-weight: 600;
}

.smart-chat-ai-sources a {
    color: #4a6cf7;
    text-decoration: none;
}

.smart-chat-ai-sources a:hover {
    text-decoration: underline;
}

/* Responsive Adjustments */

/* Tablets: narrower window, keeps its floating-card layout */
@media screen and (max-width: 768px) and (min-width: 601px) {
    .smart-chat-window {
        width: 320px;
        height: 480px;
    }
}

/* Phones: chat takes over the full viewport instead of a small floating
   card, which is unusable at phone widths (spec: mobile responsive) */
@media screen and (max-width: 600px) {
    .smart-chat-container.right,
    .smart-chat-container.left {
        right: 0;
        left: 0;
        bottom: 0;
    }

    .smart-chat-window {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        /* env() falls back to 0 on devices without a safe-area inset */
        height: calc(100% - env(safe-area-inset-bottom, 0px));
        border-radius: 0;
    }

    .smart-chat-header {
        border-radius: 0;
        padding-top: calc(15px + env(safe-area-inset-top, 0px));
    }

    .smart-chat-input-container {
        padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    }

    .smart-chat-button {
        width: 54px;
        height: 54px;
        right: 10px;
        bottom: 10px;
        position: fixed;
    }

    .smart-chat-container.left .smart-chat-button {
        left: 10px;
        right: auto;
    }

    /* Hide the floating launcher button while the full-screen window is
       open so it doesn't float on top of the chat. */
    .smart-chat-window.open ~ .smart-chat-button,
    .smart-chat-button.open {
        display: none;
    }

    .smart-chat-message {
        max-width: 90%;
    }
}

/* Prevents the page behind the chat from scrolling while it's open
   full-screen on a phone (class toggled by JS). */
body.smart-chat-open-mobile {
    overflow: hidden;
}