/* The chat: a button at the foot of the page and the panel it opens. Colors and faces are the
   tokens', so the widget follows the theme where an image could not; the accent is --c-mid,
   what every control in the family is. The panel is a sheet on a phone, a card on a desk. */
.rbchat-open{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:60;
  display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .95rem;border-radius:999px;
  border:1px solid var(--rule);background:var(--raise);color:var(--ink);cursor:pointer;
  font:inherit;font-size:.92rem;box-shadow:0 6px 24px var(--deck-drop)}
.rbchat-open svg{color:var(--c-mid)}
.rbchat-open:hover,.rbchat-open:focus-visible{border-color:var(--c-mid);outline:none}
.rbchat-open:focus-visible{box-shadow:0 0 0 3px var(--press)}
.rbchat{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:61;
  width:min(26rem,calc(100vw - 2rem));height:min(70vh,40rem);display:flex;flex-direction:column;
  background:var(--ground);color:var(--ink);border:1px solid var(--rule);border-radius:14px;
  box-shadow:0 18px 60px var(--deck-drop);overflow:hidden}
.rbchat[hidden]{display:none}
/* The corner that sizes the panel: the top left one, the only corner that can move while the
   panel stays pinned to the bottom right. It is the stage gutter's manners in a corner — drag,
   arrow keys when focused, double-click back to the default — and it shows the cursor a reader
   already reads as "pull me". */
.rbchat-grip{position:absolute;top:0;left:0;width:18px;height:18px;z-index:2;cursor:nwse-resize;
  border-top:2px solid var(--rule);border-left:2px solid var(--rule);border-top-left-radius:14px;
  background:none;touch-action:none}
.rbchat-grip:hover,.rbchat-grip.dragging{border-color:var(--c-mid)}
.rbchat-grip:focus-visible{outline:2px solid var(--c-mid);outline-offset:2px}
.rbchat-head{display:flex;align-items:center;gap:.4rem;padding:.75rem 1rem;border-bottom:1px solid var(--rule);background:var(--raise)}
.rbchat-head h2{margin:0;margin-right:auto;font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;font-size:1.05rem}
.rbchat-close{border:0;background:none;color:var(--dim);font-size:1.4rem;line-height:1;cursor:pointer;padding:.2rem .4rem;border-radius:6px}
/* Starting over, beside the way out and quieter than it: the same ink as the close cross, an
   arrow come back round rather than a word, held a little apart from the cross so the two are
   not one control, and gone whenever there is no conversation to clear. */
.rbchat-new{border:0;background:none;color:var(--dim);line-height:0;cursor:pointer;padding:.3rem;border-radius:6px;margin-left:auto;margin-right:.35rem}
.rbchat-new[hidden]{display:none}
.rbchat-new:hover,.rbchat-new:focus-visible{color:var(--ink);outline:2px solid var(--c-mid);outline-offset:2px}
.rbchat-close:hover,.rbchat-close:focus-visible{color:var(--ink);outline:2px solid var(--c-mid);outline-offset:2px}
/* The note under a header control: what the family's .tip says on a chip, in the same box, drawn
   by the stylesheet because card.js is not on every page the chat is. It hangs below and to the
   left of its button, since the panel clips above its header and the buttons sit at its right
   edge. It shows on hover and on keyboard focus, never on a tap's focus. */
.rbchat-new,.rbchat-close{position:relative}
.rbchat-new[data-tip]::after,.rbchat-close[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + .45rem);right:0;z-index:3;
  white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(-2px);transition:opacity .12s ease,transform .12s ease;
  background:var(--raise);border:1px solid var(--rule);border-radius:6px;padding:.42rem .62rem;
  box-shadow:0 6px 18px var(--deck-drop);font-family:inherit;font-size:.8rem;font-weight:400;line-height:1.35;letter-spacing:0;color:var(--ink)}
.rbchat-new:hover::after,.rbchat-new:focus-visible::after,.rbchat-close:hover::after,.rbchat-close:focus-visible::after{opacity:1;transform:none}
@media (hover:none){.rbchat-new[data-tip]::after,.rbchat-close[data-tip]::after{display:none}}
@media (prefers-reduced-motion:reduce){.rbchat-new[data-tip]::after,.rbchat-close[data-tip]::after{transition:none}}
.rbchat-notice{margin:0;padding:.6rem 1rem;font-size:.8rem;line-height:1.4;color:var(--dim);border-bottom:1px solid var(--rule)}
.rbchat-notice code{font-family:"Plex Mono",ui-monospace,Menlo,monospace;font-size:.95em;color:var(--ink)}
.rbchat-notice a{color:var(--c-mid)}
.rbchat-log{flex:1;overflow-y:auto;padding:.75rem 1rem;display:flex;flex-direction:column;gap:.6rem;font-size:.95rem;line-height:1.5}
.rbchat-msg{max-width:92%;padding:.55rem .8rem;border-radius:12px;overflow-wrap:anywhere}
.rbchat-user{align-self:flex-end;background:var(--press);color:var(--ink);white-space:pre-wrap}
.rbchat-assistant{align-self:flex-start;background:var(--raise);border:1px solid var(--rule)}
.rbchat-refusal{align-self:center;color:var(--dim);font-size:.88rem;font-style:italic}
/* The way in, offered under an empty log: quiet chips in the same border-and-text form a
   card's skill chips take, .cbody .chips a in stage.css, so an offer reads as an offer and not
   as an answer already given. They wrap rather than push the panel wider. */
