@blaaiz/docs-core 0.1.0

package/styles/ask-ai.css

@@ -0,0 +1,563 @@
+/*
+ * @blaaiz/docs-core — the Ask AI trigger and panel.
+ *
+ * Import after docs.css:
+ *   @import '@blaaiz/docs-core/styles/ask-ai.css';
+ *
+ * Pairs with <AskAi /> from @blaaiz/docs-core/ui/ask-ai. Every colour is an
+ * `--color-fd-*` token, so the panel inherits the site's palette from
+ * docs.config; only shadows and the code surfaces get a `.dark` variant, where
+ * a token alone cannot carry the weight. No focus rings: docs.css removes them
+ * site-wide (house rule), so nothing here adds one back.
+ */
+
+.askai-root {
+  --askai-width: 400px;
+  --askai-radius: 12px;
+  font-size: 14px;
+  line-height: 1.65;
+}
+
+/* --- The trigger pill ---------------------------------------------------- */
+
+/* Bottom-right, so it clears the top bar, the sidebar, and the API rail on
+   every layout the framework ships. */
+.askai-trigger {
+  position: fixed;
+  right: 1.5rem;
+  bottom: 1.5rem;
+  z-index: 9990;
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  height: 42px;
+  padding: 0 8px 0 14px;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 999px;
+  background: var(--color-fd-card);
+  color: var(--color-fd-foreground);
+  font: inherit;
+  font-size: 13.5px;
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.05),
+    0 10px 26px -10px rgba(0, 0, 0, 0.28);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    transform 0.15s ease;
+}
+
+.askai-trigger:hover {
+  border-color: color-mix(in oklab, var(--color-fd-primary) 45%, var(--color-fd-border));
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.06),
+    0 14px 30px -10px rgba(0, 0, 0, 0.32);
+}
+
+.dark .askai-trigger {
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.4),
+    0 12px 30px -12px rgba(0, 0, 0, 0.7);
+}
+
+.askai-trigger-icon {
+  display: inline-flex;
+  color: var(--color-fd-primary);
+}
+
+.askai-trigger-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.askai-trigger-label {
+  white-space: nowrap;
+}
+
+.askai-kbd {
+  padding: 2px 7px;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 7px;
+  background: color-mix(in oklab, var(--color-fd-muted-foreground) 8%, transparent);
+  color: var(--color-fd-muted-foreground);
+  font-family: inherit;
+  font-size: 11.5px;
+  line-height: 1.4;
+  letter-spacing: 0.01em;
+}
+
+@media (max-width: 520px) {
+  .askai-trigger-label,
+  .askai-kbd {
+    display: none;
+  }
+
+  .askai-trigger {
+    width: 46px;
+    height: 46px;
+    padding: 0;
+    justify-content: center;
+  }
+}
+
+/* --- The panel ----------------------------------------------------------- */
+
+/* Above the try-it modal (9999) and its portalled popups (10001), so a reader
+   can ask a question with the playground open. */
+.askai-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 10010;
+  display: flex;
+  flex-direction: column;
+  width: var(--askai-width);
+  max-width: 100vw;
+  height: 100dvh;
+  border-left: 1px solid var(--color-fd-border);
+  background: var(--color-fd-background);
+  color: var(--color-fd-foreground);
+  box-shadow: -18px 0 48px -24px rgba(0, 0, 0, 0.3);
+}
+
+.dark .askai-panel {
+  box-shadow: -18px 0 48px -20px rgba(0, 0, 0, 0.75);
+}
+
+@media (max-width: 480px) {
+  .askai-panel {
+    width: 100vw;
+    border-left: none;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .askai-panel {
+    animation: askai-slide-in 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
+  }
+}
+
+@keyframes askai-slide-in {
+  from {
+    transform: translateX(18px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* --- Header -------------------------------------------------------------- */
+
+.askai-head {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  height: 3.5rem;
+  padding: 0 0.75rem 0 1.1rem;
+  border-bottom: 1px solid var(--color-fd-border);
+}
+
+.askai-head-icon {
+  display: inline-flex;
+  color: var(--color-fd-primary);
+}
+
+.askai-head-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.askai-head-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+}
+
+.askai-head-hint {
+  padding: 2px 7px;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 6px;
+  color: var(--color-fd-muted-foreground);
+  font-size: 11px;
+}
+
+.askai-head-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--color-fd-muted-foreground);
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+}
+
+.askai-head-btn svg {
+  width: 15px;
+  height: 15px;
+}
+
+.askai-head-btn:hover:not(:disabled) {
+  background: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
+  color: var(--color-fd-foreground);
+}
+
+.askai-head-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+/* --- Thread -------------------------------------------------------------- */
+
+.askai-thread {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  padding: 1.1rem 1.1rem 1.4rem;
+}
+
+.askai-thread > * + * {
+  margin-top: 1.1rem;
+}
+
+/* Empty state: one friendly line, then the starters. */
+.askai-empty-line {
+  margin: 0.25rem 0 0.9rem;
+  color: var(--color-fd-muted-foreground);
+  font-size: 13.5px;
+}
+
+.askai-chips {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.askai-chip {
+  padding: 9px 12px;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 10px;
+  background: var(--color-fd-card);
+  color: var(--color-fd-foreground);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.askai-chip:hover {
+  border-color: color-mix(in oklab, var(--color-fd-primary) 40%, var(--color-fd-border));
+  background: color-mix(in oklab, var(--color-fd-primary) 7%, var(--color-fd-card));
+}
+
+/* The reader's question: compact, right-aligned. */
+.askai-question {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.askai-bubble {
+  max-width: 85%;
+  padding: 8px 12px;
+  border-radius: var(--askai-radius) var(--askai-radius) 4px var(--askai-radius);
+  background: color-mix(in oklab, var(--color-fd-primary) 12%, transparent);
+  color: var(--color-fd-foreground);
+  font-size: 13.5px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* The answer: full width, quiet typography. */
+.askai-answer {
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.askai-paragraph {
+  margin: 0 0 0.7rem;
+  overflow-wrap: anywhere;
+}
+
+.askai-answer > :last-child {
+  margin-bottom: 0;
+}
+
+.askai-answer-heading {
+  margin: 1rem 0 0.45rem;
+  font-weight: 600;
+  color: var(--color-fd-foreground);
+}
+
+.askai-answer-heading:first-child {
+  margin-top: 0;
+}
+
+.askai-strong {
+  font-weight: 600;
+}
+
+.askai-list {
+  margin: 0 0 0.7rem;
+  padding-left: 1.15rem;
+}
+
+.askai-list li {
+  margin: 0.2rem 0;
+  overflow-wrap: anywhere;
+}
+
+.askai-link {
+  color: var(--color-fd-primary);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in oklab, var(--color-fd-primary) 40%, transparent);
+  text-underline-offset: 2px;
+}
+
+.askai-link:hover {
+  text-decoration-color: var(--color-fd-primary);
+}
+
+.askai-inline-code {
+  padding: 1px 5px;
+  border-radius: 5px;
+  background: color-mix(in oklab, var(--color-fd-muted-foreground) 14%, transparent);
+  font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
+  font-size: 12.5px;
+}
+
+.askai-codeblock {
+  margin: 0.6rem 0 0.8rem;
+  padding: 10px 12px;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 10px;
+  background: color-mix(in oklab, var(--color-fd-card) 92%, black);
+  overflow-x: auto;
+  scrollbar-width: thin;
+  font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
+  font-size: 12.5px;
+  line-height: 1.65;
+  white-space: pre;
+}
+
+.dark .askai-codeblock {
+  background: color-mix(in oklab, var(--color-fd-card) 78%, black);
+}
+
+.askai-codeblock code {
+  font: inherit;
+  background: none;
+  color: var(--color-fd-foreground);
+}
+
+/* The streaming caret. */
+.askai-caret {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  background: var(--color-fd-primary);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .askai-caret {
+    animation: askai-blink 1.1s steps(2, start) infinite;
+  }
+}
+
+@keyframes askai-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+/* --- Sources ------------------------------------------------------------- */
+
+.askai-sources {
+  margin-top: 0.85rem;
+  padding-top: 0.7rem;
+  border-top: 1px solid var(--color-fd-border);
+}
+
+.askai-sources-label {
+  display: block;
+  margin-bottom: 0.45rem;
+  color: var(--color-fd-muted-foreground);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.askai-sources-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.askai-source {
+  max-width: 100%;
+  padding: 4px 10px;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 999px;
+  background: var(--color-fd-card);
+  color: var(--color-fd-muted-foreground);
+  font-size: 12px;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.askai-source:hover {
+  border-color: color-mix(in oklab, var(--color-fd-primary) 45%, var(--color-fd-border));
+  color: var(--color-fd-foreground);
+}
+
+/* --- Errors -------------------------------------------------------------- */
+
+.askai-error {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-top: 0.7rem;
+  padding: 9px 11px;
+  border: 1px solid rgba(217, 119, 6, 0.38);
+  border-radius: 10px;
+  background: rgba(217, 119, 6, 0.09);
+  color: #b45309;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.dark .askai-error {
+  border-color: rgba(245, 158, 11, 0.3);
+  background: rgba(245, 158, 11, 0.1);
+  color: #f2c261;
+}
+
+.askai-error-text {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.askai-retry {
+  flex: none;
+  padding: 3px 9px;
+  border: 1px solid currentColor;
+  border-radius: 7px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.askai-retry:hover:not(:disabled) {
+  background: color-mix(in oklab, currentColor 12%, transparent);
+}
+
+.askai-retry:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+/* --- Composer ------------------------------------------------------------ */
+
+.askai-composer {
+  flex: none;
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 0.75rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
+  border-top: 1px solid var(--color-fd-border);
+  background: var(--color-fd-background);
+}
+
+.askai-input {
+  flex: 1;
+  min-width: 0;
+  min-height: 40px;
+  max-height: 132px;
+  padding: 9px 12px;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 11px;
+  background: var(--color-fd-card);
+  color: var(--color-fd-foreground);
+  font: inherit;
+  font-size: 13.5px;
+  line-height: 1.5;
+  resize: none;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  transition: border-color 0.15s ease;
+}
+
+.askai-input::placeholder {
+  color: var(--color-fd-muted-foreground);
+}
+
+.askai-input:hover:not(:disabled),
+.askai-input:focus {
+  border-color: color-mix(in oklab, var(--color-fd-primary) 40%, var(--color-fd-border));
+}
+
+.askai-input:disabled {
+  opacity: 0.6;
+}
+
+.askai-send {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 11px;
+  background: var(--color-fd-primary);
+  color: var(--color-fd-primary-foreground, #fff);
+  cursor: pointer;
+  transition:
+    filter 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.askai-send svg {
+  width: 17px;
+  height: 17px;
+}
+
+.askai-send:hover:not(:disabled) {
+  filter: brightness(1.08);
+}
+
+.askai-send:disabled {
+  opacity: 0.4;
+  cursor: default;
+}