/* =========================================================
   BrainEtch — layout.css
   App shell, sidebar, library grid, session detail, new text,
   mobile bottom nav, responsive rules.
   ========================================================= */

/* ---------- App shell ---------- */
.app-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  background: var(--bg-base);
  position: relative;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  padding: 20px 0 0;
  overflow: hidden;
}
.sidebar .brand {
  padding: 0 22px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.sidebar .brand .mark {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent) 0%, #8a5a15 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 15px;
  color: #1a0f02;
  font-weight: 700;
  letter-spacing: -0.04em;
  box-shadow: 0 2px 6px rgba(212,146,42,0.3);
}
.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sidebar .nav-group {
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  border-left: 2px solid transparent;
  position: relative;
  transition: background 0.12s, color 0.12s;
  user-select: none;
}
.sidebar .nav-item:hover { background: var(--bg-raised); color: var(--text-primary); }
.sidebar .nav-item.active {
  background: var(--accent-subtle);
  color: var(--accent-bright);
  border-left-color: var(--accent);
  padding-left: 10px;
}
.sidebar .nav-item .count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-placeholder);
  font-variant-numeric: tabular-nums;
}
.sidebar .nav-item .badge {
  margin-left: auto;
  background: var(--accent);
  color: #2b1a05;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}
.sidebar .nav-item .folder-dot {
  width: 9px; height: 9px; border-radius: 2px;
  flex-shrink: 0;
}
.sidebar .nav-item .edit-inline {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--text-primary);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 13px;
  width: 100%;
  outline: none;
}
.sidebar .section-label {
  padding: 18px 22px 6px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-placeholder);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar .section-label .add {
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 0;
  padding: 0 4px;
}
.sidebar .section-label .add:hover { color: var(--accent); }
.sidebar .new-folder {
  margin: 8px 12px 0;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  background: transparent;
  font-family: var(--font-body);
}
.sidebar .new-folder:hover { border-color: var(--border-bright); color: var(--text-primary); }
.sidebar .tag-wrap {
  padding: 6px 16px 0;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.sidebar .user {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  position: relative;
}
.sidebar .user:hover { background: var(--bg-raised); }
.sidebar .user .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #3a4656, #1e2530);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar .user .avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar .user .meta { font-size: 12px; line-height: 1.3; min-width: 0; flex: 1; }
.sidebar .user .meta .name {
  color: var(--text-primary); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar .user .meta .streak { color: var(--accent); font-size: 11px; }

/* ---------- Main content ---------- */
.main {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg-base);
}
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 32px 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.topbar h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  margin: 0;
  letter-spacing: -0.03em;
}
.topbar .sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--bg-surface);
  position: relative;
}
.topbar .sort:hover { border-color: var(--border-bright); color: var(--text-primary); }
.topbar .view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.topbar .view-toggle button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.topbar .view-toggle button.active { background: var(--bg-raised); color: var(--text-primary); }
.topbar .search {
  margin-left: auto;
  flex: 0 1 280px;
  min-width: 180px;
  position: relative;
}
.topbar .search .input {
  padding: 8px 12px 8px 34px;
  font-size: 13px;
  background: var(--bg-surface);
}
.topbar .search svg {
  position: absolute;
  top: 50%; left: 11px;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}
.topbar .btn-new-text {
  margin-left: 6px;
}

