/* Windows for every page: the frame, its title bar and buttons, the menu bar,
   toolbar, scrolling content and status bar, and the dialogs (Properties, login,
   lists, Kindle). Loads right after style.css, whose tokens and buttons it uses;
   shell.css and the page sheets come after it. */
/* ===== Window frame ===== */
.win {
  display: flex; flex-direction: column; margin: 0 auto;
  height: calc(100dvh - var(--taskbar-h) - var(--safe-b));
  background: var(--face); padding: 3px; box-shadow: var(--bevel-window);
}
@media (min-width: 900px) and (min-height: 501px), (min-width: 900px) and (pointer: fine) {
  html:not(.maximized) body { padding: 12px 12px calc(12px + var(--taskbar-h)); }
  html:not(.maximized) .win { height: calc(100dvh - 24px - var(--taskbar-h)); }
}
.titlebar {
  display: flex; align-items: center; gap: var(--s2); min-height: 26px; padding: 2px 3px 2px 5px;
  background: linear-gradient(90deg, var(--title-a), var(--title-b)); color: var(--sel-text);
  font: 400 var(--d-sm)/1 var(--font-display); letter-spacing: .02em; user-select: none;
}
.titlebar-icon { width: 16px; height: 16px; flex: none; background: url("icons/app.svg") center / 16px 16px no-repeat; image-rendering: pixelated; }
.titlebar-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-top: 1px; }
h1.titlebar-text { margin: 0; font: inherit; }   /* a page's title bar can be its h1 (/, /admin) */
.titlebar-btns { display: flex; gap: 2px; flex: none; }
.tbtn {
  --py: 0; --px: 0; width: 18px; height: 16px; padding: 0; display: grid; place-items: center; color: var(--dark);
}
.tbtn svg { width: 9px; height: 9px; shape-rendering: crispEdges; }
.tbtn[hidden] { display: none; }
.tbtn:active svg { transform: translate(1px, 1px); }
.titlebar-btns .tbtn-close { margin-left: 2px; }
@media (max-width: 899px), (max-height: 500px) and (pointer: coarse) { .tbtn-max { display: none; } }
/* Touch: the title-bar buttons grow to 26x22 and answer a 40px area. It
   stops at the window edge (never widens the page), and a page title bar's stays
   above its toolbar, whose buttons sit right below. */
@media (pointer: coarse) {
  .titlebar { min-height: 38px; }
  .tbtn { width: 26px; height: 22px; }   /* bigger face: the phone close was 40x29 of hit */
  .tbtn, .toc-close { position: relative; }
  .tbtn::after, .toc-close::after { content: ""; position: absolute; inset: -12px -6px -16px -16px; }
  .tbtn::after { top: -20px; bottom: -7px; }
  /* A button just before it keeps its own edge, so the width goes right. (On phones the
     shelf drawer reaches the window edge and takes it from the left: home.css.) */
  button + .toc-close::after { left: -4px; right: -18px; }
}
@media (pointer: coarse) and (min-width: 900px) and (min-height: 501px) {
  .tbtn-max:not(:last-child)::after { right: -2px; }   /* maximise and close split the 4px gap */
  .tbtn + .tbtn::after { left: -2px; }
  html:not(.maximized) .tbtn-close::after { right: -16px; }   /* into the 18px margin, still inside the page */
}

