/* handwrite.css — 手工创作模块样式（自 app.css / ui-taste-v3.css 提取） */
/* ====== 手工创作模块 · 富文本编辑器 ====== */
    .create-genre-thumb-wrap--handwrite{
      background: linear-gradient(135deg, rgba(91,140,255,0.18), rgba(46,230,201,0.18));
    }
    .create-genre-emoji-thumb{
      width: 54px;
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      line-height: 1;
    }
    body.create-handwrite-pane .create-page-body{
      padding: 0;
      overflow: hidden;
    }
    body.create-handwrite-pane #createModule{
      height: 100%;
      overflow: hidden;
    }
    .hw-root{
      display: flex;
      flex-direction: column;
      /* 真实高度由 JS 主动按 visualViewport.height 设置（在 handwrite/07-viewport.js bindViewportSizing 里）；
         以兼容 MIUI/EMUI/旧 WebView 中 100dvh 与键盘事件不同步的问题。
         这里给一个 100% 兜底，避免 JS 还没设上时元素是 0 高。
         overflow: hidden 关键：JS 算出来的 vv 高度可能略大于父容器高，
         hw-root 自身可能被外层滚动，导致 title-row / toolbar 滚走消失（#3 bug 根因）。 */
      height: 100%;
      overflow: hidden;
      background: #0c1322;
    }
    body.theme-light .hw-root{ background: #ffffff; }
    .hw-title-row{
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      flex-shrink: 0; /* 永远不被压缩；与 hw-toolbar 一起常驻顶部不滚动 */
    }
    body.theme-light .hw-title-row{ border-bottom-color: rgba(15,23,42,0.06); }
    .hw-iconbtn{
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.05);
      border: 0;
      color: #9aa3b2;
    }
    .hw-iconbtn:active{ background: rgba(46,230,201,0.15); color: #2EE6C9; }
    body.theme-light .hw-iconbtn{ background: rgba(15,23,42,0.05); color: #475569; }
    body.theme-light .hw-iconbtn:active{ background: rgba(46,230,201,0.12); color: #0f5e54; }
    .hw-title-input{
      flex: 1;
      min-width: 0;
      background: transparent;
      border: 0;
      outline: 0;
      color: #E8ECF2;
      font-size: 17px;
      font-weight: 600;
      padding: 6px 4px;
    }
    .hw-title-input::placeholder{ color: #475569; font-weight: 400; }
    body.theme-light .hw-title-input{ color: #0f172a; }
    body.theme-light .hw-title-input::placeholder{ color: #94a3b8; }
    .hw-char-count{
      font-size: 11px;
      color: #6b7280;
      flex-shrink: 0;
      min-width: 36px;
      text-align: right;
    }
    .hw-save-badge{
      font-size: 11px;
      color: #6b7280;
      flex-shrink: 0;
      min-width: 48px;
      text-align: right;
    }
    .hw-toolbar{
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 8px 12px;
      overflow-x: auto;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      flex-shrink: 0;
      flex-wrap: nowrap;
    }
    body.theme-light .hw-toolbar{ border-bottom-color: rgba(15,23,42,0.06); }
    .hw-tb-btn{
      flex-shrink: 0;
      min-width: 32px;
      height: 32px;
      padding: 0 8px;
      border-radius: 8px;
      background: rgba(255,255,255,0.05);
      border: 0;
      color: #E8ECF2;
      font-size: 13px;
      font-weight: 500;
      transition: background 0.15s ease, transform 0.1s ease;
      white-space: nowrap;
    }
    .hw-tb-btn:active{ transform: scale(0.94); background: rgba(46,230,201,0.18); }
    .hw-tb-btn b, .hw-tb-btn i, .hw-tb-btn u{ font-style: italic; }
    .hw-tb-btn b{ font-weight: 700; font-style: normal; }
    .hw-tb-btn u{ font-style: normal; }
    body.theme-light .hw-tb-btn{ background: rgba(15,23,42,0.05); color: #0f172a; }
    body.theme-light .hw-tb-btn:active{ background: rgba(46,230,201,0.15); }
    .hw-tb-sep{
      width: 1px;
      height: 18px;
      background: rgba(255,255,255,0.1);
      margin: 0 4px;
      flex-shrink: 0;
    }
    body.theme-light .hw-tb-sep{ background: rgba(15,23,42,0.1); }
    .hw-tb-spacer{ flex: 1; min-width: 8px; }
    .hw-tb-polish{
      background: linear-gradient(135deg, rgba(46,230,201,0.22), rgba(91,140,255,0.22)) !important;
      color: #2EE6C9 !important;
      font-weight: 600;
    }
    body.theme-light .hw-tb-polish{
      background: linear-gradient(135deg, rgba(46,230,201,0.16), rgba(91,140,255,0.16)) !important;
      color: #0f5e54 !important;
    }
    .hw-tb-polish.hw-loading,
    .hw-polish-fly.hw-loading{
      opacity: 0.55;
      pointer-events: none;
    }
    .hw-tb-export{
      background: linear-gradient(135deg, #2EE6C9, #5B8CFF) !important;
      color: #07111f !important;
      font-weight: 600;
    }
    .hw-tb-clear{ color: #FF7A7A; }
    .hw-scroll-area{
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 18px 18px max(40px, env(safe-area-inset-bottom, 0));
    }
    .hw-editor{
      min-height: 100%;
      outline: 0;
      color: #E8ECF2;
      font-size: 15px;
      line-height: 1.8;
      font-family: 'Noto Serif SC', 'Source Han Serif SC', serif;
      caret-color: #2EE6C9;
    /* 编辑器自身允许选中（外层创作页禁选规则被 contenteditable 兜底但保留例外） */
      -webkit-user-select: text !important;
      user-select: text !important;
      -webkit-touch-callout: default !important;
    }
    body.theme-light .hw-editor{ color: #0f172a; }
    .hw-editor:empty::before{
      content: '浠庤繖閲屽紑濮嬩功鍐欌€︹€?;
      color: #475569;
      pointer-events: none;
      font-style: italic;
    }
    body.theme-light .hw-editor:empty::before{ color: #94a3b8; }
    .hw-editor h1{ font-size: 22px; font-weight: 700; margin: 16px 0 12px; }
    .hw-editor h2{ font-size: 18px; font-weight: 600; margin: 12px 0 8px; }
    .hw-editor p{ margin: 0 0 10px; }
    .hw-editor blockquote{
      margin: 10px 0;
      padding: 8px 14px;
      border-left: 3px solid rgba(46,230,201,0.5);
      color: #9aa3b2;
      background: rgba(255,255,255,0.02);
      border-radius: 0 8px 8px 0;
    }
    body.theme-light .hw-editor blockquote{
      color: #475569;
      background: rgba(46,230,201,0.04);
    }
    .hw-editor ul, .hw-editor ol{ padding-left: 26px; margin: 8px 0; }
    .hw-editor li{ margin-bottom: 4px; }
    /* 浮动 AI 润色按钮（选中文字时定位到选区上方） */
    .hw-polish-fly{
      position: absolute;
      transform: translate(-50%, 0);
      z-index: 60;
      padding: 7px 14px;
      border-radius: 999px;
      background: #0c1322;
      border: 1px solid rgba(46,230,201,0.45);
      color: #2EE6C9;
      font-size: 12.5px;
      font-weight: 600;
      display: none;
      align-items: center;
      gap: 6px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    }
    .hw-polish-fly.show{ display: inline-flex; }
    .hw-polish-fly:active{ transform: translate(-50%, 0) scale(0.95); }
    body.theme-light .hw-polish-fly{
      background: #ffffff;
      color: #0f5e54;
      border-color: rgba(46,230,201,0.55);
      box-shadow: 0 6px 16px rgba(15,23,42,0.18);
    }
    .hw-fly-icon{ font-size: 13px; }

    /* ====== 手工创作 · 文稿历史抽屉 ====== */
    .hw-drawer-host{
      position: absolute;
      inset: 0;
      z-index: 60;
      pointer-events: none;
    }
    .hw-drawer-host.open{ pointer-events: auto; }
    .hw-drawer-bd{
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.45);
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    .hw-drawer-host.open .hw-drawer-bd{ opacity: 1; }
    .hw-drawer-panel{
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: min(86%, 320px);
      background: #0c1322;
      box-shadow: 2px 0 18px rgba(0,0,0,0.45);
      transform: translateX(-100%);
      transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
      display: flex;
      flex-direction: column;
    }
    body.theme-light .hw-drawer-panel{
      background: #ffffff;
      box-shadow: 2px 0 18px rgba(15,23,42,0.14);
    }
    .hw-drawer-host.open .hw-drawer-panel{ transform: translateX(0); }
    .hw-drawer-head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: max(env(safe-area-inset-top, 0px), 14px) 14px 10px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    body.theme-light .hw-drawer-head{ border-bottom-color: rgba(15,23,42,0.06); }
    .hw-drawer-title{
      flex: 1;
      text-align: center;
      font-size: 15px;
      font-weight: 600;
      color: #E8ECF2;
    }
    body.theme-light .hw-drawer-title{ color: #0f172a; }
    .hw-drawer-list{
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      /* 顶部 padding 加大，避免第一条文档（尤其带「当前」标签的那条）紧贴 head 底边被视觉遮挡 */
      padding: 16px 10px max(20px, env(safe-area-inset-bottom, 0));
    }
    .hw-doc-empty{
      padding: 32px 12px;
      text-align: center;
      color: #6b7280;
      font-size: 13px;
    }
    body.theme-light .hw-doc-empty{ color: #94a3b8; }
    .hw-doc-row{
      display: flex;
      align-items: stretch;
      gap: 6px;
      padding: 10px 8px 10px 12px;
      border-radius: 10px;
      margin-bottom: 6px;
      background: transparent;
      transition: background 0.15s ease;
      cursor: pointer;
    }
    .hw-doc-row:active{ background: rgba(255,255,255,0.05); }
    .hw-doc-row--cur{
      background: rgba(46,230,201,0.10);
      box-shadow: inset 3px 0 0 #2EE6C9;
    }
    body.theme-light .hw-doc-row--cur{
      background: rgba(46,230,201,0.10);
      box-shadow: inset 3px 0 0 #0f5e54;
    }
    .hw-doc-main{
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .hw-doc-title{
      font-size: 14px;
      font-weight: 600;
      color: #E8ECF2;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    body.theme-light .hw-doc-title{ color: #0f172a; }
    .hw-doc-cur-tag{
      font-size: 10px;
      color: #2EE6C9;
      background: rgba(46,230,201,0.16);
      padding: 1px 6px;
      border-radius: 4px;
      flex-shrink: 0;
      font-weight: 500;
    }
    body.theme-light .hw-doc-cur-tag{ color: #0f5e54; background: rgba(46,230,201,0.14); }
    .hw-doc-snip{
      font-size: 11.5px;
      color: #9aa3b2;
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    body.theme-light .hw-doc-snip{ color: #64748b; }
    .hw-doc-meta{
      font-size: 10.5px;
      color: #6b7280;
    }
    body.theme-light .hw-doc-meta{ color: #94a3b8; }
    .hw-doc-del{
      flex-shrink: 0;
      width: 32px;
      align-self: center;
      height: 32px;
      border-radius: 999px;
      border: 0;
      background: transparent;
      color: #6b7280;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hw-doc-del:active{ background: rgba(255,80,80,0.12); color: #FF7A7A; }

/* ===== AI润色 Diff 预览面板 ===== */
    .hw-polish-overlay {
      position: absolute;
      inset: 0;
      z-index: 200;
      display: flex;
      flex-direction: column;
      background: var(--bg, #0A0E18);
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .hw-polish-overlay-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px 8px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .hw-polish-overlay-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text1, #E8ECF2);
      flex: 1;
    }
    .hw-polish-overlay-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .hw-diff-label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .hw-diff-label--old { color: #F56565; }
    .hw-diff-label--new { color: #48BB78; }
    .hw-diff-box {
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 13px;
      line-height: 1.7;
      white-space: pre-wrap;
      word-break: break-all;
    }
    .hw-diff-box--old {
      background: rgba(245,101,101,0.08);
      border: 1px solid rgba(245,101,101,0.2);
      color: #F56565;
      text-decoration: line-through;
      text-decoration-color: rgba(245,101,101,0.5);
    }
    .hw-diff-box--new {
      background: rgba(72,187,120,0.08);
      border: 1px solid rgba(72,187,120,0.2);
      color: #48BB78;
    }
    .hw-polish-overlay-foot {
      display: flex;
      gap: 8px;
      padding: 10px 12px 14px;
      border-top: 1px solid rgba(255,255,255,0.07);
    }
    .hw-polish-apply-btn {
      flex: 1;
      height: 40px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      background: linear-gradient(135deg, #2EE6C9, #5B8CFF);
      color: #0A0E18;
      border: none;
      cursor: pointer;
    }
    .hw-polish-cancel-btn {
      flex: 1;
      height: 40px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      background: rgba(255,255,255,0.06);
      color: var(--text2, #8A93A4);
      border: 1px solid rgba(255,255,255,0.1);
      cursor: pointer;
    }

    /* ===== 手工创作：章节标记样式 ===== */
    #hwEditor .hw-chapter-mark {
      display: block;
      width: 100%;
      padding: 6px 0 4px;
      margin: 8px 0 2px;
      font-size: 15px;
      font-weight: 700;
      color: var(--jade, #2EE6C9);
      border-bottom: 1px solid rgba(46,230,201,0.25);
      line-height: 1.4;
      letter-spacing: 0.03em;
    }

/* ===== 手工创作：章节标记样式 ===== */
    #hwEditor .hw-chapter-mark {
      display: block;
      width: 100%;
      padding: 6px 0 4px;
      margin: 8px 0 2px;
      font-size: 15px;
      font-weight: 700;
      color: var(--jade, #2EE6C9);
      border-bottom: 1px solid rgba(46,230,201,0.25);
      line-height: 1.4;
      letter-spacing: 0.03em;
    }

.create-handwrite-pane #hwEditor,
    .create-handwrite-pane .hw-editor {
      -webkit-touch-callout: none;
    }

/* 手工创作 · 键盘弹起时锁定页面滚动，避免顶栏工具被滚走 */
body.create-handwrite-pane .page[data-page="create"].active {
  overflow: hidden !important;
}

body.create-handwrite-pane.keyboard-open .hw-root {
  overflow: hidden;
}