/* =========================================================================
   BMS LIBRARY — assets/library.css
   =========================================================================
   Library-specific styles ONLY. Inherits from ensmart.ai's main.css.
   Reuses .w, .sec, .btn, .lbl, .grid-2, .val-c, .ph, etc. from your global.

   Adds only:
     - Category cards (.lib-cat-grid, .lib-cat-c)
     - Q&A list items (.lib-qa-row)
     - Q&A reader (.lib-qa-article)
     - Chat interface (.lib-chat-*)
     - Language switcher (.lib-lang-switch)
     - Search bar (.lib-search-*)
   ========================================================================= */

/* === Library hero === */
.lib-hero { padding: 36px 0 24px; }
.lib-hero h1 { margin-bottom: 14px; }
.lib-hero .lib-search-wrap { max-width: 720px; margin-top: 18px; }

/* === Search bar === */
.lib-search-form {
  display: flex; gap: 0; align-items: stretch;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 32px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lib-search-form input[type="search"] {
  flex: 1; background: transparent; border: 0; outline: 0;
  padding: 14px 22px; font-size: 15px; color: #fff;
  font-family: inherit;
}
.lib-search-form input[type="search"]::placeholder { color: rgba(255,255,255,.55); }
.lib-search-form button {
  background: var(--or, #E8871E); color: #fff;
  border: 0; padding: 0 26px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.lib-search-form button:hover { background: #C46F0E; }

/* On white background variant */
.lib-search-form.on-white {
  background: #fff;
  border: 1px solid var(--bd, #e5e5e5);
}
.lib-search-form.on-white input[type="search"] { color: var(--tx, #2d2d2d); }
.lib-search-form.on-white input[type="search"]::placeholder { color: var(--tx3, #9e9e9e); }

/* === Category grid (homepage) === */
.lib-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.lib-cat-c {
  background: #fff;
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: var(--r2, 12px);
  padding: 22px 22px 20px;
  text-decoration: none;
  display: block;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  position: relative;
}
.lib-cat-c:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.07);
  border-color: var(--tl, #1B7E9A);
}
.lib-cat-c .lib-cat-ic {
  font-size: 28px; line-height: 1; margin-bottom: 12px;
  color: var(--tl, #1B7E9A);
  display: inline-flex; width: 46px; height: 46px;
  background: rgba(13,123,138,.08);
  border-radius: 12px;
  align-items: center; justify-content: center;
}
.lib-cat-c .lib-cat-name {
  font-size: 17px; font-weight: 700; color: var(--tx, #2d2d2d);
  margin-bottom: 6px;
}
.lib-cat-c .lib-cat-desc {
  font-size: 13.5px; line-height: 1.55; color: var(--tx2, #666);
  margin-bottom: 14px;
}
.lib-cat-c .lib-cat-meta {
  font-size: 12px; color: var(--tx3, #9e9e9e);
  font-family: var(--m, monospace);
  letter-spacing: .04em;
}
.lib-cat-c .lib-cat-meta strong { color: var(--tl, #1B7E9A); font-weight: 700; }

/* === Q&A list rows === */
.lib-qa-list { margin-top: 18px; }
.lib-qa-row {
  display: block;
  border-bottom: 1px solid var(--bd, #e5e5e5);
  padding: 16px 4px;
  text-decoration: none;
  transition: background .12s;
}
.lib-qa-row:hover { background: rgba(13,123,138,.04); padding-left: 12px; }
.lib-qa-row:last-child { border-bottom: 0; }
.lib-qa-row .lib-qa-q {
  font-size: 16px; font-weight: 600; color: var(--tx, #2d2d2d);
  margin-bottom: 4px; line-height: 1.4;
}
.lib-qa-row .lib-qa-summary {
  font-size: 13.5px; color: var(--tx2, #666); line-height: 1.55;
  margin-bottom: 8px;
}
.lib-qa-row .lib-qa-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11px; color: var(--tx3, #9e9e9e);
  font-family: var(--m, monospace); letter-spacing: .04em;
}
.lib-qa-row .lib-qa-cat-tag {
  display: inline-block;
  background: rgba(13,123,138,.08); color: var(--tl, #1B7E9A);
  padding: 2px 8px; border-radius: 10px;
  font-weight: 700;
}
.lib-qa-row .lib-qa-reviewed {
  color: #1a8754;
}

/* === Single Q&A reader === */
.lib-qa-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 0 40px;
}
.lib-qa-article h1 {
  font-size: 30px; line-height: 1.25;
  margin: 12px 0 18px;
  color: var(--tx, #2d2d2d);
}
.lib-qa-article .lib-qa-byline {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--tx3, #9e9e9e);
  font-family: var(--m, monospace); letter-spacing: .05em;
  margin-bottom: 22px; padding-bottom: 16px;
  border-bottom: 1px solid var(--bd, #e5e5e5);
}
.lib-qa-article .lib-qa-byline .lib-reviewed-badge {
  background: rgba(26,135,84,.1); color: #1a8754;
  padding: 3px 10px; border-radius: 12px;
  font-weight: 700; letter-spacing: .03em;
}
.lib-qa-article .lib-qa-body {
  font-size: 16px; line-height: 1.75;
  color: var(--tx, #2d2d2d);
}
.lib-qa-article .lib-qa-body p { margin: 0 0 16px; }
.lib-qa-article .lib-qa-body h2 {
  font-size: 22px; margin: 28px 0 14px; color: var(--tx, #2d2d2d);
}
.lib-qa-article .lib-qa-body h3 {
  font-size: 18px; margin: 22px 0 10px; color: var(--tx, #2d2d2d);
}
.lib-qa-article .lib-qa-body ul,
.lib-qa-article .lib-qa-body ol { margin: 0 0 18px; padding-left: 24px; }
.lib-qa-article .lib-qa-body li { margin-bottom: 6px; }
.lib-qa-article .lib-qa-body code {
  background: rgba(13,123,138,.08); color: var(--tl, #1B7E9A);
  padding: 1px 6px; border-radius: 4px;
  font-family: var(--m, monospace); font-size: .9em;
}
.lib-qa-article .lib-qa-body pre {
  background: #1a2333; color: #e6e6e6;
  padding: 14px 18px; border-radius: 8px;
  overflow-x: auto; font-size: 13.5px; line-height: 1.5;
}
.lib-qa-article .lib-qa-body pre code {
  background: transparent; color: inherit; padding: 0;
}
.lib-qa-article .lib-qa-body strong { color: var(--tx, #2d2d2d); font-weight: 700; }

/* Translation source badge */
.lib-translation-badge {
  display: inline-block;
  background: rgba(232,135,30,.12); color: var(--or, #E8871E);
  font-size: 11px; padding: 3px 9px; border-radius: 10px;
  font-weight: 700; letter-spacing: .04em;
  margin-left: 8px;
  font-family: var(--m, monospace);
}

/* === Feedback row === */
.lib-fb-row {
  margin-top: 30px; padding: 20px;
  background: var(--bg2, #f7f7f5);
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: var(--r2, 12px);
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.lib-fb-row .lib-fb-q {
  font-size: 14px; color: var(--tx, #2d2d2d); font-weight: 600;
}
.lib-fb-row .lib-fb-btn {
  background: #fff; border: 1px solid var(--bd, #e5e5e5);
  padding: 8px 14px; border-radius: 22px;
  font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; color: var(--tx, #2d2d2d);
  transition: all .15s;
}
.lib-fb-row .lib-fb-btn:hover { border-color: var(--tl, #1B7E9A); color: var(--tl, #1B7E9A); }
.lib-fb-row .lib-fb-btn.lib-fb-btn-up:hover { border-color: #1a8754; color: #1a8754; background: rgba(26,135,84,.06); }
.lib-fb-row .lib-fb-btn.lib-fb-btn-down:hover { border-color: #b94545; color: #b94545; background: rgba(185,69,69,.06); }
.lib-fb-row .lib-fb-btn.is-selected { background: var(--tl, #1B7E9A); color: #fff; border-color: var(--tl, #1B7E9A); }
.lib-fb-row .lib-fb-thanks { font-size: 13.5px; color: #1a8754; font-weight: 600; display: none; }
.lib-fb-row.is-submitted .lib-fb-thanks { display: inline; }
.lib-fb-row.is-submitted .lib-fb-btn { opacity: .55; cursor: default; pointer-events: none; }

/* === Related questions sidebar === */
.lib-related {
  margin-top: 30px; padding: 22px;
  background: rgba(13,123,138,.04);
  border-left: 3px solid var(--tl, #1B7E9A);
  border-radius: 0 var(--r2, 10px) var(--r2, 10px) 0;
}
.lib-related h3 {
  font-size: 13px; font-family: var(--m, monospace);
  letter-spacing: .12em; color: var(--tl, #1B7E9A);
  margin: 0 0 14px; text-transform: uppercase; font-weight: 700;
}
.lib-related ul { list-style: none; margin: 0; padding: 0; }
.lib-related li { margin-bottom: 8px; }
.lib-related a {
  font-size: 14px; color: var(--tx, #2d2d2d);
  text-decoration: none; line-height: 1.4;
  display: inline-block;
  transition: color .12s;
}
.lib-related a:hover { color: var(--tl, #1B7E9A); }
.lib-related a::before { content: "→ "; color: var(--tl, #1B7E9A); }

/* === Pagination === */
.lib-pagination {
  display: flex; gap: 8px; justify-content: center;
  margin: 32px 0 16px;
}
.lib-pagination a, .lib-pagination span {
  min-width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; border-radius: 8px;
  font-size: 13.5px; text-decoration: none;
  border: 1px solid var(--bd, #e5e5e5);
  color: var(--tx2, #555);
  transition: all .12s;
}
.lib-pagination a:hover { border-color: var(--tl, #1B7E9A); color: var(--tl, #1B7E9A); }
.lib-pagination .current {
  background: var(--tl, #1B7E9A); color: #fff; border-color: var(--tl, #1B7E9A); font-weight: 700;
}
.lib-pagination .disabled {
  opacity: .4; pointer-events: none;
}

/* === Language switcher === */
.lib-lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--bd, #e5e5e5);
  border-radius: 24px; padding: 4px 6px 4px 14px;
  font-size: 13px; cursor: pointer;
  position: relative;
}
.lib-lang-switch:hover { border-color: var(--tl, #1B7E9A); }
.lib-lang-switch summary { list-style: none; cursor: pointer; outline: none; padding-right: 8px; }
.lib-lang-switch summary::-webkit-details-marker { display: none; }
.lib-lang-switch summary::after { content: "▾"; font-size: 10px; opacity: .6; margin-left: 4px; }
.lib-lang-switch[open] summary::after { transform: rotate(-180deg); }
.lib-lang-switch .lib-lang-flag { display: inline-block; margin-right: 6px; }
.lib-lang-switch .lib-lang-list {
  position: absolute; top: 100%; right: 0; margin-top: 6px;
  background: #fff; border: 1px solid var(--bd, #e5e5e5);
  border-radius: 12px; padding: 8px 0;
  min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,.08);
  z-index: 50;
}
.lib-lang-switch .lib-lang-list a {
  display: block; padding: 8px 16px;
  font-size: 13.5px; color: var(--tx, #2d2d2d); text-decoration: none;
}
.lib-lang-switch .lib-lang-list a:hover { background: rgba(13,123,138,.06); color: var(--tl, #1B7E9A); }
.lib-lang-switch .lib-lang-list a.is-current { font-weight: 700; color: var(--tl, #1B7E9A); }
.lib-lang-switch .lib-lang-list a .lib-lang-native {
  font-size: 12px; color: var(--tx3, #9e9e9e); margin-left: 6px;
}

/* === Chat interface (ask page) === */
.lib-chat-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 22px;
  min-height: 600px;
  margin-top: 18px;
}
.lib-chat-side {
  background: #fff; border: 1px solid var(--bd, #e5e5e5);
  border-radius: var(--r2, 12px);
  padding: 18px;
  height: fit-content;
  position: sticky; top: 100px;
}
.lib-chat-side h4 {
  font-size: 11px; letter-spacing: .12em;
  color: var(--tx3, #9e9e9e); text-transform: uppercase;
  margin: 0 0 10px; font-weight: 700;
  font-family: var(--m, monospace);
}
.lib-chat-side ul { list-style: none; margin: 0 0 16px; padding: 0; }
.lib-chat-side ul a {
  display: block; padding: 6px 10px; border-radius: 8px;
  font-size: 13px; color: var(--tx, #2d2d2d); text-decoration: none;
  line-height: 1.4;
}
.lib-chat-side ul a:hover { background: rgba(13,123,138,.06); color: var(--tl, #1B7E9A); }
.lib-chat-side ul a.is-current { background: rgba(13,123,138,.1); color: var(--tl, #1B7E9A); font-weight: 700; }

.lib-chat-main {
  background: #fff; border: 1px solid var(--bd, #e5e5e5);
  border-radius: var(--r2, 12px);
  display: flex; flex-direction: column; min-height: 600px;
}
.lib-chat-header {
  padding: 14px 22px;
  border-bottom: 1px solid var(--bd, #e5e5e5);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.lib-chat-header .lib-chat-title { font-size: 15px; font-weight: 700; }
.lib-chat-header .lib-chat-subtitle { font-size: 12px; color: var(--tx2, #666); }
.lib-chat-status {
  font-size: 12px; color: var(--tx2, #666);
  display: inline-flex; align-items: center; gap: 6px;
}
.lib-chat-status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #1a8754;
}

.lib-chat-body {
  flex: 1; padding: 22px; overflow-y: auto;
  min-height: 380px;
}
.lib-chat-msg { margin-bottom: 18px; max-width: 85%; }
.lib-chat-msg.user {
  margin-left: auto; max-width: 70%;
}
.lib-chat-msg.user .lib-chat-bubble {
  background: var(--tl, #1B7E9A); color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.lib-chat-msg.bot .lib-chat-bubble {
  background: var(--bg2, #f7f7f5); color: var(--tx, #2d2d2d);
  border-radius: 14px 14px 14px 4px;
}
.lib-chat-bubble {
  padding: 12px 16px; font-size: 14.5px; line-height: 1.6;
}
.lib-chat-bubble p { margin: 0 0 10px; }
.lib-chat-bubble p:last-child { margin: 0; }
.lib-chat-bubble ul, .lib-chat-bubble ol { margin: 0 0 10px; padding-left: 20px; }
.lib-chat-bubble li { margin-bottom: 4px; }
.lib-chat-bubble code {
  background: rgba(13,123,138,.1); color: var(--tl, #1B7E9A);
  padding: 1px 5px; border-radius: 3px;
  font-family: var(--m, monospace); font-size: .9em;
}

.lib-chat-redirect-cta {
  display: inline-block;
  margin-top: 8px; padding: 8px 14px;
  background: var(--or, #E8871E); color: #fff;
  border-radius: 20px; font-size: 13px; font-weight: 700;
  text-decoration: none;
}
.lib-chat-redirect-cta:hover { background: #C46F0E; color: #fff; }

.lib-chat-typing {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--tx2, #666);
  padding: 12px 16px;
  background: var(--bg2, #f7f7f5);
  border-radius: 14px 14px 14px 4px;
}
.lib-chat-typing::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tl, #1B7E9A); animation: libDot 1.2s infinite;
}
@keyframes libDot { 0%, 80%, 100% { opacity:.3; } 40% { opacity:1; } }

.lib-chat-input-wrap {
  padding: 14px 18px;
  border-top: 1px solid var(--bd, #e5e5e5);
  display: flex; gap: 10px; align-items: flex-end;
}
.lib-chat-input-wrap textarea {
  flex: 1; resize: none; min-height: 40px; max-height: 100px;
  padding: 10px 16px; border-radius: 22px;
  border: 1px solid var(--bd, #e5e5e5);
  font-family: inherit; font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.lib-chat-input-wrap textarea:focus { border-color: var(--tl, #1B7E9A); }
.lib-chat-input-wrap button {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--tl, #1B7E9A); color: #fff;
  border: 0; font-size: 18px; cursor: pointer;
  flex-shrink: 0;
  transition: background .12s;
}
.lib-chat-input-wrap button:hover { background: #0F5A6A; }
.lib-chat-input-wrap button:disabled {
  background: #aaa; cursor: not-allowed;
}

@media (max-width: 900px) {
  .lib-chat-shell { grid-template-columns: 1fr; }
  .lib-chat-side { position: static; }
}

/* === Search results === */
.lib-search-results { margin-top: 18px; }
.lib-search-results .lib-search-stats {
  font-size: 13px; color: var(--tx2, #666);
  margin-bottom: 16px;
}

/* === Empty states === */
.lib-empty {
  text-align: center; padding: 60px 20px;
  color: var(--tx2, #666);
}
.lib-empty h3 { color: var(--tx, #2d2d2d); font-size: 18px; margin-bottom: 6px; }
.lib-empty p { font-size: 14px; }
.lib-empty .lib-empty-icon { font-size: 48px; opacity: .4; margin-bottom: 14px; }

/* === Sort options === */
.lib-sort {
  display: flex; gap: 8px; align-items: center;
  font-size: 13px; color: var(--tx2, #666);
  margin-bottom: 14px;
}
.lib-sort a {
  padding: 5px 12px; border-radius: 16px;
  text-decoration: none; color: var(--tx2, #666);
  border: 1px solid var(--bd, #e5e5e5);
  font-size: 12.5px;
  transition: all .12s;
}
.lib-sort a:hover { border-color: var(--tl, #1B7E9A); color: var(--tl, #1B7E9A); }
.lib-sort a.is-current { background: var(--tl, #1B7E9A); color: #fff; border-color: var(--tl, #1B7E9A); font-weight: 700; }

/* === Skeleton loader for AJAX states === */
.lib-skel {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: libSkel 1.4s infinite;
  border-radius: 4px;
}
@keyframes libSkel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Responsive adjustments === */
@media (max-width: 720px) {
  .lib-cat-grid { grid-template-columns: 1fr; }
  .lib-qa-article h1 { font-size: 24px; }
  .lib-qa-article .lib-qa-body { font-size: 15px; }
}

/* =========================================================================
   CLAUDE-STYLE CHAT APP (boxed but immersive — ask.php)
   =========================================================================
   The chat takes ~80vh under the topmenu. Sidebar is collapsible.
   Mobile: sidebar becomes a drawer overlay.
   ========================================================================= */

.lib-chat-app {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  /* Honest height math: viewport minus topmenu (~85px) and our outer margins (~24px).
     Use min() to cap on tall screens so we never feel "stretched". */
  height: min(calc(100vh - 110px), 820px);
  min-height: 480px;
  background: #fff;
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: var(--r2, 12px);
  overflow: hidden;
  margin: 12px auto 28px;
  max-width: 1400px;
  width: 96%;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
  position: relative;
}

/* Sidebar collapsed state */
.lib-chat-app:has(.lib-chat-sb[data-collapsed="true"]) {
  grid-template-columns: 56px 1fr;
}

/* === SIDEBAR === */
.lib-chat-sb {
  background: #fafafa;
  border-right: 1px solid var(--bd, #e5e5e5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .22s ease;
}

.lib-chat-sb[data-collapsed="true"] .lib-chat-sb-body { display: none; }
.lib-chat-sb[data-collapsed="true"] .lib-chat-sb-title { display: none; }
.lib-chat-sb[data-collapsed="true"] .lib-chat-sb-toggle-ic { transform: rotate(180deg); }

.lib-chat-sb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bd, #e5e5e5);
  flex-shrink: 0;
}

.lib-chat-sb-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--tx, #2d2d2d);
}

.lib-chat-sb-spark {
  color: var(--or, #E8871E);
  font-size: 16px;
  animation: libChatSpark 2.4s ease-in-out infinite;
}
@keyframes libChatSpark {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.18); }
}

.lib-chat-sb-toggle {
  width: 28px; height: 28px;
  background: transparent; border: 1px solid var(--bd, #e5e5e5);
  border-radius: 6px; cursor: pointer;
  color: var(--tx2, #666); font-family: inherit; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.lib-chat-sb-toggle:hover {
  background: #fff; border-color: var(--tl, #1B7E9A);
  color: var(--tl, #1B7E9A);
}
.lib-chat-sb-toggle-ic {
  display: inline-block; transition: transform .22s;
  line-height: 1;
}

.lib-chat-sb-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 16px;
}
.lib-chat-sb-body::-webkit-scrollbar { width: 8px; }
.lib-chat-sb-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 4px; }

.lib-chat-sb-newchat {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--tl, #1B7E9A); color: #fff;
  border: 0; border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .12s;
  margin-bottom: 18px;
}
.lib-chat-sb-newchat:hover { background: #0F5A6A; }
.lib-chat-sb-newchat-ic { font-size: 18px; line-height: 1; font-weight: 400; }

.lib-chat-sb-section { margin-bottom: 18px; }

.lib-chat-sb-h {
  font-size: 11px; font-weight: 700;
  color: var(--tx3, #9e9e9e); letter-spacing: .1em;
  text-transform: uppercase;
  font-family: var(--m, monospace);
  padding: 0 8px 8px;
}

.lib-chat-sb-cats {
  display: flex; flex-direction: column; gap: 2px;
}

.lib-chat-sb-cat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px;
  align-items: stretch;
}

.lib-chat-sb-cat {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  background: transparent; border: 0; border-radius: 6px;
  font-family: inherit; font-size: 13px; color: var(--tx, #2d2d2d);
  cursor: pointer; text-align: left;
  width: 100%;
  transition: background .12s, color .12s;
}
.lib-chat-sb-cat:hover {
  background: rgba(27,126,154,.08);
  color: var(--tl, #1B7E9A);
}
.lib-chat-sb-cat.is-active {
  background: rgba(27,126,154,.12);
  color: var(--tl, #1B7E9A);
  font-weight: 600;
}
.lib-chat-sb-cat-ic {
  font-size: 14px;
  width: 18px; text-align: center;
  flex-shrink: 0;
  color: inherit;
}
.lib-chat-sb-cat-name {
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-chat-sb-cat-count {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 18px;
  padding: 0 6px;
  background: rgba(27,126,154,.08);
  color: var(--tl, #1B7E9A);
  border-radius: 10px;
  font-family: var(--m, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
.lib-chat-sb-cat.is-active .lib-chat-sb-cat-count {
  background: rgba(255,255,255,.2);
  color: #fff;
}

.lib-chat-sb-cat-browse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px;
  border-radius: 6px;
  font-size: 11px; color: var(--tx3, #9e9e9e);
  text-decoration: none;
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.lib-chat-sb-cat-row:hover .lib-chat-sb-cat-browse { opacity: 1; }
.lib-chat-sb-cat-browse:hover {
  background: rgba(27,126,154,.1);
  color: var(--tl, #1B7E9A);
}

.lib-chat-sb-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.lib-chat-sb-list a {
  display: block;
  padding: 7px 10px;
  font-size: 12.5px; line-height: 1.4;
  color: var(--tx2, #666);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s, color .12s;
}
.lib-chat-sb-list a:hover {
  background: rgba(27,126,154,.06);
  color: var(--tx, #2d2d2d);
}

.lib-chat-sb-note {
  background: #fff;
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
}
.lib-chat-sb-note-h {
  font-size: 11px; font-weight: 700;
  color: var(--or, #E8871E); letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.lib-chat-sb-note p {
  font-size: 12px; line-height: 1.5;
  color: var(--tx2, #666);
  margin: 0;
}
.lib-chat-sb-note a { color: var(--tl, #1B7E9A); font-weight: 600; }

.lib-chat-sb-foot {
  margin-top: auto;
  padding: 12px 8px 4px;
  border-top: 1px solid var(--bd, #e5e5e5);
}
.lib-chat-sb-back {
  display: block;
  font-size: 12px;
  color: var(--tx3, #9e9e9e);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.lib-chat-sb-back:hover {
  background: rgba(0,0,0,.04);
  color: var(--tl, #1B7E9A);
}

/* === CHAT PANEL === */
.lib-chat-pn {
  display: flex; flex-direction: column;
  background: #fff;
  overflow: hidden;
  position: relative;
}

.lib-chat-pn-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--bd, #e5e5e5);
  background: #fff;
  flex-shrink: 0;
}

.lib-chat-pn-mob-sb {
  display: none;
  width: 32px; height: 32px;
  background: transparent; border: 1px solid var(--bd, #e5e5e5);
  border-radius: 6px;
  font-size: 16px; color: var(--tx, #2d2d2d);
  cursor: pointer;
  align-items: center; justify-content: center;
}

.lib-chat-pn-title {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}

.lib-chat-pn-title-name {
  font-size: 15px; font-weight: 700; color: var(--tx, #2d2d2d);
  display: inline-flex; align-items: center; gap: 6px;
}
.lib-chat-pn-spark {
  color: var(--or, #E8871E);
  animation: libChatSpark 2.4s ease-in-out infinite;
}

.lib-chat-pn-title-meta {
  font-size: 12px;
  color: var(--tx2, #666);
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--m, monospace);
  letter-spacing: .04em;
}

.lib-chat-pn-status {
  display: inline-flex; align-items: center; gap: 4px;
  color: #1a8754; font-weight: 600;
  font-size: 11px;
}

/* Chat body — scrollable message area */
.lib-chat-pn-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  background: #fafafa;
  scroll-behavior: smooth;
}
.lib-chat-pn-body::-webkit-scrollbar { width: 10px; }
.lib-chat-pn-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 5px; }
.lib-chat-pn-body::-webkit-scrollbar-track { background: transparent; }

/* Welcome block — extra spacing + starters */
.lib-chat-welcome {
  max-width: 720px;
  margin: 0 auto 24px;
}
.lib-chat-welcome .lib-chat-bubble {
  background: #fff;
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: 14px;
}

.lib-chat-starters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.lib-chat-starter {
  background: #fff;
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: left;
  font-family: inherit; font-size: 13px;
  color: var(--tx, #2d2d2d);
  cursor: pointer;
  transition: all .15s;
  line-height: 1.4;
}
.lib-chat-starter:hover {
  border-color: var(--tl, #1B7E9A);
  background: rgba(27,126,154,.04);
  color: var(--tl, #1B7E9A);
  transform: translateY(-1px);
}

/* Override message styles for ask page (slightly larger, more breathing room) */
.lib-chat-pn-body .lib-chat-msg {
  max-width: 760px;
  margin: 0 auto 16px;
}
.lib-chat-pn-body .lib-chat-msg.user {
  margin-left: auto; margin-right: 0;
  max-width: 70%;
}
.lib-chat-pn-body .lib-chat-msg.user .lib-chat-bubble {
  background: var(--tl, #1B7E9A);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  box-shadow: 0 1px 4px rgba(27,126,154,.18);
}
.lib-chat-pn-body .lib-chat-msg.bot .lib-chat-bubble {
  background: #fff;
  border: 1px solid var(--bd, #e5e5e5);
  color: var(--tx, #2d2d2d);
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.lib-chat-pn-body .lib-chat-bubble {
  padding: 14px 18px;
  font-size: 14.5px; line-height: 1.65;
}

.lib-chat-pn-body .lib-chat-typing {
  background: #fff;
  border: 1px solid var(--bd, #e5e5e5);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

/* Filter pill above first user message — shows current category context */
.lib-chat-filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(232,135,30,.1);
  color: var(--or, #E8871E);
  border-radius: 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
  font-family: var(--m, monospace);
  text-transform: uppercase;
  margin: 0 auto 16px;
  width: fit-content;
}

/* Input area at bottom */
.lib-chat-pn-input {
  background: #fff;
  border-top: 1px solid var(--bd, #e5e5e5);
  padding: 14px 22px 16px;
  flex-shrink: 0;
}

.lib-chat-pn-input-row {
  display: flex; gap: 10px; align-items: flex-end;
  background: #fff;
  border: 2px solid var(--or, #E8871E);
  border-radius: 14px;
  padding: 6px 6px 6px 16px;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(232,135,30,.1);
}
.lib-chat-pn-input-row:focus-within {
  border-color: #C46F0E;
  box-shadow: 0 0 0 4px rgba(232,135,30,.18), 0 2px 12px rgba(232,135,30,.2);
}

.lib-chat-pn-input textarea {
  flex: 1;
  resize: none;
  min-height: 24px; max-height: 200px;
  padding: 8px 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: 14.5px; line-height: 1.5;
  color: var(--tx, #2d2d2d);
}
.lib-chat-pn-input textarea::placeholder { color: var(--tx3, #9e9e9e); }

.lib-chat-pn-input button[type="submit"] {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--or, #E8871E); color: #fff;
  border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .12s, transform .12s, box-shadow .12s;
  box-shadow: 0 2px 6px rgba(232,135,30,.35);
}
.lib-chat-pn-input button[type="submit"]:hover {
  background: #C46F0E;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(232,135,30,.45);
}
.lib-chat-pn-input button[type="submit"]:disabled {
  background: #c0c0c0; cursor: not-allowed; transform: none; box-shadow: none;
}
.lib-chat-pn-send-ic { display: inline-block; line-height: 1; }

.lib-chat-pn-input-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--tx3, #9e9e9e);
  margin-top: 8px; padding: 0 4px;
  flex-wrap: wrap; gap: 8px;
}
.lib-chat-pn-hint { font-family: var(--m, monospace); }
.lib-chat-pn-disclaimer { color: var(--tx3, #9e9e9e); font-style: italic; }

/* Auto-redirect notice in bot bubble */
.lib-chat-redirect-notice {
  display: flex; align-items: center; gap: 6px;
  margin-top: 16px;
  padding: 10px 16px;
  background: var(--or, #E8871E); color: #fff !important;
  border-radius: 18px;
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  transition: background .12s;
  width: fit-content;
  clear: both;
}
.lib-chat-redirect-notice:hover { background: #C46F0E; color: #fff; }
.lib-chat-redirect-countdown {
  font-size: 11px; opacity: .85; margin-left: 4px;
  font-family: var(--m, monospace);
}

/* =========================================================================
   MOBILE responsive — sidebar becomes drawer
   ========================================================================= */
@media (max-width: 880px) {
  .lib-chat-app {
    grid-template-columns: 1fr;
    height: calc(100vh - 95px);
    min-height: 420px;
    margin: 6px auto 16px;
    width: 98%;
    border-radius: 8px;
  }
  .lib-chat-app:has(.lib-chat-sb[data-collapsed="true"]) {
    grid-template-columns: 1fr;
  }
  .lib-chat-sb {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 8px 0 24px rgba(0,0,0,.12);
  }
  .lib-chat-sb[data-mob-open="true"] {
    transform: translateX(0);
  }
  .lib-chat-sb-toggle { display: none; }
  .lib-chat-pn-mob-sb { display: inline-flex; }

  /* Mobile overlay backdrop when sidebar open */
  .lib-chat-app[data-mob-sb-open="true"]::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.32); z-index: 40;
  }

  .lib-chat-pn-body { padding: 18px 16px; }
  .lib-chat-pn-input { padding: 10px 14px 12px; }
  .lib-chat-pn-body .lib-chat-bubble { font-size: 14px; }
  .lib-chat-starters { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .lib-chat-pn-input-meta { font-size: 10px; }
  .lib-chat-pn-disclaimer { display: none; }
}

/* =========================================================================
   Q&A page action buttons (Print / Copy / Share)
   ========================================================================= */
.lib-qa-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bd, #e5e5e5);
  position: relative;
}

.lib-qa-act-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: 22px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx, #2d2d2d);
  cursor: pointer;
  text-decoration: none;
  transition: all .12s ease;
  white-space: nowrap;
}

.lib-qa-act-btn:hover {
  border-color: var(--tl, #1B7E9A);
  color: var(--tl, #1B7E9A);
  background: rgba(27,126,154,.04);
  transform: translateY(-1px);
}

.lib-qa-act-btn:active {
  transform: translateY(0);
}

.lib-qa-act-btn.lib-qa-act-share:hover {
  border-color: var(--or, #E8871E);
  color: var(--or, #E8871E);
  background: rgba(232,135,30,.04);
}

.lib-qa-act-ic {
  font-size: 14px;
  line-height: 1;
}

.lib-qa-act-tx {
  line-height: 1;
}

/* Toast feedback */
.lib-qa-act-toast {
  display: none;
  position: absolute;
  left: 0;
  bottom: -34px;
  background: #1a8754;
  color: #fff;
  padding: 6px 14px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--m, monospace);
  letter-spacing: .03em;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  z-index: 10;
  white-space: nowrap;
  animation: libToastIn .2s ease;
}
.lib-qa-act-toast.is-visible {
  display: inline-block;
}
@keyframes libToastIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Share dropdown */
.lib-qa-share-dd {
  display: none;
  position: absolute;
  top: 100%;
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  min-width: 200px;
  z-index: 20;
}
.lib-qa-share-dd.is-open {
  display: block;
}
.lib-qa-share-dd a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--tx, #2d2d2d);
  text-decoration: none;
  transition: background .12s;
}
.lib-qa-share-dd a:hover {
  background: rgba(27,126,154,.08);
  color: var(--tl, #1B7E9A);
}
.lib-qa-share-dd a span {
  font-size: 16px;
  width: 22px;
  text-align: center;
}

/* Hide the byline borders on print buttons row */
@media (max-width: 600px) {
  .lib-qa-act-btn .lib-qa-act-tx {
    font-size: 12px;
  }
  .lib-qa-act-btn {
    padding: 7px 12px;
  }
}

/* In dark / print contexts */
@media print {
  .lib-qa-actions { display: none !important; }
}

/* Sidebar recent-answers external indicator */
.lib-chat-sb-list a {
  display: flex !important;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
}
.lib-chat-sb-list-ext {
  font-size: 10px;
  color: var(--tx3, #9e9e9e);
  opacity: 0;
  transition: opacity .15s;
  flex-shrink: 0;
}
.lib-chat-sb-list a:hover .lib-chat-sb-list-ext {
  opacity: 1;
  color: var(--tl, #1B7E9A);
}

/* On first load (no messages sent yet), gently highlight the input
   so users notice it immediately. Removes itself on first interaction. */
.lib-chat-pn-body .lib-chat-msg.user ~ .lib-chat-pn-input,
.lib-chat-pn:has(.lib-chat-msg.user) .lib-chat-pn-input-row {
  /* once a user message exists, don't pulse */
  animation: none;
}
.lib-chat-pn:not(:has(.lib-chat-msg.user)) .lib-chat-pn-input-row {
  animation: libInputPulse 3.5s ease-in-out 1.2s 2;
}
@keyframes libInputPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(232,135,30,0.1); border-color: var(--or, #E8871E); }
  50%      { box-shadow: 0 0 0 6px rgba(232,135,30,0.25), 0 2px 12px rgba(232,135,30,.3); border-color: #C46F0E; }
}

/* Make starter chips a bit smaller so input is more visible from the start */
.lib-chat-starter {
  padding: 9px 12px;
  font-size: 12.5px;
}

/* =========================================================================
   In-chat message actions (Print / Copy / Open) — appear under bot answer
   ========================================================================= */
.lib-chat-msg-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 0 4px 0;
  padding: 0;
  position: relative;
}
.lib-chat-msg.bot:has(.lib-chat-msg-actions) {
  /* slightly extra spacing below so the action row breathes */
  margin-bottom: 22px !important;
}

.lib-chat-msg-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: #fff;
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: 16px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx2, #555);
  cursor: pointer;
  text-decoration: none;
  transition: all .12s;
  white-space: nowrap;
  line-height: 1;
}
.lib-chat-msg-act:hover {
  border-color: var(--or, #E8871E);
  color: var(--or, #E8871E);
  background: rgba(232,135,30,.04);
}
.lib-chat-msg-act-ic {
  font-size: 13px;
  line-height: 1;
}

/* Toast for in-chat copy */
.lib-chat-msg-act-toast {
  display: none;
  margin-left: 4px;
  padding: 4px 10px;
  background: #1a8754;
  color: #fff;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  font-family: var(--m, monospace);
  animation: libToastIn .15s ease;
}
.lib-chat-msg-act-toast.is-visible {
  display: inline-block;
}

/* =========================================================================
   "Need ideas?" toggle — collapsible starter questions
   ========================================================================= */
.lib-chat-ideas {
  margin-top: 14px;
  text-align: center;
}

.lib-chat-ideas-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  border: 1px dashed var(--bd, #e5e5e5);
  border-radius: 18px;
  font-family: inherit;
  font-size: 12px;
  color: var(--tx2, #666);
  cursor: pointer;
  transition: all .15s;
  font-weight: 500;
}
.lib-chat-ideas-toggle:hover {
  border-color: var(--or, #E8871E);
  color: var(--or, #E8871E);
  border-style: solid;
  background: rgba(232,135,30,.04);
}
.lib-chat-ideas-toggle.is-open {
  border-color: var(--or, #E8871E);
  color: var(--or, #E8871E);
  border-style: solid;
  background: rgba(232,135,30,.06);
}
.lib-chat-ideas-toggle.is-open .lib-chat-ideas-caret {
  transform: rotate(180deg);
}

.lib-chat-ideas-ic {
  font-size: 13px;
  line-height: 1;
}

.lib-chat-ideas-caret {
  font-size: 9px;
  margin-left: 2px;
  transition: transform .2s;
  opacity: .7;
}

/* Override existing starters layout — now appears when toggle clicked */
.lib-chat-ideas .lib-chat-starters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
  margin-top: 12px;
  text-align: left;
  animation: libIdeasFadeIn .22s ease;
}
.lib-chat-ideas .lib-chat-starters[hidden] { display: none; }

@keyframes libIdeasFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Centered welcome bubble — looks more like Claude/ChatGPT first-load */
.lib-chat-welcome .lib-chat-bubble {
  text-align: center;
}
.lib-chat-welcome .lib-chat-bubble p {
  font-size: 14px;
}

/* =========================================================================
   Chat header language picker
   ========================================================================= */
.lib-chat-langpick {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}
.lib-chat-langpick-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: 16px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx, #2d2d2d);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.lib-chat-langpick-trigger:hover {
  border-color: var(--tl, #1B7E9A);
  color: var(--tl, #1B7E9A);
  background: rgba(27,126,154,.04);
}
.lib-chat-langpick.is-open .lib-chat-langpick-trigger {
  border-color: var(--tl, #1B7E9A);
  color: var(--tl, #1B7E9A);
  background: rgba(27,126,154,.06);
}
.lib-chat-langpick-current {
  line-height: 1;
}
.lib-chat-langpick-caret {
  font-size: 9px;
  opacity: .7;
  transition: transform .15s;
}
.lib-chat-langpick.is-open .lib-chat-langpick-caret {
  transform: rotate(180deg);
}

.lib-chat-langpick-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: 10px;
  padding: 4px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  z-index: 100;
  animation: libIdeasFadeIn .15s ease;
}
.lib-chat-langpick-menu[hidden] { display: none; }
.lib-chat-langpick-menu a {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--tx, #2d2d2d);
  text-decoration: none;
  border-radius: 6px;
  transition: background .12s;
}
.lib-chat-langpick-menu a:hover {
  background: rgba(27,126,154,.08);
  color: var(--tl, #1B7E9A);
}
.lib-chat-langpick-menu a.is-active {
  background: rgba(27,126,154,.12);
  color: var(--tl, #1B7E9A);
  font-weight: 600;
}

/* On narrow screens, hide the language label and show only flag/code */
@media (max-width: 720px) {
  .lib-chat-pn-head {
    flex-wrap: wrap;
  }
  .lib-chat-langpick-menu {
    right: 0;
    left: auto;
  }
}

/* =========================================================================
   UNIVERSAL SIDEBAR SHELL — wraps every library page (except /ask)
   Two-column layout: sidebar 280px + main panel
   ========================================================================= */

.lib-body { background: #fafafa; }

.lib-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  max-width: 1400px;
  margin: 12px auto 28px;
  width: 96%;
  background: #fff;
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: var(--r2, 12px);
  overflow: hidden;
  min-height: calc(100vh - 180px);
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
  position: relative;
}

.lib-shell:has(.lib-shell-sb[data-collapsed="true"]) {
  grid-template-columns: 56px 1fr;
}

/* === Sidebar === */
.lib-shell-sb {
  background: #fafafa;
  border-right: 1px solid var(--bd, #e5e5e5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .22s ease;
  position: sticky;
  top: 12px;
  align-self: start;
  height: calc(100vh - 180px);
  max-height: 900px;
}

.lib-shell-sb[data-collapsed="true"] .lib-shell-sb-body { display: none; }
.lib-shell-sb[data-collapsed="true"] .lib-shell-sb-title { display: none; }
.lib-shell-sb[data-collapsed="true"] .lib-shell-sb-toggle-ic { transform: rotate(180deg); }

.lib-shell-sb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bd, #e5e5e5);
  flex-shrink: 0;
  background: #fafafa;
}

.lib-shell-sb-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--tx, #2d2d2d);
}

.lib-shell-sb-spark {
  color: var(--or, #E8871E);
  font-size: 16px;
  animation: libShellSpark 2.4s ease-in-out infinite;
}
@keyframes libShellSpark {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.18); }
}

.lib-shell-sb-toggle {
  width: 28px; height: 28px;
  background: transparent; border: 1px solid var(--bd, #e5e5e5);
  border-radius: 6px; cursor: pointer;
  color: var(--tx2, #666); font-family: inherit; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.lib-shell-sb-toggle:hover {
  background: #fff; border-color: var(--tl, #1B7E9A);
  color: var(--tl, #1B7E9A);
}
.lib-shell-sb-toggle-ic {
  display: inline-block; transition: transform .22s; line-height: 1;
}

.lib-shell-sb-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 16px;
}
.lib-shell-sb-body::-webkit-scrollbar { width: 8px; }
.lib-shell-sb-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 4px; }

/* New chat / Ask AI button */
.lib-shell-sb-newchat {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 11px 14px;
  background: linear-gradient(135deg, #E8871E 0%, #C46F0E 100%);
  color: #fff !important;
  border: 0; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  margin-bottom: 8px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(232,135,30,.3);
}
.lib-shell-sb-newchat:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(232,135,30,.4);
  color: #fff !important;
}
.lib-shell-sb-newchat-ic {
  font-size: 14px; line-height: 1;
  animation: libShellSpark 2.4s ease-in-out infinite;
}

/* Library home button */
.lib-shell-sb-home {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent; color: var(--tx2, #666) !important;
  border: 1px solid var(--bd, #e5e5e5); border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  margin-bottom: 18px;
  transition: all .12s;
}
.lib-shell-sb-home:hover {
  border-color: var(--tl, #1B7E9A);
  color: var(--tl, #1B7E9A) !important;
  background: rgba(27,126,154,.04);
}
.lib-shell-sb-home.is-active {
  border-color: var(--tl, #1B7E9A);
  color: var(--tl, #1B7E9A) !important;
  background: rgba(27,126,154,.08);
}
.lib-shell-sb-home-ic { font-size: 14px; }

/* Section headers */
.lib-shell-sb-section { margin-bottom: 18px; }

.lib-shell-sb-h {
  font-size: 11px; font-weight: 700;
  color: var(--tx3, #9e9e9e); letter-spacing: .1em;
  text-transform: uppercase;
  font-family: var(--m, monospace);
  padding: 0 8px 8px;
}

/* Categories */
.lib-shell-sb-cats {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.lib-shell-sb-cat {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  background: transparent; border: 0; border-radius: 6px;
  font-family: inherit; font-size: 13px; color: var(--tx, #2d2d2d) !important;
  cursor: pointer; text-align: left;
  width: 100%; text-decoration: none;
  transition: background .12s, color .12s;
}
.lib-shell-sb-cat:hover {
  background: rgba(27,126,154,.08);
  color: var(--tl, #1B7E9A) !important;
}
.lib-shell-sb-cat.is-active {
  background: rgba(27,126,154,.12);
  color: var(--tl, #1B7E9A) !important;
  font-weight: 600;
}
.lib-shell-sb-cat-ic {
  font-size: 14px;
  width: 18px; text-align: center;
  flex-shrink: 0; color: inherit;
}
.lib-shell-sb-cat-name {
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-shell-sb-cat-count {
  font-size: 11px;
  color: var(--tx3, #9e9e9e);
  font-family: var(--m, monospace);
  font-weight: 600;
  min-width: 18px;
  text-align: right;
  padding: 1px 6px;
  background: rgba(0,0,0,.04);
  border-radius: 8px;
  flex-shrink: 0;
}
.lib-shell-sb-cat-count[data-empty="1"] { opacity: .55; }
.lib-shell-sb-cat:hover .lib-shell-sb-cat-count,
.lib-shell-sb-cat.is-active .lib-shell-sb-cat-count {
  background: rgba(27,126,154,.15);
  color: var(--tl, #1B7E9A);
}

/* Recent answers list */
.lib-shell-sb-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.lib-shell-sb-list a {
  display: flex !important; align-items: center; gap: 6px;
  justify-content: space-between;
  padding: 7px 10px;
  font-size: 12.5px; line-height: 1.4;
  color: var(--tx2, #666);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s, color .12s;
}
.lib-shell-sb-list a:hover {
  background: rgba(27,126,154,.06);
  color: var(--tx, #2d2d2d);
}
.lib-shell-sb-list-ext {
  font-size: 10px;
  color: var(--tx3, #9e9e9e);
  opacity: 0;
  transition: opacity .15s;
  flex-shrink: 0;
}
.lib-shell-sb-list a:hover .lib-shell-sb-list-ext {
  opacity: 1;
  color: var(--tl, #1B7E9A);
}
.lib-shell-sb-empty {
  font-size: 12px; color: var(--tx3, #9e9e9e);
  padding: 0 10px; margin: 0;
  font-style: italic;
}

/* Project work note */
.lib-shell-sb-note {
  background: #fff;
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
}
.lib-shell-sb-note-h {
  font-size: 11px; font-weight: 700;
  color: var(--or, #E8871E); letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.lib-shell-sb-note p {
  font-size: 12px; line-height: 1.5;
  color: var(--tx2, #666);
  margin: 0;
}
.lib-shell-sb-note a { color: var(--tl, #1B7E9A); font-weight: 600; }

/* === Sidebar language picker (sits under Library home) === */
.lib-shell-sb-lang {
  position: relative;
  margin: 0 16px 14px;
}
.lib-shell-sb-langbtn {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg2, #fafafa);
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: 8px;
  font-family: inherit; font-size: 13px;
  color: var(--tx, #2d2d2d);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.lib-shell-sb-langbtn:hover {
  border-color: var(--tl, #1B7E9A);
  background: #fff;
}
.lib-shell-sb-langbtn[aria-expanded="true"] {
  border-color: var(--tl, #1B7E9A);
  background: #fff;
}
.lib-shell-sb-langbtn-ic { font-size: 14px; line-height: 1; }
.lib-shell-sb-langbtn-tx { flex: 1; text-align: left; font-weight: 600; }
.lib-shell-sb-langbtn-caret {
  font-size: 11px; color: var(--tx2, #666);
  transition: transform .15s ease;
}
.lib-shell-sb-langbtn[aria-expanded="true"] .lib-shell-sb-langbtn-caret {
  transform: rotate(180deg);
}

.lib-shell-sb-langmenu {
  list-style: none; margin: 6px 0 0 0; padding: 4px;
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  max-height: 280px;
  overflow-y: auto;
  z-index: 200;
}
.lib-shell-sb-langmenu[hidden] { display: none; }

.lib-shell-sb-langopt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--tx, #2d2d2d);
  user-select: none;
}
.lib-shell-sb-langopt:hover {
  background: #f5f5f5;
}
.lib-shell-sb-langopt.is-active {
  background: rgba(27,126,154,.08);
  color: var(--tl, #1B7E9A);
  font-weight: 600;
}
.lib-shell-sb-langopt-check {
  width: 14px; text-align: center;
  color: var(--tl, #1B7E9A);
}
.lib-shell-sb-langopt-native { flex: 1; }
.lib-shell-sb-langopt-en {
  font-size: 11px; color: var(--tx2, #666);
}

/* === Mobile-only sidebar trigger button === */
.lib-shell-mob-trigger {
  display: none;
  align-items: center; gap: 8px;
  margin: 0 0 18px;
  padding: 8px 14px;
  background: var(--tl, #1B7E9A);
  border: 1px solid var(--tl, #1B7E9A);
  border-radius: 8px;
  font-family: inherit; font-size: 14px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.lib-shell-mob-trigger:hover {
  opacity: .9;
}
.lib-shell-mob-trigger-ic { font-size: 18px; line-height: 1; }
.lib-shell-mob-trigger-tx { font-weight: 600; }

@media (max-width: 880px) {
  .lib-shell-mob-trigger {
    display: inline-flex !important;
  }
  /* Push the main panel content (including the trigger) below the fixed site topnav */
  .lib-shell-main {
    padding-top: 22px !important;
  }
}

/* === Main panel (where page content goes) === */
.lib-shell-main {
  background: #fff;
  padding: 28px 32px;
  overflow-x: hidden;
  min-width: 0; /* prevents grid blowout from long content */
}

/* Main panel reset for components */
.lib-shell-main h1 { margin-top: 0; }
.lib-shell-main .w { width: 100% !important; max-width: none !important; padding: 0 !important; }

/* Mobile: sidebar becomes drawer */
@media (max-width: 880px) {
  .lib-shell {
    grid-template-columns: 1fr !important;
    margin: 80px auto 16px !important;  /* 80px top to clear fixed site topnav */
    width: 98%;
    border-radius: 8px;
    min-height: calc(100vh - 130px);
    overflow: visible !important;  /* allow fixed sidebar to escape */
  }
  .lib-shell:has(.lib-shell-sb[data-collapsed="true"]) {
    grid-template-columns: 1fr !important;
  }
  .lib-shell-sb {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: calc(100vh - 80px) !important;
    max-height: none !important;
    z-index: 9999 !important;
    transform: translateX(-100%) !important;
    transition: transform .22s ease !important;
    box-shadow: 8px 0 24px rgba(0,0,0,.18);
    border-right: 1px solid var(--bd, #e5e5e5);
    background: #fff !important;
  }
  .lib-shell-sb[data-mob-open="true"] {
    transform: translateX(0) !important;
  }
  .lib-shell-sb-toggle { display: none !important; }

  /* Mobile sidebar trigger button — must be visible */
  .lib-shell-mob-trigger {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Backdrop overlay when drawer is open */
  .lib-shell[data-mob-sb-open="true"]::before {
    content: "" !important;
    position: fixed !important;
    inset: 80px 0 0 0 !important;
    background: rgba(0,0,0,.4) !important;
    z-index: 9998 !important;
  }

  .lib-shell-main { padding: 18px 16px; }
}

/* Pages with built-in shell (ask.php) skip our shell entirely */
.lib-body-noshell .lib-shell { display: none; }

/* =========================================================================
   Homepage inside main panel (no hero — sidebar handles primary nav)
   ========================================================================= */
.lib-home-head {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--bd, #e5e5e5);
}
.lib-home-head .bc { margin-bottom: 12px; }
.lib-home-head h1 {
  font-size: 32px; line-height: 1.2;
  margin: 0 0 10px 0;
  letter-spacing: -.01em;
}
.lib-home-sub {
  color: var(--tx2, #666);
  font-size: 15px;
  max-width: 720px;
  margin: 0 0 18px 0;
}
.lib-home-head .lib-search-form {
  max-width: 640px;
}

.lib-home-section {
  margin-bottom: 36px;
}
.lib-home-section h2 {
  font-size: 22px;
  margin: 6px 0 16px 0;
}
.lib-home-section h3 {
  font-size: 17px;
  margin: 6px 0 14px 0;
}
.lib-home-section .lbl {
  font-family: var(--m, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx3, #9e9e9e);
  margin-bottom: 6px;
}

/* Homepage category grid — fits inside panel */
.lib-home-section .lib-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

/* Compact value grid inside main panel */
.lib-home-section .val-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.lib-home-section .val-c {
  padding: 18px 16px;
  background: var(--bg2, #fafafa);
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: var(--r2, 12px);
}
.lib-home-section .val-ic {
  font-size: 22px;
  color: var(--tl, #1B7E9A);
  margin-bottom: 8px;
}
.lib-home-section .val-t {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}
.lib-home-section .val-d {
  font-size: 13px;
  color: var(--tx2, #666);
  line-height: 1.5;
}

/* Two-column responsive */
.lib-home-section .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 720px) {
  .lib-home-section .grid-2 { grid-template-columns: 1fr; gap: 28px; }
  .lib-home-head h1 { font-size: 26px; }
}

/* FAQ section inside homepage main panel */
.lib-home-section.page-faq {
  background: var(--bg2, #fafafa);
  margin: 36px -32px -28px -32px;
  padding: 32px;
  border-top: 1px solid var(--bd, #e5e5e5);
  border-radius: 0;
}
@media (max-width: 880px) {
  .lib-home-section.page-faq {
    margin: 28px -16px -18px -16px;
    padding: 24px 16px;
  }
}

/* =========================================================================
   Category page header (within main panel) + Start Chat button
   ========================================================================= */
.lib-cat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--bd, #e5e5e5);
  flex-wrap: wrap;
}
.lib-cat-header-text { flex: 1; min-width: 0; }
.lib-cat-header h1 {
  font-size: 28px;
  margin: 4px 0 8px 0;
  letter-spacing: -.01em;
}
.lib-cat-desc-line {
  color: var(--tx2, #666);
  font-size: 14px;
  max-width: 640px;
  margin: 0;
}

.lib-cat-startchat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #E8871E 0%, #C46F0E 100%);
  color: #fff !important;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(232,135,30,.3);
  transition: transform .12s, box-shadow .12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.lib-cat-startchat:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(232,135,30,.4);
  color: #fff !important;
}
.lib-cat-startchat-ic {
  font-size: 14px;
  animation: libShellSpark 2.4s ease-in-out infinite;
}

/* Category CTA at bottom (when no questions exist) */
.lib-cat-cta {
  text-align: center;
  margin-top: 32px;
  padding: 24px;
  background: var(--bg2, #fafafa);
  border: 1px solid var(--bd, #e5e5e5);
  border-radius: var(--r2, 12px);
}
.lib-cat-cta p {
  margin-bottom: 14px;
  color: var(--tx2, #666);
}

@media (max-width: 720px) {
  .lib-cat-header { flex-direction: column; gap: 14px; }
  .lib-cat-header h1 { font-size: 22px; }
}