/* =========================================================
   COUPONEARTH AI BUTTON
========================================================= */

#couponAiButton {

    position: fixed;

    right: 24px;
    bottom: 24px;

    width: 62px;
    height: 62px;

    border-radius: 20px;

    border: 1px solid rgba(255,255,255,.35);

    background:
        linear-gradient(
            135deg,
            #1e3a8a,
            #2563eb
        );

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 9998;

    box-shadow:
        0 15px 40px rgba(30,58,138,.30);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


#couponAiButton:hover {

    transform:
        translateY(-5px)
        scale(1.04);

    box-shadow:
        0 22px 50px rgba(30,58,138,.38);
}


.ai-icon {

    font-size: 25px;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,255,255,.45)
        );
}


/* =========================================================
   PANEL
========================================================= */

#couponAiPanel {

    position: fixed;

    right: 24px;
    bottom: 100px;

    width: 390px;
    max-width: calc(100vw - 30px);

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

    background:
        linear-gradient(
            180deg,
            #172554 0%,
            #1e3a8a 100%
        );

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius: 24px;

    overflow: hidden;

    z-index: 9999;

    box-shadow:
        0 30px 80px
        rgba(15,23,42,.30);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(20px)
        scale(.96);

    transform-origin:
        bottom right;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

}


#couponAiPanel.ai-open {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   HEADER
========================================================= */

.ai-panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.12);
}


.ai-panel-brand {

    display: flex;

    align-items: center;

    gap: 11px;
}


.ai-panel-logo {

    width: 42px;
    height: 42px;

    border-radius: 13px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        rgba(255,255,255,.12);

    border:
        1px solid
        rgba(255,255,255,.16);

    font-size: 20px;
}


.ai-panel-title {

    color: white;

    font-size: 15px;

    font-weight: 800;
}


.ai-panel-subtitle {

    margin-top: 2px;

    color:
        rgba(255,255,255,.60);

    font-size: 11px;
}


.ai-panel-close {

    width: 34px;
    height: 34px;

    border-radius: 10px;

    border:
        1px solid
        rgba(255,255,255,.10);

    background:
        rgba(255,255,255,.07);

    color: white;

    font-size: 22px;

    cursor: pointer;

    transition: .2s;
}


.ai-panel-close:hover {

    background:
        rgba(245,158,11,.85);

    color:
        #172554;
}


/* =========================================================
   BODY
========================================================= */

.ai-panel-body {

    height:
        calc(100% - 76px);

    overflow-y: auto;

    padding: 18px;
}


.ai-welcome {

    padding: 13px 14px;

    border-radius: 14px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid
        rgba(255,255,255,.09);

    color:
        rgba(255,255,255,.78);

    font-size: 12px;

    line-height: 1.6;

    margin-bottom: 14px;
}


/* =========================================================
   SEARCH
========================================================= */

.ai-search-box {

    display: flex;

    align-items: flex-end;

    gap: 8px;

    padding: 7px;

    border-radius: 16px;

    background:
        white;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.12);
}


#couponAiInput {

    flex: 1;

    min-height: 48px;

    max-height: 110px;

    resize: vertical;

    border: none;

    outline: none;

    padding: 9px 10px;

    color:
        #0f172a;

    background:
        transparent;

    font-size: 13px;
}


#couponAiInput::placeholder {

    color:
        #94a3b8;
}


#couponAiSend {

    flex-shrink: 0;

    width: 42px;
    height: 42px;

    border: none;

    border-radius: 12px;

    background:
        #f59e0b;

    color:
        #172554;

    font-size: 21px;

    font-weight: 900;

    cursor: pointer;

    transition: .2s;
}


#couponAiSend:hover {

    background:
        #fbbf24;

    transform:
        translateX(2px);
}


#couponAiSend:disabled {

    opacity: .55;

    cursor:
        not-allowed;
}


/* =========================================================
   QUICK ACTIONS
========================================================= */

.ai-quick-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin:
        12px 0 15px;
}


