/* Secondary pages inside the Win95 frame: /chat, /admin, /guide (/read has reader.css).
   Chrome primitives live in style.css; this file only lays out each page's content. */

.win > .content { display: flex; flex-direction: column; }

/* ===== /chat ===== */
/* Explorer layout: a history pane beside the transcript, the composer on the
   window face beneath it. Wide screens show the pane as a column (open by
   default); phones slide it over the transcript as a drawer.
   chat-history-ui.js sets .pane-open / .pane-closed on #chat-layout. */
.chat-body { overflow: hidden; }
.chat-layout {
  flex: 1; min-height: 0; margin-top: var(--s1); position: relative;
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--s1);
}
.chat-layout.pane-closed { grid-template-columns: minmax(0, 1fr); }
.chat-layout.pane-closed #chat-sidebar { display: none; }
#chat-pane-toggle[aria-expanded="true"] { box-shadow: var(--bevel-in); background: var(--dither); }

/* History pane: the "new" button above a sunken list box */
#chat-sidebar { display: flex; flex-direction: column; gap: var(--s1); min-height: 0; }
#chat-new { justify-content: flex-start; width: 100%; }
#chat-new:disabled img { filter: grayscale(1); opacity: .45; }
.chat-hist-well { flex: 1; min-height: 0; overflow-y: auto; padding: 3px; background: var(--paper); box-shadow: var(--bevel-field); }
#chat-history-list { list-style: none; margin: 0; padding: 0; }
.chat-hist-item { display: flex; min-height: var(--tap); }
.chat-hist-item:hover { background: var(--hilite); }
.chat-hist-item.active { background: var(--sel); color: var(--sel-text); }
.chat-hist-item.active :focus-visible { outline-color: var(--sel-text); }
.chat-hist-open, .chat-hist-more { background: none; border: 0; color: inherit; cursor: pointer; }
.chat-hist-open {
  flex: 1; min-width: 0; padding: 0 var(--s2); text-align: left;
  font: 400 var(--t-sm)/1.3 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-hist-more { flex: none; width: var(--tap); display: grid; place-items: center; }
.chat-hist-more:hover { box-shadow: var(--bevel-thin); }
.chat-hist-more[aria-expanded="true"] { box-shadow: var(--bevel-thin-in); }
.chat-hist-note { margin: 0; padding: var(--s2); color: var(--muted); font-size: var(--t-xs); line-height: 1.5; }
.chat-hist-note[hidden] { display: none; }
.chat-hist-menu { position: fixed; min-width: 168px; }

/* Transcript: one centred reading column inside a full-width sunken well */
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#chat-log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--s5);
  padding: var(--s5) max(var(--s4), (100% - 720px) / 2);
  background: var(--paper); box-shadow: var(--bevel-field);
}
.msg { min-width: 0; overflow-wrap: break-word; }
.msg.user {
  align-self: flex-end; max-width: min(85%, 52ch); padding: var(--s2) var(--s3);
  background: var(--sel); color: var(--sel-text); white-space: pre-wrap;
}
/* The assistant writes on the paper itself, in the book face, behind a 16px
   chat icon — the user's lines are the navy selection blocks. */
.msg.bot {
  position: relative; max-width: calc(65ch + 28px); padding-left: 28px;
  font: 400 var(--t-lg)/1.6 var(--font-book);
}
.msg.bot::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px;
  background: url("icons/chat.svg") center / 16px 16px no-repeat; image-rendering: pixelated;
}
.msg.bot strong { font-weight: 600; }
.msg.bot code { padding: 0 var(--s1); background: var(--face); font: 400 .875em var(--font-ui); }
/* Markdown lists are direct children; the card grid (.chat-items) is not. */
.msg.bot > ul { margin: var(--s2) 0; padding-left: var(--s5); list-style: square; }
.msg.bot > ul > li { margin: var(--s1) 0; }
.msg.bot > ul > li::marker { color: var(--shadow); }
.msg.bot.chat-error { font: 400 var(--t-md)/1.5 var(--font-ui); color: var(--danger); }

