/* "Ask Claude" drawer. Unfold ships a purged Tailwind build, so the drawer brings its own rules. */
:root {
  --ca-bg: #ffffff;
  --ca-fg: #13161b;
  --ca-muted: #6b7280;
  --ca-border: rgba(127, 127, 127, 0.25);
  --ca-user-bg: #0f4030;
  --ca-user-fg: #ffffff;
  --ca-assistant-bg: #f3f4f6;
  --ca-accent: #75a432;
  --ca-code-bg: rgba(0, 0, 0, 0.06);
  --ca-fab-hover-bg: #0c3729;
  --ca-note-bg: #fefce8;
  --ca-note-border: #fde68a;
  --ca-note-fg: #854d0e;
  /* Width the "Ask Claude" label adds to the floating button; LABEL_ROOM_REM in assistant-panel.js matches. */
  --ca-fab-label-room: 6.25rem;
}
.dark {
  --ca-bg: #111827;
  --ca-fg: #e5e7eb;
  --ca-muted: #9ca3af;
  --ca-border: rgba(255, 255, 255, 0.12);
  --ca-assistant-bg: #1f2937;
  --ca-code-bg: rgba(255, 255, 255, 0.08);
  --ca-note-bg: rgba(234, 179, 8, 0.12);
  --ca-note-border: rgba(234, 179, 8, 0.35);
  --ca-note-fg: #fde68a;
}

.ca-drawer {
  position: fixed;
  bottom: 0;
  right: 0;
  height: 100vh;
  height: 100dvh; /* the visible viewport on phones, so the form at the bottom stays reachable */
  max-height: 100dvh;
  width: 28rem;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--ca-bg);
  color: var(--ca-fg);
  border-left: 1px solid var(--ca-border);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 160ms ease-out;
  z-index: 40;
}
.ca-drawer.ca-open { transform: translateX(0); }
/* Grips: the left edge sets the width, the top edge the height, the top-left corner both. */
.ca-resize { position: absolute; touch-action: none; z-index: 1; }
.ca-resize-x { top: 0; bottom: 0; left: 0; width: 0.625rem; cursor: ew-resize; }
.ca-resize-y { top: 0; left: 0; right: 0; height: 0.625rem; cursor: ns-resize; }
.ca-resize-xy { top: 0; left: 0; width: 1.25rem; height: 1.25rem; cursor: nwse-resize; }
.ca-resize-x::after, .ca-resize-y::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: var(--ca-border);
}
.ca-resize-x::after { left: 0.25rem; top: 50%; width: 0.25rem; height: 2.5rem; margin-top: -1.25rem; }
.ca-resize-y::after { top: 0.25rem; left: 50%; width: 2.5rem; height: 0.25rem; margin-left: -1.25rem; }
.ca-resize:hover::after { background: var(--ca-muted); }

