/* Khung app của học viên — sidebar, thanh trên, thanh dưới điện thoại.
   Dựng bởi mountAppShell() trong session.js; file này chỉ vẽ.

   Hệ B (2026-10, canvas "Hệ B · toàn app"): mực #111 + burgundy #7A1E35, viền
   đen 2px, góc 4px, bóng đổ cứng lệch xuống-phải, không blur. Mục đang mở là
   một khối burgundy có viền và bóng — cùng ngôn ngữ với nút chính, để "mình
   đang ở đâu" đọc ra ngay cả khi màn hình chỉnh tương phản thấp.

   Hành vi giữ nguyên từ bản trước:
     - body.login-mode   : màn đăng nhập trong hub.html, chưa có gì để điều hướng.
     - body.is-guiding   : chặng bốn bước của chế độ Học — sidebar nhường chỗ.
     - body.shell-anon   : khách /hoc-thu, mọi đích đến đều sau tường đăng nhập.
     - dưới 900px sidebar thành ngăn kéo; điện thoại có thêm thanh dưới 5 mục. */

:root {
  --shell-nav-w: 252px;
  --shell-top-h: 66px;
  --shell-tab-h: 66px;
}

body.has-shell { padding-left: var(--shell-nav-w); }

body.login-mode.has-shell { padding-left: 0; }
body.login-mode .shell-nav,
body.login-mode .shell-top,
body.login-mode .shell-tabbar,
body.login-mode .shell-overlay { display: none; }

body.is-guiding.has-shell { padding-left: 0; }
body.is-guiding .shell-nav,
body.is-guiding .shell-overlay { display: none; }