.rbchat-questions{display:flex;flex-wrap:wrap;gap:.4rem}
.rbchat-q{font:inherit;font-size:.86rem;line-height:1.3;padding:.4rem .7rem;border-radius:8px;
  border:1px solid var(--rule);background:none;color:var(--c-mid);cursor:pointer;text-align:left;
  max-width:100%;white-space:normal;overflow-wrap:anywhere}
.rbchat-q:hover,.rbchat-q:focus-visible{border-color:var(--c-mid)}
.rbchat-q:focus-visible{outline:2px solid var(--c-mid);outline-offset:2px}
.rbchat-body p{margin:0 0 .6rem}.rbchat-body p:last-child{margin-bottom:0}
.rbchat-body ul,.rbchat-body ol{margin:0 0 .6rem 1.2rem;padding:0}
.rbchat-body code{font-family:"Plex Mono",ui-monospace,Menlo,monospace;font-size:.88em;background:var(--press);padding:.05em .3em;border-radius:4px}
.rbchat-body table{border-collapse:collapse;margin:.2rem 0 .6rem;font-size:.9em;display:block;overflow-x:auto;max-width:100%}
.rbchat-body th,.rbchat-body td{border:1px solid var(--rule);padding:.3rem .5rem;text-align:left;vertical-align:top}
.rbchat-body th{background:var(--press);font-weight:600}
.rbchat-wait{margin:0;color:var(--dim);font-style:italic}
.rbchat-wait::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:rbchat-dots 1.2s steps(4,end) infinite}
@keyframes rbchat-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){.rbchat-wait::after{animation:none;content:"\2026"}}
/* One link, the card's: a name or a cited title in the answer and a title on the line under it
   take the treatment of a card's model link, .cbody a.go in stage.css, because that is the
   nearest sibling, a body of prose linking into the model. Written in tokens, so both themes
   follow. Before this, a link in the body fell through to the browser's default. */
.rbchat-body a,.rbchat-cites a.rbchat-cite{color:var(--c-mid);text-decoration:none;border-bottom:1px solid var(--c-weak)}
.rbchat-body a:hover,.rbchat-body a:focus-visible,.rbchat-cites a.rbchat-cite:hover,.rbchat-cites a.rbchat-cite:focus-visible{border-bottom-color:var(--c-mid)}
.rbchat-cites{margin:.5rem 0 0;font-size:.82rem;line-height:1.7;color:var(--dim)}
/* The site's icon at the head of the line, once, and GitHub's mark after each title: quiet
   until pointed at, and both sized so the line stays one line on a phone. */
.rbchat-from{width:16px;height:16px;vertical-align:-3px;margin-right:.4rem}
.rbchat-gh{color:var(--dim);margin-left:.25rem;text-decoration:none;border:0}
.rbchat-gh svg{width:14px;height:14px;vertical-align:-2px}
.rbchat-gh:hover,.rbchat-gh:focus-visible{color:var(--ink);outline:none}
.rbchat-gh:focus-visible{box-shadow:0 0 0 2px var(--press)}
.rbchat-full{margin:0;padding:.5rem 1rem;font-size:.85rem;color:var(--dim);border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.rbchat-full[hidden]{display:none}
.rbchat-fresh,.rbchat-send{font:inherit;font-size:.9rem;padding:.45rem .85rem;border-radius:8px;border:1px solid var(--c-mid);background:var(--c-mid);color:var(--ground);cursor:pointer}
.rbchat-fresh:disabled,.rbchat-send:disabled{opacity:.55;cursor:default}
.rbchat-form{display:flex;gap:.5rem;padding:.6rem 1rem;border-top:1px solid var(--rule);background:var(--raise)}
.rbchat-form textarea{flex:1;resize:none;font:inherit;font-size:.95rem;padding:.5rem .6rem;border-radius:8px;border:1px solid var(--rule);background:var(--ground);color:var(--ink)}
.rbchat-form textarea:focus-visible{outline:2px solid var(--c-mid);outline-offset:1px}
@media (max-width:600px){
  /* A phone's panel is the screen, so there is nothing to size and no corner to do it with;
     the width and height the grip may have written are overridden here rather than cleared,
     because a window that grows past this breakpoint should find the size still remembered. */
  .rbchat{right:0;bottom:0;width:100vw!important;height:100dvh!important;border-radius:0;border:0}
  .rbchat-grip{display:none}
}