/* Working: finished steps ticked, the current one above a file-copy bar */
.msg.bot.chat-pending { font: 400 var(--t-sm)/1.5 var(--font-ui); color: var(--muted); }
.chat-steps { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.chat-steps li { position: relative; padding-left: var(--s4); }
.chat-steps li:last-child { color: var(--text); }
.chat-steps li.done::before {
  content: ""; position: absolute; left: 1px; top: 6px; width: 7px; height: 7px; background: currentColor;
  clip-path: polygon(0 43%, 14% 29%, 43% 57%, 86% 0, 100% 14%, 43% 86%);
}
.chat-pending .progress95 { width: min(240px, 100%); height: 18px; }

/* Book cards under an answer */
.chat-books { margin-top: var(--s4); font: 400 var(--t-md)/1.4 var(--font-ui); }
.chat-similar-head { margin: 0; font: 600 var(--t-md)/1.4 var(--font-ui); }
.chat-similar-head + .chat-books { margin-top: var(--s2); }
.chat-note { margin: var(--s1) 0 0; font: 400 var(--t-sm)/1.5 var(--font-ui); color: var(--muted); }
.chat-items {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s2);
}
.chat-item { display: flex; gap: var(--s3); padding: var(--s2); background: var(--face); box-shadow: var(--bevel-out); }
.chat-item[hidden] { display: none; }
.chat-item-cover { width: 48px; height: 72px; flex: none; box-shadow: 0 0 0 1px var(--dark); }
img.chat-item-cover { object-fit: cover; background: var(--hilite); }
.chat-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-item-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font: 600 var(--t-md)/1.3 var(--font-book);
}
.chat-item-author { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-actions { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: auto; padding-top: var(--s2); }
.chat-act { --py: 2px; --px: 8px; font-size: var(--t-xs); }
.chat-more { margin-top: var(--s2); }

/* Empty state: what the assistant is for, and questions to start with */
#chat-empty {
  margin: auto; max-width: 560px; padding: var(--s5) 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center;
}
.chat-empty-icon { width: 32px; height: 32px; image-rendering: pixelated; }
.chat-empty-title { margin: var(--s1) 0 0; font: 400 var(--d-lg)/1 var(--font-display); letter-spacing: .02em; color: var(--title-a); }
.chat-empty-sub { margin: 0 0 var(--s3); max-width: 44ch; color: var(--muted); line-height: 1.55; text-wrap: balance; }
.chat-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); max-width: 520px; }
.chat-chip { --py: 4px; --px: 12px; font-weight: 400; }

/* Composer, on the window face */
#chat-form { display: flex; gap: var(--s2); padding-top: var(--s1); }
#chat-input { flex: 1; min-width: 0; }
#chat-send { min-width: 76px; }

@media (max-width: 720px) {
  .chat-layout, .chat-layout.pane-closed { grid-template-columns: minmax(0, 1fr); }
  #chat-sidebar, .chat-layout.pane-closed #chat-sidebar {
    display: flex; position: absolute; inset: 0 auto 0 0; z-index: 20; width: min(84%, 300px);
    padding: var(--s1); background: var(--face); box-shadow: var(--bevel-window), 3px 0 0 rgba(0,0,0,.3);
    transform: translateX(calc(-100% - 4px)); transition: transform .15s steps(3, end);
  }
  .chat-layout.pane-open #chat-sidebar { transform: none; }
  .chat-layout.pane-open::after {   /* scrim over the transcript; a tap on it closes the drawer */
    content: ""; position: absolute; inset: 0; z-index: 19;
    background: repeating-conic-gradient(rgba(0,0,0,.28) 0 25%, transparent 0 50%) 0 0 / 2px 2px;
  }
  #chat-log { gap: var(--s4); padding: var(--s4) var(--s3); }
  .msg.user { max-width: 88%; }
  .chat-items { grid-template-columns: minmax(0, 1fr); }
}

/* ===== /admin ===== */
.admin-main { width: 100%; max-width: 900px; margin: 0 auto; padding: var(--s4); }
.admin-main h2 {
  display: flex; align-items: center; gap: var(--s2); margin: var(--s5) 0 var(--s2);
  font: 400 var(--d-md)/1 var(--font-display); letter-spacing: .02em; color: var(--title-a);
}
.admin-main section:first-of-type h2 { margin-top: var(--s1); }
.admin-main h2 img, .owner-tag img, .guide h2 img, .guide h3 img, .guide-tip img, .ui-btn img, #toc-list img, .toc-toggle img {
  width: 16px; height: 16px; flex: none; image-rendering: pixelated;
}
.admin-count { color: var(--muted); }
#admin-msg[hidden], #admin-users[hidden], #admin-stats[hidden] { display: none; }
#stats-summary { margin: 0 0 var(--s2); color: var(--muted); font-size: var(--t-sm); }

