@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    :root { --v-bg-main: #0f172a; --v-bg-card: #1e293b; --v-text-main: #e2e8f0; --v-primary: #3b82f6; }
    .vertex-admin-wrap { background: var(--v-bg-main); color: var(--v-text-main); padding: 2.5rem; border-radius: 12px; font-family: 'Inter', sans-serif; min-height: 600px; margin: 20px; }
    #vertex-chat-widget { position: fixed; bottom: 20px; right: 20px; z-index: 2147483647; font-family: 'Inter', sans-serif; }
    .vertex-fab { width: 60px; height: 60px; border-radius: 50%; background: var(--v-primary); box-shadow: 0 10px 25px rgba(59,130,246,0.5); display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; transition: transform 0.2s; }
    .vertex-fab:hover { transform: scale(1.05); }
    .vertex-chat-window { position: absolute; bottom: 80px; right: 0; width: 380px; height: 600px; max-height: 80vh; background: var(--v-bg-main); border-radius: 16px; border: 1px solid #334155; display: none; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); z-index: 2147483647; }
    .vertex-chat-window.open { display: flex; }
    .vertex-chat-header { background: var(--v-bg-card); padding: 16px; border-bottom: 1px solid #334155; display: flex; justify-content: space-between; align-items: center; color: white; font-weight: 600; }
    .vertex-chat-body { flex: 1; padding: 20px; overflow-y: auto; background: var(--v-bg-main); color: var(--v-text-main); display: flex; flex-direction: column; gap: 15px; }
    .vertex-msg { padding: 12px 16px; border-radius: 12px; max-width: 85%; font-size: 0.9rem; line-height: 1.5; }
    .vertex-msg.bot { background: var(--v-bg-card); border: 1px solid #334155; border-top-left-radius: 2px; }
    .vertex-msg.user { background: var(--v-primary); color: white; align-self: flex-end; border-bottom-right-radius: 2px; }
    .vertex-btn { background: var(--v-primary); color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; margin-top: 8px; display: inline-block; text-align: center; width: auto; transition: background 0.2s; }
    .vertex-btn.full { width: 100%; }
    .vertex-btn:hover { background: #2563eb; }
    .vertex-input-row { padding: 16px; background: #1e293b; border-top: 1px solid #334155; display: flex; gap: 10px; align-items:center; }
    .vertex-input-row input { flex:1; min-width: 0; background:#020617; border:1px solid #334155; color:white; padding:10px; border-radius:6px; }
    .vertex-input-row button { margin-top: 0; width: auto; min-width: 60px; }
    
    /* Code Studio & Modals */
    .vertex-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 2147483647; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
    .vertex-modal-content { background: #1e1e1e; width: 95vw; height: 95vh; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #333; box-shadow: 0 0 50px rgba(0,0,0,0.5); font-family: monospace; }
    .vertex-file-tree { padding-left: 10px; }
    .vertex-folder-row { display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 4px 0; color: #ccc; font-size: 13px; }
    .vertex-folder-row:hover { color: white; background: #2a2d2e; }
    .vertex-folder-row.active { background: #37373d; color: white; }
    .vertex-folder-arrow { padding: 0 4px; cursor: pointer; color: #888; }
    .vertex-folder-arrow:hover { color: white; }
    .vertex-folder-contents { display: none; padding-left: 14px; border-left: 1px solid #333; margin-left: 4px; }
    .vertex-folder.open > .vertex-folder-contents { display: block; }
    
    .vertex-file { cursor: pointer; padding: 4px 8px; color: #888; display: flex; align-items: center; gap: 6px; font-size: 12px; border-radius: 4px; }
    .vertex-file:hover { background: #2a2d2e; color: #fff; }
    .vertex-file.active { background: #37373d; color: #fff; }
    .vertex-spinner { animation: spin 1s linear infinite; display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; vertical-align: middle; margin-right: 5px; }
    @keyframes spin { to { transform: rotate(360deg); } }