/* ---------- Library grid ---------- */
.library-scroll {
  flex: 1;
  overflow-y: auto;
}
.library-grid {
  padding: 24px 32px 100px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.library-list {
  padding: 16px 32px 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.text-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  cursor: pointer;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 170px;
}
.text-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-bright);
  box-shadow: inset 0 0 0 1px var(--border-bright), 0 10px 24px rgba(0,0,0,0.45);
}
.text-card .folder-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  gap: 6px;
}
.text-card .folder-row .folder {
  display: inline-flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.text-card .folder-row .dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.text-card .star { color: var(--accent); font-size: 14px; }
.text-card .due-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(74,138,191,0.12);
  border: 1px solid rgba(74,138,191,0.4);
  color: var(--blue-bright);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.text-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin: 0;
  line-height: 1.3;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  /* 2-line ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-card .tags { display: flex; gap: 5px; flex-wrap: wrap; }
.text-card .mastery-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto;
}
.text-card .mastery-row .progress { flex: 1; }
.text-card .mastery-row .pct {
  font-size: 12px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 32px;
  text-align: right;
}
.text-card .mastery-row .pct.zero { color: var(--text-placeholder); }
.text-card .meta {
  font-size: 11px;
  color: var(--text-secondary);
}
.text-card .meta .dot-sep { margin: 0 6px; opacity: 0.4; }
.text-card .more-btn {
  position: absolute;
  top: 12px; right: 10px;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-placeholder);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.text-card:hover .more-btn { opacity: 1; }
.text-card .more-btn:hover { background: var(--bg-raised); color: var(--text-primary); }

/* List view variant */
.text-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(180px, 1.2fr) auto;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s;
}
.text-row:hover { border-color: var(--border-bright); }
.text-row h3 {
  font-family: var(--font-display);
  font-weight: 600; font-size: 15px; margin: 0;
  letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.text-row .folder-inline {
  font-size: 11px;
  color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 5px;
  letter-spacing: 0.04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.text-row .mastery-inline {
  display: flex; align-items: center; gap: 10px;
}
.text-row .mastery-inline .pct {
  font-size: 12px; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  min-width: 36px; text-align: right;
}
.text-row .actions-inline {
  display: flex; gap: 8px; align-items: center;
}

/* ---------- FAB ---------- */
.fab {
  position: fixed;
  bottom: calc(24px + var(--safe-bottom));
  right: 24px;
  background: var(--accent);
  color: #2b1a05;
  border: 1px solid rgba(0,0,0,0.2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 14px 22px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(212,146,42,0.35), 0 1px 0 rgba(255,255,255,0.15) inset;
  z-index: 50;
  transition: background 0.15s, transform 0.15s;
}
.fab:hover { background: var(--accent-bright); }
.fab:active { transform: translateY(1px); }

/* ---------- Empty state ---------- */
.empty-state-wrap {
  padding: 80px 40px;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.empty-state-wrap .ic {
  font-size: 64px;
  color: var(--text-placeholder);
  opacity: 0.45;
  margin-bottom: 20px;
}
.empty-state-wrap h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 10px;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.empty-state-wrap p {
  color: var(--text-secondary);
  margin: 0 0 22px;
  line-height: 1.6;
}

/* ---------- Mobile filter row / bottom nav ---------- */
.mobile-top-brand {
  display: none;
}
.filter-row {
  padding: 10px 16px 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.mobile-search-wrap {
  padding: 6px 16px 12px;
  position: relative;
}
.mobile-search-wrap .input {
  background: var(--bg-surface);
  padding-left: 34px;
  font-size: 13px;
}
.mobile-search-wrap svg {
  position: absolute;
  left: 27px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
}
.bottom-nav {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  padding: 6px 0 calc(10px + var(--safe-bottom));
  flex-shrink: 0;
}
.bottom-nav .item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--text-placeholder);
  font-size: 10px;
  padding: 4px 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.bottom-nav .item .ic { font-size: 18px; line-height: 1; }
.bottom-nav .item.active { color: var(--accent-bright); }
.bottom-nav .item.fab-item .ic {
  background: var(--accent);
  color: #2b1a05;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-top: -10px;
  box-shadow: 0 4px 12px rgba(212,146,42,0.4);
}

/* ---------- Session detail ---------- */
.detail-screen {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-base);
}
.detail {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 32px 80px;
}
.detail .back {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.detail .back:hover { color: var(--text-primary); }
.detail h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  margin: 0 0 14px;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  line-height: 1.1;
  display: flex; align-items: flex-end; gap: 12px;
  flex-wrap: wrap;
}
.detail h1 .title-text {
  outline: none;
  padding: 0 2px;
  border-radius: 4px;
}
.detail h1 .title-text:focus { background: rgba(212,146,42,0.08); box-shadow: 0 0 0 2px rgba(212,146,42,0.3); }
.detail h1 .pencil {
  font-size: 15px;
  color: var(--text-placeholder);
  opacity: 0.55;
  font-style: normal;
}
.detail .meta-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center;
  margin-bottom: 24px;
}
.detail .folder-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.detail .folder-pill:hover { border-color: var(--border-bright); }
.detail .folder-pill .dot { width: 8px; height: 8px; border-radius: 2px; }
.detail .star-pill {
  color: var(--accent);
  font-size: 16px;
  cursor: pointer;
  margin-left: 4px;
  background: transparent;
  border: 0;
  padding: 2px 4px;
}
.detail .star-pill.off { color: var(--text-placeholder); }

.detail .stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 22px;
}
.detail .stat { text-align: center; }
.detail .stat .n {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.detail .stat .n.amber { color: var(--accent-bright); }
.detail .stat .l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-top: 6px;
}

.detail .actions { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.detail .actions .btn { flex: 1; min-width: 180px; }

.detail .section-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-placeholder);
  margin: 28px 0 12px;
}

