/* Reader assistant — left-panel chat that toggles with the book outline.
   Scoped under #booknav / .ra- so it doesn't disturb the book's own styles. */

/* Anti-flash: when the saved mode is Assistant, the head guard sets
   html.ra-prefer-assistant before first paint. Keep the sidebar hidden until
   assistant.js has built the panel and applied the tab (it then adds .ra-ready),
   so a new page never flashes the Outline before swapping to the Assistant.
   (Layout box is preserved — visibility, not display — so no content shift.) */
html.ra-prefer-assistant:not(.ra-ready) #booknav { visibility: hidden; }

/* --- the Outline / Assistant tab switcher pinned to the top of the nav --- */
#booknav { display: flex; flex-direction: column; padding-top: 0 !important; }
.ra-tabs {
  position: sticky; top: 0; z-index: 2; display: flex; gap: 4px;
  background: #fafafa; border-bottom: 1px solid #e6e6e6;
  padding: 6px 6px 6px; margin: 0 -.45rem .3rem;
}
.ra-tab {
  flex: 1; font: 600 .72rem/1 system-ui, sans-serif; text-align: center;
  padding: .42rem .3rem; border: 1px solid #d9d2de; border-radius: 6px;
  background: #fff; color: #6a4a86; cursor: pointer; user-select: none;
}
.ra-tab.active { background: #7d5a9a; color: #fff; border-color: #7d5a9a; }
#booknav.ra-mode-assistant #booknav-outline { display: none; }
#booknav:not(.ra-mode-assistant) #booknav-assistant { display: none; }
#booknav-outline { display: contents; }

/* --- the assistant panel: input on top, answer in the middle, controls bottom --- */
#booknav-assistant {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  height: calc(100vh - 44px); font-family: system-ui, sans-serif;
}
.ra-composer { padding: .1rem .3rem .4rem; border-bottom: 1px solid #eee; }
.ra-composer textarea {
  width: 100%; box-sizing: border-box; resize: none; min-height: 40px; max-height: 120px;
  font: .8rem/1.35 system-ui, sans-serif; padding: .45rem .5rem;
  border: 1px solid #d6cfdb; border-radius: 8px; outline: none; color: #1a1a1a;
}
.ra-composer textarea:focus { border-color: #9a7ab5; box-shadow: 0 0 0 2px #eee3f1; }
.ra-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.ra-send {
  margin-left: auto; font: 600 .74rem system-ui; padding: .32rem .7rem;
  border: 0; border-radius: 6px; background: #7d5a9a; color: #fff; cursor: pointer;
}
.ra-send:disabled { background: #c4b4d2; cursor: default; }
.ra-clear { font: .72rem system-ui; color: #999; background: none; border: 0; cursor: pointer; }

.ra-selchip {
  font: .68rem system-ui; color: #6a4a86; background: #f3edf7; border: 1px solid #e3d6ee;
  border-radius: 6px; padding: .25rem .4rem; margin: 0 0 .35rem; display: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ra-selchip.on { display: block; }
.ra-selchip b { color: #7a2018; font-weight: 600; }
.ra-selchip .x { float: right; cursor: pointer; color: #b09; margin-left: 6px; }

.ra-attach {
  font-size: .9rem; line-height: 1; padding: .3rem .42rem; border: 1px solid #e3d6ee;
  border-radius: 6px; background: #f7f3fb; color: #6a4a86; cursor: pointer;
}
.ra-attach:hover { background: #efe6f6; }
.ra-imgchip { display: none; margin: 0 0 .35rem; position: relative; }
.ra-imgchip.on { display: inline-block; }
.ra-imgthumb {
  max-width: 100%; max-height: 120px; border-radius: 6px; border: 1px solid #e3d6ee; display: block;
}
.ra-imgchip .x {
  position: absolute; top: 3px; right: 3px; cursor: pointer; color: #fff;
  background: rgba(0,0,0,.55); border-radius: 50%; width: 18px; height: 18px;
  line-height: 18px; text-align: center; font-size: .7rem;
}
.ra-composer.ra-drag { outline: 2px dashed #9a7ab5; outline-offset: 2px; border-radius: 6px; }
.ra-msg-img { max-width: 100%; max-height: 220px; border-radius: 6px; margin-bottom: .4rem; display: block; }

/* messages */
.ra-msgs { flex: 1; min-height: 0; overflow: auto; padding: .5rem .35rem; }
.ra-msg { margin-bottom: .7rem; font-size: .8rem; line-height: 1.45; }
.ra-msg .ra-role { font: 700 .62rem system-ui; text-transform: uppercase; letter-spacing: .4px; color: #aaa; margin-bottom: .15rem; }
.ra-msg.user .ra-bubble { background: #f3edf7; border-radius: 8px; padding: .4rem .55rem; color: #2a2336; }
.ra-msg.assistant .ra-bubble { color: #1f1f1f; }
.ra-bubble p { margin: .35rem 0; }
.ra-bubble code { font-family: ui-monospace, monospace; font-size: .92em; background: #f4f1f7; padding: 0 .2em; border-radius: 3px; color: #7a2018; }
.ra-bubble pre { background: #faf8fc; border: 1px solid #eee; border-radius: 6px; padding: .5rem; overflow: auto; font-size: .76rem; }
.ra-bubble a { color: #7d5a9a; }
.ra-navline { font: .7rem system-ui; color: #6a4a86; margin-top: .3rem; }
.ra-navline a { font-weight: 600; }
.ra-empty { color: #aaa; font-size: .76rem; text-align: center; padding: 2rem .6rem; line-height: 1.5; }
.ra-err { color: #b00; font-size: .74rem; padding: .3rem; }
.ra-typing::after { content: "▋"; animation: rablink 1s steps(2) infinite; color: #9a7ab5; }
@keyframes rablink { 50% { opacity: 0; } }

/* bottom controls */
.ra-controls {
  border-top: 1px solid #eee; padding: .4rem .35rem; display: flex; flex-direction: column; gap: 6px;
  background: #fcfbfd;
}
.ra-controls label { font: .66rem system-ui; color: #888; display: flex; align-items: center; gap: 5px; }
.ra-controls select { font: .72rem system-ui; padding: .2rem .3rem; border: 1px solid #ddd; border-radius: 5px; flex: 1; }
.ra-modes { display: flex; gap: 4px; }
.ra-modebtn {
  flex: 1; font: 600 .68rem system-ui; padding: .3rem; border: 1px solid #d9d2de;
  border-radius: 5px; background: #fff; color: #777; cursor: pointer;
}
.ra-modebtn.active { background: #efe7f1; color: #6a4a86; border-color: #c9b6da; }
.ra-modehint { font: .62rem system-ui; color: #aaa; line-height: 1.3; }
.ra-navtoggle { font: .66rem system-ui; color: #888; align-items: flex-start; cursor: pointer; }
.ra-navtoggle input { margin: 1px 4px 0 0; }
.ra-navhint { color: #b0a; opacity: .65; }

/* quoted section (when navigation is off) */
.ra-embed { border: 1px solid #e3d6ee; border-radius: 8px; margin: .5rem 0 .2rem; overflow: hidden; background: #fff; }
.ra-embed-h { font: 600 .68rem system-ui; color: #6a4a86; background: #f6f1fa; padding: .3rem .5rem; border-bottom: 1px solid #eee3f1; }
.ra-embed-h a { float: right; font-weight: 600; color: #7d5a9a; }
.ra-embed-body { padding: .4rem .55rem; max-height: 360px; overflow: auto; font-size: .74rem; }
.ra-embed-body img, .ra-embed-body svg, .ra-embed-body figure { max-width: 100%; height: auto; }
.ra-embed-body h1, .ra-embed-body h2, .ra-embed-body h3 { font-size: .9rem; margin: .2rem 0 .3rem; }
.ra-trunc { color: #bbb; font-style: italic; }

/* floating "Ask about this" button on text selection */
#ra-ask {
  position: absolute; z-index: 9999; display: none;
  font: 600 .72rem system-ui; padding: .32rem .6rem; cursor: pointer;
  background: #7d5a9a; color: #fff; border: 0; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
#ra-ask.on { display: block; }

/* ============================================================================
   Responsive layout: a resizable left panel on desktop, an off-canvas drawer
   with a floating launcher on phones (so the assistant never covers the text).
   ============================================================================ */
:root { --ra-nav-w: 250px; }
.ra-resizer { display: none; }
.ra-fab, .ra-scrim { display: none; }

/* --- desktop: drag the panel's right edge to resize; body margin tracks it --- */
@media (min-width: 1101px) {
  #booknav { width: var(--ra-nav-w) !important; }
  body.haspanel { margin-left: calc(var(--ra-nav-w) + 16px) !important; }
  .ra-resizer {                       /* drag strip centered in the gutter between panel and body */
    display: block; position: fixed; top: 0; left: calc(var(--ra-nav-w) + 2px);
    width: 12px; height: 100vh; z-index: 31; cursor: col-resize;
  }
  .ra-resizer::after {                /* the visible 1px guide on the panel↔body boundary (gutter center = nav-w + 8px) */
    content: ""; position: absolute; left: 6px; top: 0; width: 1px; height: 100%; background: transparent;
  }
  .ra-resizer:hover::after, html.ra-resizing .ra-resizer::after { background: #b39ccb; }
  html.ra-resizing { cursor: col-resize; user-select: none; }
}

/* --- phone / narrow: the panel is an off-canvas drawer, hidden by default --- */
@media (max-width: 1100px) {
  #booknav {                          /* override the sidebar's responsive display:none, but keep it off-screen */
    display: flex !important; visibility: visible !important;
    position: fixed; top: 0; left: 0; height: 100vh; width: min(90vw, 360px);
    transform: translateX(-100%); transition: transform .25s ease; z-index: 1000;
    box-shadow: 2px 0 18px rgba(0,0,0,.28);
  }
  html.ra-drawer-open #booknav { transform: translateX(0); }
  .ra-fab {                           /* floating launcher, bottom-right */
    display: flex; align-items: center; justify-content: center; position: fixed;
    right: 16px; bottom: 16px; z-index: 1001; width: 52px; height: 52px; border-radius: 50%;
    background: #7d5a9a; color: #fff; border: none; font-size: 1.35rem; line-height: 1; cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,.32);
  }
  html.ra-drawer-open .ra-scrim {     /* dim the page behind the open drawer */
    display: block; position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.35);
  }
}