/* Tables (admin + guide): a sunken list view. The well scrolls sideways on a
   narrow screen so a wide table never pushes the page wider than the phone. */
.table-wrap { overflow-x: auto; margin: 0 0 var(--s3); padding: 2px; background: var(--paper); box-shadow: var(--bevel-field); }
.admin-table, .guide-table { width: 100%; border-collapse: collapse; font: 400 var(--t-sm)/1.45 var(--font-ui); font-variant-numeric: tabular-nums; }
.admin-table th, .guide-table th {
  padding: var(--s1) var(--s2); background: var(--face); box-shadow: var(--bevel-out);
  font: 500 var(--t-xs)/1.3 var(--font-ui); text-align: left; white-space: nowrap;
}
.admin-table td, .guide-table td { padding: var(--s1) var(--s2); border-bottom: 1px solid var(--hilite); vertical-align: middle; }
.admin-table tbody tr:last-child td, .guide-table tbody tr:last-child td { border-bottom: 0; }
.admin-table .num, .admin-table .act-col { text-align: right; }
.name-cell { font-weight: 500; white-space: nowrap; }
.empty-cell { padding: var(--s4); color: var(--muted); text-align: center; }
.admin-actions { display: flex; justify-content: flex-end; gap: var(--s1); }
.admin-actions .btn { --py: 3px; --px: 10px; font-size: var(--t-xs); }
/* The owner row: a small raised plate, like a Win95 status tag, not a glyph. */
.owner-tag {
  display: inline-flex; align-items: center; gap: var(--s1); margin-left: var(--s2); padding: 1px 6px 1px 3px;
  background: var(--face); box-shadow: var(--bevel-thin); font: 500 var(--t-xs)/1.3 var(--font-ui); vertical-align: middle;
}

/* ===== /guide ===== */
/* Win98 HTML Help: a "Mục lục" tab over a sunken contents list, beside the topic. */
.guide-layout { flex: 1; min-height: 0; margin-top: 3px; display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 3px; }
.guide-layout > .content { margin-top: 0; }
.guide-toc { display: flex; flex-direction: column; min-height: 0; }
.toc-tab {
  align-self: flex-start; position: relative; z-index: 1; margin: 0 0 -2px 2px; padding: 4px var(--s3) 5px;
  background: var(--face); box-shadow: inset 1px 1px var(--light), inset 2px 2px var(--hilite), inset -1px 0 var(--dark), inset -2px 0 var(--shadow);
  font: 500 var(--t-sm)/1.2 var(--font-ui);
}
.toc-toggle { display: none; }
#toc-list { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: var(--s1); list-style: none; background: var(--paper); box-shadow: var(--bevel-field); }
#toc-list a { display: flex; align-items: center; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s2); color: var(--text); font-size: var(--t-sm); }
#toc-list a span { padding: 1px var(--s1); }
#toc-list a:hover { text-decoration: none; }
#toc-list a:hover span { color: var(--sel); text-decoration: underline; text-underline-offset: 2px; }
/* Tree-view selection: only the label is highlighted, as in Win98 Help. */
#toc-list a[aria-current] span { background: var(--sel); color: var(--sel-text); text-decoration: none; }

