/* static/app.css
   前台会员区（/app/**）样式：轻量、干净、写作软件感
   依赖：bootstrap.min.css
*/

/* ========== Tokens ========== */
:root{
  --app-bg: #f7f8fb;
  --app-card: rgba(255,255,255,.86);
  --app-border: rgba(0,0,0,.08);
  --app-muted: rgba(0,0,0,.55);
  --app-text: rgba(0,0,0,.88);
  --app-shadow: 0 14px 34px rgba(0,0,0,.06);
  --app-shadow-soft: 0 10px 24px rgba(0,0,0,.045);
  --app-radius: 18px;
  --app-radius-lg: 22px;

  --app-primary: #0d6efd;
  --app-success: #198754;
  --app-warning: #ffc107;
  --app-danger: #dc3545;

  --app-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --app-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

/* ========== Base ========== */
html, body { min-height: 100%; }
body {
  font-family: var(--app-sans);
  color: var(--app-text);
  background-color: var(--app-bg);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 220px),
    radial-gradient(900px 360px at 12% 0%, rgba(13,110,253,.06), transparent 70%),
    radial-gradient(760px 320px at 88% 0%, rgba(25,135,84,.05), transparent 72%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 220px, 900px 360px, 760px 320px;
  background-position: top center, top left, top right;
}

a { text-decoration: none; }
a:hover { text-decoration: none; }

.mono { font-family: var(--app-mono); }
.text-muted-2 { color: var(--app-muted) !important; }

.container-app {
  max-width: 1200px;
  padding-left: 18px;
  padding-right: 18px;
}

/* ========== Topbar ========== */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  backdrop-filter: blur(10px);
  background: rgba(247,248,251,.72);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.app-topbar .brand {
  display:flex;
  align-items:center;
  gap: 10px;
}

.app-topbar .brand-badge{
  width: 34px; height: 34px;
  border-radius: 12px;
  background: rgba(13,110,253,.12);
  border: 1px solid rgba(13,110,253,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 18px rgba(13,110,253,.08);
  font-weight: 800;
  color: rgba(13,110,253,.95);
}

.app-topbar .brand-title{
  font-weight: 800;
  letter-spacing: .2px;
}

.app-topbar .top-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.app-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.app-brand:hover{
  opacity: .96;
}

.app-brand-mark{
  width: 36px;
  height: 36px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #111827 0%, #2563eb 100%);
  box-shadow: 0 12px 24px rgba(37,99,235,.16);
}

.app-brand-text{
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.app-brand-title{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #0f172a;
}

.app-brand-sub{
  margin-top: 3px;
  font-size: 11px;
  color: rgba(15,23,42,.48);
  font-weight: 600;
}

@media (max-width: 575px){
  .app-brand-sub{
    display: none;
  }

  .app-brand-title{
    font-size: 14px;
  }
}

/* ========== Layout ========== */
.app-layout {
  display: flex;
  gap: 14px;
  padding-top: 14px;
  padding-bottom: 22px;
}

.app-sidebar {
  width: 260px;
  flex: 0 0 auto;
  position: sticky;
  top: 77px;
  align-self: flex-start;
  max-height: calc(100vh - 92px);
  overflow: auto;
  border-radius: var(--app-radius-lg);
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--app-shadow-soft);
}

.app-main {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 992px) {
  .app-layout { flex-direction: column; }
  .app-sidebar { width: 100%; position: relative; top: auto; max-height: none; }
}

/* ========== Sidebar ========== */
.app-sidebar .sb-head{
  padding: 14px 14px 8px 14px;
}

.sb-book-title{
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
}

.sb-sub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--app-muted);
}

.sb-nav{
  padding: 10px;
}

.sb-section{
  margin-top: 6px;
  margin-bottom: 6px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.42);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.sb-link{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(0,0,0,.78);
  border: 1px solid transparent;
  background: transparent;
}

.sb-link:hover{
  background: rgba(13,110,253,.06);
  border-color: rgba(13,110,253,.10);
}

.sb-link.active{
  background: rgba(13,110,253,.10);
  border-color: rgba(13,110,253,.14);
  color: rgba(13,110,253,.95);
  box-shadow: 0 12px 22px rgba(13,110,253,.10);
}

.sb-pill{
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
  color: rgba(0,0,0,.62);
}

