@kpritam/grimoire-output-docusaurus 0.1.8

package/templates/spellbook/src/components/SpellbookChat/styles.module.css

@@ -0,0 +1,852 @@
+/* Spellbook Chat — scoped panel; uses global :root / custom.css tokens */
+
+.launcher {
+  position: fixed;
+  right: var(--grim-space-lg);
+  bottom: var(--grim-space-lg);
+  z-index: calc(var(--ifm-z-index-fixed, 200) + 20);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--grim-space-2xs);
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--grim-font-ui);
+  color: var(--grim-text-muted);
+  transition: color var(--grim-dur-med) var(--grim-ease-out);
+}
+
+.launcher:hover,
+.launcher:focus-visible {
+  color: var(--grim-violet);
+}
+
+.launcher:focus-visible {
+  outline: 2px solid var(--grim-violet);
+  outline-offset: 3px;
+  border-radius: var(--grim-radius-lg);
+}
+
+.launcherSigil {
+  position: relative;
+  width: 3.25rem;
+  height: 3.25rem;
+  border-radius: 50%;
+  background: radial-gradient(
+      circle at 35% 30%,
+      oklch(0.88 0.08 300 / 0.55),
+      transparent 55%
+    ),
+    radial-gradient(circle at 50% 100%, var(--grim-surface-2), var(--grim-bg-deep));
+  box-shadow: var(--grim-glow-violet);
+  border: 1px solid var(--grim-rule-strong);
+  display: grid;
+  place-items: center;
+  animation: sigilPulse 2.6s var(--grim-ease-out-quart) infinite;
+}
+
+.launcherSigilInner {
+  width: 1.35rem;
+  height: 1.35rem;
+  border-radius: 50%;
+  border: 2px solid var(--grim-violet);
+  box-shadow: inset 0 0 12px oklch(0.72 0.2 300 / 0.45);
+  opacity: 0.95;
+}
+
+.launcherLabel {
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  max-width: 6.5rem;
+  text-align: center;
+  line-height: 1.25;
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: oklch(0.06 0.02 280 / 0.55);
+  z-index: calc(var(--ifm-z-index-fixed, 200) + 15);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--grim-dur-med) var(--grim-ease-out);
+}
+
+.backdropVisible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(420px, 100vw);
+  z-index: calc(var(--ifm-z-index-fixed, 200) + 25);
+  background: var(--grim-bg-deep);
+  border-left: 1px solid var(--grim-rule);
+  box-shadow: -20px 0 48px oklch(0.05 0.02 280 / 0.55);
+  transform: translateX(102%);
+  transition: transform var(--grim-dur-slow) var(--grim-ease-spring),
+    width var(--grim-dur-med) var(--grim-ease-out-quart);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--grim-font-ui);
+}
+
+.panelOpen {
+  transform: translateX(0);
+}
+
+.panelExpanded {
+  width: min(960px, 96vw);
+  box-shadow: -32px 0 80px oklch(0.04 0.02 280 / 0.7);
+}
+
+.panelInner {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--grim-space-sm);
+  padding: var(--grim-space-md);
+  padding-top: var(--grim-space-lg);
+  border-bottom: 1px solid var(--grim-rule);
+  background: linear-gradient(
+    180deg,
+    oklch(0.16 0.03 282 / 0.95),
+    var(--grim-bg-deep)
+  );
+}
+
+.headerMain {
+  flex: 1;
+  min-width: 0;
+}
+
+.kicker {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.35em;
+  font-family: var(--grim-font-sc);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-size: 0.65rem;
+  color: var(--grim-text-subtle);
+}
+
+.kickerNum {
+  color: var(--grim-gold);
+  font-weight: 600;
+}
+
+.titleRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--grim-space-sm);
+  margin-top: var(--grim-space-xs);
+}
+
+.title {
+  font-family: var(--grim-font-display);
+  font-size: 1.35rem;
+  line-height: 1.2;
+  color: var(--grim-text);
+  margin: 0;
+}
+
+.repo {
+  margin: var(--grim-space-xs) 0 0;
+  font-size: 0.78rem;
+  color: var(--grim-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  flex-shrink: 0;
+}
+
+.iconButton {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border-radius: var(--grim-radius-sm);
+  border: 1px solid var(--grim-rule);
+  background: var(--grim-surface);
+  color: var(--grim-text-muted);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  transition: color var(--grim-dur-fast) var(--grim-ease-out),
+    border-color var(--grim-dur-fast) var(--grim-ease-out),
+    background var(--grim-dur-fast) var(--grim-ease-out),
+    transform var(--grim-dur-fast) var(--grim-ease-out);
+}
+
+.iconButton:hover:not(:disabled) {
+  color: var(--grim-gold);
+  border-color: var(--grim-rule-strong);
+  background: var(--grim-surface-2);
+}
+
+.iconButton:active:not(:disabled) {
+  transform: scale(0.94);
+}
+
+.iconButton:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.iconButton[aria-pressed="true"] {
+  color: var(--grim-gold);
+  background: oklch(0.22 0.05 285);
+  border-color: oklch(0.55 0.18 78 / 0.55);
+}
+
+.iconButton:focus-visible {
+  outline: 2px solid var(--grim-violet);
+  outline-offset: 2px;
+}
+
+.closeButton {
+  composes: iconButton;
+}
+
+.settingsButton {
+  composes: iconButton;
+}
+
+.statusBar {
+  padding: var(--grim-space-sm) var(--grim-space-md);
+  border-bottom: 1px solid var(--grim-rule);
+  background: var(--grim-surface);
+}
+
+.statusText {
+  font-size: 0.78rem;
+  color: var(--grim-text-muted);
+  margin: 0 0 var(--grim-space-xs);
+}
+
+.progressTrack {
+  height: 3px;
+  border-radius: 999px;
+  background: var(--grim-surface-3);
+  overflow: hidden;
+}
+
+.progressFill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--grim-violet-deep), var(--grim-violet));
+  border-radius: inherit;
+  transition: width var(--grim-dur-med) var(--grim-ease-out);
+}
+
+.progressFillIndeterminate {
+  height: 100%;
+  width: 42%;
+  border-radius: inherit;
+  background: linear-gradient(
+    90deg,
+    var(--grim-violet-deep),
+    var(--grim-violet),
+    var(--grim-cyan-deep)
+  );
+  animation: progressSweep 1.35s var(--grim-ease-out-quart) infinite;
+}
+
+@keyframes progressSweep {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(280%);
+  }
+}
+
+.errorBanner {
+  margin: var(--grim-space-md);
+  padding: var(--grim-space-sm) var(--grim-space-md);
+  border-radius: var(--grim-radius-md);
+  border: 1px solid oklch(0.55 0.18 25 / 0.45);
+  background: oklch(0.22 0.05 25 / 0.45);
+  color: oklch(0.92 0.04 25);
+  font-size: 0.85rem;
+  line-height: 1.45;
+}
+
+.errorActions {
+  margin-top: var(--grim-space-sm);
+  display: flex;
+  gap: var(--grim-space-sm);
+}
+
+.messages {
+  flex: 1;
+  overflow: auto;
+  padding: var(--grim-space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--grim-space-md);
+  scroll-behavior: smooth;
+}
+
+.panelExpanded .messages {
+  padding: var(--grim-space-lg) var(--grim-space-xl);
+}
+
+.panelExpanded .bubble {
+  max-width: 78%;
+  font-size: 0.95rem;
+}
+
+.panelExpanded .bubbleRow {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 780px;
+}
+
+.panelExpanded .footer {
+  padding: var(--grim-space-md) var(--grim-space-xl);
+}
+
+.panelExpanded .composer {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 780px;
+}
+
+.bubbleRow {
+  display: flex;
+}
+
+.bubbleRowUser {
+  justify-content: flex-end;
+}
+
+.bubble {
+  max-width: 92%;
+  padding: 0.7rem 0.95rem;
+  border-radius: var(--grim-radius-lg);
+  font-family: var(--grim-font-chat);
+  font-size: 0.92rem;
+  line-height: 1.55;
+  letter-spacing: 0;
+  color: var(--grim-text);
+  font-feature-settings: "ss01", "cv11";
+}
+
+.bubbleUser {
+  background: linear-gradient(
+    135deg,
+    oklch(0.28 0.06 300 / 0.9),
+    var(--grim-surface-2)
+  );
+  border: 1px solid var(--grim-rule);
+  white-space: pre-wrap;
+}
+
+.bubbleAssistant {
+  background: var(--grim-surface);
+  border: 1px solid var(--grim-rule);
+}
+
+.bubbleAssistantError {
+  border-color: oklch(0.55 0.18 25 / 0.55);
+  background: oklch(0.22 0.05 25 / 0.4);
+}
+
+.typingDots {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.15rem 0;
+}
+
+.typingDots > span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--grim-text-subtle);
+  animation: typingPulse 1.1s var(--grim-ease-out-quart) infinite;
+}
+
+.typingDots > span:nth-child(2) {
+  animation-delay: 0.18s;
+}
+
+.typingDots > span:nth-child(3) {
+  animation-delay: 0.36s;
+}
+
+@keyframes typingPulse {
+  0%,
+  100% {
+    opacity: 0.3;
+    transform: translateY(0);
+  }
+  50% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
+
+.bubbleMeta {
+  margin-top: var(--grim-space-xs);
+  font-size: 0.72rem;
+  color: var(--grim-text-subtle);
+  font-family: var(--grim-font-mono);
+}
+
+.truncatedNotice {
+  margin: var(--grim-space-sm) 0 0;
+  padding: var(--grim-space-xs) var(--grim-space-sm);
+  border-radius: var(--grim-radius-sm, 6px);
+  background: oklch(0.32 0.07 80 / 0.32);
+  border: 1px solid oklch(0.55 0.12 80 / 0.45);
+  color: var(--grim-text);
+  font-size: 0.78rem;
+  line-height: 1.35;
+}
+
+.citations {
+  margin-top: var(--grim-space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--grim-space-xs);
+}
+
+.citationsTitle {
+  font-size: 0.68rem;
+  font-family: var(--grim-font-sc);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--grim-text-subtle);
+  margin: 0 0 var(--grim-space-2xs);
+}
+
+.citationCard {
+  display: block;
+  padding: var(--grim-space-sm) var(--grim-space-md);
+  border-radius: var(--grim-radius-md);
+  border: 1px solid var(--grim-rule);
+  background: var(--grim-bg);
+  text-decoration: none;
+  color: inherit;
+  transition: border-color var(--grim-dur-fast) var(--grim-ease-out),
+    box-shadow var(--grim-dur-fast) var(--grim-ease-out);
+}
+
+.citationCard[href]:hover {
+  border-color: var(--grim-violet);
+  box-shadow: var(--grim-glow-violet);
+}
+
+.citationPath {
+  font-family: var(--grim-font-mono);
+  font-size: 0.78rem;
+  color: var(--grim-gold);
+  word-break: break-all;
+}
+
+.citationHeadings {
+  margin: var(--grim-space-2xs) 0 0;
+  font-size: 0.76rem;
+  color: var(--grim-text-muted);
+}
+
+.footer {
+  padding: var(--grim-space-md);
+  border-top: 1px solid var(--grim-rule);
+  background: linear-gradient(0deg, var(--grim-bg-deep), var(--grim-surface));
+  display: flex;
+  flex-direction: column;
+  gap: var(--grim-space-sm);
+}
+
+.modeTabs {
+  display: inline-flex;
+  align-self: flex-start;
+  padding: 0.2rem;
+  gap: 0.2rem;
+  border-radius: var(--grim-radius-md);
+  background: var(--grim-bg);
+  border: 1px solid var(--grim-rule);
+}
+
+.modeTab {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--grim-text-muted);
+  font-family: var(--grim-font-ui);
+  font-size: 0.78rem;
+  letter-spacing: 0.02em;
+  padding: 0.4rem 0.8rem;
+  border-radius: calc(var(--grim-radius-md) - 0.2rem);
+  cursor: pointer;
+  transition: color var(--grim-dur-fast) var(--grim-ease-out),
+    background var(--grim-dur-fast) var(--grim-ease-out);
+}
+
+.modeTab:hover:not([aria-selected="true"]) {
+  color: var(--grim-text);
+}
+
+.modeTabActive,
+.modeTab[aria-selected="true"] {
+  background: linear-gradient(
+    135deg,
+    oklch(0.32 0.14 300 / 0.65),
+    oklch(0.22 0.08 300 / 0.65)
+  );
+  color: var(--grim-text);
+  box-shadow: 0 0 0 1px oklch(0.72 0.2 300 / 0.4);
+}
+
+.composer {
+  display: flex;
+  gap: var(--grim-space-sm);
+  align-items: flex-end;
+}
+
+.textarea {
+  flex: 1;
+  min-height: 3.25rem;
+  max-height: 8rem;
+  resize: vertical;
+  padding: var(--grim-space-sm) var(--grim-space-md);
+  border-radius: var(--grim-radius-md);
+  border: 1px solid var(--grim-rule);
+  background: var(--grim-bg);
+  color: var(--grim-text);
+  font-family: var(--grim-font-ui);
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+.textarea:focus {
+  outline: none;
+  border-color: var(--grim-violet);
+  box-shadow: 0 0 0 1px oklch(0.72 0.2 300 / 0.35);
+}
+
+.textarea:disabled {
+  opacity: 0.55;
+}
+
+.sendButton {
+  flex-shrink: 0;
+  height: 2.75rem;
+  padding: 0 var(--grim-space-md);
+  border-radius: var(--grim-radius-md);
+  border: none;
+  font-family: var(--grim-font-ui);
+  font-weight: 600;
+  font-size: 0.82rem;
+  cursor: pointer;
+  background: linear-gradient(
+    135deg,
+    var(--grim-gold-deep),
+    oklch(0.68 0.16 78)
+  );
+  color: var(--grim-accent-contrast);
+  box-shadow: var(--grim-glow-gold);
+  transition: transform var(--grim-dur-fast) var(--grim-ease-spring),
+    filter var(--grim-dur-fast) var(--grim-ease-out);
+}
+
+.sendButton:hover:not(:disabled) {
+  transform: translateY(-1px);
+  filter: brightness(1.06);
+}
+
+.sendButton:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.settingsInline {
+  padding: var(--grim-space-md);
+}
+
+.settingsCard {
+  composes: settingsInline;
+  margin: var(--grim-space-md);
+  border-radius: var(--grim-radius-lg);
+  border: 1px solid var(--grim-rule);
+  background: var(--grim-surface);
+}
+
+.settingsTitle {
+  font-family: var(--grim-font-display);
+  font-size: 1.05rem;
+  margin: 0 0 var(--grim-space-sm);
+  color: var(--grim-text);
+}
+
+.settingsHelp {
+  margin: 0 0 var(--grim-space-md);
+  font-size: 0.86rem;
+  line-height: 1.55;
+  color: var(--grim-text-muted);
+}
+
+.settingsHelp em {
+  color: var(--grim-violet);
+  font-style: italic;
+}
+
+.settingsForm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--grim-space-xs);
+}
+
+.settingsLabel {
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--grim-text-subtle);
+}
+
+.settingsSelect {
+  width: 100%;
+  padding: var(--grim-space-sm) var(--grim-space-md);
+  border-radius: var(--grim-radius-md);
+  border: 1px solid var(--grim-rule);
+  background: var(--grim-bg);
+  color: var(--grim-text);
+  font-family: var(--grim-font-ui);
+  font-size: 0.82rem;
+}
+
+.providerTagline {
+  margin: 0 0 var(--grim-space-sm);
+  font-size: 0.76rem;
+  line-height: 1.45;
+  color: var(--grim-text-subtle);
+}
+
+.settingsFieldGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--grim-space-2xs);
+}
+
+.fieldHelp {
+  margin: 0;
+  font-size: 0.74rem;
+  line-height: 1.45;
+  color: var(--grim-text-subtle);
+}
+
+.preloadPanel {
+  margin: var(--grim-space-sm) 0 var(--grim-space-md);
+  padding: var(--grim-space-sm) 0 0;
+  border-top: 1px solid var(--grim-rule);
+}
+
+.preloadText {
+  margin: 0 0 var(--grim-space-xs);
+  font-size: 0.78rem;
+  color: var(--grim-text-muted);
+}
+
+.settingsInput {
+  width: 100%;
+  padding: var(--grim-space-sm) var(--grim-space-md);
+  border-radius: var(--grim-radius-md);
+  border: 1px solid var(--grim-rule);
+  background: var(--grim-bg);
+  color: var(--grim-text);
+  font-family: var(--grim-font-mono);
+  font-size: 0.82rem;
+}
+
+.settingsActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--grim-space-sm);
+  margin-top: var(--grim-space-sm);
+}
+
+.buttonPrimary {
+  padding: var(--grim-space-xs) var(--grim-space-md);
+  border-radius: var(--grim-radius-md);
+  border: none;
+  background: var(--grim-violet-deep);
+  color: var(--grim-text);
+  font-family: var(--grim-font-ui);
+  font-weight: 600;
+  font-size: 0.82rem;
+  cursor: pointer;
+}
+
+.buttonPrimary:hover {
+  filter: brightness(1.08);
+}
+
+.buttonGhost {
+  padding: var(--grim-space-xs) var(--grim-space-md);
+  border-radius: var(--grim-radius-md);
+  border: 1px solid var(--grim-rule);
+  background: transparent;
+  color: var(--grim-text-muted);
+  font-family: var(--grim-font-ui);
+  font-size: 0.82rem;
+  cursor: pointer;
+}
+
+.buttonGhost:hover {
+  border-color: var(--grim-rule-strong);
+  color: var(--grim-text);
+}
+
+.degraded {
+  padding: var(--grim-space-md);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: var(--grim-space-sm);
+  color: var(--grim-text-muted);
+  font-size: 0.88rem;
+  line-height: 1.55;
+}
+
+.degradedIcon {
+  font-size: 2rem;
+  line-height: 1;
+  filter: grayscale(0.2);
+}
+
+.screenReader {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes sigilPulse {
+  0%,
+  100% {
+    box-shadow: var(--grim-glow-violet);
+    transform: scale(1);
+  }
+  50% {
+    box-shadow: 0 0 0 1px oklch(0.72 0.2 300 / 0.35),
+      0 10px 36px -10px oklch(0.72 0.2 300 / 0.65);
+    transform: scale(1.03);
+  }
+}
+
+/* =============================================================
+   LIGHT THEME OVERRIDES — hardcoded dark oklch() values above
+   don't respond to the theme switch; correct them here.
+   ============================================================= */
+
+/* Backdrop: warm parchment scrim instead of near-black */
+:global([data-theme="light"]) .backdrop {
+  background: oklch(0.55 0.015 72 / 0.22);
+}
+
+:global([data-theme="light"]) .panel {
+  box-shadow: -20px 0 48px oklch(0.55 0.05 68 / 0.12);
+}
+
+:global([data-theme="light"]) .panelExpanded {
+  box-shadow: -32px 0 80px oklch(0.55 0.05 68 / 0.15);
+}
+
+/* Header: amber-kissed parchment gradient instead of flat near-white */
+:global([data-theme="light"]) .header {
+  background: linear-gradient(
+    180deg,
+    color-mix(in oklch, var(--grim-gold) 8%, oklch(0.968 0.012 80 / 0.98)),
+    var(--grim-bg-deep)
+  );
+  border-bottom-color: color-mix(in oklch, var(--grim-gold) 35%, var(--grim-rule));
+}
+
+/* Kicker label: warm amber-adjacent rather than cool gray */
+:global([data-theme="light"]) .kicker {
+  color: oklch(0.52 0.05 68);
+}
+
+/* User bubble — first stop was hardcoded dark violet */
+:global([data-theme="light"]) .bubbleUser {
+  background: linear-gradient(
+    135deg,
+    oklch(0.9 0.05 298 / 0.75),
+    var(--grim-surface-2)
+  );
+}
+
+/* Pressed icon button — hardcoded dark background */
+:global([data-theme="light"]) .iconButton[aria-pressed="true"] {
+  background: oklch(0.92 0.04 285);
+  border-color: oklch(0.5 0.22 298 / 0.4);
+  color: var(--grim-violet-deep);
+}
+
+/* Active mode tab — hardcoded dark gradient */
+:global([data-theme="light"]) .modeTabActive,
+:global([data-theme="light"]) .modeTab[aria-selected="true"] {
+  background: linear-gradient(
+    135deg,
+    oklch(0.88 0.07 298 / 0.65),
+    oklch(0.92 0.04 298 / 0.65)
+  );
+  box-shadow: 0 0 0 1px oklch(0.5 0.22 298 / 0.3);
+  color: var(--grim-violet-deep);
+}
+
+/* Footer: amber-tinted separator + grounded gradient */
+:global([data-theme="light"]) .footer {
+  background: linear-gradient(
+    0deg,
+    var(--grim-surface),
+    color-mix(in oklch, var(--grim-gold) 4%, var(--grim-bg-deep))
+  );
+  border-top-color: color-mix(in oklch, var(--grim-gold) 30%, var(--grim-rule));
+}
+
+/* Truncated notice: amber wash instead of dark warm overlay */
+:global([data-theme="light"]) .truncatedNotice {
+  background: color-mix(in oklch, var(--grim-gold) 10%, var(--grim-surface));
+  border-color: color-mix(in oklch, var(--grim-gold) 28%, var(--grim-rule));
+}
+
+/* Error banner: light-appropriate warm red */
+:global([data-theme="light"]) .errorBanner {
+  background: oklch(0.97 0.015 25);
+  border-color: oklch(0.65 0.18 25 / 0.5);
+  color: oklch(0.36 0.18 25);
+}