next: ai part 2

website_next/ask/loader/style.css

@@ -0,0 +1,57 @@
+main[data-page="ask"] [data-ask-loader] {
+  display: grid;
+  gap: 0.5rem;
+
+  > button {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+    border-radius: var(--control-radius);
+    padding: var(--control-padding);
+    text-align: left;
+    text-transform: none;
+
+    > small {
+      color: inherit;
+      font-size: var(--font-size-xs);
+      opacity: 0.55;
+    }
+  }
+
+  > progress {
+    appearance: none;
+    width: 100%;
+    height: 0.2rem;
+    border: 0;
+    border-radius: 999px;
+    overflow: hidden;
+    background: color-mix(in oklch, var(--white) 10%, transparent);
+    accent-color: var(--orange);
+
+    &::-webkit-progress-bar {
+      border-radius: inherit;
+      background: color-mix(in oklch, var(--white) 10%, transparent);
+    }
+
+    &::-webkit-progress-value {
+      border-radius: inherit;
+      background: var(--orange);
+    }
+
+    &::-moz-progress-bar {
+      border-radius: inherit;
+      background: var(--orange);
+    }
+  }
+
+  > p {
+    margin: 0;
+    color: color-mix(in oklch, var(--white) 42%, transparent);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+}