.guide { width: 100%; max-width: 46em; margin: 0 auto; padding: var(--s5) var(--s5) var(--s6); font-size: var(--t-md); line-height: 1.65; }
.guide-head { display: flex; gap: var(--s4); align-items: flex-start; padding-bottom: var(--s4); border-bottom: 1px solid var(--shadow); box-shadow: 0 1px var(--light); }
.guide-head > img { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
.guide-head h1 { margin: 0 0 var(--s1); font: 400 var(--d-lg)/1 var(--font-display); letter-spacing: .02em; color: var(--title-a); }
.guide-head p { margin: 0; color: var(--muted); }
.guide section { scroll-margin-top: var(--s2); }
.guide h2 {
  display: flex; align-items: center; gap: var(--s2); margin: var(--s6) 0 var(--s3); padding-bottom: var(--s1);
  border-bottom: 1px solid var(--hilite); font: 600 var(--t-lg)/1.3 var(--font-ui);
}
.guide h3 { display: flex; align-items: center; gap: var(--s2); margin: var(--s5) 0 var(--s2); font: 600 var(--t-md)/1.4 var(--font-ui); }
.guide p, .guide ul, .guide ol, .guide dl { margin: var(--s2) 0; }
.guide ul, .guide ol { padding-left: var(--s5); }
.guide ul { list-style: square; }
.guide li { margin: var(--s1) 0; }
.guide li::marker { color: var(--shadow); }
.guide code { padding: 0 var(--s1); background: var(--hilite); font: 400 .93em var(--font-ui); overflow-wrap: anywhere; }
/* Keys are raised keycaps; on-screen buttons are small raised plates, so a
   reader can tell "press this key" from "click this button" at a glance. */
.guide kbd {
  display: inline-block; min-width: 22px; padding: 1px 5px 2px; background: var(--face); box-shadow: var(--bevel-out);
  font: 500 var(--t-xs)/1.3 var(--font-ui); text-align: center; white-space: nowrap; vertical-align: 1px;
}
.ui-btn {
  display: inline-flex; align-items: center; gap: var(--s1); padding: 0 6px; background: var(--face); box-shadow: var(--bevel-thin);
  font: 500 var(--t-xs)/20px var(--font-ui); white-space: nowrap; vertical-align: 1px;
}
.guide-tip { display: flex; gap: var(--s2); align-items: flex-start; margin: var(--s4) 0; padding: var(--s2) var(--s3); background: var(--tip-bg); box-shadow: var(--bevel-field); }
.guide-tip img { margin-top: 4px; }
.guide .table-wrap { margin: var(--s3) 0; }
.guide-table td { vertical-align: top; }
.guide-url { display: inline-block; padding: var(--s1) var(--s2); }
.guide-faq dt { margin-top: var(--s3); font-weight: 600; }
.guide-faq dd { margin: var(--s1) 0 0; }
.guide .guide-end { margin-top: var(--s5); color: var(--muted); }

@media (max-width: 640px) {
  .admin-main { padding: var(--s3) var(--s2); }
  .admin-main h2 { margin-top: var(--s4); }
  /* Five columns cannot fit 390px, and the actions were the ones pushed off to
     the right. Each user folds into a card instead: name, one line of labelled
     facts (admin.js sets data-label), then the actions, with no sideways swipe. */
  #admin-users table, #admin-users tbody { display: block; }
  #admin-users thead { display: none; }
  #admin-users tbody tr { display: flex; flex-wrap: wrap; gap: 2px var(--s3); padding: var(--s2); border-bottom: 1px solid var(--hilite); }
  #admin-users tbody tr:last-child { border-bottom: 0; }
  #admin-users td { padding: 0; border: 0; text-align: left; }
  #admin-users .name-cell, #admin-users .act-col { flex-basis: 100%; }
  #admin-users .name-cell { white-space: normal; overflow-wrap: anywhere; }
  #admin-users td[data-label]::before { content: attr(data-label) " "; color: var(--muted); }
  #admin-users .act-col { padding-top: var(--s1); }
  #admin-users .admin-actions { justify-content: flex-start; }
  /* The contents pane folds into one bar above the topic that names where you are. */
  .guide-layout { display: flex; flex-direction: column; }
  .guide-toc { flex: none; }
  .toc-tab { display: none; }
  .toc-toggle {
    display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: var(--tap); padding: var(--s1) var(--s3);
    background: var(--face); color: var(--text); border: 0; box-shadow: var(--bevel-out); cursor: pointer;
    font: 600 var(--t-sm)/1.2 var(--font-ui); text-align: left;
  }
  .toc-toggle::after {   /* the Win95 drop-down arrow */
    content: ""; flex: none; border: 4px solid transparent; border-top-color: var(--dark); border-bottom-width: 0;
  }
  .guide-toc.open .toc-toggle { box-shadow: var(--bevel-in); background: var(--dither); }
  .guide-toc.open .toc-toggle::after { border-top-width: 0; border-top-color: transparent; border-bottom: 4px solid var(--dark); }
  .toc-current { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; color: var(--muted); }
  .toc-current::before { content: "› "; }
  .guide-toc:not(.open) #toc-list { display: none; }
  #toc-list { margin-top: 3px; max-height: 50dvh; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .guide-layout > .content { flex: 1; }
  .guide { padding: var(--s4) var(--s4) var(--s5); }
  .guide h2 { margin-top: var(--s5); }
}