@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.ai-assistant-for-wpadmin-chatbox-actions-right{
    display: flex;
    gap: 10px;
    align-items: center;
}

.ai-assistant-for-wpadmin-data-analysis {
    display: flex;
    align-items: center;
    gap: 5px;
    color: white;
    font-size: 14px;
    position: relative;
    margin-left: 10px;
    label{
        margin-left: 5px;
    }
    input[type="checkbox"] {
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid #666;
        border-radius: 3px;
        background-color: transparent;
        position: relative;
        transition: all 0.2s ease;
        margin: 0;
        &:checked {
            background-color: #e95e32;
            border-color: #e95e32;
            &:before{
                content: "";
            }
            &::after {
                content: '';
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 12px;
                height: 12px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }
        }

        &:hover {
            border-color: #e95e32;
            transform: scale(1.05);
        }

        &:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(233, 94, 50, 0.3);
        }

            &.loading {
        position: relative;
        pointer-events: none;
        opacity: 0.9;
        animation: pulse 1.5s ease-in-out infinite;

        &::before {
            display: none;
        }

        &::after {
            display: block;
        }
    }

    // Available state styling
    &.available {
        // Normal styling for available pages
    }

    // Free plan styling (available page but free plan)
    &.free-plan {
        opacity: 0.7;
        filter: grayscale(50%);

        input[type="checkbox"] {
            cursor: pointer; // Allow clicking to show message
            opacity: 0.5;
            background-color: #666;
            border-color: #666;
        }

        label {
            cursor: pointer; // Allow clicking to show message
            opacity: 0.7;
            color: #ccc;
        }

        .tooltip-icon {
            opacity: 0.6;
            cursor: help;
            background-color: #e95e32;
        }

       
    }

     .tooltip-content {
            a {
                color: #e95e32 !important;
                text-decoration: underline;
                &:active,
                &:hover {
                    color: #d84a1a !important;
                }
            }
        }

    // Unavailable state styling
    &.unavailable {
        opacity: 0.6;
        pointer-events: none;
        filter: grayscale(100%);

        input[type="checkbox"] {
            cursor: not-allowed;
            opacity: 0.4;
            background-color: #666;
            border-color: #666;
        }

        label {
            cursor: not-allowed;
            opacity: 0.6;
            color: #999;
        }

        .tooltip-icon {
            opacity: 0.4;
            cursor: not-allowed;
            background-color: #999;
        }
    }
}

    label {
        cursor: pointer;
        user-select: none;
    }

    .tooltip-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        background-color: #666;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 16px;
        font-size: 10px;
        cursor: help;
        margin-left: 5px;
        font-weight: bold;
    }

    .tooltip-content {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #333;
        color: white;
        padding: 15px;
        border-radius: 8px;
        font-size: 12px;
        line-height: 1.4;
        width: 600px;
        max-width: 90vw;
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        margin-top: 10px;

        &::after {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 8px solid transparent;
            border-bottom-color: #333;
        }
        a {
            color: #e95e32 !important;
            text-decoration: underline;
            &:active,
            &:hover {
                color: #d84a1a !important;
            }
        }
        &.show {
            opacity: 1;
            visibility: visible;
        }

        // Paragraph margin adjustments
        p {
            &:first-child {
                margin-top: 0;
            }
            
            &:last-child {
                margin-bottom: 0;
            }
        }

        // When chat container is open, position tooltip at top
        .ai-assistant-for-wpadmin-chatbox-container.open & {
            top: auto;
            bottom: 100%;
            margin-top: 0;
            margin-bottom: 10px;

            &::after {
                bottom: auto;
                top: 100%;
                border-bottom-color: transparent;
                border-top-color: #333;
            }
        }
    }
}
#ai-assistant-for-wpadmin-report{
    cursor: pointer;
    background: none;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    border-radius: 28px;
    border: none;
    background: white;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    svg{
        width: 100%;
        height: 100%;
        fill: black;
    }   
}
.ai-assistant-for-wpadmin-send-btn,
.ai-assistant-for-wpadmin-cancel-btn {
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  border-radius: 3px;
  cursor: pointer;

  &:hover {
    opacity: 0.9;
  }

  &:active {
    transform: scale(0.98);
  }
}

.ai-assistant-for-wpadmin-send-btn {
  background-color: #0073aa;
  color: #fff;
}