.ai-quick-action {

    padding:
        7px 10px;

    border-radius: 999px;

    border:
        1px solid
        rgba(255,255,255,.12);

    background:
        rgba(255,255,255,.07);

    color:
        rgba(255,255,255,.78);

    font-size: 10px;

    cursor: pointer;

    transition: .2s;
}


.ai-quick-action:hover {

    background:
        rgba(245,158,11,.16);

    border-color:
        rgba(245,158,11,.45);

    color:
        #fbbf24;
}


/* =========================================================
   LOADING
========================================================= */

.ai-loading {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 15px;

    border-radius: 14px;

    background:
        rgba(255,255,255,.07);

    color:
        rgba(255,255,255,.72);

    font-size: 11px;
}


.ai-spinner {

    width: 18px;
    height: 18px;

    border-radius: 50%;

    border:
        2px solid
        rgba(255,255,255,.25);

    border-top-color:
        #fbbf24;

    animation:
        aiSpin .7s linear infinite;
}


@keyframes aiSpin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   ERROR
========================================================= */

.ai-error {

    margin-top: 12px;

    padding: 13px;

    border-radius: 14px;

    background:
        rgba(239,68,68,.12);

    border:
        1px solid
        rgba(248,113,113,.20);

    color:
        #fecaca;

    font-size: 11px;

    line-height: 1.5;
}


.ai-error-title {

    font-weight: 800;

    margin-bottom: 4px;

    color:
        #fca5a5;
}


/* =========================================================
   EMPTY
========================================================= */

.ai-empty {

    text-align: center;

    padding: 30px 15px;

    color:
        rgba(255,255,255,.65);

    font-size: 12px;
}


.ai-empty-icon {

    font-size: 28px;

    margin-bottom: 8px;
}


.ai-empty strong {

    display: block;

    color: white;

    margin-bottom: 5px;
}


/* =========================================================
   SUMMARY
========================================================= */

.ai-result-summary {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 10px;

    color:
        rgba(255,255,255,.65);

    font-size: 11px;
}


/* =========================================================
   RESULT CARD
========================================================= */

.ai-result-card {

    margin-bottom: 10px;

    padding: 14px;

    border-radius: 16px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid
        rgba(255,255,255,.10);

    transition: .25s;
}


.ai-result-card:hover {

    transform:
        translateY(-2px);

    background:
        rgba(255,255,255,.11);

    border-color:
        rgba(245,158,11,.30);
}


.ai-result-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    margin-bottom: 7px;
}


.ai-result-store {

    color:
        #fbbf24;

    font-size: 10px;

    font-weight: 800;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}


.ai-match-badge {

    padding:
        3px 7px;

    border-radius:
        999px;

    background:
        rgba(16,185,129,.12);

    color:
        #6ee7b7;

    font-size: 8px;

    font-weight: 800;
}


.ai-result-name {

    color: white;

    font-size: 13px;

    font-weight: 800;

    line-height: 1.4;
}


.ai-result-description {

    margin-top: 5px;

    color:
        rgba(255,255,255,.55);

    font-size: 10px;

    line-height: 1.5;

    display:
        -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;
}


.ai-result-code {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    margin-top: 10px;

    padding: 8px 9px;

    border-radius: 9px;

    background:
        rgba(245,158,11,.10);

    border:
        1px dashed
        rgba(245,158,11,.35);
}


.ai-result-code span {

    color:
        #fbbf24;

    font-size: 8px;

    font-weight: 800;
}


.ai-result-code strong {

    color:
        white;

    font-size: 10px;

    letter-spacing:
        .05em;
}


.ai-result-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 10px;

    color:
        #fbbf24;

    font-size: 10px;

    font-weight: 800;

    text-decoration: none;
}


.ai-result-link:hover {

    color:
        #fde68a;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    #couponAiButton {

        right: 16px;
        bottom: 16px;

        width: 56px;
        height: 56px;

        border-radius: 17px;
    }


    #couponAiPanel {

        right: 10px;
        bottom: 82px;

        width:
            calc(100vw - 20px);

        height:
            min(600px, calc(100vh - 100px));

        border-radius: 20px;
    }

}