.chunk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
}
.chunk-tile {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.15s;
}
.chunk-tile:hover { transform: translateY(-2px); border-color: var(--border-bright); }
.chunk-tile.mastered {
  background: rgba(58,125,68,0.22);
  border-color: rgba(76,175,96,0.4);
  color: var(--green-bright);
}
.chunk-tile.progress-amber {
  background: rgba(212,146,42,0.2);
  border-color: rgba(212,146,42,0.5);
  color: var(--accent-bright);
}
.chunk-tile.progress-orange {
  background: rgba(200,122,42,0.15);
  border-color: rgba(200,122,42,0.4);
  color: #e19a5a;
}
.chunk-tile.empty { opacity: 0.55; }
.chunk-tile .due-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 8px rgba(74,138,191,0.7);
}

.danger-zone {
  margin-top: 40px;
  border: 1px solid rgba(201,74,74,0.25);
  border-radius: var(--radius-md);
  padding: 18px;
  background: rgba(139,58,58,0.05);
}
.danger-zone h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--red-bright);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.danger-zone p {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 12px;
}
.danger-zone .row { display: flex; gap: 10px; flex-wrap: wrap; }

/* Tag autocomplete */
.tag-autocomplete {
  position: relative;
}
.tag-autocomplete input {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-primary);
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font-body);
  border-radius: 999px;
  outline: none;
  min-width: 80px;
}
.tag-autocomplete input:focus { border-color: var(--accent); border-style: solid; }
.tag-autocomplete .suggestions {
  position: absolute;
  top: 100%; left: 0;
  margin-top: 4px;
  background: var(--bg-raised-2);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  padding: 4px;
  z-index: 100;
  min-width: 160px;
  max-height: 180px;
  overflow-y: auto;
}
.tag-autocomplete .suggestions .item {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 4px;
}
.tag-autocomplete .suggestions .item:hover,
.tag-autocomplete .suggestions .item.active { background: var(--bg-raised); }

/* ---------- New Text screen ---------- */
.new-text-screen {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-base);
}
.new-text {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 32px 80px;
  display: flex; flex-direction: column;
  gap: 16px;
}
.new-text .top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.new-text .top .back {
  color: var(--text-secondary); font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0;
}
.new-text .top h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  margin: 0;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.new-text .title-input {
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  width: 100%;
  outline: none;
}
.new-text .title-input::placeholder { color: var(--text-placeholder); font-weight: 400; }
.new-text .title-input:focus { border-bottom-color: var(--accent); }
.new-text .meta-ctrls {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.new-text .tags-wrap { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.new-text .textarea {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.7;
  min-height: 260px;
  resize: vertical;
  outline: none;
}
.new-text .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212,146,42,0.15); }
.new-text .chunk-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-placeholder);
}
.new-text .preview-text {
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
  padding: 6px 0;
}
.new-text .preview-text b { color: var(--text-primary); font-weight: 600; }
.duplicate-banner {
  background: rgba(74,138,191,0.1);
  border: 1px solid rgba(74,138,191,0.4);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.duplicate-banner .msg {
  color: var(--text-primary);
  font-size: 13px;
  flex: 1 1 260px;
}
.duplicate-banner .msg b { color: var(--blue-bright); }
.duplicate-banner .actions { display: flex; gap: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .sidebar { display: none; }
  .mobile-top-brand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: calc(10px + var(--safe-top)) 16px 0;
    background: var(--bg-base);
  }
  .mobile-top-brand .logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.035em;
    color: var(--text-primary);
  }
  .mobile-top-brand .streak {
    font-size: 12px; color: var(--accent);
  }
  .topbar {
    padding: 10px 16px 10px;
    gap: 8px;
  }
  .topbar h2 { font-size: 22px; }
  .topbar .search { flex: 1 1 100%; margin-left: 0; margin-top: 4px; }
  .topbar .view-toggle, .topbar .sort { display: none; }
  .library-grid { padding: 12px 16px 120px; gap: 14px; grid-template-columns: 1fr; }
  .library-list { padding: 8px 16px 120px; }
  .bottom-nav { display: flex; }
  .fab { display: none; }
  .detail { padding: 14px 18px 120px; }
  .detail h1 { font-size: 28px; }
  .detail .stats { grid-template-columns: repeat(2, 1fr); }
  .new-text { padding: 14px 18px 120px; }
  .new-text .top h2 { font-size: 20px; }
  .new-text .title-input { font-size: 22px; }
  .chunk-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
}

