Update style.css

style.css

@@ -726,4 +726,87 @@ input[type="range"].futuristic-slider::-moz-range-thumb {
 }
 #full-prompt-text::-webkit-scrollbar-thumb:hover {
     background: #64748b;
+}
+
+/* --- Initial Setup CTA Styles --- */
+#initial-setup-cta {
+    /* Default to flex for when it becomes visible */
+    /* flex-grow is added by JS when active */
+    background-color: rgba(23, 37, 60, 0.75); /* Slightly bluer, less opaque than modals */
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid #334155; /* slate-700 */
+    border-radius: 0.75rem; /* rounded-xl */
+    box-shadow: 0 15px 35px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(71, 85, 105, 0.4); /* slate-600 for inset border */
+    padding: 2rem; /* Increased padding */
+    width: 100%;
+    max-width: 48rem; /* Consistent max width, e.g., max-w-3xl */
+    margin-left: auto;
+    margin-right: auto; 
+
+    opacity: 0;
+    transform: translateY(30px) scale(0.97);
+    transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+    pointer-events: none; 
+}
+
+#initial-setup-cta.active-cta {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    pointer-events: auto;
+}
+
+#gemini-logo-initial-cta {
+    height: 40px; /* Adjust as needed */
+    margin-bottom: 1.5rem; /* Space below the logo */
+    opacity: 0.85; /* Slightly see-through to blend a bit */
+}
+
+#initial-api-key-input {
+    /* Uses .futuristic-input, can add specifics if needed */
+     box-shadow: 0 0 15px rgba(34, 211, 238, 0.1); /* Subtle glow on input */
+}
+
+.example-prompt-button {
+    background-color: rgba(51, 65, 85, 0.7); /* slate-700 with alpha */
+    backdrop-filter: blur(5px);
+    border: 1px solid #475569; /* slate-600 */
+    color: #cbd5e1; /* slate-300 */
+    padding: 0.6rem 1.2rem; /* Adjusted padding */
+    border-radius: 9999px; /* pill shape */
+    font-size: 0.875rem; /* text-sm */
+    font-weight: 500;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+
+    opacity: 0;
+    transform: translateY(15px);
+    /* Add opacity and transform to existing transition */
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.example-prompt-button.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.example-prompt-button:hover {
+    background-color: rgba(71, 85, 105, 0.85); /* slate-600 with alpha */
+    color: #e2e8f0; /* slate-200 */
+    box-shadow: 0 0 12px rgba(34, 211, 238, 0.25), 0 4px 8px rgba(0,0,0,0.3);
+    transform: translateY(-2px); /* Keep existing translateY but ensure it combines with the initial one */
+}
+
+.example-prompt-button.visible:hover {
+    transform: translateY(-2px); /* Explicitly for visible state */
+}
+
+
+.example-prompt-button:active {
+    transform: translateY(0px); /* Reset or slightly depress */
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 0 5px 1px rgba(34, 211, 238, 0.1);
+}
+
+.example-prompt-button.visible:active {
+    transform: translateY(0px);
 }