.doc-list .link-gray { color: var(--fgColor-default); text-decoration: none; }
.doc-list .link-gray:hover { text-decoration: underline; }
.doc-list .doc-item {
  border-radius: 14px;
  transition: background-color 120ms ease;
}
.doc-list .doc-item:hover {
  background-color: var(--bgColor-muted);
}
/* Overrides loaded after Primer CSS to apply global font */
:root {
  /* Override Primer font stacks to prefer Poppins */
  --fontStack-system: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --fontStack-sansSerif: var(--fontStack-system);

  /* Palette scale */
  --mono-100: #fefefd; /* light base */
  --mono-200: #fdfdfd;
  --mono-300: #dcdbdc;
  --mono-400: #c0bdbe;
  --mono-500: #b6b3b4;
  --mono-600: #908a8d;
  --mono-700: #868083;
  --mono-800: #4a4748;
  --mono-900: #363435;
  --mono-1000: #2c2a2b; /* dark base */
}

/* Light theme overrides (match Primer specificity) */
[data-color-mode="light"][data-light-theme="light"],
[data-color-mode="auto"][data-light-theme="light"] {
  /* Backgrounds */
  --bgColor-default: var(--mono-100) !important;
  --bgColor-muted: var(--mono-200) !important;
  --bgColor-inset: var(--mono-100) !important;
  --color-canvas-default: var(--mono-100) !important;
  --control-bgColor-rest: var(--mono-200) !important;
  --header-fgColor-default: var(--mono-800) !important;


  /* Text */
  --fgColor-default: var(--mono-1000) !important;
  --fgColor-muted: var(--mono-700) !important;
  /* --fgColor-accent: var(--mono-900); */

  /* Borders & shadows */
  --borderColor-default: var(--mono-300);
  --borderColor-muted: var(--mono-200);
  --color-shadow-small: rgba(39, 39, 58, 0.15);
  --color-shadow-medium: rgba(39, 39, 58, 0.25);

  /* Buttons */
  --color-btn-primary-bg: var(--mono-900);
  --color-btn-primary-hoverBg: var(--mono-1000);
  --color-btn-primary-activeBg: var(--mono-1000);
  --color-btn-primary-text: var(--mono-100);
  --color-btn-primary-border: var(--mono-900);

  --color-btn-border: var(--mono-300);
  --color-btn-text: var(--mono-1000);
  --color-btn-hoverBg: var(--mono-200);
  --color-btn-activeBg: var(--mono-300);

  /* Links */
  --link-color: var(--mono-900);
}

/* Dark theme overrides (match Primer specificity) */
[data-color-mode="dark"][data-dark-theme="dark"],
[data-color-mode="auto"][data-dark-theme="dark"] {
  /* Backgrounds */
  --bgColor-default: var(--mono-1000) !important;
  --bgColor-muted: var(--mono-900) !important;
  --bgColor-inset: var(--mono-1000) !important;
  --color-canvas-default: var(--mono-1000) !important;
  --control-bgColor-rest: var(--mono-900) !important;

  /* Text */
  --fgColor-default: var(--mono-100) !important;
  --fgColor-muted: var(--mono-300) !important;
  /* --fgColor-accent: var(--mono-200); */

  /* Borders & shadows */
  --borderColor-default: var(--mono-800);
  --borderColor-muted: var(--mono-900);
  --color-shadow-small: rgba(248, 249, 250, 0.08);
  --color-shadow-medium: rgba(248, 249, 250, 0.12);

  /* Buttons */
  --color-btn-primary-bg: var(--mono-200);
  --color-btn-primary-hoverBg: var(--mono-300);
  --color-btn-primary-activeBg: var(--mono-300);
  --color-btn-primary-text: var(--mono-1000);
  --color-btn-primary-border: var(--mono-300);

  --color-btn-border: var(--mono-800);
  --color-btn-text: var(--mono-100);
  --color-btn-hoverBg: var(--mono-900);
  --color-btn-activeBg: var(--mono-800);

  /* Links */
  --link-color: var(--mono-200);
}

