/* Shared page chrome for the note tools (/notes/bcba/ and /notes/bt/).
   Both pages mount the same engine, so they need the same styles; this file
   exists so a change to the info bubble or the cache timer lands on both
   instead of drifting between two inline <style> blocks.
   Page-specific rules (the BCBA tool ribbon) stay in their own page. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans, 'Atkinson Hyperlegible', 'Segoe UI', Inter, sans-serif);
  background: #eef1ea;
  min-height: 100vh;
  color: #2d3a1f;
}

/* Bar is full-bleed/sticky; page padding moves to the content wrapper. */
#root { padding: 28px 20px; }

/* ── Label-adjacent "i" help affordance ──────────────────────────────────── */

.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: middle;
}
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #c0d4a8;
  background: #eef4e6;
  color: #5a7040;
  font-size: 11px;
  font-weight: 700;
  cursor: help;
  line-height: 1;
  user-select: none;
}
.info-icon:focus { outline: 2px solid #5a7040; outline-offset: 1px; }
.info-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  /* Anchor to the icon's left so the wide bubble extends rightward and
     never runs off the left edge on narrow (mobile) viewports. */
  left: 0;
  visibility: hidden;
  opacity: 0;
  background: #2d3a1f;
  color: white;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  max-height: 50vh;
  overflow-y: auto;
  text-align: left;
  z-index: 100;
  pointer-events: none;
  transition: opacity 0.12s ease;
  white-space: pre-line;
  box-shadow: 0 4px 14px rgba(45, 58, 31, 0.18);
}
.info-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  /* Points at the icon. JS sets --arrow-left when the bubble is clamped to
     the viewport on open; falls back to ~8px for the hover/focus case. */
  left: var(--arrow-left, 8px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #2d3a1f;
}
.info-tip:hover .info-bubble,
.info-tip:focus-within .info-bubble,
.info-tip.open .info-bubble {
  visibility: visible;
  opacity: 1;
}
.info-tip.open .info-bubble { pointer-events: auto; }

/* ── Floating note-freshness countdown ───────────────────────────────────── */

