.ai-markdown {
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    margin-right: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.ai-markdown p,
.ai-markdown div,
.ai-markdown span {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.ai-markdown ul,
.ai-markdown ol {
    padding-left: 24px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ai-markdown li,
.ai-list-item {
    font-size: 16px !important;
    line-height: 1.6 !important;
    width: auto !important;
    margin-bottom: 6px !important;
}

.ai-markdown pre,
.ai-markdown code,
.ai-markdown pre code {
    font-size: 8px !important;
    font-family: monospace !important;
}

div[style*="border-radius: 18px 18px 4px 18px"] {
    padding: 14px 20px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    max-width: 75% !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    border-radius: 24px !important;
    background: #1f1f1f !important;
    color: #e3e3e3 !important;
    position: relative !important;
    overflow: hidden !important;
    animation: bubblePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

div[style*="border-radius: 18px 18px 4px 18px"]::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;

    animation: lightSweep 0.8s ease-out 0.2s 1 forwards !important;
    pointer-events: none !important;
}

@keyframes bubblePop {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes lightSweep {
    0% { transform: translateX(-100%) skewX(-20deg); }
    100% { transform: translateX(200%) skewX(-20deg); }
}

:root { --bg-main:#fff; --text-primary:#202124; --text-secondary:#5f6368; --load-bar-bg:#e8eaed; --accent-glow:rgba(0,240,255,0.15); }
  @media (prefers-color-scheme: dark) { :root { --bg-main:#050505; --text-primary:#fff; --text-secondary:#aaa; --load-bar-bg:#1a1a1a; --accent-glow:rgba(0,240,255,0.2); } }
  @keyframes dropDown { from { opacity:0; transform:translateY(-30px); } to { opacity:1; transform:translateY(0); } }
  @keyframes stroke-crawl { 0% { stroke-dashoffset:250; } 100% { stroke-dashoffset:0; } }
  @keyframes pulse-glow { 0% { opacity: 0.7; } 100% { opacity: 1; } }
  @keyframes text-rgb { to { background-position:300% center; } }
  @keyframes slideRightExpand { 0% { opacity: 0; transform: translateX(-15px); letter-spacing: -1px; } 100% { opacity: 1; transform: translateX(0); letter-spacing: 1px; } }
  @keyframes vScanner { 0% { left:-30%; } 100% { left:100%; } }

@keyframes menuDown {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

#v-menu-options button {
  opacity: 0;
  animation: menuDown 0.3s ease-out forwards;
  transition: transform 0.2s ease, background 0.2s ease;
}

#v-menu-options button:active {
  transform: scale(0.97);
  background: #282a2c !important;
}

#v-menu-options button:nth-child(1) { animation-delay: 0.3s; }
#v-menu-options button:nth-child(2) { animation-delay: 0.4s; }
#v-menu-options button:nth-child(3) { animation-delay: 0.5s; }
#v-menu-options button:nth-child(4) { animation-delay: 0.7s; }
#v-menu-options button:nth-child(5) { animation-delay: 0.8s; }
    @keyframes spinStory{to{transform:rotate(360deg)}}
    @keyframes slideIn{0%{opacity:0;transform:translateY(-5px)}100%{opacity:0.8;transform:translateY(0)}}
    #v-box-room.active{display:flex!important;opacity:1!important}

@keyframes premiumBadgeReveal {
    0% {
      opacity: 0;

      transform: translateX(-12px) rotate(-45deg) scale(0.4);
    }

    45% {
      opacity: 0.7;
    }

    100% {
      opacity: 1;

      transform: translateX(0) rotate(0deg) scale(1);
    }

  }

  .v-verified-badge-animate {
    opacity: 0;
    transform-origin: center;

    animation: premiumBadgeReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;

    animation-delay: 0.6s;

    flex-shrink: 0;
  }

  @keyframes pulseRadar {
    0% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(255, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); }
  }

  @keyframes textBreathe {
    0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(255, 68, 68, 0.6); }
    50% { opacity: 0.5; text-shadow: none; }
  }

.v-btn-trigger:active { transform: scale(0.95); background: #2a2a2e !important; }

  .v-model-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; margin: 0 4px 4px 10px; cursor: pointer; border: 1px solid transparent; background: transparent; transition: all 0.15s ease; user-select: none; }
  .v-model-item:hover { background: rgba(255,255,255,0.04); }

  .v-model-locked {
    opacity: 0.45 !important;
    pointer-events: none !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: transparent !important;
    filter: grayscale(100%);
  }

  .v-model-locked .v-model-title { color: #6b7280 !important; }
  .v-model-locked .v-model-desc { color: #80868b !important; font-weight: 500; }

  .v-model-title { color: #e3e3e3; font-size: 13.5px; font-weight: 700; transition: color 0.15s; margin-bottom: 2px;}
  .v-model-active .v-model-title, .v-reason-active .v-model-title { color: currentColor; }
  .v-model-desc { color: #9aa0a6; font-size: 11px; transition: color 0.2s ease; }

  .v-check-model { opacity: 0; transform: scale(0.6); transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); flex-shrink: 0; stroke: currentColor; }
  .v-model-active .v-check-model, .v-reason-active .v-check-model { opacity: 1; transform: scale(1); }

  .btn-model-lite.v-model-active { color: #8ab4f8; background: rgba(138, 180, 248, 0.08); border-color: rgba(138, 180, 248, 0.15); }
  .btn-model-flash.v-model-active { color: #00ffaa; background: rgba(0, 255, 170, 0.08); border-color: rgba(0, 255, 170, 0.15); }
  .btn-model-35.v-model-active { color: #f3cd56; background: rgba(243, 205, 86, 0.08); border-color: rgba(243, 205, 86, 0.15); }

  #btn-reason-standard.v-reason-active { color: #8ab4f8; background: rgba(138, 180, 248, 0.08); border-color: rgba(138, 180, 248, 0.15); }
  #btn-reason-deep.v-reason-active { color: #c58af9; background: rgba(155, 81, 224, 0.08); border-color: rgba(155, 81, 224, 0.15); }
  #btn-reason-efficient.v-reason-active { color: #00ffaa; background: rgba(0, 255, 170, 0.08); border-color: rgba(0, 255, 170, 0.15); }

  @keyframes spinRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  @keyframes slideUpOpen { 0% { transform: translateY(60px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

#v-layer-storage::-webkit-scrollbar { display: none; }
    .v-g-card { background: #1e1f20; border: 1px solid #3c4043; border-radius: 16px; padding: 16px; margin-bottom: 12px; transition: background 0.2s; }
    .v-g-title { color: #e3e3e3; font-size: 14px; font-weight: 600; margin-bottom: 4px; letter-spacing: 0.2px; }
    .v-g-subtitle { color: #9aa0a6; font-size: 12px; line-height: 1.4; }
    .v-g-btn { background: rgba(138, 180, 248, 0.1); color: #8ab4f8; border: none; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 6px; }
    .v-g-btn:hover { background: rgba(138, 180, 248, 0.2); }
    .v-g-btn:active { transform: scale(0.96); }
    .v-g-btn-danger { background: rgba(242, 139, 130, 0.1); color: #f28b82; }
    .v-g-btn-danger:hover { background: rgba(242, 139, 130, 0.2); }
    .v-g-checkbox { accent-color: #8ab4f8; width: 18px; height: 18px; cursor: pointer; margin: 0; }
    .v-g-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
    .v-g-toggle input { opacity: 0; width: 0; height: 0; }
    .v-g-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #3c4043; transition: .3s; border-radius: 22px; }
    .v-g-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: #9aa0a6; transition: .3s; border-radius: 50%; }
    .v-g-toggle input:checked + .v-g-slider { background-color: #8ab4f8; }
    .v-g-toggle input:checked + .v-g-slider:before { transform: translateX(18px); background-color: #131314; }
    .v-g-app-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .v-g-app-row:last-child { border-bottom: none; padding-bottom: 0; }
    .v-g-grid-box { height: 12px; border-radius: 4px; transition: all 0.5s ease; }

    @keyframes geminiSpin { 100% { transform: rotate(360deg); } }
    .v-g-spinner { animation: geminiSpin 2s linear infinite; }

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

        .v-gemini-workspace {
            font-family: 'Plus Jakarta Sans', sans-serif !important;
            padding: 12px;
            color: #e3e3e6;
            display: flex;
            flex-direction: column;
            gap: 16px;
            box-sizing: border-box;
            background: #131314;
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
        }

        .v-g-nav-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            padding-bottom: 15px;
            margin-top: 8px;
        }

        .v-g-nav-title {
            font-size: 15px;
            font-weight: 700;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .v-g-sparkle-icon {
            background: linear-gradient(135deg, #8ab4f8, #c58af9);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
        }

        .v-g-toggle-wrapper {
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 100px;
            padding: 6px;
            display: flex;
            position: relative;
            margin: 0 auto 10px auto;
            width: 100%;
            max-width: 100%;
        }

        .v-g-toggle-btn {
            flex: 1;
            padding: 12px 10px;
            border: none;
            background: transparent;
            color: #80868b;
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
            z-index: 2;
            transition: all 0.4s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .v-g-toggle-btn.active { color: #ffffff; }
        .v-g-toggle-slider {
            position: absolute;
            top: 6px; bottom: 6px; left: 6px;
            width: calc(50% - 6px);
            background: #1e1e20;
            border-radius: 100px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.1);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
        }

        .v-g-tab-content {
            display: none;
            opacity: 0;
            transform: translateY(10px) scale(0.98);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .v-g-tab-content.active {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .v-g-card-premium {
            background: #1e1e20;
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 24px;
            padding: 20px 16px;
            position: relative;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
            display: flex;
            flex-direction: column;
        }

        .v-g-card-tag {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .v-tag-blue { color: #8ab4f8; }
        .v-tag-purple { color: #c58af9; }
        .v-tag-green { color: #00e699; }
        .v-tag-orange { color: #f29900; }

        .v-g-qr-container {
            width: 100%;
            max-width: 100%;
            height: 280px;
            margin: 0 auto 16px auto;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.04);
        }

        .v-g-qr-white-frame {
            padding: 16px;
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 0 30px rgba(138, 180, 248, 0.15);
        }

        .v-g-camera-viewport {
            width: 100%;
            max-width: 100%;
            height: 300px;
            margin: 0 auto 16px auto;
            background: #000000;
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(197, 138, 249, 0.2);
        }

        #v-g-live-video { width: 100%; height: 100%; object-fit: cover; display: none; }
        .v-g-laser-slow-motion {
            position: absolute; left: 0; width: 100%; height: 2px;
            background: linear-gradient(90deg, transparent, #c58af9, #8ab4f8, transparent);
            box-shadow: 0 2px 12px rgba(197, 138, 249, 0.8);
            z-index: 5; display: none; animation: vGLaserMulus 3s ease-in-out infinite;
        }

        @keyframes vGLaserMulus { 0% { top: 10%; opacity: 0.3; } 50% { top: 90%; opacity: 1; } 100% { top: 10%; opacity: 0.3; } }

        .v-g-btn-pill {
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
            padding: 16px;
            border: none; border-radius: 100px; font-family: inherit; font-weight: 600;
            font-size: 14px; cursor: pointer; transition: all 0.25s;
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }

        .v-g-btn-blue { background: #8ab4f8; color: #131314; }
        .v-g-btn-blue:hover { background: #aecbfb; transform: translateY(-1px); }
        .v-g-btn-danger { background: rgba(242, 139, 130, 0.15); color: #f28b82; border: 1px solid rgba(242, 139, 130, 0.3); }

        .v-g-telemetry-cluster {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 5px;
        }

        .v-g-tele-node {
            background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04);
            padding: 12px; border-radius: 16px;
        }

        .v-g-tele-label { font-size: 10px; color: #80868b; text-transform: uppercase; font-weight: 700; display: block; margin-bottom: 4px; }
        .v-g-tele-value { font-size: 12px; font-weight: 600; color: #e8eaed; word-wrap: break-word; }

        .v-g-session-row {
            display: flex; align-items: center; justify-content: space-between;
            background: rgba(255, 255, 255, 0.01); border: 1px solid rgba(255, 255, 255, 0.03);
            padding: 12px; border-radius: 16px; margin-bottom: 10px;
            gap: 8px;
        }

        .v-g-diag-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px;
        }

        .v-g-diag-box {
            background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.03);
            border-radius: 12px; padding: 12px;
        }

        .v-g-diag-title { font-size: 10px; color: #80868b; margin-bottom: 8px; font-weight: 600; display: flex; justify-content: space-between; flex-direction: column; gap: 4px; }

        .v-g-progress-bg { width: 100%; height: 6px; background: rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden; margin-top: 4px; }
        .v-g-progress-fill { height: 100%; background: #00e699; border-radius: 10px; width: 0%; transition: width 0.5s; }

        .v-g-data-stream { font-family: monospace; font-size: 10px; line-height: 1.6; word-break: break-all; }

:root {
        --term-font-size: 11px;
    }

    @keyframes blinkCursor {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }

    @keyframes termAurora {
        0% {color: #00f0ff;}
        25% {color: #00ffaa;}
        50% {color: #ff00ff;}
        75% {color: #ffcc00;}
        100% {color: #00f0ff;}
    }

    .term-aurora { animation: termAurora 4s linear infinite; font-weight: bold; text-shadow: 0 0 5px rgba(255,255,255,0.3); }

    #v-layer-terminal {
        display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: #000000; z-index: 9999; flex-direction: column;
        font-family: 'Fira Code', 'Ubuntu Mono', monospace;
        box-sizing: border-box; transition: height 0.1s ease-out;
    }

    #v-terminal-box {
        flex: 1; padding: 10px; overflow-y: auto; color: #a9b7c6;
        line-height: 1.15; font-size: var(--term-font-size);
        display: flex; flex-direction: column; background: #000000;
        touch-action: pan-y;
    }

    #v-terminal-box div { word-wrap: break-word; margin-bottom: 2px; }

    #v-terminal-input-wrapper {
        display: none; align-items: center; padding: 0; margin-top: 2px; position: relative;
    }

    .term-prompt-text {
        font-size: var(--term-font-size); white-space: pre-wrap; word-break: break-all;
    }

    .term-cursor {
        display: inline-block; width: 6px; height: 1.2em; background-color: #ffffff;
        animation: blinkCursor 1s step-end infinite; vertical-align: middle; margin-left: 2px;
    }

    #v-terminal-input {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        opacity: 0; color: transparent; background: transparent; border: none; outline: none;
    }

    #v-terminal-shortcut-bar {
        background: #111111; display: flex; overflow-x: auto; padding: 4px; gap: 4px;
        user-select: none; border-top: 1px solid #333; flex-shrink: 0;
    }

    #v-terminal-shortcut-bar button {
        flex: 1; min-width: 45px; background: #222222; border: 1px solid #333;
        color: #888; font-family: monospace; font-size: 10px; padding: 8px 0;
        border-radius: 4px; cursor: pointer; font-weight: bold; transition: 0.1s;
    }

    #v-terminal-shortcut-bar button:active { background: #444; transform: scale(0.95); }

@keyframes spinRing { 100% { transform: rotate(360deg); } }
  @keyframes v-cover-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
  @keyframes pulseDotRed { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(255, 68, 68, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); } }
  .v-animated-gradient { background: linear-gradient(90deg, #00ffaa, #00c6ff, #9B51E0, #00c6ff, #00ffaa); background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: flowGradient 3s linear infinite; }
  @keyframes flowGradient { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
  @keyframes pulsePurple { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(155, 81, 224, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(155, 81, 224, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(155, 81, 224, 0); } }
  @keyframes ping { 75%, 100% { transform: scale(1.5); opacity: 0; } }
  @keyframes scanLaserCyan { 0% { top: 10px; } 50% { top: 170px; } 100% { top: 10px; } }

@keyframes liquidAuraFlow {
    0% {
      background-position: 0% center;
    }

    100% {
      background-position: 400% center;
    }

  }

  .text-asisten-premium {

    background: linear-gradient(
      to right,
      #00f0ff,
      #00ffaa,
      #4f46e5,
      #9333ea,
      #ff007f,
      #00f0ff
    );
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    animation: liquidAuraFlow 12s linear infinite;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: inline-block;
  }

  .odometer {
    font-variant-numeric: tabular-nums;
    font-family: inherit;
}

@keyframes vSpinUpload { to { transform: rotate(360deg); } }
      .v-loader-circle { width: 24px; height: 24px; border: 3px solid rgba(255,255,255,0.1); border-top-color: #00ffaa; border-radius: 50%; animation: vSpinUpload 1s linear infinite; }
      @keyframes slideInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

  .v-preview-pill {
    display: inline-flex;
    align-items: center;
    background: #1e1f20;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    padding: 6px 12px 6px 6px;
    gap: 10px;
    max-width: 250px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }

  .v-preview-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.05);
    overflow: hidden;
    flex-shrink: 0;
  }

  .v-preview-icon img, .v-preview-icon svg { width: 100%; height: 100%; object-fit: cover; }
  .v-preview-text { display: flex; flex-direction: column; overflow: hidden; }
  .v-preview-name { color: #e3e3e3; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
  .v-preview-size { color: #9aa0a6; font-size: 10px; font-weight: 500; text-transform: uppercase; }
  .v-btn-silang {
    background: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: 0.2s;
  }

  .v-btn-silang:hover { transform: scale(1.05); background: #f1f3f4; }

#v-btn-tambah {
    transform: none !important;
    transition: none !important;
  }

  #v-send-btn:has(#icon-stop[style*="opacity: 1"]) {
    background: rgba(15, 15, 17, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

@keyframes slideDownSearch { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } }

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

  @keyframes slideUpOpen {
    0% { opacity: 0; transform: translateY(35px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes slideDownClose {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(35px) scale(0.98); }
  }

.v-btn-aesthetic {
    background: rgba(26, 27, 33, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #e3e3e6;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
  }

  .v-btn-profile { box-shadow: inset 0 0 20px rgba(66, 133, 244, 0.04); }
  .v-btn-profile:hover { border-color: rgba(66, 133, 244, 0.4); background: rgba(66, 133, 244, 0.1); }

  .v-btn-music { box-shadow: inset 0 0 20px rgba(30, 215, 96, 0.04); }
  .v-btn-music:hover { border-color: rgba(30, 215, 96, 0.4); background: rgba(30, 215, 96, 0.1); }

  .v-btn-healing { box-shadow: inset 0 0 20px rgba(168, 85, 247, 0.04); }
  .v-btn-healing:hover { border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.1); }

  .v-btn-half { padding: 8px 10px; font-size: 12px; }
  .v-btn-hubungi { box-shadow: inset 0 0 20px rgba(249, 115, 22, 0.04); }
  .v-btn-hubungi:hover { border-color: rgba(249, 115, 22, 0.4); background: rgba(249, 115, 22, 0.1); }

  .v-btn-wa { box-shadow: inset 0 0 20px rgba(34, 197, 94, 0.04); }
  .v-btn-wa:hover { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.1); }

  .v-wave-multicolor { display: flex; align-items: center; gap: 2.5px; flex-shrink: 0; }
  .v-wave-multicolor span {
    width: 3px; border-radius: 2px;
    background: #1ed760;
    animation: vWaveMove 1.2s infinite ease-in-out, vWaveRainbow 3s infinite linear;
  }

  .v-wave-multicolor span:nth-child(1) { animation-delay: 0.0s, 0.0s; height: 10px; }
  .v-wave-multicolor span:nth-child(2) { animation-delay: 0.2s, 0.3s; height: 16px; }
  .v-wave-multicolor span:nth-child(3) { animation-delay: 0.4s, 0.6s; height: 12px; }
  .v-wave-multicolor span:nth-child(4) { animation-delay: 0.1s, 0.9s; height: 14px; }

  @keyframes vWaveMove {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1.1); }
  }

  @keyframes vWaveRainbow {
    0% { filter: hue-rotate(0deg) brightness(1); }
    33% { filter: hue-rotate(60deg) brightness(1.3); }
    66% { filter: hue-rotate(-40deg) brightness(1.2); }
    100% { filter: hue-rotate(0deg) brightness(1); }
  }

  .v-tag-prismatic {
    margin-left: auto;
    background: linear-gradient(120deg, #ff007a, #7a00ff, #00f0ff, #1ed760, #ff007a);
    background-size: 400% 400%;
    animation: vPrismaticBg 5s infinite linear;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
  }

  @keyframes vPrismaticBg {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }

  #v-menu-options button.v-active-menu {
    background: #00ffaa !important; border-color: #00ffaa !important;
    color: #131314 !important; box-shadow: 0 0 15px rgba(0, 255, 170, 0.6) !important; font-weight: 800 !important;
  }

  #v-menu-options button.v-active-menu svg.v-icon-stroke { stroke: #131314 !important; }
  #v-menu-options button.v-active-menu svg.v-icon-fill { fill: #131314 !important; }
  .v-check-mark { opacity: 0; transform: scale(0.5); transition: all 0.3s; }
  #v-menu-options button.v-active-menu .v-check-mark { opacity: 1; transform: scale(1); }
 #v-screen{-webkit-overflow-scrolling:touch;overflow-y:scroll;overscroll-behavior-y:contain;will-change:transform;transform:translateZ(0);backface-visibility:hidden;}
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes rotateBorder { to { --angle: 360deg; } }
@keyframes vStrokeRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes vSlideUp { 0% { opacity: 0; transform: translateY(15px); border-color: red; } 100% { opacity: 1; transform: translateY(0); border-color: transparent; } }
@keyframes vRotateGemini { to { transform: rotate(360deg); } }
@keyframes vDotBlink { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes vFadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes shineAnimation { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

:root {
    --bg-dark: #09090b;
    --bg-bubble-user: #27272a;
    --bg-bubble-ai: transparent;
    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --accent: #6366f1;
}

.v-capsule {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
}

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

.v-capsule-inner {
    position: relative;
    padding: 4px 12px;
    border-radius: 20px;
    background: #1e1e20;
    color: #00f0ff;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    overflow: hidden;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.v-capsule-inner::before {
    content: '';
    position: absolute;
    top: -150%;
    left: -50%;
    width: 200%;
    height: 400%;
    background: conic-gradient(from 0deg, #00f0ff, #7000ff, #ff0077, #00ffaa, #00f0ff);
    animation: rgbPutar 4s linear infinite;
    z-index: -2;
}

.v-capsule-inner::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: #1e1e20;
    border-radius: 19px;
    z-index: -1;
}

@keyframes fadeTerang {
    0% { color: #131314; opacity: 0; filter: blur(2px); }
    100% { color: #e3e3e3; opacity: 1; filter: blur(0); }
}

.v-teks-halus {
    display: inline;
    animation: fadeTerang 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

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

.v-capsule-asisten {
    position: relative;
    padding: 4px 12px;
    border-radius: 20px;
    background: #1e1e20;
    color: #00f0ff;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    overflow: hidden;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
}

.v-capsule-asisten::before {
    content: '';
    position: absolute;
    top: -150%;
    left: -50%;
    width: 200%;
    height: 400%;
    background: conic-gradient(from 0deg, #00f0ff, #7000ff, #ff0077, #00ffaa, #00f0ff);
    animation: rgbPutar 4s linear infinite;
    z-index: -2;
}

.v-capsule-asisten::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: #1e1e20;
    border-radius: 19px;
    z-index: -1;
}

@keyframes bubbleSmooth {
    0% {
        opacity: 0;
        transform: translateY(25px) scale(0.97);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

}

.v-msg-left {
    align-self: flex-start !important;
    width: 100% !important;
    max-width: 97% !important;
    margin-top: 15px !important;
    padding: 4px 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    animation: bubbleSmooth 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    will-change: transform, opacity, filter;
}

.v-msg-right {
    align-self: flex-end;
    max-width: 35%;
    margin-top: 15px;
    padding: 12px 16px;
    border-radius: 18px 18px 4px 18px;
    font-size: 14px;
    background: var(--bg-bubble-user);
    color: var(--text-primary);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2);
    animation: bubbleSmooth 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    will-change: transform, opacity;
}

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

@keyframes spin-dash {
    0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

.v-action-btn {
    padding: 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: #fff;
    transition: 0.2s;
}

.v-action-btn:hover { background: rgba(255,255,255,0.1); }

.v-dot-neon, .v-text-shine { display: none; }

  .v-glow-bg {
    position: absolute; width: 250px; height: 250px; border-radius: 50%;
    background: radial-gradient(circle, rgba(155,114,203,0.15) 0%, rgba(0,0,0,0) 70%);
    animation: vPulseGlow 3s infinite alternate; z-index: -1;
  }

  .v-ai-sparkle-main { animation: vAiSpin 3s cubic-bezier(0.4, 0, 0.2, 1) infinite; filter: drop-shadow(0 0 15px rgba(155,114,203,0.8)); }
  .v-ai-sparkle-mini { animation: vAiSpinRev 2s linear infinite; filter: drop-shadow(0 0 8px rgba(66,133,244,0.8)); }
  .v-ai-sparkle-mini2 { animation: vAiSpin 1.5s linear infinite; filter: drop-shadow(0 0 8px rgba(217,101,112,0.8)); }

  @keyframes vPulseGlow { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 1; } }
  @keyframes vAiSpin { 0% { transform: rotate(0deg) scale(0.9); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(0.9); } }
  @keyframes vAiSpinRev { 0% { transform: rotate(360deg) scale(0.8); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(0deg) scale(0.8); } }

  @keyframes v-cover-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  @keyframes v-pulse-online {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
  }

  @keyframes v-pop-up {
    0% { transform: translate(-50%, -40%); opacity: 0; }
    100% { transform: translate(-50%, -50%); opacity: 1; }
  }

  @keyframes shakeButtonX {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

@keyframes slideUpPop {
    0% { opacity: 0; transform: translateY(20px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideDownPop {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(20px) scale(0.95); }
}

@keyframes neonBorderPulse {
    0% { border-color: rgba(0, 242, 254, 0.1); box-shadow: 0 8px 24px rgba(0,0,0,0.3), inset 0 0 0px rgba(0,242,254,0); }
    50% { border-color: rgba(0, 242, 254, 0.5); box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 0 15px rgba(0,242,254,0.15); }
    100% { border-color: rgba(0, 242, 254, 0.1); box-shadow: 0 8px 24px rgba(0,0,0,0.3), inset 0 0 0px rgba(0,242,254,0); }
}

@keyframes sweepShine {
    0% { transform: translateX(-150%); }
    50% { transform: translateX(150%); }
    100% { transform: translateX(150%); }
}

@keyframes radarBerdetak {
    0% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.8); }
    70% { box-shadow: 0 0 0 8px rgba(255, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); }
}

@keyframes textBreatheCinematic {
    0% { opacity: 0.7; text-shadow: 0 0 4px rgba(255, 68, 68, 0.3); }
    50% { opacity: 1; text-shadow: 0 0 10px rgba(255, 68, 68, 0.8); }
    100% { opacity: 0.7; text-shadow: 0 0 4px rgba(255, 68, 68, 0.3); }
}

@keyframes softPulseDot {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes floatAvatar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.odometer {
    font-variant-numeric: tabular-nums;
    font-family: inherit;
}

@keyframes vCahayaSerong {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 200%; }
}

@keyframes vGlowPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 255, 170, 0.3); }
    70% { box-shadow: 0 0 0 12px rgba(0, 255, 170, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 170, 0); }
}

.v-sec-box {
    position: relative;
    background: #1e1f20;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 18px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.v-sec-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 25%, rgba(0, 255, 170, 0.06) 50%, transparent 75%);
    background-size: 200% 200%;
    animation: vCahayaSerong 3.5s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.v-sec-box:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 255, 170, 0.25);
    background: #232426;
}

.v-sec-box:hover::before { opacity: 1; }
.v-sec-box:active { transform: scale(0.98); }

.v-sec-btn-modern {
    width: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 14px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.v-sec-btn-modern:hover {
    background: rgba(0, 255, 170, 0.1);
    border-color: #00ffaa;
    color: #00ffaa;
}

.v-premium-glow {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(0, 162, 255, 0.2);
    font-weight: 800;
    letter-spacing: 0.5px;
}

.v-security-box {
    background: linear-gradient(145deg, rgba(20, 20, 22, 0.9) 0%, rgba(15, 15, 17, 1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.02), 0 4px 15px rgba(0, 0, 0, 0.5);
}

.v-bar-track {
    width: 100%; height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 12px;
}

.v-bar-fill {
    height: 100%; width: 0%;
    border-radius: 4px;
    transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.v-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.v-terminal-log {
    background: #0a0a0c;
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: 14px;
    border-radius: 12px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.8;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}

@keyframes vNeonBreathe {
    0%, 100% { opacity: 0.8; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.3); }
}

@keyframes vScanline {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

html, body {
    width: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    background-color: #131314;
    overflow: hidden;
}

body > * {
    padding-top: env(safe-area-inset-top) !important;
}

div[style*="padding: 12px 16px"][style*="z-index: 9999"] {
    z-index: 90 !important;
    background: #131314 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 -10px 25px -8px rgba(0, 0, 0, 0.6) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.02) !important;

    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
}

.v-g-card-premium,
.v-model-flash-container {
    flex-shrink: 0 !important;
    min-height: max-content !important;
    width: 104% !important;
    margin-left: -2% !important;
    overflow: visible !important;
}

.v-gemini-workspace {
    height: calc(100dvh - 80px - env(safe-area-inset-bottom));
    overflow-y: auto;
    padding-bottom: 90px !important;
}

html, body {
    width: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    background-color: #131314;
    overflow: hidden;
}

body > * {
    padding-top: env(safe-area-inset-top) !important;
}

div[style*="padding: 12px 16px"][style*="z-index: 9999"] {
    z-index: 90 !important;
    background: #131314 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 -10px 25px -8px rgba(0, 0, 0, 0.6) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.02) !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
}

.v-gemini-workspace {
    height: calc(100dvh - 80px - env(safe-area-inset-bottom));
    overflow-y: auto;
    padding-bottom: 90px !important;
}

.v-g-card-premium,
.v-model-flash-container {
    flex-shrink: 0 !important;
    min-height: max-content !important;
    width: 104% !important;
    margin-left: -2% !important;
    overflow: visible !important;
}

.v-g-btn-pill {
    max-width: 320px !important;
    margin: 0 auto !important;
}

.v-g-toggle-wrapper {
    max-width: 400px !important;
    margin: 0 auto 10px auto !important;
}

.v-music-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(8, 8, 10, 0.45);
    backdrop-filter: blur(22px);
    z-index: 9999999 !important; display: none; opacity: 0; transition: opacity 0.4s ease;
}

.v-music-modal-modern, .v-modern-audio-bubble {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.v-music-modal-modern {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0;
    background: transparent; display: flex; flex-direction: column;
    transform: translateY(-100%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
}

.v-music-header-area {
    padding: calc(16px + env(safe-area-inset-top)) 20px 10px;
    background: linear-gradient(to bottom, rgba(10, 10, 12, 0.95) 70%, rgba(10, 10, 12, 0));
    z-index: 10;
}

.v-music-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

.v-text-neon-blue {
    color: #f3f4f6 !important; font-weight: 700; font-size: 16px;
    letter-spacing: -0.1px; display: flex; align-items: center; gap: 9px; text-transform: none !important;
}

.v-anim-wave-slow { display: flex; align-items: center; gap: 2px; }
.v-anim-wave-slow span {
    width: 2.5px; height: 14px; background: #1ed760; border-radius: 1px;
    animation: vWaveSlow 2.8s infinite ease-in-out;
}

.v-anim-wave-slow span:nth-child(1) { animation-delay: 0.1s; height: 8px; }
.v-anim-wave-slow span:nth-child(2) { animation-delay: 0.6s; height: 16px; }
.v-anim-wave-slow span:nth-child(3) { animation-delay: 0.3s; height: 11px; }
.v-anim-wave-slow span:nth-child(4) { animation-delay: 0.8s; height: 15px; }
@keyframes vWaveSlow { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1.1); } }

.v-close-btn {
    background: rgba(255,255,255,0.07); border-radius: 50%; padding: 8px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; z-index: 20;
}

.v-close-btn:hover { background: rgba(255, 255, 255, 0.14); transform: scale(1.06); }
.v-close-btn:active { transform: scale(0.92); }

.v-music-search-wrap { position: relative; display: flex; align-items: center; margin-bottom: 12px; z-index: 10;}
.v-search-icon { position: absolute; left: 16px; color: #9ca3af; pointer-events: none; display: flex; align-items: center;}
.v-music-search-box {
    width: 100%; padding: 11px 16px 11px 44px; border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.06); background: rgba(20, 20, 24, 0.8);
    color: #fff; font-family: inherit; font-size: 14px; outline: none; transition: all 0.3s ease;
}

.v-music-search-box:focus { border-color: rgba(30, 215, 96, 0.4); background: rgba(20, 20, 24, 0.95); box-shadow: 0 0 12px rgba(30, 215, 96, 0.1); }

.v-capsule-scroll-area {
    width: 100%; overflow-x: auto; white-space: nowrap; padding: 2px 0 6px 0;
    margin-bottom: 4px; display: flex; gap: 8px; z-index: 12; position: relative;
    scrollbar-width: none; -ms-overflow-style: none; transition: opacity 0.3s ease;
}

.v-capsule-scroll-area::-webkit-scrollbar { display: none; }

.v-capsule-item {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 7px 15px; border-radius: 20px; font-size: 12px; font-weight: 600;
    color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07); cursor: pointer; transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.v-capsule-item svg { fill: currentColor; transition: 0.2s; }
.v-capsule-item:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.v-capsule-item.active {
    color: #1ed760 !important; background: rgba(30, 215, 96, 0.07) !important;
    border-color: #1ed760 !important; box-shadow: 0 0 10px rgba(30, 215, 96, 0.15); font-weight: 700;
}

.v-music-results {
    flex: 1; overflow-y: auto; padding: 2px 20px calc(24px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 7px; min-height: 0; z-index: 5;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.v-fade-out-smooth { opacity: 0 !important; transform: translateY(5px); }

@keyframes iosListDrop { 0% { opacity: 0; transform: translateY(-12px); } 100% { opacity: 1; transform: translateY(0); } }

.v-music-item {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02); border-radius: 12px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.03); transition: all 0.2s ease; position: relative;
    opacity: 0; animation: iosListDrop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.v-music-item:hover { background: rgba(255, 255, 255, 0.05); }
.v-item-removing { animation: vRemoveItem 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important; pointer-events: none; }
@keyframes vRemoveItem {
    0% { opacity: 1; transform: scale(1); margin-bottom: 7px; }
    100% { opacity: 0; transform: scale(0.9); margin-bottom: -50px; padding: 0; height: 0; border: none; }
}

.v-music-info { flex: 1; display: flex; flex-direction: column; overflow: hidden; justify-content: center; pointer-events: none; }
.v-music-title { color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 2px; }
.v-music-artist { color: #9ca3af; font-size: 11px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.v-music-duration { color: #6b7280; font-size: 11px; margin-top: 2px; font-weight: 600; }

.v-list-action-wrapper { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.v-modal-fav-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.25); transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.v-modal-fav-btn.active { color: #ffb703 !important; transform: scale(1.15); }
.v-modal-fav-btn svg { width: 16px; height: 16px; fill: currentColor; }
.v-pop-anim { animation: vPopSoft 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes vPopSoft { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1.15); } }

.v-send-btn { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #d1d5db; background: rgba(255, 255, 255, 0.04); transition: all 0.25s; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.06); }
.v-send-btn.sent { background: rgba(30, 215, 96, 0.1); color: #1ed760; border-color: transparent; }

.v-cover-wrapper { position: relative; width: 40px; height: 40px; border-radius: 6px; flex-shrink: 0; overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,0.3); pointer-events: none; }
.v-music-cover { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }

.v-wave-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.65); display: none; align-items: center; justify-content: center; gap: 2px; z-index: 10; }
.v-wave-bar { width: 2px; background: #1ed760; border-radius: 1px; animation: vWave 1s infinite ease-in-out; }
.v-wave-bar:nth-child(1) { animation-delay: 0s; height: 30%; } .v-wave-bar:nth-child(2) { animation-delay: 0.2s; height: 70%; } .v-wave-bar:nth-child(3) { animation-delay: 0.4s; height: 40%; }
@keyframes vWave { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }

.v-spinner-premium { width: 34px; height: 34px; animation: vSpinRotate 2s linear infinite; }
.v-spinner-circle { fill: none; stroke: #1ed760; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: vSpinDash 1.5s ease-in-out infinite; }
@keyframes vSpinRotate { 100% { transform: rotate(360deg); } }
@keyframes vSpinDash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 90, 200; stroke-dashoffset: -124px; } }

.v-refresh-icon { transition: transform 0.3s ease; }
.v-refresh-icon.loading { animation: vSpinRotate 1s linear infinite; }

#v-screen { padding-bottom: 160px !important; }

.v-toast-container { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 999999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.v-toast-manja {
    background: rgba(20, 20, 24, 0.95); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px;
    padding: 10px 18px; color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    animation: vToastIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.v-toast-manja.v-toast-out { animation: vToastOut 0.4s ease forwards; }
@keyframes vToastIn { 0% { opacity: 0; transform: translateY(20px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes vToastOut { 100% { opacity: 0; transform: translateY(-10px) scale(0.9); } }

.v-chat-wrapper-left { display: flex; justify-content: flex-start; margin: 14px 0; width: 100%; }
.v-modern-audio-bubble {
    background: rgba(14, 15, 18, 0.85); backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 28px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
    width: 265px; position: relative; z-index: 1; box-shadow: 0 14px 28px rgba(0,0,0,0.35); overflow: hidden;
}

.v-theme-dj { --v-glow-1: #ff007f; --v-glow-2: #00f0ff; --v-glow-3: #9333ea; --v-aurora: linear-gradient(0deg, rgba(255,0,127,0.08), rgba(0,240,255,0.08), transparent); }
.v-theme-sad { --v-glow-1: #e2e8f0; --v-glow-2: #94a3b8; --v-glow-3: #475569; --v-aurora: linear-gradient(0deg, rgba(226,232,240,0.05), rgba(148,163,184,0.03), transparent); }
.v-theme-chill { --v-glow-1: #ff7e5f; --v-glow-2: #feb47b; --v-glow-3: #f5af19; --v-aurora: linear-gradient(0deg, rgba(255,126,95,0.08), rgba(254,180,123,0.05), transparent); }
.v-theme-default { --v-glow-1: #1ed760; --v-glow-2: #00f0ff; --v-glow-3: #ff007f; --v-aurora: linear-gradient(0deg, rgba(30,215,96,0.06), rgba(0,240,255,0.04), transparent); }

.v-modern-audio-bubble::before {
    content: ''; position: absolute; inset: -2px; border-radius: 30px; z-index: -2;
    background: linear-gradient(90deg, var(--v-glow-1, #1ed760), var(--v-glow-2, #00f0ff), var(--v-glow-3, #ff007f), var(--v-glow-1, #1ed760));
    background-size: 400% 400%; opacity: 0; transition: opacity 0.6s ease; pointer-events: none;
}

.v-modern-audio-bubble.playing::before { opacity: 1; animation: prismaticGlow 6s linear infinite; }
@keyframes prismaticGlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.v-modern-audio-bubble::after { content: ''; position: absolute; inset: 1px; background: rgba(14, 15, 18, 0.96); border-radius: 27px; z-index: -1; pointer-events: none; }

.v-audio-inner-aurora { position: absolute; bottom: -100%; left: 0; right: 0; height: 200%; background: var(--v-aurora, linear-gradient(0deg, rgba(30,215,0,0.04), transparent)); z-index: 0; opacity: 0; pointer-events: none; transition: opacity 1s ease; }
.v-modern-audio-bubble.playing .v-audio-inner-aurora { opacity: 1; animation: auroraUpwards 9s linear infinite; }
@keyframes auroraUpwards { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }

.v-particle-wrapper { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; border-radius: 28px; }
.v-music-dot {
    position: absolute; bottom: -12px; background: radial-gradient(circle, var(--v-glow-1, #1ed760) 0%, rgba(255,255,255,0) 70%) !important;
    border-radius: 50%; pointer-events: none; opacity: 0; animation: floatUpward linear forwards;
}

@keyframes floatUpward { 0% { transform: translateY(0) translateX(0) scale(0.5); opacity: 0; } 15% { opacity: 0.6; } 85% { opacity: 0.4; } 100% { transform: translateY(-260px) translateX(var(--random-x, 15px)) scale(1.3); opacity: 0; } }

.v-audio-action-heart { color: #5a5f6d; cursor: pointer; transition: transform 0.2s; display: flex; align-items: center; justify-content: center; position: relative; width: 24px; height: 24px; }
.v-audio-action-heart.liked { color: #ff2d55 !important; }
.v-love-wave-aura {
    position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 45, 85, 0.4); pointer-events: none;
    transform: translate(-50%, -50%) scale(0.5); opacity: 1; animation: vLovePulseExplode 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; z-index: 10;
}

@keyframes vLovePulseExplode { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; box-shadow: 0 0 0 0px rgba(255, 45, 85, 0.6); } 100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; box-shadow: 0 0 20px 10px rgba(255, 45, 85, 0); } }
@keyframes vMicroHeartbeat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.28); } 60% { transform: scale(0.92); } 80% { transform: scale(1.1); } }
.v-heartbeat-active { animation: vMicroHeartbeat 0.45s ease-out forwards; }

.v-audio-large-cover-wrap { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,0.4); background-color: #121214; z-index: 2; }
.v-audio-cover-huge { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.v-player-badge { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.65); padding: 4px 8px; border-radius: 12px; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.3px; border: 1px solid rgba(255,255,255,0.08); }

.v-audio-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; z-index: 2; position: relative; margin-top: 2px; }
.v-audio-info-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.v-modern-audio-bubble .v-audio-title { color: #ffffff !important; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; }
.v-modern-audio-bubble .v-audio-artist { color: #9ca3af !important; font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.v-utility-actions-group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.v-audio-action-fav { color: #5a5f6d; cursor: pointer; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.v-audio-action-fav.favorited { color: #ffb703 !important; transform: scale(1.18); }
.v-heart-icon, .v-tiktok-fav-icon { width: 19px; height: 19px; fill: currentColor; }

.v-audio-tech-details { display: flex; gap: 5px; align-items: center; z-index: 2; position: relative; margin-top: 1px; flex-wrap: nowrap; overflow: hidden; }
.v-badge-tech { font-size: 8px; font-weight: 800; padding: 3px 6px; border-radius: 5px; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.v-badge-playcount { color: #9ca3af; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255,255,255,0.04); text-transform: none !important; }

.v-tag-0 { color: #00f0ff; background: rgba(0,240,255,0.12); border: 1px solid rgba(0, 240, 255, 0.3); } .v-tag-1 { color: #1ed760; background: rgba(30,215,96,0.12); border: 1px solid rgba(30, 215, 96, 0.3); } .v-tag-2 { color: #d8b4fe; background: rgba(168,85,247,0.12); border: 1px solid rgba(168, 85, 247, 0.3); } .v-tag-3 { color: #22d3ee; background: rgba(34,211,238,0.12); border: 1px solid rgba(34, 211, 238, 0.3); } .v-tag-4 { color: #fb7185; background: rgba(225,29,72,0.12); border: 1px solid rgba(225, 29, 72, 0.3); } .v-tag-5 { color: #ff9f1c; background: rgba(255,159,28,0.12); border: 1px solid rgba(255,159,28,0.3); } .v-tag-6 { color: #a55eed; background: rgba(165,94,237,0.12); border: 1px solid rgba(165,94,237,0.3); } .v-tag-7 { color: #06b6d4; background: rgba(6,182,212,0.12); border: 1px solid rgba(6,182,212,0.3); } .v-tag-8 { color: #10b981; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); } .v-tag-9 { color: #f43f5e; background: rgba(244,63,94,0.12); border: 1px solid rgba(244,63,94,0.3); }

.v-audio-progress-container { display: flex; align-items: center; gap: 8px; width: 100%; z-index: 2; position: relative; margin-top: 2px; }
.v-audio-time { color: #ffffff !important; font-size: 11px; font-weight: 600; font-family: 'Quicksand', 'Nunito', ui-rounded, 'SF Pro Rounded', -apple-system, sans-serif; letter-spacing: 0.3px; min-width: 32px; text-align: center; }
.v-modern-audio-bubble input[type="range"] { flex: 1; height: 3px; -webkit-appearance: none; background: #202024; border-radius: 3px; outline: none; cursor: pointer; }
.v-modern-audio-bubble input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; background: #ffffff; border-radius: 50%; }

.v-audio-controls-row { display: flex; justify-content: space-between; align-items: center; width: 100%; z-index: 2; position: relative; padding-top: 1px; }
.v-modern-audio-bubble .v-btn-ctrl { background: none; border: none; color: #c5c5cb; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; position: relative; }
.v-modern-audio-bubble .v-btn-ctrl:hover { color: #ffffff; transform: scale(1.1); }
.v-modern-audio-bubble .v-btn-ctrl svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.v-modern-audio-bubble .v-btn-ctrl-sub { background: none; border: none; color: #5a5f6d; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; transition: 0.2s; position: relative; }
.v-modern-audio-bubble .v-btn-ctrl-sub:hover { color: #1ed760; }
.v-modern-audio-bubble .v-btn-ctrl-sub svg { width: 16px; height: 16px; fill: currentColor; }
.v-modern-audio-bubble .v-btn-play-modern { width: 40px; height: 40px; border-radius: 50%; background: #ffffff; color: #101114; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all 0.22s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.35); position: relative; }
.v-modern-audio-bubble .v-btn-play-modern:hover { transform: scale(1.06); background: #f3f4f6; }
.v-modern-audio-bubble .v-btn-play-modern svg { width: 18px; height: 18px; fill: currentColor; }

.v-tooltip-bubble {
    position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%) translateY(10px);
    background: rgba(20,20,24,0.95); color: #fff; padding: 8px 12px; border-radius: 10px;
    font-size: 10px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid rgba(255,255,255,0.1); z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); letter-spacing: 0.5px;
}

.v-tooltip-bubble.show { opacity: 1; transform: translateX(-50%) translateY(0); }

#v-screen {
    transform: none !important;
    will-change: auto !important;
}

div[style*="padding: 12px 16px"][style*="z-index: 9999"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background: #131314 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6) !important;
    z-index: 90 !important;
    box-sizing: border-box !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
}

#v-send-btn {
    background-color: #0842a0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease !important;
}

#v-send-btn:active {
    transform: scale(0.82) !important;
    background-color: #063584 !important;
}

#v-send-btn svg {
    fill: #c4c7c5 !important;
    width: 22px !important;
    height: 22px !important;
    transition: fill 0.2s ease;
}

#v-attachment-backdrop {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#v-attachment-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

#v-attachment-sheet {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background: #1e1e1f;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    z-index: 9999;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 12px;
    transition: bottom 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#v-attachment-sheet.active {
    bottom: 0;
}

.v-attach-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.v-attach-item:active {
    transform: scale(0.9);
}

.v-attach-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #2a2a2c;
    display: flex;
    justify-content: center;
    align-items: center;
}

.v-attach-icon svg {
    width: 24px;
    height: 24px;
    fill: #c4c7c5;
}

.v-attach-label {
    color: #e3e3e3;
    font-size: 12px;
    font-family: sans-serif;
    text-align: center;
    font-weight: 500;
}

.v-hidden-file {
    display: none;
}

@keyframes pulseLock { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.05); opacity: 1; } }

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

                @keyframes cardPopUp { 0% { opacity: 0; transform: translateY(12px) scale(0.99); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
                @keyframes hyperBreathe { 0% { transform: scale(1) rotate(0deg); opacity: 0.5; } 100% { transform: scale(1.12) rotate(5deg); opacity: 0.9; } }
                @keyframes drawCheckmarkHandwritten { 0% { stroke-dashoffset: 35; } 100% { stroke-dashoffset: 0; } }

                .status-pending-${idDinamis} { animation: swapOut ${waktuTungguSistem}s steps(1, end) forwards; }
                .status-terkirim-${idDinamis} { opacity: 0; position: absolute; visibility: hidden; animation: swapIn ${waktuTungguSistem}s steps(1, end) forwards; }
                @keyframes swapOut { 100% { opacity: 0; position: absolute; visibility: hidden; } }
                @keyframes swapIn { 100% { opacity: 1; position: relative; visibility: visible; } }
                @keyframes spinnerPulse { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
                @keyframes shakeError { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

                @keyframes luxuryOverlayFadeIn {
                    0% { opacity: 0; visibility: hidden; backdrop-filter: blur(0px); background: rgba(0,0,0,0); }
                    1% { visibility: visible; }
                    100% { opacity: 1; visibility: visible; backdrop-filter: blur(12px); background: rgba(10, 12, 16, 0.7); }
                }

                @keyframes luxuryZoomEntrance {
                    0% { transform: scale(0.85); opacity: 0; }
                    100% { transform: scale(1); opacity: 1; }
                }

                .mono-busy { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.3px; }

                #tutup-popup-${idDinamis}:checked ~ .overlay-popup-${idDinamis} {
                    opacity: 0 !important;
                    visibility: hidden !important;
                    transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 1.5s ease !important;
                }

                .btn-tutup-mendem-${idDinamis} {
                    display: block; margin-top: 10px; width: 100%; background: #ffffff; color: #121418;
                    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 700;
                    letter-spacing: 0.5px; padding: 11px 0; border-radius: 14px; cursor: pointer;
                    text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.15); box-sizing: border-box;
                    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
                }

                .btn-tutup-mendem-${idDinamis}:active {
                    transform: scale(0.93) translateY(2px) !important;
                    background: #d1d5db !important;
                    box-shadow: inset 0 4px 8px rgba(0,0,0,0.3) !important;
                }

                .btn-green-neo-${idDinamis} {
                    display: block; margin-top: 15px; width: 100%; background: #00ffaa; color: #000000;
                    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 800;
                    letter-spacing: 0.5px; padding: 12px 0; border-radius: 14px; cursor: pointer;
                    text-align: center; border: none; box-shadow: 0 0 15px rgba(0, 255, 170, 0.3); box-sizing: border-box;
                    transition: all 0.2s ease;
                }

                .btn-green-neo-${idDinamis}:active {
                    transform: scale(0.95);
                    box-shadow: 0 0 5px rgba(0, 255, 170, 0.5);
                }

.v-prof-card {
                width: 100%;
                box-sizing: border-box;
                background: linear-gradient(145deg, rgba(20,20,22,0.9), rgba(10,10,12,0.95));
                border: 1px solid rgba(0, 255, 170, 0.2);
                border-top: 1px solid rgba(0, 255, 170, 0.5);
                border-radius: 20px;
                padding: 16px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.5);
                animation: vSlideUp 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
            }

            .v-prof-badge {
                background: rgba(0, 255, 170, 0.1);
                border: 1px solid rgba(0, 255, 170, 0.3);
                color: #00ffaa;
                padding: 4px 10px;
                border-radius: 20px;
                font-size: 10px;
                font-weight: 800;
                letter-spacing: 0.5px;
                white-space: nowrap;
            }

            .v-skill-bg { width: 100%; height: 6px; background: rgba(255,255,255,0.05); border-radius: 4px; margin-top: 4px; overflow: hidden; }
            .v-skill-fill-1 { width: 98%; height: 100%; background: linear-gradient(90deg, #00c6ff, #00ffaa); }
            .v-skill-fill-2 { width: 92%; height: 100%; background: linear-gradient(90deg, #ff00ff, #00c6ff); }
            .v-btn-modern { flex: 1; padding: 10px; border-radius: 10px; font-size: 11px; font-weight: 800; cursor: pointer; text-align: center; text-transform: uppercase; transition: all 0.3s; }
            .v-btn-modern:hover { filter: brightness(1.2); transform: scale(0.98); }
            .v-btn-modern.v-active-kontak { background: #00ffaa !important; color: #131314 !important; box-shadow: 0 0 15px rgba(0, 255, 170, 0.6); border-color: #00ffaa !important; }
            .v-btn-modern.v-active-kolab { background: #ff00ff !important; color: #131314 !important; box-shadow: 0 0 15px rgba(255, 0, 255, 0.6); border-color: #ff00ff !important; }

@keyframes wa-radar-safe { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }
            .wa-ultra-card-safe { transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); backdrop-filter: blur(16px);
            .wa-ultra-card-safe:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0,0,0,0.5), inset 0 0 20px rgba(37, 211, 102, 0.08) !important; border-color: rgba(37, 211, 102, 0.4) !important; }
            .wa-btn-ultra-safe { background-size: 200% auto; transition: 0.5s; }
            .wa-btn-ultra-safe:hover { background-position: right center; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3) !important; transform: translateY(-2px); }
            .wa-neon-chip { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 6px 14px; border-radius: 12px; background: rgba(37, 211, 102, 0.05); color: #25D366; border: 1px solid rgba(37, 211, 102, 0.2); transition: all 0.3s ease; font-weight: 600; cursor: default; }
            .wa-neon-chip:hover { background: rgba(37, 211, 102, 0.12); border: 1px solid rgba(37, 211, 102, 0.5); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.15); transform: translateY(-2px); color: #ffffff; }
            .wa-neon-chip:hover svg { stroke: #ffffff; }

@keyframes emberRiseMini{0%{transform:translateY(0) scale(1);opacity:0;}50%{opacity:0.7;}100%{transform:translateY(-40px) scale(0.5);opacity:0;}}.v-ember-light{position:absolute;background:#38ef7d;border-radius:50%;box-shadow:0 0 6px #11998e;animation:emberRiseMini 3s infinite ease-in;pointer-events:none;}

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&display=swap');

                        body, div, span, p, h1, h2, h3, h4, button, input, textarea {
                            font-family: 'Google Sans', 'Inter', system-ui, -apple-system, sans-serif !important;
                            letter-spacing: 0.3px !important;
                            line-height: 1.5 !important;
                        }

                        @keyframes fadeInCinematic {
                            0% { opacity: 0; transform: translateY(12px); }
                            100% { opacity: 1; transform: translateY(0); }
                        }

                        @keyframes munculBersih { 0% { opacity: 0; } 100% { opacity: 1; } }
                        @keyframes scaleIn { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
                        @keyframes popIcon { 0% { transform: scale(0.8); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }

                        .ai-markdown {
                            font-family: 'Google Sans', sans-serif; color: #e3e3e3; font-size: 15px;
                            max-width: 100%; box-sizing: border-box; overflow-x: hidden;
                        }

                        .ai-p-space { height: 16px; display: block; }

                        .ai-markdown p { margin: 0 0 8px 0; }
                        .ai-markdown ul, .ai-markdown ol, .ai-markdown li { list-style: none !important; list-style-type: none !important; margin: 0; padding: 0; }
                        .ai-markdown ul, .ai-markdown ol { margin: 4px 0 12px 0; }

                        .ai-list-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; margin-top: 4px; }
                        .ai-bullet { color: #ffffff !important; font-weight: normal; flex-shrink: 0; min-width: 14px; text-align: center; display: inline-block; }

                        .ai-bold { color: #ffffff; font-weight: 600; }

                        .ai-h1, .ai-h2, .ai-h3 { color: #fff; font-weight: 600; margin: 22px 0 10px 0; line-height: 1.4; }
                        .ai-h1 { font-size: 19px; } .ai-h2 { font-size: 17px; } .ai-h3 { font-size: 15px; }
                        .ai-h4 { margin: 18px 0 8px 0; font-size: 14px; color: #ffffff; font-weight: 600; opacity: 0.95; }

                        .ai-blockquote { border-left: 3px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); padding: 8px 12px; margin: 12px 0; border-radius: 4px; font-style: italic; color: #e3e3e3; }
                        .ai-hr { border: 0; height: 1px; background: rgba(255,255,255,0.1); margin: 20px 0; }

                        .ai-highlight { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); color: inherit !important; padding: 0.1em 0.35em; border-radius: 6px; font-size: 0.9em; display: inline; word-wrap: break-word; font-family: inherit !important; font-weight: 500;}
                        .ai-highlight-krusial { background: rgba(10, 80, 255, 0.55); color: #ffffff !important; padding: 0 4px; margin: 0 2px; border-radius: 4px; font-weight: 600; display: inline; line-height: 1.5; font-size: inherit;}

                        .ai-code-box { margin: 15px 0; border-radius: 12px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255,255,255,0.04); overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.2); display: block; max-width: 100%; box-sizing: border-box;}
                        .ai-code-head { background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.03); padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; }
                        .ai-code-head span { color: #888; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }
                        .ai-code-body { padding: 12px 16px; font-family: 'JetBrains Mono', Consolas, monospace !important; font-size: 9px !important; -webkit-text-size-adjust: none !important; overflow-x: auto; color: #e2e8f0 !important; white-space: pre; line-height: 1.5; box-sizing: border-box; max-width: 100%;}
                        .ai-copy-code-btn { background: transparent; border: none; color: #888; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; cursor: pointer; transition: 0.2s; font-family: 'Google Sans', sans-serif; padding: 4px 8px; border-radius: 8px;}
                        .ai-copy-code-btn:hover { color: #ffffff; background: rgba(255,255,255,0.1); }

                        .ai-action-bar { display: flex; gap: 8px; margin-top: 16px; animation: scaleIn 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
                        .ai-act-btn { background: transparent; border: none; color: #9aa0a6; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; padding: 0; outline: none; }
                        .ai-act-btn:hover { background: rgba(255,255,255,0.08); color: #e3e3e3; }
                        .ai-act-btn:active svg { transform: scale(0.8); }
                        .ai-act-btn svg { width: 18px; height: 18px; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
                        .ai-act-btn.active-like { color: #a8c7fa !important; background: rgba(168, 199, 250, 0.15); }
                        .ai-act-btn.active-like svg { fill: #a8c7fa; animation: popIcon 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
                        .ai-act-btn.active-dislike { color: #f28b82 !important; background: rgba(242, 139, 130, 0.15); }
                        .ai-act-btn.active-dislike svg { fill: #f28b82; animation: popIcon 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

@keyframes smoothMuncul { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .ai-code-box .ai-code-body, .ai-code-box .ai-code-body * { font-size: 11px !important; line-height: 1.5 !important; }

.v-spinner-container { position: relative; width: 22px; height: 22px; flex-shrink: 0; color: #cbd5e1; }
        .v-abs-spin { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease-in-out; }

        .v-spin-mat { animation: v-rot 2s linear infinite; }
        .v-spin-mat circle { stroke: currentColor; stroke-width: 4; fill: none; stroke-linecap: round; animation: v-dash 1.5s ease-in-out infinite; }
        @keyframes v-rot { 100% { transform: rotate(360deg); } }
        @keyframes v-dash { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } }

        .v-spin-wave { fill: currentColor; }
        .v-spin-wave circle { animation: v-jump 1.2s infinite ease-in-out; transform-origin: center; }
        .v-spin-wave circle:nth-child(1) { animation-delay: 0s; }
        .v-spin-wave circle:nth-child(2) { animation-delay: 0.15s; }
        .v-spin-wave circle:nth-child(3) { animation-delay: 0.3s; }
        @keyframes v-jump { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-5px); opacity: 1; } }

        .v-spin-dots-circle { animation: v-rot 2.5s linear infinite; }
        .v-spin-dots-circle circle { fill: currentColor; animation: v-dot-chase 1s infinite linear; }
        .v-spin-dots-circle circle:nth-child(1) { animation-delay: 0s; }
        .v-spin-dots-circle circle:nth-child(2) { animation-delay: 0.125s; }
        .v-spin-dots-circle circle:nth-child(3) { animation-delay: 0.25s; }
        .v-spin-dots-circle circle:nth-child(4) { animation-delay: 0.375s; }
        .v-spin-dots-circle circle:nth-child(5) { animation-delay: 0.5s; }
        .v-spin-dots-circle circle:nth-child(6) { animation-delay: 0.625s; }
        .v-spin-dots-circle circle:nth-child(7) { animation-delay: 0.75s; }
        .v-spin-dots-circle circle:nth-child(8) { animation-delay: 0.875s; }
        @keyframes v-dot-chase { 0% { opacity: 1; } 100% { opacity: 0.1; } }

        .v-spin-ring { animation: v-rot 4s linear infinite; }
        .v-spin-ring circle { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-dasharray: 10 15; stroke-linecap: round; animation: v-rot 2s ease-in-out infinite alternate; transform-origin: center; }

        .v-spin-orbit { animation: v-rot 1.5s linear infinite; transform-origin: center; }

        .v-spin-dual-ring { transform-origin: center; }
        .v-spin-dual-ring .v-ring-out { animation: v-rot 2.5s linear infinite; transform-origin: center; }
        .v-spin-dual-ring .v-ring-in { animation: v-rot-rev 2s linear infinite; transform-origin: center; }
        @keyframes v-rot-rev { 100% { transform: rotate(-360deg); } }

        .vgen-super-text {
            font-family: system-ui, -apple-system, sans-serif;
            font-size: 14.5px;
            font-weight: 600;
            letter-spacing: 0.4px;
            background: linear-gradient(90deg, #6b7280 15%, #cbd5e1 40%, #ffffff 50%, #e2e8f0 60%, #6b7280 85%);
            background-size: 200% auto;
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            display: inline-block;
            animation: sweepRight 3s linear infinite;
        }

        @keyframes scanOut { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
        @keyframes scanIn { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
        @keyframes sweepRight { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }

.v-static-container {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 40px;
                    height: 26px;
                    margin-right: 8px;
                    position: relative;
                    overflow: visible;
                    opacity: 1;
                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .v-static-container.v-closing {
                    width: 0px !important;
                    margin-right: 0px !important;
                    opacity: 0 !important;
                }

                .v-bulat-wrapper {
                    width: 16px;
                    height: 16px;
                    background-color: #ffffff;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;
                    filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.5));
                }

                .v-bulat-wrapper svg, .v-bulat-wrapper img {
                    width: 75%;
                    height: 75%;
                    object-fit: contain;
                }

                .v-sync-logo {
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    opacity: 0;
                    animation: googleDotSync 5s infinite linear;
                }

                @keyframes googleDotSync {
                    0% { transform: translateX(11px) scale(0); opacity: 0; z-index: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
                    4% { transform: translateX(11px) scale(0.85); opacity: 1; z-index: 1; animation-timing-function: linear; }
                    16% { transform: translateX(11px) scale(0.85); opacity: 1; z-index: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
                    20% { transform: translateX(0px) scale(1.15); opacity: 1; z-index: 3; animation-timing-function: linear; }
                    36% { transform: translateX(0px) scale(1.15); opacity: 1; z-index: 3; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
                    40% { transform: translateX(-11px) scale(0.85); opacity: 1; z-index: 2; animation-timing-function: linear; }
                    56% { transform: translateX(-11px) scale(0.85); opacity: 1; z-index: 2; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
                    60% { transform: translateX(-11px) scale(0); opacity: 0; z-index: 1; }
                    100% { transform: translateX(-11px) scale(0); opacity: 0; z-index: 1; }
                }