.sb-cta{
  padding: 10px 14px 14px 14px;
}

.sb-cta .btn{
  border-radius: 14px;
}

.sb-cta .btn-primary{
  box-shadow: 0 12px 22px rgba(13,110,253,.16);
}

/* ========== Card helpers ========== */
.card-app{
  border-radius: var(--app-radius);
  background: var(--app-card);
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow);
}

.card-app .card-title{
  font-weight: 800;
  letter-spacing: .2px;
}

.card-subtitle{
  color: var(--app-muted);
  font-size: 13px;
}

.hr-soft{
  border-top: 1px solid rgba(0,0,0,.06);
}

/* ========== Forms ========== */
.form-control, .form-select{
  border-radius: 14px;
  border-color: rgba(0,0,0,.12);
}

.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.12);
  border-color: rgba(13,110,253,.40);
}

.textarea-soft{
  min-height: 220px;
  border-radius: 18px;
}

.textarea-code{
  font-family: var(--app-mono);
  min-height: 260px;
  border-radius: 18px;
}

/* ========== Buttons ========== */
.btn{
  border-radius: 14px;
}

.btn-primary{
  box-shadow: 0 12px 22px rgba(13,110,253,.16);
}

.btn-outline-secondary{
  border-color: rgba(0,0,0,.14);
}

/* ========== Book cards (bookshelf) ========== */
.book-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1200px) { .book-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .book-grid{ grid-template-columns: 1fr; } }

.book-card{
  border-radius: 20px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: var(--app-shadow-soft);
  padding: 14px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.book-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0,0,0,.08);
  border-color: rgba(13,110,253,.14);
}

.book-title{
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 4px;
}

.book-meta{
  font-size: 12px;
  color: var(--app-muted);
}

.book-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.progress-mini{
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  overflow: hidden;
  margin-top: 10px;
}

.progress-mini > span{
  display:block;
  height: 100%;
  width: 0%;
  background: rgba(13,110,253,.75);
}

/* ========== Workspace ========== */
.ws-header{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ws-kpis{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ws-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  font-size: 13px;
}

.ws-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(13,110,253,.55);
  box-shadow: 0 8px 18px rgba(13,110,253,.18);
}

.ws-dot.ok{ background: rgba(25,135,84,.65); box-shadow: 0 8px 18px rgba(25,135,84,.18); }
.ws-dot.warn{ background: rgba(255,193,7,.75); box-shadow: 0 8px 18px rgba(255,193,7,.18); }
.ws-dot.bad{ background: rgba(220,53,69,.65); box-shadow: 0 8px 18px rgba(220,53,69,.18); }

/* Workspace toolbar (sticky) */
.ws-toolbar{
  position: sticky;
  top: 86px;
  z-index: 1010;
}
.ws-toolbar .step-card{
  backdrop-filter: blur(10px);
}

/* Workspace tabs (nav-pills) */
.ws-tabs .nav-link{
  border-radius: 14px;
  font-weight: 800;
}
.ws-tabs .nav-link.active{
  box-shadow: 0 12px 22px rgba(13,110,253,.14);
}

.step-card{
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.07);
  background: rgba(255,255,255,.84);
  box-shadow: var(--app-shadow-soft);
}

.step-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.step-title{
  font-weight: 900;
  letter-spacing: .2px;
}

.step-sub{
  color: var(--app-muted);
  font-size: 13px;
}

