/* historian.css — an OPEN BOOK. the frame PNG bezels a dark screen; serif ink within. historian-top.png is
   the book frame (dark bezel, transparent center window) on .convo; messages inset by padding to sit INSIDE
   the window. the agent-bar head wears the book cover. (pngs live right here — same folder.) */
.convo[data-skin="historian"] {
  background: #0a0908 url('historian-top.png') center / 100% 100% no-repeat;
  border: none; border-radius: 0; padding: 0;
}
.convo[data-skin="historian"] .convo-screen {
  background: transparent;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--hist-text); line-height: 1.7;
  padding: 13% 12% 8%;                 /* inset into the book-frame window — tune to the PNG */
}
.convo[data-skin="historian"] .msg-u   { color: var(--hist-user); font-style: italic; }
.convo[data-skin="historian"] .msg-u::before { content: '— '; color: var(--hist-mark); }
.convo[data-skin="historian"] .msg-bot { color: var(--hist-text); }
.convo[data-skin="historian"] .msg-stream:empty::before { color: var(--hist-ph); }

/* the agent-bar head wears the bookshelf — a wide panorama, orientation-aware (vertical rail gets the tall art) */
.agent-bar[data-skin="historian"] .ab-head {
  background-position: center; background-size: cover; background-repeat: no-repeat;
  border-bottom: 2px solid var(--rt-shelf);
  box-shadow: inset 0 -38px 28px -20px rgba(0,0,0,0.58);
  background-image: url('hist-topbar.png');
}
.agent-bar[data-orient="vertical"][data-skin="historian"] .ab-head { background-image: url('hist-topbar-vert.png'); }
.agent-bar[data-skin="historian"] { background: #0e0c0a; border-color: var(--rt-shelf); }
.agent-bar[data-skin="historian"] .ab-name {
  color: var(--rt-shelf-text); font-family: 'Georgia', 'Times New Roman', serif; letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.agent-bar[data-skin="historian"] .ab-grip,
.agent-bar[data-skin="historian"] .ab-add { color: var(--rt-shelf-text); text-shadow: 0 1px 4px rgba(0,0,0,0.9); }

/* the convo box's own top bar */
.convo[data-skin="historian"] .convo-head { background: url('hist-topbar.png') center / cover no-repeat; box-shadow: inset 0 -38px 28px -20px rgba(0,0,0,0.55); border-bottom: 2px solid var(--rt-shelf); }
.convo[data-skin="historian"] .head-title { color: var(--rt-shelf-text); font-family: 'Georgia', serif; text-shadow: 0 1px 4px rgba(0,0,0,0.9); }

/* ── THE BEAN — a CARD wearing the book skin (makeCard wear:'historian' → [data-skin] on the card).
      card-head = the bookshelf (same shelf the agent bar wears); card-body = the book frame, content inset
      into the window. so learn + tiptap read as the writer/tutor's open book. ── */
.card[data-skin="historian"] > .card-head {
  background: url('hist-topbar.png') center / cover no-repeat;
  box-shadow: inset 0 -38px 28px -20px rgba(0,0,0,0.55);
  border-bottom: 2px solid var(--rt-shelf);
}
.card[data-skin="historian"] > .card-head .card-icon { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.85)); }
.card[data-skin="historian"] > .card-head .card-title { color: var(--rt-shelf-text); font-family: 'Georgia', 'Times New Roman', serif; letter-spacing: 1px; text-shadow: 0 1px 4px rgba(0,0,0,0.9); }
.card[data-skin="historian"] > .card-head::after { color: var(--rt-shelf-text); text-shadow: 0 1px 3px rgba(0,0,0,0.85); }
.card[data-skin="historian"] > .card-body {
  background: #0a0908 url('historian-top.png') center / 100% 100% no-repeat;
  padding: 5% 5.5% 5%;                  /* inset the content into the book-frame window — tune to the PNG */
}