/* Ensure the container element actually uses our palette */
[data-color-mode] {
  background-color: var(--bgColor-default);
  color: var(--fgColor-default);
}

/* Make Primer dropdown summaries styled like nav links */
.Header details.dropdown > summary.nav-link {
  color: var(--link-color) !important;
  cursor: pointer;
}
.Header details.dropdown > summary.nav-link:hover {
  text-decoration: underline;
}

html, body {
  font-family: var(--fontStack-system);
  background-color: var(--bgColor-default);
  color: var(--fgColor-default);
}

/* Remove header background styling */
.Header {
  background-color: transparent;
}

/* Ensure flash messages have a visible background and centered content */
.Flash {
  background-color: transparent !important;
  color: var(--fgColor-default);
  border: none;
  text-align: center;
  width: 100%;
  padding: 0.75rem 1rem;
}

/* --- Chat minimal styling (ChatGPT-like) --- */
.chat-container {
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 6rem; /* space for input */
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.chat-title { font-size: 1.5rem; margin: 0; }

.chat-list .chat-list-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--borderColor-muted);
}
.chat-link { color: var(--fgColor-default); text-decoration: none; }
.chat-meta { color: var(--fgColor-muted); font-size: 0.875rem; }

.chat-thread { display: flex; flex-direction: column; gap: 0.5rem; }

.msg { display: flex; }
.msg-content {
  max-width: 80%;
  white-space: pre-wrap;
  border-radius: 10px; /* slight rounding for all bubbles */
}
.msg-user .msg-content {
  margin-left: auto;
  padding: 0.5rem 0.75rem;
  background-color: var(--bgColor-muted);
  border: 1px solid var(--borderColor-default);
}
.msg-assistant .msg-content {
  margin-right: auto;
  padding: 0.5rem 0.75rem;
  background-color: var(--blueprint-chat-bg, rgba(9, 105, 218, 0.12)); /* light blue with more contrast */
  border: 1px solid rgba(9, 105, 218, 0.35);
}
.msg-system .msg-content,
.msg-tool .msg-content {
  margin-right: auto;
  padding: 0.5rem 0.75rem;
  color: var(--fgColor-muted);
}

/* Message timestamps like mobile chat */
.msg-meta { font-size: 0.7rem; color: var(--fgColor-muted); margin-top: 0.2rem; }
.msg-user .msg-meta { margin-right: auto; text-align: left; max-width: 80%; }
.msg-assistant .msg-meta { margin-left: auto; text-align: right; max-width: 80%; }

/* Compact dropdown styling for publish toggle (scoped to publish) */
details.publish-dropdown { display: inline-block; }
details.publish-dropdown > summary { display: inline-flex; align-items: center; cursor: pointer; }
details.publish-dropdown > summary::-webkit-details-marker { display: none; }
details.publish-dropdown[open] > .dropdown-menu { position: absolute; min-width: 240px; max-width: 320px; border: 1px solid var(--borderColor-default); border-radius: 6px; }
/* Compact dropdown styling for publish toggle (scoped to publish) */
details.publish-dropdown { display: inline-block; }
details.publish-dropdown > summary { display: inline-flex; align-items: center; cursor: pointer; }
details.publish-dropdown > summary::-webkit-details-marker { display: none; }
details.publish-dropdown[open] > .dropdown-menu { position: relative; min-width: 240px; max-width: 320px; border: 1px solid var(--borderColor-default); border-radius: 6px; }

/* Green button to match interface */
.btn-success {
  background-color: #2da44e !important;
  border-color: #2da44e !important;
  color: #fff !important;
}
.btn-success:hover { background-color: #2c974b !important; border-color: #2c974b !important; }

.chat-input {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background-color: var(--bgColor-default);
  border-top: 1px solid var(--borderColor-default);
  padding: 0.5rem;
}
.chat-form { max-width: 800px; margin: 0 auto; display: flex; gap: 0.5rem; }
.chat-textarea { flex: 1; }
.chat-actions { display: flex; align-items: center; }

/* --- Fallback gap utilities (if Primer gap-* not present) --- */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }

