/* =========================================================
   FASHION CIRCLE
   PREMIUM AI SHOPPING ASSISTANT
========================================================= */


/* =========================================================
   AI FLOATING BUTTON
========================================================= */

.fc-ai-button {

    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 62px;
    height: 62px;

    border: 2px solid #c9a227;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            #292929 0%,
            #111111 45%,
            #030303 100%
        );

    color: #ffffff;

    cursor: pointer;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    box-shadow:

        0 0 0 2px
        rgba(201, 162, 39, 0.12),

        0 8px 25px
        rgba(0, 0, 0, 0.35),

        0 0 20px
        rgba(201, 162, 39, 0.20);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


/* Outer Gold Ring */

.fc-ai-button::before {

    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border: 1px solid
        rgba(201, 162, 39, 0.40);

    pointer-events: none;

    animation:
        fcAiGoldGlow
        2.5s
        ease-in-out
        infinite;

}


/* Inner Highlight */

.fc-ai-button::after {

    content: "";

    position: absolute;

    top: 5px;
    left: 9px;

    width: 25px;
    height: 10px;

    border-radius: 50%;

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

    transform: rotate(-25deg);

    pointer-events: none;

}


/* Hover */

.fc-ai-button:hover {

    transform:
        scale(1.08);

    box-shadow:

        0 0 0 2px
        rgba(201, 162, 39, 0.20),

        0 10px 30px
        rgba(0, 0, 0, 0.45),

        0 0 28px
        rgba(201, 162, 39, 0.40);

}


/* Click */

.fc-ai-button:active {

    transform:
        scale(0.96);

}


/* =========================================================
   PREMIUM AI LOGO
========================================================= */

.fc-ai-logo {

    position: relative;

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* Crown */

.fc-ai-crown {

    position: absolute;

    top: 0;

    left: 50%;

    transform:
        translateX(-50%);

    color: #d4af37;

    font-size: 22px;

    line-height: 1;

    z-index: 5;

    text-shadow:

        0 0 5px
        rgba(212, 175, 55, 0.75),

        0 0 12px
        rgba(212, 175, 55, 0.35);

}


/* Robot Face */

.fc-ai-face {

    position: relative;

    width: 37px;
    height: 29px;

    margin-top: 11px;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #d5d5d5
        );

    border:
        2px solid #d4af37;

    box-shadow:

        inset 0 2px 4px
        rgba(255,255,255,0.85),

        0 3px 9px
        rgba(0,0,0,0.45);

}


/* Robot Screen */

.fc-ai-face::before {

    content: "";

    position: absolute;

    left: 5px;
    right: 5px;

    top: 5px;
    bottom: 5px;

    border-radius: 7px;

    background:
        #080808;

    box-shadow:

        inset 0 0 8px
        rgba(212,175,55,0.18);

}


/* Robot Eyes */

.fc-ai-eye {

    position: absolute;

    top: 11px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #d4af37;

    z-index: 3;

    box-shadow:

        0 0 5px
        #d4af37,

        0 0 10px
        rgba(212,175,55,0.70);

}


/* Left Eye */

.fc-ai-eye:first-child {

    left: 11px;

}


/* Right Eye */

.fc-ai-eye:last-child {

    right: 11px;

}


/* =========================================================
   GOLD GLOW ANIMATION
========================================================= */

@keyframes fcAiGoldGlow {

    0%,
    100% {

        opacity: 0.30;

        transform:
            scale(1);

    }

    50% {

        opacity: 0.85;

        transform:
            scale(1.08);

    }

}


/* =========================================================
   CHAT BOX
========================================================= */

.fc-ai-chat {

    position: fixed;

    right: 25px;

    bottom: 100px;

    width: 390px;

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

    height: 600px;

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

    background:
        #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:

        0 15px 50px
        rgba(0,0,0,0.25);

    z-index: 99998;

    display: none;

    flex-direction: column;

    border:
        1px solid #e6e6e6;

}


/* Active */

.fc-ai-chat.active {

    display: flex;

}


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

.fc-ai-header {

    background:
        linear-gradient(
            135deg,
            #050505,
            #171717,
            #050505
        );

    color: #ffffff;

    padding:
        13px 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-shrink: 0;

    border-bottom:
        1px solid
        rgba(201,162,39,0.35);

}


/* Header Brand */

.fc-ai-brand {

    display: flex;

    align-items: center;

    gap: 9px;

}