.chapter-row{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  padding: 12px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.chapter-row:hover{
  border-color: rgba(13,110,253,.16);
  box-shadow: 0 14px 28px rgba(0,0,0,.06);
}

.chapter-row + .chapter-row{ margin-top: 10px; }

.chapter-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.chapter-name{
  font-weight: 800;
  line-height: 1.25;
}

.chapter-one{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(0,0,0,.68);
}

.chapter-actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Chapter collapse body (outline edit area) */
.chapter-body{
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* ---- Workspace outline editor (textarea) ---- */
/* 仅影响“编辑大纲”展开区里的 textarea（不影响其它页面 textarea） */
.chapter-body textarea.form-control{
  border-radius: 14px;                 /* 跟输入框统一 */
  padding: 10px 12px;                  /* 写作更舒服 */
  line-height: 1.65;                   /* 更耐看，不累眼 */
  resize: vertical;                    /* 只允许上下拉伸 */
  min-height: 128px;                   /* 默认显示更多内容（更像写作框） */
  white-space: pre-wrap;               /* 符合写作习惯 */
  background: rgba(255,255,255,.92);   /* 更柔和一点 */
}

/* focus 手感与现有 form-control 保持一致（更柔和不刺眼） */
.chapter-body textarea.form-control:focus{
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.12);
  border-color: rgba(13,110,253,.40);
  background: rgba(255,255,255,.98);
}

/* 大屏时：两列（章节大纲/章节进度点）高度一致 + label 不压缩 */
@media (min-width: 992px){
  .chapter-body .row.g-2 > [class*="col-lg-"]{
    display: flex;
    flex-direction: column;
  }
  .chapter-body .row.g-2 > [class*="col-lg-"] > label{
    flex: 0 0 auto;
  }
  .chapter-body .row.g-2 > [class*="col-lg-"] > textarea.form-control{
    flex: 1 1 auto;                    /* 让 textarea 撑满同一行高度 */
  }
}

.badge-soft{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
  font-size: 12px;
  color: rgba(0,0,0,.70);
}

.badge-soft strong{ font-weight: 800; }

/* Progress point badge（更柔和：不抢眼、不疲劳） */
.badge-progress{
  background: rgba(0,0,0,.02);       /* 比原来更浅一点，和正文预览更容易区分 */
  border-color: rgba(0,0,0,.045);    /* 边框也同步变淡 */
  color: rgba(0,0,0,.70);            /* 字色保持不变，保证可读性 */
}

/* ✅ 仅进度点：圆角小一点（不影响其它 badge-soft） */
.badge-soft.badge-progress{
  border-radius: 8px; /* 你也可以改成 10px / 14px 看效果 */
}

.state-badge{
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}

.state-idle{ background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.06); color: rgba(0,0,0,.62); }
.state-queued{ background: rgba(13,110,253,.10); border: 1px solid rgba(13,110,253,.14); color: rgba(13,110,253,.95); }
.state-generating{ background: rgba(255,193,7,.18); border: 1px solid rgba(255,193,7,.30); color: rgba(140,96,0,.95); }
.state-done{ background: rgba(25,135,84,.12); border: 1px solid rgba(25,135,84,.20); color: rgba(25,135,84,.95); }
.state-failed{ background: rgba(220,53,69,.12); border: 1px solid rgba(220,53,69,.20); color: rgba(220,53,69,.95); }

.kbd{
  font-family: var(--app-mono);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.7);
  font-size: 12px;
}

/* ========== Upgrade hint ========== */
.upgrade-banner{
  border-radius: 22px;
  border: 1px solid rgba(255,193,7,.28);
  background: rgba(255,193,7,.10);
  box-shadow: 0 12px 22px rgba(255,193,7,.10);
  padding: 14px;
}

.upgrade-banner .title{
  font-weight: 900;
}

.upgrade-banner .desc{
  font-size: 13px;
  color: rgba(0,0,0,.70);
  margin-top: 4px;
}

/* ========== Small utilities ========== */
.truncate-1{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.truncate-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shadow-soft{
  box-shadow: var(--app-shadow-soft);
}

/* =========================
   Compatibility layer
   For templates/app/workspace.html + templates/app/base.html
   Add this block to the END of static/app.css (after .shadow-soft{})
   ========================= */

/* ---- Workspace two-column layout (ws-wrap/panel...) ---- */
.ws-wrap{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
}
@media (max-width: 992px){
  .ws-wrap{ grid-template-columns: 1fr; }
}

/* Panel container used by workspace.html */
.panel{
  border-radius: var(--app-radius-lg);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: var(--app-shadow-soft);
  overflow: hidden;
}

/* Left sidebar head in workspace */
.side-head{
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background:
    linear-gradient(180deg, rgba(13,110,253,.06), rgba(255,255,255,0));
}

/* Right content head in workspace */
.main-head{
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background:
    linear-gradient(180deg, rgba(13,110,253,.04), rgba(255,255,255,0));
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Right content padding wrapper */
.section-pad{
  padding: 14px 16px 16px;
}

/* Workspace left book title */
.book-name{
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.15;
  font-size: 18px;
}

/* Small muted text used in workspace.html */
.muted-13{
  font-size: 13px;
  color: var(--app-muted);
}

/* Pills used in workspace.html (stats) */
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  font-size: 13px;
}

/* Dots used inside pills */
.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(13,110,253,.55);
  box-shadow: 0 8px 18px rgba(13,110,253,.16);
}
.dot.ok{
  background: rgba(25,135,84,.65);
  box-shadow: 0 8px 18px rgba(25,135,84,.18);
}
.dot.warn{
  background: rgba(255,193,7,.75);
  box-shadow: 0 8px 18px rgba(255,193,7,.18);
}
.dot.bad{
  background: rgba(220,53,69,.65);
  box-shadow: 0 8px 18px rgba(220,53,69,.18);
}