.brandaid {
  /* color: var(--bgColor-default);
  font-size: 3rem !important;
  letter-spacing: 0.05rem;
  text-shadow: 0px 2px 0px var(--borderColor-default), 0px 2px 3px var(--borderColor-default);
  text-transform: uppercase; */
}

/* .logo {
  border: 1px solid grey;
  border-radius: 50px;
  box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
} */

.brandaid {
  align-items: center;
  color:  var(--mono-300);
  /* background: var(--mono-600); */
   /* box-shadow: 0px 1px 2px rgba(0,0,0,0.1); */
   border-radius: 50px;
   border: 1px solid transparent !important;
   display: flex;
  font-size: 1rem !important;
  fill: var(--mono-300);
  gap: 0.15rem;
  /* -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  text-shadow: 0px 2px 2px rgba(255,255,255,0.5); */
  padding: 0.35rem 1.15rem;
  text-transform: lowercase;
  font-weight: 500;
  letter-spacing: 0.05rem;
}

.brandaid:hover {
  border: 1px solid var(--blueprint-bg) !important;
  color: var(--blueprint-bg);
  fill: var(--blueprint-bg);
  text-decoration: none;
}

.btn {
  align-items: center;
  border-radius: 30px;
  display: flex;
  flex-grow: 0;
  /* text-transform: lowercase; */
}


/* Reduce border radius specifically for the brand dropdown button */
.Header .brand-switcher summary.btn {
  border-radius: 18px !important;
  text-transform: none;
}

/* Slightly sharpen dropdown menu corners for brand switcher */
.Header .brand-switcher .dropdown-menu {
  border-radius: 18px !important;
}

.Box {
  border: none !important;
  box-shadow: none !important;
  /* background-color: transparent !important; */
}



/* Neutral boxed panels (non-blue, matches AI aesthetic subtly) */
.Box.box-neutral {
  background-color: var(--bgColor-muted) !important;
  border: 1px solid var(--borderColor-default) !important;
  border-radius: 12px !important;
}
.Box.box-neutral .Box-header,
.Box.box-neutral .Box-footer {
  background-color: transparent !important;
  border-color: var(--borderColor-default) !important;
}
.Box.box-neutral table {
  background: transparent !important;
  width: 100%;
}
.Box.box-neutral table th,
.Box.box-neutral table td {
  vertical-align: middle !important;
  padding: 8px 12px !important;
}
.Box.box-neutral thead th {
  border-bottom: 1px solid var(--borderColor-default) !important;
}
.Box.box-neutral tbody tr + tr td {
  border-top: 1px solid var(--borderColor-muted) !important;
}
.Box.box-neutral tbody tr:hover {
  background-color: var(--bgColor-default) !important;
}
/* Ensure action buttons align nicely in the right column */
.Box.box-neutral td.text-right .d-inline-flex {
  align-items: center !important;
}