/* Menu bar + dropdowns */
.menubar { display: flex; align-items: center; padding: 2px 0; font: 400 var(--t-sm)/1 var(--font-ui); user-select: none; }
.menu { position: relative; }
.menu-btn { background: none; border: 0; padding: 5px 9px; cursor: default; }
.menu-btn:first-letter { text-decoration: underline; text-underline-offset: 2px; }
@media (pointer: coarse) { .menu-btn { min-height: var(--tap); } }   /* tablets keep the menu bar */
.menu.open .menu-btn { background: var(--sel); color: var(--sel-text); }
.menu-drop {
  position: absolute; top: 100%; left: 0; z-index: 200; min-width: 220px; padding: 3px;
  background: var(--face); display: flex; flex-direction: column; box-shadow: var(--bevel-out), 2px 2px 0 rgba(0,0,0,.25);
  transform-origin: top left; animation: unfold .12s steps(4, end);
}
@keyframes unfold { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.menu-drop[hidden] { display: none; }
.mi {
  display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; background: none; border: 0; cursor: default;
  padding: 6px 16px 6px 26px; color: var(--text); white-space: nowrap; position: relative; font: inherit;
}
.mi:hover, .mi:focus-visible { background: var(--sel); color: var(--sel-text); text-decoration: none; outline: none; }
.mi.checked::before { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -4px; background: currentColor; clip-path: polygon(0 43%, 14% 29%, 43% 57%, 86% 0, 100% 14%, 43% 86%); }
.mi[hidden] { display: none; }
@media (pointer: coarse) { .mi { min-height: var(--tap); } }   /* every menu: menubar, chat history */
.mi kbd { margin-left: auto; font: inherit; color: var(--muted); }
.mi:hover kbd, .mi:focus-visible kbd { color: inherit; }
.msep { border: 0; border-top: 1px solid var(--shadow); border-bottom: 1px solid var(--light); margin: 3px 2px; }

/* Toolbar (IE4 coolbar: flat until hover, latched = pressed + dither) */
.toolbar {
  display: flex; align-items: center; gap: 2px; padding: 3px 4px; margin: 0 -1px;
  border-top: 1px solid var(--shadow); box-shadow: 0 -1px var(--light) inset;
  font: 400 var(--t-sm)/1 var(--font-ui); user-select: none;
}
.tb {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 4px 9px;
  background: none; border: 0; cursor: pointer; color: inherit;
}
.tb[hidden] { display: none; }
.tb:hover { box-shadow: var(--bevel-thin); text-decoration: none; }
.tb:active { box-shadow: var(--bevel-thin-in); padding: 5px 8px 3px 10px; }
.tb img, .tb svg { width: 16px; height: 16px; flex: none; image-rendering: pixelated; shape-rendering: crispEdges; }
.tb-sep { width: 2px; align-self: stretch; margin: 3px 4px; border-left: 1px solid var(--shadow); border-right: 1px solid var(--light); }
.tb-spacer { flex: 1; }
.tagline { color: var(--muted); padding-right: var(--s2); white-space: nowrap; font: 400 var(--d-sm)/1 var(--font-display); }
a.tb { color: inherit; }
/* Phones: icon-only buttons, but the word stays for screen readers. The chat bar keeps its
   words: only two buttons, and "Lịch sử" says what the bare list icon cannot. */
@media (max-width: 640px) {
  .tb-label:not(.chat-bar *) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tb { padding: 4px 10px; }
}
@media (max-width: 900px) { .tagline { display: none; } }

/* Sunken scrolling content + classic scrollbar */
.content {
  flex: 1; min-height: 0; overflow: auto; background: var(--paper); margin-top: 3px;
  box-shadow: var(--bevel-field); scrollbar-color: var(--face) var(--hilite); overscroll-behavior: contain;
}
.content::-webkit-scrollbar, .scroll95::-webkit-scrollbar { width: 16px; height: 16px; }
.content::-webkit-scrollbar-track, .scroll95::-webkit-scrollbar-track { background: var(--dither); }
.content::-webkit-scrollbar-thumb, .content::-webkit-scrollbar-button:single-button,
.scroll95::-webkit-scrollbar-thumb, .scroll95::-webkit-scrollbar-button:single-button { background: var(--face); box-shadow: var(--bevel-out); }
.content::-webkit-scrollbar-button:single-button, .scroll95::-webkit-scrollbar-button:single-button { display: block; width: 16px; height: 16px; }
.content::-webkit-scrollbar-corner { background: var(--face); }

/* Status bar: sunken cells */
.statusbar { display: flex; gap: 3px; padding-top: 3px; font: 400 var(--t-xs)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.status-cell { flex: 1; min-width: 0; padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--bevel-thin-in); }
.status-right { flex: 0 1 auto; max-width: 45%; }
@media (max-width: 600px) { .status-right { display: none; } }


/* ===== Kind tabs: Sách chữ | Truyện tranh, a property sheet's tabs =====
   The two libraries are two tabs of one window; the open one is raised and runs
   into the panel below it. A filter bar right under them drops its own top rule. */
.kind-tabs { display: flex; padding: var(--s2) var(--s1) 0; border-top: 1px solid var(--shadow); box-shadow: inset 0 1px var(--light), inset 0 -1px var(--light); }
.kind-tabs a {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); margin-top: 3px; padding: 2px 14px;
  color: var(--muted); font: 600 var(--t-sm)/1.2 var(--font-ui); text-decoration: none;
  box-shadow: inset 1px 1px var(--light), inset -1px 0 var(--dark), inset -2px 0 var(--shadow);
}
.kind-tabs a:hover { color: var(--text); text-decoration: none; }
.kind-tabs a[aria-current="page"] { position: relative; z-index: 1; margin: 0 -2px 0 0; padding: 4px 16px 6px; color: var(--text); background: var(--face); }
.kind-tabs a:not([aria-current]) + a { margin-left: -1px; }
.kind-tabs img { width: 16px; height: 16px; flex: none; image-rendering: pixelated; }
.kind-tabs + .filterbar { border-top: 0; box-shadow: none; }
@media (max-width: 640px) { .kind-tabs a { flex: 1; justify-content: center; } }