/* Header Logo */

.fc-ai-header-logo {

    position: relative;

    width: 38px;
    height: 38px;

    min-width: 38px;

    border-radius: 50%;

    background:
        #080808;

    border:
        1px solid #c9a227;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 0 12px
        rgba(201,162,39,0.20);

}


/* Header Crown */

.fc-ai-header-crown {

    position: absolute;

    top: 1px;

    color: #d4af37;

    font-size: 15px;

    z-index: 3;

}


/* Header Face */

.fc-ai-header-face {

    position: relative;

    width: 23px;
    height: 18px;

    margin-top: 7px;

    border-radius: 6px;

    background:
        #eeeeee;

    border:
        1px solid #d4af37;

}


/* Header Face Screen */

.fc-ai-header-face::before {

    content: "";

    position: absolute;

    inset: 3px;

    background:
        #080808;

    border-radius: 4px;

}


/* Header Eyes */

.fc-ai-header-face span {

    position: absolute;

    width: 3px;
    height: 3px;

    background:
        #d4af37;

    border-radius: 50%;

    top: 7px;

    z-index: 2;

}


.fc-ai-header-face span:first-child {

    left: 6px;

}


.fc-ai-header-face span:last-child {

    right: 6px;

}


/* Header Strong */

.fc-ai-header strong {

    display: block;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.3;

}


/* Header Small */