.ai-assistant-for-wpadmin-cancel-btn {
  background-color: #ccc;
  color: #000;
}

.ai-assistant-for-wpadmin-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

#ai-assistant-for-wpadmin-chatbox{
    background-color: #303030;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    border-radius: 28px;
    border: .8px solid rgba(255, 255, 255, 0.05);
    width: 60%;
    margin: 0 auto;
    padding: 10px 20px;
    margin-bottom: 50px;

    #ai-assistant-for-wpadmin-chatbox-input {
        background: none;
        box-shadow: none;
        border: none;
        resize: none;
        outline: none;
        width: 100%;
        color: white;
        &:focus {
            background: none;
            box-shadow: none;
            border: none;
            resize: none;
            outline: none;
        }
        &::placeholder {
            color: rgb(236, 236, 236);
            opacity: 0.5;
        }
    }
    .ai-assistant-for-wpadmin-chatbox-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        .ai-assistant-for-wpadmin-chatbox-actions-row{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        .ai-assistant-for-wpadmin-chatbox-actions-left{
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .ai-assistant-for-wpadmin-chatbox-button{
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            border:none;
            cursor: pointer;
            background-color: white;
            &.disabled{
                background-color: #aaaaaa;
                cursor: not-allowed;
            }
            &.outline{
                background-color: transparent;
                border: 1px solid rgba(255, 255, 255, 0.1);
                svg {
                    width: 18px;
                    height: 18px;
                    path{
                        fill:rgb(180, 180, 180);
                    }
                }
            }
            img,
            svg {
                width: 32px;
                height: 32px;
            }
            svg.play{
                display: block;
                width: 32px;
                height: 32px;
            }
            svg.stop{
                display: none;
                fill: black;
            }
            &.loading{
                svg.play{
                    display: none;
                }
                svg.stop{
                    display: block;
                    //rotate infinite
                    animation: spin 1s linear infinite;
                    transform-origin: center;
                    transform: rotate(0deg);
                    
                }
            }
        }
        .ai-assistant-for-wpadmin-chatbox-v2-promo{
            width: 100%;
            font-size: 12px;
            line-height: 1.5;
            color: rgba(255,255,255,.78);
            border-top: 1px solid rgba(255,255,255,.08);
            padding-top: 12px;
            .ai-assistant-for-wpadmin-chatbox-v2-label{
                color: #ffffff;
                font-weight: 700;
                margin-right: 4px;
            }
            a{
                color: #e95e32;
                font-weight: 700;
                text-decoration: none;
                margin-left: 4px;
                &:hover{
                    text-decoration: underline;
                }
            }
        }
    }
    &.ai-assistant-for-wpadmin-chatbox-onboarding {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        min-height: 100%;
        .ai-assistant-for-wpadmin-developer-required {
            color: rgba(255, 255, 255, 0.84);
            font-size: 14px;
            line-height: 1.5;
            max-width: 430px;
            text-align: center;
        }
        .ai-assistant-for-wpadmin-developer-required-title {
            color: #ffffff;
            font-size: 16px;
            font-weight: 700;
            margin: 0 0 8px;
        }
        .ai-assistant-for-wpadmin-developer-required-button {
            display: inline-flex;
            margin-top: 10px;
            padding: 9px 13px;
            border-radius: 999px;
            background: #e95e32;
            color: #ffffff;
            font-weight: 700;
            text-decoration: none;
            &:hover {
                background: #f2764e;
                color: #ffffff;
            }
        }
    }
}