/* ---------- sidebar ---------- */
.shell-nav {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 70;
  width: var(--shell-nav-w);
  display: flex; flex-direction: column; gap: 26px;
  padding: 20px 16px;
  background: var(--paper, #fff);
  border-right: 2px solid var(--ink, #111);
}

.shell-nav-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

.shell-brand {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; padding: 0 6px;
  text-decoration: none; color: var(--ink, #111);
}
.shell-brand .brand-mark { width: 38px; height: 38px; flex: none; }
.shell-brand-copy { display: block; min-width: 0; }
.shell-brand-copy p {
  margin: 0; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; line-height: 1.2;
}

.shell-nav-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  /* Chừa chỗ cho bóng 3px của mục đang mở — overflow cắt mất nó. */
  padding: 0 4px 4px 0;
}

.shell-nav-group {
  margin: 16px 0 2px; padding: 0 8px 4px;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted, #57564F);
}

.shell-nav-link {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 10px;
  border: 2px solid transparent; border-radius: 4px;
  background: transparent;
  text-decoration: none; text-align: left;
  font-family: var(--font-body); font-weight: 500;
  font-size: 15px; color: var(--ink, #111);
  cursor: pointer;
}
.shell-nav-link:hover { background: var(--bur-wash, #F6E9EC); border-color: var(--ink, #111); }
.shell-nav-link svg { width: 18px; height: 18px; flex: none; }
.shell-nav-link.is-active {
  background: var(--bur, #7A1E35); color: #fff;
  border-color: var(--ink, #111);
  box-shadow: 3px 3px 0 var(--ink, #111);
  font-weight: 700;
}
.shell-nav-link.is-active svg { stroke-width: 2.2; }

.shell-nav-foot {
  flex: none; margin-top: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.shell-feedback { font-size: 14px; width: 100%; font-family: inherit; }
.shell-feedback svg { width: 16px; height: 16px; }

.shell-nav-foot .account-menu { width: 100%; }
.shell-account {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px;
  border: 2px solid var(--ink, #111); border-radius: 4px;
  background: var(--paper, #fff); color: var(--ink, #111);
  box-shadow: 4px 4px 0 var(--ink, #111);
  cursor: pointer; text-align: left;
  transition: transform .12s ease, box-shadow .12s ease;
}
@media (hover: hover) {
  .shell-account:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink, #111); }
}
.shell-account[aria-expanded="true"] { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink, #111); }
.shell-avatar {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 4px;
  background: var(--ink, #111); color: var(--bur-soft, #F3C6D0);
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; text-transform: uppercase;
}
.shell-account-copy { min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.shell-account-copy span {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shell-account-name { font-family: var(--font-body); font-weight: 700; font-size: 14px; }
.shell-account-sub {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted, #57564F);
}
.shell-account .account-menu-caret { width: 12px; height: 8px; color: var(--ink, #111); }

/* Menu tài khoản mở LÊN trên (khối hồ sơ nằm ở đáy). */
.shell-nav-foot .account-menu-panel {
  top: auto; bottom: calc(100% + 10px); left: 0; right: 0; min-width: 0;
}

/* ---------- thanh trên ---------- */
.shell-top {
  position: sticky; top: 0; z-index: 50;
  height: var(--shell-top-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 36px;
  background: var(--paper, #fff);
  border-bottom: 2px solid var(--ink, #111);
}
.shell-top-home { display: none; }
body.is-guiding .shell-top-home {
  display: flex; align-items: center; flex: none;
  text-decoration: none;
}
.shell-top-home .brand-mark { width: 32px; height: 32px; flex: none; }
.shell-top-title {
  margin: 0; min-width: 0; flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; color: var(--ink, #111);
}

/* Chip credit: "120 CREDIT | Gói Standard". */
.shell-top .site-nav-credits { margin-left: auto; flex: none; width: auto; white-space: nowrap; line-height: 1; }
/* Chuông hộp thư bài tập (homework.py). Đứng sau chip gói; không có chip thì tự đẩy sang phải. */
.shell-top-bell { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px; color: inherit; text-decoration: none; }
.shell-top .site-nav-credits.hidden + .shell-top-bell { margin-left: auto; }
.shell-top-bell:hover { background: rgba(0, 0, 0, 0.06); }
.shell-top-bell svg { width: 22px; height: 22px; }
.shell-top-bell-n { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #7A1E35; color: #fff; font: 700 11px/18px ui-monospace, Menlo, monospace; text-align: center; }
.snc-chip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 14px;
  border: 2px solid var(--ink, #111); border-radius: 4px;
  background: var(--paper, #fff); color: var(--ink, #111);
  box-shadow: 3px 3px 0 var(--ink, #111);
  text-decoration: none; font-size: 14px; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease;
}
a.snc-chip:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink, #111); }
@media (hover: hover) {
  a.snc-chip:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink, #111); }
}
.snc-num { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.02em; }
.snc-sep { width: 2px; height: 18px; background: var(--ink, #111); flex: none; }
.snc-plan { font-weight: 600; }

.shell-nav-toggle,
.shell-nav-close {
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border: 2px solid var(--ink, #111); border-radius: 4px;
  background: var(--paper, #fff); color: var(--ink, #111); cursor: pointer;
}
.shell-nav-toggle:hover, .shell-nav-close:hover { background: var(--bur-wash, #F6E9EC); }
/* Nút đóng nằm NGOÀI mép sidebar (trên nền tối), không chung hàng với logo:
   chung hàng thì nó ăn 46px và "The Socratic" bị cắt thành "The Socra…". */
.shell-nav-close { position: absolute; top: 20px; left: calc(100% + 12px); }
/* Sidebar đóng thì nút đóng (nằm ngoài mép nó) không được trượt vào màn hình. */
.shell-nav:not(.is-open) .shell-nav-close { visibility: hidden; }
.shell-nav-toggle svg, .shell-nav-close svg { width: 18px; height: 18px; }

.shell-overlay {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(17, 17, 17, 0.45);
}

/* ---------- thanh dưới (điện thoại) ---------- */
.shell-tabbar { display: none; }

body.has-shell .hub-main { padding-top: 0; }

@media (max-width: 900px) {
  body.has-shell { padding-left: 0; }
  .shell-nav {
    transform: translateX(-102%);
    transition: transform 0.25s ease;
    box-shadow: 6px 0 0 var(--ink, #111);
  }
  .shell-nav.is-open { transform: translateX(0); }
  .shell-nav-close { display: flex; }

  .shell-top { height: 58px; padding: 0 16px; gap: 10px; }
  .shell-top-home { display: flex; align-items: center; flex: none; text-decoration: none; }
  .shell-top-title { font-size: 18px; }
  .snc-chip { height: 36px; padding: 0 10px; font-size: 12.5px; box-shadow: 2px 2px 0 var(--ink, #111); }
  .snc-chip .snc-sep, .snc-chip .snc-plan { display: none; }

  body.has-shell:not(.login-mode):not(.shell-anon):not(.is-guiding):not(.exam-running) .shell-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--shell-tab-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--paper, #fff);
    border-top: 2px solid var(--ink, #111);
  }
  body.has-shell:not(.login-mode):not(.shell-anon):not(.is-guiding):not(.exam-running) {
    padding-bottom: calc(var(--shell-tab-h) + env(safe-area-inset-bottom, 0px));
  }
  .shell-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 0; padding: 0;
    border: 0; background: transparent; color: var(--ink, #111);
    text-decoration: none; font-family: var(--font-body);
    font-size: 11px; font-weight: 600; cursor: pointer;
  }
  .shell-tab svg { width: 20px; height: 20px; }
  .shell-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell-tab.is-active {
    background: var(--bur, #7A1E35); color: #fff; font-weight: 700;
    border-left: 2px solid var(--ink, #111); border-right: 2px solid var(--ink, #111);
  }
  .shell-tab.is-active:first-child { border-left: 0; }
  .shell-tab.is-active svg { stroke-width: 2.2; }
}

@media (min-width: 901px) {
  .shell-overlay { display: none; }

  /* Mọi trang (kể cả hub từ 2026-10-25): sidebar đóng sẵn (mountAppShell thêm
     .nav-collapsed), mở bằng nút Menu ở góc trái thanh trên. Dùng đúng cơ chế
     ngăn kéo của màn hẹp: .is-open kéo sidebar vào, nền tối bên dưới bấm là
     đóng. Trang nào truyền collapsed:false thì giữ sidebar cố định. */
  body.nav-collapsed.has-shell { padding-left: 0; }
  body.nav-collapsed .shell-nav {
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    box-shadow: 6px 0 0 var(--ink, #111);
  }
  body.nav-collapsed .shell-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease;
  }
  body.nav-collapsed .shell-nav-close { display: flex; }
  body.nav-collapsed .shell-nav-toggle {
    display: inline-flex; gap: 8px;
    width: auto; padding: 0 12px;
    font-family: var(--font-body); font-weight: 700; font-size: 14px;
  }
  body.nav-collapsed .shell-overlay { display: block; }
  body.nav-collapsed:not(.is-guiding):not(.shell-anon) .feedback-widget { left: 16px; }
}
.shell-nav-toggle-label { display: none; }
@media (min-width: 901px) {
  .shell-nav-toggle-label { display: inline; }
}

@media (max-width: 420px) {
  .shell-top-title { font-size: 16px; }
}

/* Header cũ `header.top` (lockup của màn đăng nhập) — rỗng khi đã đăng nhập vì
   lockup đã nằm ở đầu sidebar. `.shell-anon` được chừa ra: khách /hoc-thu chưa
   có sidebar nên header cũ vẫn là chỗ duy nhất mang lockup cho họ. */
body.has-shell:not(.login-mode):not(.shell-anon):not(.writing-page) header.top { display: none; }
body.has-shell.writing-page:not(.shell-anon) header.top { background: none; border: 0; }
body.has-shell.writing-page:not(.shell-anon) .header-inner {
  padding: 0 24px; gap: 0; justify-content: center;
}
body.has-shell.writing-page:not(.shell-anon) .summary-card { margin: 22px 0 0; }
body.has-shell:not(.shell-anon) .logo-row { display: none; }

body.shell-anon.has-shell { padding-left: 0; }
body.shell-anon .shell-nav,
body.shell-anon .shell-top,
body.shell-anon .shell-tabbar,
body.shell-anon .shell-overlay { display: none; }

.account-menu-item-quiet { color: var(--muted, #57564F); font-weight: 500; }

/* Nút góp ý nổi chỉ còn ở nơi không có sidebar (khách /hoc-thu, chặng Học):
   có sidebar thì "Góp ý cho Socratic" ở chân sidebar mở cùng hộp đó. Hộp vẫn
   bật ra từ góc dưới bên trái, ngay cạnh mép sidebar. */
body.has-shell:not(.is-guiding):not(.shell-anon) .feedback-fab { display: none; }
@media (min-width: 901px) {
  body.has-shell:not(.is-guiding):not(.shell-anon) .feedback-widget {
    left: calc(var(--shell-nav-w) + 16px);
  }
}
@media (max-width: 900px) {
  body.has-shell:not(.is-guiding):not(.shell-anon) .feedback-widget {
    bottom: calc(var(--shell-tab-h) + 12px + env(safe-area-inset-bottom, 0px));
  }
}