@dogsbay/plugin-ask 0.2.0-beta.101

package/src/styles.css

@@ -0,0 +1,207 @@
+/**
+ * Styles for @dogsbay/plugin-ask. Uses Dogsbay theme tokens where available
+ * with safe fallbacks, so it themes automatically but never breaks if a token
+ * is missing. All selectors are namespaced under .dba- to avoid collisions.
+ */
+
+#dba-root {
+  --dba-accent: var(--color-primary, #2563eb);
+  --dba-accent-contrast: var(--color-primary-foreground, #ffffff);
+  --dba-surface: var(--color-background, #ffffff);
+  --dba-text: var(--color-foreground, #1f2937);
+  --dba-border: var(--color-border, #e5e7eb);
+  --dba-radius: var(--radius, 0.5rem);
+}
+
+/* Docked rail panel (RightRailAsk.astro) lives OUTSIDE #dba-root, so it needs
+   its own token block to pick up the site theme (same tokens as #dba-root). */
+.dba-panel {
+  --dba-accent: var(--color-primary, #2563eb);
+  --dba-accent-contrast: var(--color-primary-foreground, #ffffff);
+  --dba-surface: var(--color-background, #ffffff);
+  --dba-text: var(--color-foreground, #1f2937);
+  --dba-border: var(--color-border, #e5e7eb);
+  --dba-radius: var(--radius, 0.5rem);
+  color: var(--dba-text);
+  font-size: 0.9rem;
+}
+/* The docked form fills the rail column. */
+.dba-panel .dba-form { padding: 0; gap: 0.5rem; }
+.dba-panel .dba-title { font-size: 0.95rem; }
+/* The rail aside scrolls, so let answers grow rather than scroll internally. */
+.dba-panel .dba-answer { max-height: none; }
+/* Keep the input visible while the rail scrolls the conversation. */
+.dba-panel .dba-inputrow {
+  position: sticky;
+  bottom: 0;
+  background: var(--dba-surface);
+  padding-block: 0.4rem;
+}
+
+/* Conversation thread (docked panel + floating dialog). */
+.dba-thread { display: flex; flex-direction: column; gap: 0.75rem; }
+.dba-thread:empty { display: none; }
+.dba-turn-user {
+  align-self: flex-end;
+  max-width: 92%;
+  padding: 0.4rem 0.7rem;
+  white-space: pre-wrap;
+  background: color-mix(in srgb, var(--dba-accent) 14%, transparent);
+  border-radius: var(--dba-radius);
+}
+.dba-turn-assistant { align-self: stretch; }
+.dba-header-actions { display: flex; align-items: center; gap: 0.4rem; }
+.dba-newchat {
+  font: inherit;
+  font-size: 0.78rem;
+  padding: 0.2rem 0.5rem;
+  cursor: pointer;
+  color: var(--dba-text);
+  opacity: 0.7;
+  background: none;
+  border: 1px solid var(--dba-border);
+  border-radius: var(--dba-radius);
+}
+.dba-newchat:hover { opacity: 1; }
+/* In the modal, bound the thread so it scrolls and the input stays visible. */
+.dba-dialog .dba-thread { max-height: 55vh; overflow-y: auto; }
+
+/* Reader opt-out for conversation persistence. */
+.dba-remember {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.78rem;
+  opacity: 0.75;
+  cursor: pointer;
+}
+.dba-remember input { cursor: pointer; }
+
+.dba-trigger {
+  position: fixed;
+  bottom: 1.25rem;
+  z-index: 60;
+  padding: 0.625rem 1rem;
+  font: inherit;
+  font-weight: 600;
+  color: var(--dba-accent-contrast);
+  background: var(--dba-accent);
+  border: none;
+  border-radius: 999px;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
+  cursor: pointer;
+}
+#dba-root[data-position="bottom-right"] .dba-trigger { right: 1.25rem; }
+#dba-root[data-position="bottom-left"] .dba-trigger { left: 1.25rem; }
+.dba-trigger:hover { filter: brightness(1.05); }
+.dba-trigger:focus-visible { outline: 2px solid var(--dba-accent); outline-offset: 2px; }
+
+/* When a docked panel is present the floating button is only the mobile entry —
+   hide it at the breakpoint where the rail (and its docked panel) is visible.
+   1024px matches DocsLayout's `lg:block` rail. */
+@media (min-width: 1024px) {
+  #dba-root[data-has-docked] .dba-trigger { display: none; }
+}
+
+.dba-dialog {
+  width: min(40rem, 92vw);
+  max-height: 80vh;
+  padding: 0;
+  color: var(--dba-text);
+  background: var(--dba-surface);
+  border: 1px solid var(--dba-border);
+  border-radius: var(--dba-radius);
+  box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
+}
+.dba-dialog::backdrop { background: rgb(0 0 0 / 0.4); }
+
+.dba-form { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.25rem 1.25rem; }
+.dba-header { display: flex; align-items: center; justify-content: space-between; }
+.dba-title { margin: 0; font-size: 1.05rem; }
+.dba-close {
+  font-size: 1.5rem; line-height: 1; padding: 0 0.25rem;
+  color: inherit; background: none; border: none; cursor: pointer; opacity: 0.6;
+}
+.dba-close:hover { opacity: 1; }
+
+.dba-inputrow { display: flex; gap: 0.5rem; }
+.dba-input {
+  flex: 1; padding: 0.55rem 0.75rem; font: inherit;
+  color: var(--dba-text); background: var(--dba-surface);
+  border: 1px solid var(--dba-border); border-radius: var(--dba-radius);
+}
+.dba-input:focus-visible { outline: 2px solid var(--dba-accent); outline-offset: 1px; }
+.dba-submit {
+  padding: 0.55rem 1rem; font: inherit; font-weight: 600;
+  color: var(--dba-accent-contrast); background: var(--dba-accent);
+  border: none; border-radius: var(--dba-radius); cursor: pointer;
+}
+.dba-submit:disabled { opacity: 0.6; cursor: progress; }
+
+.dba-answer {
+  min-height: 2rem; max-height: 50vh; overflow-y: auto;
+  padding: 0.75rem; line-height: 1.55;
+  background: color-mix(in srgb, var(--dba-text) 4%, transparent);
+  border-radius: var(--dba-radius);
+}
+.dba-turnstile { margin: 0.25rem 0; min-height: 0; }
+.dba-answer[data-state="loading"] { opacity: 0.6; }
+.dba-answer[data-state="error"] { color: #b91c1c; }
+
+@media (prefers-reduced-motion: no-preference) {
+  .dba-dialog[open] { animation: dba-in 0.12s ease-out; }
+}
+@keyframes dba-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
+
+/* Rendered Markdown inside the answer */
+.dba-answer h1, .dba-answer h2, .dba-answer h3, .dba-answer h4 {
+  margin: 0.8em 0 0.3em; line-height: 1.25; font-weight: 600;
+}
+.dba-answer h1 { font-size: 1.2rem; }
+.dba-answer h2 { font-size: 1.1rem; }
+.dba-answer h3 { font-size: 1rem; }
+.dba-answer h4 { font-size: 0.95rem; }
+.dba-answer p { margin: 0.5em 0; }
+.dba-answer ul, .dba-answer ol { margin: 0.5em 0; padding-left: 1.4em; }
+.dba-answer li { margin: 0.15em 0; }
+.dba-answer a { color: var(--dba-accent); text-decoration: underline; }
+.dba-answer code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
+  padding: 0.1em 0.3em; border-radius: 4px;
+  background: color-mix(in srgb, var(--dba-text) 9%, transparent);
+}
+.dba-answer pre {
+  margin: 0.6em 0; padding: 0.7em 0.8em; overflow-x: auto; border-radius: var(--dba-radius);
+  background: color-mix(in srgb, var(--dba-text) 9%, transparent);
+}
+.dba-answer pre code { padding: 0; background: none; }
+
+/* Answer feedback (thumbs up/down) */
+.dba-feedback {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 0.6em;
+  font-size: 0.8rem;
+  opacity: 0.85;
+}
+.dba-feedback-q { opacity: 0.7; }
+.dba-fb {
+  font-size: 0.95rem;
+  line-height: 1;
+  padding: 0.15rem 0.35rem;
+  cursor: pointer;
+  background: none;
+  border: 1px solid var(--dba-border);
+  border-radius: var(--dba-radius);
+}
+.dba-fb:hover { background: color-mix(in srgb, var(--dba-text) 8%, transparent); }
+.dba-fb:focus-visible { outline: 2px solid var(--dba-accent); outline-offset: 1px; }
+.dba-feedback-done { opacity: 0.6; font-style: italic; }
+
+/* Sources list */
+.dba-sources { margin-top: 1em; padding-top: 0.6em; border-top: 1px solid var(--dba-border); }
+.dba-sources-title { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; margin-bottom: 0.3em; }
+.dba-sources ul { margin: 0; padding-left: 1.2em; }
+.dba-sources li { margin: 0.1em 0; font-size: 0.9em; }
+.dba-sources a { color: var(--dba-accent); }