/* --- Toast notifications (top-right) --- */
.toast-container {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 12000; /* above sticky toolbars and assistant */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background-color: var(--bgColor-muted);
  border: 1px solid var(--borderColor-default);
  color: var(--fgColor-default);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  padding: 8px 12px;
  min-width: 240px;
  max-width: 360px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 200ms ease;
}
.toast-in { opacity: 1; transform: translateY(0); }
.toast-out { opacity: 0; transform: translateY(-4px); }
.toast .title { font-weight: 600; margin-right: 8px; }
.toast-success { border-color: #2da44e; background-color: #dafbe1; }
.toast-danger { border-color: #d1242f; background-color: #ffebe9; }
.toast a { color: var(--link-color); text-decoration: underline; }

/* Dark theme adjusted backgrounds for toasts */
[data-color-mode="dark"] .toast-success { background-color: rgba(45, 164, 78, 0.18); }
[data-color-mode="dark"] .toast-danger  { background-color: rgba(209, 36, 47, 0.18); }

/* Smooth hover/collapse animation for AI assistant banner */
.ai-assistant { cursor: pointer; }
.ai-assistant .ai-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height 240ms ease, padding 200ms ease, opacity 180ms ease;
  z-index: 999;
}
/* Reveal when hovered, even if collapsed */
.ai-assistant.collapsed:hover .ai-panel {
  max-height: 62vh; /* large enough to reveal content */
  max-height: 62svh;
  opacity: 1;
  padding-bottom: 12px;
}
/* Keep visible when not collapsed */
.ai-assistant:not(.collapsed) .ai-panel {
  max-height: 480px;
  opacity: 1;
  padding-bottom: 12px;
}

.ai-assistant .container-md {
  padding: 0.5rem;
}

.ai-assistant.pinned .container-md {
  padding: 1rem;
}
/* Smooth child reveal for assistant panel */
.ai-assistant .ai-panel > * {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease 80ms, transform 240ms ease 80ms;
}
.ai-assistant.collapsed:hover .ai-panel > *,
.ai-assistant:not(.collapsed) .ai-panel > * {
  opacity: 1;
  transform: translateY(0);
}

/* Pin button visibility and invert when pinned */
.ai-assistant .ai-pin { display: none; }
.ai-assistant:not(.collapsed) .ai-pin,
.ai-assistant.pinned .ai-pin { display: inline-flex; }
.ai-assistant.collapsed:hover .ai-pin { display: inline-flex; }
/* Bold pin when pinned */
.ai-assistant.pinned .ai-pin { font-weight: 700 !important; }

.ai-assistant.pinned {
  min-height: 100%;
}

/* Blueprint theme for AI assistant */
:root {
  --blueprint-bg: #0969da;          /* deep blue */
  --blueprint-input-bg: #085ec4;     /* slightly darker for inputs */
  --blueprint-btn-bg: #085ec4;       /* mid-blue for default buttons */
  --blueprint-btn-primary: #032a57;  /* brighter blue for primary */
  --blueprint-chat-bg: rgba(9, 105, 218, 0.08); /* light blue for assistant bubbles */
}
.ai-assistant {
  background-color: var(--blueprint-bg) !important;
  border-top-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  max-height: 62vh;
  max-height: 62svh;
  overflow: visible; /* allow banner status to extend without clipping */
  z-index: 9998;
}
/* Pre-hidden state to avoid flashing before intro animation */
.ai-assistant.ai-pre {
  transform: translateY(100%);
}
/* Load-in slide-up effect for the assistant bar */
.ai-assistant.ai-intro {
  animation: aiSlideUp 300ms cubic-bezier(.2,.8,.2,1) both;
  will-change: transform;
}
@keyframes aiSlideUp {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-assistant.ai-intro { animation: none !important; }
}
.ai-assistant .Flash {
  color: #fff !important;
padding: 0;
}
.ai-assistant .Flash--working { color: #fff !important; }
.ai-assistant .color-fg-muted { color: rgba(255, 255, 255, 0.8) !important; }
.ai-assistant .btn {
  background-color: var(--blueprint-btn-bg) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}
.ai-assistant .btn:hover {
  filter: brightness(1.05);
}
.ai-assistant .btn.btn-primary {
  background-color: var(--blueprint-btn-primary) !important;
  border-color: var(--blueprint-btn-primary) !important;
  color: #fff !important;
}
.ai-assistant .Box {
  background-color: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 0;
  color: #fff !important;
}
.ai-assistant .ai-prompt,
.ai-assistant .ai-url,
.ai-assistant .ai-result,
.ai-assistant .ai-context {
  background-color: var(--blueprint-input-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Subtle top dividers inside AI panels */
.ai-assistant .ai-result,
.ai-assistant .ai-context {
  margin-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.ai-assistant .ai-prompt::placeholder,
.ai-assistant .ai-url::placeholder { color: rgba(255, 255, 255, 0.75) !important; }
.ai-assistant .ai-prompt:focus,
.ai-assistant .ai-url:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}

/* Role/persona dropdown styling within AI assistant */
.ai-assistant .form-select,
.ai-assistant select[data-tiptap-target="persona"] {
  background-color: var(--blueprint-btn-bg) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-size: 12px;
}
.ai-assistant .form-select:focus,
.ai-assistant select[data-tiptap-target="persona"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
.ai-assistant .form-select:hover,
.ai-assistant select[data-tiptap-target="persona"]:hover { filter: brightness(1.04); }

/* Ensure options remain readable in the native dropdown list */
.ai-assistant select[data-tiptap-target="persona"] option { color: #111; background: #fff; }

/* Ensure prompt wrapper spans the panel width but matches content column */
.ai-assistant .ai-panel .flex-auto,
.ai-assistant .ai-panel .flex-0 {
  width: 100% !important;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Sparkle wrapper (top row) */
.ai-assistant .ai-banner-center {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Slide-out banner status (next to sparkle) */
.ai-assistant .ai-banner-status {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
  width: 0; /* animate width instead of max-width to avoid cutoffs */
  opacity: 0;
  transition: width 240ms ease, opacity 160ms ease, padding 200ms ease;
  padding: 2px 0;
  border-radius: 12px;
}
.ai-assistant .ai-banner-status.ai-show {
  opacity: 1;
  padding: 2px 8px;
}
@media (prefers-reduced-motion: reduce) {
  .ai-assistant .ai-banner-status { transition: none; }
}

/* Sparkle working animation */
.ai-sparkle-working {
  display: inline-block;
  animation: sparklePulse 1.2s ease-in-out infinite;
  transform-origin: center center;
}
@keyframes sparklePulse {
  0%   { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%  { transform: scale(1.15) rotate(12deg); filter: drop-shadow(0 0 6px rgba(255,255,255,0.75)); }
  100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

/* TipTap selection bubble blueprint styling */
#tiptap-bubble {
  background-color: var(--blueprint-bg) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25) !important;
}
#tiptap-editor {
  position: relative;
  z-index: 1;
  cursor: text;
  border: 1px solid var(--borderColor-default);
  border-radius: 12px;
  background: var(--bgColor-default);
  padding: 0.75rem 1rem;
}
/* Ensure ProseMirror content is clearly focusable/clickable, including when empty */
#tiptap-editor .ProseMirror {
  min-height: 200px;
  outline: none;
  white-space: pre-wrap;
  pointer-events: auto;
}
#tiptap-editor .ProseMirror:focus {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}
#tiptap-bubble .btn {
  background-color: var(--blueprint-btn-bg) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}
#tiptap-bubble .btn:hover { filter: brightness(1.05); }
#tiptap-bubble [data-tiptap-target="bubblePreviewText"] {
  background-color: var(--blueprint-input-bg) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}
#tiptap-bubble [data-tiptap-target="bubblePreview"] .text-small { color: rgba(255, 255, 255, 0.85) !important; }

/* Extra small helpers */
.text-xs { font-size: 0.75rem !important; }
.ai-url {
  font-size: 0.85rem !important;
  padding: 0.35rem 0.6rem !important;
  border-radius: 16px !important;
  min-height: 32px;
}
.ai-url::placeholder { color: var(--fgColor-muted); }

/* ChatGPT-like prompt field in offwhite */
.ai-prompt {
  background-color: var(--mono-200) !important; /* offwhite */
  border: 1px solid var(--borderColor-default) !important;
  border-radius: 16px !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  resize: vertical;
  box-shadow: 0 1px 2px var(--color-shadow-small);
}

/* Centered, single-column form layout */
.form-centered {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}
.page-title {
  font-size: 2.5rem;
  text-align: center !important;
  margin-top: 0.5rem;
  position: relative;
}


/* Subtle page melt transitions for <main> */
main.melt-out {
  animation: meltOut 180ms ease forwards;
  will-change: opacity, transform, filter;
}
main.melt-in {
  animation: surfaceIn 240ms cubic-bezier(.2,.8,.2,1) forwards;
  will-change: opacity, transform, filter;
}

@keyframes meltOut {
  0% { opacity: 1; filter: none; transform: translateY(0) scale(1); }
  100% { opacity: 0; filter: blur(1px) saturate(0.99); transform: translateY(2px) scale(0.998); }
}

@keyframes surfaceIn {
  0% { opacity: 0; filter: blur(2px) saturate(0.99); transform: translateY(4px) scale(0.998); }
  100% { opacity: 1; filter: none; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  main.melt-out, main.melt-in { animation: none !important; }
}

.form-centered .form-label { display: block; margin-bottom: 0.25rem; }
.form-centered .form-control,
.form-centered .form-select,
.form-centered textarea,
.form-centered input[type="text"],
.form-centered input[type="email"],
.form-centered input[type="password"],
.form-centered input[type="url"] {
  width: 100% !important;
}
.form-centered .actions,
.form-centered .form-actions { margin-top: 0.5rem; }
.ai-prompt::placeholder { color: var(--fgColor-muted); }
.ai-prompt:focus {
  outline: none !important;
  border-color: var(--mono-800) !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
}

.dropdown-menu:before, .dropdown-menu:after {
  display: none;
}

.ai-pin {
  display: flex;
  height: 30px;
  justify-content: center;
  position: absolute;
  right: 1rem;
  width: 30px;
}

.absolute-right {
  left: 50%;
  position: absolute;
  right: 50%;
  transform: translateX(330px);
}

.ai-bubble {
  border-radius: 80px;
  height: 50px;
}
.ai-bubble {
  overflow: hidden;
  transition: max-width 240ms ease, height 240ms ease, padding 200ms ease, box-shadow 200ms ease;
}

.ai-bubble .ai-sparkle {
  position: relative;
}

.ai-bubble.collapsed {
  min-width: 50px;
  max-width: 50px;
  height: 50px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-bubble.collapsed [data-tiptap-target="bubbleToolbar"] {
  width: 100%;
  height: 100%;
}
.ai-bubble.collapsed [data-tiptap-target="bubbleToolbar"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
}
.ai-bubble.collapsed .ai-sparkle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 0;
  position: absolute;
}

.ai-bubble.collapsed .ai-sparkle svg {
  display: block;
}
.ai-bubble.collapsed [data-tiptap-target="bubbleToolbar"] .btn,
.ai-bubble.collapsed [data-tiptap-target="bubbleToolbar"] .form-select {
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
  width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ai-bubble.collapsed:hover,
.ai-bubble.collapsed:focus-within {
  max-width: 320px;
  padding: 8px 12px;
}
.ai-bubble.collapsed:hover [data-tiptap-target="bubbleToolbar"] .btn,
.ai-bubble.collapsed:focus-within [data-tiptap-target="bubbleToolbar"] .btn,
.ai-bubble.collapsed:hover [data-tiptap-target="bubbleToolbar"] .form-select,
.ai-bubble.collapsed:focus-within [data-tiptap-target="bubbleToolbar"] .form-select {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  width: auto;
  margin-left: 8px;
  padding: initial;
  border: initial;
  transition: opacity 160ms ease 80ms, transform 240ms ease 80ms;
}

@media (prefers-reduced-motion: reduce) {
  .ai-bubble { transition: none; }
  .ai-bubble.collapsed:hover,
  .ai-bubble.collapsed:focus-within { max-width: 320px; }
  .ai-bubble.collapsed [data-tiptap-target="bubbleToolbar"] .btn,
  .ai-bubble.collapsed [data-tiptap-target="bubbleToolbar"] .form-select { transition: none; }
}

.content-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: center;
  min-width: 100%;
  border-bottom: 1px solid var(--borderColor-default);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.Box-body:last-of-type {
  border-color: transparent;
}

.color-bg-subtle {
  background-color: var(--mono-200) !important;
}

.tiptap-toolbar {
  background-color: var(--bgColor-default);
  position: sticky;
  top: 0;
  z-index: 9999;
}