.typing {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 20px;
    }
    .typing-dot {
        width: 10px;
        height: 10px;
        margin: 0 6px;
        background-color: #fff;
        border-radius: 50%;
        animation: bounce 1.1s infinite ease-in-out both;
    }
    .typing-dot:nth-child(1) {
        animation-delay: 0s;
    }
    .typing-dot:nth-child(2) {
        animation-delay: 0.2s;
    }
    .typing-dot:nth-child(3) {
        animation-delay: 0.4s;
    }
    .generatediv{
        max-height:600px;
        overflow-y:scroll;
    }
    .generatediv::-webkit-scrollbar {
    display: none;
    }
    .generatediv{scrollbar-width: none; /* Hides the scrollbar, but maintains functionality */}
    .generatediv{-ms-overflow-style: none; /* Hides the scrollbar */}

    .modal-backdrop {
        z-index: 1040 !important; /* Bootstrap's default or adjust as needed */
    }

    .modal {
        z-index: 1050 !important; /* Higher than backdrop */
    }
    #deleteGenImgModal {
        z-index: 1200 !important; /* Bootstrap's default or adjust as needed */
    }
    #usetoken{
        padding: 0px 5px;
    }
    /* Overlay */
    .slide-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        color: #fff;
        padding: 10px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    }
    .card-title-container{
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        overflow: hidden;
        flex-wrap: wrap;
    }
    
    .slide-title {
    /* margin: 0 0 0.25rem; */
        font-size: 20px;
        color: var(--text-color);
        line-height: normal;
        font-weight: 700;
        margin-bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 1;
        min-width: 0;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .slide-hovercard-badge {
        position: relative;
        font-weight: 600;
        font-size: 12px;
        border-radius: 8px;
        padding: 3px 8px;
        white-space: nowrap;
        flex-shrink: 0;
        color: transparent;
        background: linear-gradient(90deg, #fd5d8c, #a58fe1);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .slide-hovercard-badge::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        border-radius: 8px;
        background: linear-gradient(90deg, #fd5d8c, #a58fe1);
        padding: 1px;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        background-clip: border-box;
    }
    .slide-hovercard-badge::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 8px;
    }
    .slide-desc {
        font-size: 14px;
        color: var(--text-color-2);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.4em * 3);
    }
    .options-image-item.selected .option-image-text{
        color:var(--primary-color);
    }
    .options-image-item.selected .img{
        border:2px solid #ff5c8a;
    }
    .dekstop-pointer{
        cursor: pointer;
    }
    .generate-div-tab{
        padding: 3px;
        border: 1px solid #3e3e3e;
        border-radius: 5px;
        background-color:hsl(240 3.7% 15.88% / 1);
    }
    .generate-div-tab .text-card-title{
        color: #fff;
        font-weight: 600;
        font-size: 15px;
        margin-bottom: 0;
    }
    .generate-video-div,
    .generate-image-div{
        display: none;
    }
    .generate-video-div.show,
    .generate-image-div.show{
        display: block;
    }
    .generate-image-tab,
    .generate-video-tab{
        padding: 10px 15px;
        cursor:pointer;
    }
    .options-image-item.selected .option-add-icon {
        display:none;
    }
    .options-image-item.selected img {
        border: 2px solid var(--primary-color);
    }
    .options-image-item::after {
        content: "✔";
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: var(--primary-color);
        font-size: 28px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: 0.25s ease;
    }
    .options-image-item.selected::after {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        z-index: 99;
    }
    #load-more{
        background-color:var(--primary-color);
        color: var(--text-color);
        border:0px;
    }
    #load-more:hover{
        background-color:#d3466e;
    }
    .create-character-text-item.imggen-count .create-character-text-card .text-card-title{
        color:hsl(240 5.03% 64.9% / 1) !important;
    }
    .create-character-text-item.imggen-count:hover .create-character-text-card .text-card-title,
    .create-character-text-item.imggen-count.active .create-character-text-card .text-card-title{
        color:#ffffff !important;
    }
    .create-character-text-item.imggen-count:hover .create-character-text-card,
    .create-character-text-item.imggen-count.active .create-character-text-card {
        background-color: hsl(240 5.26% 26.08% / 1) !important;
    }
    .create-character-text-card:hover,
    .create-character-text-card.active {
        border-color: hsl(240 5.26% 26.08% / 1) !important;
    }
    .create-character-text-card {
        background: hsl(240 3.7% 15.88% / 1) !important;
    }
    .grey-text .text-card-title{color:hsl(240 5.03% 64.9% / 1) !important;}
    a.disabled {pointer-events: none;}
    #prompt-input:disabled {
        color: #bfbfbf; /* Replace with desired color code */
    }
    .prompt-clear{
        top: 5px;
        align-items: center;
        right: 3%;
    }
    .chat-option-close {
        border: 0;
        background-color: transparent;
        outline: none;
        border-radius: 50%;
        padding: 0;
        height: 25px;
        width: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .chat-option-close img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }
    textarea#prompt-input {
        width: 100%;
        box-sizing: border-box;
    }
    .char-count {
        position: absolute;
        /* bottom: 10px; */
        right: 0px;
        font-size: 12px;
        color: #888;
        z-index: 99;
    }

    .slider-wrap{
        position: relative;
        max-width: 1500px;
        margin: 0 auto;
        padding: 0 70px;
    }
    .track{
        display:flex;
        gap: 22px;
        overflow-x: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        padding: 10px 4px 20px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .track::-webkit-scrollbar{ display:none; }

    .track-card{
        scroll-snap-align: start;
        flex: 0 0 200px;
        position: relative;
        border-radius: 24px;
        padding: 22px 18px 20px;
        text-align:center;
        background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,94,168,0.05));
        border: 1px solid rgba(255,255,255,0.12);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        box-shadow:
        0 8px 30px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.08);
        transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
        cursor:pointer;
    }
    .track-card.active,
    .track-card:hover{
        transform: translateY(-8px);
        border-color: rgba(255,94,168,0.55);
        box-shadow:
        0 16px 40px rgba(255,60,150,0.25),
        0 8px 30px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.12);
    }
    .track-avatar-ring{
        width: 112px;
        height: 112px;
        margin: 0 auto 16px;
        border-radius: 50%;
        padding: 3px;
        background: linear-gradient(135deg, #ff5ea8, #ffb3d9, rgba(255,255,255,0.2));
    }
    .track-avatar{
        width:100%;
        height:100%;
        border-radius:50%;
        background-size: cover;
        background-position: center;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
        font-size:30px;
        font-weight:600;
        border: 3px solid #05050a;
    }
    .track-name{
        color:#fff;
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 4px;
        letter-spacing: 0.2px;
    }
    .track-age{
        color: #ff8fc4;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 1px;
        opacity: 0.85;
    }
    .arrow{
        position:absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.18);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        z-index: 5;
        transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
    }
    .arrow:hover{
        background: rgba(255,94,168,0.25);
        border-color: #ff5ea8;
        transform: translateY(-50%) scale(1.08);
    }
    .arrow.left{ left: 10px; }
    .arrow.right{ right: 10px; }
    .arrow svg{ width:18px; height:18px; }
    @media (max-width: 768px) {
        .track{
            gap: 18px;
        }
        .track-card{
            flex: 0 0 100px;
            padding: 22px 10px 2px;
            border-radius:20px;
        }
        .track-avatar-ring{
            width: 70px;
            height: 70px;
        }
        .select-character-swiper .select-character-swiper-item img{
            width: 70px;
            height: 70px;
        }
    }