.ca-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ca-border);
}
.ca-heading { display: flex; flex-direction: column; min-width: 0; }
.ca-title { font-weight: 600; }
.ca-subtitle { font-size: 0.75rem; color: var(--ca-muted); }
.ca-close {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ca-muted);
  background: none;
  border: 0;
  cursor: pointer;
}
.ca-container, .ca-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.ca-context {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: var(--ca-muted);
  border-bottom: 1px solid var(--ca-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-disclaimer {
  margin: 0.75rem 1rem 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ca-note-fg);
  background: var(--ca-note-bg);
  border: 1px solid var(--ca-note-border);
  border-radius: 0.5rem;
}

.ca-messages { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; }
.ca-empty { font-size: 0.875rem; color: var(--ca-muted); }
.ca-empty ul { margin: 0.5rem 0 0.75rem 1.25rem; list-style: disc; }
.ca-empty li { margin: 0.25rem 0; }

.ca-msg { display: flex; margin-bottom: 0.75rem; }
.ca-msg > * { max-width: 85%; border-radius: 0.75rem; padding: 0.5rem 0.875rem; font-size: 0.875rem; }
.ca-user { justify-content: flex-end; }
.ca-user p { background: var(--ca-user-bg); color: var(--ca-user-fg); white-space: pre-wrap; margin: 0; }
.ca-assistant { justify-content: flex-start; background: var(--ca-assistant-bg); border-radius: 0.75rem; padding: 0.5rem 0.875rem; }
.ca-assistant { display: block; max-width: 92%; }
.ca-nav a {
  display: inline-block;
  background: var(--ca-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.ca-pending { color: var(--ca-muted); font-size: 0.8125rem; }
.ca-dots { display: inline-block; margin-right: 0.25rem; }
.ca-dots span {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.25rem;
  border-radius: 999px;
  background: var(--ca-muted);
  animation: ca-pulse 1.4s infinite ease-in-out;
}
.ca-dots span:nth-child(2) { animation-delay: 0.2s; }
.ca-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ca-pulse { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

.ca-form { padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--ca-border); }
.ca-form textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--ca-border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: var(--ca-bg);
  color: var(--ca-fg);
}
.ca-form textarea:focus { outline: 2px solid var(--ca-accent); outline-offset: 0; }
.ca-form-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.ca-form-row .ca-primary { margin-left: auto; }
.ca-primary, .ca-secondary {
  border-radius: 0.5rem;
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.ca-primary { background: var(--ca-user-bg); color: #fff; border: 0; }
.ca-primary:disabled { opacity: 0.5; cursor: wait; }
.ca-page .ca-close-panel { display: none; }
.ca-secondary { background: none; color: var(--ca-muted); border: 1px solid var(--ca-border); }

/* Floating, draggable Nofence mark, as on the staff tools button. The default spot clears Unfold's fixed save
   row at the bottom of change pages. With a mouse it unfolds into "Ask Claude" (see expandOnHover). */
.ca-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 6.5rem;
  z-index: 39;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background: var(--ca-user-bg);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  transition: background 160ms ease, transform 160ms ease, width 160ms ease, padding 160ms ease;
}
.ca-fab.ca-expanded {
  width: calc(3rem + var(--ca-fab-label-room));
  justify-content: flex-start;
  padding: 0 0.75rem 0 0.625rem;
}
.ca-fab:hover { background: var(--ca-fab-hover-bg); }
/* The mark's weight sits right of its box's left edge, so it is nudged a little to read as centred. */
.ca-fab svg { height: 1.75rem; width: auto; flex: none; transform: translateX(0.125rem); }
.ca-fab-mark-fill { fill: var(--ca-accent); }
.ca-fab-label {
  flex: none;
  width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  transition: opacity 120ms ease 60ms;
}
.ca-fab.ca-expanded .ca-fab-label { flex: 1 1 auto; width: auto; margin-left: 0.5rem; opacity: 1; }
/* A dragged button (anchored on the left) near the right edge grows leftwards instead, so it never leaves the
   screen. The default spot is anchored on the right and grows leftwards by itself. */
.ca-fab.ca-expanded.ca-grow-left { transform: translateX(calc(-1 * var(--ca-fab-label-room))); }
.ca-fab.ca-dragging { cursor: grabbing; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); transition: none; }

/* Full-page variant (the sidebar link without JavaScript). */
.ca-page .ca-body { max-width: 48rem; height: calc(100vh - 12rem); border: 1px solid var(--ca-border); border-radius: 0.75rem; }

/* Markdown in assistant replies. */
.ca-prose { line-height: 1.6; }
.ca-prose p { margin: 0.5em 0; }
.ca-prose p:first-child { margin-top: 0; }
.ca-prose p:last-child { margin-bottom: 0; }
.ca-prose ul, .ca-prose ol { margin: 0.5em 0; padding-left: 1.5em; }
.ca-prose ul { list-style: disc; }
.ca-prose ol { list-style: decimal; }
.ca-prose li { margin: 0.25em 0; }
.ca-prose code { background: var(--ca-code-bg); padding: 0.15em 0.35em; border-radius: 0.25em; font-size: 0.85em; }
.ca-prose pre { background: #1e1e1e; color: #d4d4d4; padding: 0.75em 1em; border-radius: 0.5em; overflow-x: auto; margin: 0.5em 0; }
.ca-prose pre code { background: none; padding: 0; color: inherit; }
.ca-prose h1, .ca-prose h2, .ca-prose h3 { font-weight: 600; margin: 0.75em 0 0.25em; font-size: 1em; }
.ca-prose table { border-collapse: collapse; margin: 0.5em 0; width: 100%; font-size: 0.8125rem; }
.ca-prose th, .ca-prose td { border: 1px solid var(--ca-border); padding: 0.3em 0.5em; text-align: left; }
.ca-prose th { font-weight: 600; }
.ca-prose a { color: var(--ca-accent); text-decoration: underline; }
.ca-prose strong { font-weight: 600; }

@media (max-width: 640px) {
  /* The drawer takes the whole screen, above Unfold's header, and the page behind it must not scroll. */
  .ca-drawer { width: 100vw !important; height: 100dvh !important; z-index: 60; }
  .ca-resize { display: none; }
  html.ca-drawer-open, html.ca-drawer-open body { overflow: hidden; }
}