@media (max-width: 480px) {
  .detail .actions .btn { min-width: 0; }
  .detail .stats { padding: 12px; }
  .detail .stat .n { font-size: 20px; }
}

/* =========================================================
   Unified App Chrome (used by sessionDetail, newText, and
   optionally workspace). Mirrors the library sidebar but
   scoped to .app-chrome / .app-sidebar class names so the
   library's own shell continues to work unchanged.
   ========================================================= */
.app-chrome {
  display: flex;
  flex: 1;
  min-height: 100vh;
  background: var(--bg-base);
  position: relative;
}
.chrome-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  overflow: hidden;
}

/* ----- Sidebar ----- */
.app-sidebar {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  padding: 20px 0 0;
  overflow-y: auto;
}
.app-sidebar-brand {
  padding: 0 20px 22px;
  cursor: pointer;
  user-select: none;
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  cursor: pointer;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(212,146,42,0.28);
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  white-space: nowrap;
}

.app-sidebar-nav {
  padding: 4px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  text-align: left;
  width: 100%;
  transition: background 0.12s, color 0.12s;
}
.app-nav-item:hover { background: var(--bg-raised); color: var(--text-primary); }
.app-nav-item.active {
  background: var(--accent-subtle);
  color: var(--accent-bright);
  border-left-color: var(--accent);
  padding-left: 10px;
}
.app-nav-item .ic { font-size: 15px; line-height: 1; width: 18px; text-align: center; }
.app-nav-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-nav-item .badge {
  margin-left: auto;
  background: var(--accent);
  color: #2b1a05;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}
.app-nav-item .folder-dot {
  width: 9px; height: 9px; border-radius: 2px;
  flex-shrink: 0;
}

.app-sidebar-section {
  padding: 18px 22px 6px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-placeholder);
  font-weight: 500;
}
.app-sidebar-folders {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-sidebar-foot {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 12px;
}
.app-user {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-primary);
  font-family: var(--font-body);
}
.app-user:hover { background: var(--bg-raised); }
.app-user .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #3a4656, #1e2530);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.app-user .avatar img { width: 100%; height: 100%; object-fit: cover; }
.app-user .meta { font-size: 12px; line-height: 1.3; min-width: 0; flex: 1; }
.app-user .meta .name {
  color: var(--text-primary); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block;
}

/* ----- Mobile top bar ----- */
.app-topbar-mobile {
  display: none;
  align-items: center;
  gap: 10px;
  padding: calc(10px + var(--safe-top)) 14px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.app-topbar-mobile .brand-slot {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.app-topbar-mobile .brand-slot .brand-lockup { gap: 8px; }
.app-topbar-mobile .page-title {
  flex: 1;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-topbar-mobile .page-title-spacer { flex: 1; }
.iconbtn {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.iconbtn:hover { border-color: var(--border-bright); }
.iconbtn.menu-btn { background: transparent; border-color: transparent; }

/* ----- Responsive: collapse sidebar into slide-over ----- */
@media (max-width: 860px) {
  .app-topbar-mobile { display: flex; }
  .app-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 12px 0 32px rgba(0,0,0,0.3);
  }
  body.chrome-menu-open .app-sidebar {
    transform: translateX(0);
  }
  body.chrome-menu-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 40;
  }
  .app-chrome { min-height: 100vh; }
  .chrome-main { overflow: visible; }
}