/* Tiện ích "Write" (ink.js): lớp viết tay trên tờ đề + thanh công cụ nổi. */

/* Hai canvas phủ kín tờ đề: canvas dưới giữ nét đã xong, canvas trên (draft) vẽ nét đang viết và BẮT con trỏ khi đang
   viết. Ngoài chế độ viết cả hai bỏ qua con trỏ → đọc/chọn chữ/bấm link trên tờ như thường. */
.ink-canvas{position:absolute; top:0; left:0; pointer-events:none; z-index:2;}
.sheet.is-writing .ink-draft{
  pointer-events:auto; cursor:crosshair; z-index:3;
  /* chặn cuộn/zoom bằng ngón tay khi vẽ; công cụ "tay" bỏ chặn để cuộn */
  touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.sheet.is-writing.is-hand .ink-draft{pointer-events:none;}
.sheet.is-writing{outline:2px solid var(--accent); outline-offset:2px;}

/* Vùng nháp nối dài dưới đề — giấy kẻ dòng mờ */
.ink-space[hidden]{display:none;}
.ink-space{
  position:relative; border-top:1px dashed var(--line-strong);
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--line) 31px, var(--line) 32px);
}
.ink-space-label{ font-weight:600;
  position:absolute; top:6px; left:12px; font-family:var(--font-ui); font-size:.62rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-faint);
}

.ink-note[hidden]{display:none;}
.ink-note{
  max-width:720px; margin:0 auto 8px; padding:6px 10px; border-radius:var(--radius);
  background:var(--surface-2); border:1px solid var(--line); font-size:.74rem; color:var(--ink-soft);
}