.fc-ai-header small {

    display: block;

    margin-top: 3px;

    color:
        #c9c9c9;

    font-size: 10px;

    line-height: 1.3;

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.fc-ai-close {

    width: 34px;

    height: 34px;

    border: none;

    background:
        transparent;

    color:
        #ffffff;

    font-size: 27px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    transition:
        0.2s ease;

}


.fc-ai-close:hover {

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

    color:
        #d4af37;

}


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

.fc-ai-body {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding: 14px;

    background:
        #f7f7f7;

    scroll-behavior:
        smooth;

}


/* Scrollbar */

.fc-ai-body::-webkit-scrollbar {

    width: 5px;

}


.fc-ai-body::-webkit-scrollbar-track {

    background:
        #eeeeee;

}


.fc-ai-body::-webkit-scrollbar-thumb {

    background:
        #b8b8b8;

    border-radius:
        10px;

}


/* =========================================================
   WELCOME
========================================================= */

.fc-ai-welcome {

    background:
        #ffffff;

    border-radius:
        12px;

    padding:
        11px;

    font-size:
        12px;

    line-height:
        1.5;

    margin-bottom:
        12px;

    border:
        1px solid #eeeeee;

    color:
        #333333;

    display:
        flex;

    gap:
        9px;

    align-items:
        center;

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

}


/* Welcome Logo */

.fc-ai-welcome-icon {

    position:
        relative;

    width:
        34px;

    height:
        34px;

    min-width:
        34px;

    border-radius:
        50%;

    background:
        #090909;

    border:
        1px solid #d4af37;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* Mini Crown */

.fc-ai-mini-crown {

    position:
        absolute;

    top:
        0;

    color:
        #d4af37;

    font-size:
        12px;

    z-index:
        3;

}


/* Mini Face */

.fc-ai-mini-face {

    position:
        relative;

    width:
        20px;

    height:
        15px;

    margin-top:
        6px;

    background:
        #eeeeee;

    border-radius:
        5px;

}


/* Mini Screen */

.fc-ai-mini-face::before {

    content:
        "";

    position:
        absolute;

    inset:
        3px;

    background:
        #080808;

    border-radius:
        3px;

}


/* Mini Eyes */

.fc-ai-mini-face span {

    position:
        absolute;

    width:
        2px;

    height:
        2px;

    border-radius:
        50%;

    background:
        #d4af37;

    top:
        6px;

    z-index:
        2;

}


.fc-ai-mini-face span:first-child {

    left:
        5px;

}


.fc-ai-mini-face span:last-child {

    right:
        5px;

}


/* =========================================================
   QUICK TITLE
========================================================= */

.fc-ai-quick-title {

    font-size:
        13px;

    font-weight:
        700;

    margin-bottom:
        8px;

    color:
        #222222;

}


/* =========================================================
   QUICK LIST
========================================================= */

.fc-ai-quick-list {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-bottom:
        12px;

}


/* =========================================================
   QUICK BUTTON
========================================================= */

.fc-ai-quick {

    border:
        1px solid #dddddd;

    background:
        #ffffff;

    color:
        #222222;

    border-radius:
        20px;

    padding:
        7px 10px;

    font-size:
        10px;

    line-height:
        1.3;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;

}


.fc-ai-quick:hover {

    background:
        #111111;

    color:
        #d4af37;

    border-color:
        #c9a227;

    transform:
        translateY(-1px);

}


/* =========================================================
   USER MESSAGE
========================================================= */

.fc-ai-user-message {

    display:
        flex;

    justify-content:
        flex-end;

    margin:
        8px 0;

}


.fc-ai-user-bubble {

    background:
        #111111;

    color:
        #ffffff;

    padding:
        9px 12px;

    border-radius:
        15px 15px 3px 15px;

    max-width:
        80%;

    font-size:
        12px;

    line-height:
        1.4;

    word-break:
        break-word;

}


/* =========================================================
   AI MESSAGE
========================================================= */

.fc-ai-ai-message {

    display:
        flex;

    justify-content:
        flex-start;

    margin:
        8px 0;

}


.fc-ai-ai-bubble {

    background:
        #ffffff;

    color:
        #222222;

    padding:
        9px 12px;

    border-radius:
        15px 15px 15px 3px;

    max-width:
        85%;

    font-size:
        12px;

    line-height:
        1.4;

    border:
        1px solid #eeeeee;

    word-break:
        break-word;

    box-shadow:
        0 2px 7px
        rgba(0,0,0,0.03);

    display:
        flex;

    gap:
        6px;

    align-items:
        flex-start;

}


/* Message Crown */

.fc-ai-message-icon {

    color:
        #c9a227;

    font-size:
        12px;

    line-height:
        1.3;

}


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

.fc-ai-loading {

    margin:
        8px 0;

}


.fc-ai-loading-bubble {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    padding:
        10px 12px;

    background:
        #ffffff;

    border-radius:
        14px;

    border:
        1px solid #eeeeee;

}


.fc-ai-loading-bubble span {

    width:
        5px;

    height:
        5px;

    background:
        #c9a227;

    border-radius:
        50%;

    animation:
        fcAiLoading
        1s infinite;

}


.fc-ai-loading-bubble span:nth-child(2) {

    animation-delay:
        0.15s;

}


.fc-ai-loading-bubble span:nth-child(3) {

    animation-delay:
        0.30s;

}


@keyframes fcAiLoading {

    0%,
    100% {

        opacity:
            0.3;

        transform:
            translateY(0);

    }

    50% {

        opacity:
            1;

        transform:
            translateY(-3px);

    }

}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.fc-ai-products-title {

    font-size:
        14px;

    font-weight:
        700;

    margin:
        12px 0 8px;

    color:
        #111111;

    line-height:
        1.4;

}


/* =========================================================
   PRODUCTS
========================================================= */

.fc-ai-products {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


/* =========================================================
   PRODUCT CARD
========================================================= */

.fc-ai-product-card {

    background:
        #ffffff;

    border:
        1px solid #e5e5e5;

    border-radius:
        12px;

    overflow:
        hidden;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.fc-ai-product-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 6px 18px
        rgba(0,0,0,0.10);

}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.fc-ai-product-image-box {

    position:
        relative;

    width:
        100%;

    height:
        190px;

    background:
        #f3f3f3;

    overflow:
        hidden;

}


.fc-ai-product-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

    transition:
        transform 0.3s ease;

}


.fc-ai-product-card:hover
.fc-ai-product-image {

    transform:
        scale(1.03);

}


/* =========================================================
   DISCOUNT BADGE
========================================================= */

.fc-ai-product-badge {

    position:
        absolute;

    top:
        9px;

    left:
        9px;

    background:
        #111111;

    color:
        #d4af37;

    padding:
        5px 8px;

    border-radius:
        5px;

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1.2;

    z-index:
        2;

    border:
        1px solid #c9a227;

}


/* =========================================================
   PRODUCT INFO
========================================================= */

.fc-ai-product-info {

    padding:
        11px;

}


/* =========================================================
   PRODUCT NAME
========================================================= */

.fc-ai-product-name {

    margin:
        0 0 6px;

    font-size:
        14px;

    line-height:
        1.3;

    color:
        #111111;

    font-weight:
        700;

    word-break:
        break-word;

}


/* =========================================================
   PRICE
========================================================= */

.fc-ai-product-price {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-bottom:
        7px;

}


.fc-ai-current-price {

    font-size:
        15px;

    font-weight:
        800;

    color:
        #111111;

}


.fc-ai-old-price {

    font-size:
        11px;

    color:
        #999999;

    text-decoration:
        line-through;

}


.fc-ai-discount {

    background:
        #111111;

    color:
        #d4af37;

    padding:
        3px 5px;

    border-radius:
        4px;

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1.2;

}


/* =========================================================
   DETAILS
========================================================= */

.fc-ai-product-details {

    font-size:
        10px;

    color:
        #555555;

    line-height:
        1.6;

    margin-bottom:
        7px;

}


.fc-ai-product-details div {

    margin-bottom:
        1px;

}


.fc-ai-product-details strong {

    color:
        #222222;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.fc-ai-product-description {

    margin:
        0 0 9px;

    font-size:
        10px;

    color:
        #666666;

    line-height:
        1.5;

    display:
        -webkit-box;

    -webkit-line-clamp:
        3;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;

}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.fc-ai-product-actions {

    display:
        flex;

    gap:
        6px;

    width:
        100%;

}


.fc-ai-view-btn,
.fc-ai-cart-btn {

    flex:
        1;

    text-align:
        center;

    text-decoration:
        none;

    padding:
        8px 5px;

    border-radius:
        6px;

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1.3;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

    cursor:
        pointer;

}


/* View Product */

.fc-ai-view-btn {

    background:
        #111111;

    color:
        #ffffff;

}


.fc-ai-view-btn:hover {

    background:
        #222222;

    color:
        #d4af37;

    transform:
        translateY(-1px);

}


/* Add Cart */

.fc-ai-cart-btn {

    background:
        #eeeeee;

    color:
        #111111;

}


.fc-ai-cart-btn:hover {

    background:
        #d9d9d9;

    color:
        #111111;

    transform:
        translateY(-1px);

}


/* =========================================================
   FOOTER
========================================================= */

.fc-ai-footer {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        10px;

    background:
        #ffffff;

    border-top:
        1px solid #eeeeee;

    flex-shrink:
        0;

}


/* =========================================================
   INPUT
========================================================= */

.fc-ai-input {

    flex:
        1;

    min-width:
        0;

    height:
        40px;

    border:
        1px solid #dddddd;

    border-radius:
        20px;

    padding:
        9px 12px;

    outline:
        none;

    font-size:
        12px;

    color:
        #222222;

    background:
        #ffffff;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.fc-ai-input::placeholder {

    color:
        #999999;

}


.fc-ai-input:focus {

    border-color:
        #c9a227;

    box-shadow:
        0 0 0 2px
        rgba(201,162,39,0.10);

}


/* =========================================================
   SEND BUTTON
========================================================= */

.fc-ai-send {

    width:
        40px;

    height:
        40px;

    min-width:
        40px;

    border:
        none;

    border-radius:
        50%;

    background:
        #111111;

    color:
        #d4af37;

    cursor:
        pointer;

    font-size:
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.fc-ai-send:hover {

    background:
        #222222;

    transform:
        scale(1.05);

}


.fc-ai-send:active {

    transform:
        scale(0.95);

}


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

@media (max-width: 600px) {


    .fc-ai-button {

        right:
            15px;

        bottom:
            15px;

        width:
            57px;

        height:
            57px;

    }


    .fc-ai-chat {

        right:
            10px;

        bottom:
            82px;

        width:
            calc(100vw - 20px);

        height:
            80vh;

        max-height:
            none;

        border-radius:
            15px;

    }


    .fc-ai-product-image-box {

        height:
            180px;

    }


    .fc-ai-header {

        padding:
            12px 13px;

    }


    .fc-ai-body {

        padding:
            11px;

    }


    .fc-ai-footer {

        padding:
            8px;

    }

}


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

@media (max-width: 380px) {


    .fc-ai-chat {

        right:
            5px;

        width:
            calc(100vw - 10px);

    }


    .fc-ai-product-image-box {

        height:
            165px;

    }


    .fc-ai-product-name {

        font-size:
            13px;

    }


    .fc-ai-current-price {

        font-size:
            14px;

    }


    .fc-ai-quick {

        font-size:
            9px;

        padding:
            6px 8px;

    }


    .fc-ai-header-logo {

        width:
            35px;

        height:
            35px;

        min-width:
            35px;

    }


}