.ai-assistant-for-wpadmin-chatbox-container.open{
    display: flex;
    position: fixed;
    bottom: 5%;
    right: 20%;
    left: 20%;
    top: 5%;
    z-index: 9999;
    width: 60%;
    height: 90%;
    background-color: #303030;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px -1px -1px -1px inset, rgba(255,255,255,.2) -1px -1px -1px -1px inset;
    @media only screen and (max-width: 768px) {
        width: 90%;
        left: 5%;
        right: 5%;
        height: 100%;
    }
    #ai-assistant-for-wpadmin-chatbox{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        height: 100px;
        background-color: #424242;
        width: 70%;
        &.ai-assistant-for-wpadmin-chatbox-onboarding {
            position: static;
            width: min(480px, calc(100% - 48px));
            min-height: auto;
            height: auto;
            margin: auto;
            padding: 32px 28px;
        }
    }
    #ai-assistant-for-wpadmin-results{
        // padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        overflow-y: auto;
        height: calc(100% - 300px);
        width: 70%;
        margin: 82px auto 0 auto;
        display: flex;
        flex-direction: column;
        gap: 40px;
        &::-webkit-scrollbar {
            width: 8px;
            background-color: #424242;
        }
        &::-webkit-scrollbar-thumb {
            background-color: #666;
            border-radius: 10px;
        }
        .ai-assistant-for-wpadmin-result{
            color: white;
            font-size: 16px;
            display: flex;
            align-items: center;
            
            .code-block {
                position: relative;
                margin-bottom: 1rem;
                border: 1px solid #444;
                background: #282c34;
               
            }

            .code-header {
                background: #2a2a2a;
                color: #eee;
                padding: 5px 10px;
                font-size: 12px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #444;
            }

            .copy-code {
                background: transparent;
                color: #fff;
                border: none;
                padding: 3px 8px 3px 15px;
                cursor: pointer;
                position: relative;
                &:before {
                    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' class='icon-xs'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                    width: 12px;
                    height: 12px;
                    background-size: 12px 12px;
                    background-repeat: no-repeat;
                    background-position: center;
                    content: "";
                    
                }
            }

            table {
                width: 100%;
                border-collapse: collapse;
                margin: 1rem 0;
            }
            th, td {
                padding: 10px;
                border: 1px solid #444;
                text-align: left;
            }
            th {
                background: #2a2a2a;
                color: #eee;
            }
            td {
                background: #1e1e1e;
                color: #ddd;
            }
            .ai-assistant-for-wpadmin-result-text {
                width: 100%;
                p {
                    font-size: 16px;
                }
                a {
                    color: #e95e32 !important;
                    text-decoration: none;
                    &:hover {
                        text-decoration: underline;
                    }
                }
                a[target="__blank"]::after {
                    content: "↗";
                    font-size: 0.8em;
                    margin-left: 4px;
                  }
                  
                ul {
                    list-style: disc;
                    padding-left: 10px !important;
                }
                ol {
                    padding-left: 10px !important;
                }
            }
            &.user{
                justify-content: flex-end;
                .ai-assistant-for-wpadmin-result-text{
                    background-color: #424242;
                    display: inline-block;
                    padding: 10px 20px;
                    border-radius: 28px;
                }
            }
        }
    }
    .loading-icon{
        display: block;
        width: 12px;
        height: 12px;
        background: white;
        border-radius: 100%;
        animation: pulse 1s ease-in-out infinite;
    }
}
body.no-scroll{
    overflow: hidden;
}

.ai-assistant-for-wpadmin-chatbox-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
}

.ai-assistant-for-wpadmin-chatbox-minimize{
    width: 40px;
    height: 40px;
    border:none;
    background:transparent;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &:hover{
        background-color: rgba(255, 255, 255, 0.1);
    }
    svg {
        width: 30px;
        height: 30px;
        path{
            fill:rgb(180, 180, 180);
            stroke: rgb(180, 180, 180);
        }
    }
    &.hidden{
        display: none;
    }
}

.ai-assistant-for-wpadmin-chatbox-container {
    transition: transform 0.3s ease, opacity 0.3s ease, height 0.3s ease, padding 0.3s ease;
    transform-origin: bottom right;
}

.ai-assistant-for-wpadmin-chatbox-container.minimized {
    transform: translate(100%, 100%) scale(0);
    opacity: 0;
    height: 0;
    padding: 0;
}


.ai-assistant-reopen-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  background-color: #303030;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  img {
    width: 45px;
    height: 45px;
  }
}

.ai-assistant-reopen-button.hidden {
  display: none;
}

// Processing state for the textarea - maximum specificity
#ai-assistant-for-wpadmin-chatbox {
    #ai-assistant-for-wpadmin-chatbox-input {
        &.processing {
            color: #ccc !important;
            cursor: not-allowed !important;
            transition: color 0.3s ease !important;
            animation: grayTransition 1.5s ease-in-out infinite !important;
        }
    }
}

@keyframes grayTransition {
    0% { color: #666; }
    50% { color: #ccc; }
    100% { color: #666; }
}