/* ===== Filter bar (/, /manga): search first, then one row of controls ===== */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s1) var(--s1); border-top: 1px solid var(--shadow); box-shadow: inset 0 1px var(--light); }
.filterbar[hidden] { display: none; }
input.fb-search {
  flex: 1 1 260px; min-width: 0; padding-left: 30px; text-overflow: ellipsis;   /* a narrow box ends its hint in "…" */
  background: var(--paper) url("icons/search.svg") no-repeat 8px 50% / 16px 16px;
}
.fb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.fb-group { display: flex; }
.kind-btn { --px: 12px; }
.kind-btn[hidden] { display: none; }
.filterbar select { max-width: 180px; }
.filterbar select[hidden] { display: none; }
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  .filterbar { flex-flow: column nowrap; align-items: stretch; }
  input.fb-search { flex: none; }
  .fb-controls { min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .fb-controls > * { flex: none; }
}
/* A short window (a phone on its side, or a small mouse window): search and its
   controls share one row, the controls scrolling sideways rather than wrapping. */
@media (max-height: 500px) and (min-width: 641px) {
  .filterbar { flex-flow: row nowrap; align-items: center; }
  input.fb-search { flex: 0 1 220px; min-width: 140px; }
  .fb-controls { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fb-controls > * { flex: none; }
}

/* Truyện tranh (/manga, /comic): the same windows in comic-book red and orange,
   so a glance at any title bar tells the two libraries apart. */
body.scheme-comic { --title-a: #7a0a0a; --title-b: #e0601a; --sel: #8a1010; --sel-muted: #ffd2b8; }
.scheme-comic .titlebar-icon { background-image: url("icons/comic.svg"); }

/* Phones, upright or on their side: the bottom nav + Start menu carry navigation,
   so the menu bar and a navigation-only toolbar give their rows back to the
   content. Toolbars that carry the page's own controls (reader, chat history) stay. */
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  .menubar, .toolbar:not(.reader-bar, .chat-bar) { display: none; }
}

/* ===== Dialogs (detail / login / lists / kindle / welcome) ===== */
.backdrop, #detail, #login-backdrop, #lists-backdrop, #kindle-backdrop {
  position: fixed; inset: 0; background: repeating-conic-gradient(rgba(0,0,0,.28) 0 25%, transparent 0 50%) 0 0 / 2px 2px;
}
#detail { z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--s4); }
#login-backdrop, #lists-backdrop { z-index: 30; } #kindle-backdrop { z-index: 60; }
#detail[hidden], #login-backdrop[hidden], #lists-backdrop[hidden], #kindle-backdrop[hidden] { display: none; }
.dlg, .detail-card, #login-modal, #lists-panel, #kindle-modal {
  background: var(--face); padding: 3px; color: var(--text); box-shadow: var(--bevel-window), 4px 4px 0 rgba(0,0,0,.3);
}
/* Centred in the space above the taskbar (which stays on top), never taller than it:
   a long user list scrolls instead of pushing the buttons under the taskbar. */
#login-modal, #lists-panel, #kindle-modal {
  position: fixed; top: calc(50% - (var(--taskbar-h) + var(--safe-b)) / 2); left: 50%; transform: translate(-50%, -50%);
  max-height: calc(100dvh - var(--taskbar-h) - var(--safe-b) - 16px);
}
#login-modal, #kindle-modal { overflow-y: auto; }
#login-modal { z-index: 31; width: min(380px, calc(100vw - 2rem)); }
#lists-panel { z-index: 31; width: min(640px, calc(100vw - 2rem)); max-height: min(82dvh, calc(100dvh - var(--taskbar-h) - var(--safe-b) - 16px)); display: flex; flex-direction: column; }
#kindle-modal { z-index: 61; width: min(420px, calc(100vw - 2rem)); }
#login-modal[hidden], #lists-panel[hidden], #kindle-modal[hidden] { display: none; }
/* Title bars of windows inside the page (.dlg-title); the shelf drawer's head
   paints the same but keeps its own spacing and type. */
.dlg-title, .drawer-head {
  display: flex; align-items: center; gap: var(--s2); min-height: 26px; padding: 2px 3px 2px 6px;
  background: linear-gradient(90deg, var(--title-a), var(--title-b)); color: var(--sel-text);
}
.dlg-title { margin: 0 0 var(--s3); font: 400 var(--d-sm)/1.1 var(--font-display); letter-spacing: .02em; }
.toc-close { --py: 0; --px: 0; width: 18px; height: 16px; min-height: 0; padding: 0; flex: none; display: inline-grid; place-items: center; font: 700 var(--t-xs)/1 var(--font-ui); }
.toc-close:active { padding: 1px 0 0 1px; }