/* Nút bút ở thanh xem đề */
.nav-btn.ink-btn.on{background:var(--accent); border-color:var(--accent); color:#fff;}

/* Thanh công cụ nổi, giữa đáy màn hình. Khi đang viết, dock tiện ích ẩn đi để khỏi chồng lên thanh. */
.ink-bar[hidden]{display:none;}
.ink-bar{
  /* left/right 0 + margin auto + width max-content: căn giữa mà vẫn được cả bề ngang để xếp. Kiểu left:50% +
     translateX(-50%) chỉ cho thanh nửa màn hình để co → ở 375 px nó gãy 3 dòng, rộng 222 px. */
  position:fixed; left:0; right:0; margin:0 auto; width:max-content; bottom:14px; z-index:58;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px;
  max-width:calc(100vw - 16px); padding:6px 8px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line-strong); box-shadow:var(--shadow);
  font-family:var(--font-ui);
}
body.ink-on .side-dock-launchers{display:none;}
.ink-group{display:flex; align-items:center; gap:2px;}
.ink-tool{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0;
  border:0; border-radius:9px; background:transparent; color:var(--ink-soft); cursor:pointer;
}
.ink-tool:hover:not(:disabled){background:var(--surface-2); color:var(--ink);}
.ink-tool.is-on{background:var(--accent-soft); color:var(--accent-ink);}
.ink-tool:disabled{opacity:.35; cursor:default;}
.ink-tool:focus-visible, .ink-swatch:focus-visible, .ink-done:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.ink-clear.is-armed{background:var(--danger, #b42318); color:#fff;}
.ink-colors{display:inline-flex; gap:3px; margin:0 3px;}
.ink-swatch{
  width:20px; height:20px; padding:0; border-radius:50%; border:2px solid var(--surface);
  background:var(--sw); box-shadow:0 0 0 1px var(--line-strong); cursor:pointer;
}
.ink-swatch.is-on{box-shadow:0 0 0 2px var(--accent);}
.ink-end{gap:8px;}
.ink-status{font-size:.72rem; color:var(--ink-faint); white-space:nowrap;}
.ink-status.is-error{color:var(--danger, #b42318);}
.ink-done{
  padding:7px 14px; border:0; border-radius:9px; background:var(--accent); color:#fff;
  font:inherit; font-size:.8rem; font-weight:600; cursor:pointer;
}

/* Công cụ "tay" (cuộn trang) chỉ cần trên màn cảm ứng — ẩn bằng CSS chứ không quyết một lần lúc dựng thanh, để còn theo
   đúng thiết bị khi cửa sổ/thiết bị đổi (máy tính màn cảm ứng, iPad nối chuột). */
@media (hover:hover) and (pointer:fine){ .ink-hand{display:none;} }

/* Dấu bút ở danh sách câu: câu đã có bài viết */
.qitem.has-ink .qitem-main .code::after{
  content:"✎"; margin-left:5px; font-size:.8em; color:var(--accent-ink);
}

@media (max-width:560px){
  .ink-bar{bottom:8px; gap:4px 6px; padding:5px 6px;}
  .ink-tool{width:32px; height:32px;}
  .ink-status{max-width:120px; overflow:hidden; text-overflow:ellipsis;}
}

/* Nút chữ trên thanh ("+ Space") — biểu tượng gạch ngang trước đây không ai đoán ra */
.ink-tool.ink-text{width:auto; padding:0 9px; font:inherit; font-size:.76rem; font-weight:600; white-space:nowrap;}

/* ---------- Hộp Share (trang câu hỏi) ---------- */
.ink-share-card{max-width:480px;}
.ink-share-link{display:flex; gap:8px; margin:10px 0;}
.ink-share-link input{flex:1; min-width:0; font-size:.8rem;}
.ink-share-fine{font-size:.76rem !important; color:var(--ink-faint) !important;}
.ink-share-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.ink-share-actions .btn{text-decoration:none;}

/* ---------- Trang bài được chia sẻ (work.html) ---------- */
.work-panel{padding:16px 18px; margin-bottom:14px;}
.work-panel[hidden]{display:none;}
.share-workspace .viewer[hidden]{display:none;} /* app.css đặt .viewer{display:flex} đè thuộc tính hidden — chế độ danh sách hiện khung rỗng */
.work-meta{flex-wrap:wrap; justify-content:flex-end; row-gap:4px;}
.work-meta > *{white-space:nowrap;}
.work-head h1{margin:0; font-family:var(--font-serif); font-size:1.2rem; color:var(--ink);}
.work-head span{display:block; margin-top:2px; font-size:.78rem; color:var(--ink-soft);}
.work-help{margin:8px 0; font-size:.82rem; line-height:1.55; color:var(--ink-soft);}
.work-row{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px;}
.work-row .btn{text-decoration:none;}
.work-danger{color:var(--danger, #b42318);}
.work-status{margin:6px 0 0; min-height:1em; font-size:.76rem; color:var(--ink-faint);}
.work-status.is-error{color:var(--danger, #b42318);}
.work-tag{font-weight:600; color:var(--danger, #b42318);}
.work-note-field{display:block; margin-top:10px; font-size:.8rem; color:var(--ink);}
.work-note-field span{display:block; margin-bottom:4px; font-weight:600;}
.work-note-field small{font-weight:400; color:var(--ink-faint);}
.work-note-field textarea{width:100%; resize:vertical; font:inherit; font-size:.85rem;}
.work-note{margin:10px 0; padding:8px 10px; border-left:3px solid var(--danger, #b42318); background:var(--surface-2); border-radius:6px;}
.work-note p{margin:4px 0 0; white-space:pre-wrap; font-size:.85rem;}
.work-layers{display:flex; flex-direction:column; gap:6px; margin:10px 0;}
.work-layer{display:flex; align-items:center; gap:6px; font-size:.84rem; color:var(--ink); cursor:pointer;}
.work-layer span{font-size:.74rem; color:var(--ink-faint);}
.work-reply{padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2);}
.work-reply-note{margin:4px 0 0 22px; white-space:pre-wrap; font-size:.84rem; color:var(--ink);}
.work-sec{margin:18px 0 6px; font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint);}
.work-item{display:block; padding:8px 10px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px; text-decoration:none; color:var(--ink); background:var(--surface);}
.work-item:hover{border-color:var(--accent);}
.work-item-title{display:block; font-size:.88rem; font-weight:600;}
.work-item-meta{display:block; font-size:.74rem; color:var(--ink-soft);}

/* ---------- S3: "Shared work" ở thanh trên + nhãn trả lời mới ---------- */
.sw-link{display:inline-flex; align-items:center; gap:5px; color:var(--ink-soft); text-decoration:none; white-space:nowrap;}
.sw-link:hover{color:var(--ink);}
.sw-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 5px;
  margin-left:4px; border-radius:999px; background:var(--danger, #dc2626); color:#fff; font-size:.66rem; font-weight:700;
}
.sw-badge[hidden]{display:none;}
.work-new{
  display:inline-block; margin-left:4px; padding:0 6px; border-radius:999px; background:var(--danger, #dc2626); color:#fff;
  font-size:.64rem; font-weight:700; vertical-align:middle;
}
.work-item.is-new{border-color:var(--danger, #dc2626);}
.work-notify{margin:4px 0 6px; font-size:.8rem;}
.work-notify span{color:var(--ink-faint);}