/* ---- Workspace nav buttons (navbtn/nav-ico/nav-title) ---- */
.navbtn{
  width: 100%;
  text-align: left;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.74);
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(0,0,0,.82);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.navbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(13,110,253,.22);
  box-shadow: 0 14px 28px rgba(0,0,0,.06);
  background: rgba(255,255,255,.86);
}
.navbtn.active{
  border-color: rgba(13,110,253,.32);
  box-shadow: 0 16px 34px rgba(13,110,253,.10);
  background: rgba(13,110,253,.08);
}
.navbtn .left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.nav-ico{
  width: 28px;
  height: 28px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(13,110,253,.10);
  border: 1px solid rgba(13,110,253,.12);
  flex: 0 0 auto;
}
.nav-title{
  font-weight: 900;
  letter-spacing: .2px;
}
.navbtn .muted-13{
  margin-top: 2px;
  line-height: 1.2;
}

/* ---- Base sidebar items (app-nav/app-dot/app-sidebar-card) ---- */
.app-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(13,110,253,.55);
  box-shadow: 0 8px 18px rgba(13,110,253,.16);
  display:inline-block;
}

.app-sidebar-group{ min-width: 0; }

.app-sidebar-card{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.72);
  box-shadow: var(--app-shadow-soft);
  padding: 12px;
}

.app-nav{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(0,0,0,.78);
  border: 1px solid transparent;
  background: transparent;
}
.app-nav:hover{
  background: rgba(13,110,253,.06);
  border-color: rgba(13,110,253,.10);
  color: rgba(0,0,0,.85);
}
.app-nav.active{
  background: rgba(13,110,253,.10);
  border-color: rgba(13,110,253,.14);
  color: rgba(13,110,253,.95);
  box-shadow: 0 12px 22px rgba(13,110,253,.10);
}

/* ---- Make workspace toolbar sticky feel consistent even without extra wrappers ---- */
#wsList > .step-card[style*="position: sticky"]{
  backdrop-filter: blur(10px);
}

/* ---- Improve buttons on very narrow screens ---- */
@media (max-width: 420px){
  .navbtn{ padding: 10px; }
  .main-head{ padding: 14px 14px 10px; }
  .section-pad{ padding: 12px 12px 14px; }
}


/* ---- Workspace recent tasks (任务进度卡片内的最近任务) ---- */
.task-feed{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.task-item{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.72));
  box-shadow: 0 8px 22px rgba(0,0,0,.035);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.task-item:hover{
  transform: translateY(-1px);
  border-color: rgba(13,110,253,.16);
  box-shadow: 0 14px 28px rgba(0,0,0,.06);
}

.task-main{
  min-width: 0;
  flex: 1 1 auto;
}

.task-time{
  font-size: 12px;
  color: rgba(0,0,0,.48);
  line-height: 1.4;
}

.task-text{
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(0,0,0,.84);
  word-break: break-word;
}

.task-text .mono{
  font-size: 13px;
}

.task-side{
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.task-empty{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px dashed rgba(0,0,0,.10);
  background: rgba(255,255,255,.50);
  color: rgba(0,0,0,.56);
  font-size: 13px;
  line-height: 1.7;
}

/* 任务卡片里的状态 badge：稍微更精致一点 */
.task-item .state-badge{
  min-width: 72px;
  text-align: center;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 5px 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

/* 手机端：任务项上下排，更自然 */
@media (max-width: 768px){
  .task-item{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .task-side{
    justify-content: flex-start;
  }

  .task-item .state-badge{
    min-width: 0;
  }
}