.cache-timer { position: fixed; top: 70px; right: 14px; z-index: 60; font-family: inherit; }
.cache-timer-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  border: 1px solid #c0d4a8; background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #41502c; font-size: 13px; font-weight: 700; font-family: inherit;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em; cursor: help;
  box-shadow: 0 3px 12px rgba(45, 58, 31, 0.16);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.cache-timer-pill:focus-visible { outline: 2px solid #5a7040; outline-offset: 2px; }
.cache-timer-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #6f9a3f;
  box-shadow: 0 0 0 0 rgba(111, 154, 63, 0.5);
  animation: cacheDotPulse 2.4s ease-out infinite;
}
.cache-timer.state-low .cache-timer-pill { border-color: #d9b45a; color: #7a5a12; }
.cache-timer.state-low .cache-timer-dot { background: #d19a2a; animation-duration: 1.4s; }
.cache-timer.state-expired .cache-timer-pill { border-color: #cdd7c0; color: #8a968a; background: rgba(244, 247, 240, 0.92); }
.cache-timer.state-expired .cache-timer-dot { background: #b3c0a6; animation: none; box-shadow: none; }
@keyframes cacheDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(111, 154, 63, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(111, 154, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 154, 63, 0); }
}
@media (prefers-reduced-motion: reduce) { .cache-timer-dot { animation: none !important; } }
.cache-timer-bubble {
  position: absolute; top: calc(100% + 8px); right: 0;
  visibility: hidden; opacity: 0;
  width: max-content; max-width: min(300px, calc(100vw - 28px));
  background: #2d3a1f; color: white; padding: 10px 13px; border-radius: 8px;
  font-size: 12.5px; font-weight: 400; line-height: 1.55; text-align: left;
  z-index: 101; pointer-events: none; transition: opacity 0.12s ease;
  box-shadow: 0 6px 18px rgba(45, 58, 31, 0.22);
}
.cache-timer-bubble::after {
  content: ""; position: absolute; bottom: 100%; right: 14px;
  border: 6px solid transparent; border-bottom-color: #2d3a1f;
}
.cache-timer:hover .cache-timer-bubble,
.cache-timer.open .cache-timer-bubble { visibility: visible; opacity: 1; }
.cache-timer.open .cache-timer-bubble { pointer-events: auto; }
@media (max-width: 640px) { .cache-timer { top: 64px; right: 10px; } }

/* ── Output sections: responsive 2-up grid; any card can expand to a row ─── */

.output-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.output-grid .full-row { grid-column: 1 / -1; }
@media (max-width: 640px) { .output-grid { grid-template-columns: 1fr; } }

/* ── Assistant panel ─────────────────────────────────────────────────────────
   Docks right on a wide screen, becomes a bottom sheet on a narrow one, and
   collapses to a floating pill. When docked open, the page content is inset by
   the panel width so the note is never hidden behind it. */

/* A card that floats over the note, not a rail docked beside it.
   Docking meant the note lost a third of the window whenever the assistant was
   open, and reflowed under the technician mid-read. This covers a corner
   instead: the page never moves, tapping outside collapses it, and the pill
   brings it back exactly as it was. */
.revision-panel {
  position: fixed;
  right: 18px;
  bottom: 78px;
  width: min(400px, calc(100vw - 36px));
  max-height: min(640px, calc(100dvh - 140px));
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: #f7fbf3;
  border: 1px solid #c0d4a8;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(45, 58, 31, 0.26);
  font-family: inherit;
}

/* A slim bar, not a title block. The old header was a heavy dark slab carrying
   a heading and a sentence of instructions, which is a lot of furniture above a
   conversation that is usually two lines long. The instruction moved into the
   empty state, where it is actually needed and disappears once it is not. */
.revision-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 10px 10px 14px;
  background: #374528;
  color: white;
  flex-shrink: 0;
}
.revision-panel-title {
  font-size: 13px; font-weight: 700; margin: 0; letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 8px;
}
.revision-panel-close {
  flex-shrink: 0; border: none; background: transparent; color: #c7d3b5;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; font-family: inherit;
  border-radius: 6px;
}
.revision-panel-close:hover { color: white; background: rgba(255,255,255,0.12); }

/* Messages sit at the BOTTOM, growing upward, the way every other chat behaves.
   Anchoring them to the top left a tall blank column under two short lines,
   which read as broken rather than as calm. */
.revision-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* Messages sit at the bottom via auto margin on the FIRST child, not via
   justify-content: flex-end on the scroller.

   That distinction is the whole fix. A flex column with justify-content:
   flex-end and overflow-y: auto puts content that overflows the TOP outside the
   scrollable range: it is rendered, it is clipped, and no amount of scrolling
   reaches it. So a long exchange kept growing and the earliest turns became
   permanently unreadable. His report: "the Ask NoMe history should be
   scrollable so I can review all my inputs and responses."

   An auto top margin gives the same look while the whole history stays in
   reach. */
.revision-panel-body > :first-child { margin-top: auto; }

/* The instruction that used to live in the header, shown only while there is
   nothing else to show. */
.revision-empty {
  margin: auto 0 4px;
  padding: 12px 14px;
  border: 1px dashed #c7d3b5;
  border-radius: 10px;
  background: rgba(255,255,255,0.6);
  color: #5a6b4a;
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
}

/* Skipping the questions is a legitimate choice, not a failure state, but it is
   also the one the technician should notice they are making. Amber reads as
   "your call" where the dashed grey outline read as disabled. */
.revision-skip {
  display: block; width: 100%;
  padding: 9px 12px; border-radius: 8px;
  border: 1.5px solid #e3c26a;
  background: #fbeec4;
  color: #8a3b2c;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.revision-skip:hover:not(:disabled) { background: #f7e6b8; border-color: #c9962a; }
.revision-skip:disabled { opacity: 0.55; cursor: not-allowed; }

/* The bar under the skip button while it is counting down. This state is
   deliberately NOT the flat 0.55 "unavailable" look above: the button is
   working exactly as intended, so it should read as a moment passing rather
   than as something broken. The drain is a plain width transition so it stays
   on the compositor and keeps running if the tab is busy generating. */
.skip-cooldown .revision-skip:disabled { opacity: 1; color: #9a7b3d; background: #fdf6e0; border-color: #ecdca6; }
.skip-cooldown-bar {
  height: 3px; margin-top: 5px; border-radius: 2px;
  background: #f0e3bb; overflow: hidden;
}
.skip-cooldown-bar > span {
  display: block; height: 100%; border-radius: 2px;
  background: #c9962a;
  transition: width 260ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .skip-cooldown-bar > span { transition: none; }
}

/* A revision that reached past the section that was clicked, held rather than
   applied. Amber for the same reason the skip button is amber: this is a call
   the clinician has to make, not a failure and not a warning. */
.routing-ask {
  border: 1.5px solid #e3c26a;
  background: #fffaf0;
  border-radius: 10px;
  padding: 11px 13px;
  margin: 4px 0 10px;
}
.routing-ask-q { margin: 0 0 7px; font-size: 12.5px; line-height: 1.5; color: #6d5410; }
.routing-ask-q strong { color: #5a4408; }
/* The wording itself, so the choice is made on what it says rather than on the
   name of a section. Bounded, because a long narrative would push the buttons
   off the bottom of a panel that is already height-capped. */
.routing-ask-preview {
  margin: 0 0 9px;
  padding: 8px 10px;
  background: white;
  border: 1px solid #efe0bd;
  border-radius: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #4a3708;
  max-height: 132px;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.routing-ask-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.routing-take, .routing-leave {
  flex: 1 1 auto;
  padding: 8px 12px; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.routing-take { border: none; background: #374528; color: white; }
.routing-take:hover { background: #2d3a1f; }
.routing-leave { border: 1.5px solid #e3c26a; background: transparent; color: #8a3b2c; }
.routing-leave:hover { background: #fbeec4; }

/* The offer to put a question to the BCBA. Sage rather than amber: this is a
   suggestion worth taking, not a decision the technician has to adjudicate. */
.bcba-offer {
  border: 1.5px solid #c0d4a8;
  background: #f0f5e8;
  border-radius: 10px;
  padding: 11px 13px;
  margin: 4px 0 10px;
}
.bcba-offer-q { margin: 0 0 7px; font-size: 12.5px; font-weight: 700; color: #374528; line-height: 1.5; }
.bcba-offer-preview {
  margin: 0 0 9px; padding: 8px 10px;
  background: white; border: 1px solid #ddecd0; border-radius: 7px;
  font-size: 12.5px; line-height: 1.5; color: #2d3a1f;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.bcba-offer-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.bcba-take, .bcba-leave {
  flex: 1 1 auto; padding: 8px 12px; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.bcba-take { border: none; background: #374528; color: white; }
.bcba-take:hover { background: #2d3a1f; }
.bcba-leave { border: 1.5px solid #c0d4a8; background: transparent; color: #5a6b4a; }
.bcba-leave:hover { background: #e8efdd; }

/* The ticket offer borrows the BCBA offer's shape but not its colour: one is
   clinical and goes in the record, the other is product feedback and does not. */
.ticket-offer { border-color: #c9b8d8; background: #f4f0f8; }
.ticket-offer .bcba-offer-q { color: #4a3a5c; }
.ticket-offer .bcba-take { background: #4a3a5c; }
.ticket-offer .bcba-take:hover { background: #3a2d48; }
.ticket-offer .bcba-take:disabled { background: #a99bb8; cursor: not-allowed; }
.ticket-offer .bcba-leave { border-color: #c9b8d8; color: #4a3a5c; }
.ticket-offer .bcba-leave:hover { background: #ebe3f2; }

.revision-panel-foot {
  flex-shrink: 0;
  padding: 10px 14px 12px;
  border-top: 1px solid #ddecd0;
  background: white;
}
.revision-chip-row { margin-bottom: 8px; }
.revision-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  padding: 4px 6px 4px 10px; border-radius: 999px;
  background: #e2e6d9; border: 1px solid #c0d4a8;
  color: #374528; font-size: 12px; line-height: 1.4;
  overflow-wrap: anywhere;
}
.revision-chip strong { font-weight: 700; }
.revision-chip button {
  flex-shrink: 0; border: none; background: transparent; color: #5a6b4a;
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; font-family: inherit;
}
.revision-chip button:hover { color: #2d3a1f; }

.revision-input {
  flex: 1 1 auto; min-width: 0;
  padding: 9px 11px; border-radius: 8px; border: 1.5px solid #c0d4a8;
  background: #fafcf8; color: #2d3a1f;
  font-family: inherit; font-size: 13px; line-height: 1.5; resize: vertical;
}
.revision-input:focus { outline: none; border-color: #6a7659; box-shadow: 0 0 0 3px rgba(106, 118, 89, 0.2); }
.revision-send {
  flex-shrink: 0; padding: 10px 18px; border-radius: 8px; border: none;
  background: #374528; color: white; font-family: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.revision-send:disabled { background: #a0b890; cursor: not-allowed; }

/* "What would you do here?" - the only control that reaches the supervising
   clinician's stored judgement, and the only one that answers without touching
   the note. Deliberately quieter than Send: asking for advice is a side errand,
   not the main loop, and it should not compete with revising for the eye. */
.revision-advice-row { margin-top: 8px; }
.revision-advice {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1px dashed #c3d6ac; background: transparent; color: #4d5840;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  text-align: center; transition: background .13s, border-color .13s;
}
.revision-advice:hover:not(:disabled) { background: #f2f7ec; border-color: #7a9460; }
.revision-advice:disabled { color: #a0b890; border-color: #e2ebd8; cursor: not-allowed; }

/* Reporting a problem used to be a second orange circle pinned to the same
   corner as the assistant pill, one on top of the other. It sits in the panel
   now: quiet under the composer while things are working, and the only control
   in the footer when nobody is signed in, because a login bug is reported from
   the login screen or it is not reported at all. */
.revision-report-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eef3e7;
  display: flex;
  justify-content: flex-end;
}
.revision-report-row.revision-report-only {
  margin-top: 0; padding-top: 0; border-top: none;
  justify-content: stretch;
}
.revision-report {
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #8a6d1f;
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.revision-report:hover { background: #fdf6e0; color: #6d5410; border-color: #e3c26a; }
.revision-report:focus-visible { outline: 2px solid #d9932b; outline-offset: 2px; }
.revision-report-only .revision-report {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  background: #fbeec4;
  border-color: #e3c26a;
  color: #8a3b2c;
}
.revision-report-only .revision-report:hover { background: #f7e6b8; border-color: #c9962a; }
@media (prefers-reduced-motion: reduce) { .revision-report { transition: none; } }
.revision-foot-note { margin: 7px 0 0; font-size: 11px; color: #9aab86; line-height: 1.4; position: relative; }

/* PHI carries its own definition. A button rather than a title attribute so it
   works by tap on a tablet, where most of these notes are actually written. */
/* Crimson, and no box. This is the one line on the panel that says "do not do
   this", so it should read as a warning rather than as another card. #9b1c1c on
   white is 8.4:1, well clear of WCAG AA at this size. */
.phi-term {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: #9b1c1c;
  text-decoration: underline; text-underline-offset: 2px;
}
.phi-term:hover, .phi-term:focus-visible { color: #7a1414; }
.phi-tip {
  display: block; margin-top: 5px;
  color: #9b1c1c; font-size: 11px; font-weight: 700; line-height: 1.5;
}
@media (hover: hover) {
  .revision-foot-note:hover .phi-tip { display: block; }
}


/* ── Point at anything ───────────────────────────────────────────────────────
   The mode selector sits beside the collapsed pill rather than inside the
   panel, because pointing is something you do while the panel is out of the
   way. The dock keeps the two together so they can never drift apart or stack
   on each other the way the report button once did. */
.revision-dock {
  position: fixed; right: 18px; bottom: 18px; z-index: 71;
  display: flex; align-items: center; gap: 8px;
}
/* The pill is inside the dock now, so it stops positioning itself. */
.revision-dock .revision-fab { position: static; right: auto; bottom: auto; z-index: auto; }

.revision-head-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* In the panel header the selector is small and sits on the dark bar, so it
   inverts rather than carrying the floating button's white circle. */
.revision-panel-head .point-toggle {
  width: 26px; height: 26px; font-size: 14px;
  background: transparent; color: #c7d3b5; border-color: rgba(255,255,255,0.28);
  box-shadow: none;
}
.revision-panel-head .point-toggle:hover { background: rgba(255,255,255,0.12); color: white; }
.revision-panel-head .point-toggle.is-on { background: white; color: #374528; border-color: white; }

.point-toggle {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid #c0d4a8; background: white; color: #374528;
  font-size: 19px; line-height: 1; cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 20px rgba(45, 58, 31, 0.22);
  transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}
.point-toggle:hover { background: #eef4e6; transform: translateY(-1px); }
.point-toggle:focus-visible { outline: 3px solid #9bb27c; outline-offset: 2px; }
.point-toggle.is-on { background: #374528; color: white; border-color: #374528; }
@media (prefers-reduced-motion: reduce) { .point-toggle { transition: none; } }

/* While pointing, the whole page is a target, so the cursor says so everywhere
   rather than only over the things that were already clickable. */
body.is-pointing, body.is-pointing * { cursor: crosshair !important; }

/* Outline rather than background: it has to read on a white card, a sage
   card, a button and a line of help text without hiding any of them.
   outline does not affect layout, so nothing shifts as the pointer moves. */
.point-hover {
  outline: 2px solid #d9932b !important;
  outline-offset: 1px;
  border-radius: 3px;
  background: rgba(240, 193, 75, 0.14) !important;
}

/* A pointed-at piece of page furniture is not a section of the note, and the
   chip should not pretend otherwise. */
.revision-chip.is-page { background: #fdf6e0; border-color: #e3c26a; color: #6d5410; }
.revision-chip.is-page strong { color: #5a4408; }

@media (max-width: 640px) {
  .revision-dock { right: 12px; bottom: 12px; }
}

/* The collapsed assistant. It carries the note's quality, so the reason to open
   it is on the button itself rather than discovered after opening. */
.revision-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 71;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px 11px 12px; border-radius: 999px; border: none;
  background: #374528; color: white;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 20px rgba(45, 58, 31, 0.32);
  transition: background .16s ease, transform .16s ease;
}
.revision-fab:hover { background: #4d5840; transform: translateY(-1px); }
.revision-fab:focus-visible { outline: 3px solid #9bb27c; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .revision-fab { transition: none; } }

/* The status disc. Colour AND glyph, so it does not rely on colour alone. */
.revision-fab-check {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 13px; font-weight: 700; line-height: 1;
  background: #a9b89a; color: #2d3a1f;
}
.revision-fab.quality-good .revision-fab-check    { background: #6fbf3f; color: #12300a; }
.revision-fab.quality-thin .revision-fab-check    { background: #f0c14b; color: #4a3708; }
.revision-fab.quality-missing .revision-fab-check { background: #e0554a; color: #fff; }

/* "Ask" is a word; NoMe is the mark. Setting the mark's height in em keeps the
   two locked together at whatever size the pill or the header bar is using, and
   the -0.06em nudge lands its cap height on the same optical line as the text
   rather than on the raster's own top edge. */
.revision-fab-label { display: inline-flex; align-items: center; gap: 5px; }
.nome-mark {
  height: 1.05em;
  width: auto;
  display: block;
  margin-top: -0.06em;
}

.revision-fab-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #f0c14b;
  box-shadow: 0 0 0 2px #374528;
}

/* Same signal, repeated in the open panel's header bar. */
.revision-head-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #a9b89a; flex-shrink: 0;
}
.revision-head-dot.quality-good    { background: #6fbf3f; }
.revision-head-dot.quality-thin    { background: #f0c14b; }
.revision-head-dot.quality-missing { background: #e0554a; }

/* Inset the page so a docked panel never covers the note. Below this width the
   panel is a sheet over the content instead, so no inset applies. */
/* No inset any more: the panel floats, so the note keeps the whole window and
   never reflows underneath the reader.

   The error-report button lives in the same corner as the assistant pill and
   used to sit on top of it, which is why the pill read as "Assista". They are
   now stacked deliberately: the pill owns the corner, the error button sits
   above it, and both shift together when the panel opens. */
#eb-float-btn { bottom: 74px !important; }
@media (min-width: 900px) {
  body.revision-open #eb-float-btn { bottom: calc(min(640px, 100dvh - 140px) + 86px) !important; }
}
@media (max-width: 899px) {
  body.revision-open #eb-float-btn { bottom: calc(min(72dvh, 520px) + 14px) !important; }
}
#eb-float-btn { transition: right .18s ease, bottom .18s ease; }
@media (prefers-reduced-motion: reduce) { #eb-float-btn { transition: none; } }
@media (max-width: 899px) {
  .revision-panel {
    right: 10px;
    left: 10px;
    bottom: 74px;
    width: auto;
    max-height: min(70dvh, 520px);
    border-left: 1px solid #c0d4a8;
    border-top: 1px solid #c0d4a8;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 26px rgba(45, 58, 31, 0.18);
  }
  .revision-panel-head { border-radius: 14px 14px 0 0; }
}

/* ── Inline revision diff ────────────────────────────────────────────────────
   A revision returns the whole section, so the change is marked in place rather
   than shown as a second copy of the paragraph elsewhere. */

.diff-view {
  padding: 10px; border-radius: 7px;
  border: 2px solid #c8b26a; background: #fffbef;
  font-size: 14px; line-height: 1.65; color: #2d3a1f;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* A little padding and a hair of separation: an inserted run butted straight up
   against the deleted run it replaces reads as one garbled word. */
.diff-ins,
.diff-del { border-radius: 3px; padding: 1px 2px; margin: 0 1px; }
.diff-ins { background: #dbf0d5; color: #1f4416; text-decoration: none; }
.diff-del { background: #f7dcd6; color: #7d2b1a; text-decoration: line-through; }
.diff-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 8px;
}
.diff-accept {
  padding: 7px 18px; border-radius: 7px; border: none;
  background: #374528; color: white; font-family: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.diff-discard {
  padding: 7px 14px; border-radius: 7px; border: 1.5px solid #b0a070;
  background: white; color: #6d5613; font-family: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.diff-note { font-size: 11.5px; color: #8a7430; margin: 0; }

/* A section the panel is currently targeting. */
.section-targeted { outline: 2px solid #7c6cd6; outline-offset: 2px; }
.section-clickable { cursor: pointer; }

/* ── Panel switch animation ──────────────────────────────────────────────── */

.tool-panel { animation: panelIn 0.22s ease; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-panel { animation: none; }
}

/* A compact full-width section: one short band, not a tall card.
   "BCBA Reviewed All Session Notes for Last Week" is a yes or a no, and it was
   taking the same vertical space as a paragraph because the heading, the answer
   and three lines of explanation each got their own row. Where there is width,
   they sit on one line and the explanation takes what is left. */
[data-compact="true"] { padding: 11px 14px !important; }
@media (min-width: 720px) {
  [data-compact="true"] > div:first-child { margin-bottom: 0 !important; }
  [data-compact="true"] .compact-body {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  }
  [data-compact="true"] .compact-body > * { margin: 0; }
  /* The "suggested from what you wrote" line stops being a paragraph under the
     answer and becomes the tail of the same line. */
  [data-compact="true"] .compact-body .section-note {
    flex: 1 1 220px; min-width: 0; font-size: 11.5px;
  }
}