/* ==========================================================================
   Top Slider
   ========================================================================== */
.gf-slider-wrap{position:relative}
.gf-track-outer{overflow:hidden;width:100%;cursor:grab;user-select:none}
.gf-track-outer:active{cursor:grabbing}
.gf-track{display:flex;gap:8px;transition:transform 0.35s cubic-bezier(.4,0,.2,1);will-change:transform}
.gf-card{flex:0 0 118px;width:118px;height:125px;border-radius:12px;overflow:hidden;position:relative;background:#1a1a2e;border:1px solid rgba(255,255,255,0.08);cursor:pointer;transition:transform 0.15s}
/* .gf-card:hover{transform:translateY(-3px)} */
.gf-img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:linear-gradient(135deg,#1e1a2e 0%,#2d1b2e 100%)}
.gf-img-placeholder{width:100%;display:flex;align-items:center;justify-content:center;font-size:32px;background:linear-gradient(135deg,#1e1a2e,#2d1b2e)}
.gf-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.4) 65%,transparent 100%);padding:10px 8px 8px}
.gf-badge{position:absolute;top:7px;left:7px;background:rgba(20,16,36,.75);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:2px 8px;display:flex;align-items:center;gap:4px;font-size:10px;color:#fff}
.gf-badge i{font-size:10px;color:#a78bfa}
.gf-name{font-size:11px;font-weight:600;color:#fff;margin:0 0 2px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gf-age{display:inline-flex;align-items:center;justify-content:center;background:rgba(124,58,237,.55);border:1px solid rgba(167,139,250,.3);border-radius:5px;font-size:9px;font-weight:600;color:#ddd6fe;padding:1px 5px;margin-left:4px;vertical-align:middle}
.gf-desc{font-size:9.5px;color:rgba(255,255,255,.55);margin:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gf-nav{display:flex;justify-content:flex-end;gap:6px;margin-bottom:10px}
.gf-nav-btn{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s;font-size:14px}
.gf-nav-btn:hover{background:rgba(255,255,255,.14)}
.gf-nav-btn:disabled{opacity:.3;cursor:default}
.gf-dots{display:flex;justify-content:center;gap:5px; /*margin-top:10px*/}
.gf-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .2s;cursor:pointer}
.gf-dot.active{width:16px;border-radius:3px;background:#a78bfa}
.select-character-swiper-item.active{border: 2px solid var(--primary-color); /*opacity: 0.8;*/}
/* New */
.gf-slider-wrap { width: 100%; }
.gf-track-outer {overflow: hidden;width: 100%;cursor: grab;touch-action: pan-y;-webkit-user-select: none;user-select: none;}
.gf-track-outer:active { cursor: grabbing; }
.gf-track {display: flex;gap: 10px;will-change: transform;}
.gf-card {position: relative;flex: 0 0 auto;width: clamp(96px, 22vw, 150px);border-radius: 14px;overflow: hidden;cursor: pointer;border: 2px solid transparent;transition: border-color .2s ease, box-shadow .2s ease;}
.gf-img {display: block;width: 100%;aspect-ratio: 2 / 3;object-fit: cover;pointer-events: none;-webkit-user-drag: none;user-drag: none;}
.gf-overlay {position: absolute;left: 0; right: 0; bottom: 0;padding: 6px 4px;background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));pointer-events: none;}
.gf-name {margin: 0;color: #fff;font-size: 13px;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.gf-card.active,.gf-card.selected {border-color: #e91e8c;}